Project-04: String Art

sketch-beansDownload
//Yeon Lee, Section C
//Project-04: String Art

var dx1;
var dy1;
var dx2;
var dy2;
var dx3;
var dy3;
var numOfLines = 50;
var angle = 0;

function setup() {
    createCanvas(400, 300);
    background(244, 226, 116);
    dx = width / numOfLines;
    dy = height / numOfLines;    
    dx2 = 100 / numOfLines;
    dy2 = 200 / numOfLines;    
    dx3 = -100 / numOfLines;
    dy3 = -200 / numOfLines;
}

function draw() {
    var x1 = 0;
    var y1 = 0;
    var x2 = 0;
    var y2 = height;
    var x3 = 0;
    var y3 = 0;
    var x4 = width;
    var y4 = 0;
    var x5 = 0;
    var y5 = 0;
    var x6 = 0;
    var y6 = height / 3;    
    var x7 = width;
    var y7 = 0;
    var x8 = 0;
    var y8 = 0;    
    var x9 = 300;
    var y9 = 0;
    var x10 = 400;
    var y10 = 300;
    var x11 = 300;
    var y11 = 400;
    var x12 = 400;
    var y12 = 300;

    //draw torquoise lines on the left bottom
    for (var i = 0; i <= numOfLines; i ++) {
        stroke(123, 169, 147);
        line(x1, y1, x2, y2);
        y1 += dy;
        x2 += dx;
    }

    //draw pink lines on top right in the very back
    for (var i = 0; i <= numOfLines; i ++) {
        stroke(240,192,165);
        line(x3, y3, x4, y4);
        x3 += dx2;
        y4 += dy2;
    }    

    //draw purple lines on the left
    for (var i = 0; i <= numOfLines; i ++) { 
        stroke(177, 131, 222);
        line(x5, y5, x6, y6);
        x5 += dx2;
        y6 += dy2;
    }

    //draw light orange lines in the back
    for (var i = 0; i <= numOfLines; i ++) { 
        stroke(255, 195, 153);
        line(x7, y7, x8, y8);
        x7 += dx2;
        y8 += dy2;
    }    

    //draw light yellow lines in the back
    for (var i = 0; i <= numOfLines; i ++) {
        stroke(255,245,153);
        line(x7, y7, x8, y8);
        x7 += dx2;
        y8 += dy2;
    }    

    //draw light green lines on top right
    for (var i = 0; i <= numOfLines; i += 1) {
        stroke(127, 255, 180);
        line(x9, y9, x10, y10);
        x9 += dx3;
        y10 += dy3;
    }

    //draw blue lines on bottom right
    for (var i = 0; i <= numOfLines; i ++) {
        stroke(102,116,255);
        line(x11, y11, x12, y12);
        x11 += dx3;
        y12 += dy3;
    }

    noLoop();
}

I enjoyed playing around with variables to change the colors and shapes of the lines around. By overlapping lines on top of each other, one by one, I loved to mixture of colors and harmony it created among themselves.

Leave a Reply