# 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);
rect(-25, -25, 50, 50);
```

Example of transformation + scale + rotation.

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

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