Morph
Changing one shape into another by interpolating vertices from one to another.
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
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
// Two ArrayLists to store the vertices for two shapes
// This example assumes that each shape will have the same
// number of vertices, i.e. the size of each ArrayList will be the same
let circle = [];
let square = [];
// An ArrayList for a third set of vertices, the ones we will be drawing
// in the window
let morph = [];
// This boolean variable will control if we are morphing to a circle or square
let state = false;
function setup() {
createCanvas(720, 400);
// Create a circle using vectors pointing from center
for (let angle = 0; angle < 360; angle += 9) {
// Note we are not starting from 0 in order to match the
// path of a circle.
let v = p5.Vector.fromAngle(radians(angle - 135));
v.mult(100);
circle.push(v);
// Let's fill out morph ArrayList with blank PVectors while we are at it
morph.push(createVector());
}
// A square is a bunch of vertices along straight lines
// Top of square
for (let x = -50; x < 50; x += 10) {
square.push(createVector(x, -50));
}
// Right side
for (let y = -50; y < 50; y += 10) {
square.push(createVector(50, y));
}
// Bottom
for (let x = 50; x > -50; x -= 10) {
square.push(createVector(x, 50));
}
// Left side
for (let y = 50; y > -50; y -= 10) {
square.push(createVector(-50, y));
}
}
function draw() {
background(51);
// We will keep how far the vertices are from their target
let totalDistance = 0;
// Look at each vertex
for (let i = 0; i < circle.length; i++) {
let v1;
// Are we lerping to the circle or square?
if (state) {
v1 = circle[i];
} else {
v1 = square[i];
}
// Get the vertex we will draw
let v2 = morph[i];
// Lerp to the target
v2.lerp(v1, 0.1);
// Check how far we are from target
totalDistance += p5.Vector.dist(v1, v2);
}
// If all the vertices are close, switch shape
if (totalDistance < 0.1) {
state = !state;
}
// Draw relative to center
translate(width / 2, height / 2);
strokeWeight(4);
// Draw a polygon that makes up all the vertices
beginShape();
noFill();
stroke(255);
morph.forEach(v => {
vertex(v.x, v.y);
});
endShape(CLOSE);
}
