Judy Li-Project-10-Landscape

judyli: Landscape Project 10

/*
Judy Li
Section A
judyli@andrew.cmu.edu
Project-10
*/

var terrainSpeed = 0.0005;
var terrainDetail = 0.002;
var terrainDetail1 = 0.00125;
var terrainDetail2 = 0.001;
var terrainDetail3 = 0.0005;
var yaxis = 1;
var c;
var c1;
var c2;
var star = [];

function setup() {
    createCanvas(480, 480);
    frameRate(10);
    c2 = color(179, 77, 37);
    c1 = color(64, 40, 74);
    c = color(247, 222, 85);

    star.push(drawStar());
}

function wave1() {
	beginShape();
	stroke(26, 20, 95);
    for (var x = 0; x < width; x++) {
        var t = (x * terrainDetail) + (millis() * terrainSpeed);
        var y = map(noise(t), 0, 5, 0, height / 4);
        line(x, y + (height / 2), x, height); 
    }
    endShape();
}

function wave2() {
	beginShape();
	stroke(26, 40, 95);
    for (var x = 0; x < width; x++) {
        var t = (x * terrainDetail1) + (millis() * terrainSpeed);
        var y = map(noise(t), 0, 4, 0, height / 2);
        line(x, y + 15 + (height / 2), x, height); 
    }
    endShape();
}

function wave3() {
	beginShape();
	stroke(26, 60, 95);
    for (var x = 0; x < width; x++) {
        var t = (x * terrainDetail2) + (millis() * terrainSpeed);
        var y = map(noise(t), 0, 3.5, 0, height);
        line(x, y + 25 + (height / 2), x, height); 
    }
    endShape();
}

function wave4() {
	beginShape();
	stroke(26, 70, 95);
    for (var x = 0; x < width; x++) {
        var t = (x * terrainDetail3) + (millis() * terrainSpeed);
        var y = map(noise(t), 0, 3, 0, height);
        line(x, y + 50 + (height / 2), x, height); 
    }
    endShape();
}

 
function draw() {
    background("white");
    nStar();
    nPosition();
    nArray();
    setGradient(0, 0, width, height / 3, c1, c2, yaxis);
    setGradient(0, height / 3, width, 2 * (height / 3), c2, c, yaxis);

    fill(247, 222, 125);
    ellipse(width / 2, 25 + (height / 2), 50, 50);

    push();
    strokeWeight(1.5);
    stroke(255, 255, 255, 100);
    ellipse(width - 50, 50, 50, 50);
    fill(247, 222, 200);
    ellipse(width - 50, 50, 49, 49);
    pop(); 

    for (var i = 0; i < star.length; i++) {
        star[i].display();
    }

    push();
    wave1();
    wave2();
    wave3();
    wave4();
    noFill();
    rect(0, 0, width, height);
    pop();
}

function nStar() {
    if (random(0, 250) < 50) {
        star.push(drawStar());
    }
}

function nPosition() {
    for (var i = 0; i < star.length; i++) {
        star[i].move();
    }
}

function nArray() {
    var ogStar = [];
    for (var i = 0; i < star.length; i++) {
        if (star[i].x > 0) {
            ogStar.push(star[i]);
        }
    }
    star = ogStar;
}

function moveStar() {
    this.x -= this.speed;
}

function seeStar() {
    stroke(255, 255, 255, 250);
    strokeWeight(random(1, 5));
    point(this.x, this.y);
}

function drawStar() {
    var star = {x: width,
        pdist: 100,
        speed: 5,
        starsize: round(random(0, 5)),
        y: round(random(0, height / 4)),
        move: moveStar,
        display: seeStar
        }
    return star;
}

function setGradient(x, y, w, h, c1, c2, axis) {
    noFill();
    if (axis == yaxis) {  // Top to bottom gradient
	    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);
		}
	}
}

For this project, I wanted to mimic the moment of a sunset on the horizons of an ocean. I used four waves to create a different movement between the others. I also included stars slowly throughout to capture the day to night lapse. And to make it a little fun on the part of the sun, the stroke weights were in a random order so that it captures the movement of the disappearing sun. I had a lot of fun with this project, but I struggled a bit in the beginning with the details of the wave. But I think that the templates on the course page helped a lot with my other objects.