Final Project

sketch
/*
Bon Bhakdibhumi
bbhakdib
Section D
*/

var particles = [];


function setup() {
    createCanvas(400, 400);
    for (var i = 0; i < 50; i ++) {
        particles[i] = new Object();
        particles[i].x = random(width);
        particles[i].y = random(height);
        particles[i].dx = random(-2,5);
        particles[i].dy = random(-2,5);
        particles[i].c = color(86, 137, 179);
        particles[i].covid = false;
    }
    frameRate(25);
}

function draw() {
    background(201, 156, 105);
    for (var j = 0; j < 50; j ++) {
        drawParticles(particles[j]);
        moveParticles(particles[j]);
    }
    if (frameCount == 50 || frameCount % 100 == 0) {
        particles[2].covid = true;
    }
// calculate distance for infection
    for (var i = 0; i < particles.length; i ++) {
        for (var j = 0; j < particles.length; j ++) {
            var d = int(dist(particles[i].x, particles[i].y, particles[j].x, particles[j].y));
            if (d < 20) {
                if (particles[i].covid == true) {
                    particles[j].covid = true;
                }
            }
        }
    }
// display counter
//if all particles have covid, then display the warning text
     var covidCounter = 0;
    for (var i = 0; i < particles.length; i ++) {
        if (particles[i].covid == true) {
            covidCounter ++;
        }
    }
    noStroke();
    fill(255);
    textAlign(LEFT);
    textSize(20);
    text("Infected People:", 10, 25);
    text(covidCounter, 160, 25);
    if (covidCounter == particles.length) {
        fill(255, 253, 131);
        textAlign(CENTER);
        textSize(30);
        text('STOP CORONA!', width/2, height/2.15);
        textSize(35)
        text('KEEP YOUR DISTANCE!', width/2, height/1.75);
    }
}

// reset canvas and cure all particles
function keyPressed() {
        for (var i = 0; i < particles.length; i ++) {
            particles[i].covid = false;
        }
}

// cure covid with mouse
function mousePressed() {
    for (var i = 0; i < particles.length; i ++) {
        var mouseDistance = int(dist(mouseX, mouseY, particles[i].x, particles[i].y));
        if (mouseDistance < 10) {
            particles[i].covid = false;
        }
    }
}

function drawParticles(p) {
    if (p.covid == true) {
        stroke(1);
        fill(204, 61, 61);
    } else {
        stroke(1);
        fill(p.c);
    }
    ellipse(p.x, p.y, 12, 12);
}

function moveParticles(p) {
    p.x += p.dx;
    p.y += p.dy;
    if (p.x > width || p.x < 0) {
        var resetX = random(100);
        if (resetX < 50) {
            p.x = 0;
        } else {
            p.x = width;
        }
    p.dx = random(-2, 5);
    }
    if (p.y > height || p.y < 0) {
        var resetY = random(100);
        if (resetY < 50) {
            p.y = 0;
        } else { 
            p.y = height;
        }
    p.dy = random(-2, 5);
    }
}

The final result of my project is a Covid-19 infection simulator using particles. The canvas represents a public space, and the particles represent people traveling around without social distancing.  Initially, all the particles are not infected. However, as they “travel” around freely–some going off canvas and reentering the canvas from somewhere else–one of the particles would contract “Covid-19, ” turning red. This infected particle will then continue to spread the virus to other particles if other particles are too close–“less than 6 feet”–to it. A counter is displayed at the top left of the canvas, showing how many particles are infected on the screen at the moment. Once every particle is infected, a text is displayed saying “STOP CORONA! KEEP YOUR DISTANCE!”This program is also interactive. Using the mousePressed() function, when the user clicks on an infected particle, he or she can cure it from the virus. However, the particles can become infected again similar to Covid reinfections we have seen on the news. By clicking on any key, the user can also reset the particles to their normal state, restarting the simulation again.

The project is inspired by the frustration I get from watching the news and seeing people not properly social distancing. Hopefully, this project illustrates the importance of social distancing to the viewers while providing them with visual elements that are captivating and interactive. 

If provided more time, I would like to add mutual repulsion to the program, illustrating what effective social distancing looks like, which was one of the main features I planned to implement initially but failed to do so since I didn’t fully understand the physics behind the example code and didn’t want a completely broken program.

Project 11: Landscape

sketch
 /*
 Bon Bhakdibhumi
 bbhakdib
 Section D
 */
var backgroundX = 355;
var foregroundX = 250;
function preload() {
    train = loadImage("https://i.imgur.com/cMqi4AV.png");
    house = loadImage("https://i.imgur.com/KrNQaN2.png");
    tower = loadImage("https://i.imgur.com/P6WEAeL.png");
    montain = loadImage("https://i.imgur.com/04duSGs.png");
    backgroundHouse = loadImage("https://i.imgur.com/DgMNstF.png");
    backgroundTower = loadImage("https://i.imgur.com/AuMqECF.png");
}

 function setup() {
    createCanvas(480, 240);
 }

 function draw() {
// backdrop
    noStroke();
    fill(147, 129, 101);
    rect(0, 175, 480, 65);
    fill(164, 233, 244);
    rect(0, 0, 480, 174);
    imageMode(CENTER);
// background elements
    for (var i = 0; i < 3; i ++) {
        image(backgroundTower, backgroundX - (i * 200), 117, 200, 200);
        image(backgroundHouse, (backgroundX + 80) - (i * 200), 147, 200, 200);
    }
// foreground elements
    image(montain, foregroundX, 105, 250, 250);
    image(house, foregroundX - 140, 137, 210, 210);
    image(tower, foregroundX + 130, 105.5, 210, 210);
    image(train, 240, 120, 480, 240);
    backgroundX -= 2; 
    foregroundX -= 2;
// resetting foreground and background elements
    if (backgroundX <= -125) {
        backgroundX = 900;
    }

    if (foregroundX <= -150) {
        foregroundX = 825
    }
}

For this project, I chose to make a landscape of a town I visited by train for the first time.

LO 11: A Focus on Women Practitioners

Night Witches Demo

A project that I want to highlight this week is NightWitches by Caroline Sinders. Sinders is a machine-learning-design researcher and artist. She got her Masters from the New York University’s Interactive Telecommunications Program and now is the founder of Convocation Design + Research, an agency focusing on the intersections of machine learning, user research, designing for public good, and solving difficult communication problems. She also has worked with Amnesty International, Intel, IBM Watson, the Wikimedia Foundation, and etc. 

NightWitches is an interactive story/game that mimics the true story of Nadya Popova, a WWII Soviet Female fighter pilot. The story is built in Unity with an interactive web component, allowing for interaction across both mobile and web. I really appreciate Sinders’s work as it helps shine light on a neglected part of history and boost female representation. The simplistic design of the illustrations in the story also captures my attention.

Besides the interactive story itself, I also enjoy looking Sinders’s design process. Her thorough research on the history and user testing are very impressive. Overall, NightWitches is a very inspiring project with beautiful design aesthetic and purposeful research, creating a meaningful story.

Creator: Caroline Sinders

Year: 2014

Link: https://carolinesinders.com/nightwitches/

Project 10: Sonic Story

sketch
/*
Bon Bhakdibhumi
bbhakdib
Section D
*/
var nightBarn;
var chicken;
var sun;
var moon;
var crowing;
var morningSound;
var wakingUp;
var switchSound;
var chickenSleeping;
var nightSound;
var snoring;
var angle = 100;
var frameCounter = 0;
var rotationCounter = 0;
function preload () {
    dayBarn = loadImage("https://i.imgur.com/aGadSXz.png");
    nightBarn = loadImage("https://i.imgur.com/6cfic4A.png");
    chicken = [loadImage("https://i.imgur.com/4ZuBHL3.png"), 
                loadImage("https://i.imgur.com/YVhA3Pg.png")];
    sun = loadImage("https://i.imgur.com/64xX4qN.png");
    moon = loadImage("https://i.imgur.com/O8y3IzI.png");
    crowing = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/435507__benjaminnelan__rooster-crow-2.wav");
    morningSound = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/530265__dominictreis__morning-transition-music.wav");
    wakingUp = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/401338__ckvoiceover__yawning.wav");
    switchSound = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/414438__inspectorj__light-pulley-switch-on-c.wav");
    chickenSleeping = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/233093__jarredgibb__chicken-buck-96khz.wav");
    nightSound = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/200167__ebonny__cicadas.wav");
    snoring = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/409015__marisca16__old-man-snoring.wav");
}

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

function soundSetup() {
        morningSound.setVolume(0.1);
        crowing.setVolume(0.5);
        wakingUp.setVolume(0.3);
        switchSound.setVolume(0.9);
        chickenSleeping.setVolume(0.5);
        nightSound.setVolume(0.9);
}

function draw() {
    imageMode(CENTER);
// draw daytime
    if (rotationCounter % 2 == 0) {
        background(145, 203, 229);
        push();
        translate(215, 225);
        rotate(radians(angle));
        image(sun, 80, 200, 400, 400);
        pop();
        image(dayBarn, 200, 200, 400, 400);
        image(chicken[0], 80, 240, 200, 200);
    } else {
// draw nighttime
        background(51, 60, 99);
        push();
        translate(215, 225);
        rotate(radians(angle));
        image(moon, 80, 200, 400, 400);
        pop();
        image(nightBarn, 200, 200, 400, 400);
        image(chicken[1], 80, 240, 200, 200);
    }
    if (angle == 275) {
// reset sun or moon rotation
        angle = 110;
        rotationCounter ++;
    }
    angle ++;
//morning sounds
    if (angle == 125 & rotationCounter % 2 == 0) {
        crowing.play();
    }
   if (angle == 145 & rotationCounter % 2 == 0) {
        morningSound.play();
    }
    if (angle == 170 & rotationCounter % 2 == 0) {
        wakingUp.play();
    }
//night sounds
    if (angle == 115 & rotationCounter % 2 == 1) {
        nightSound.play();
    }
    if (angle == 115 & rotationCounter % 2 == 1) {
        switchSound.play();
    }
    if (angle == 120 & rotationCounter % 2 == 1 || angle == 150 && rotationCounter % 2 == 1) {
        chickenSleeping.play();
    }
    if (angle == 122 & rotationCounter % 2 == 1) {
        snoring.play();
    }
}

For this project I decide to make a story that illustrates the day at a barn.

LO 10: Computer Music

American Folk Songs Album

Benoit Carré is a french musician who created Skygga, his avatar alias, for AI-generated music. The Album “American Folk Songs” was released in 2019, using Flow Machines tools developed by Sony CLS. In this playlist, Carré “revisits American traditional folk songs with a prototype of an AI harmonization tool.” It takes acapella recording from many classic American folk singers and uses AI “to flesh out the melodies and the lyrics of the songs, enriching them with lush harmonies and sounds generated by AI that have never been heard before.” I really admire Carré’s work as it is an intriguing marriage of old folk music and modern electronic music. One song that I really enjoyed from the playlist is “Black Is the Color,” featuring the voice of Pete Seeger, a legendary folk singer. I was first introduced to Seeger during high school as he was a proud alumnus of the school. Hearing his voice with a new twist, therefore,  is very cool and interesting to me.

Creator: Benoit Carré

Year: 2019

Link: https://open.spotify.com/album/6NbX54oOpEZhSOjfdSYepw?si=qh6e45bQTMSh1LC4IX-R6w

Project 9: Computational Portrait

For this project, I decided to draw a picture of me when I was a child. I created random shapes similar to snowflakes to represent a time of innocence and delicacy. I created the portrait with an emoticon that reflects my feeling toward that time of my life.

sketch
/*
Bon Bhakdibhumi
bbhakdib
Section D
*/

var img;
var transparent = 0;

function preload() {
  img = loadImage('https://i.imgur.com/9gYfG3D.jpg');
}

function setup() {
    createCanvas(400, 567);
    imageMode(CENTER);
    noStroke();
    img.loadPixels();
    background(255);
}

function draw() {
// random x & y positions for where to draw
  var x = floor(random(img.width));
  var y = floor(random(img.height));
// selecting color from the actual picture
  var pix = img.get(x, y);
  snowFlake(x, y, pix);
  cuteEmojicon(x, y, pix);
}

function snowFlake(x, y, pix) {
  fill(pix, 50);
  beginShape();
    for (var i = 0; i < 20; i++) {
       vertex(x + random(-5, 5), y + random(-5, 5));
    }
    endShape(CLOSE);
}

function cuteEmojicon(x, y, pix) {
  fill(pix, 50);
  textSize(random(5, 15));
  text('♡´・ᴗ・`♡', x, y);
}



Image rendering as time goes by

LO9: On Looking Outwards

Nike’s 2017 AirMax Campaign Video

One Looking Outwards that I am drawn to is Jubbies’s Looking Outward 5 on 3D computer graphics. Jubbies chose the Nike AirMax 2017 campaign created by the design studio ManvsMachine. I totally agree with Jubbies’s assessment of the video. The promotional video  was able to use sound and 3D renderings to convey the lightness and comfort of the Nike AirMax without having to render the literal shoes themself which I thought was really cool. I really enjoy the gravity simulation created. The application of computer-aid 3D rendering to something that I’m really interested in–running shoes– and an aspiring product designer is really eye-opening to me.

Creator: ManvsMachine

Year: 2017

Link: https://courses.ideate.cmu.edu/15-104/f2020/2020/10/03/lo-3d-rendered-project/

LO8: The Creative Practice of An Individual

Nadieh Bremer’s Presentation at the Eyeo 2019

A speaker at the Eyeo Festival that I found very inspiring is Nadieh Bremer. Bremer graduated with a degree in Astronomy from the University of Leiden in 2011. During her time there, she was introduced to the programming language IDL often used in Astronomy to analyze data. From her introduction to IDL, she realized that she wanted to be a data scientist; however, she wanted to analyze more tangible data rather than being in a niche field like astronomy, so she joined Deloitte. During her time there, she learned 6 different languages including R where she started doing simple data visualizations. In 2013, she joined a data science conference Strata where she was introduced to coding in d3 and found her love in data visualization design.

I admire her work greatly as they are able to present complexities and interconnections into beautiful and tangle visuals. One of my favorite work from Bremer is a data visualization she collaborated with UNESCO to show the interconnectedness between different cultures across the world. The map displays intangible cultural heritage–ranging from skills to practice to knowledge totaling about 500 cultural elements. Cultural elements are hard to quantify, yet Bremer was able to come up with an impressive map with statistics and interactive visual elements. The thoughtfulness that went into her work blew my mind. Her work also portrays a harmonious combination of mathematics and the arts, which makes it very intriguing and inspiring.

Link: https://www.visualcinnamon.com/portfolio/

Project 7: Curves

sketch
/*
Bon Bhakdibhumi
bbhakdib
Section D
*/

var nPoints = 100;
function setup() {
    createCanvas(410, 400);
}

function draw() {
    background(171, 230, 255);
    for(var i=30; i<=400;i+=100){
        for(var j=30; j<=400;j+=60){
            push();
            translate(i,j);
            daisy();
            pop();
        }
    }
    for(var k=80; k<=400;k+=100){
        for(var l=0; l<=600;l+=60){
            push();
            translate(k,l);
            daisy();
            pop();
        }
    }
}

function daisy() {
//drawing a daisy
    var x;
    var y;
// making a ranunculoid or a 10-cusp epicycloid  
    var petal = 10;
    if (mouseY >= height/3 & mouseY < height*(2/3)){
        petal = 5;
    }
    var a = 20;
    var b = a / petal;
    var h = b;
// making a fried egg
    if (mouseY < height/3) {
        h = 0;
    }
    var ph = mouseX / 50.0;
    var ph = mouseX / 50.0;
    fill(255);
    stroke(100);
    beginShape();
    for (var i = 0; i < nPoints; i++) {
        var t = map(i, 0, nPoints, 0, TWO_PI);
        x = (a + b) * cos(t) - h * cos(ph + t * (a + b) /b);
        y = (a + b) * sin(t) - h * sin(ph + t * (a + b) /b);
        vertex(x, y);
    }
    endShape(CLOSE);
// middle part
    fill(255, 253, 158);
    circle(0, 0, a);
}

For this project, I decided to create an interactive pattern using ranunculoid and 10-cusps epicycloid curves. The pattern changes from a pattern of fried eggs, when mouseY is in the first third of the canvas, to a pattern of 5-petals daisies, when mouseY is in the second third of the canvas, and to a pattern of 10-petals daisies, when mouseY is in the last third of the canvas. The pattern also spins when mouseX changes.

LO 7: Information Visualization

All Street Limited by Ben Fry

An Information Visualization project that I really admire is All Streets Limited by Ben Fry. In his work, Fry created an intricate map of all the streets in the 48 states of the United States. To achieve this incredible work, Fry translated data from the U.S Census Bureau into a map by first,  using Perl.Next to parse and filter data. Writing in javascript, Fry applied the Albers equal-area conic projection to transform latitude and longitude coordinates. Later, he converted his work into print. I really enjoy looking at his work as it is a great illustration of how the interconnectedness of little elements–small streets and roads–can make up a system–the map of the United States–showing the complexity that is not usually tangible or is overlooked. His work reveals the universal truth of how things operate and the power of systems–from an atom to the universe.

Link : https://3rdfloor.fathom.info/products/all-streets

Title: All Streets Limited

Creator: Ben Fry

Year: 2007