My process for this project was to find a beautiful thing to create with strings, a butterfly seems natural to me, as they are pretty and delicate.
sketchDownload
var dx1;
var dy1;
var dx2;
var dy2;
var ex1;
var ex2;
var ey1;
var ey2;
var numLines = 30;
var count=0;
function setup() {
createCanvas(400, 300);
background(255,157,172);
dx1 = (150-100)/numLines; //body variables
dy1 = (50-25)/numLines;
dx2 = (200-150)/numLines;
dy2 = (250-275)/numLines;
ex1 = (75-5)/numLines; //wing variables
ey1 = (25-125)/numLines;
ex2 = (325-395)/numLines;
ey2 = (225-125)/numLines;
fx1 = (125-115)/numLines; //smaller wing variables
fy1 = (125-80)/numLines;
fx2 = (125-115)/numLines;
fy2 = (125-170)/numLines;
}
function mousePressed() {
if(count==0){
count=1
push();
stroke(255);
for (var i = 2; i < 400; i+=4){
line(0, height-i, i, 0)
line(i, 300, 400, height-i);
}
pop();
push(); //butterflies body upper left bottom right
stroke(83,129,132);
line(150, 25, 200, 50);
line(200, 275, 250, 250);
line(200, 50, 250, 25);
line(200, 275, 150, 250);
var x1 = 150;
var y1 = 25;
var x2 = 250;
var y2 = 250;
for (var i = 0; i <= numLines; i += 1) {
line(x1, y1, x2, y2);
x1 += dx1;
y1 += dy1;
x2 -= dx2;
y2 -= dy2;
}
pop();
push();
stroke(83,129,132); //butterflies body upper right bottom left
var x1 = 250;
var y1 = 25;
var x2 = 150;
var y2 = 250;
for (var i = 0; i <= numLines; i += 1) {
line(x1, y1, x2, y2);
x1 -= dx1;
y1 += dy1;
x2 += dx2;
y2 -= dy2;
}
pop();
push();
stroke(118,26,125); //left purple stream
var x1 = 75;
var y1 = 25;
var x2 = 75;
var y2 = 225;
for (var i = 0; i <= numLines; i += 1) {
line(x1, y1, x2, y2);
x1 -= ex1;
y1 -= ey1;
x2 -= ex2;
y2 += ey2;
}
pop();
push();
stroke(118,26,125); //right purple stream
var x1 = 325;
var y1 = 225;
var x2 = 325;
var y2 = 25;
for (var i = 0; i <= numLines; i += 1) {
line(x1, y1, x2, y2);
x1 -= ex1;
y1 -= ey1;
x2 -= ex2;
y2 += ey2;
}
pop();
push();
stroke(247,247,187); //small yellow wings
line(125,125,115,80);
line(125,125,115,170);
line(275,125,285,80);
line(275,125,285,170);
var x1 = 115;
var y1 = 80;
var x2 = 285;
var y2 = 170;
for (var i = 0; i <= numLines; i += 1) {
line(x1, y1, x2, y2);
x1 += fx1;
y1 += fy1;
x2 -= fx2;
y2 += fy2;
}
var x1 = 115;
var y1 = 170;
var x2 = 285;
var y2 = 80;
for (var i = 0; i <= numLines; i += 1) {
line(x1, y1, x2, y2);
x1 += fx1;
y1 -= fy1;
x2 -= fx2;
y2 -= fy2;
}
pop();
push();
stroke(4,194,226); //upper left bottom right wing
line(5,125,75,25);
line(395,125,325,25);
line(5,125,75,225);
line(395,125,325,225);
var x1 = 75;
var y1 = 25;
var x2 = 325;
var y2 = 225;
for (var i = 0; i <= numLines; i += 1) {
line(x1, y1, x2, y2);
x1 -= ex1;
y1 -= ey1;
x2 -= ex2;
y2 -= ey2;
}
pop();
push();
stroke(4,194,226); //lower left upper right wing
var x1 = 5;
var y1 = 125;
var x2 = 395;
var y2 = 125;
for (var i = 0; i <= numLines; i += 1) {
line(x1, y1, x2, y2);
x1 += ex1;
y1 -= ey1;
x2 += ex2;
y2 -= ey2;
}
pop();
noLoop();
} else if(count==1){
count=0;
push();
stroke(255,255,0);
for (var i = 2; i < 400; i+=4){
line(0, height-i, i, 0)
line(i, 300, 400, height-i);
}
pop();
push(); //butterflies body upper left bottom right
stroke(255,165,0);
line(150, 25, 200, 50);
line(200, 275, 250, 250);
line(200, 50, 250, 25);
line(200, 275, 150, 250);
var x1 = 150;
var y1 = 25;
var x2 = 250;
var y2 = 250;
for (var i = 0; i <= numLines; i += 1) {
line(x1, y1, x2, y2);
x1 += dx1;
y1 += dy1;
x2 -= dx2;
y2 -= dy2;
}
pop();
push();
stroke(255,165,0); //butterflies body upper right bottom left
var x1 = 250;
var y1 = 25;
var x2 = 150;
var y2 = 250;
for (var i = 0; i <= numLines; i += 1) {
line(x1, y1, x2, y2);
x1 -= dx1;
y1 += dy1;
x2 += dx2;
y2 -= dy2;
}
pop();
push();
stroke(0,255,165); //left green stream
var x1 = 75;
var y1 = 25;
var x2 = 75;
var y2 = 225;
for (var i = 0; i <= numLines; i += 1) {
line(x1, y1, x2, y2);
x1 -= ex1;
y1 -= ey1;
x2 -= ex2;
y2 += ey2;
}
pop();
push();
stroke(0,255,165); //right green stream
var x1 = 325;
var y1 = 225;
var x2 = 325;
var y2 = 25;
for (var i = 0; i <= numLines; i += 1) {
line(x1, y1, x2, y2);
x1 -= ex1;
y1 -= ey1;
x2 -= ex2;
y2 += ey2;
}
pop();
push();
stroke(255,0,90); //small pink wings
line(125,125,115,80);
line(125,125,115,170);
line(275,125,285,80);
line(275,125,285,170);
var x1 = 115;
var y1 = 80;
var x2 = 285;
var y2 = 170;
for (var i = 0; i <= numLines; i += 1) {
line(x1, y1, x2, y2);
x1 += fx1;
y1 += fy1;
x2 -= fx2;
y2 += fy2;
}
var x1 = 115;
var y1 = 170;
var x2 = 285;
var y2 = 80;
for (var i = 0; i <= numLines; i += 1) {
line(x1, y1, x2, y2);
x1 += fx1;
y1 -= fy1;
x2 -= fx2;
y2 -= fy2;
}
pop();
push();
stroke(255,0,218); //upper left bottom right wing
line(5,125,75,25);
line(395,125,325,25);
line(5,125,75,225);
line(395,125,325,225);
var x1 = 75;
var y1 = 25;
var x2 = 325;
var y2 = 225;
for (var i = 0; i <= numLines; i += 1) {
line(x1, y1, x2, y2);
x1 -= ex1;
y1 -= ey1;
x2 -= ex2;
y2 -= ey2;
}
pop();
push();
stroke(255,0,218); //lower left upper right wing
var x1 = 5;
var y1 = 125;
var x2 = 395;
var y2 = 125;
for (var i = 0; i <= numLines; i += 1) {
line(x1, y1, x2, y2);
x1 += ex1;
y1 -= ey1;
x2 += ex2;
y2 -= ey2;
}
pop();
noLoop();
}
}