Project 04 – String Art

Sunset at the Beach

//Srishty Bhavsar
//15-104
//Section C
var dx1;
var dy1;
var dx2;
var dy2;
var numLines = 50;

function setup() {
    createCanvas(400, 400);
    background(200);
    text("p5.js vers 0.9.0 test.", 10, 15);
    line(50, 50, 150, 300);
    line(300, 300, 400, 100);
}




function draw() {
    createCanvas(400,300);
    //sky blue background
    background(193,242,254);
        // for loop that initializes =, lines up to 700, and spaced +1
    dx1 = (150-50)/numLines;
    dy1 = (300-50)/numLines;
    dx2 = (350-300)/numLines;
    dy2 = (100-300)/numLines;
    
// faint mountains in background
    var x1 = -100;
    var y1 = -30;
    var x2 = 500;
    var y2 = -200;

    for (var i = 0; i <= numLines; i += 1) {
        x1 += dx1;
        y1 += dy1;
        x2 += dx2;
        y2 += dy2;
        push()
        stroke(167,84,41,40);
        translate(200,150);
        rotate(PI/3); // flipped so they look like mountains
        line(x1/2, y1, x2, y2);
        pop();
        push()
        stroke(167,84,41,30);
        translate(100,150);
        rotate(PI/3);
        line(x1/2, y1, x2, y2);
        pop();
    }


    for (var i = 0; i <= numLines; i += 1) {

        var x1 = 0;
        var x2 = (i*width)/50;
        var y1 = (i*width)/50;
        var y2 = height;

        //Ocean blue waves (light to dark)
        stroke(219,247,253);
        line(x1 + 50, y1 + 100, x2, y2);
        stroke(0,157,196); // brightest blue
        line(x1, y1 + 80, x2, y2);
        line(width + (x2), height - y1, x2, y2);
        stroke(1,90,112); // oceanside blue
        line(width+500, height-y1, x2, y2);
        line(width+500, height-y1, x2 + 100 , y2);
        line(x1, y1 + 150, x2, y2);
        line(x1, y1 + 200, x2, y2);


        //sand
        stroke(246, 240, 210); // dark sand color
        line(x1, height - 20, x2 - 100, height);
        stroke(205, 170, 109); //lighter sand color
        line(x1, height-30, x2 + 10, height);
        stroke(255,255,240); //ivoru sand color
        line(x1, height -10, x2 -100, height);

    }

    //setting sun
     for (var i = 0; i <= 50 + numLines; i += 1) {
        
        // sun sets position above water
        var x1 = 200;
        var y1 = 250;
        stroke(250, 180, 20, 100); // sunny yellow 
        strokeWeight(2)
        push() // stored
        translate(x1, y1);
        rotate((i*PI)/numLines); //center filled circle
        line(0, 0, 0, 100); // rays
        pop() // resets

    }


    noLoop();
}