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.
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;
}
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.
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; i<width/5+1; i++){
var n=noise(noiseParam);
var value=map(n,0,1,0,height-100);
grass.push(value);
noiseParam+=noiseStep;
}
frameRate(40);
}
function draw() {
var c2=color(253,94,83);
var c1=color(83,242,253);
sunset(0,0,width,height,c1,c2,"C"); //background
mountains(); //call mountains
noFill();
stroke(0);
bird(); //call bird
clouds(); //call clouds
push();
strokeWeight(0);
rect(100,100,200,200); //draw inside of plane
fill(64,64,64);
rect(0,0,width,75);
rect(0,325,width,75);
rect(0,75,100,250);
rect(300,75,100,250);
pop();
wing(); //draw wings
push();
noStroke(); //draw window gray lining
fill(186,194,202);
rect(75,50,25,300);
rect(100,50,200,25);
rect(100,325,200,25);
rect(300,50,25,300);
pop();
line(110,65,290,65); //window shade pull down
}
function sunset(x,y,w,h,c1,c2,a) {
noFill();
if (a=="C") { //color gradient of background
for(var i=y;i<=y+h;i++){
var cl=map(i,y,y+h,0,1);
var color=lerpColor(c1,c2,cl);
stroke(color);
line(x,i,x+w,i);
}
}
fill(253,94,83);
circle(200,325,150); //draw the sun
}
function wing(){ //drawing the planes wing
push();
fill(34,33,54);
beginShape();
vertex(300,250);
vertex(201,225);
vertex(191,225);
vertex(300,300);
vertex(300,250);
endShape(CLOSE);
fill(83,60,61);
beginShape();
vertex(198,225);
vertex(185,215);
vertex(180,215);
vertex(191,225)
endShape();
fill(52,34,32);
beginShape();
vertex(191,225);
vertex(189,235);
vertex(192,235);
vertex(201,225);
endShape(CLOSE);
pop();
}
function clouds(){
push();
fill(255); //cloud white
noStroke();
translate(width/2,height/2);
cloud.xx+=cloud.v2;
cloud.x+=cloud.v;
circle(cloud.x,cloud.y,cloud.r); //top cloud
circle(cloud.x+25,cloud.y,cloud.r);
circle(cloud.x+12.5,cloud.y-25,cloud.r);
circle(cloud.xx-100, cloud.yy+150,cloud.r); //bottom cloud
circle(cloud.xx-75,cloud.yy+150,cloud.r);
circle(cloud.xx-87.5,cloud.yy+125,cloud.r);
cloud.xx+=cloud.v2;
cloud.x+=cloud.v;
if(cloud.xx<-200){ //makes clouds reappear on left side of screen
cloud.xx=400;
cloud.yy=random(-100,100);
};
if(cloud.x<-200){
cloud.x=400;
cloud.y=random(-100,100);
}
pop();
}
function bird(){ //bird helper function
push();
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-38,robin.y-8,robin.x-43,
robin.y-8,robin.x-38,robin.y-13);
robin.x+=robin.dx;
if(robin.x<-200){ //makes clouds reappear on right side of screen
robin.x=400;
robin.y=random(100,300);
};
pop();
}
function mountains(){
if(grass.length>80){ //allow the mountains to move
grass.shift();
for(var i=0;i<width/5+1;i++){
var n=noise(noiseParam);
var value=map(n,0,1,0,1.25*height);
grass.push(value);
noiseParam+=noiseStep;
push();
strokeWeight(3);
x[i]=5*i;
pop();
}
}
fill(178, 168, 255);
beginShape(); //set up the shape of the mountains
for(var i=0; i<width; i++){
vertex(i*5,grass[i]);
}
vertex(width,height);
vertex(0,height);
endShape(CLOSE);
}
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.
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.
var 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();
}
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.
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.
//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
}
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.
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.
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.
function 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<nPoints; i++){
var t=map(i,0,nPoints,0,PI); //lemniscate formulas
x=(a*cos(t))/(1+sin(t)^2);
y=(a*sin(t)*cos(t))/(1+sin(t)^2);
vertex(x,y);
}
endShape(CLOSE);
push();
beginShape();
scale(.67)
var nPoints=360;
for(var i=0;i<nPoints;i++){
var r=map(i,0,nPoints,0,-PI); ///other half of lemniscate
x=(a*cos(r))/(1+sin(r)^2);
y=(a*sin(r)*cos(r))/(1+sin(r)^2);
vertex(x,y);
}
endShape(CLOSE);
pop();
}
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.
