Reach 2
The arm follows the position of the mouse by calculating the angles with atan2(). Based on code from Keith Peters.
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
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
let numSegments = 10,
x = [],
y = [],
angle = [],
segLength = 26,
targetX,
targetY;
for (let i = 0; i < numSegments; i++) {
x[i] = 0;
y[i] = 0;
angle[i] = 0;
}
function setup() {
createCanvas(710, 400);
strokeWeight(20);
stroke(255, 100);
x[x.length - 1] = width / 2; // Set base x-coordinate
y[x.length - 1] = height; // Set base y-coordinate
}
function draw() {
background(0);
reachSegment(0, mouseX, mouseY);
for (let i = 1; i < numSegments; i++) {
reachSegment(i, targetX, targetY);
}
for (let j = x.length - 1; j >= 1; j--) {
positionSegment(j, j - 1);
}
for (let k = 0; k < x.length; k++) {
segment(x[k], y[k], angle[k], (k + 1) * 2);
}
}
function positionSegment(a, b) {
x[b] = x[a] + cos(angle[a]) * segLength;
y[b] = y[a] + sin(angle[a]) * segLength;
}
function reachSegment(i, xin, yin) {
const dx = xin - x[i];
const dy = yin - y[i];
angle[i] = atan2(dy, dx);
targetX = xin - cos(angle[i]) * segLength;
targetY = yin - sin(angle[i]) * segLength;
}
function segment(x, y, a, sw) {
strokeWeight(sw);
push();
translate(x, y);
rotate(a);
line(0, 0, segLength, 0);
pop();
}
