Month: September 2019

sketch

/* Charmaine Qiu
   charmaiq@andrew.cmu.edu
   Section E
   Project 04 String Art*/
var spacing = 10;
var gcolor = 34;
var bcolor  = 140;
function setup() {
    createCanvas(400, 300);
}

function draw() {
  //set background color and initial stroke color of center piece
    background(0, 13, 255);
    stroke(255, gcolor, bcolor);
  //the center piece that follows the mouse
    for(var i = 0; i < 30; i++){
  //changes color when moving between left and right side of canvas
      if(mouseX > width / 3){
        stroke(150, gcolor, bcolor);
      }
      if(mouseX > 2*width / 3){
        stroke(50, gcolor, bcolor);
      }
  //the center piece drawn with a spacing variable that sets distance between two lines
      line(mouseX, i * spacing, width, height / 2);
      line(0, height / 2, mouseX, i * spacing);
    }
  //line art that surrounds the opposite corners of canvas
    for(var i = 0; i < width; i += 10){
  //yellow lines
      stroke(218, 245, 66);
      line(i, 0, width, i / 2);
      line(0, i, i /2, width);
  //orange lines
      stroke(255, 162, 0);
      line(width, height - i, width - i, 0);
      line(0, i / 2, i, height);
    }


}

It was challenging to figure out how to efficiently create the lines on canvas. I tried to incorporate an interactive aspect towards my project, and it was fun to explore with. I now have a better understanding of how digital line art is created and the thought process behind it.

sketch

/*Youie Cho
  Section E
  minyounc@andrew.cmu.edu
  Project-04-String Art*/

  var a = 7
  var b = 1

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

  function draw() {
      background(255, 179, 0);
      //pink sequence
      for (var i = 1; i < 1000; i++) {
          stroke(255, 69, 128);
          line(mouseX, i * a* mouseY / 100, i * a, height / 4);
      }
      //black sequence and rotation
      for (var i = 1; i <= 1000; i++) {
          stroke(0);
          rotate(90);
          line(mouseX, i * mouseY / 50, i * b, height / 2);
      }
      //yellow sequence and rotation
      for (var i = 1; i <= 1000; i++) {
          stroke(255, 215, 69);
          rotate(180);
          line(mouseX, i * mouseY / 25, i * a, height / 1.333333);
      }
      //purple sequence and rotation
      for (var i = 1; i <= 1000; i++) {
          stroke(174, 82, 255);
          rotate(270);
          line(mouseX, i * mouseY / 10, i * b, height);
      }
  }

I tried to play around with changing ratios to generate different sequences on different parts of the canvas, and rotated them to create complexity. I tried complex lines because interesting shapes and patterns can be generated through the movement of the mouse. It was challenging to understand the mechanism of loop, but I enjoyed how dynamic it could be.