Category: SectionD

Final Hurricanes:

My program is an interactive informative video on hurricanes. Climate change is causing hurricanes to become more powerful and I wanted to explore this for this project. I did not really know what I wanted to do for this project when we first got it, but I decided on hurricanes because I have been affected by them. I remember when I was little Hurricane Sandy hitting Connecticut and being without power for weeks. Halloween was cancelled because of power-lines being down and there being over 2 feet of snow. I remember playing cards with my family around candles and putting our food from the freezer out in the snow because we did not have a generator.


I wanted to make this project be special to me, but also make people realize that climate change is affecting us, because most people who do not believe climate change is serious does not know how much a degree or two in earths temperature rising can cause.


To use my program is simple. All you need to do is use the arrow and shift key when asked to see more information and explore more hurricanes. You can pick what hurricanes to see in any order.


If I had more time I think I would have explored adding some sounds, and possibly a conclusion at the end.

Here are some of the images I made:

bacteria
tornado
mudslide

(my code is 800×800 so it is a bit cut off here).

file

var dirY = 10;
var xCenter = 35;
var yCenter = 26;
var size1 = 30;
var size2 = 75;
var psize = 1;
var hsize = 1;
var winds = [];
var offset = 0;
var a = 0;
var b = 0;
var x = []; //for bacteria
var y = []; //for bacteria
var dx = []; //for bacteria
var bacteria = []; 
var changeHurricane = 0;
var counter= 0;
var time = 50;

function preload() {
    bacteriaImg  = loadImage("https://i.imgur.com/1A8JGL4.png");
    harveyImg = loadImage("https://i.imgur.com/EpbTXxl.png");
    hurricaneImg = loadImage("https://i.imgur.com/odCOO2g.png");
    irmaImg = loadImage("https://i.imgur.com/1bhgnMC.png");
    katrinaImg = loadImage("https://i.imgur.com/US5Kww2.png");
    mapImg = loadImage("https://i.imgur.com/dOw7Qhi.png");
    mudslideImg = loadImage("https://i.imgur.com/mvmq6d4.png");
    peopleImg = loadImage("https://i.imgur.com/6md7EQY.png");
    powerlinesImg = loadImage("https://i.imgur.com/fceH7Sn.png");
    SandyImg  = loadImage("https://i.imgur.com/v3yDJ4E.png");
    shorelineImg  = loadImage("https://i.imgur.com/b8jOnfe.png");
    snowImg  = loadImage("https://i.imgur.com/o4kwP6r.png");
    tornadoImg  = loadImage("https://i.imgur.com/fQdemYk.png");
    sickbedImg  = loadImage("https://i.imgur.com/f3pLBpr.png");
    wasteFacilityImg  = loadImage("https://i.imgur.com/DkcHFPS.png");
    coastWaterImg  = loadImage("https://i.imgur.com/Z3WagWz.png");
    womenImg = loadImage("https://i.imgur.com/cYQjOwi.png");
}

function setup() {
    createCanvas(800, 800);
    frameRate(50);
    var pl = wind(600, 100, 100);
    winds.push(pl);
    for(var i = 0; i < 40; i++){
        bacteria[i] = new Object();
        bacteria[i].x = random(0, 800);
        bacteria[i].y = random(0, 500);
        bacteria[i].dx = random(-5, 5);
    }
}

function people2(r, c, rw, cw, x, y) {
    push();
    translate(0, -490);
    for(var row = 1; row <= r; row += 1) {
        for(var col = 1; col <= c; col += 1) {
            image(peopleImg, (size1 * col) - x, (size2 * row) + y, size1, size2);
        }
    }
    for(var row = 6; row <= rw; row += 1) {
        for(var col = 1; col <= cw; col += 1) {
            image(peopleImg, (size1 * col) - x, (size2 * row) + y, size1, size2);
        }
    }
    pop();
}

function drawPeopleScale2(r, c, rw, cw, x, y, z) {
    push();
    scale(psize);
    people2(r, c, rw, cw, x, y);
    psize = psize - z;
    pop();
}

function people(r, c, x, y) {
    push();
    translate(0, -490);
    for(var row = 1; row <= r; row += 1) {
        for(var col = 1; col <= c; col += 1) {
            image(peopleImg, (size1 * col) - x, (size2 * row) + y, size1, size2);
        }
    }
    pop();
}

function drawPeopleScale(r, c, x, y, z) {
    push();
    scale(psize);
    people(r, c , x, y);
    psize = psize - z;
    pop();
}



function powerlines() {
    image(powerlinesImg, 300, 260, 400, 326);
}

function risingSeas(c, d) {
    fill(0, 0, 255);
    rect(0, d - dirY, 800, 1500);
    dirY = dirY + c;
}

function houses4flooding(c, d) {
    push();
    fill(255);
    scale(6);
    risingSeas(c, d);
    for(var col = 1; col <= 3; col += 1) {
        triangle((xCenter * col) - 5, 20 + yCenter, (xCenter * col) - 20, yCenter + 37, (xCenter * col) + 10, 15 + yCenter + 22);
        rect((xCenter * col) - 20, 37 + yCenter, 30, 25);
        rect((xCenter * col) - 8, 52 + yCenter, 10, 10);
    }
    pop();

}

function drawHouseOG() {
    push();
    fill(255);
    scale(8);
    triangle(15 + xCenter, 0 + yCenter, 0 + xCenter, 15 + yCenter, 30 + xCenter, 15 + yCenter);
    rect(0 + xCenter, 15 + yCenter, 30, 25);
    rect(12 + xCenter, 30 + yCenter, 10, 10);
    pop();
}

function drawHouse(r, c) {
    push();
    fill(255);
    for(var row = 1; row <= r; row += 2){
        for(var col = 1; col <= c; col += 1){ //draw house numbers
            triangle((15 + xCenter * col) - 30, (0 + yCenter * row) - 2000, (xCenter * col) - 30, (15 + yCenter * row) - 2000, (30 + xCenter * col) - 30, (15 + yCenter * row) - 2000);
            rect((xCenter * col) - 30, (15 + yCenter * row) - 2000, 30, 25);
            rect((12 + xCenter * col) - 30, (30 + yCenter * row) - 2000, 10, 10);
        }
    }
    pop();
}

function drawHouseScale(r, c, z) {
    push();
    scale(hsize);
    drawHouse(r, c);
    hsize = hsize - z;
    pop();

}

function stormSurge(y, w, h) {
    push();
    noStroke();
    fill(0, 0, 255);
    rect(0, y, w, h)
    pop();
    drawHouseOG();
}

function bacteriaWater(b) {
    image(bacteriaImg, b.x, b.y, 50, 72.3);
}

function tornadoes() {
    for(var col = 1; col <= 5; col += 1){
        image(tornadoImg,  (150 * col) - 130, 190, 150, 154);
    }
}

function wind(px, py, pw) {
    var p = {x: px, y: py, w: pw,
    right: windRight};
    return p;
}

function windRight() {
    return this.x + this.w;
}

function risingTemperature() {
    fill(0 + a, 0, 255 - a)
    rect(0, -height / 3, 800, 800)
    a = a + 5;
}

function coastalRise() {
    image(shorelineImg, 0, 100, 800, 453.23)
    image(coastWaterImg, 440 - b, 135, 1200, 406.23);
    b = b + 3;
}

function circlesForMap() {
    noStroke();
    fill(0, 153, 153); //teal
    circle(660, 320, 40, 40); //irma
    fill(0, 76, 153); //blue
    circle(680, 75, 40, 40); //sandy
    fill(0, 153, 0); //green
    circle(520, 270, 40, 40); //katrina
    fill(102, 102, 0); //mustard
    circle(450, 280, 40, 40); //Harvey
}

function sandy() {
    fill(180)
    rect(0, 0, width, height);
    fill(255);
    translate(0, height/3);
    textSize(12);
    textFont('Georgia');
    if(counter <= time * 5) {
        text("Hurricane Sandy,", 50, 15);
        text("October 30-31, 2012", 50, 30); //show map of area
        image(SandyImg, 0, -300, 800, 1151.22)
    }

    if(counter <= time * 9 & counter > time * 5) {
        text("Hurricane Sandy is the largest Atlantic Hurricane on record.", 50, 15);
    }
    if(counter <= time * 14 & counter > time * 9) {
        people2(12, width, 13, 15, 30, -1);
        push();
        fill(0);
        text("Loss of Life: 285", 50, 15); //loop many people 
        pop();
    }
    if(counter <= time * 19 & counter > time * 14) {
        text("extreme highwind damage", 50, 15); //wind do in final folder
        for (var i = 0; i < winds.length; i++) {
            var p = winds[i];
            rect(p.x - offset, p.y, p.w, 10);
        }
        offset += 90;
        if (winds.length > 0 & winds[0].right() < offset) {
            winds.shift();
        }
        var lastWind = winds[winds.length-1];
        if (lastWind.right() - offset < width) {
            var p = wind(lastWind.right(), // start location
            random(-height/3, height), 100); 
            winds.push(p); 
        }
    }

    if(counter <= time * 24 & counter > time * 19) {
        text("Storm surge levels up to almost 14ft", 50, 15); //people with water level 
        stormSurge(400, 800, 140);
    }
    if(counter <= time * 29 & counter > time * 24) {
        text("heavy snow damage", 50, 15); //snow image 
        image(snowImg, -130, -220, 1000, 800);
    }
    if(counter <= time * 34 & counter > time * 29) {
        houses4flooding(.6, 420);
        text("flooding", 50, 15); //display water over houses, use loops for houses
    }
    if(counter <= time * 38 & counter > time * 34) {
        text("mudslides", 50, 15); //show mudslide image 
        image(mudslideImg, 0, 105, 800, 427.7);
    }
    if(counter <= time * 42 & counter > time * 38) {
        text("8 million people lost power", 50, 15); //power lines
        powerlines();
    }
    if(counter <= time * 44 & counter > time * 42) {
        drawHouseScale(250, 160, .008);
        push();
        fill(0);
        textSize(18);
        text("20,000+ households were still displaced even after one year.", 50, 15); //house 
        pop();
    }
    if(counter > time * 44){ 
        text("click the shift key to return to map to explore more", 50, 15);
    }
}

function katrina() {
    fill(180)
    rect(0, 0, width, height);
    fill(255);
    translate(0, height/3);
    textSize(12);
    textFont('Georgia');
    if(counter <= time * 5) {
        text("Hurricane Katrina", 50, 15);
        text("August 23-30, 2005", 50, 30); //show map of area
        image(katrinaImg, 0, -320, 800, 1151.22)
    }
    if(counter <= time * 10 & counter > time * 5) {
        push();
        fill(0);
        drawPeopleScale2(24, 75, 25, 33, -50, -200, .006);
        text("Loss of Life: 1833", 50, 15); //loop many people 
        pop();
    }
    if(counter <= time * 14 & counter > time * 10) {
        text("Storm surge levels up to 30ft", 50, 15); //compare to house 
        stormSurge(200, 800, 400);
    }
    if(counter <= time * 19 & counter > time * 14) {
        text("wind damage", 50, 15); //show wind in final folder
        for (var i = 0; i < winds.length; i++) {
            var p = winds[i];
            rect(p.x - offset, p.y, p.w, 10);
        }
        offset += 70;
        if (winds.length > 0 & winds[0].right() < offset) {
           winds.shift();
        }
        var lastWind = winds[winds.length-1];
        if (lastWind.right() - offset < width) {
            var p = wind(lastWind.right(), // start location
            random(-height/3, height), 100); 
            winds.push(p); 
        }
    }
    if(counter <= time * 23 & counter > time * 19) { 
        houses4flooding(.1, 420);
        text("flooding", 50, 15); //display water over houses, use loops for houses 
    }
    if(counter <= time * 30 & counter > time * 23) {
        push();
        fill(0, 0, 255);
        rect(0, 0, 800, 800);
        pop();
        for(var i = 0; i < 40; i++){
            bacteriaWater(bacteria[i]);
            bacteria[i].x = bacteria[i].x + bacteria[i].dx;
            pop();
        }
        text("an absense of sanitation and bacteria-rich flood waters caused a public emergency", 50, 15); //bacteria in water 
    }
    if(counter <= time * 34 & counter > time * 30) {
        image(peopleImg, size1 + 200, 150, size1 * 5, size2 * 5);
        image(womenImg, size1 * 7 + 200, 150, size1 * 5, size2 * 5);
        fill(0);
        text("30,000 people seeking shelter under New Orleans Super Dome", 50, 15); //people and women
    }
    if(counter <= time * 39 & counter > time * 34) {
        image(peopleImg, size1 + 200, 150, size1 * 5, size2 * 5);
        image(womenImg, size1 * 7 + 200, 150, size1 * 5, size2 * 5);
        fill(0); 
        text("and 25,000 people seeking shelter under the Convention Center", 50, 15); //people and women
    }
    if(counter > time * 39) {
        text("click the shift key to return to map to explore more", 50, 15);
    }
}

function harvey() {
    fill(180)
    rect(0, 0, width, height);
    fill(255);
    translate(0, height/3);
    textSize(12);
    textFont('Georgia');
    if(counter <= time * 5) {
        text("Hurricane Harvey", 50, 15);
        text("August 25-31, 2017", 50, 30);//show map of area
        image(harveyImg, 0, -320, 800, 1151.22);
    }
    if(counter <= time * 9 & counter > time * 5) {
        push();
        fill(0);
        people2(8, 11, 9, 1, -200, 225);
        text("Loss of Life: 89", 50, 15); //loop many people dome
        pop();
    }
    if(counter <= time * 14 & counter > time * 9) {
        text("12.5ft storm surge", 50, 15); //show with people
        stormSurge(420, 800, 120);
    }
    if(counter <= time * 19 & counter > time * 14) {
        houses4flooding(.1, 420);
        text("extreme rainfall caused massive flooding", 50, 15); //houses and water
    }
    if(counter <= time * 23 & counter > time * 19) {
        fill(0);
        drawPeopleScale(150, 300, 20, 50, .006);
        text("displacing over 30,000", 50, 15);
    }
    if(counter <= time * 23.5 & counter > time * 23) {
        fill(0);
        drawHouseScale(500, 400, .05);
        text("destroying over 200,000 households and businesses.", 50, 15); //houses
    }
    if(counter <= time * 27.5 & counter > time * 23.5) {
        text("Harvey flooded 800 waste-water treatment facilities", 50, 15); //treatment facility 
        image(wasteFacilityImg, 100, 100, 600, 339);
    }
    if(counter <= time * 34 & counter > time * 27.5) { 
        push();
        fill(0, 0, 255);
        rect(0, 0, 800, 800);
        pop();
        for(var i = 0; i < 40; i++){
            bacteriaWater(bacteria[i]);
            bacteria[i].x = bacteria[i].x + bacteria[i].dx;
            pop();
        }
         text("spreading sewage and toxic chemicals into flooded areas", 50, 15); //bacteria in water 
    }
    if(counter <= time * 41 & counter > time * 34) { 
        image(sickbedImg, -20, -300, 800, 1151.2);
        text("disruption to water supplies and power systems caused water borne illness", 50, 15); //sick bed 
    }
    if(counter > time * 41) {
        text("click the shift key to return to map to explore more", 50, 15);
    }
}

function irma() {
    fill(180)
    rect(0, 0, width, height);
    fill(255);
    translate(0, height/3);
    textSize(12);
    textFont('Georgia');
    if(counter <= time * 5) {
        text("Hurricane Irma", 50, 15);
        text("September 6-12, 2017", 50, 30);//show map of area
        image(irmaImg, 0, -300, 800, 1151.22);
    }
    if(counter <= time * 9 & counter > time * 5) {
        push();
        fill(0);
        people2(5, 26, 6, 4, 20, 325);
        text("Loss of Life: 134", 50, 15); //loop many people 
        pop();
    }
    if(counter <= time * 14 & counter > time * 9) {
        text("severe wind", 50, 15); //wind but faster
        for (var i = 0; i < winds.length; i++) {
            var p = winds[i];
             rect(p.x - offset, p.y, p.w, 10);
        }
        offset += 70;
        if (winds.length > 0 & winds[0].right() < offset) {
            winds.shift();
        }
        var lastWind = winds[winds.length-1];
        if (lastWind.right() - offset < width) {
            var p = wind(lastWind.right(), // start location
            random(-height/3, height), 100); 
            winds.push(p); 
        }
    }
    if(counter <= time * 19 & counter > time * 14) {
        text("five tornadoes formed in South Florida causing more damage", 50 ,15);
        tornadoes();
    }
    if(counter <= time * 24 & counter > time * 19) {
        text("max wind sustained was 185 mph for 37 hours", 50, 15); //faster faster wind
        for (var i = 0; i < winds.length; i++) {
            var p = winds[i];
            rect(p.x - offset, p.y, p.w, 10);
        }
        offset += 99;
        if (winds.length > 0 & winds[0].right() < offset) {
           winds.shift();
        }
        var lastWind = winds[winds.length-1];
        if (lastWind.right() - offset < width) {
            var p = wind(lastWind.right(), // start location
            random(-height/3, height), 100); 
            winds.push(p); 
        }
    }
    if(counter <= time * 28 & counter > time * 24) {
        text("1.5 million people lost power", 50, 15); //power lines 
        powerlines();
        }
    if(counter <= time * 28.6 & counter > time * 28) {
        drawHouseScale(500, 266, .05);
        fill(0);
        text(" and 133,000 homes were affected", 50, 15); //homes
    }
    if(counter > time * 28.6) {
        text("click the shift key to return to map to explore more", 50, 15);
    }
}

function startText() {
    fill(255);
    translate(0, height/3);
    textSize(12);
    textFont('Georgia');
    if(counter <= time * 3){
        text("Climate Change is ruining our planet, and we are the ones to blame.", 50, 15);
    }
    if(counter <= time * 5 & counter > time * 3){//image here
        text("seas are rising,", 50, 15);
        risingSeas(3, 420);
    }
    if(counter <= time * 7 & counter > time * 5){ 
        push();
        risingTemperature();
        pop();
        text("tempetures are rising,", 50 ,15);
    }
    if(counter <= time * 10 & counter > time * 7){ 
        image(hurricaneImg, 0, -200, 800, 609,23);
        push();
        fill(145);
        text("and hurricanes are becoming more intense.", 150, 15);
        pop();
    }
    if(counter <= time * 15 & counter > time * 10){
        push();
        risingSeas(.1, 420);
        drawHouseOG();
        pop();
        text("hurricanes are and will cause extreme flooding", 50, 15);
    }
    if(counter <= time * 20 & counter > time * 15){ //function here
        text("and intense wind;", 50, 15);
        for (var i = 0; i < winds.length; i++) {
            var p = winds[i];
            rect(p.x - offset, p.y, p.w, 10);
        }
        offset += 50;
        if (winds.length > 0 & winds[0].right() < offset) {
            winds.shift();
        }
        var lastWind = winds[winds.length-1];
        if (lastWind.right() - offset < width) {
            var p = wind(lastWind.right(), // start location
            random(-height/3, height), 100); 
            winds.push(p); 
        }
    }
    if(counter <= time * 25 & counter > time * 20){ //image here
        text("causing massive coastal damage.", 50, 15);
        coastalRise();
    }
    if(counter > time * 25){ //20 seconds to choose hurricane before intro restart
        image(mapImg, 0, -450, 800, 1151.22);
        text("KeyPress to discover the destruction of some of the last two decades worst hurricanes.", 50, -215);
        fill(0, 76, 153);
        text("press up arrow on keyboard to see statistics of Hurricane Sandy", 50, -200);
        fill(0, 153, 153);
        text("press down arrow on keyboard to see statistics of Hurricane Irma", 50, -185);
        fill(0, 153, 0);
        text("press right arrow on keyboard to see statistics of Hurricane Katrina", 50, -170);
        fill(102, 102, 0);
        text("press up left on keyboard to see statistics of Hurricane Harvey", 50, -155);
        circlesForMap();
    }
}

function draw() {
    background(180);
    push();
    startText();
    pop();
    if(changeHurricane == 1){
        fill(180)
        rect(0, 0 - 267, width, height);
        sandy();
    }
    if(changeHurricane == 2){
        fill(180)
        rect(0, -267, width, height);
        katrina();
    }
    if(changeHurricane == 3){
        fill(180)
        rect(0, -267, width, height);
        harvey();
    }
    if(changeHurricane == 4){
        fill(180)
        rect(0, -267, width, height);
        irma();
    }
    if(changeHurricane == 5){ //for map
        fill(180)
        rect(0, -height/3 + 267, width, height);
        image(mapImg, 0, -190, 800, 1151.22);
        fill(255);
        text("KeyPress to discover the destruction of some of the last two decades worst hurricanes.", 50, 52);
        fill(0, 76, 153);
        text("press up arrow on keyboard to see statistics of Hurricane Sandy", 50, 67);
        fill(0, 153, 153);
        text("press down arrow on keyboard to see statistics of Hurricane Irma", 50, 82);
        fill(0, 153, 0);
        text("press right arrow on keyboard to see statistics of Hurricane Katrina", 50, 97);
        fill(102, 102, 0);
        text("press up left on keyboard to see statistics of Hurricane Harvey", 50, 112);
        push();
        translate(0, 267);
        circlesForMap();
        pop();
    }
    counter+=1
 }

 function keyPressed() {
    counter = 0;
    if (keyCode == UP_ARROW) {
        changeHurricane = 1;
    }
    if (keyCode == RIGHT_ARROW) {
        changeHurricane =  2;
    }
    if (keyCode == LEFT_ARROW) {
        changeHurricane = 3;
    }
    if (keyCode == DOWN_ARROW) {
        changeHurricane = 4;
    }
    if (keyCode == SHIFT){
        changeHurricane = 5;
    }
 }




 //Links to info used:
 //https://www.c2es.org/content/extreme-weather-and-climate-change/ 
 //https://www.dosomething.org/us/facts/11-facts-about-hurricane-sandy
 //https://www.britannica.com/event/Hurricane-Katrina
 //https://www.lamar.edu/_files/documents/resilience-recovery/grant/recovery-and-resiliency/hurric2.pdf
 //https://www.weather.gov/mfl/hurricaneirma
 //https://www.worldvision.org/disaster-relief-news-stories/2017-hurricane-irma-facts

Project11

sketch

//Michelle Dang
//mtdang
//Section D
var cloud = [];

var water = [];
var offset = 0;

mountain = [];
var inc = 0.01;
var xoff = 0;

function newWater(px, py, pw) {
    var p = {x: px, y: py, w: pw,
             right: watRight};
    return p;
}

// compute the location of the right end of a platform
function watRight() {
    return this.x + this.w;
}


function setup() {
    createCanvas(480, 300); 
    
    // create an initial collection of cloud
    for (var i = 0; i < 10; i++){
        var rx = random(width);
        cloud[i] = makeCloud(rx);
    }

    for (var i=0; i<10; i++) {
        var rx = random(width);
    }

    var pl = newWater(0, 210, 60);  // first platform
    water.push(pl);

     for (var i=0; i<width/5+1; i++) {
        var n = noise(xoff)
        var value = map(n, 0, 1, 0, height);
        xoff+=inc;
        mountain.push(value);
    }

    frameRate(10);

}


function draw() {
    background(220)
    //background
    noStroke()

    displayHorizon();
    updateAndDisplaycloud();
    removecloudThatHaveSlippedOutOfView();
    addNewcloudWithSomeRandomProbability(); 

//mountainss
    beginShape()
    fill("blue")
    vertex(0, height); //bottom left corner of mountain
    for (var i=0; i<width/5; i++) {
        vertex(i*6, mountain[i])  //mountain surface
    }
    vertex(width, height) //bottom right corner of mountain
    endShape();

    mountain.shift();
    mountain.push(map(noise(xoff), 0, 1, 0, 300));
    xoff+= inc;


//water and sand
    fill(235, 226, 160)
    rect(0, 250, width, 200); 
    fill(98, 147, 204)
    rect(0, 200, width, 50); 


    fill("blue");
    noStroke(0);
    for (var i = 0; i < water.length; i++) {
        var p = water[i];
        rect(p.x - offset, p.y, p.w, 10, 10);
    }

    // if first platform is offscreen to left, remove it
    if (water.length > 0 & water[0].right() < offset) {
        water.shift();
    }

    // if last platform is totally within canvas, make a new one
    var lastPlat = water[water.length-1];
    if (lastPlat.right() - offset < width) {
        var p = newWater(10+lastPlat.right(), // start location
              random(210, 235), // height of new platform
              60); // all water have width 200 for now
        water.push(p); // add to our array of water
    }

      offset += 1;
  

 }

function updateAndDisplaycloud(){
    // Update the building's positions, and display them.
    for (var i = 0; i < cloud.length; i++){
        cloud[i].move();
        cloud[i].display();
    }
}



function removecloudThatHaveSlippedOutOfView(){
    // If a building has dropped off the left edge,
    // remove it from the array.  This is quite tricky, but
    // we've seen something like this before with particles.
    // The easy part is scanning the array to find cloud
    // to remove. The tricky part is if we remove them
    // immediately, we'll alter the array, and our plan to
    // step through each item in the array might not work.
    //     Our solution is to just copy all the cloud
    // we want to keep into a new array.
    var cloudToKeep = [];
    for (var i = 0; i < cloud.length; i++){
        if (cloud[i].x + cloud[i].breadth > 0) {
            cloudToKeep.push(cloud[i]);
        }
    }
    cloud = cloudToKeep; // remember the surviving cloud
}





function addNewcloudWithSomeRandomProbability() {
    // With a very tiny probability, add a new building to the end.
    var newCloudLikelihood = 0.007; 
    if (random(0,1) < newCloudLikelihood) {
        cloud.push(makeCloud(width));
    }
}


// method to update position of building every frame
function cloudMove() {
    this.x += this.speed;
}


// draw the building and some windows
function cloudDisplay() {
    var floorHeight = 5;
    var bHeight = 30; 
    var cHeight = 40; 
    fill(255);
    noStroke()
    push();
    translate(this.x, height - 40);
    rect(0, -bHeight-100, this.breadth, bHeight, 20);
    rect(20, -bHeight-100, this.breadth, bHeight+10, 20);
    rect(20, -bHeight-200, this.breadth, cHeight, 20);
    stroke(200); 
    pop();
}


function makeCloud(birthLocationX) {
    var bldg = {x: birthLocationX,
                breadth: 60,
                speed: -1.0,
                nFloors: round(random(2, 7)),
                move: cloudMove,
                display: cloudDisplay}
    return bldg;
}



function displayHorizon(){
    stroke(0);
    line (0,height-50, width, height-50); 
}

LO 11

https://www.plagiarismtoday.com/2021/03/16/nfts-and-copyright/
NFTs, non-fungible tokens, are digital art pieces bought with crypto. Although these digital tokens can be copied, the ownership of the token is marked in the Ethereum blockchain,so the owner has a record that they own that token. The issue with copyright is that those who don’t own the NFT can still view it and the owner can provide and sell it: “Other than purchasing the token, buying an NFT doesn’t confer copyright ownership. Owning an NFT, by itself, doesn’t grant the right to print or distribute the work without the copyright holder’s permission.” Although artists can used NFTs as proof of copyright ownership, the concern is that that’s not how its being currently handled. NFTs are currently being used to create and sell copies of work, and the original artists aren’t benefiting.

Project 11: Generative Landscape

A sketch of my intended look and its parts

I’ve been missing my grandparents recently, so I knew I wanted to do something that reminds me of them. That means mountains. My grandfather is Austrian and he and my grandmother live in Colorado currently, so I wanted to make the scene feel like I was riding in the car in some mountainous area, complete with rolling hills, pine trees, a nice wooden fence, and a couple goats. I used a noise function for the mountains and hills at different amplitudes. The hill noise function gave me a little trouble when I started implementing my trees, but by lowering the amplitude more and limiting the range for the random tree generation, I was able to mitigate most of the floating trees. Originally, I was thinking about making the goat change color as well, but I couldn’t successfully implement it, so I left it out. Overall, I’m happy with how my landscape came out. I think that if I had more time, there are certainly more tweaks I would make, but with the time that was available to me this week I’m happy with what I made.

sketch

//Elise Chapman
//ejchapma
//ejchapma@andrew.cmu.edu
//Section D

var goats = [];
var hill = [];
var mountain = [];
var fence = [];
var trees = [];
var noiseParam = 1; //for the mountains
var noiseStep = 0.05; //for the mountains
var noiseParam2 = 5; //for the hills
var noiseStep2 = 0.005; //for the hills

function preload() {
    treeImg = loadImage("https://i.imgur.com/eI7dRxU.png");
    fenceImg = loadImage("https://i.imgur.com/8f0PfZu.png");
    goatImg = loadImage("https://i.imgur.com/TX6vImS.png");
}

//the mountains
function mountains() {
    //sets up the mountains
    strokeWeight(3);
    stroke(100); //dark gray
    fill(100); //dark gray

    //creates the mountains
    translate(0,0.5);
    beginShape();
    vertex(0,height);
    for (var i=0; i<(width/5)+1; i+=1) {
        vertex(i*5,mountain[i]);
    }
    vertex(width,height);
    endShape();
    mountain.shift();
    var n=noise(noiseParam);
    var value=map(n,0,1,0,height);
    mountain.push(value);
    noiseParam+=noiseStep;
}

//the hills
function hills() {
    //sets up the hills
    strokeWeight(3);
    stroke(27,81,45); //dark green
    fill(27,81,45); //dark green

    //creates the hills
    translate(0,10);
    beginShape();
    vertex(0,height);
    for (var i=0; i<(width/5)+1; i+=1) {
        vertex(i*5,hill[i]);
    }
    vertex(width,height);
    endShape();
    hill.shift();
    var n=noise(noiseParam2);
    var value=map(n,0,1,0,height);
    hill.push(value);
    noiseParam2+=noiseStep2;
}

//the goats
function makeGoat(gx) {
    var g = {x: gx,
        goatSpeed: -3.0,
        goatSizeMod: random(0,51),
        move: goatMove,
        display: goatDisplay}
    return g;
}
function goatDisplay() {
    image(goatImg, this.x+200,90-this.goatSizeMod, 100+this.goatSizeMod,100+this.goatSizeMod);
}
function goatMove() {
    this.x += this.goatSpeed;
}
function updateGoats() {
    //update the goat positions and display them
    for (var i=0; i<goats.length; i+=1) {
        goats[i].move();
        goats[i].display();
    }
}
function removeGoats() {
    //remove goat when no longer on screen
    var goatOnScreen = [];
    for (var i=0; i<goats.length; i+=1) {
        if (goats[i].x + 400 > 0) {
            goatOnScreen.push(goats[i]);
        }
    }
    goats = goatOnScreen;
}
function addNewGoats() {
    var newGoatChance = 0.004;
    if (random(0,1) < newGoatChance) {
        goats.push(makeGoat(width));
    }
}

//the trees
function makeTree(tx) {
    var t = {x: tx,
        y: 90-random(0,50),
        treeSpeed: -5.0,
        treeSizeMod: random(0,51),
        move: treeMove,
        display: treeDisplay}
    return t;
}
function treeDisplay() {
    image(treeImg, this.x+200, this.y, 50+this.treeSizeMod,75+this.treeSizeMod);
}
function treeMove() {
    this.x += this.treeSpeed;
}
function updateTrees() {
    //update the tree positions and display them
    for (var i=0; i<trees.length; i+=1) {
        trees[i].move();
        trees[i].display();
    }
}
function removeTrees() {
    //remove tree when no longer on screen
    var treesOnScreen = [];
    for (var i=0; i<trees.length; i+=1) {
        if (trees[i].x + 400 > 0) {
            treesOnScreen.push(trees[i]);
        }
    }
    trees = treesOnScreen;
}
function addNewTrees() {
    var newTreeChance = 0.1;
    if (random(0,1) < newTreeChance) {
        trees.push(makeTree(width));
    }
}

function setup() {
    createCanvas(480,200);
    frameRate(25);
    
    //for the mountains
    for (var i=0; i<(width/5)+1; i+=1) {
        var n=noise(noiseParam);
        var value=map(n,0,1,0,height);
        mountain[i]=value;
        noiseParam+=noiseStep;
    }
    //for the mountains
    for (var i=0; i<(width/5)+1; i+=1) {
        var n=noise(noiseParam2);
        var value=map(n,0,1,0,height);
        hill[i]=value;
        noiseParam2+=noiseStep2;
    }
    //inital collection of trees
    for (var i=0; i<10; i+=1) {
        var rx = random(width);
        trees[i]=makeTree(rx);
    }
}

function draw() {
    background(123, 196, 227); //sky blue

    //sun
    noStroke();
    fill(255, 255, 227); //very light yellow
    ellipse(40,30,25);

    mountains();
    hills();

    //trees
    updateTrees();
    removeTrees();
    addNewTrees();

    //goats
    updateGoats();
    removeGoats();
    addNewGoats();

    //fence
    var fenceX=0;
    for (var i=0; i<5; i+=1) {
        image(fenceImg, fenceX+(i*200),115, 200,100);
    }
}

LO: Societal Impacts of Digital Art

From https://www.coindesk.com/markets/2021/08/02/nft-markets-post-record-breaking-week/

NFTs have always felt like an infringement on artists’ work in general, but “NFTs and Copyright” has given me a better understanding of why I feel that way. A good quote from the article to understand the initial hope for NFTs is “NFTs are an attempt for digital creators to try and capture some of the uniqueness and scarcity that producers of physical works have naturally”, although where an NFT fails is returning value to its original creator: the artist. I assumed that NFTs had to be created by the original seller, but that isn’t even the case: they can be sold by a buyer of the original artwork. This means that an artist can put their hardest work into a piece of artwork, just to have it resold by another person at minimal effort for potentially very high reward. Photographs can be made into NFTs, making even the likeness of another person something to capitalize off of. Although the artist is still noted with the original copyright, copyright is a tricky thing for artists in the NFT space. Maybe someone would buy an original work after having seen the NFT, but a copyright doesn’t pay for groceries.

“NFTs and Copyright”, https://www.plagiarismtoday.com/2021/03/16/nfts-and-copyright/, 2021

Project 11

sketch

// gnmarino
// gia marino
// section D

// sushi conveyor belt animation

var sushis = [];
var nigiris = [];

function setup() {
    createCanvas(480, 320);

}

function draw() {
    background(220);

    // moves sushis and nigiris 
    moveDisplayOfSushiAndNigiri(); 
    // removes them if they go off the screen
    removeOldSushiAndNigiri();
    // adds new sushis and nigiris based off a low probability
    addSushi_or_Nigiri();
    // makes conveyour belt for sushi and nigiri to move on
    conveyorBelt();
}

function removeOldSushiAndNigiri() {
    var freshSushi = [];
    var freshNigiri = [];

    // if sushis are on the screen then put them in fresh sushi array
    // if they are not on the screen then they will disappear because 
    // they won't be added to the new array
    for (var i = 0; i < sushis.length; i++){
        if (sushis[i].x + sushis[i].sushiWidth > 0) {
            freshSushi.push(sushis[i]);
        }
    }

    // same with nigiris
    for (var i = 0; i < nigiris.length; i++){
        if (nigiris[i].x + nigiris[i].nigiriWidth > 0) {
            freshNigiri.push(nigiris[i]);
        }
    }

    sushis = freshSushi;
    nigiris = freshNigiri;
}

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

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

function addSushi_or_Nigiri() {

    // this is the probability of being added everytime code loops
    var addSushiLikelihood = .005;
    var addNigiriLikelihood = .004;

    if(random(0, 1) < addSushiLikelihood) {
        sushis.push(makeSushi(width));
    }

    if(random(0, 1) < addNigiriLikelihood) {
        nigiris.push(makeNigiri(width +10));
    }

}

function displayNigiri() {

    push();
    strokeWeight(2);
    // these variables are used to make it easier to put the shapes together
    var nigiriTop = 180-this.nigiriHeight   // conveyor belt is at 180
    var nigiriMiddle = this.nigiriWidth/2 + this.x

    fill(247, 246, 241);    //off-white
    rect(this.x, nigiriTop, this.nigiriWidth, this.nigiriHeight);
    fill(this.sashimiColor);
    ellipse(nigiriMiddle, nigiriTop, this.nigiriWidth + 15, 40);

    // this is to cover last ellipse so it looks more like shashimi
    fill(247, 246, 241);    //off-white
    ellipse(nigiriMiddle, nigiriTop + 10, this.nigiriWidth, 25);
    noStroke();
    rect(this.x + 1, nigiriTop + 10, this.nigiriWidth-2, 15);
    pop();

}

function displaySushi() {

    // these variables are used to make it easier to put the shapes together
    var sushiMiddle = this.sushiWidth/2 + this.x
    var sushiTop = 180-this.sushiHeight     // conveyor belt is at 180
    push();
    strokeWeight(2);
    fill(this.wrapColor);
    rect(this.x, sushiTop, this.sushiWidth, this.sushiHeight);
    fill(247, 246, 241);    //off-white
    ellipse(sushiMiddle, sushiTop, this.sushiWidth, 25);
    fill(this.fishColor);
    ellipse(sushiMiddle, sushiTop, this.sushiWidth-20, 15);
    pop();
}

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

// sushi object
function makeSushi(originX) {
    var sushi = {x: originX, 
                 sushiWidth: random(55, 100),
                 sushiHeight: random(35, 70),
                 wrapColor: color(0, random(100) , 0),
                 fishColor: 
                 color(random(230, 260), random(145, 225), random(70, 160)),
                 speed: -3,
                 move: move_sushi_nigiri,
                 display: displaySushi}
    return sushi;
}

// nigiri object
function makeNigiri(originX) {
    var nigiri = {x: originX,           // don't know if i need to change that
                 nigiriWidth: random( 70, 110),
                 nigiriHeight: random( 15, 40),
                 sashimiColor: 
                 color(random(230, 260), random(145, 225), random(70, 160)),
                 speed: -3,
                 move: move_sushi_nigiri,
                 display: displayNigiri}
    return nigiri;
}

function conveyorBelt() {

    push();
    fill(70);
    rect(40, 185, 440, 150)
    fill(180);
    strokeWeight(5);
    ellipse(30, 260, 150);
    ellipse(450, 260, 150);

    strokeWeight(12);
    line(30, 335, 450, 335);
    line(30, 185, 450, 185);
    arc(30, 260, 150, 150, radians(90), radians(270), OPEN);
    arc(450, 260, 150, 150, radians(-90), radians(90), OPEN);

    pop();
}

Looking Outwards 11

This week I decided to look into the article “NFTs and Copyright”.

What I found most interesting is that basically NFTs don’t give the “owner” copywriter ownership so they cannot print or distribute the work without permission. It is basically making digital work collectors items.

What’s even more interesting is that you can make an NFT for anything. So spammers are grabbing URLs and releasing NFTS upon them. However, this is also a big copyright infringement, and that’s where the problem is created.

Overall, it could help creators prove their copyright, and it does give digital creators a way to give out unique copies of their work, the problem is there is no system or governing for NFTs to prevent bots.

I think NFTs shows how a virtually useless thing can be abused, which really shows how our society works and how easily the internet makes it to abuse things. Overall, I think it’s very scary that loads of money can be passed around and rules can be broken so easily if there isn’t laws in place to stop them.

Link to article: https://www.plagiarismtoday.com/2021/03/16/nfts-and-copyright/

Project 11: Generative Landscape

sketch
//Julianna Bolivar
//jbolivar@andrew.cmu.edu
//Section D
//Generative Landscape

var hills = []; //hills array
var trees = [];
var treesShowing = [];
var clouds = [];
var cloudsShowing = [];
var counter = 0;
var cloudCounter = 0;
var noiseParam = 0;
var noiseStep = 0.002;


function setup() {
    createCanvas(480, 300);
    //trees 
    for (var i = 0; i < 20;i++){
        var trs = random(width);
        trees[i] = makeTrees(trs);
    }
    //hills
    for (var i=0; i<width/2+1; i++){
        var n = noise(noiseParam);
        var value = map(n, 0, 1, 0, height);
        noiseParam += noiseStep;
        hills.push(value);
    }

      for (var i = 0; i < 5; i ++) {
        var cloudX = random(width);
        var cloudY = random(0, 40);
        cloudsShowing[i] = makeClouds(cloudX, cloudY);
    }

    frameRate(20);
}

function draw() {
    background(165,182,182);
    noStroke();
    
    //sun
    fill(204,102,0);
    circle(40,50,30);
    

    //hills fill shape
    beginShape(); 
    fill(56,87,33);
    vertex(0, height);
    for (var i=0; i<width/2; i+=1){
        vertex(i*5, hills[i]);
    }
    vertex(width, height);
    endShape();
    hills.shift();
    hills.push(map(noise(noiseParam), 0, 1, 0, height));
    noiseParam += noiseStep; //move sideways

    updateAndDrawClouds();
    removeCloudsOffScreen();
    addNewClouds();

    updateandDrawTrees();
    removeTreesOffScreen();
    addNewTrees();
    
}

function updateandDrawTrees(){
    for(var i=0; i < treesShowing.length; i++){
        treesShowing[i].move();
        treesShowing[i].draw();
    }

}

function removeTreesOffScreen(){
    var treesToKeep = [];
    for (var i = 0; i < treesShowing.length; i++){
        if (treesShowing[i].x+20 > 0) {
            treesToKeep.push(treesShowing[i]);
        }
    }
    treesShowing = treesToKeep; // remember showing trees
}

function addNewTrees(){
    counter+=1;
    if (counter % 25 == 0){
        treesShowing.push(makeTrees(width, random(150,300)));
    }
}

function makeTrees(tx, ty){
    var trees = {x:tx, y:ty, 
        width:random(10, 20), 
        height:random(50, 90), 
        r:random(75,200), g:random(75,100), b: 0,
        speed: -1.0,
        move: treesMove,
        draw: drawTrees }
    return trees;

}

//draw trees
function drawTrees(){
    fill(160,82,45);
    rect(this.x, this.y, this.width, this.height);
    fill(this.r, this.g, this.b);
    circle(this.x-5, this.y-10, 50);
    circle(this.x+20, this.y-10, 50);
    circle(this.x+5, this.y-20, 50);
}

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




function updateAndDrawClouds(){
    for (var i = 0; i < cloudsShowing.length; i++) {
        cloudsShowing[i].move();
        cloudsShowing[i].draw();
    }
}

function removeCloudsOffScreen(){
    var cloudsToKeep = [];
    for (var i = 0; i < cloudsShowing.length; i++){
        if (cloudsShowing[i].cloudX + 10 > 0) {
            cloudsToKeep.push(cloudsShowing[i]);
        }
    }
    cloudsShowing = cloudsToKeep;
}

function addNewClouds(){
  cloudCounter+=1;
    if (cloudCounter % 100 == 0){
        cloudsShowing.push(makeClouds(width, random(0,60)));
    }
}

function makeClouds(cx, cy){
    var c = {cloudX: cx,
             cloudY: cy,
             cloudSpeed: -1,
             move: cloudMove,
             draw: cloudDraw}
    return c;
}

function cloudMove(){
    this.cloudX += this.cloudSpeed;
}

function cloudDraw(){
    fill(165);
    noStroke();
    ellipse(this.cloudX, this.cloudY - 5, 60, 50);
    ellipse(this.cloudX - 20, this.cloudY + 10, 60, 50);
    ellipse(this.cloudX + 15, this.cloudY - 5, 70, 50);
    ellipse(this.cloudX + 5, this.cloudY + 20, 60, 50);
    ellipse(this.cloudX + 30, this.cloudY + 10, 80, 50);
}

My landscape is inspired by the autumn. The view from the design studio is very scenic. I think I am most proud of this deliverable. I’ve struggled to make beautiful projects, but I’m pretty satisfied with this one.

LO: Social Impacts of Digital Art

Clearview AI is an app currently being used by hundreds of law enforcement agencies in the US, including the FBI. It can compare a photo of someone’s face to a database of more than 3 billion pictures that Clearview has access to from Facebook, Venmo, YouTube, and other sites. This database includes the FBI’s own database, which contains passport and driver’s license photos. It totals more than 640 million images of US citizens. Clearview AI then returns with matches, along with links to the sites where the database photos were from; it can easily return a name, and possibly a home address as well. What if the general public had access to this app? Police officers and Clearview investors think it’s a possibility for the future. Hopefully this never happens. Personally, I’d never feel safe again. And even in the hands of law enforcement, this technology is controversial. Privacy advocates warn that the app could still return false matches to the police and result in the incarceration of innocent people, and mass implementation and abuse of this technology could be a slippery slope to a surveillance state.

https://www.cnet.com/tech/services-and-software/clearview-app-lets-strangers-find-your-name-info-with-snap-of-a-photo-report-says/

Project: Generative Landscape

luca generative landscape

//lucacao
//sectionD
//Project11

var boat = [];//array to store boat number
var speed = 1;


function setup() {
    createCanvas(480, 480);
    noStroke();
    frameRate(5);

    for (var i = 0; i < 10;i++){
        bx = random(width);//boat x position
    }
}

function draw() {
    background(220);
    sea(); 
    sky();
    moon();

    for(var i = 0; i < 5; i++){
        drawBoat();
        boat++;
        print(boat);
    }
}

function sea() {
    fill(0, 64, 108);
    rect(0,240,480,240);
}

function sky(){
    fill(0, 37, 62);
    rect(0,0,480,240);

    for (var i = 0; i < 100;i++){
        var starx = random(0,480);
        var stary = random(0,240);
        fill(255,255,255);
        ellipse(starx,stary,3,3);
        starx += speed;
        
    }
    // noLoop();
}

function moon(){
    fill(252, 202, 70);
    ellipse(350,80,100,100);
}

function drawBoat(){
    var blength = random(50,100);
    var bheight = random(20,30);
    var bx = random(0,480);
    var by = random(240,480);

    this.bx += this.speed;

    fill(0);
    rect(bx,by,blength,bheight);
    rect(bx+20,by-10,blength/2,bheight/2);
    triangle(bx+blength,by+bheight,bx+blength,by,
        bx+blength+30,by-10);
    
}

For my landscape, I wanted to depict a scene with boats and stars moving at night. In my thumbnail sketch, I divided the canvas into halves, with a sky which is the top half, and the sea at the bottom half. I thought it would be more visually interesting with objects moving on all areas of the canvas. During this project, I faced difficulty trying to animate my objects, but I solved the problem by creating multiple functions which helped me clarify my code structure and tackle specific problems. The randomness in my code exists in the size and position of the boat.