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:

(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 

https://ars.electronica.art/aeblog/en/2020/04/10/women-in-media-arts-ai/

I started off this week reading about women in media arts. The first video included on Gender Shades, I did not, sadly, get surprised by the context. What did surprise me however, was how the computer system was so wrong on identifying females of darker color; one as a person at all, and secondly, not even being able to identify their genders correctly. The digital world needs to grow to be neutral and inclusive, and if in testing there is a gap between recognizing people of gender and race, there is a problem. The computation itself is biased, but not by the machine by the programmers. I feel that sometimes testing can be overlooked when it seems to be working fine on individuals, but this is a flaw we see commonly not just in AI but in Women’s healthcare.

For the Women reclaiming AI videos I found the idea of the voice speaking system, that was similar to Alexa to be particularly interesting. I wonder where that could go if those types of questions could be asked by younger girls. Questions about womanhood that could be answered when they need help or clarification, I think, could be pretty revolutionary. I have never tried to ask my Alexa any of those types of questions, but I wonder how current AI on the market would answer. I never really considered how AI might be biased with speaking technology, but I could imagine that if anything, it probably holds the most bias.

 In the European Platform video I also thought it was interesting to consider how AI is imagined with blue, which is a very masculine color and how women can find themselves in that space. Something that I ran across recently when concerning women in coding was hearing about Margaret Hamilton and getting men on the moon. I feel that there is a lot of gender bias in her story and people refused to listen to her and asked her why she was even at NASA, when her programming helped get the astronauts home. She was very overlooked for her astounding work and I don’t think many people ever come across her name.

I worked too hard on this project. I ended up drawing all of the images in my code on procreate, so I do not have many sketches except for some resizing issues.

The code was easier to figure out than I thought, but because I decided to use so many elements it got repetitive fast, there are a few things I could have tried i think in ways of getting my stuff to show up more randomly, but because of the way I wrote my code I found that setting that up farther would have not been worth the time for the effect.

Drawing took a few days, but I really like my images.

Some of the math I had to do really made me think and I can’t quite decide if using images made this take longer or shorter to code.

sketchfile

var szex = 550; // x size for some images
var szey = 365; //y size for some images
var szex2 = 367.2; //x size for smaller img
var szey2 = 240; //y size for smaller img
var tulip = [];
var offset = 0;
var skys = [];
var mountains = [];
var airballoons = [];
var trees = [];
var windmillBottoms = [];
var birds = [];
var electric = [];
var bunnys = [];
var fullWind = [];
var treeLines = [];
var cats = [];



function preload() {
    flowerImg = loadImage("https://i.imgur.com/VSMWH0A.png");
    tree1Img = loadImage("https://i.imgur.com/s66n2RJ.png");
    mountainsImg = loadImage("https://i.imgur.com/FCSY9xA.png");
    birdImg = loadImage("https://i.imgur.com/2zN4jIk.png");
    windmillBottomImg = loadImage("https://i.imgur.com/xGOhbMn.png");
    electricWindmillImg = loadImage("https://i.imgur.com/0R2RKsz.png");
    airballoonImg = loadImage("https://i.imgur.com/HPmyDXQ.png");
    bunnyImg = loadImage("https://i.imgur.com/tOtLTev.png");
    fullWindmillImg = loadImage("https://i.imgur.com/EUCzk9P.png");
    treeLineImg = loadImage("https://i.imgur.com/ipeIQSL.png");
    catImg = loadImage("https://i.imgur.com/d9pAL7i.png");
    skyImg = loadImage("https://i.imgur.com/AykCYLx.png");
}



function tulips(tx) {
    var p = {x: tx, 
        right: tulipsRight,
        display: tulipsDisplay};
    return p;
}

function tulipsRight() {
    return this.x + 900;
}

function tulipsDisplay(tx) {
    flower2Img.resize(flower2Img.width - 100, flower2Img.height);
   image(flower2Img, this.x, 190, 900, 105);//left
}


function bird(bx) {
    var b = {x: bx, 
        right: birdRight,
        display: birdDisplay};
    return b;
}

function birdRight() {
    return this.x + szex2 + width * 9;
}

function birdDisplay(tx) {
   image(birdImg, this.x + 200, 0, 165.4, 100); //move faster across the screen
}



function airballoon(ax) {
    var a = {x: ax, 
        right: airballoonRight,
        display: airballoonDisplay};
    return a;
}

function airballoonRight() {
    return this.x + szex2 + width * 1.5;
}

function airballoonDisplay(tx) {
   image(airballoonImg, this.x, 110, szex2, szey2);
}



function sky(sx) {
    var s = {x: sx, 
        right: skyRight,
        display: skyDisplay};
    return s;
}

function skyRight() {
    return this.x + 500;
}

function skyDisplay(tx) {
   image(skyImg, this.x, 0, 500, 300);
}


function mountain(mx) {
    var  m = {x: mx, 
        right: mountainRight,
        display: mountainDisplay};
    return m;
}

function mountainRight() {
    return this.x + 827 + width * 5;
}

function mountainDisplay(tx) {
   image(mountainsImg, this.x - 20, -85, 827, 500);
}


function tree(tx) {
    var  t = {x: tx, 
        right: treeRight,
        display: treeDisplay};
    return t;
}

function treeRight() {
    return this.x + szex + width * 1.5;
}

function treeDisplay(tx) {
   image(tree1Img, this.x, 20, szex, szey);
}


function treeLine(tx) {
    var  t = {x: tx, 
        right: treeLineRight,
        display: treeLineDisplay};
    return t;
}

function treeLineRight() {
    return this.x + szex + width * 1.7;
}

function treeLineDisplay(tx) {
   image(treeLineImg, thisx, 25, szex, szey); //with mountains or without
}
   

function windmillBottom(wx) {
    var  w = {x: wx, 
        right: windmillBottomRight,
        display: windmillBottomDisplay};
    return w;
}

function windmillBottomRight() {
    return this.x + szex2 + width * 2.2;
}

function windmillBottomDisplay(tx) {
   image(windmillBottomImg, this.x + 150, 87, szex2, szey2);//dont show with mountain
}


function windmill(wx) {
    var  w = {x: wx, 
        right: windmillRight,
        display: windmillDisplay};
    return w;
}

function windmillRight() {
    return this.x + 248 + width * 3.2;
}

function windmillDisplay(tx) {
   image(fullwindmillImg, this.x + 20, 100, 248, 150);
}
 

function electricwindmill(wx) {
    var  w = {x: wx, 
        right: electricwindmillRight,
        display: electricwindmillDisplay};
    return w;
}

function electricwindmillRight() {
    return this.x + szex + width * 10.2;
}

function electricwindmillDisplay(tx) {
   image(electricWindmillImg, this.x , 5, szex, szey); //dont show with other windmills
}
    

function bunny(bx) {
    var  b = {x: bx, 
        right: bunnyRight,
        display: bunnyDisplay};
    return b;
}

function bunnyRight() {
    return this.x + szex2 + width * 7.3;
}

function bunnyDisplay(tx) {
   image(bunnyImg, this.x, 130, szex2, szey2);
}


function cat(cx) {
    var  c = {x: cx, 
        right: catRight,
        display: catDisplay};
    return c;
}

function catRight() {
    return this.x + width * 5.5;
}

function catDisplay(tx) {
   image(catImg, this.x + 200, 160, 206.75, 125);
}





function setup() {
    createCanvas(480, 280);
    var sk = sky(1);
    skys.push(sk);
    var tul = tulips(1);
    tulip.push(tul);
    var ar = airballoon(1);
    airballoons.push(ar);
    var mount = mountain(1);
    mountains.push(mount);
    var bunn = bunny(1);
    bunnys.push(bunn);
    var kitten = cat(1);
    cats.push(kitten);
    var bid = bird(1);
    birds.push(bid);
    var tr = tree(1);
    trees.push(tr);
    var tre = treeLine(1);
    treeLines.push(tre);
    var wmb = windmillBottom(1);
    windmillBottoms.push(wmb);
    var fw = windmill(1);
    fullWind.push(fw);
    var ew = electricwindmill(1);
    electric.push(ew);
}




function draw() {
    noStroke();
    //SKY
    for (var i = 0; i < skys.length; i++) {
        var s = skys[i];
        image(skyImg, s.x - offset, 0, 500, 400);//left
    }
    // clean up statement
    if (skys.length > 0 & skys[0].right() < offset) {
        skys.shift();
    }
    // make a new sky
    var lastSky = skys[skys.length-1];
    if (lastSky.right() - offset < width) {
        var s = sky(lastSky.right()); 
        skys.push(s);
}


//MOUNTAIN
     for (var i = 0; i < mountains.length; i++) {
        var m = mountains[i];
        image(mountainsImg, m.x - offset, -78, 827, 500);
    }
    // make a new mountain
    var lastMountain = mountains[mountains.length-1];
    if (lastMountain.right() - offset < width) {
        var m = mountain(lastMountain.right()); 
        mountains.push(m);
}


//TREE
for (var i = 0; i < trees.length; i++) {
        var tr = trees[i];
        image(tree1Img, tr.x - offset, 23, szex, szey);
    }
    // clean up statement
    if (trees.length > 0 & trees[0].right() < offset) {
        trees.shift();
    }
    // make a new tree 
    var lastTree = trees[trees.length-1];
    if (lastTree.right() - offset < width) {
        var tr = tree(lastTree.right()); 
        trees.push(tr);
}
   
   //TREELINE
for (var i = 0; i < treeLines.length; i++) {
        var tre = treeLines[i];
        image(treeLineImg, tre.x - offset, 25, szex, szey); //with mountains or without
    }
    // clean up statement
    if (treeLines.length > 0 & treeLines[0].right() < offset) {
        treeLines.shift();
    }
    // make a new treeline
    var lastTreeLine = treeLines[treeLines.length-1];
    if (lastTreeLine.right() - offset < width) {
        var tre = treeLine(lastTreeLine.right()); 
        treeLines.push(tre);
} 



//WINDMILLBOTTOM
    for (var i = 0; i < windmillBottoms.length; i++) {
        var wnd = windmillBottoms[i];
        image(windmillBottomImg, wnd.x - offset, 87, szex2, szey2);
    }
    // clean up statement
    if (windmillBottoms.length > 0 & windmillBottoms[0].right() < offset) {
        windmillBottoms.shift();
    }
    // make a new windmill
    var lastwindmillBottom = windmillBottoms[windmillBottoms.length-1];
    if (lastwindmillBottom.right() - offset < width) {
        var wnd = windmillBottom(lastwindmillBottom.right()); 
        windmillBottoms.push(wnd);
}
    


//ELECTRIC WINDMILL
for (var i = 0; i < electric.length; i++) {
        var ew = electric[i];
        image(electricWindmillImg, ew.x - offset, 5, szex, szey); //dont show with other windmills
    }
    // clean up statement
    if (electric.length > 0 & electric[0].right() < offset) {
        electric.shift();
    }
    // make a new windmill
    var lastElectricWindmill = electric[electric.length-1];
    if (lastElectricWindmill.right() - offset < width) {
        var ew = electricwindmill(lastElectricWindmill.right()); 
        electric.push(ew);
}
    

//WINDMILL
for (var i = 0; i < fullWind.length; i++) {
        var full = fullWind[i];
         image(fullWindmillImg, full.x - offset, 100, 248, 150); //can be anytime show up
    }
    // clean up statement
    if (fullWind.length > 0 & fullWind[0].right() < offset) {
        fullWind.shift();
    }
    // make a new windmill
    var lastWindmill = fullWind[fullWind.length-1];
    if (lastWindmill.right() - offset < width) {
        var full = windmill(lastWindmill.right()); 
        fullWind.push(full);
}



//AIRBALLOONS
    for (var i = 0; i < airballoons.length; i++) {
        var air = airballoons[i];
        image(airballoonImg, air.x - offset, 110 - offset/10, szex2, szey2);
    }
    // clean up statement
    if (airballoons.length > 0 & airballoons[0].right() < offset) {
        airballoons.shift();
    }
    // make a new balloom
    var lastAirballoon = airballoons[airballoons.length-1];
    if (lastAirballoon.right() - offset < width) {
        var air = airballoon(lastAirballoon.right()); 
        airballoons.push(air);
}

//background for tulips
for(var i = 0 ; i < width; i ++){
    fill(253, 218 - offset / 75, 42);
    rect(0, 195, 480, 100);
}
//slight change every time offset increases so slight won't notice till big change




//TULIPS
    for (var i = 0; i < tulip.length; i++) {
        var t = tulip[i];
        image(flowerImg, t.x - offset, 190, 900, 105);//left
    }

    // clean up statement
    if (tulip.length > 0 & tulip[0].right() < offset) {
        tulip.shift();
    }

    // make a new tulip
    var lastTulip = tulip[tulip.length-1];
    if (lastTulip.right() - offset < width) {
        var t = tulips(lastTulip.right()); 
        tulip.push(t);
}





//BIRD ??NEEDS FIX
 for (var i = 0; i < birds.length; i++) {
        var bids = birds[i];//need to change spawn pnt
        image(birdImg, bids.x - (offset + offset), 0, 165.4, 100); //move faster across the screen
    }
    // clean up statement
    if (birds.length > 0 & birds[0].right() < offset) {
        birds.shift();
    }
    // make a new bird //make less often
    var lastBird = birds[birds.length-1];
    if (lastBird.right() - (offset + offset) < width) {
        var bids = bird(lastBird.right()); 
        birds.push(bids);
}





    //BUNNY
 for (var i = 0; i < bunnys.length; i++) {
        var buns = bunnys[i];
        image(bunnyImg, buns.x - offset, 130, szex2, szey2);
    }
    // clean up statement
    if (bunnys.length > 0 & bunnys[0].right() < offset) {
        bunnys.shift();
    }
    // make a new rabbit //make less often
    var lastBunny = bunnys[bunnys.length-1];
    if (lastBunny.right() - offset < width) {
        var buns = bunny(lastBunny.right()); 
        bunnys.push(buns);
}




    //CAT
 for (var i = 0; i < cats.length; i++) {
        var kittens = cats[i];
        image(catImg, kittens.x - offset , 160, 206.75, 125);
    }
    // clean up statement
    if (cats.length > 0 & cats[0].right() < offset) {
        cats.shift();
    }
    // make a new cat //make less often
    var lastCat = cats[cats.length-1];
    if (lastCat.right() - offset < width) {
        var kittens = cat(lastCat.right()); 
        cats.push(kittens);
}



    offset ++;
}

file

//Story:
//There is a frog sitting on the ground who waves at you.
//You can here rain and frogs croaking in the background.
//a rain cloud appears and soon the frog stops waving
//as the rain cloud moves across the screen, thunder strikes and makes the frog blush

var m = 13; // for my measurement ration out of 13
var f = 220; //frog size
var thunder;
var raining;
var frog;

function preload() {
   frog = loadSound("https://courses.ideate.cmu.edu/15-104/f2021/wp-content/uploads/2021/11/frogs.wav");
   raining = loadSound("https://courses.ideate.cmu.edu/15-104/f2021/wp-content/uploads/2021/11/rain.wav");
   thunder = loadSound("https://courses.ideate.cmu.edu/15-104/f2021/wp-content/uploads/2021/11/thunderstorm.wav");
}

function soundSetup() { // setup for audio generation
    frog.setVolume(1.3);
    raining.setVolume(0.7);
    thunder.setVolume(5);
}

function setup() {
    createCanvas(400, 400);
    frameRate(1);
    useSound();
}

function froggie(){
    translate(90,170);
    strokeWeight(5);
    fill(168, 239, 154);
    beginShape(); //measurements are by #/13 because my reference was 13 x 13 roughly
    curveVertex((11.4 / m) * f, (12.4 / m) * f);//1
    curveVertex((11.4 / m) * f, (12.4 / m) * f);//1
    curveVertex((12.5 / m) * f, (9.2 / m) * f);//2
    curveVertex((9.4 / m) * f, (2.5 / m) * f);//4 (skips 3 did not use point)
    curveVertex((8.9 / m) * f, (.5 / m) * f);//5
    curveVertex((8.1 / m) * f, (.1 / m) * f);//6
    curveVertex((7.4 / m) * f, (.5 / m) * f);//7
    curveVertex((6 / m) * f, (.4 / m) * f);//8
    curveVertex((4.6 / m) * f, (.5 / m) * f);//9
    curveVertex((3 / m) * f, (.2 / m) * f);//10
    curveVertex((1.5 / m) * f, (3 / m) * f);//11
    curveVertex((2.3 / m) * f, (5.3 / m) * f);//12
    curveVertex((2 / m) * f, (6.5 / m) * f);//13
    curveVertex((1.9 / m) * f, (7.5 / m) * f);//13.5 (new point)
    curveVertex((2 / m) * f, (9 / m) * f);//14
    curveVertex((2.2 / m) * f, (9.7 / m) * f);//15
    curveVertex((1.4 / m) * f, (10.4 / m) * f);//15.5 (new point)
    curveVertex((.8 / m) * f, (10.8 / m) * f);//16
    curveVertex((.2 / m) * f, (10.5 / m) * f);//17
    curveVertex((.8/ m) * f, (12.4 / m) * f);//18
    curveVertex((6.5/ m) * f, f);//19
    endShape(CLOSE);
    
    noFill(); 
    beginShape();
    curveVertex((3.8 / m) * f,(1.9 / m) * f);
    curveVertex((3.8 / m) * f,(1.9 / m) * f);
     curveVertex((4.2 / m) * f,(1.95 / m) * f);
    curveVertex((5 / m) * f,(1.7 / m) * f);
     curveVertex((5.8 / m)*f,(1.95 / m) * f);
    curveVertex((6.2 / m)*f,(1.9 / m) * f);
    curveVertex((6.2 / m)*f,(1.9 / m) * f);
    endShape();

    beginShape(); // arm on left
    curveVertex((2.3 / m) * f, (9.6 / m) * f);
    curveVertex((2.3 / m) * f, (9.6 / m) * f);
    curveVertex((2.5 / m) * f, (10.7 / m) * f);
    curveVertex((3.3 / m) * f, (11.8 / m) * f);
    curveVertex((3.5 / m) * f, (9.2 / m) * f);
    curveVertex((3.5 / m) * f, (9.2 / m) * f);
    endShape();

    beginShape(); // foot on right
    curveVertex((8 / m) * f, (12.9 / m) * f);
    curveVertex((8 / m) * f, (12.9 / m) * f);
    curveVertex((7.6 / m) * f, (11 / m) * f);
    curveVertex((8.4 / m) * f, (11.4 / m) * f);
    curveVertex((8.8 / m) * f, (10.6 / m) * f);
    curveVertex((9.7 / m) * f, (10.5 / m) * f);
    curveVertex((9.7 / m) * f, (10.5 / m) * f);
    endShape();
}

function arm1() { //wave arm
    strokeWeight(5);
    noFill(); 
    beginShape(); // arm on left
    curveVertex((5.5 / m) * f, (9.2 / m) * f);
    curveVertex((5.5 / m) * f, (9.2 / m) * f);
    curveVertex((5.7 / m) * f, (10.7 / m) * f);
    curveVertex((6.5 / m) * f, (11.8 / m) * f);
    curveVertex((7.2 / m) * f, (9.2 / m) * f);
    curveVertex((7.2 / m) * f, (9.2 / m) * f);
    endShape();
} 

function arm2() { //wave arm
    beginShape(); // arm on left
    curveVertex((5.5 / m) * f, (9.2 / m) * f);
    curveVertex((5.5 / m) * f, (9.2 / m) * f);
    curveVertex((5.7 / m) * f, (9.7 / m) * f);
    curveVertex((6.5 / m) * f, (10.5 / m) * f);
    curveVertex((7.2 / m) * f, (9.2 / m) * f);
    curveVertex((7.2 / m) * f, (9.2 / m) * f);
    endShape();
} 

function arm3() { //wave arm
    beginShape(); // arm on left
    curveVertex((5.5 / m) * f, (9.2 / m) * f);
    curveVertex((5.5 / m) * f, (9.2 / m) * f);
    curveVertex((5.7 / m) * f, (9 / m) * f);
    curveVertex((6.5 / m) * f, (8.8 / m) * f);
    curveVertex((7.2 / m) * f, (9.2 / m) * f);
    curveVertex((7.2 / m) * f, (9.2 / m) * f);
    endShape();
} 

function arm4() { //wave arm
    beginShape(); // arm on left
    curveVertex((5.5 / m) * f, (9.2 / m) * f);
    curveVertex((5.5 / m) * f, (9.2 / m) * f);
    curveVertex((6 / m) * f, (7 / m) * f);
    curveVertex((6.5 / m) * f, (7 / m) * f);
    curveVertex((7.2 / m) * f, (9.2 / m) * f);
    curveVertex((7.2 / m) * f, (9.2 / m) * f);
    endShape();
} 

function arm5() { //wave arm
    beginShape(); // arm on left
    curveVertex((5.5 / m) * f, (9.2 / m) * f);
    curveVertex((5.5 / m) * f, (9.2 / m) * f);
    curveVertex((5 / m) * f, (7 / m) * f);
    curveVertex((5.7 / m) * f, (7 / m) * f);
    curveVertex((7.2 / m) * f, (9.2 / m) * f);
    curveVertex((7.2 / m) * f, (9.2 / m) * f);
    endShape();
} 

function arm6() { //wave arm
    beginShape(); // arm on left
    curveVertex((5.5 / m) * f, (9.2 / m) * f);
    curveVertex((5.5 / m) * f, (9.2 / m) * f);
    curveVertex((7.3 / m) * f, (7 / m) * f);
    curveVertex((8 / m) * f, (7 / m) * f);
    curveVertex((7.2 / m) * f, (9.2 / m) * f);
    curveVertex((7.2 / m) * f, (9.2 / m) * f);
    endShape();
} 

function eyes1() {
    fill(0);
    ellipse((3 / m) * f, (1.2 / m) * f, 7, 10);
    ellipse((7.7 / m) * f, (1.2 / m) * f, 7, 10);
}

function eyes2() {
    arc((3 / m) * f, (1.2 / m) * f, 7, 10, 0, PI, CHORD);
    arc((7.7 / m) * f, (1.2 / m) * f, 7, 10, 0, PI, CHORD);
}

function eyes3() {
    rect((2.9 / m) * f, (1.1 / m) * f, 4, .05);
    rect((7.6 / m) * f, (1.1 / m) * f, 4, .05);
}

function blush(alpha) {
    push();
    translate(90,180);
    noStroke();
    fill(239, 101, 58, alpha);
    circle((2.5 / m) * f, (2.3 / m) * f, 30);
    circle((8 / m) * f, (2.3 / m) * f, 30);
    pop();
}

function cloud(b) { //b is x movement of cloud
    translate(-90, -180);
    fill(240);
    strokeWeight(0);
    beginShape();
    vertex(-50 + b, 100);
    vertex(-50 + b, 100);
    vertex(-150 + b, 100);
    curveVertex(-170 + b, 90);
    curveVertex(-165 + b, 85);
    curveVertex(-170 + b, 50);
    curveVertex(-75 + b, 80);
    curveVertex(-55 + b, 85);
    curveVertex(-45 + b, 90);
    endShape(CLOSE);
}

function ground(){
    fill(124, 66, 55);
    ellipse(200, 430, 550, 300);
}

function drawEyes(){
    if(frameCount % 4 === 0) { //for eyes //frameCount starts @ 0 
        eyes1();
      }
    if(frameCount % 4 === 1 || frameCount % 4 === 3) {
        eyes2();
      }
    if(frameCount % 4 === 2){
        eyes3();
      }
}

function drawarm() {
    if(frameCount % 1 === 0 & frameCount <= 1 || frameCount >= 16){
        arm1();
      }
    if(frameCount < 3 & frameCount >= 2 || frameCount == 15){
        arm2();
      }
    if(frameCount < 4 & frameCount >= 3 || frameCount == 14){
        arm3();
      }
    if(frameCount == 5 || frameCount == 7 || frameCount == 9 || 
        frameCount == 11 || frameCount == 13) {
        arm4();
      }
    if(frameCount == 4 || frameCount == 12 || frameCount == 8) {  
        arm5();
      }
    if(frameCount == 6 || frameCount == 10) {
        arm6();
      }
}

function rain(b, c, d) { //c is x movement of rain, d is y movement 
    fill(58, 101, 239); 
    constrain(c, -50 + b, -150 + b);
    constrain(d, 100, 400);
    circle(-87.5 + c + b, -145 + d, 5);//need to use noise
}

function draw() {
    background(173, 220, 216);
    ground();
    fill(0);
    if(frameCount > 0){
    text("Froggie in rain", 10, 15);
    froggie();
    drawarm(); 
    drawEyes();
    frog.play();
    raining.play();
    }
    if(frameCount >= 7){
        cloud(-170 + (frameCount * 35));
        for(var i = 0; i <= frameCount; i++){
        rain(-170 + (frameCount * 35), random(-85,40), random(250,600)); 
        }
      }
    if(frameCount >= 18){
        blush(45 * frameCount);//take 5 frames to get to full opac
      }
    if(frameCount >= 17){
      thunder.play();
      }
    if(frameCount > 22){
      frameCount === 1;
      }
}

I ended up using a ton of curves to draw my frog, so I have a ton of sketches showing my progress. I first worked by making my animations and characters and then moving on to sound so I knew my code better and new if things were not working last second it would be the sound files.

At first I really did not know how to start off with my portrait. I looked and reread the timeline for a while until I decided I wanted to do some sort of recreation of Chuck Close’s portraits. Instead of using colors to create skin tone, I ended up sticking with the pixel colors that I got using .get for my images. It took me the longest to set up my photo than to actually get my random walk to work.

So to get my work to be more like Close’s I made an array of two different size circles inside my pixels. I thought this looked really cool but I was hoping to get more definition in my features by doing this.

So I ended up using my Ipad to make a grid of areas in the face that I wanted to be more or less pixelated. I ended up counting and working from this top image to make sure I was using the right constrains in my for loops. I probably could have shortened my code for this project, but I was happy with how it was so I did not bother.

So, for every new and smaller square I was building I was also making my two circles on the top, unless the pixels got too small. I played around with the numbers a lot here. I felt that my image was very stagnant and decided to use noise to get my circles to vibrate in certain parameters. I thought doing this was quite funny because it reminded my a bit of the saying that the Mona Lisas eyes follow you across the room and, I felt that my entire face was doing the same.

file>

var noiseParam = 0;
var noiseStep = 0.1;
var img;
function preload(){
   img = loadImage("https://i.imgur.com/5n4h1dT.png");
}


function setup() {
    img.resize(img.width/3, img.height/3);//pixel image info
    createCanvas(img.width, img.height * .9);
}
function main(dx,dy){
    for(var col = 0; col < img.width; col += 8){ //main
        for(var row = 0; row < img.height; row += 8){
            var c = img.get(col,row);
            fill(color(c));
            noStroke();
            rect(col,row,8,8);
            ellipse((col + 4) + dx, (row - 4) + dy, 6, 6);
            ellipse((col + 4) + dx, (row - 12) + dy, 3, 3);
        }
    }
}

function face(){
    for(var col = 88; col < 248; col += 6){ //whole face
        for(var row = 120; row < 320 ; row += 6){
            var c = img.get(col, row);
            fill(color(c));
            noStroke();
            rect((col + 1.5), (row + 1.5), 5, 5);
            ellipse((col + 5.5) + dx, (row - 4) + dy, 5, 5);
            ellipse((col + 5.5) + dx, (row - 10) + dy, 2.5, 2.5);
        }
    }
}

function mainFeature(){
    for(var col = 104; col < 230; col += 4){ //clarity for face features == more pixels
        for(var row = 160; row < 216 ; row += 4){
            var c = img.get(col,row);
            fill(color(c));
            noStroke();
            rect((col + 4.5), (row + 4.5), 3, 3);
            ellipse((col + 8.5) + dx , (row - 4) + dy, 2, 2);
            ellipse((col + 8.5) + dx , (row - 6) + dy, 1.5, 1.5);
        } 
    }

    for(var col = 128; col < 186; col += 4){ //cont.
        for(var row = 216; row < 296 ; row += 4){
            var c = img.get(col,row);
            fill(color(c));
            noStroke();
            rect((col + 4.5), (row + 4.5), 3, 3);
            ellipse((col + 8.5) + dx ,(row - 4) + dy, 2, 2);
            ellipse((col + 8.5) + dx , (row - 6) + dy, 1.5, 1.5);

        }
    }
}

function eyes(){
    for(var col = 104; col < 136; col += 2){ //eye area 1: no circle, too small
        for(var row = 184; row < 216 ; row += 2){
            var c = img.get(col,row);
            fill(color(c));
            noStroke();
            rect((col + 6.5), (row + 6.5), 1, 1);
        }
    }
    for(var col = 176; col < 232; col += 2){ //eye area 2: no circle, too small
        for(var row = 184; row < 216 ; row += 2){
            var c = img.get(col, row);
            fill(color(c));
            noStroke();
            rect((col + 6.5), (row + 6.5), 1, 1);
        }
    }
}

function draw() {
    background(0);
    var offset = noise(noiseParam);
    offset = map(offset, 0, 1, -8, 8);
    dx = offset;
    dy = offset;
    main(dx, dy);
    face(dx, dy);
    mainFeature(dx, dy);
    eyes(dx, dy);
    noiseParam += noiseStep;
}

http://www.howeleryoon.com/work/

When looking for an artist, I came across Höweler + Yoon. They are more of a team of people rather than just one person and their work. I was interested in their work because it looks very futuristic or otherworldly. Their architecture reminded me of many dystopian films. One particular work that interests me is the Collier Memorial in Cambridge, MA. The structure makes a star/hand shape out of blocks of granite. Its form was helped with new digital fabrication and structural computation technologies. In my research, I think this is the largest structure I have seen that used computation. Höweler + Yoon is an architecture practice and creative studio with some 20 workers spanning from architects, designers, and researchers. It seems that the company does not rely on computation to create their designs, but a lot of their architecture and shape reminds me of the randomness used to create images and animations when coding.

https://mike-tucker.com/15/tanapura/

Mike Tucker has had quite the route to the work he has been doing for the past 5 years(from 2017). Most recently, he worked at Flash until it died due to Facebook and then to Magic Leap. He considers himself to be an Interactive Director, Designer & Develop. His most recent work has been Tonandi, Tana Pura, and PolyFauna. He works on spatial computing projects creating an augmented reality that turns sound into visual tech that you can touch and intact with the changed visuals, and therefore create your sound. People have described this as feeling a sort of synesthesia. Specifically his work with the Tonandi project at Magic Leap doing spatial sound and combining instillation withflexinility, making soundscapes. One thing that Tucker went on in his lecture to talk about was the importance of the environment in these augmented reality experiences. This struck home for me as someone who just did an AR reality project in my environmental design class. It was very easy for me to imagine the future of this project and how it could be used to re-image museum space. I admire his work on Tana Pura creating sound into a visual in real space. I think in the future there will be a real market for this especially for work for clients who want to integrate technology in spaces. 

Tucker’s way of presenting reminded me a lot of listening to a Ted talk. I like how he explains his work first, but at the end also talks about ways and platforms that you can get into work like his and how this technology is being implemented now, and where the future most likely lies in it. 

I decided to chose the Devil’s Curve for my project, mostly because I liked the way it looked. It was very hard at first because I have not been in a math class in years, to figure out what each part of my equations did. At first I had a problem where my signs were wrong and only had the crunode show up.

I got stuck for a bit, but the project seemed simpler than I thought at first. To better understand and to play around with my curve to figure out how I should have it move, I was able to find an example of the curve and move it’s a and b points on desmos. One thing I had already accidentally realized was that if a and b were equal they would make a circle and if a/b was more or less than one rotated the crunode. I thought these properties were interesting so I wanted to attach my b value and a values to movements so that they would be able to both equal each other and be more than and less than. Doing this also allowed my curve to grow and shrink.

The code works so so that mouseX and Y control a and b. They do the same thing to the numbers but depending on the position of the mouse on the page it controls rotation of the crunode and size.

file

//Georgia Miller
//Section D
//15-104

nPoints = 400;
function setup() {
    createCanvas(400, 400);
    frameRate(10);
}

function draw() {
    background(255, 204, 255);
    push();
    translate(width / 2, height / 2);
    drawDevilsCurve();
}

function drawDevilsCurve(){
    //https://mathworld.wolfram.com/DevilsCurve.html
    var x;
    var y;
    var a = 40;
    var b = a * 1.75;
    var h = mouseY / 2 ; // up and down to change crunode
    //this particular curve changes orientation based on if a/b is bigger or larger than 1
    var ph = mouseX / 2; // move mouse to right to grow

    stroke(255, 0, 127);
    strokeWeight(3);
    fill(153, 153, 255);

    beginShape();
    for (var i = 0; i < nPoints; i++){
        var t = map(i, 0, nPoints, 0, TWO_PI); //t = theta
        x = cos(t) * sqrt((pow(a + ph, 2) * pow(sin(t), 2) 
         - pow(b + h * 2, 2) * pow(cos(t), 2)) / (pow(sin(t), 2) - pow(cos(t), 2)));
        y = sin(t) * sqrt((pow(a + ph, 2) * pow(sin(t), 2)
         - pow(b + h * 2, 2) * pow(cos(t), 2)) / (pow(sin(t), 2) - pow(cos(t), 2)));
        vertex(x, y);
    }
    endShape(CLOSE);
}

https://www.chrisharrison.net/index.php/Visualizations/BibleViz

As someone who is not particularly interested in reading the Bible I was surprised to find Chris Harrison’s work on Bible Cross-References to be both beautiful and thought provoking. I can imagine this work being done on other novels and creating an equally beautiful result. Harrison and Pastor Christoph Romhild worked together to render the data of over 63,000 cross references in the Bible. The cross-references used in the visualization is from bottom page references, concepts, and locations and people found throughout the text. I found the tracking of people throughout the text to be particularly interesting.

Harrison also created a Social network of the people and places mentioned by using a spatial clustering algorithm. I think it is interesting to have a visualization of where people were spending time and how often they are mentioned.

I must say this design happened a bit by accident. I was trying to make it so that based on my clock motions, particularly of the dot that represents the second hand, that I would have moving dots around it that would change position using noise. During this process because of how I was doing my rotations using frameCount, I ended up creating this instead. I liked it so much on the second hand I used it for my hour and minute to create the moving circles. They move very fast but sometimes it will show down and the hour and minute circles will intersect and I think it is very beautiful.

sketchfile

//Georgia Miller
//15-104
//section d

var w; 
var seconds; 
var minutes;
var hours;

function setup() {
    createCanvas(480, 480);
    background(220);
    var radius = min(width, height) / 2;
    seconds = radius * 0.71; //radius measurements for circle shape
    minutes = radius * 0.5;
    hours = radius * 0.5;
    w = width / 2;
}


function draw() {
    background(255);
    var s = map(second(), 0, 60, 0, TWO_PI) - HALF_PI; //for second
    var m = map(minute() + norm(second(), 0, 60), 0, 60, 0, TWO_PI) - HALF_PI; //for minute
    var h = map(hour() + norm(minute(), 0, 60), 0, 24, 0, TWO_PI * 2) - HALF_PI; //for hour
    push();
for(var elhour = 0; elhour < 50; elhour++){ //create circles around hour circle
        //frameRate(30);
        translate(w + cos(h) * hours, w + sin(h) * hours);
        rotate(frameCount/1000);
        stroke(0)
        fill(120, 0, 120);
        ellipse(35, 0, 30, 30);
        fill(140, 0, 140);
        ellipse(0, 35, 30, 30);
        fill(160, 0, 160);
        ellipse(35, 35, 30, 30)
        fill(160, 0, 160);
        ellipse(-35, -35, 30, 30);
        fill(180, 0, 180);
        ellipse(0, -35, 30, 30);
        fill(200, 0, 200);
        ellipse(-35, 0, 30, 30);
        fill(220, 0, 220);
        ellipse(35, -35, 30, 30);
        fill(240, 0, 240);
        ellipse(-35, 35, 30, 30);
}
pop();
push();
    for(var elmin = 0; elmin < 50; elmin++){ //create circles around minute circle
        translate(w + cos(m) * minutes, w + sin(m) * minutes);
        rotate(frameCount/800);
        stroke(0)
        fill(150, 75, 0);
        ellipse(25, 0, 20, 20);
        fill(200, 100, 0);
        ellipse(0, 25, 20, 20);
        fill(250, 130, 0);
        ellipse(25, 25, 20, 20)
        fill(255, 150, 50);
        ellipse(-25, -25, 20, 20);
        fill(150, 75, 0);
        ellipse(0, -25, 20, 20);
        fill(200, 100, 0);
        ellipse(-25, 0, 20, 20);
        fill(255, 130, 0);
        ellipse(25, -25, 20, 20);
        fill(255, 150, 50);
        ellipse(-25, 25, 20, 20);
}
pop();
    push();
    for(var elsec = 0; elsec < 50; elsec++){ //create circles around second circle
        translate(w + cos(s) * seconds, w + sin(s) * seconds);
        rotate(frameCount/500);
        stroke(0)
        fill(100, 0, 0);
        ellipse(15, 0, 10, 10);
        fill(120, 0, 0);
        ellipse(0, 15, 10, 10);
        fill(140, 0, 0);
        ellipse(15, 15, 10, 10)
        fill(160, 0, 0);
        ellipse(-15, -15, 10, 10);
        fill(180, 0, 0);
        ellipse(0, -15, 10, 10);
        fill(200, 0, 0);
        ellipse(-15, 0, 10, 10);
        fill(220, 0, 0);
        ellipse(15, -15, 10, 10);
        fill(240, 0, 0);
        ellipse(-15, 15, 10, 10);
    }
    pop();
     stroke(0);
    fill(255);
    ellipse(w + cos(s) * seconds, w + sin(s) * seconds, 10, 10); //second circle
    ellipse(w + cos(m) * minutes, w + sin(m) * minutes, 20, 20); //minute circle
    ellipse(w + cos(h) * hours, w + sin(h) * hours, 30, 30); //hour circle
}