mjanco – Final Project – Section B

sketch

//Michelle Janco
//mjanco@andrew.cmu.edu
//Final Project - Section B

var fish = [];
var tree = .05;
var treeSpeed = .0009;
var lX = 300;
var song;

//yellow sky color
var yellowSkyR = 240;
var yellowSkyG = 215;
var yellowSkyB = 87;

//new sky color
var skyR = 217;
var skyG = 98;
var skyB = 88;

function setup() {
    createCanvas(640, 240);
    // create fish
    for (var i = 0; i < 5; i++){
        var rx = random(width);
        fish[i] = makefish(rx);
    }
  frameRate(30);
}

function draw() {
    background(yellowSkyR, yellowSkyG, yellowSkyB);
    displayHorizon();
    makeTree();
    updateAndDisplayfish();
    removefishThatAreOutOfView();
    addNewfishWithSomeRandomProbability();

    //change background color as mouse
    //moves across canvas
    if ((mouseX >= 640) & (mouseX <=640)){
      mouseX = 640;
  }
    if ((mouseX > 0) & (mouseX < 640)){
        yellowSkyR = mouseX*((217-240)/640) + 240;
        yellowSkyG = mouseX*((98-215)/640) + 215;
        yellowSkyB = mouseX*((88-87)/640) + 87;
    }

    //big cloud
    fill(255);
    ellipse(mouseX + 5, 55, 20);
    ellipse(mouseX + 25, 50, 35);
    ellipse(mouseX + 40, 60, 25);
    ellipse(mouseX + 55, 50, 40);
    ellipse(mouseX + 80, 50, 25);
    ellipse(mouseX + 95, 55, 15);

    //smaller cloud
    fill(255);
    ellipse(mouseX + 68, 10, 10);
    ellipse(mouseX + 80, 10, 20);
    ellipse(mouseX + 95, 10, 25);
    ellipse(mouseX + 110, 10, 30);
    ellipse(mouseX + 125, 8, 30);
    ellipse(mouseX + 140, 10, 15);
    ellipse(mouseX + 145, 10, 10);

    //smallest cloud
    fill(255);
    ellipse(mouseX + 268, 40, 10);
    ellipse(mouseX + 280, 40, 20);
    ellipse(mouseX + 295, 40, 25);
    ellipse(mouseX + 310, 40, 40);
    ellipse(mouseX + 325, 38, 30);
    ellipse(mouseX + 340, 40, 15);
    ellipse(mouseX + 345, 40, 10);
}

function mouseClicked() {
  //if mouse is inside sun, draw text
    var d = dist(mouseX, mouseY, 550, 50);
    if (d < 100) {
    showText(true);
    }
}

function showText(mouse) {
    if (mouse==true) {
      textSize(32);
      fill(0);
      text("Salmon Skies", 20, 50);
    }
}

//make trees
function makeTree() {
    noStroke();
    fill(22, 60, 28);
    beginShape();
    for (var i = 0; i < width; i++) {
        var x = (i * tree) + (millis() * treeSpeed);
        var y = map(noise(x), 0, 1, height/2, height/3);
        vertex(i, y);
    }
    vertex(width, height-height/2);
    vertex(0, height-height/2);
    endShape();
}

function displayHorizon() {
    noStroke();
    line(0,height-height/2, width, height-height/2);
    //pond
    fill(44, 80, 108);
    rect(0, height-height/2, width, height-height/2);
    //sun
    fill(240);
    noStroke();
    ellipse(550, 50, 50, 50);
}

function updateAndDisplayfish(){
    // update fish positions, display them
    for (var i = 0; i < fish.length; i++){
        fish[i].move();
        fish[i].display();
    }
}

function removefishThatAreOutOfView(){
    //if entirety of the fish are off canvas
    //then remove them
    var fishToKeep = [];
    for (var i = 0; i < fish.length; i++){
        if (fish[i].x + fish[i].breadth > 0) {
            fishToKeep.push(fish[i]);
    }
        }
  fish = fishToKeep;
}

function addNewfishWithSomeRandomProbability() {
    //small probability, add a new fish to the end
    var newfishLikelihood = 0.005;
    if (random(0,1) < newfishLikelihood) {
        fish.push(makefish(width));
    }
}

//update position of fish
function fishMove() {
    this.x += this.speed;
}

//draw the fish
function fishDisplay() {
    var fishHeight = random(10, 15);
    var fHeight = (20);
    fill(219, 97, 87, 150);
    noStroke();
    push();
    translate(this.x, height - 60);
    //fish body
    ellipse(0, -fHeight, this.breadth, fishHeight);
    fill(255);
    //fish eyes
    ellipse(-13, -fHeight, 4, 6);
    fill(0);
    ellipse(-13, -fHeight, 2, 3);
    //fish fins
    fill(219, 97, 87, 150);
    ellipse(0, -fHeight+7, 4, 8);
    fill(219, 97, 87, 150);
    ellipse(-2, -fHeight-7, 6, 8);
    fill(219, 97, 87, 150);
    arc(23, -fHeight, 30, 30, 0, HALF_PI);

    //fish reflection
    fill(219, 97, 87, 30);
    ellipse(0, fHeight, this.breadth, fishHeight);
    //reflection fish eyes
    fill(255, 30);
    ellipse(-13, fHeight, 4, 6);
    fill(0, 30);
    ellipse(-13, fHeight, 2, 3);
    //reflection fish fins
    fill(219, 97, 87, 30);
    ellipse(0, fHeight+7, 4, 8);
    fill(219, 97, 87, 30);
    ellipse(-2, fHeight-7, 6, 8);
    fill(219, 97, 87, 30);
    arc(23, fHeight, 30, 30, 0, HALF_PI)
    pop();
}

function makefish(birthLocationX) {
    var fis = {x: birthLocationX,
                breadth: 50,
                speed: -2.0,
                nlil: round(random(2,40)),
                move: fishMove,
                display: fishDisplay}
    return fis;
}

For this project, I wanted to go back to a concept that I struggled with. During the generative landscape project, I ran into quite a few problems and was not able to make an image that I found aesthetically pleasing. I wanted to return to this, and have more time to work through the concepts to be able to make something calming to watch. I am drawn to imagery that relaxes the viewer, and I imagine this is the type of image that could be watched to slow down a person’s heart rate, as the fish move at a calming pace. I love going to the lake back home with my Dad and watching the fish go by, which was always a therapeutic activity. This image in my head was what I wanted to emulate. Considering the amount of difficulty and trouble I have faced in this class, I’m glad I had extra time to really focus, take my time, and make something that feels fairly complete. I learned a lot more skills from being able to slow down and focus on these concepts.