aerubin-project-04-string-art

I was inspired by the interesting curves and shapes that are depicted in paintings of waves. I began by drawing a single wave and then trying different lengths and positions to create the desired effect. I also added movement in the bottom-most waves that makes it seem like it is moving from left to right. I really enjoy using the “for loops” in our design, it makes coding much faster and simpler than writing out every parameter for each line.

sketch

//Angela Rubin
//Section C
//aerubin@andrew.cmu.edu
//Project-04-String-Art

var Y_AXIS = 1;
var c1, c2;

function setup() {
    createCanvas(300, 400);
    background(220);
    c1 = color(255, 183, 60);
    c2 = color(45, 100, 245);
}

function draw() {
    background(220);

    setGradient(0, 0, 300, 400, c1, c2, Y_AXIS);

    for(var i=0; i <200; i++) {
        littlewaves(i);
}
    for(var p=0; p <200; p++) {
        rightwave(p);
}
    //Sun
    noStroke();
    fill(255, 250, 217);
    ellipse(153, 204, 50, 50);

}

function littlewaves(x) {
    //little waves on bottom
    for(var z=0; z<10; z++) {
    push();
    translate(x+(z*20)+(mouseX/2),30); //moves waves 
    rotate(radians(x*2));
    stroke(53, 74, 107);
    line(150,200,10 + x, 400);
    pop(); 
}
}

function rightwave(y) {
    //middle curve
    push();
    translate(y+210, 60);
    rotate(radians(y));
    stroke(97, 132, 158);
    line(150,200,10 + y, 200);
    pop();

    //large wave, dark colored
    push();
    translate(y+122, 170);
    rotate(radians(y*2));
    stroke(82, 115, 149);
    line(150,230,10 + y, 20);
    pop();

    //large wave, light colored
    push();
    translate(y+50, 150);
    rotate(radians(y));
    stroke(70, 170, 200);
    line(150,230,10 + y, 20);
    pop();
}

function setGradient(x, y, w, h, c1, c2, axis) {

    //Sets Gradient in Background
    noFill();
    if (axis == Y_AXIS) {
    for (var i = y; i < y+h; i++) {
    var inter = map(i, y, y+h, 0, 1);
    var c = lerpColor(c1, c2, inter);
        stroke(c);
        line(x, i, x+w, i);
    }
  }
}