Chelsea Fan-Project 11-Landscape

Landscape

/* Chelsea Fan
Section 1B
chelseaf@andrew.cmu.edu
Project-11
*/
//important variables
var fish = [];
var star = [];

function setup() {
    createCanvas(480, 480);
    frameRate(20);
    //initial collection of fish
    for (i = 0; i < 30; i++) {
        var fishx = random(width);
        var fishy = random(300, height);
        fish[i] = makeFish(fishx, fishy);
    }
    //initial collection of stars
    for (i = 0; i < 10; i++) {
        var starx = random(width);
        var stary = random(0, 100);
        star[i] = makeStar(starx, stary);
    }
}

function draw() {
    //black background
    background(0);
    //draw mountains, water, bed, fish, stars, and moon
    drawMountains();
    drawWater();
    drawBed();
    fishies();
    stars();
    drawMoon();
}

function drawBed() {
    stroke(0); //black outline
    fill(255, 254, 242); //bed color
    rect((width/2)-30, (height/2)-10, 150, 40); //bed shape
    fill(255); //pillow color
    ellipse(width/2+105, height/2-14, 30, 10); //pillow shape
    fill(255, 243, 222); //head color
    ellipse(width/2+100, height/2-25, 20, 20); //head shape
    noStroke(); //no outline for neck
    ellipse(width/2+83, height/2-20, 20, 5); //neck shape
    stroke(0); //black outline
    fill(203, 202, 204); //blanket color
    ellipse(width/2+30, height/2-10, 120, 40); //blanket shape
}

function drawWater() {
    fill(66, 112, 128); //blue water color
    rect(0, height/2, width, height); //fill bottom half of canvas
}

function drawFish() {
    noStroke(); //no outline
    fill(255, 160, 122); //orange fish color
    push();
    translate(this.x1, this.y1); //locate fish at x1, y1
    ellipse(10, 10, 10, 5); //fish body
    triangle(10, 10, 5, 5, 5, 15); //fish tail
    pop();
}

function makeFish(xlocation, ylocation) {
    var makeF = {x1: xlocation, 
                y1: ylocation, 
                fishx: random(0, width), 
                fishy: random(300, height),
                speed: -3.0,
                move: moveFish,
                draw: drawFish}
    return makeF;
}

function moveFish() {
    this.x1 += this.speed; //speed of fish moving
    if (this.x1<=-10) { //restart fish at width after it disappears on left
        this.x1 += width;
    }
}

function fishies() {
    for(i=0; i<fish.length; i++) {
        fish[i].move();
        fish[i].draw();
    }
}

function drawStar() {
    noStroke();
    fill(255, 251, 0); //yellow color
    push();
    translate(this.x2, this.y2); //draw stars at x2, y2
    ellipse(10, 10, 5, 5); //star shape
    pop();
}

function makeStar(xlocation, ylocation) {
    var makeS = {x2: xlocation, 
                y2: ylocation, 
                starx: random(0, width), 
                stary: random(0, 100),
                speed: -3.0,
                move: moveStar,
                draw: drawStar}
    return makeS;
}

function moveStar() {
    this.x2 += this.speed; //speed of stars moving
    if (this.x2<=-10) { //restart stars on right if it leaves canvas
        this.x2 += width;
    }
}

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

function drawMoon(){
    fill(255, 253, 184); //yellow moon color
    ellipse(400, 50, 50, 50); //moon shape
}

function drawMountains(){
    noStroke();
    fill(43, 43, 36); //dark gray mountain color
    beginShape(); 
    for (i=0; i<width; i++) {
        var mountainSpeed = .0007; //speed of mountains moving
        var mountainDetail = 0.02; //smoothness of mountains
        var t = (i * mountainDetail) + (millis() * mountainSpeed);
        //mountain y coord
        var y = map(noise(t), 0, 1.8, height/8, height);
        //keep drawing mountain
        vertex(i, y);
    }
    //height constriant of mountains
    vertex(width, height);
    //restart mountains at left side 
    vertex(0, height);
    endShape();
}

This process took me a long time. I spent a while thinking about what I wanted to draw and I decided on a Parent Trap theme with a bed floating in the ocean. The stars, moon, mountains, and fish are meant to resemble an ocean view at night. I had some difficulty making my own object, but once I got the hang of it, it was pretty fun.