Project 10 – Alison Hoffman

For this project I was trying to create a underwater landscape. I was rather scared to work with objects, so I kept concept rather simple in order to focus on really learning to work with objects. I definitely feel more comfortable working with objects after this project, actually I think its makes simple animation like this a lot easier.

sketch

var redFishies = [];
var yelFishies = [];
var tSpeed = 0.0001;
var tDetail = 0.003;


function setup() {
    createCanvas(600, 400); 
    
    // create an initial collection of fish
    for (var i = 0; i < 10; i++){
        redFishies[i] = makeRedFish(random(width),random(height-100));
        yelFishies[i] = makeYelFish(random(width),random(height-100));
    }
    frameRate(12);
}


function draw() {
    var cB = 20;
    x = map(cB,0,height,255,0);
    background(100,173,193);
   
    updateAndDisplayRedFish();
    removeRedFish();
    addNewRedFish();

    updateAndDisplayYelFish();
    removeYelFish();
    addNewYelFish(); 

    //dark purple
    noStroke();
    beginShape(); 
    fill(56,30,81);
    vertex(0,height);
    for (var x = 0; x < width; x++) {
        var t = (x * tDetail) + (millis() * tSpeed);
        var y = map(noise(t), 0,1,300, height+50);
        vertex(x, y);
    }
    vertex(width,height);
    endShape(CLOSE);
    //light purple
    noStroke();
    beginShape(); 
    fill(98,79,119);
    vertex(0,height);
    for (var x = 0; x < width; x++) {
        var t = (x * tDetail) + (millis() * tSpeed);
        var y = map(noise(t), 1,0,320, height);
        vertex(x, y);
    }
    vertex(width,height);
    endShape(CLOSE);

}

//red fish
function updateAndDisplayRedFish(){
    for (var i = 0; i < redFishies.length; i++){
        redFishies[i].move();
        redFishies[i].display();
    }
}


function removeRedFish(){
    var redFishToKeep = [];
    for (var i = 0; i < redFishies.length; i++){
        if (redFishies[i].x + redFishies[i].bodySize > 0) {
            redFishToKeep.push(redFishies[i]);
        }
    }
    redFishies = redFishToKeep; // only keeps fish on screen
}


function addNewRedFish() {
    // adds new red fish with randomization
    var newRedFishLikelihood = 0.02; 
    if (random(0,1) < newRedFishLikelihood) {
        redFishies.push(makeRedFish(width,random(2,height-100)));
    }
}


// updates postion of red fish
function redfishSwim() {
    this.x += this.speed;
}
    

// draw the building and some windows
function redfishDisplay() {
    fill(this.colorR,this.colorG,0); 
    noStroke(); 
    push();
    translate(this.x, this.y);
    ellipse(0, 0, this.bodySize, this.bodyWidth);
    triangle(this.bodyWidth+9,-10,
             this.bodyWidth+9,10,
             this.bodyWidth-3,0)
    pop();
}


function makeRedFish(LocationX,LocationY) {
    var redfish = {x: LocationX,
                y: LocationY,
                bodyWidth: random(12,25),
                bodySize: random(40,80),
                speed: random(-3.0,-1.0),
                colorR: random(130,240),
                colorG: random(20,80),
                move: redfishSwim,
                display: redfishDisplay}
    return redfish;
}


// yellow fish
function updateAndDisplayYelFish(){
    for (var i = 0; i < yelFishies.length; i++){
        yelFishies[i].move();
        yelFishies[i].display();
    }
}


function removeYelFish(){
    var yelFishToKeep = [];
    for (var i = 0; i < yelFishies.length; i++){
        if (yelFishies[i].x + yelFishies[i].bodySize > 0) {
            yelFishToKeep.push(yelFishies[i]);
        }
    }
    yelFishies = yelFishToKeep; // only keeps yellow fish on screen
}


function addNewYelFish() {
    // adds new yellow fish with randomization
    var newYelFishLikelihood = 0.02; 
    if (random(0,1) < newYelFishLikelihood) {
        yelFishies.push(makeYelFish(width,random(2,height-100)));
    }
}


// updates postion of yel fish
function yelfishSwim() {
    this.x += this.speed;
}
    

// draw the building and some windows
function yelfishDisplay() {
    fill(220,this.colorG,0); 
    noStroke(); 
    push();
    translate(this.x, this.y);
    ellipse(0, 0, this.bodySize, this.bodyWidth);
    triangle(this.bodyWidth+9,-10,
             this.bodyWidth+9,10,
             this.bodyWidth-3,0)
    pop();
}


function makeYelFish(LocationX,LocationY) {
    var yelfish = {x: LocationX,
                y: LocationY,
                bodyWidth: random(12,25),
                bodySize: random(40,60),
                speed: random(-3.0,-1.0),
                colorG: random(190,255),
                move: yelfishSwim,
                display: yelfishDisplay}
    return yelfish;
}