Author: TaterT

Final Project

sketch
/*
 * Michelle Kim
 * michell4
 * Section B
 */

var count = 0;
var clouds = [];
var opacity = 0;

var hearts;
var hornet;
var blm;
var vote;
var covid;
var crowd;

var alarm;
var yawn;
var shower;
var gettingReady;
var ready;
var cameraShutter;
var hornetSound;
var blmSound;

var hornetX = 600;
var blmX = 600;
var voteX = 600;
var covidX = 600;
var crowdX = 600;

function preload() {
    //preloads all images and sounds
    hearts = loadImage("https://i.imgur.com/WArKv90.gif");
    hornet = loadImage("https://i.imgur.com/WSVUTau.png");
    blm = loadImage("https://i.imgur.com/JAVgfbG.png");
    vote = loadImage("https://i.imgur.com/sRU4uIO.png");
    covid = loadImage("https://i.imgur.com/BY6kaKa.jpg");
    crowd = loadImage("https://i.imgur.com/63dcnGS.png");
    tear = loadImage("https://i.imgur.com/ie45BVh.png");

    alarm = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/12/alarm.wav");
    yawn = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/12/yawn-1.wav");
    shower = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/12/shower.wav");
    gettingReady = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/12/gettingready.wav");
    ready = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/12/ready.wav");
    huh = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/12/huh.wav");
    cameraShutter = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/12/camerashutter.wav");
    ding = loadSound("hhttps://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/12/ding.wav");
    hornetSound = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/12/hornetsound.wav");
    blmSound = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/12/blmsound.wav");
    ehSound = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/12/eh.wav");
    cough = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/12/cough.wav");
    awSound = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/12/aw.wav");
}

function setup() {
    createCanvas(600, 600);
    useSound();
    background(220);
    for(var i = 0; i < 3; i++){
        var initialX = random(width);
        var initialY = random(0, 200);
        clouds[i] = makeClouds(initialX, initialY);
    }
    frameRate(3);
}

function soundSetup() {
    alarm.setVolume(0.2);
    yawn.setVolume(0.3);
    shower.setVolume(0.2);
    gettingReady.setVolume(0.2);
    ready.setVolume(0.2);
    huh.setVolume(0.3);
    hornetSound.setVolume(0.3);
    blmSound.setVolume(0.2);
    cameraShutter.setVolume(0.2);
    ding.setVolume(0.3);
    ehSound.setVolume(0.8);
    cough.setVolume(0.2);
    awSound.setVolume(0.2);
}

function draw() {
    background(171, 245, 255);
    //opening scene
    if (count < 10) {
        fill(0);
        square(0, 0, width);
        textSize(30);
        textFont("Helvetica");
        fill(255);
        text("One fine morning...", 150, (height / 2));
    }
    //alarm ringing
    if (count >= 10 & count < 20) {
        clock();
        if (count == 10) {
            alarm.play();
        }
        if (count == 17) {
            yawn.play();
        }
    }
    //character getting ready
    if (count >= 20 & count < 30) {
        fill(0);
        square(0, 0, width);
        if (count == 20) {
            shower.play();
        }
        if (count == 25) {
            shower.stop();
            gettingReady.play();
        }
        if (count == 28) {
            gettingReady.stop();
        }
        if (count == 25) {
            ready.play();
        }
    }
    //boy introduction
    if (count >= 30 & count < 40) {
        boy();
        if (count >= 35 & count < 38) {
            image(hearts, 430, 310, width * 0.1, height * 0.1);
        }
    }
    //clouds
    if (count >= 40) {
        updateClouds();
        removeClouds();
        addClouds();
    }
    //boy on phone
    if (count >= 40 & count < 70) {
        boyWalking();
    }
    //hornet
    if (count >= 40 & count < 105) {
        image(hornet, hornetX, 300, width * 0.05, height * 0.05);
        hornetX -= 10;
        if (count == 40) {
            hornetSound.play();
        }
        if (count >= 55 & count < 60) {
            textSize(40);
            textFont("Georgia");
            fill(0);
            text("!", 170, 350);
            if (count == 56) {
                huh.play();
            }
        }
    }
    //snap of hornet
    if (count >= 70 & count < 75) {
        phonePicture();
        image(hornet, 240, 250, width * 0.2, height * 0.2);
        if (count == 73) {
            cameraShutter.play();
        }
    }
    //boy walking after hornet
    if (count >= 75 & count < 165) {
        boyWalking();
        if (count >= 80 & count < 100) {
            image(hearts, random(150, 170), random(400, 420),
                  width * 0.2, height * 0.2);
            bubble();
            textSize(40);
            textFont("Helvetica");
            fill(150);
            text("Woah!", 295, 415);
        }
        if (count == 80) {
            ding.play();
        }
    }
    //blm protest
    if (count >= 110 & count <= 220) {
        image(blm, blmX, 200, width, height);
        if (count == 110) {
            blmSound.play();
        }
        if (count == 220) {
            blmSound.stop();
        }
        if (count >= 140 & count < 145) {
            textSize(40);
            textFont("Georgia");
            fill(0);
            text("!", 170, 350);
            if (count == 141) {
                huh.play();
            }
        }
        blmX -= 10;
        if (count < 165 || count > 170) {
        boyWalking();
        }
    }
    //snap of blm protest
    if (count >= 165 & count < 170) {
        phonePicture();
        image(blm, 175, 250, width * 0.4, height * 0.35);
        if (count == 168) {
            cameraShutter.play();
        }
    }
    //boy walking after blm protest
    if (count >= 220) {
        boyWalking();
    }
    if (count >= 190 & count < 210) {
        image(hearts, random(150, 170), random(400, 420),
              width * 0.2, height * 0.2);
        bubble();
        textSize(30);
        textFont("Helvetica");
        fill(150);
        text("Inspiring!", 290, 410);
        if (count == 190) {
            ding.play();
        }
    }
    //vote sign
    if (count >= 225 & count < 320) {
        noStroke(0);
        fill(0);
        rect(voteX + 140, 400, 20, 400);
        image(vote, voteX, 250, width * 0.5, height * 0.5);
        voteX -= 10;
        if (count < 265 || count > 270) {
        boyWalking();
        }
        if (count >= 250 & count < 255) {
            textSize(40);
            textFont("Georgia");
            fill(0);
            text("!", 170, 350);
            if (count == 251) {
                huh.play();
            }
        }
        if (count >= 280 & count < 300) {
            image(hearts, random(150, 170), random(400, 420),
                  width * 0.2, height * 0.2);
            bubble();
            textSize(25);
            textFont("Helvetica");
            fill(150);
            text("Awesome!", 290, 410);
            if (count == 280) {
                ding.play();
            }
        }
    }
    //snap of vote sign
    if (count >= 265 & count < 270) {
        phonePicture();
        image(vote, 210, 230, width * 0.3, height * 0.3);
        if (count == 268) {
            cameraShutter.play();
        }
    }
    //covid sign
    if (count >= 325 & count < 420) {
        noStroke();
        fill(0);
        rect(covidX + 50, 200, 5, 400);
        rect(covidX + 250, 200, 5, 400);
        image(covid, covidX, 100, width * 0.5, height * 0.4);
        covidX -= 10;
        boyWalking();
        if (count == 360) {
            ehSound.play();
        }
        if (count >= 345 & count < 350) {
            textSize(40);
            textFont("Georgia");
            fill(0);
            text("!", 170, 350);
            if (count == 346) {
                huh.play();
            }
        }
    }
    //crowd
    if (count >= 425 & count < 510) {
        tint(255, 50);
        image(crowd, crowdX, 300, width * 1.1, height * 0.8);
        if (count < 490) {
            crowdX -= 10;
        }
        if (count == 495) {
            cough.play();
        }
        boyWalking();
        if (count >= 505 & count < 510) {
            textSize(40);
            textFont("Georgia");
            fill(0);
            text("!", 170, 350);
            if (count == 506) {
                huh.play();
            }
        }
    }
    //boy sad face
    if (count >= 510 & count < 520) {
        boyFace();
        if (count >= 15 & count < 520) {
            tint(255, 255);
            image(tear, 250, 320, width * 0.03, height * 0.05);
        }
        if (count == 513) {
            awSound.play();
        }
    }
    //end scene
    if (count >= 520) {
        background(0);
        textFont("Helvetica");
        textSize(50);
        fill(255);
        text("Wear a mask.", 150, 300);
        textSize(20);
        text("Spread awareness.", 210, 340);
    }
    count ++;
}

function clock() {
    background(255);
    stroke(0);
    strokeWeight(20);
    line(180, 180, 200, 200);
    line(400, 200, 420, 180);
    line(290, 125, 310, 125);
    line(300, 125, 300, 150);
    strokeWeight(5);
    //black
    fill(255);
    //bells
    arc(190, 190, 155, 155, radians(140), radians(310), CHORD);
    arc(410, 190, 155, 155, radians(230), radians(40), CHORD);
    fill(0);
    //body
    circle((width / 2), (height / 2), 300);
    //bells
    arc(180, 180, 120, 120, radians(130), radians(320), CHORD);
    arc(420, 180, 120, 120, radians(220), radians(50), CHORD);
    //bells
    circle(132, 132, 30);
    circle(468, 132, 30);
    //legs
    circle(210, 430, 50);
    circle(390, 430, 50);
    //white
    noStroke();
    fill(255);
    //body
    circle((width / 2), (height / 2), 250);
    //black
    stroke(0);
    strokeWeight(5);
    fill(0);
    //inside details
    circle((width / 2), (height / 2), 20);
    line((width / 2), 190, (width / 2), (height / 2));
    line((width / 2), (height / 2), 270, 370);
    //highlights
    stroke(255);
    strokeWeight(5);
    fill(255);
    line(292, 122, 308, 122);
    noFill();
    //bells
    arc(132, 132, 20, 20, radians(150), radians(200));
    arc(468, 132, 20, 20, radians(340), radians(30));
    //body
    arc(290, 280, 250, 230, radians(200), radians(250));
    arc(310, 320, 250, 230, radians(20), radians(70));
    //legs
    arc(210, 430, 30, 30, radians(140), radians(210));
    arc(392, 430, 30, 30, radians(330), radians(40));
}

function boy() {
    background(255);
    stroke(0);
    strokeWeight(3);
    //arms
    fill(255, 245, 215);
    line(180, 380, 220, 390);
    circle(170, 375, 20);
    line(380, 390, 420, 380);
    circle(430, 375, 20);
    //shirt
    fill(174, 255, 242);
    rect(220, 370, 50, 40);
    rect(330, 370, 50, 40);
    quad(270, 330, 330, 330, 360, 470, 240, 470);
    fill(126, 225, 208);
    square(310, 390, 20);
    //face
    fill(255, 245, 215);
    circle(230, (height / 2), 20);
    circle(370, (height / 2), 20);
    circle((width / 2), (height / 2), 140);
    line(300, 215, 300, 230);
    line(290, 220, 300, 230);
    line(310, 220, 300, 230);
    fill(0);
    circle(290, 290, 5);
    circle(310, 290, 5);
    noFill();
    arc(300, 310, 70, 60, 0, radians(180));
    //phone
    fill(0);
    rect(430, 330, 20, 40);
    noFill();
    stroke(255);
    strokeWeight(1);
    rect(432, 332, 16, 30);
    circle(440, 367, 5);
}

function updateClouds() {
    //update clouds
    for (var i = 0; i < clouds.length; i++) {
        clouds[i].move();
        clouds[i].display();
    }
}

function removeClouds() {
    //get rid of clouds
    var keepClouds = [];
    for (var i = 0; i < clouds.length; i++) {
        if (clouds[i].x + 50 > 0) {
            keepClouds.push(clouds[i]);
        }
    }
    clouds = keepClouds;
}

function addClouds() {
    //add new clouds
    var newClouds = 0.05;
    if (random(0,1) < newClouds) {
        var y = random(0, 200);
        clouds.push(makeClouds(width, y));
    }
}

function moveClouds() {
    //clouds move to left
    this.x += this.speed;
}

function displayClouds() {
    //cloud drawing
    fill(255);
    noStroke();
    circle(this.x, this.y + 50, 50);
    circle(this.x + 40, this.y + 50, 70);
    circle(this.x + 80, this.y + 70, 40);
    circle(this.x + 90, this.y + 40, 50);
}

function makeClouds(cloudsX, cloudsY) {
    var cloud = {x: cloudsX,
                 y: cloudsY,
                 speed: -4,
                 move: moveClouds,
                 display: displayClouds}
    return cloud;
}

function boyWalking() {
    stroke(0);
    strokeWeight(3);
    //shirt
    fill(174, 255, 242);
    quad(70, 450, 120, 450, 150, height + 2, 60, height + 2);
    quad(90, 520, 110, 520, 115, 550, 85, 550);
    //face
    fill(255, 245, 215);
    circle(100, 420, 140);
    circle(90, 440, 10);
    fill(0);
    circle(150, 430, 5);
    noFill();
    arc(152, 450, 35, 30, radians(90), radians(180));
    line(100, 335, 100, 350);
    line(90, 340, 100, 350);
    line(110, 340, 100, 350);
    //phone
    noStroke();
    fill(209, 250, 255);
    quad(200, 465, 200, 500, 175, 530, 150, 530);
    stroke(0);
    strokeWeight(5);
    line(200, 500, 175, 530);
    //arms
    strokeWeight(3);
    line(100, 550, 100, 570);
    line(100, 570, 170, 540);
    fill(255, 245, 215);
    circle(170, 540, 20);
}

function phonePicture() {
    //phone camera
    stroke(0);
    strokeWeight(20);
    fill(171, 245, 255);
    rect(200, 100, 200, 400);
    strokeWeight(10);
    line(200, 400, 0, height);
    line(400, 400, width, height);
    stroke(255);
    strokeWeight(5);
    line(250, 220, 250, 240);
    line(250, 220, 270, 220);
    line(350, 220, 350, 240);
    line(330, 220, 350, 220);
    line(250, 380, 250, 360);
    line(250, 380, 270, 380);
    line(350, 380, 350, 360);
    line(350, 380, 330, 380);
}

function bubble() {
    //phone comments
    fill(255);
    noStroke();
    ellipse(350, 400, 150, 100);
    triangle(290, 400, 320, 440, 280, 450);
}

function boyFace() {
    //boy sad face
    background(255);
    strokeWeight(3);
    fill(255, 245, 215);
    circle(100, (height / 2), 50);
    circle(500, (height / 2), 50);
    circle((width / 2), (height / 2), 400);
    line(300, 70, 300, 100);
    line(280, 80, 300, 100);
    line(320, 80, 300, 100);
    fill(0);
    circle(270, 290, 10);
    circle(330, 290, 10);
    noFill();
    arc(300, 420, 140, 120, radians(200), radians(340));
}

For this project, I chose to create a short animation that depicted some of the major events that occurred in 2020. The increasing use of technology and social media platforms has definitely raised awareness for important causes and happenings during this year. For example, one of the biggest contributors for raising awareness and protests was social media and the sharing of information through these platforms.

My inspiration for this project was a typical commercial, one that can be watched through advertisements or on TV. I tried to imitate the basic form of story-like commercial with a message at the end. The main message that I am conveying through this short clip is spread more awareness about the importance of masks. With the currently increasing cases of COVID-19, I decided to focus on this specific theme because unfortunately, masks are still being refused by many people around the world.

If I had more time, I would have liked to add an additional scene that depicted the detrimental effects of contracting COVID-19. I believe that this would have added more of an impact to my “commercial”.

To interact with my program, simply click on the canvas to start the clip. Note: Use volume for sound.

Project 11 – Generative Landscape

sketch
var houses = [];
var sky;

function preload() {
    sky = loadImage("https://i.imgur.com/FaHkkqz.jpg");
}

function setup() {
    createCanvas(480, 435);
    background(220);
    for (var i = 0; i < 10; i ++) {
        houses[i] = makeHouse(i * 0.5);
    }
    frameRate(10);
}

function draw() {
    background(0, 30, 140);
    image(sky, 0, -100, 480, 600);
    moon();
    updateAndDisplayHouses();
    removeHouses();
    addNewHouses();
    man();
    gondola();
}

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

function removeHouses() {
    var housesToKeep = [];
    for (var i = 0; i < houses.length; i++) {
        if (houses[i].x + houses[i].breadth > 0) {
            housesToKeep.push(houses[i]);
        }
    }
    houses = housesToKeep;
}

function addNewHouses() {
    //probability
    var newHouseLikelihood = 5;
    if (random(0, 200) < newHouseLikelihood) {
        houses.push(makeHouse(width));
    }
}

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

function houseDisplay() {
    //draws the houses
    var floorHeight = 10;
    var bHeight = this.nFloors * floorHeight;
    fill(100);
    stroke(0);
    strokeWeight(1);
    push();
    translate(this.x, height);
    rect(0, -bHeight, this.breadth, bHeight);
    //windows
    for (var i = 0; i < this.nFloors; i++) {
        for (var j = 0; j < this.breadth / 20; j++) {
            fill(255);
            rect(j * 15 + 10, -(i * floorHeight), 5, 5);
        }
    }
    pop();
}

function makeHouse(birthLocationX) {
    var hse = {x: birthLocationX,
                breadth: 50,
                speed: -1.0,
                nFloors: round(random(3,8)),
                move: houseMove,
                display: houseDisplay}
    return hse;
}

function moon() {
    fill(255, 255, 181);
    noStroke();
    circle(240, 400, 300);
}

function gondola() {
    noStroke();
    fill(0);
    rect(150, 420, 200, 20);
    ellipse(145, 425, 40, 15);
    ellipse(355, 425, 40, 15);
    noFill();
    stroke(0);
    strokeWeight(10);
    arc(250, 410, 250, 30, radians(0), radians(180));
    arc(150, 415, 50, 40, radians(90), radians(180));
    arc(350, 415, 50, 40, radians(0), radians(90));
    //oar
    stroke(0);
    strokeWeight(4);
    line(180, 340, 155, 438);
}

function man() {
    fill(0);
    noStroke();
    circle(150, 348, 20);
    quad(145, 340, 145, 390, 160, 390, 150, 340);
    rect(145, 390, 10, 30);
    stroke(0);
    strokeWeight(4);
    line(155, 370, 170, 370);
    line(153, 373, 167, 377);
}

Man paddles through the Hudson at night, admiring the city.

LO 11 – A Focus on Women Practitioners

Jen Lewin

With works mainly focusing on new media and interaction, Jen Lewin is globally renowned sculptor based in New York. She uses her architectural background and a highly technical medium to fabricate large-scale interactive, public sculptures that encourage community engagement.

“Aqueous”, Jen Lewin, 2017

“Aqueous“, built in 2017 and exhibited in Georgetown, Burning Man, Hong Kong, Bahrain, Sydney, Los Angeles and Descanso Gardens, is a great representation of Lewin’s motives and purpose. An interactive landscape of meandering pathways of light, “Aqueous” is part of Lewin’s “Have Art Will Travel Program”, which seeks to create dynamic, participatory, public art experiences all around the world. Throughout the day, “Aqueous” reflects the sky, audience and surrounding environment, giving daytime viewers the illusion of swimming in the clouds and nighttime viewers a feeling of the universe’s expansiveness. Additionally, at night, “Aqueous” engages visitors as they walk along its surface, lighting up as they step, dance or play along the pathway.

“Aqueous”, Jen Lewin, 2017
Lights up as visitors walk along its surface

Like “Aqueous”, Lewin’s pieces “exist where art, technology, and communities meet” and strive to create a more personal experience that “brings vibrancy to public spaces”. Her works create connected human experiences that allow for participants to not only interact and enjoy the playfulness of the sculptures but also interact and connect with each other.

“Aqueous”, Jen Lewin, 2017

For additional information on Jen Lewin and her other works, please visit her personal website https://www.jenlewinstudio.com.

Project 10 – Sonic Story

This story is about a magician who performs a couple of tricks in front of an audience. However, the ending does not go as planned, and the girl that he made disappear doesn’t come back.

sketch
var count = 0;
var stage;
var magician;
var smoke;
var bunny;
var girl;
var blanket;
var tear;
var walking;
var cheering;
var hop;
var clapping;
var gasping;
var poof;

var magicianX = 500;
var magicianY = 150;
var bunnyX = 110;
var bunnyY = 320;
var girlX = 500;
var girlY = 290;

function preload() {
    //Load images
    stage = loadImage("https://i.imgur.com/nboGOqA.jpg");
    magician = loadImage("https://i.imgur.com/eAj8gmY.png");
    smoke = loadImage("https://i.imgur.com/6QloW3v.png");
    bunny = loadImage("https://i.imgur.com/FVDd9HE.png");
    girl = loadImage("https://i.imgur.com/3umyhtS.png");
    blanket = loadImage("https://i.imgur.com/FIlojGn.png");
    tear = loadImage("https://i.imgur.com/ie45BVh.png");
    //Load sounds
    walking = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/walking.wav");
    cheering = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/cheering.wav");
    hop = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/hop.wav");
    clapping = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/clapping.wav")
    gasping = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/gasping.wav");
    poof = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/poof.wav");
}

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

function soundSetup() {
    cheering.setVolume(0.2);
    gasping.setVolume(0.2);
    walking.setVolume(0.3);
    poof.setVolume(0.5);
    hop.setVolume(0.2);
}

function draw() {
    background(200);
    //Stage
    image(stage, 0, 0, width, height);
    //Magician
    image(magician, magicianX, magicianY, width * 0.3, height * 0.5);
    //Magician enters as audience cheers
    if (count == 0) {
        cheering.play();
    }
    if (count < 8) {
        magicianX -= 40;
        walking.play();
    }
    //Bunny hops away
    if (count > 18 & count < 30) {
        image(bunny, bunnyX, bunnyY, width * 0.1, height * 0.1);
        bunnyX += 30;
        hop.play();
    }
    //Cloud of smoke before bunny appears
    if (count > 14 & count < 20) {
        image(smoke, 60, 270, width * 0.3, height * 0.3);
    }
    if (count == 15) {
        poof.play();
    }
    //Girl enters
    if (count < 65) {
        image(girl, girlX, girlY, width * 0.12, height * 0.2);
        if (count > 34 & count < 48) {
            girlX -= 10;
            walking.play();
        }
    }
    //Blanket makes girl disappear
    if (count > 58 & count < 66) {
        image(blanket, 350, 280, width * 0.2, height * 0.25);
    }
    if (count == 62) {
        poof.play();
    }
    if (count == 67) {
        clapping.play();
    }
    if (count > 75 & count < 83) {
        image(blanket, 350, 280, width * 0.2, height * 0.25);
    }
    if (count == 79) {
        poof.play();
    }
    if (count > 90 & count < 98) {
        image(blanket, 350, 280, width * 0.2, height * 0.25);
    }
    if (count == 94) {
        poof.play();
    }
    if (count > 100) {
        image(tear, 255, 225, width * 0.01, height * 0.03);
    }
    //Girl does not reappear and crowd gasps
    if (count == 99) {
        gasping.play();
    }
    count++;
}

The sound effects (cheering, clapping, walking, hopping, gasping, poofs) match each step that a character takes or a certain action that occurs.

LO 10 – Computer Music

“Chapter 1: The Discovery”, Felix Luque Sanchez, 2009

“Chapter 1: The Discovery” is a responsive light-sound object created by Felix Luque Sanchez in 2009. This installation consists of a sculpture representing an unidentified object in the shape of a dodecahedron and a number of videos re-staging the moment of its discovery.

First Room: The Videos

With different perceptions conveyed in different rooms, this piece causes the audience to question the truthfulness of what is shown. In short, it outlines a journey from the initial visioning of a series of videos with synthetic images, and eventually ends up in a physical encounter with an interactive object that co-opts information flows, sound and light transmission. More specifically, this piece dramatizes a fiction on the discovery of the dodecahedron, as if it were a scene from a science-fiction movie, where the tension lies in the encounter of the character with an unknown, alien figure.

Second Room: The Object

Through the sculpture’s response to presence, the audience can detect a will to communicate as well as some sort of simplicity in generating apparently complex behaviors. This project renews an “age-old cultural groundbase, questioning the limits of our notions of artificial intelligence and cutting across our collective imaginary of science fiction.

For a more in-depth look into the project and its experience, check out this video below!

Project 9 – Computational Portrait (Custom Pixel)

Following the original image’s brick theme, I kept the project simple while trying to mimic the aesthetic of bricks/tiles.

sketch
var portrait;

function preload() {
    portrait = loadImage("https://i.imgur.com/rlroaMx.jpg");
}

function setup() {
    createCanvas(480, 320);
    background(255);
    portrait.loadPixels();
    portrait.resize(width, height);
    frameRate(30);
}

function draw() {
    //image(portrait, 0, 0, width, height);
    var x = random(width);
    var y = random(height);
    var porX = constrain(floor(x), 0, width);
    var porY = constrain(floor(y), 0, height);
    var colr = portrait.get(porX, porY);
    stroke(255);
    fill(colr);
    rect(x, y, random(10, 25), random(10, 25));
}

LO 9 – On Looking Outwards

Looking back to the wide variety of Looking Outwards projects, one specific blog post that I find very intriguing is poppy’s “Looking Outwards – 05 – 3D Computer Graphics“. As the title of this blog implies, the fifth week of Looking Outwards projects involved 3-dimensional computer graphics.

Poppy’s analysis focuses on Jennifer Steinkamp’s “Womb“, a piece that was featured at Talley Dunn Gallery in August 23, 2019. As a digital animator, Steinkamp uses 3D modeling software and Photoshop to explore the ideas of space, perception, and motion.

“Womb”, Jennifer Steinkamp’s, 2019

“Womb” allows viewers to walk up to an interactive wall of fruit that follows the movement of people and continues to move on its own. Poppy expresses, “I admire how eccentric and lively the piece is…Similar to a womb that takes up space within the body in order to generate life, her artpiece generates transformation, movement, and life as well.” I definitely agree with Poppy’s statement regarding Steinkamp’s purpose and how the piece affects its audience. Adding on to this, I believe that the piece’s interactive aspect allows viewers to be involved as participants, giving them a more personal experience overall.

LO 8 – The Creative Practice of an Individual

Gilberto Esparza, 2017

Gilberto Esparza, who graduated from the School of Fine Arts at the University of Guanajuato, Mexico and spent one year on exchange at the Faculty of Fine Arts of San Carlos in Valencia, Spain, is an globally renowned artist and a member of the National System of Art Creators in Mexico, having participated in solo and group exhibitions in many different countries, including Mexico, the US, Canada, Brazil, Colombia, Peru, Ecuador, Argentina, Spain, South Korea, etc.

“Parsley Looking For the Sun”, Gilberto Esparza, 2007

Esparza’s work focuses on electronics and robots to investigate the impact of new technologies on everyday life, social relationships, urban spaces and the environment, primarily employing recycling consumer technology and biotechnology experiments.

“Urban Cancer”, Gilberto Esparza, 2016
The deformation of a white line on the pavement of a street caused by the exaggerated increase in its length.

At Eyeo 2018, Esparza explains his process for learning more about environmental problems in Mexico and how as his technological beings developed, he developed not only in working with them but also in working in collaboration with other people.

By visually showing the progress of development through each stage, how he directly placed his creations in locations around the city where industrial technological garbage can be found, and the obstacles that he faced with particular methods, Esparza effectively portrays the purpose of his work, as well as his goal for society.

Learn more about Gilberto Esparza at https://gilbertoesparza.net.

HYDROCOMMUNITIES | Gilberto Esparza at Eyeo 2018 |

Project 7 – Composition with Curves

it’s an avocadooooooooo… thaaaaanksss…

sketch
var nPoints = 100;

function setup() {
    createCanvas(300, 480);
    background(220);
    text("p5.js vers 0.9.0 test.", 10, 15);
    frameRate(10);
}

function draw() {
    background(198, 179, 220);
    //Avocado
    push();
    translate(width * 0.6, height * 0.5);
    rotate(radians(30));
    cranoidCurve();
    pop();
    //Avocado face
    face();
    //Avocado pit
    moon();
    //Stars move with mouse
    push();
    translate(mouseX - 200, 30);
    star();
    pop();
    push();
    translate(100, mouseY + 80);
    scale(0.5);
    star();
    pop();
}

function cranoidCurve() {
    var x;
    var y;
    var r;
    var a = 40;
    var b = 60;
    var c = 70;
    var p = constrain((mouseX / width), 0, 1);
    var q = constrain((mouseY / height), 0, 1);
    stroke(77, 135, 2);
    strokeWeight(10);
    fill(195, 238, 139);
    beginShape();
    for(var i = 0; i < nPoints; i++) {
        var t = map(i, 0, nPoints, 0, TWO_PI);
        r = a * sin(t) +
            b * sqrt(1 - p * sq(cos(t))) +
            c * sqrt(1 - q * sq(cos(t)));
        x = r * cos(t);
        y = r * sin(t);
        vertex(x, y);
    }
    endShape(CLOSE);
}

function face() {
    noFill();
    stroke(0);
    strokeWeight(2);
    arc(200, 190, 5, 5, radians(210), radians(30));
    arc(220, 200, 5, 5, radians(210), radians(30));
    arc(205, 210, 10, 10, radians(50), radians(190));
}

function moon() {
    //Moon/Avocado pit gets bigger as x increases with mouse
    var x = max(min(100 + mouseX, width), 10);
    var sizeX = x * 3 / 10;
    var r = 300 - mouseX;
    var g = 300 - mouseX;
    var b = 30;
    noStroke();
    fill(r, g, b);
    circle(mouseX - 100, mouseY - 30, sizeX);
}

function star() {
    fill(240, 255, 135);
    frameRate(10);
    var x = [50, 61, 83, 69, 71, 50, 29, 31, 17, 39];
    var y = [18, 37, 43, 60, 82, 73, 82, 60, 43, 37];
    var nPoints = x.length;
    beginShape();
    //Squiggly star
    for (var i = 0; i < nPoints; i++) {
        vertex (x[i] + random(-3, 3), y[i] + random(-3, 3));
    }
    endShape(CLOSE);
}

While exploring different types of curves, I was inspired by the cranioid curve, which strongly resembles an avocado shape when interacted with.

LO 7 – Information Visualization

“Multiplicity” by Moritz Stefaner

With an increase in use of technology, people’s city experiences have been collectively and continuously been documented on social media platforms, shaping a virtual city image. Designed and implemented by Moritz Stefaner in 2018, “Multiplicity” is a collective photographic city portrait that provides an immersive dive into the image space spanned by hundreds of thousands photos taken across Paris.

Collective photographic city portrait of Paris in 2017

Using machine learning techniques, “Multiplicity” is based on a sample of 6.2m geo-located social media photos posted in Paris in 2017, and it organizes images by similarity and content, allowing the audience to visually explore niches and microgenres.

Images organized by similarity and content

The projection spans three 1080p squares arranged in a slightly angled triptych structure, which allows for a more immersive experience, and visitors can navigate the manually annotated map using a touch device as well as a physical joystick. Overall, Stefaner intended to portray the city by using an arrangement of qualitative contents, encouraging viewers to explore and interpret on their own terms.

Immersive experience created by slightly angled triptych structure
Zooms portrayed in “Multiplicity” by Moritz Stefaner