yunzhous-project-10

sketch

//Kathy Song
//Section D
//yunzhous@andrew.cmu.edu
//Project-10

var waves = [];//create an array to hold waves
var mountainPeak1 = 0.03;
var mountainSpeed1 = 0.0003;//speed of mountain
var mountainPeak2 = 0.01;
var mountainSpeed2 = 0.0005;//speed of mountain
var boat;
var lighthouse;
var bX = 480;//x position of boat

function setup() {
    createCanvas(480, 440);
    //create initial collection of waves
    for (var i = 0; i < 10; i++){
        var rx = random(width);
        waves[i] = makeWave(rx);
    }
}

function preload() {//load images of boat and lighthouse
    boat = loadImage("https://i.imgur.com/7ehKMrX.png"); // boat image
    lighthouse = loadImage("https://i.imgur.com/8foDjEk.png")//lighthouse image
}

function draw() {
    sun();//draw sun
    mountain1();//draw mountain1
    mountain2();//draw mountain2
    waterBackground();//draw water

    image(lighthouse, 350, height/2);//draw lighthosue
    //draw waves
    updeteAndDisplayWave();
    addWave();
    removeWaves();
    //draw boat
    makeBoat();
}

function waveDisplay(wave){ //draw waves
    var radius = 10;//radius increment of wave
    fill(255);
    stroke(39, 55, 81);
    strokeWeight(2);
    //create 4 rows of waves
    for (var i = 0; i < this.number; i++) {
        arc(this.x + 80, this.y - 60, this.number*radius, this.number*radius, PI, 2*PI);
    }
    for (var i = 0; i < this.number; i++) {
        arc(this.x + 20, this.y - 40, this.number*radius, this.number*radius, PI, 2*PI);
    }
    for (var i = 0; i < this.number; i++) {
        arc(this.x + 50, this.y - 20, this.number*radius, this.number*radius, PI, 2*PI);
    }
    for (var i = 0; i < this.number; i++) {
        arc(this.x, this.y, this.number*radius, this.number*radius, PI, 2*PI);
    }

}

function makeWave(){
    var wave = {x: width,
                y: height,
                number: round(random(2,8)),//control size of each wave
                speed: -1,
                breadth: 50,
                move: waveMove,
                display: waveDisplay
    }
    return wave;
}

function waveMove() {
    this.x += this.speed;//wave moves by the speed
}

function updeteAndDisplayWave(){//update wave's position and display them
    for (var i = 0; i < waves.length; i++){
        waves[i].move();
        waves[i].display();
    }

}

function removeWaves(){//remove waves that's outside of canvas
    var keepWaves = [];
    for (var i = 0; i < waves.length; i++) {
        if (waves[i].x + waves[i].breadth > 0) {
            keepWaves.push(waves[i]);
        }
    }
    waves = keepWaves;

}

function addWave(){//add new waves
    var waveChance = .05;
    if (random(0, 1) < waveChance) {
        waves.push(makeWave(width));
    }

}

function makeBoat(){
    bX -= .5;
    image(boat, bX, 3*height/4);
    if (bX < -40) { // if boat exits left, make it come in right
        bX = width;
    }
}

function mountain1(){//make mountain1
    noStroke(); 
    fill(21, 40 ,73);
    beginShape(); 
    for (var x = 0; x < width; x++) {
        var t = (x * mountainPeak1) + (millis() * mountainSpeed1);
        var y = map(noise(t), 0,1, height/5, height/2);
        vertex(x, y); 
    }
    vertex(width, height);
    vertex(0, height);
    endShape();
}

function mountain2(){//make mountain2
    noStroke(); 
    fill(50, 70, 104);
    beginShape(); 
    for (var x = 0; x < width; x++) {
        var t = (x * mountainPeak2) + (millis() * mountainSpeed2);
        var y = map(noise(t), 0,1, height/2, height*3/4);
        vertex(x, y); 
    }
    vertex(width, height);
    vertex(0, height);
    endShape();
}

function waterBackground(){
    fill(91, 141, 176);
    rect(0, 2*height/3, width, height/3);
}

function sun(){
    //gradient background
    for (var i = 0; i < 480; i++) {
        strokeWeight(2);
        stroke(94 + 1.5 * i, 120 + i, 158 + 0.5 * i);
        line(0, i, width, i);
    }
    //sun
    noStroke();
    fill(254, 255, 241);
    ellipse(350, 90, 120, 120);
}

I wanted to create a landscape with ocean, water, sun, lighthouse, mountain, and to for making it more playful, a paper boat. I started with making mountains using the noise function (the terrain sample code). I used a gradient color for the background using layers of lines. I used two images for the light house and the paper boat. I created waves as objects, and continuously adding waves to the canvas. I create several rows of waves and offset them to make the drawing more dynamic.

PS.I wanted to upload an image of my sketch but for some reason my phone keeps taking images filled with grey color…