Mreyes-Project-10

sketch

//Mercedes Reys

//Section C 

//mreyes@andrew.cmu.edu

//project-10

//plant images
var plantLinks = [
    "http://i.imgur.com/soZ0M4T.png",
    "http://i.imgur.com/5jepe87.png",
    "http://i.imgur.com/gykEUiU.png",
    "http://i.imgur.com/66xaRxm.png",
    "http://i.imgur.com/oIwcCrB.png",
    "http://i.imgur.com/oIwcCrB.png",
    "http://i.imgur.com/DtJV3gc.png",
    "http://i.imgur.com/990trNC.png",
    "http://i.imgur.com/FIWKdfq.png",
    "http://i.imgur.com/S1al7lF.png",
    "http://i.imgur.com/g3buUN0.png",
    "http://i.imgur.com/fL8CKao.png.jpg"
  ]
//empty arrays
var plantImage = [];
var grass = [];

//pre-load images
function preload() {
    for(var i = 0; i < plantLinks.length; i ++){
        plantImage.push(loadImage(plantLinks[i]));
    }
}
function setup() {
    createCanvas(640, 240); 
    
    //initial images
    for (var i = 0; i < 40; i++){
        var rx = random(width);
        grass[i] = make(rx);
    }
    frameRate(10);
}


function draw() {
    background(90,194,194);
    update();
    removeImages();
    add(); 
}


function update(){
    // display image 
    for (var i = 0; i < grass.length; i++){
        grass[i].move();
        grass[i].display();
    }
}


function removeImages(){
 //remove images when they are past canvas
    var buildingsToKeep = [];
    for (var i = 0; i < grass.length; i++){
        if (grass[i].x + grass[i].breadth > 0) {
            buildingsToKeep.push(grass[i]);
        }
    }
}


function add() {
    //add imagages
    var newGrass = 1; 
    if (random(0,5) < newGrass) {
        grass.push(make(width));
  }
}

function imageMove() {
  //images move to the side
    this.x += this.speed;
}
    
function imagesDisplay() {
    noStroke();
    strokeWeight(6)
    fill(50,205,50);

    //heights
    var gHeight = this.n * 5; 
    var cHeight = this.n * 20; 
    var pHeigth = this.n * 30

    push();
    translate(this.x, height+40);
    ellipseMode(CORNER);
    //grass
    ellipse(0, -gHeight, this.breadth, this.breadth);
    var p = floor(random(0,plantLinks.length));
    //plants
    image(plantImage[p],-gHeight,-gHeight,this.breadth,this.breadth);
    fill(255,200,200,100);
    //pink bubbles
    ellipse(-cHeight,-cHeight,this.breadth,this.breadth);
    pop();
   
}


function make(birthLocationX) {
    //draw image at beging of canvas
    var bldg = {x: birthLocationX,
                breadth: 80,
                speed: -5,
                n: random(0,20),
                move: imageMove,
                display: imagesDisplay}
    return bldg;
}

I wanted to go for a surreal and whimsical valley type landscape. I wanted to use photo images from the beginning but the rapid shuffling came by messing around with the code.