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

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