JJ Legelis Project 10

Boats and Waves

sketch

// John Legelis
// Section D

var boat = []

function setup() {
    createCanvas(480, 480);
    background(0);

}

function draw() {

    background(135, 206, 250)

    //Land terrain
    var land = 0.003;
    var landS = 0.00005;
    stroke("green");
    beginShape(); 
    for (i = 0; i < width; i++) {
        var h = (millis() * landS) + (i * land);
        var y = map(noise(h), 0, 1, 100, 0);
        line(i, y, i, height);
    }
    endShape();

    // Rear wave
    var back = 0.0051;
    var backS = 0.0002;
    stroke(0,142,170);
    beginShape(); 
    for (i = 0; i < width; i++) {
        var h = (millis() * backS) + (i * back);
        var y = map(noise(h), 0, 1, 200, 0);
        line(i, y, i, height);
    }
    endShape();

    //probablity that determines if boat is drawn
    if (random() < 0.03){
        boat.push(makeBoat())
    }
    //Draw and move the boat if made
    for (var h = 0; h < boat.length; h++){
        boat[h].draw()
        boat[h].move() 
    }


    //middle wave terrain
    var mid = 0.0054;
    var midS = 0.0004;
    stroke(0,153,183);
    beginShape(); 
    for (j = 0; j < width; j++) {
        var h = (millis() * midS) + (j * mid);
        var y = map(noise(h), 0, 1, 300, 200);
        line(j, y, j, height);
    }
    endShape();

    //foreground wave
    var fore = 0.006;
    var foreS = 0.0007;
    stroke(0,172,206);
    beginShape(); 
    for (j = 0; j < width; j++) {
        var h = (millis() * foreS) + (j * fore);
        var y = map(noise(h), 0, 1, height, 300);
        line(j, y, j, height);
    }
    endShape();


}

//object containig boat
function makeBoat(){
    var bo = {x:480, y: 230, move: moveBoat, draw: drawBoat}
    return bo
}

//what boat looks like
function drawBoat(){
    var randsailH = random(30,50)
    noStroke()
    fill("brown")
    rect(this.x, this.y, 60,20)
    fill("white")
    triangle(this.x + 10, this.y, this.x + 35, this.y - randsailH, this.x + 25, this.y)
    triangle(this.x + 40, this.y, this.x + 65, this.y - randsailH, this.x + 55, this.y)
    }

// Move that boat
function moveBoat(){
    this.x = this.x - 4 
}

This week’s sketch was a rather large undertaking as it involved using objects on our own for the first time. It took quite some time to be able to properly implement an object without having my hand held through the lab but I eventually succeeded. I stumbled upon the random sail movement by accident but I loved the effect of billowing sails in the wind.