aboyle-Project-04-String Art

aboyle String Art

function setup() {
    createCanvas(300, 400);
}

var move=100
var dir=1

function draw(){
    background(mouseX/2+mouseY/2);
    noFill();

//if moving lines hit the center of the circles, they switch direction
    move+=dir*2
    if (move>=300 || move<=100){
      dir=-dir
    }

  for (var i=10; i<=150; i+=10){
      //creates border lines on left
      stroke(0,300-mouseX,300-mouseX)
      line(0,110-i/2,i*2,0);
      line(0,296+i/2,i*2,400);
      //creates border lines on right
      line(300,360-i/2,i*2,400);
      line(300,30+i/2,i*2,0);
      //creates moving lines
      stroke(300-mouseX,0,300-mouseX)
      line(150,move,i-10,0);
      line(150,move,310-i,0);
      line(150,move,i-10,400);
      line(150,move,310-i,400);


    if (i<100){
      //creates side curves
      stroke(300-mouseX,0,0)
      curve(-200-i*4,150,0,155-i/5,0,255+i/5,-200-i*4,250)
      curve(500+i*4,150,300,145-i/5,300,245+i/5,500+i*4,250)
      //creates circles
      ellipse(150,100,30+i/2)
      ellipse(150,300,30+i/2)
      //creates center curves
      stroke(0,0,300-mouseX)
      curve(0,400,0,300,100+i,200,100,0);
      curve(0,400,300,300,100+i,200,100,0);
      //mirror image of curves
      push();
      translate(width,height);
      rotate(PI);
      curve(0,400,0,300,100+i,200,100,0);
      curve(0,400,300,300,100+i,200,100,0);
      pop();

    }
  }
}

I didn’t really have any ideas about what I wanted the final product to look like, so I just started messing around with different lines to see what would happen. I think that string art is visually appealing, so now that I have a basic grasp on for() I’m excited to play around with it in the future. I decided to add some color changes and movement as well, just to spice it up a little. The one thing I had trouble with was creating the center curves; I ended up making one half and then mirroring it with push() and pop(), but I bet there’s a simpler way to do it.