Yingyang Zhou-Project-04-String-Art

string art

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

function draw() {
  background(220);
    var amt = 0;
    var a = 0;
    var b = 0;
    var x1 = lerp(mouseX, 300, amt);
    var y1 = lerp(mouseY, 300, amt);
    var x2 = width;
    var y2 = height;
    var x1StepSize = 3;
    var y1StepSize = 10;
    var x2StepSize = 7;
    var y2StepSize = 8;
    var x3 = 0;
    var y3 = 0;
    var x3StepSize = 2;
    var x4 = lerp(0,400, amt);
    var y4 = lerp(0,300,amt);
    var r = 240;
    var g = 80;
    var b = 50;
    for(var i =0; i < 400; i++){
      amt += 0.1;
      x3 += x3StepSize;
      line(x3, height, x3+i, 0);
      line(x3, y3, x4, y4);
    }
    for(x1 == 0; x1 < width; x1+=x1StepSize){
      amt += 0.1;
      y1 += y1StepSize;
      x2 -= x2StepSize;
      y2 -= y2StepSize;
      r -= 3;
      b += 1;
      stroke(r, g, b);
      strokeWeight(0.5);
      line(x1, y1, x2, y2);
      line(y1, x1, y2, x2);
      line(0, height, x1, y1);
      line(width,0, x2, y2);
    }

}

By using lerp and for loop, there are ‘curve’ which made by straight lines, with mouse moving the color and position of lines will change with it.