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

Fight the Corona virus final project

anthony — Sun, 13 Dec 2020 02:37:10 +0000

I worked on this project with Lucas Bittig. Our program is an interactive fight the coronavirus game. Within this game the player must tap on the coronavirus particles attacking the hospital in order to try to create and distribute the vaccine. As the players score increases the particles spawn at a higher rate making the game harder to win. Once the screen and player are about to be overtaken by the virus the screen will start to flash red indicating the player is close to losing. Once there are 30 or more corona virus particles on the screen the player has become infected and loses. Losing triggers the game to bring the player to the loser page. In order to win the game the player must click on 100 individual particles filling up the bar on the right side of the game. Once this occurs the player has created and distributed the vaccine bringing them to the winner page. If we had more experience in code we would have liked to have been able to make the virus particles more complex and life like while having the mouse pressed function work on only the virus. With more time and knowledge this might have been accomplished.

sketch Download

var counter = 0;
var viruses = [];
var newVirusLikelihood = 0.05;
var cars = [];


function setup() {
    createCanvas(480, 480);
    frameRate(10);
}

function draw() {
    push();
    background1();
    pop();
    //gives a flashing warning if there are more than 20 objects
    //Lucas and Anthony
    if(viruses.length > 20){
        if(frameCount % 4 == 0){
            background(255, 0, 0, 100);
        }
        else{
            push();
            background1();
            pop();
        }
    }
    //The following if statements increase the spawn rate at certain scores
    //(Lucas)
    if(counter == 5){
        newVirusLikelihood = .07
    }
    if(counter == 10){
        newVirusLikelihood = .12
    }
    if(counter == 25){
        newVirusLikelihood = .17
    }
    if(counter == 50){
        newVirusLikelihood = .23
    }
    //Creates a progress bar to a vaccine (Lucas)
    fill(0, 255, 0);
    rect(width - 10, 0, 10, counter * height / 100);

    fill(255);
    //displays how many viruses have been "cleansed" (Lucas)
    text("Score = " + counter.toString(), 10, 10, 70, 80);
    updateAndDisplayViruses();
    bounceViruses();
    addNewVirusesWithSomeRandomProbability();
    print(counter.toString());
    //End Screen if the player loses (Lucas)
    if(viruses.length >= 30){
        //erase();
        background(0);
        textAlign(CENTER);
        textSize(26);
        text("You Lose: COVID-19 Has Taken Over", width / 2, height / 2)
        noLoop();
    }
    //End Screen if the player wins (Lucas)
    if(counter == 100){
        background(255);
        push();
        fill(0);
        textAlign(CENTER);
        textSize(26);
        text("You Win: A Vaccine Has Been Distributed", width / 2, height / 2)
        pop();
        noLoop();

    }
}

//The following code was done by Lucas until indicated
function updateAndDisplayViruses(){
    // Update the virus positions, and display them.
    for (var i = 0; i < viruses.length; i++){
        viruses[i].move();
        viruses[i].display();
    }
}
//makes the viruses bounce off the edges of the canvas
function bounceViruses(){
    for(var i = 0; i < viruses.length; i++){
        //determines if a virus is on the left or right and switches direction
        //accordingly
        if(viruses[i].x + viruses[i].breadth / 2 >= width ||
        viruses[i].x - viruses[i].breadth / 2 <= 0){
            viruses[i].speedX = -viruses[i].speedX
        }
        //determines if a virus is on the top or bottom and switches direction
        //accordingly
        if(viruses[i].y + viruses[i].breadth / 2 >= height ||
        viruses[i].y - viruses[i].breadth / 2 <= 0){
            viruses[i].speedY = -viruses[i].speedY
        }
    }
}


function addNewVirusesWithSomeRandomProbability() {
    // Adds a virus based upon a probability
    if (random(0,1) < newVirusLikelihood) {
        viruses.push(makeVirus(random(20, width - 20),
        random(20, height - 20)));
    }
}

// method to update position of virus every frame
function virusMove() {
    this.x += this.speedX;
    this.y += this.speedY;
}

function virusDisplay() {
    //colors the viruses randomly
    push();
    fill(this.clr);
    push();
    translate(this.x, this.y);
    circle(0, 0, this.breadth);
    pop();
    pop();
}

function makeVirus(startLocationX, startLocationY){
    var virus = {x: startLocationX,
               y: startLocationY,
               breadth: random(20, 80), //size of virus
               //random color of each virus
               clr: color(random(255), random(255), random(255)),
               //random speeds of virus
               speedX: random(-5, 5),
               speedY: random(-5, 5),
               move: virusMove,
               display: virusDisplay}
    return virus;
}

function mousePressed(){
    var vBefore = [];
    var vAfter = [];
    var vFinal = [];
    var v = viruses;
    for(var i = 0; i < viruses.length; i++){
        //conditions for mouse to be inside a virus
        if(mouseX > viruses[i].x - viruses[i].breadth / 2 & mouseX <
            viruses[i].x + viruses[i].breadth/2 && mouseY < viruses[i].y +
            viruses[i].breadth / 2 && mouseY > viruses[i].y -
            viruses[i].breadth / 2){
                //viruses up until the clicked object
                vBefore = viruses.slice(0, i);
                //viruses after the clicked object
                vAfter = v.slice(i + 1);
                //combines the two arrays of objects (eliminating the clicked
                //one)
                vFinal = vBefore.concat(vAfter);
                counter += 1
                viruses = vFinal
        }
    }
}
//The following code was done by Anthony
function background1(){   //joining background helper functions into one
  background(135,206,235);
  push()
  hospital();
  pop()
  push()
  updateAndDisplayCars();
  removeCarsThatHaveSlippedOutOfView();
  addNewCarsWithSomeRandomProbability();
  pop()
}

function hospital(){
  translate(0,-50);
  rect(100,250,100,230);    //creating the hospital building
  rect(200,200,200,280);
  rect(240,150,120,50);
  push();
  noStroke();
  fill(255,0,0);    //red cross on the top
  rect(295,160,10,30);
  rect(285,170,30,10)
  pop();
  push();
  fill(0,0,255);
  for(x=115;x<185;x+=30){   //windows
    for(y=255;y<460;y+=30){
      square(x,y,15);
    }
  }
  for(x=215;x<390;x+=30){
    for(y=210;y<400;y+=30){
      square(x,y,15);
    }
  }
  rect(300,450,20,30);    //doors
  rect(280,450,20,30);
  pop();
  push()
  fill(64);
  rect(0,480,480,50);   //street
  pop()
}

function updateAndDisplayCars(){
    // Update the cars' positions, and display them.
    for (var i = 0; i < cars.length; i++){
        cars[i].move();
        cars[i].display();
    }
}

function removeCarsThatHaveSlippedOutOfView(){
    //defines if a car is off the canvas, recreates the array to keep
    //cars still on canvas and remove ones that have moved off
    var carsToKeep = [];
    for (var i = 0; i < cars.length; i++){
        if (cars[i].x + cars[i].breadth > 0) {
            carsToKeep.push(cars[i]);
        }
    }
    cars = carsToKeep;
}


function addNewCarsWithSomeRandomProbability() {
    // Adds a car based upon a probability
    var newCarLikelihood = 0.02;
    if (random(0,1) < newCarLikelihood) {
        cars.push(makeCar(width));
    }
}


// method to update position of tree every frame
function carMove() {
    this.x += this.speed;
}

function carDisplay() {
    //colors the car randomly
    fill(this.clr);
    push();
    translate(this.x, 440);
    //body of the car
    rect(0, 0, this.breadth, 30);
    //windows as roof of the car
    fill(255, 255, 255, 50);
    quad(15, 0, this.breadth*.25, -20, this.breadth*.75,
         -20, this.breadth-5, 0);
    //wheels
    fill(0);
    circle(20, 25, 25);
    circle(80, 25, 25);
    pop();
}

function makeCar(startLocationX){
    var car = {x: startLocationX,
               breadth: 100, // length of car
               //random color of each car
               clr: color(random(255), random(255), random(255)),
               //random speeds of cars
               speed: random(-5, -10),
               move: carMove,
               display: carDisplay}
    return car;
}

Project 11

anthony — Sun, 15 Nov 2020 22:25:35 +0000

To start with this project I wanted to make my landscape the outside of a plane window. I wanted to make it seem like someone was sitting in an airplane looking at mountain tops and a sunset as clouds and birds go by.

sketch Download

var grass=[];
var noiseParam=0;
var noiseStep=0.04;
var x=[];
var cloud={x:200,xx:200,y:0,yy:0,r:50,v:-2,
  v2:-2.75};
var robin={x:100,y:25,dx:-2,dy:28,c:255,z:0,r:212,g:124,b:47,
  rr:48,gg:46,bb:59,r3:105,g3:107,b3:102};


function setup() {
    createCanvas(400, 400);    //setting up the grass
    for(var i=0; i80){    //allow the mountains to move
    grass.shift();
    for(var i=0;i



Looking Outwards 11
anthony — Sun, 15 Nov 2020 22:21:13 +0000

A project that I found interesting was Text Rain by Camille Utterback. I found this interesting because the piece was permanently installed in 2000, very early for graphic art that works with human motions. I like this project because it allows people to manipulate fake words with their motions. The creator of this piece, Camille Utterback is an internationally acclaimed artist and pioneer in the field of digital and interactive art. Utterback earned her BA in Art from Williams College, and her Masters degree from The Interactive Telecommunications Program at NYU’s Tisch School of the Arts. She has many pieces in private and public collections, including The Smithsonian and Hewlett Packard.




Text Rain




Project 10 Sonic Story
anthony — Mon, 09 Nov 2020 03:26:59 +0000

My process for this project was too make a nature story, I started with a buzzing bee that flies through the screen, a chirping bird that gets sad from not finding any friends, a sun that gives off an angelic sound, and a rising moon that brings out nighttime bugs.



beeDownload



birdsoundDownload



25.7.16Download



sunsoundDownload



sketchvar bee={x:0,y:100,h:20,w:40,dx:83,r:255,g:255,b:0};
var tree={x:75,y:150,w:25,h:250,lw:155,lh:75,r:210,g:105,b:30,gg:255,z:0};
var robin={x:-5,y:-5,dx:15,dy:28,c:255,z:0,r:212,g:124,b:47,
  rr:48,gg:46,bb:59,r3:105,g3:107,b3:102};
var sun={x:-50,y:200,w:100,dx:50,dy:-28,c:255,z:0}
var moon={x:450,y:200,w:100,dx:-50,dy:-28,c:0,r:203,g:234,b:246,
  c1:20,c2:20,c3:25,c4:40}
    //objects
function setup() {
    createCanvas(400, 400);
    useSound();
    frameRate(1);
}

function preload(){   //preloading the sounds
	buzz=loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/bee-3.wav");
  chirp=loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/birdsound-1.wav");
  ahh=loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/sunsound-1.wav");
  moonsounds=loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/nightsounds-1.wav");
}

function soundSetup(){    //setting up sounds
  buzz.setVolume(0.25);
  chirp.setVolume(0.75);
  ahh.setVolume(0.8);
  moonsounds.setVolume(0.8);
}

function draw() {
  background(0,155,255);
  if(frameCount>23){    //have the sun rise
    movingsun();
  }
  if(frameCount>23 & frameCount<30){    //story
    text('The sun comes up',250,250);
  }
  if(frameCount==28){   //sun stops
    sun.dx=0;
    sun.dy=0;
  }
  if(frameCount==30){   //sounds plays
    ahh.play();
  }
  if(frameCount>=30 & frameCount<=34){    //story
    text('And shines its light',250,250);
  }
  if(frameCount>34 & frameCount<=38){   //sun sets and story
    sun.dx=50;
    sun.dy=28;
    sun.x+=sun.dx;
    sun.y+=sun.dy;
    text('And then sets',250,250);
  }
  if(frameCount>=39){   //it becomes night time
    background(0);
    movingmoon();
  }
  if(frameCount>=39 & frameCount<43){   //story
    text('The moon rises',250,250);
  }
  if(frameCount>=43 & frameCount<50){   //moon stops and story
    moon.dx=0;
    moon.dy=0;
    moonsounds.play();    //sound plays
    text('And the creatures come out',250,250);
  }
  if(frameCount>50 & frameCount<55){    //moon sets, sound stops and story
    moon.dx=-50;
    moon.dy=28;
    moon.x+=moon.dx;
    moon.y+=moon.dy;
    moonsounds.stop();
    text('The moon then sets',250,250);
  }
  if(frameCount>=55){   //story ends
    text('Goodnight!',250,250);
  }
  bark();   //call tree
  flyingbee();    //call bee
  bird();   //call bird
  print(frameCount);
  if(frameCount>0 & frameCount<=3.1){   //play bee sound
    buzz.play();
  }
  if(frameCount<=8.1){    //story
    text('The bee flew by the tree',250,250);
  }
  if(frameCount>=8){    //brid lands on tree
    robin.dx=0;
    robin.dy=0;
  }
  if(frameCount>9 & frameCount<13){   //bird song
    chirp.play();
  }
  if(frameCount>9 & frameCount<18){   //story
    text('The bird calls for a friend',250,250);
  }
  if(frameCount>18 & frameCount<23){    //bird flies away and story
    robin.dx=15;
    robin.dy=-28;
    robin.x+=robin.dx;
    robin.y+=robin.dy;
    text('He gets sad and leaves',250,250);
  }
}

function flyingbee(){   //bee helper function
  fill(bee.r,bee.g,bee.b);
  ellipse(bee.x,bee.y,bee.w,bee.h);
  stroke(0);
  push();
  strokeWeight(5);
  line(bee.x-5,bee.y-7,bee.x-5,bee.y+7);
  line(bee.x+5,bee.y-7,bee.x+5,bee.y+7);
  pop();
  bee.x+=bee.dx;
}

function bark(){    //tree helper function
  fill(tree.r,tree.g,tree.b);
  rect(tree.x,tree.y,tree.w,tree.h);
  fill(tree.z,tree.gg,tree.z);
  ellipse(tree.x+tree.w/2,tree.y,tree.lw,tree.lh);
}
function bird(){    //bird helper function
  fill(robin.r,robin.g,robin.b);
  circle(robin.x,robin.y,50);
  fill(robin.rr,robin.gg,robin.bb);
  circle(robin.x+25,robin.y-13,25);
  fill(robin.r3,robin.g3,robin.b3);
  triangle(robin.x-35,robin.y-5,robin.x+5,
    robin.y-5,robin.x-25,robin.y+25);
  fill(robin.c,robin.c,robin.z);
  triangle(robin.x+25,robin.y-13,robin.x+30,
    robin.y-13,robin.x+25,robin.y-8);
  robin.x+=robin.dx;
  robin.y+=robin.dy;
}
function movingsun(){   //sun helper function
  fill(sun.c,sun.c,sun.z);
  circle(sun.x,sun.y,sun.w);
  sun.x+=sun.dx;
  sun.y+=sun.dy;
}
function movingmoon(){    //moon helper function
  push();
  fill(moon.r,moon.g,moon.b);    //moon
  circle(moon.x,moon.y,moon.w);
  fill(moon.c);
  circle(moon.x-5,moon.y-5,moon.c1);   //moon craters
  circle(moon.x-30,moon.y+7,moon.c2);
  circle(moon.x+25,moon.y+25,moon.c3);
  circle(moon.x-4,moon.y-20,moon.c4);
  moon.x+=moon.dx;
  moon.y+=moon.dy;
  pop();
}




Looking Outwards 10
anthony — Mon, 09 Nov 2020 03:18:54 +0000

Since my looking outwards 04 was about a new musical instrument I decided to focus on computational music for this looking outwards. A piece that I found interesting is called Blue Jeans and Bloody Tears. This piece is a eurovision song sung by Izhar Cohen and produced by Avshalon Ariel. This piece was created using AI that was fed hundred of eurovision songs to give outputs to create a final product and song. I admire this piece because it was able to produce a cool and good song based on an AI algorithm with just other songs inputted. This shows how smart AI is becoming that it is able to create a good catchy song meaning that AI has to potential for even more in the future.









Project 9 Portrait
anthony — Sat, 31 Oct 2020 22:12:09 +0000

My process for this project was to choose a picture of myself and figure out how to go about the assignment. I was able to combine the letters “nyc” and circles to make the completed picture. This picture was taken in NYC.



sketchDownload//Anthony Prestigiacomo Section C
function preload() {
    var citypic="https://i.imgur.com/q3X1p2I.png";
    photo=loadImage(citypic);    //image variable
}

function setup() {
  createCanvas(456,273);
  background(0);
  photo.resize(456,273);    //resizing the image to fit the canvas
  photo.loadPixels();
  frameRate(400);
}

function draw() {
  var x=random(width);
  var y=random(height);
  var pixelx=constrain(floor(x),0,width);
  var pixely=constrain(floor(y),0,height);
  var pixelcolor=photo.get(pixelx,pixely);    //calling each pixel color
  noStroke();
  fill(pixelcolor);    //fill the circles and words with image pixel colors
  textFont('Veranda',random(0,5));
  text("nyc",x,y);    //nyc text to appear to form the image
  circle(x,y,random(0,5));    //circles that will appear to form the image
}




A few seconds in 
Image is starting to form
After a couple of minutes
original image




Looking Outwards 09
anthony — Sat, 31 Oct 2020 21:58:31 +0000

I looked through my friend Lucas Bittig’s Looking Outwards posts and the one that I found interesting and different was his week 4 post. This post was on music and art, he talked about a certain art work that sometimes appears like a physical painting and others as a computer generated art work. I agree with my peers assessment of the project, I like how interesting the painting can turn out as some of them can be very realistic looking. I also like the combination of the two art forms into one, “painting” and music. Like Lucas said this art can tend to be beautiful as is incorporates so many mediums and techniques to form a final product. The creator of the arts name is Kynd in collaboration with Yu Miyashita in 2020.








LO 04 – Music and Art

Expressions – Paint and pixel matière at micro-scale




Looking Outwards 08
anthony — Fri, 23 Oct 2020 17:24:49 +0000

The person who’s video I watched was Neil Mendoza. Neil is from London, UK, and is based in California. His artwork is him “combining sculpture, electronics and software to bring inanimate objects and spaces to life.”. Neil presents in a fun and funny way. He tries to compare himself to comedic things and tries to show off serious work with a fun presentation. Neil uses digital and mechanical technologies to bring inanimate objects and spaces to life. Using this medium, he explores the absurd, the humorous, the futile and the surreal. I admire that he likes to create “useless” machines, like teaching a fish to use hand tools or using hamsters as an art tool, as shown in his video. I really admired the hamster art that he presented about. I like this piece because it was a hamster running on a wheel that ended up moving an arm to draw itself on the wheel. I also admired his fish piece where a fish was able to make a hammer move and smash down, I admire this because it is such a unique concept I never would have thought of.




Portfolio






Project 07 Curves
anthony — Sun, 18 Oct 2020 00:06:26 +0000

My process for this project was to find a curve I wanted to start with, I started working with a lemniscate and realized I can make flowers out of the infinity symbol. I wanted to make something infinity symbol related but I realized flowers are pretty and work well with the shape. I then made the sizes of the flowers change and the colors change based on the mouseX and mouseY positions.



sketchDownloadfunction setup() {
    createCanvas(480, 480);
}
function draw() {
  background(66,49,148);
  var P=color(mouseX,0,mouseY);    //small flowers
  var R=color(0,mouseX,mouseY);    //big flower
  push();
  fill(P);
  push();
  translate(width/(4/3),height/4);
  scale(.5);
  rotate(radians(45));
  drawCurve();    //small flower top right
  push();
  rotate(radians(90));
  drawCurve();    //small flower top right
  pop();
  pop();
  push();
  translate(width/(4),height/4);
  scale(.5);
  rotate(radians(45));
  drawCurve();    //small flower top left
  push();
  rotate(radians(90));
  drawCurve();    //small flower top left
  pop();
  pop();
  push();
  translate(width/(4/3),height/(4/3));
  scale(.5);
  rotate(radians(45));
  drawCurve();    //small flower bottom right
  push();
  rotate(radians(90));
  drawCurve();    //small flower bottom right
  pop();
  pop();
  push();
  translate(width/(4),height/(4/3));
  scale(.5);
  rotate(radians(45));
  drawCurve();    //small flower bottom left
  push();
  rotate(radians(90));
  drawCurve();    //small flower bottom left
  pop();
  pop();
  pop();
  push();
  fill(R);
  translate(width/2,height/2);
  push();
  drawCurve();   //big flower
  pop();
  push();
  rotate(radians(90));
  drawCurve();    //big flower
  pop();
}

function drawCurve() {
  var a=constrain(mouseX/2,0,width);
  strokeWeight(3.5);
  beginShape();
  var nPoints=360;
  for(var i=0; i








Looking Outwards 07
anthony — Sat, 17 Oct 2020 23:58:20 +0000

Nicholas Feltron is an artist who uses code and computation to create his art. This piece I would like to talk about is on his website labeled BikeCycle. It shows a couple of different scenes that focus on the activity, popular routes, stations, bikes, and cyclist demographics within New York city. I admire this piece because I grew up being in the city weekly, it seems very cool to see my second home mapped out via bike schedules and routes. This piece was commissioned by the MoMA store. I am not sure how this dataset was collected and what algorithms were used in the making of this piece. This artist has a variety of computer generated informational art, as this seems to be his main artistic style.



http://feltron.com/BikeCycle.html