Siwei Xie – Project04 – String Art

sketch

//Siwei Xie
//Section B
//sxie1@andrew.cmu.edu
//Project-04

var StepSize1 = 30;
var StepSize2 = 50;

function setup() {
    createCanvas(400, 300);
    background("black");
}
 
function draw() {

  //red curves on upper left
   var x1 = 0;
   var y1 = 0;
   var x2 = 300;
   var y2 = 5;

   for (var i = 0; i < 85; i += 1) {
    stroke(220, 104, 100);
    line(x1, y1, x2, y2);

    x2 -= 30;
    y1 += 30;

  }

  //orange curves on lower left
   var x1 = 0;
   var y1 = 0;
   var x2 = 60;
   var y2 = 400;

   for (var i = 0; i < 85; i += 1) {
    stroke("orange");
    line(x1, y1, x2, y2);

    x2 += 30;
    y1 += 30;
  }

  //yellow curves on lower left
   var x1 = 0;
   var y1 = 0;
   var x2 = 200;
   var y2 = 300;

   for (var i = 0; i < 85; i += 1) {
    stroke("yellow");
    line(x1, y1, x2, y2);

    x2 += 30;
    y1 += 30;
  }

  //green curves on lower right
   var x1 = 400;
   var y1 = 0;
   var x2 = 200;
   var y2 = 300;

   for (var i = 0; i < 85; i += 1) {
    stroke("green");
    line(x1, y1, x2, y2);

    x2 -= 30;
    y1 += 30;
  }

  //blue curves on lower right
   var x1 = 400;
   var y1 = 0;
   var x2 = 300;
   var y2 = 400;

   for (var i = 0; i < 85; i += 1) {
    stroke("blue");
    line(x1, y1, x2, y2);

    x2 -= 30;
    y1 += 30;
  }

  //purple curves on upper right
   var x1 = 400;
   var y1 = 0;
   var x2 = 100;
   var y2 = 5;

   for (var i = 0; i < 85; i += 1) {
    stroke("purple");
    line(x1, y1, x2, y2);

    x2 += 30;
    y1 += 30;
  }

}

I created a color scheme with a hollow diamond in the middle.

It was hard to figure out how to form the curvy lines at the beginning, but after I got the first set of lines done, the following constructions were easier.