Project 04: String Art

Move your mouse to create different forms!

sketch
//Angela Yang
//Section C

var numLines = 100;
var r;
var g; 
var b;

function setup() {
    createCanvas(300, 400);
    r = random (0, 255); 
    g = random (20, 255);
    b = random (100, 255);
}

function draw() {
    background("#F6F4D8");
    //The mouse controls the motion of the strings on canvas. 
    var x = constrain(mouseX, 50, width);
    var y = constrain(mouseY, 50, height);
  
    //Mirror x and y coordinates. 
    var x2 = width - x;
    var y2 = height - y;

  
    // First set
    //The string is incremeting by 5 for each line that is drawn on canvas.
    for (var i = 0; i <=numLines; i += 5) {
        stroke(r, g, b);
          line(i, y2, x2, height + i);
          line(width + i, y, x, i);
          line(width + i, y2, x, height + i);
          line(i, y, x2, i);
    }
    
    //Second Set
    for (var i = 0; i <=numLines; i += 10) {
        stroke(0, 204, 204);
           line(width - i, y, x2, height);
           line(i, y2, x, i);
           line(width - i, y2, x2, i);
           line(i, y, x, height);
      
    //Third Set
    for (var i = 0; i <=numLines; i += 5) {
        stroke(0, 160, 150);
           line(width - i, y, x2, height+i);
           line(i, y2, x2, i);
           line(width - i, y, x2, i);
           line(i, y, x, height+i);
    }
  
   }
}

Leave a Reply