Author: Jacky

sketch

//jlococo
//Jacky Lococo

var xp = 0;
var yp = 40;
var dxp = 5;
var bird = [ ];
var xcir = 350;
var ycir = 200;
var angle = 0;
var smoke = [ ];
var cloud = [ ];
var tree = [ ];
function setup() {
    createCanvas(700, 400);

    for (var i = 0; i <5; i++){ //for loop for the bird array
        bird[i] = new Object();
        bird[i].x = width;
        bird[i].y  = random(100, 200);
        bird[i].dx = random(-2, -4.5);
        bird[i].c = color(21, 76, 114);
    }

    for (var i = 0; i < 11; i++){ //for loop for the smoke array
        smoke[i] = new Object();
        smoke[i].x = random(40, 140);
        smoke[i].y  = random(0, 100);
        smoke[i].dx = 4;
        smoke[i].s = random(20, 35);
        smoke[i].c = 150;
    }

    for (var i = 0; i < 9; i++){ //for loop for the clouds
        cloud[i] = new Object();
        cloud[i].x = random(width/2 + 60, width);
        cloud[i].y  = random(0, height/2 - 30);
        cloud[i].dx = 4;
        cloud[i].s = random(70, 120);
        cloud[i].c = 230;
    }

    for (var i = 0; i < 20; i++){ //for loop for the trees
        tree[i] = new Object();
        tree[i].x = random(width/2 + 60, width);
        tree[i].y  = random(height/2 + 135, height);
        tree[i].s = random(70, 120);
    }

    frameRate(15);
}



function draw() {
    background(230);
 
 //------------------ CITY ------------------
    //background of city
    noStroke();
    fill(230);
    beginShape();
    vertex(0,0);
    vertex(0, height);
    vertex(width/2-20, height);
    vertex(width/2+20, 0);
    endShape();

    //smokestacks
    fill(200);
    rect(50, 100, 25, 300);
    rect(100, 100, 25, 300);

    //drawing the smoke
    for (var i = 0; i < 11; i++){
        draw_smoke(smoke[i]);
    }

    //2nd row of buildings
    fill(170);
    rect(50, 220, 100, 300);
    rect(140, 200, 100, 300);
    rect()

    //buildings front row
    noStroke()
    fill(90);
    rect(0, 200, 100, 420);
    rect(100, 240, 75, 420);
    rect(175, 180, 45, 300);
    rect(220, 200, 50, 300);
    rect(260, 300, 80, 200);

    //windows
    if(mouseX < width/2){ //makes the lights turn on and off
        fill(241, 216, 3, 150);
    } else {
        fill(230); //fills them with the background when mouse is on right
    }
    rect(220, 220, 10, 20);
    rect(247, 270, 10, 20);
    rect(220, 340, 10, 20);
    rect(150, 300, 10, 20);
    rect(110, 275, 10, 20);
    rect(45, 370, 10, 20);
    rect(33, 230, 10, 20);


    //moving plane in the background
    airPlane(xp, yp, dxp);
    xp +=dxp;


//--------------- FOREST -------------------
    //background of forest
    noStroke();
    fill(185, 220, 236);
    beginShape();
    vertex(width/2-20, height);
    vertex(width/2+20, 0);
    vertex(width, 0);
    vertex(width, height);
    endShape();

    //clouds
    for (var i = 0; i < 9; i++){
        draw_cloud(cloud[i]);
    }

    //MOUNTAINS
    fill(137, 184, 206);
    //first larger shape
    beginShape();
    vertex(width/2+30, height);
    vertex(550, 150);
    vertex(600, 150);
    vertex(700, 300);
    vertex(700, height);
    endShape();
    //second shape shorter mountain
    beginShape();
    vertex(width/2-20, height);
    vertex(430, 240);
    vertex(480, 240);
    vertex(550, height);
    endShape();
    //circles rounding mountains
    ellipse(575, 161, 54, 54);
    ellipse(455, 250, 53, 52);

    //HILL behind - darker shade
    beginShape()
    fill(88, 106, 36);
    vertex(width/2-20, height);
    vertex(width/2-10, 280);
    vertex(600, 400)
    endShape()

    //HILL - quarter of circle
    fill(127, 148, 68);
    ellipse(670, height+70, 730, 350);

    //trees
    for (var i = 0; i < 20; i++){ //for loop for the trees
        draw_tree(tree[i]);
    }

    //birds
    for (var i = 0; i < 5; i++) {
        draw_bird(bird[i]);
        if (bird[i].x < width/2){ //changing bird location after they reach midpoint
            bird[i].x = width +100;
        }
        bird[i].x += bird[i].dx; //making birds move

        if (mouseX < width/2){ //making the birds stop when mouse is on city half
            bird[i].dx = 0
        }else{
            bird[i].dx = random(-1, -4.5);
        }
        if(mouseIsPressed & dist(mouseX, mouseY, xcir, ycir) < 30){ //making birds stop with circle pressed
            bird[i].dx = 0;
        }
    }

//------------------

    //FOREST OPACITY FILLS
    if(mouseX < width/2){
        noStroke();
        fill(0, 100);
        beginShape();
        vertex(width/2-20, height);
        vertex(width/2+20, 0);
        vertex(width, 0);
        vertex(width, height);
        endShape();
    }

    //masking shape
    fill(230);
    beginShape();
    vertex(width/2+10, 80);
    vertex(width/2-5, 230);
    vertex(300, 230);
    vertex(300, 80);
    endShape();

    //OPACITY FILLS CITY AND VELOCITY STOPS
    if(mouseX > width/2){
        noStroke();
        fill(0, 100);
        beginShape();
        vertex(0,0);
        vertex(0, height);
        vertex(width/2-20, height);
        vertex(width/2+20, 0);
        endShape();
        dxp = 0;
    } else {
        dxp = 5;
    }
    if(xp > width/2 +30){
        xp = 0 - 50;
    }


    //Lines and circle
    fill(100, 150);
    stroke(255);
    strokeWeight(4);
    line(width/2+20, 0, width/2-20, 400);
    ellipse(xcir, ycir, 60, 60);
    noStroke();
    fill(255);
    textSize(10);
    text('P R E S S', xcir-23, ycir+4);


    //CURSOR - icons following the mouse
    if(mouseX > width/2){ //mouse is flower on forest section
        noStroke();
        flower();
    } else { //mouse is three little grey smoke dots
        noStroke();
        fill(50, 100);
        ellipse(mouseX + 9, mouseY +5, 11, 11);
        ellipse(mouseX - 9, mouseY+5, 11, 11);
        ellipse(mouseX, mouseY - 8, 11, 11);
    }

    //CIRCLE MOUSE PRESSED - if mouse is pressed on cirlce fact shows up
    if(mouseIsPressed & dist(mouseX, mouseY, xcir, ycir) < 30){
        fill(0, 150);
        rect(0, 0, 700, 400);
        dxp = 0;
    fill(255)
        textSize(15)
        text('Urban areas and urbanization is a major contributor of climate change,', 140, 100)
        text('making up baout 75% of CO2 emissions from global energy use.', 150, 130)
    }
}



//------------ FUNCTIONS -----------
function flower(){ //creates cursor flower
    fill(233, 199, 10, 200);
    ellipse(mouseX, mouseY, 15, 15);
    fill(255, 154, 154, 200);
    ellipse(mouseX+10, mouseY, 8, 8);
    ellipse(mouseX-10, mouseY, 8, 8);
    ellipse(mouseX, mouseY-10, 8, 8);
    ellipse(mouseX, mouseY+10, 8, 8);
    ellipse(mouseX+7, mouseY+7, 8, 8);
    ellipse(mouseX-7, mouseY-7, 8, 8);
    ellipse(mouseX-7, mouseY+7, 8, 8);
    ellipse(mouseX+7, mouseY-7, 8, 8);
}

function airPlane(xp, yp, dxp){ //creates airplane moving in the background
    fill(200);
    rect(xp, yp, 40, 10);
    ellipse(xp+40, yp+5, 15,10);
    ellipse(xp, yp, 5, 20);
    fill(175);
    ellipse(xp+ 15, yp+7, 23, 5);
    strokeWeight(2);
    stroke(220, 180);
    line(xp, yp+10, xp-150, yp+10);
}

function draw_tree(t){
    fill(0);
    rect(t.x, t.y, 5, 10);
    fill(63, 111, 85);
    triangle(t.x +2, t.y-10, t.x - 5, t.y+5, t.x+10, t.y+5);
}

function draw_bird(b){
    fill(b.c);
    ellipse(b.x, b.y, 10, 10);
    fill(214, 216, 3);
    ellipse(b.x -6, b.y, 4, 4);
    fill(13, 39, 56);
    ellipse(b.x + 4, b.y, 7, 5);
}

function draw_smoke(s){
    fill(s.c, 160);
    circle(s.x, s.y, s.s);
}

function draw_cloud(c){
    fill(c.c, 150);
    circle(c.x, c.y, c.s);
}


    







``