Project 10 – Sofia Syjuco

sketch

//Sofia Syjuco
//section A
//smsyjuco@andrew.cmu.edu
// Assignment - 10-c

var boats = [];// create an array to store the boats


function setup(){
    createCanvas(600,400,100);// create a canvas
    background(230);// set the background color

    for (var i = 0;i<5;i++){ // for loop to populate the array with boats
        var fb = random(2*width);
        boats[i] = makeBoat(fb);
    }
    frameRate(10);// frame rate at 10 fps
}

function draw(){
    noStroke(); // no strokes around shapes

    //bottom layer of ocean
    push();
    fill(100,150,255,80);
    rect(0,200,600,150);
    pop();

    callMoveAndDisplayBoats();// call the function to update boats on screen
    addNewBoat();// add new boats
    clearBoat();// clear boats when they pass the left edge of the screen

    push();
    //top layer of ocean
    fill(50,150,255,90);
    rect(0,300,600,100);
    pop();

}

function makeBoat(startLocationX){// main boat function, stores all the important information
    var boat = {x: startLocationX,
                display: boatDisplay,
                move: boatMove,
                speed: -1.0 * random(0.75,2),
                sailColorR: round(random(0,255)),
                sailColorG: round(random(0,255)),
                sailColorB: round(random(0,255)),
                boatHeight: 50,
                boatWidth: 100,
    }
    return boat;
}
function boatDisplay(){// this function displays the boat, holds the code to draw it basically
    push();
    arc(this.x,290,this.boatWidth,this.boatHeight,0,PI,CHORD);
    fill(this.sailColorR,this.sailColorG, this.sailColorB);
    triangle(this.x-50,220,this.x-50,280,this.x+40,280);
    pop();
}
function boatMove(){// keeps boats moving by adding the "speed" to the x value each time
    this.x += this.speed;
}
function addNewBoat(){// adds new boats to the array depending on a probability of 0.001
    var newBoatChance = 0.001;
    if (random(0,1)< newBoatChance){
        boats.push(makeBoat(width));
    }
}
function clearBoat(){// clear boats away once they pass screen edge
    var boatsToKeep = [];// by constantly putting acceptable boats into a new array of "to keep" boats
    for (var i = 0; i<boats.length; i++){// check with each loop
        if (boats[i].x > 0){// if the boat x is greater than screen edge
            boatsToKeep.push(boats[i]); // put it in the "too keep" pile, basically
        }
    }
    boats = boatsToKeep; // assign the boats to keep to boats
}
function callMoveAndDisplayBoats(){ // this function contains the instructions to move and display boats
    for (var i = 0;i<boats.length;i++){
        boats[i].move();
        boats[i].display();
    }
}

When I saw the prompt was generative landscape, I really wanted to make something to do with ships. I thought it could be interesting to vary the type of hulls and sails and such, but time constraints narrowed my process down to something else: making a regatta. I liked the idea of still having random boats, with sails different colors, but instead of making that the main random aspect of the piece, the speed of the boats was the focus. So that watching them pass becomes more of an activity, and less a passive perusal of what colors are currently on the screen.