Author: Pranathi

Final Project

I wanted to raise awareness about melting icebergs due to global warming so I created a game where a polar bear must jump on multiple floating icebergs to reach a safer large iceberg. I was inspired by games like frogger and crossy road and wanted to create an interactive easy game that would help users understand global warming better. To play the game user must press the space button to continue and press up to navigate. Land on the iceberg and you will be safe, if you land in the ocean, you will die. Make sure to move up before you drift off into the ocean. Also note that there are some weak icebergs that will break if you are unlucky. If I had more time I would work on creating levels with more iceberg rows and increasing speed of the icebergs, and maybe add more obstacles like a sea lion or natural predators of polar bears.

sketch

//code for screen changes
var currentScreen = "start";

//for the icebergs
var icebergs1 = [];
var icebergs2 = [];
var icebergs3 = [];
var icebergs4 = [];
var icebergs5 = [];
var x;

//for the movement of the game
var py = 0;
var count = 0;
var safe = true;

//for the melting icebergs
var beginIceberg = [];
var noiseParam = 0;
var noiseStep= 0.05;
var endingIceberg = [];
var noiseParam = 0;
var noiseStep= 0.05;

//for the baby polar bear location
var positionX = 250;
var positionY = 450;


function setup() {
    createCanvas(500, 500);
    text("p5.js vers 0.9.0 test.", 10, 15);
    start();
    //the initial icebergs
      for (var i = 0; i < 5; i++){
        x = 100*i;
        y = -50;
       icebergs1[i]=makeIceberg(x,y); 
      }
      for (var i = 0; i < 5; i++){
        x = 100*i;
        y = 50;
       icebergs2[i]=makeIceberg(x,y); 
      }
      for (var i = 0; i < 5; i++){
        x = 100*i;
        y = 150;
       icebergs3[i]=makeIceberg(x,y); 
      }
      for (var i = 0; i < 5; i++){
        x = 100*i;
        y = 250;
       icebergs4[i]=makeIceberg(x,y); 
      }
       
      for (var i = 0; i < 5; i++){
        x = 100*i;
        y = 350;
       icebergs5[i]=makeIceberg(x,y); 
      }
    //for the starting iceberg
      for (var i=0; i < width/5; i++){
        n=noise(noiseParam);
        value = map(n,0,1,400,450);
        beginIceberg.push(value);
        noiseParam += noiseStep;
    }

    //for the ending iceberg
     for (var i=0; i < width/5; i++){
      n=noise(noiseParam);
      value = map(n,0,1,-150,-100);
      endingIceberg.push(value);
      noiseParam += noiseStep;
    }
    
    frameRate(10);
}

function draw() {
  translate(0,py);
  //the blue ocean
  background(0,0,200);

  //the start screen
  if (currentScreen == "start"){
    start();
    if (keyIsPressed){
      currentScreen = "game";
    }
  }
  
  //plays the game screen
  else if (currentScreen == "game"){
    gameScreen();
  }
  
  //plays the lose screen
  else if (currentScreen == "lose"){
    elimination();
  }
  
  //playes the win screen
  else if (currentScreen == "win"){
    win();
  }
  

}

//Game Scene 

function gameScreen(){
  //the starting scene of the melting large iceberg
  meltingIceberg();
  
  //the icebergs
  updateAndDisplayIceberg();
  addNewIcebergs(); 
  
  //the movement of the game - to continuosly check if its on an iceberg
  if (count == 1){
      for (var i = 0; i < icebergs1.length; i++){
        if (positionX >= icebergs1[i].x & positionX + 20 <= icebergs1[i].x + icebergs1[i].width){
          positionX += 3;
          safe = true;
          break;;
        }
      }
    }
  if (count == 2){
      for (var i = 0; i < icebergs2.length; i++){
        if (positionX >= icebergs2[i].x & positionX + 20 <= icebergs2[i].x + icebergs2[i].width){
          positionX += 3;
          safe = true;
          break;
        }
      }
    }
  if (count == 3){
      for (var i = 0; i < icebergs3.length; i++){
        if (positionX >= icebergs3[i].x & positionX + 20 <= icebergs3[i].x + icebergs3[i].width){
          positionX += 3;
          safe = true;
          break;
        }
      }
    }
  if (count == 4){
      for (var i = 0; i < icebergs4.length; i++){
        if (positionX >= icebergs4[i].x & positionX + 20 <= icebergs4[i].x + icebergs4[i].width){
          positionX += 3;
          safe = true;
          break;
        }
      }
    }
  if (count == 5){
      for (var i = 0; i < icebergs5.length; i++){
        if (positionX >= icebergs5[i].x & positionX + 20 <= icebergs5[i].x + icebergs5[i].width){
          positionX += 3;
          safe = true;
          break;
        }
      }
    }
    
  if (positionX+20 > width){
    safe = false;
  }
    
  
    //if safe = false - game over
    if (safe == false){
      currentScreen = "lose";
      //noLoop()
    }
   
  //endgame
  if (count == 6){
    //display winning scene
    currentScreen = "win";
  }
 meltingIceberg2();
 
  //the baby polar bear 
  babyPolarBear();
}

//The large icebergs

function meltingIceberg(){
  fill("white");
  stroke("white");
  beginShape();
  vertex(0,height);
  
  for(i=0; i<width/5;i++){
    vertex(i*5,beginIceberg[i]);
  }
  
  vertex(width+50,height);
  endShape(CLOSE); 
  n=noise(noiseParam);
  value = map(n,0,1,400,450);
  beginIceberg.shift();
  beginIceberg.push(value);
  noiseParam += noiseStep;
}

function meltingIceberg2(){
 //The ending scene is a melting iceberg with the mother polar bear
  fill("white");
  stroke("white");
  beginShape();
  vertex(0,-600);
  
  for(i=0; i<width/5;i++){
    vertex(i*5,endingIceberg[i]);
  }
  
  vertex(width+50,-600);
  endShape(CLOSE); 
  n=noise(noiseParam);
  value = map(n,0,1,-150,-100);
  endingIceberg.shift();
  endingIceberg.push(value);
  noiseParam += noiseStep;
}


//code to do the jumps

//to draw baby polar bear and its respective movements (initally just a square, will later create details) 

function babyPolarBear(){
  fill("red");
  rect(positionX, positionY, 20,20); //might need to fix size later 
}

function keyPressed(){
  if (keyCode == UP_ARROW & currentScreen == "game"){
      py+=100;
      positionY -= 100;
      count++;
      safe = false;
      gameScreen();
    }
}

//object creation of the icebergs

function makeIceberg(x,y){
  var ice = {
    x,
    y,
    height: 25,
    width: floor(random(40,60)),
    speed: 3, 
    display: displayIceberg,
    move:moveIceberg
  }
  return ice;  
  }
 
 function displayIceberg(x,y){
   fill("white");
   rect(this.x,this.y,this.width,this.height);
 }   
 
 function moveIceberg(x){
   this.x+=this.speed;
 } 
 
 function updateAndDisplayIceberg(){
   for(var i = 0; i < icebergs1.length; i++){
     icebergs1[i].move();
     icebergs1[i].display();
   }
   for(var i = 0; i < icebergs2.length; i++){
     icebergs2[i].move();
     icebergs2[i].display();
   }
   for(var i = 0; i < icebergs3.length; i++){
     icebergs3[i].move();
     icebergs3[i].display();
   }
   for(var i = 0; i < icebergs4.length; i++){
     icebergs4[i].move();
     icebergs4[i].display();
   }
   for(var i = 0; i < icebergs5.length; i++){
     icebergs5[i].move();
     icebergs5[i].display();
   }
 }
   
 function addNewIcebergs(){ //should I change this to different logic?
   var newIcebergLikelihood = 0.05;
   var x = -40;
   if (random(0,1) < newIcebergLikelihood){
     icebergs1.push(makeIceberg(x,350));
   }
   if (random(0,1) < newIcebergLikelihood){
     icebergs2.push(makeIceberg(x,250));
   }
   if (random(0,1) < newIcebergLikelihood){
     icebergs3.push(makeIceberg(x,150));
   }
   if (random(0,1) < newIcebergLikelihood){
     icebergs4.push(makeIceberg(x,50));
   }
   if (random(0,1) < newIcebergLikelihood){
     icebergs5.push(makeIceberg(x,-50));
   }
 }
 

//Code to implement width

function icebergWidth(){
  return this.x + this.width;
}



//starting scene - instructions stuff - press space to continue
function start(){
  fill("green");
  rect(0,0,width,height);
  textSize(15);
  fill("white");
  text("Welcome to Save the POLAR BEAR from Global Warming", 50 ,200);
  textSize(15);
  fill("white");
  text("Press Space to Continue", 50,260);
  textSize(15);
  fill("white");
  let word = 'Instructions: Press the up key to move the polar bear (the red square) forward. Land on the iceberg and you will be safe, if you land in the ocean, you will die. Make sure to move up before you drift off into the ocean. Also note that there are some icebergs that are hidden if you are lucky and some weak icebergs that will break if you are unlucky. Can you reach the safe iceberg?'
  text(word,50,280, 400,200);
}

//The winning scene
function win(){
  fill("yellow");
  rect(0,0 - 100* count,width,height);
  textSize(50);
  fill("black");
  text("You have Won", 50 ,250 - 100* count);
  textSize(20);
  fill("black");
  text("Reload page to play again", 250,290 - 100* count);
}

// elimination scene 

function elimination(){
  fill("black");
  rect(0 ,0 - 100* count,width,height);
  textSize(50);
  fill("white");
  text("You have LOST", 50 ,250 - 100* count);
  textSize(20);
  fill("white");
  text("Reload page to play again", 250,290 - 100* count);
  
}

Looking Outwards 09

A particular work that I find interesting is “US Oil Fix” by Brooke Singer. Made in 2006, Singer was asked to contribute to the book “The Atlas of Radical Cartography” which was a collection of “10 maps and 10 essays about social issues from globalization to garbage”. Her contribution “is a look at the work through the lens of US oil consumption. The mission for this generative art piece is what I admire so much about it. It touches on the idea that art can create change within our world. Using art also enables a larger audience to understand and take action against a complicated idea like Oil Consumption. Brooke Singer’s artistic sensibilities manifest in this piece as they are trying to persuade a larger audience on an issue. With this mission, it forces the artists to portray their art a very specific way making them use their artistic sensibilities. In conclusion, I really enjoy looking at this piece and the message that it has to offer. The creator Brooke Singer is an Associate Professor of New Media at Purchase College at State University of New York. She works with technoscience as an artist, educator, nonspecialist and collaborator.

https://brookesinger.net/US-Oil-Fix

https://brookesinger.net/About

Looking Outwards 08

Hannah Davis, based on NYC, is a programmer and generative musician. She describes herself as an artist, composer and a musician who likes to find invisible structures and bring them to the surface. She has been working art and music projects that take use of machine learning, but she has also worked art on data and installations. In the past she has been working on an algorithm called TransProse, “which identifies emotions in a piece of text and translates it into a musical piece with a similar emotional tone”. Some of her newer work includes which was in creating a dataset of emotion tagged landscapes, especially getting rid of bias that exists in the actual human beings. I admire this project the most, because I do believe a lot of the things around us are biased and this can cause a lot of error, so this might be a good step into a rational error free world. She uses a lot of data to present her work effectively, which I aspire to do as well, especially making sure everything is backed with data.

All Projects

Project 07 Curves

When I saw the bean curve on the website, I knew i had to do it since it was pretty cute. After coding it in, I realized my bean did not look like a bean, and it turns out its becuase I had to be careful translating the math equations in way that the code would understand. After, I figured it out, I realized just drawing one bean was too simple, so I had to draw alot of them. Taking inspiration from the spots on canvas example, I was able to create the project below.

sketch
var ex = [];
var ey = [];
var points = 100;

function setup() {
    createCanvas(480, 480);
    frameRate(10);
    text("p5.js vers 0.9.0 test.", 10, 15);
}

function draw() {
//Picked the bean curve to do the project 
background("green");
//translate(width/2,height/2);
for (var i = 0; i < ex.length; i++){
  push();
  translate(ex[i], ey[i]);
  drawBeanCurve();
  pop();
}
}

function mousePressed(){
  ex.push(mouseX);
  ey.push(mouseY);
}

function drawBeanCurve(){
  var x;
  var y;
  var a = mouseX;
  var t = mouseY;
  fill("purple");
  beginShape();
  for (var i = 0; i < points; i++){
    t = map(i,0,points,0,TWO_PI);
    x = a*(cos(t)*((sin(t)**3)+(cos(t)**3)));
    y = a*(sin(t)*((sin(t)**3)+(cos(t)**3)));
    vertex(x,y);
  }
  endShape(CLOSE);
}

Looking Outwards 07

A particular work that I find very interesting is ‘FORMS – String Quartet’ by Playmodes. It is a “live multimedia performance for a string quartet, electronic music and panoramic visuals, in the field of visual sonification”(Visnjic 2021). They are able to create performances that are visually appealing that are controlled by the sound they were creating. In a sense, it was such a great experience watching them because it was so cool how the lights and images were adding to the meaning of the song. It is done by a generative system that creates endless, unrepeatable graphic scores that are immediately transformed into sound. The software that’s used is “coded in processing where the image sonification was done in Max/MSP. Hardware in this performance is comprised of a 3840*1080 pixels LED screen, aMacbook Pro with RME Fireface UCX soundcard, stereo sound system + subwoofers, a series of DPA 4099 microphones and two violins, one viola and a cello”(Visnjic 2021).Overall, I really enjoyed their performances.

Website: https://www.creativeapplications.net/maxmsp/forms-string-quartet/

Project 6 Abstract Clock

It was alot of fun making this peice. It was really hard to figure out where to start, but when I decided to split the hour, minute, and second into different parts, I was able to better figure out what to do.

sketch

var lengt = 10;
var hr;
var min;
var sec;


function setup() {
    createCanvas(480, 480, WEBGL);
    hr = hour();
    min = minute();
    sec = second();
    text("p5.js vers 0.9.0 test.", 10, 15);
    ellipse(240,240,480);
}


// drawing a plant that grows and dies at 24 hours but then grows from the stump again

function draw() {
  background(220);
  sec = second();
  min = minute();
  sec = second();
  thePlant(hr);
  theSky(min,hr);
  theLeaves(sec);
}

function theLeaves(second){ //the leaves or flower changes based on the second
  fill("purple");
  cone(10+second,65,16,3);
}

function thePlant (hr){ //each hour adds length to the plant
  fill("brown");
  translate(0,100);
  cylinder(60, 100, 16, 16);
  
  //the actual plant
  translate(0,-70);
  fill("green");
  cylinder(20, lengt*hr, 16, 16);
}

function theSky (min,hr){ //changes based on the 12 hr system
  if (hr <= 12){
    fill(0,0,0.3472*(min + (60*hr)));
    }else{
      fill(0,0,255 - 0.3472*(min + (60*hr)));
    }
  rect(-480,-480,960,960);
}

Looking Outward 06

A particular work that I find interesting is e4708 by Mark Wilson. To describe the artwork, it looks like a collection of shapes like circles and squares that are repeated many times in neon colors. Some circles are on top of each other, while some circles are on top of squares. The colors make it seem like it’s a lucid dream just about to happen. The fact that I can’t exactly pinpoint what it is inspires me as it really does leave it up to the viewer to interpret the collection of shapes and spaces. I am unsure about the algorithms that the author uses, but he uses it well. Mark Wilson artistic sensibilities manifest in this piece as he is trying to leave it up to a larger audience. He created the piece by purchasing a personal computer and writing his own software. He mixes repetition, careful curation and randomness by the machine to create the piece. In conclusion, I really enjoy looking at this piece and the way it was created.

Project 5 Wallpaper

It was really hard doing this becuase of translate as it took alot of calculation to figure out where the origin is.

sketch


function setup() {
    createCanvas(600, 600, WEBGL);
    background(220);
    text("p5.js vers 0.9.0 test.", 10, 15);
}

function draw() {
  
  //for the color
  colorMode(RGB);
  let from = color(random(0,255),random(0,255),random(0,255));
  let to = color(random(0,255), random(0,255), random(0,255));
  colorMode(RGB); 
  let interA = lerpColor(from, to, 0.33);
  let interB = lerpColor(from, to, 0.66);
 
 //for the pattern 
  
  for (var col = 0; col < 2; col += 1){
    translate(-200,0);
    for (var row = 0; row < 2; row += 1){
      //translate(0,-150);
      fill(from);
      design();
    }
  }
  
  for (var col = 0; col < 4; col += 1){
    translate(200,0);
    for (var row = 0; row < 4; row += 1){
      //translate(0,150);
      fill(interA);
      design();
    }
  }
  
  for (var col = 0; col < 2; col += 1){
    translate(-200,0);
    for (var row = 0; row < 2; row += 1){
      //translate(0,-150);
      design();
    }
  }
  
  for (var col = 0; col < 2; col += 1){
    translate(0,-200);
    for (var row = 0; row < 2; row += 1){
      //translate(0,-150);
      fill(interB);
      design();
    }
  }
  
  for (var col = 0; col < 4; col += 1){
    translate(0,200);
    for (var row = 0; row < 4; row += 1){
      //translate(0,-150);
      fill(to);
      design();
    }
  }
    
 
  noLoop();
}



function design(){
  fill
  ellipsoid(30, 40, 30);
  torus(60,20);
}

Looking Outward 05

One particular 3D art that I find interesting is Robert DeNiro by character artist Thomas Rousvoal. What is so cool about this piece is that Rousval is able to combine the personality and legendary facial expressions of DeNiro into an 3D piece art. It looks very realistic without losing that touch of cartoon that elevates the piece. Rousval paid a lot of attention to applying noise and grain to the 3D art, to express the personality of the piece. He uses a real 8K scanner to project onto UV’s, this enables him to start a new sculpture with different shapes while having layers of details of realistic skin.

LookingOutwards-04

A particular work that I find very interesting is Bishop Ivy’s performances. As a student at CMU, he combines his cs background with his career in music. He is able to create performances that are visually appealing that are controlled by the sound he was creating. In a sense, it was such a great experience watching him because it was so cool how the lights and images were adding to the meaning of the song. I am unsure how the artist does do this, but he does it well. Overall, I really enjoyed his performances.