getting stringy

sketch
// Jaden Luscher
// jluscher
// section A
// project 4: string art

// increments along lines
var dx1;
var dy1;
var dx2;
var dy2;
var dx3;
var dy3;
var dx4;
var dy4;

// line density
var numLines = 50;

// determines location / quadrant of strings1 function
// when mycount = 0, the top left quadrant is drawn
var mycount = 0;

function setup() {
    createCanvas(400, 600);
    background(200,200,0);
}

function draw() {
  dx1 = (50-100)/numLines;
  dy1 = (150-300)/numLines; // split up L1

  dx2 = (200-200)/numLines;
  dy2 = (250-50)/numLines; // split up M1

  dx3 = (350-300)/numLines;
  dy3 = (150-300)/numLines; // split up R1

  dx4 = (350-50)/numLines; // split up horizontal line
  dy4 = (600-0)/numLines/2;  // split up long vertical (height)

  // brown lines
  push();
  strokeWeight(0.2);
  stroke("brown");
  bgStrings(350, 300, 200, 0);
  bgStrings(350, 300, 400, 0);
  bgStrings(50, 300, 200, 0);
  bgStrings(50, 300, 0, 0);
  pop();

  stroke(255);
  strokeWeight(0.7);
  outline(); // draw base lines (L1, M1, R1, L2, M2, R2)

  push();
  strings1(50, 150, 200, 250);  // call function to connect L1 to M1
  mycount = 1;
  strings1(350, 150, 200, 250);  // connect R1 to M1

  translate(width, height); // flip canvas to mirror strings
  rotate(PI);
  mycount = 0;  // reset to 0
  strings1(50, 150, 200, 250);  // L1 to M1
  mycount = 1;  // string1 uses "else" conditional do draw top right quadrant
  strings1(350, 150, 200, 250);  // R1 to M1
  pop();

  // lines at center of canvas (resemble parallelogram)
  strings2(200, 250, 50, 300);
  strings2(200, 350, 50, 300);

  noLoop();
}

function outline() {
  // top lines
  line(50, 150, 100, 300);  // L1
  line(200, 250, 200, 50);   // M1
  line(350, 150, 300, 300);   // R1

  // bottom lines
  line(50, 450, 100, 300);  // L2
  line(200, 550, 200, 350);  // M2
  line(350, 450, 300, 300);   // R2

  push();
  strokeWeight(2);
  line(width/2, 0, width/2, 250);
  line(width/2, height, width/2, 350);
  pop();

  // other lines
  line(0, height/2, width, height/2);   // horizontal line
}

function bgStrings(a, b, x, y) {
  for (var i = 0; i <= numLines*2; i += 1) {
    line(a, b, x, y);
    y += dy4;
  }
}

function strings1(x1, y1, x2, y2) {
  for (var i = 0; i <= numLines; i += 1) {
    line(x1, y1, x2, y2);
    if(mycount == 0) {  // top left quadrant
      x1 -= dx1;
      y1 -= dy1;
      x2 -= dx2;
      y2 -= dy2;
    } else {          // top right quadrant
      x1 -= dx3;
      y1 -= dy3;
      x2 -= dx2;
      y2 -= dy2;
    }
  }
}

function strings2(a, b, x, y) {
  for (var i = 0; i <= numLines; i += 1) {
    line(a, b, x, y);
    x += dx4;
  }
}

Leave a Reply