francis – [OLD FALL 2020] 15-104 • Introduction to Computing for Creative Practice

Final Project: Covid-19 Precaution Simulator

francis — Sat, 12 Dec 2020 02:54:55 +0000

In my final project, I showcase somewhat of a Covid-19 Precaution Simulation. The user is situated in the right side of the window and with the refreshing of the page, red virus balls and green mask/safety balls appear. The red viruses will come across the page at different speeds and sizes to symbolize the various ways of possibly contracting Covid-19. Hovering over the green safety orbs will help the users glowing shield to grow larger and brighter. As the shield grows, the viruses will be eliminated; at one point due to the immense “precautions and safety measures” that have been collected/taken by the user, the viruses die before reaching the shield, signifying that we can never be too safe in these times.

sketch

var shieldAttribute; //tracks size + color of shield
var mask=[]; //masks (green circles)
var virus = []; //virus (red circles)
var virusCount=10; //number of virus
var maskCount =15 // number of masks
var waves=10;
var x;
var y;
var speed;
var maskx;
var masky;
var maskr;
var checkMask;
var checkVirus;

function setup() {
  createCanvas(600, 400);
  shieldAttribute = 60; 
  for (var i = 0; i < virusCount; i++) {  //setting up to create virus objects
    var x;
    var y;
    var speed ;
    virus[i] = new Covid19(x, y, speed);
  }
  let checkMask = false;
  for (var j = 0; j < maskCount; j++) {  //creat mask objects
    mask[j] = new Masks(maskx, masky, maskr);
  }
}

function draw() {
  background(0);
  userGen();  //create user + shield 
  for (var i = 0; i < virusCount ; i++){  //functionality of virus implemented
    virus[i].generate();
    virus[i].forward();
    if(dist(virus[i].x, virus[i].y, 550, height/2)<= shieldAttribute-120){  //the virus balls get eliminated as they approach the growing shield
    virus[i].x = -600
  }
  }
  for (var j = 0; j < maskCount ; j++){  //functionality of virus implemented
    mask[j].build();
    mask[j].collect();
    mask[j].move();
  } 
}
//function for creating user
function userGen(){
  noStroke();
  fill(20,255,238,shieldAttribute/5);  //shield
  ellipse(550, height/2, shieldAttribute, shieldAttribute);
  
  fill(60, 198, 177);  //user circle
  ellipse(550, height/2 ,40, 40);
}

//COVID19 VIRUS CLASS
class Covid19 {
  constructor(){
    this.x = 0;
    this.y = random(20, 380);
    this.speed = random(0.5,2.5);
    this.virRad = random (30,50);
    this.checkVirus = false;
  }
  
  forward (){
  //  for (var i = 0; i < 5; i++){
    this.x += this.speed;
  }
  
  generate (){   //create the virus
    if (this.checkVirus == false){
    noStroke();
    fill(255,80,10);
    ellipse(this.x, this.y, this.virRad, this.virRad);
    }
  }
}

//MASK CLASS
class Masks {  
  constructor(){
    this.maskx = random(550);
    this.masky = random(350);
    this.maskr = random(10,80);
    this.checkMask = false;
  }
  
  build(){   //create the mask
    noStroke();  
    fill(50,240,80);
    if (this.checkMask == false){
    ellipse(this.maskx, this.masky, this.maskr);
    }
  }
  collect(){   //the mask balls disappear when hovered over, giving the illusion of "collecting"
    let d = dist(mouseX, mouseY, this.maskx , this.masky);
    if (d <= 20){
      shieldAttribute += this.maskr;
      this.checkMask = true;
      this.maskx = -600
      this.masky = -600
      this.maskr = 0
    }
  }
  
  move(){    //masks jittering to make collecting a bit more difficult
    this.maskx += random(-2,2);
    this.masky += random(-2,2);
  }
  
}

LO: Stephanie Dinkins

francis — Mon, 16 Nov 2020 03:18:11 +0000

I first found Stephanie Dinkins while doing research for one of our previous Looking Outwards assignments and found that her work was very inspirational. As a Black woman transmedia (computational) artist, Dinkins explores the intersection between storytelling, treasured history, and the amplification of voices through her art. Her work often circles around topics of gender (in both culture-specific and broader societal contexts), being a Black person in America, and equity for communities of color.

One of her most recent works, #SayItAloud, is a WebXR experience driven by motivations of fighting injustices in the world but at the same time, creating things to solidify those impacts. The user is led through this experience by a central persona, Professor Commander Justice and the interaction is enhanced by the ability for viewers to add their own thoughts and experiences through the form of video submissions.

Project 11: A worm dreaming

francis — Mon, 16 Nov 2020 02:57:26 +0000

I wanted to do a little animation/landscape of a worm’s dream Flashy colors and big flowers!

sketch

var backgroundX = 600;
var trip = [];
var noiseParam = 0;
var noiseStep = 0.02;

var x1 = 250;
function preload() {
    colorBackground = loadImage("https://i.imgur.com/XE9vWWB.png")
    worm = loadImage("https://i.imgur.com/CYR27Ru.png");
    redFlower = loadImage("https://i.imgur.com/R5vVLaL.png");
    yellowFlower = loadImage("https://i.imgur.com/ogHwP78.png");
    blueFlower = loadImage("https://i.imgur.com/faPKcYb.png");
    backgroundHouse = loadImage("https://i.imgur.com/DgMNstF.png");
    backgroundTower = loadImage("https://i.imgur.com/AuMqECF.png");
}

 function setup() {
    createCanvas(450, 300);
   
   for (var i = 0; i



Project 10: BOOOOOO
francis — Mon, 09 Nov 2020 01:48:05 +0000

sketch//A ghost is floating around, waiting to catch a unknowing passerby by surprise! Wait a bit and BOO!!!! The ghost has caught you ;)
var ghost1;
var ghost2;
var ghost3;
var ghost4;
var ghost5;
var ghost6;
var ghost7;
var ghost8;
var ghost9;
var ghost10;
var ghost11;
var ghost12;
var laughnoise;
var windsound;

function preload() {
    ghost1 = loadImage('https://i.imgur.com/X4dZ0hI.jpg' );
    ghost2 = loadImage('https://i.imgur.com/oEPEO2h.jpg' );
    ghost3 = loadImage('https://i.imgur.com/YdezjuH.jpg' );
    ghost4 = loadImage('https://i.imgur.com/ql1EG2S.jpg' );
    ghost5 = loadImage('https://i.imgur.com/XwlxdCa.jpg' );
    ghost6 = loadImage('https://i.imgur.com/fBUZvTM.jpg' );
    ghost7 = loadImage('https://i.imgur.com/kdNl0ob.jpg');
    ghost8 = loadImage('https://i.imgur.com/ZIooGoA.jpg' );
    ghost9 = loadImage('https://i.imgur.com/c0UNjMv.jpg' );
    ghost10 = loadImage('https://i.imgur.com/IucRj0z.jpg' );
    ghost11 = loadImage('https://i.imgur.com/zmzgLi5.jpg' );
    ghost12 = loadImage('https://i.imgur.com/ZeqmZnM.jpg' );
    laughnoise = loadSound('https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/laughnoise-1.wav');
    windsound = loadSound('https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/spookywind-1.wav');

}

function setup(){
    createCanvas(600, 600);
    frameRate(2);
    useSound();
}

function soundSetup(){
    laughnoise.setVolume(1);
    windsound.setVolume(1);
}

function draw(){
    background(0);
     if(frameCount == 1){
      image(ghost1,0,0);
      windsound.play();
    }
    if(frameCount == 2){
      image(ghost2,0,0);
    }
    if(frameCount == 3){
      image(ghost3,0,0);
    }
    if(frameCount == 4){
      image(ghost4,0,0);
    }
    if(frameCount == 5){
      image(ghost5,0,0);
    }
    if(frameCount == 6){
      image(ghost6,0,0);
    }
    if(frameCount == 7){
      image(ghost7,0,0);
    }
    if(frameCount == 8){
      image(ghost8,0,0);
    }
    if(frameCount == 9){
      image(ghost9,0,0);
      windsound.stop();
      laughnoise.play();
    }
    if(frameCount == 10){
      image(ghost10,0,0);
    }
    if(frameCount == 11){
      image(ghos11,0,0);
    }
    if(frameCount >= 12){
      image(ghost12,0,0);
    }
}




LO: Sonic Computational Art
francis — Mon, 09 Nov 2020 01:36:18 +0000

Game of Skill 2.0 is a piece created by deaf sound artist Christine Sun Kim that explores the relationship between labor and listening. With the use of magnets, velcro strips, and custom electronic pieces driven by a sound/position tracking code, Kim is able to represent the subjectivity in an activity that seems so instinctual and simple for those without hearing disabilities. 





As the computational electronic system produces a radio sound that responds to the players’ direction and speed, Kim’s piece lends another perspective to the world in which we exist. This begs the question, “how much harder do those hard-of-hearing or deaf need to work in order to reap an experience that the hearing community takes for granted?” Through the use of an interactive installation experience, Kim is able to create a space in which everyone has to work just as hard to produce radio noise, all while drawing parallels between a game of skill and a ‘natural’ daily activity. 



Custom electronic radio box.
While exploring Kim’s work and specifically her piece Game of Skill 2.0,  I began to question the ability for us to use computational art and diving into a wide range of mediums and elements in order to transform our artwork into tools to create a more equitable society. Although the coding that goes on behind the scenes may be far more complicated than the actual activity of dragging a stemmed-radio-machine along a velcro strap gives itself to be, it creates opportunity to help offer a range perspectives and open minds in an approachable environment. 



Project 9: Portrait
francis — Mon, 02 Nov 2020 20:54:46 +0000

sketchvar picture;
var size = 20
var x = 0;
var y = 0;

//load image
function preload() {
    picture = loadImage("https://i.imgur.com/bOywqob.jpg");
    
}

function setup() {
    createCanvas(600, 500);
    background(255,0,255);

    //load pixels from image
    picture.loadPixels();
}

function draw() {
  //pixel colors of the image at x and y position
    var col = picture.get(x, y);
        fill(col);
        noStroke();
        rect(x, y, size);
        var xpos = mouseX - x;
        var ypos = mouseY - y;
        x += xpos / 5;
        y += ypos / 5;  
    }
function mousePressed() {
  size += 10
  
}



LO: “Not the Only One”
francis — Mon, 26 Oct 2020 01:56:31 +0000

Stephanie Dinkins is a transdisciplinary (and transmedia) artist that explores the intersectionality between creating visual artifacts pushing the boundaries of AI/computer software and using these tools to create real-life solutions in confronting race and gender induced biases found in our daily lives. In addressing issues like social equity and data sovereignty in her work, Dinkins has actively engaged with communities of color to amplify and highlight the richness of culture and history found with these marginalized people. 



Viewers interacting with Not the Only One (N’TOO) through spoken language.
In one of her recent works, Not the Only One (N’TOO), Dinkins looked to incorporating Deep Learning algorithms and computer AI to create an interactive sculpture piece that communicates with users. N’TOO responds to spoken word questions, formulating answers from a large and rich database of history from three generations of Black women (from one family). Given the context of knowledge N’TOO has ‘learned’ from, Dinkins hopes to explicitly contribute to building communal nuance and transparency for those that are underrepresented in the tech sector, being women and members of the BIPOC community.





Dinkin’s lecture at the 2019 Eyeo Festival.
When looking at the broader scale of Dinkins’ work, I admire the nuanced methods of how she is able to communicate and build a narrative around wanting to create a more equitable tech sector. Not only does she appeal to the target audience (being the tech community) by incorporating tech and computer AI elements into her artwork, but she is also able to weave the importance of reflection and close examination of history and tradition in order to help better inform steps we should all be taking to reform and take active control to change the future of tech.



LO: Randomness in Comic Art
francis — Mon, 12 Oct 2020 00:39:48 +0000

In exploring randomness used as a generative tool in computational art, I came across a randomly computer-generated comic by John Pound. 



An example of a randomly generated comic sequence
Examples of Pound’s randomly generated comic pages.
The program used to create this comic pulls from a database of random words, colors, shapes, figures, objects and scenes in order to create these comic pages. Playing off the “Sunday Comic” aesthetic and subject matter, Pound wanted to explore the parameters we set for ourselves as comic-writers and comic-readers. What are the minimum requirements needed to deem something a comic? To what extent can we abstract and randomize something yet have it remain fully recognizable (in this case a page of comic panels)?



This piece makes me think about the purpose of randomness in the ways we conduct our lives; to what extent are we truly in control of our lives? If a randomly computer-generated sequence of elements can register as an everyday comic, how much of our everyday lives are in fact random and out of control? We may, in fact, subconsciously prompt ourselves to recognize these occurrences as something intentional that we have crafted.



Project 5: Wallpaper
francis — Mon, 05 Oct 2020 01:40:18 +0000

I was feeling a little dead this week so why not skulls!



sketchIllustrator sketch I did before coding.//FrancisPark
//Section C

function setup() {
    createCanvas(600, 600);
    noStroke();
}
 
function draw() {
    background(0);
    noLoop(); 
        for (var y = 1; y < height + 120; y += 119) {
          for (var x =1; x < width + 120; x += 119) {
            skull(x,y);
            }
        }
}

function skull(x,y) {
  push();
  translate(x,y);
  noStroke();
  //border shapes
  fill("#ED4999");
  rect(0,24,2,73);
  rect(23,0,73,2);
  rect(118,21,2,73);
  rect(23,117,73,2);
  fill("#EB008B");
  arc(0,0,52.5,52.5,0,HALF_PI);
  arc(119.8,0,52.5,52.5,HALF_PI,PI);
  arc(119.8,120,52.5,52.5,PI,PI* 3/2);
  arc(0,120,52.5,52.5,PI*3/2,0);
  fill("#FF96CF");
  arc(0,0,34.5,34.5,0,HALF_PI);
  arc(119.8,0,34.5,34.5,HALF_PI,PI);
  arc(119.8,120,34.5,34.5,PI,PI* 3/2);
  arc(0,120,34.5,34.5,PI*3/2,0);
  
  //skull shape
  fill("#EE498A");
  quad(43,60,77.5,60,69,87,51.5,87); //jaw
  fill("#231F20"); //teeth
  quad(48.5,70.5,49.7,70.5,54,87,52.8,87);
  quad(51.5,70.6,52.8,70.5,55.7,87,54.5,87);
  quad(54.5,70.5,56,70.5,57.5,87,56.5,87);
  quad(57.7,70.5,59,70.5,59.5,87,58.5,87);
  quad(61.3,70.5,62.5,70.5,62,87,60.8,87);
  quad(64.3,70.5,65.5,70.5,63.7,87,62.6,87);
  quad(67.6,70.5,68.7,70.5,65.5,87,64.5,87);
  quad(70.5,70.5,71.7,70.5,67.5,87,66.4,87);
  fill("#EE498A");  //various parts of eyes and head
  ellipse(60,54,40.5,43);
  fill("#231F20");
  arc(60,58,39,44,PI,0);
  fill("#EB068C");
  arc(51.5,58,19,31,PI,0);
  arc(68,58,19,31,PI,0);
  fill("#F1A9C1");
  arc(60,60,17,42,PI,0);
  fill("#EE498A");
  circle(49.3,60.5,21.8);
  circle(70.5,60.5,21.8);
  fill("#231F20");
  circle(49.3,60.5,14.7);
  circle(70.8,60.5,14.7);
  fill("#EE498A");
  arc(50,62,6.5,6.5,PI,0);
  arc(71,62, 6.5,6.5,PI,0);
  fill("#231F20");
  triangle(60.8,59.6,63.7,71,60.8,71.8);
  triangle(59.5,59.6,59.5,71.8,56.6,71);    
  pop();
}



LO: Virtual Fashion Shows
francis — Mon, 05 Oct 2020 01:33:28 +0000

With all precautions given Covid-19, creative people have been searching for more ways to communicate and further innovate despite these very limiting times. One interesting implementation of technology, specifically 3D rendering and computer-generated graphics, is direct-to-consumer based fashion label Hanifa’s virtual fashion show.



Anifa Mvuemba, Founder and Creative Director of Hanifa
Anifa Mvuemba, founder and creative director of Hanifa, launched their Pink Label Congo line through an Instagram Live streaming of a video featuring a series of animated 3D renderings. The garments were put against a black backdrop, without a human model; just the walking dresses treading empty space right in viewers’ hands. 





Using computer generated graphic technology and 3D rendering softwares, Mvuemba was able to break past the limitations brought forth by the pandemic and reached an even larger and more inclusive audience through these means.



This recent exploration into the world of digital fashion shows challenges the traditional experience of traditional runways and the necessity for these shows. I begin to ask myself questions about this: does the convenience and breadth of being able to reach a larger live audience outweigh the rich experience of the physicality of seeing models walk by in garments on a stage? 



Mvuemba thinks that her fashion show may be the start of a new wave in fashion [shows]. The computer softwares allow her to not only render designs to finer detail than seen by the naked eye, but also fit all her garments to figures often seen with Black women, creating a more inclusive space in a highly discriminatory industry. She hopes to see a day where everyone, not just rich socialites, can “sit at the front row” and experience fashion come to life.