sketch
//Amalia Kutin
//15-104 B
var bergSize;
var polar;
var pieces = [];
var afterNoon;
var skyColor;
var clouds = [];
var skyOrb;
var skyOrbColor;


function setup() {
    createCanvas(500, 500);
    background(158, 198, 255);
    bergSize = 400;
    skyColor = 125;
    skyOrb = 0;
    skyOrbColor = false;
    noStroke();
    polar = {x: 250, y: 350, dx: 0};
    for(let i = 0; i < 10; i++) clouds[i] = {x: random()*500, y: random()*180};
}

function draw() {
    background(158, 198, 255);
    fill(61, 120, 204);
    rect(0, 200, 500, 300);
    fill(143, 185, 191);
    beginShape();
    vertex(250-(bergSize/2), 350);
    vertex(250-(bergSize/4), 350-(bergSize/4));
    vertex(250+(bergSize/4), 350-(bergSize/4));
    vertex(250+(bergSize/2), 350);
    vertex(250+(bergSize/4), 350+(bergSize/4));
    vertex(250-(bergSize/4), 350+(bergSize/4));
    endShape(CLOSE);
    for(let i = 0; i < pieces.length; i++) drawIce(pieces[i]);
    drawSky();
    for(let i = 0; i < clouds.length; i++) drawClouds(clouds[i]);
    drawBear(polar);
}

function drawBear(b) {
    fill(255);
    beginShape();
    vertex(b.x-20, b.y-20);
    vertex(b.x+10, b.y-30);
    vertex(b.x+20, b.y-25);
    vertex(b.x+15, b.y-10);
    vertex(b.x+20, b.y+10);
    vertex(b.x+10, b.y+10);
    vertex(b.x, b.y);
    vertex(b.x-10, b.y+5);
    vertex(b.x-10, b.y+10);
    vertex(b.x-20, b.y+10);
    vertex(b.x-30, b.y+5);
    vertex(b.x-35, b.y-5);
    endShape(CLOSE);
    fill(156, 96, 114);
    circle(b.x+20, b.y-25, 5);
    fill(0);
    circle(b.x+10, b.y-22, 5);
    circle(b.x+13, b.y-27, 5);
    b.x += random()*6 - 3;
    b.y += random()*6 - 3;
    if(b.x < 260-bergSize/2) b.x += 10;
    if(b.x > 240+bergSize/2) b.x -= 10;
    if(b.y < 360-bergSize/4) b.y += 10;
    if(b.y > 340+bergSize/4) b.y -= 10;
}

function drawIce(i) {
    fill(143, 185, 191);
    beginShape();
    vertex(i.x-(i.s/2), i.y);
    vertex(i.x-(i.s/4), i.y-(i.s/4));
    vertex(i.x+(i.s/4), i.y-(i.s/4));
    vertex(i.x+(i.s/2), i.y);
    vertex(i.x+(i.s/4), i.y+(i.s/4));
    vertex(i.x-(i.s/4), i.y+(i.s/4));
    endShape(CLOSE);
    if(i.c % 8 < 2) i.x++;
    else if(i.c % 8 < 4) i.y++;
    else if(i.c % 8 < 6) i.x--;
    else i.y--;
    i.c++;
}

function drawSky() {
    if(afterNoon) skyColor-=0.25;
    else skyColor+=0.25;
    fill(skyColor, skyColor, 120+skyColor/2);
    rect(0, 0, 500, 200);
    if(skyColor == 200) afterNoon = true;
    if(skyColor == 50) afterNoon = false;
    if (skyOrbColor) fill(219, 252, 255);
    else fill(235, 196, 68);
    circle(skyOrb, 100, 60);
    skyOrb+=(0.25*500/150);
    if (skyOrb > 500) {
        skyOrb = 0;
        if (skyOrbColor) skyOrbColor = false;
        else skyOrbColor = true;
    }
}

function drawClouds(c) {
    fill(255);
    ellipse(c.x%500, c.y, 50, 30);
    c.x++;
}

function mousePressed() {
    if(bergSize > 150) bergSize -= 10;
    var newPiece;
    for(let i = 0; i < 20; i++) newPiece = {x: random()*500, y: 200+random()*300, s: random()*60, c: 0};
    pieces[pieces.length] = newPiece;
}

My project revolved around a polar bear and melting ice. There is an iceberg that the user melts by clicking, and a polar bear stuck on it. Small pieces of ice are generated as the main piece melts. The sky has clouds that move across the sky. There is also a sun/moon that moves across the sky as well. The polar also randomly moves around, but it’s constrained by the size of the iceberg. This project demonstrates the small scale effects of climate change.

If I had more time, I would have considered adding a second polar bear. The issue is that it would need to stay on the iceberg while also not bumping into its friend.

Leave a Reply