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);
rotate(radians(45));
rect(-25, -25, 50, 50);
[/js]

Example of transformation + scale + rotation.
More info here.
[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);
rotate(radians(45));
scale(0.5);
rect(0, 0, 40, 40);
pop();
}
[/js]

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

A possible solution:

[js]
function setup() {createCanvas(380, 800);
background(255);
noFill();
rectMode(CENTER);var rows = 25;
var cols = 12;
var side = 30;

for(var r = 0; r < rows; r++)
{
for(var c = 0; c < cols; c++)
{
push();

var scatteringX = random(-r/2, r/2);
var scatteringY = random(-r/2, r/2);

translate(25 + scatteringX + c*side, 25 + r*side + scatteringY);

var randomness = r*2;

var angle = random(-randomness, randomness);

rotate(radians(angle));
rect(0, 0, side, side);
pop();
}
}
}

[/js]

Posted in