Transformation Matrix (rotate, translate, scale)


Try this

translate(30, 20);
rect(0, 0, 55, 55);
translate(14, 14);
rect(0, 0, 55, 55);

What happened?

And this:

translate(width/2, height/2);
rotate(radians(45));
rect(-25, -25, 50, 50);

Example of transformation + scale + rotation.
More info here.

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();
}

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

A possible solution:

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();
}
}
}

Posted in