Project 4 – String Art

sketch

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

function draw() {
  var x0 = 100;
  var y0 = 50;
  var x1 = 300;
  var y1 = 250;
  var xX = 100;
  var yX = 50;
  var gap = 5;
  var redness = 220;
	background (0, 0, 0);
  //the first shape which is a square
	for (var i=1; i<41; i++){
    stroke (255, redness, redness);
    line (xX, y0, x1, yX);
    line (width-xX, y1, x0, height-yX);
    stroke (255, 220-redness, 220-redness);
    line (width-xX, y0, x0, yX);
    line (xX, y1, x1, height-yX);
    xX += gap;
    yX += gap;
    redness -= gap;
  }

  //the second shape that is like a cross
  var xC = width/2;
  var yC = 0;
  var greeness = 100;
  for (var j=0; j<31; j++){
    stroke (255, greeness, 0);
    line (width/2, yC, xC, height/2);
    line (width/2, yC, width-xC, height/2);
    line (width/2, height-yC, xC, height/2);
    line (width/2, height-yC, width-xC, height/2);
    xC += gap;
    yC += gap;
    greeness += gap;
  }

  //the third shape that connects the cross
  var yM = 0;
  var xM = width/4*3;
  var blueness = 50;
  for (var x=0; x<11; x++){
    stroke (blueness, blueness, 255);
    line (width/2, yM, xM, height/2);
    line (width/2, yM, width-xM, height/2);
    line (width/2, height-yM, xM, height/2);
    line (width/2, height-yM, width-xM, height/2);
    yM += gap;
    xM += gap;
    blueness += gap*2;
  }

  //the fourth shape that rotates from the center
  var centerX = width/2;
  var centerY = height/2;
  var radius = 200;
  var angle = 0;
  var factor = dist(mouseX, mouseY, centerX, centerY);
  //map the distance to the scale of radians
  var angleC = map(factor, 0, (200^2+150^2)^(1/2), 0, PI);
  for (var y=0;y<36;y++){
    x1 = centerX + radius * Math.cos( angle );
    y1 = centerY + radius * Math.sin( angle );
    x2 = centerX - radius * Math.cos( angle );
    y2 = centerY - radius * Math.sin( angle );
    stroke (204,255,153);
    line (x1, y1, x2, y2);
    //the angle of the rotation is related to the mouse
    angle += angleC;
  }
}

My project was inspired by the idea of centralization. All the curves point to the center or rotate through the center. Also, I look for the string art online and get some inspiration of the form.