FINAL PROJECT

I was inspired by digital interactive infographics and how they are able to relay important information to educate the audience in a very effective and engaging way. I thought it was important to show the visuals in order to help visual learners better understand and connect the information to the real world. I feel that 2020 was a rough year for many things but the current world has always been harsh to the environment. I had my infographic focused on the environment because I didn’t want people to forget about the horrible things happening to the environment because of the pandemic. I had my birds turn to grayscale to show the decrease in biodiversity due to the accelerating extinction of birds. I intended for the hills to turn to a dimmer color in order to fit the final image where the clouds and sky look gloomy with trees on fire and stone like birds flying across the page. However, I originally intended it to show how satellite images showed that the Amazon Forest is slowly becoming less green and less efficient at processing carbon dioxide due to the pollution. I am pretty happy with how the project turned out and I think I learned a lot during the debugging process and problem solving!

sketch
var trees = [];
var bird = [];
var cloud = [];
var hillVar= 0.009
var r = 188
var g = 219
var b = 245
var tr =14
var tg = 99
var tb = 42
var sky = 0
var newTreeLikelihood = 0.03; 
var newBirdLikelihood= 0.2;
var newCloudLikelihood=0.04;
var textShown = 1
var hillCondition = 0
var clickCondition = 0
var fire = 0
var fx = []
var fy = []
var birdcolor = 0
var birdDiv = ["https://i.imgur.com/L7k89AJ.png",
               "https://i.imgur.com/dnY7u7s.png",
               "https://i.imgur.com/a1m3PWp.png"]

function preload() {
  img = loadImage("https://i.imgur.com/W9zRul7.png");
  brd = loadImage(random(birdDiv));
  brdgray = loadImage("https://i.imgur.com/ile7nc8.png")
  //crackling = loadSound('https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/12/414767__samarobryn__crackling-fire.wav')
}

function soundSetup(){
    crackling.setVolume(7)
}

function setup() {
    createCanvas(480, 480); 
    
    // create an initial collection of buildings


    for (var i = 0; i < 10; i++){
        var rx = random(width);
        var ry = random(10, 50);
        trees[i] = makeTree(rx);
        bird[i] = makeBird(rx);
        for(var f = 0; f< 8; f++){

          fx[f] = trees[i].x-trees[i].breadth*2-350//random(trees[i].x-1,trees[i].x+1);
          fy[f] = -trees[i].nFloors*20//random(trees[i].nFloors*20,-90)
      }
}
frameRate(10);
    }
    

    


function draw() {
    background(r, g, b);
    if (sky == 0) {
    r = 188
    g = 219
    b = 245
  }
  else if (sky==1) {
    r = 177
    g = 194
    b = 199
  } else if (sky == 2) {
    r = 167
    g = 169
    b = 171
  } 



    drawHill() 

    updateAndDisplayCloud();
    removeCloud();
    addNewCloud()


    

    displayHorizon();

    updateAndDisplayTrees();
    removeTreesThatHaveSlippedOutOfView();
    addNewTreesWithSomeRandomProbability(); 

    updateAndDisplayBird();
    removeBird();
    addNewBird()

    instructionbox()

}

function makeclouds(birthLocationX) {
  var k ={x: birthLocationX,
    y:round(random(10,180)),
    sizer:round(random(25,30)),
    speed:-3,
    move:cloudMove,
    display:cloudDisplay,
    click:cloudClick,
    }
    return k 
  //noStroke()
}

function cloudClick(cx,cy) {
  push()

  let dc = dist(cx,cy,this.x+20,this.y);

  if (dc < 30 ) {
      newCloudLikelihood += 0.1
      this.sizer += 3
      textShown = 4
  }
  pop()
}

function cloudMove() {
  this.x += this.speed;
  this.y += random(-3,3);
}

function cloudDisplay() {
  push();
  noStroke();
  fill(r-20,g-20,b-20);
  ellipse(this.x,this.y,this.sizer,this.sizer)
  ellipse(this.x+10,this.y+10,this.sizer,this.sizer)
  ellipse(this.x+30,this.y+10,this.sizer,this.sizer)
  ellipse(this.x+30,this.y-10,this.sizer,this.sizer)
  ellipse(this.x+20,this.y-10,this.sizer,this.sizer)
  ellipse(this.x+40,this.y,this.sizer,this.sizer)

  
  pop()
}

function updateAndDisplayCloud(){
  for (var i = 0; i <cloud.length; i++){
    cloud[i].move();
    cloud[i].display()
  }
}
function removeCloud(){
  var cloudToKeep = [];
  for (var i = 0; i <cloud.length; i++){
    if (cloud[i].x+40>0){
      cloudToKeep.push(cloud[i])
    }
  }
  cloud = cloudToKeep
}

function addNewCloud(){
  
  if(random(0,1)<newCloudLikelihood){
    cloud.push(makeclouds(width));
  }
}



function instructionbox() {
  push()
  rectMode(CENTER)
  fill(255)
  strokeWeight(8)
  rect(240,400,440,100)
  noStroke()
  fill(0)
  textSize(19.7)
  if (textShown==1){
      text("Click on objects to see how WE affected them",40,405)
    } else if (textShown==2) {
      textSize(15)
      text("Scientists have recently found that birds are going extinct",40,395)
      text("much quicker than we thought. Help by donating to RSPB!",40,415)
    } else if ( textShown ==3) {
      textSize(16.5)
      text("Wildfire has burned more than 4% of California in 2020",40,395)
      text("Help by donating to California's wildfire relief fund!",40,415)
    } else if (textShown == 4) {
      textSize(15)
      text("China has surpassed pre-COVID air pollution levels soon",40,395)
      text("after business returned to normal.",40,415)
    } else if (textShown == 5) {
      textSize(15)
      text("Satelite image shows that Amazon forest has became less ",40,395)
      text("green over time due to pollution",40,415)
    }
  
  pop()
}

function birdbox() {
  push()
  rectMode(CENTER)
  fill(255)
  strokeWeight(8)
  rect(240,400,440,100)
  noStroke()
  fill(0)
  textSize(20)
  text("Bird are ded",40,405)

  pop()
}

function mouseClicked(){
  sky += 1
  if (sky>2){
    r -= 10
    g -= 10
    b -= 10
  }

  clickCondition = 1 

  for (var i = 0; i <bird.length; i++){
    bird[i].click(mouseX, mouseY)
  }

  for (var i = 0; i <trees.length; i++){
    trees[i].click(mouseX, mouseY)
  }

  for (var i = 0; i <cloud.length; i++){
    cloud[i].click(mouseX, mouseY)
  }




}

function makeBird(birthLocationX) {
  var k ={x: birthLocationX,
    y:round(random(-60,-280)),
    breadth:round(random(40,70)),
    speed:2,
    birdHeight:round(random(9,15)),
    move:birdMove,
    display:birdDisplay,
    click:birdClick,
    color:color(random(50,240),random(50,240),random(50,240))}
    return k 
}

function birdClick(bx, by) {
  let d = dist(bx, by, this.x, height-190+this.y)
  if (d <= this.breadth){
    this.color = color(40)
    textShown = 2
    birdcolor = 1
  }


}

function birdMove() {
  this.x += this.speed
}

function birdDisplay() {
  push();
  fill(this.color)
  translate(this.x, height-190);
  strokeWeight(1);
  stroke(0);
  push()
  if (birdcolor == 1){
    image(brdgray,-0,this.y,this.breadth,this.breadth)
  } else {
    image(brd,-0,this.y,this.breadth,this.breadth)
  }
  pop()
  pop()
}

function updateAndDisplayBird(){
  for (var i = 0; i <bird.length; i++){
    bird[i].move();
    bird[i].display()
  }
}
function removeBird(){
  var birdToKeep = [];
  for (var i = 0; i <bird.length; i++){
    if (bird[i].x+bird[i].breadth>0){
      birdToKeep.push(bird[i])
    }
  }
  bird = birdToKeep
}

function addNewBird(){
  var newBirdLikelihood=0.1;
  if(random(0,1)<newBirdLikelihood){
    bird.push(makeBird(0));
  }
}



function drawHill() {
  push()
  noStroke()
  fill(tr, tg, tb)
  beginShape()
  for (var h = 0; h<width; h++){
    var a = (h*hillVar)+(millis()*0.0002)
    var y = map(noise(a),0,1,height/8,height/9*5);
    vertex(h,y)
    if (mouseY < h & y-1< mouseX =72 && tg <=87 && tb >=77){
    tr = 72
    tg = 87
    tb = 77
  }  


  pop()

  vertex(480,480);
  vertex(0,480)
  endShape()
  pop()
}

function updateAndDisplayTrees(){
    for (var i = 0; i < trees.length; i++){
        trees[i].move();
        trees[i].display();
    }
}


function removeTreesThatHaveSlippedOutOfView(){
    var treesToKeep = [];
    for (var i = 0; i < trees.length; i++){
        if (trees[i].x + trees[i].breadth > 0) {
            treesToKeep.push(trees[i]);
        }
    }
    trees = treesToKeep; 
}


function addNewTreesWithSomeRandomProbability() {
    if (random(0,1) < newTreeLikelihood) {
        trees.push(makeTree(width));
    }
}



function treeMove() {
    this.x += this.speed;
}
    


function treeDisplay() {
  push()
    var floorHeight = 20;
    var bHeight = this.nFloors * floorHeight; 
    fill(74, 21, 22);  
    push();
    translate(this.x, height - 170);
    rect(0, -bHeight, this.breadth, bHeight);
    noStroke()

    for (var i = 0; i < this.nFloors; i++) {
      fill(2, 61, 21)
      noStroke()

      triangle(this.breadth/2,0-(i * floorHeight)-60,-20,20-(i * floorHeight)-40,this.breadth+20,20-(i * floorHeight)-40);
    }

    var fireSize = random(10,80)

    if( fire == 1){
      for(var f = 0; f < 8; f++){
        image(img,fx[f],fy[f],fireSize,fireSize)
      }
    }

    strokeWeight(3)
    pop();
}



function makeTree(birthLocationX) {
    var bldg = {x: birthLocationX,
                breadth: 15,
                speed: -3.0,
                nFloors: round(random(2,8)),
                move: treeMove,
                click: treeClick,
                display: treeDisplay}
    return bldg;
}

function treeClick(tx,ty) {
  var floorHeight = 20;
  var bHeight = this.nFloors * floorHeight;
  let dtx = dist( tx, height-170, this.x+this.breadth/2, height-170)
  let dty = dist( this.x , ty, this.x, -bHeight/2+height-170 )
  if (dtx<20+this.breadth/2 & dty

Leave a Reply