String Art-Butterfly

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();
}
}

Leave a Reply