Arm
This example uses transform matrices to create an arm. The angle of each segment is controlled with the mouseX and mouseY position. The transformations applied to the first segment are also applied to the second segment because they are inside the same push() and pop() matrix group.
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
35
36
37
38
39
40
41
let x, y;
let angle1 = 0.0;
let angle2 = 0.0;
let segLength = 100;
function setup() {
createCanvas(720, 400);
strokeWeight(30);
//Stroke with a semi-transparent white
stroke(255, 160);
//Position the "shoulder" of the arm in the center of the canvas
x = width * 0.5;
y = height * 0.5;
}
function draw() {
background(0);
//Change the angle of the segments according to the mouse positions
angle1 = (mouseX / float(width) - 0.5) * -TWO_PI;
angle2 = (mouseY / float(height) - 0.5) * PI;
//use push and pop to "contain" the transforms. Note that
// even though we draw the segments using a custom function,
// the transforms still accumulate
push();
segment(x, y, angle1);
segment(segLength, 0, angle2);
pop();
}
//a custom function for drawing segments
function segment(x, y, a) {
translate(x, y);
rotate(a);
line(0, 0, segLength, 0);
}
