///move your mouse!///
function setup() {
createCanvas(400, 300);
}
function draw() {
background('black');
//bottom left half almond
strokeWeight(2);
stroke('violet');
x1 = 0;
x2 = 0;
y1 = 300;
y2 = 0;
for (var i = 0; i < 20; i += 1) {
//restrain to stop mouse at center of almond shapes
x1 += min(mouseX, 80);
y2 += 15;
line(x1, y1, x2, y2);
}
//bottom left light green color
strokeWeight(1);
stroke('lightgreen');
x1 = 0;
x2 = 0;
y1 = 300;
y2 = 0;
for (var i = 0; i < 80; i += 1) {
x1 += min(mouseX, 80);
y2 += 5;
line(x1, y1, x2, y2);
}
//pattern repeats around canvas
//topleft
strokeWeight(2);
stroke('violet');
x3 = 0;
x4 = 0;
y3 = 300;
y4 = 0;
for (var i = 0; i < 20; i += 1) {
x4 += min(mouseX, 80);
y3 -= 15;
line(x3, y3, x4, y4);
}
strokeWeight(1);
stroke('lightgreen');
x3 = 0;
x4 = 0;
y3 = 300;
y4 = 0;
for (var i = 0; i < 80; i += 1) {
x4 += min(mouseX, 80);
y3 -= 5;
line(x3, y3, x4, y4);
}
//bottomright
strokeWeight(2);
stroke('violet');
x5 = 400;
x6 = 400;
y5 = 0;
y6 = 300;
for (var i = 0; i < 20; i += 1) {
//x5 -= 15;
x6 -= min(mouseX, 80);
y5 += 15;
line(x5, y5, x6, y6);
}
strokeWeight(1);
stroke('lightgreen');
x5 = 400;
x6 = 400;
y5 = 0;
y6 = 300;
for (var i = 0; i < 80; i += 1) {
//x5 -= 15;
x6 -= min(mouseX, 80);
y5 += 5;
line(x5, y5, x6, y6);
}
//top right
strokeWeight(2);
stroke('violet');
x7 = 0;
x8 = 400;
y7 = 0;
y8 = 0;
for (var i = 0; i < 20; i += 1) {
y8 += min(mouseX, 80);
x7 += 15;
line(x7, y7, x8, y8);
}
strokeWeight(1);
stroke('lightgreen');
x7 = 0;
x8 = 400;
y7 = 0;
y8 = 0;
for (var i = 0; i < 80; i += 1) {
y8 += min(mouseX, 80);
x7 += 5;
line(x7, y7, x8, y8);
}
}
i really enjoyed this project! it was quite a challenge beginning to understand for loops, but playing with these geometries reminds me of things i’ve done with parametric modeling software in my architecture classes. it’s interesting to see how specific concepts transfer between technologies.
i especially enjoyed animating the string art, as there are moments that are seemingly symmetrical and it creates a really beautiful reaction between the geometries.