/*
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.
]]> /*
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.
]]>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
]]>/*
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.
]]>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
]]>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.
/*
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);
}
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/
]]>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.
]]>/*
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.
]]>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
]]>