myoungsh-project-04-string-art

sketch

function setup() {
  createCanvas(400, 300);
  background(0);
  angleMode(DEGREES);
  for(var x = 100; x < 300; x += 10) { //vary x
    stroke(256);
    line(width, x, x, 0); //draw a line, curve it using varied x
  }
  push(); //reflect the curve
  scale(-1, 1);
  translate(-400, 0);
  for(var y = 100; y < 300; y += 10) {
    stroke(256);
    line(width, y, y, 0); 
  }
  pop();
  push(); //reflect both curves
  scale(1, -1);
  translate(0, -300);
  for(var n = 100; n < 300; n += 10) {
    stroke(256);
    line(width, n, n, 0); 
  }
  push();
  scale(-1, 1);
  translate(-400, 0);
  for(var z = 100; z < 300; z += 10) {
    stroke(256);
    line(width, z, z, 0); 
  }
  pop();
  pop();
  push(); //disapear into the distance
  scale(.5, .5);
  translate(200, 150);
  for(var x1 = 100; x1 < 300; x1 += 10) {
    stroke(256);
    line(width, x1, x1, 0); 
  }
  push();
  scale(-1, 1);
  translate(-400, 0);
  for(var y1 = 100; y1 < 300; y1 += 10) {
    stroke(256);
    line(width, y1, y1, 0); 
  }
  pop();
  push();
  scale(1, -1);
  translate(0, -300);
  for(var n1 = 100; n1 < 300; n1 += 10) {
    stroke(256);
    line(width, n1, n1, 0); 
  }
  push();
  scale(-1, 1);
  translate(-400, 0);
  for(var z1 = 100; z1 < 300; z1 += 10) {
    stroke(256);
    line(width, z1, z1, 0); 
  }
  pop();
  pop();
  pop();
  push(); //go even further back
  scale(.25, .25);
  translate(600, 450);
  for(var x2 = 100; x2 < 300; x2 += 10) {
    stroke(256);
    line(width, x2, x2, 0); 
  }
  push();
  scale(-1, 1);
  translate(-400, 0);
  for(var y2 = 100; y2 < 300; y2 += 10) {
    stroke(256);
    line(width, y2, y2, 0); 
  }
  pop();
  push();
  scale(1, -1);
  translate(0, -300);
  for(var n2 = 100; n2 < 300; n2 += 10) {
    stroke(256);
    line(width, n2, n2, 0); 
  }
  push();
  scale(-1, 1);
  translate(-400, 0);
  for(var z2 = 100; z2 < 300; z2 += 10) {
    stroke(256);
    line(width, z2, z2, 0); 
  }
  pop();
  pop();
  push();
  scale(.5, .5);
  translate(200, 150);
  for(var x3 = 100; x3 < 300; x3 += 10) {
    stroke(256);
    line(width, x3, x3, 0); 
  }
  push();
  scale(-1, 1);
  translate(-400, 0);
  for(var y3 = 100; y3 < 300; y3 += 10) {
    stroke(256);
    line(width, y3, y3, 0); 
  }
  pop();
  push();
  scale(1, -1);
  translate(0, -300);
  for(var n3 = 100; n3 < 300; n3 += 10) {
    stroke(256);
    line(width, n3, n3, 0); 
  }
  push();
  scale(-1, 1);
  translate(-400, 0);
  for(var z3 = 100; z3 < 300; z3 += 10) {
    stroke(256);
    line(width, z3, z3, 0); 
  }
  pop();
  pop();
  pop();
  pop();
}

This project started with a lot of frustration with only being able to create arrays of line. And then once I was able to create a curve creating another curve, and controlling it was close to impossible within the same for loop. To solve this problem I copied the same curve and used translations to draw more.