Translate
The translate() function allows objects to be moved to any location within the window. The first parameter sets the x-axis offset and the second parameter sets the y-axis offset. This example shows how transforms accumulate.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
let x = 0;
let y = 0;
let dim = 80.0;
function setup() {
createCanvas(720, 400);
noStroke();
}
function draw() {
background(102);
// Animate by increasing our x value
x = x + 0.8;
// If the shape goes off the canvas, reset the position
if (x > width + dim) {
x = -dim;
}
// Even though our rect command draws the shape with its
// center at the origin, translate moves it to the new
// x and y position
translate(x, height / 2 - dim / 2);
fill(255);
rect(-dim / 2, -dim / 2, dim, dim);
// Transforms accumulate. Notice how this rect moves
// twice as fast as the other, but it has the same
// parameter for the x-axis value
translate(x, dim);
fill(0);
rect(-dim / 2, -dim / 2, dim, dim);
}
