Transformation Matrix (rotate, translate, scale)

Try this

[js]
translate(30, 20);
rect(0, 0, 55, 55);
translate(14, 14);
rect(0, 0, 55, 55);
[/js]
What happened?

And this:
[js]
translate(width/2, height/2);
rect(-25, -25, 50, 50);
[/js]

Example of transformation + scale + rotation.
[js]
function setup()
{
createCanvas(200, 200);
background(255);
noStroke();
rectMode(CENTER);

// draw the original position in gray
fill(192);
rect(0, 0, 40, 40);

// draw a translucent blue rectangle in the new position
fill(0, 0, 255, 128);

push();
translate(100, 100);
scale(0.5);
rect(0, 0, 40, 40);
pop();
}
[/js]

For loop + rotation.
1. push
2. translate first to the pivot, the center of rotation
3. rotate (don’t forget to convert in radians)
4. draw as if the origin (the center of your composition) was 0, 0
5. pop

``` var rows = 10; var cols = 12; var distanceX = 30; var distanceY = 30; ```

``` function setup() { createCanvas(400, 400); background(0); //stroke(18, 255, 233); noStroke(); for (var r = 1; r <= rows; r++) { for (var c = 1; c <= cols; c++) { push(); translate(c * distanceX, r * distanceY); rotate( radians(45) ); fill(r*25, c*25, 0); rect(0, 0, 20, 20); pop(); } } }```

Now try to reproduce the plotter drawing below (or your take on it). (Georg Nees Schotter, 1968) Posted in