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!
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