Author: Luke

Final Project

In this game you try to keep the penguin alive. If the penguin touches the water you lose. the penguin has to jump between ice cubes floating across the screen. the ice cubes are objects stored in an array. the penguin can jump when it is touching the ice cube. two challenges appear while playing. one makes the ice cubes smaller, and one makes the ice cubes move faster. if you navigate through these challenges you can get to safety and win the game. I attached a video of me completing the game because it might not be a game you can complete first try.

I wanted to create a fun game that had a relation to climate change. since climate change is melting ice which might cause harm to wildlife, I made this game where the ice is melting. If I had more time I might add more challenges and make the movement of the ice cubes look more realistic, like they are actually in water.

sketch
var ice = []
var penguinY = 0; 
var penguinX = 300;    
var penguinDy = 0; 
var count = 0
var menu = 0

function setup() {
  createCanvas(600,600)

  //creating the 4 icecubes
  for (i = 0; i < 4; i++) {
    iceX = random(width)
    iceY = 440
    size = 70
    ice[i] = makeIce(iceX, iceY, size)
  }
}

function draw() {

  //menu page
  if (menu < 1) {
    fill("lightgreen")
    rect(0,0,800,600)
    textAlign(CENTER)
    textFont('Helvetica')
    textSize(18)
    fill("black")
    text("The ice is melting!", 400,220)
    text("get to safety!", 400,370)
    fill("red")
    text("use the arrow keys to move left and right", 400,280)
    text("spacebar to jump", 400,310)
    text("press spacebar to begin", 400, 450)
    
    }

    //win page
  else if (count >= 3200){
      fill(220)
      noStroke()
      background("lightblue")
      ellipse(400,650,1200,400)
      textSize(18)
      fill(0)
      text("you made it to safety!",400,300)
      translate(400,420)
      drawPenguin(0,0)
      noLoop()
    }
  
  else {
  
  //scenary
  background("lightblue")
  fill("blue")
  rect(0, height - 100, width, 100)
  //sun that rotates
  push()
  translate(100,100)
  rotate(radians(count))
  drawSun()
  pop()
  
  stroke(0)

  //checking if penguin is on any icecube or above the icecubes
  if (penguinY <= 440 &
    (penguinX >= ice[0].fx && penguinX <= ice[0].fx+75) ||
    (penguinX >= ice[1].fx && penguinX <= ice[1].fx+75) ||
    (penguinX >= ice[2].fx && penguinX <= ice[2].fx+75) ||
    (penguinX >= ice[3].fx && penguinX <= ice[3].fx+75)
    ) { 
    penguinY = min(395, penguinY + penguinDy);
     
    //checking if penguin is below the icecubes
  } else { 
    
    penguinY = min(height, penguinY + penguinDy);
  }
 
  //showing the penguin and ice
  drawPenguin(penguinX,penguinY)
  showIce()

  //penguin gravity
  penguinDy = penguinDy + .25;

  //penguin left/right movement
  if (keyIsDown(LEFT_ARROW)){
    penguinX-=5
  }
  if (keyIsDown(RIGHT_ARROW)){
    penguinX+=5
  }

  // if you touch the water "you lose"
  if (penguinY >= 550) {
    textSize(18)
    text("You Lose",400,300)
    fill(255)
    drawDeadPenguin(penguinX,penguinY)
    noLoop()
  }
  //use this count to initate challenges levels
  count+=1

  //challenge level 1
  countdown(900)

  if (count >= 1100 & count <= 1500){
    ice[0].icesize = 30
    ice[1].icesize = 30
    ice[2].icesize = 30
    ice[3].icesize = 30
  }

  if (count >= 1500 && count <= 2000){
    ice[0].icesize = 70
    ice[1].icesize = 70
    ice[2].icesize = 70
    ice[3].icesize = 70
  }

  //challenge level 2
  countdown(1800)

  if (count >= 2000 && count <= 2400){
    ice[0].icespeed = -4
    ice[1].icespeed = -5
    ice[2].icespeed = -6
    ice[3].icespeed = -7
  }

  if (count >= 2400 && count <= 2401){
    ice[0].icespeed = random(-1.5,-3)
    ice[1].icespeed = random(-1.5,-3)
    ice[2].icespeed = random(-1.5,-3)
    ice[3].icespeed = random(-1.5,-3)
  }
  
  //approaching the end text
  if (count >= 2600 && count <= 2800){
    textSize(22)
    text("you are approaching the end",400,300)
}
}
}



//penguin jump
function keyPressed() {
  
  if (keyCode === 32) {
    if (penguinY >= 360 && (
      (penguinX >= ice[0].fx && penguinX <= ice[0].fx+75) ||
      (penguinX >= ice[1].fx && penguinX <= ice[1].fx+75) ||
      (penguinX >= ice[2].fx && penguinX <= ice[2].fx+75) ||
      (penguinX >= ice[3].fx && penguinX <= ice[3].fx+75)
      )) { 
    penguinDy = -10;
      }   
      menu = 1
      
      
  }
  
}

//two functions for alive penguin and dead penguin
function drawPenguin(x,y){
  fill(0);
  noStroke();
  ellipse(x, y+2, 46, 81);
  fill(255);
  ellipse(x, y+10, 31, 56);
  ellipse(x-5, y-20, 21, 21);
  ellipse(x+5, y-20, 21, 21);
  fill(255,150,40);
  triangle(x-7, y-15, x+7, y-15, x,y-3);
  ellipse(x+8, y+42, 15, 8);
  ellipse(x-8, y+42, 15, 8);
  fill(0);
  ellipse(x-8, y-21, 8, 8);
  ellipse(x+8, y-21, 8, 8);
  ellipse(x-21, y+10, 12, 40);
  ellipse(x+21, y+10, 12, 40);
  
}

function drawDeadPenguin(x,y){
  fill(0);
  noStroke();
  ellipse(x, y+2, 46, 81);
  fill(255);
  ellipse(x, y+10, 31, 56);
  ellipse(x-5, y-20, 21, 21);
  ellipse(x+5, y-20, 21, 21);
  fill(255,150,40);
  triangle(x-7, y-15, x+7, y-15, x,y-3);
  ellipse(x+8, y+42, 15, 8);
  ellipse(x-8, y+42, 15, 8);
  fill(0);
  textSize(12)
  text("x",x-9, y-20);
  text("x",x+6, y-20);
  ellipse(x-21, y+10, 12, 40);
  ellipse(x+21, y+10, 12, 40);
  

}
// function creates the sun
function drawSun(){
  fill("gold")
  stroke("gold")
  line(0,0,60,60)
  line(0,0,-60,60)
  line(0,0,-60,-60)
  line(0,0,60,-60)
  line(0,0,35,80)
  line(0,0,-35,80)
  line(0,0,35,-80)
  line(0,0,-35,-80)
  line(0,0,80,0)
  line(0,0,-80,0)
  line(0,0,0,80)
  line(0,0,0,-80)
  line(0,0,75,35)
  line(0,0,-75,-35)
  line(0,0,75,-35)
  line(0,0,-75,35)
  circle(0,0,100)
}

//function for the countdown for a challenge
function countdown(x){
if (count >= x & count <= x+200 ){
  textSize(30)
  text("Challenge in",350,200)
}
if (count >= x+16 && count = x+70 && count <=x+140 ){
  textSize(50)
  text("2",350,300)
}
if (count >= x+140 && count <=x+200 ){
  textSize(50)
  text("1",350,300)
}
}

//functions for the creation/movement of the ice
function makeIce(iceX, iceY, size) {
  var ice = {
      fx: iceX,
      fy: iceY,
      icesize: size,
      icespeed: random(-1.5, -3),
      icemove: moveIce,
      icecolor: color(random(50, 100), random(100, 200), 255),
      icedraw: drawIce
  }
  return ice
}
function moveIce() {
  this.fx += this.icespeed
  if (this.fx <= -10) {
      this.fx += width
  }
}
function drawIce() {
  stroke(0)
  fill(this.icecolor);
  rect(this.fx, this.fy, this.icesize, 70)
}
function showIce() {
  for (i = 0; i < ice.length; i++) {
      ice[i].icemove()
      ice[i].icedraw()
  }
}

LO-11

I chose to take a look at the article “Art Project Shows Racial Biases in Artificial Intelligence System” written by Meilan Solly. The article talks about an artificial intelligence classification tool called ImageNet created by artist Trevor Paglen and A.I. researcher Kate Crawford. However, the artificial intelligence may be racist. While the program identified white individuals largely in terms of occupation or other functional descriptors, it often classified those with darker skin solely by race. ImageNet is an object lesson, if you will, in what happens when people are categorized like objects. A man who uploaded multiple snapshots of himself in varying attire and settings was consistently labeled “black.” The tool will remain accessible as a physical art installation at Milan’s Fondazione Prada Osservatorio through February 2020.

project-11

this project was pretty interesting. there are birds, clouds, and a landscape going across the screen.

sketch

var cloud = []
var bird = []

function setup() {
    createCanvas(480, 240)
    frameRate(10)

    for (i = 0; i < 30; i++) {
        birdX = random(width)
        birdY = random(height)
        bird[i] = makeBird(birdX, birdY)
    }
    for (i = 0; i < 15; i++) {
        cloudX = random(width)
        cloudY = random(height/1.5)
        cloud[i] = makeCloud(cloudX, cloudY)
    }
}

function draw() {
    background(140, 200, 255)
    strokeWeight(2)
    landscape()
    showCloud()
    showBird()

}

function landscape() {
    stroke(86, 125, 70)
    beginShape()
    for (var i = 0; i < width; i++) {
        var x = (i * .01) + (millis() * .0004)
        var s = map(noise(x), 0, 1, 150, 200)
        line(i, s, i, height)
        
    }
    endShape()
}


function makeBird(birdX, birdY) {
    var bird = {
        fx: birdX,
        fy: birdY,
        birdspeed: random(-3, -8),
        birdmove: moveBird,
        birdcolor: color(random(100, 200), random(100, 200), random(100, 200)),
        birddraw: drawBird
    }
    return bird
}

function moveBird() {
    this.fx += this.birdspeed
    if (this.fx <= -10) {
        this.fx += width
    }
}

function drawBird() {
    
    stroke(0)
    fill(this.birdcolor);
    ellipse(this.fx, this.fy, 10, 10)
    line(this.fx - 5, this.fy, this.fx - 10, this.fy - 2)
    line(this.fx + 5, this.fy, this.fx + 10, this.fy - 2)

}

function showBird() {
    for (i = 0; i < bird.length; i++) {
        bird[i].birdmove()
        bird[i].birddraw()
    }
}

function makeCloud(cloudX, cloudY) {
    var cloud = {
        fx: cloudX,
        fy: cloudY,
        cloudspeed: random(-1, -2),
        cloudmove: moveCloud,
        clouddraw: drawCloud
    }
    return cloud
}

function moveCloud() {
    this.fx += this.cloudspeed
    if (this.fx <= -10) {
        this.fx += width
    }
}

function drawCloud() {
    
    noStroke()
    fill(255);
    ellipse(this.fx, this.fy, 10, 10)
    ellipse(this.fx-4, this.fy-1, 10, 10)

    

}

function showCloud() {
    for (i = 0; i < cloud.length; i++) {
        cloud[i].cloudmove()
        cloud[i].clouddraw()
    }
}

project-09

sketch
function preload() {
    var myImage="https://i.imgur.com/0PVv59G.jpeg";
    loadedImage=loadImage(myImage);    
}

function setup() {
  createCanvas(400,400);
  background(0);
  loadedImage.resize(400,400);   
  loadedImage.loadPixels();
  frameRate(100000000000000000000000000000000000000000000000000000000000);
}

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=loadedImage.get(pixelx,pixely);    
  noStroke();
  fill(pixelcolor);    

  square(x,y,random(0,5));    


}

LO-09

I chose to look at Camille Utterback, who focuses on interactive artworks and permanent public installations, I focused on the project Precarious

Precarious was created for the National Portrait Gallery exhibition Black Out: Silhouettes Then and Now, which opened in May, 2018. Precarious is an interactive installation that extends the historical practice of tracing human silhouettes with a mechanical apparatus on a backlit screen, by instead “tracing” gallery visitors with contemporary digital tools. Utterback uses a ceiling mounted depth camera to record peoples’ silhouettes as seen from above. Her software then continually interprets and redraws this data, rendering the silhouettes not with the stark fixedness of paper cut outs, but as tremulous outlines of bodies moving through time. The painterly aesthetic of Precarious builds on the algorithmically generated visual language which Utterback has refined over many years via her custom coded interactive drawing systems.

In the Precarious system, silhouettes are never fixed. As Utterback’s software draws peoples’ outlines, each line is translated into a series of points. The points are programmed to exert an animating force on the other points, which generates ongoing momentum in the continually redrawn forms.

Precarious

LO-08

Alexander porter
I decided to learn more about Alexander Porter. Alexander is an experimental photographer. He combines an appreciation for photographic traditions with emerging computational photography and scanning methods. His work has taken him from Greece investigating the minute surfaces of artifacts, to South Korea investigating the role of video games in the lives of one of the most wired societies on earth. Alexander and James George have created DepthKit, an accessible volumetric cinema system enabling new medium for cinematic expression for the next generation of storytellers. Together they have facilitated access to this technique by teaching workshops internationally, designing open source tools for public engagement, and creating experimental films and installations. I admire how well spoken these people were in this panel. There was a lot of confidence, which made me enjoy the panel more. I thought it was interesting because they talked about virtual reality which i find very interesting.

Project-07

I chose to use two curves in my project. both are hypocycloids, which I think are very interesting curves. However, while they are both hypocycloids, they behave very differently from each other. The one in the center never overlaps itself each time it is drawn; However, each time the outer curve is drawn it crossed over itself a bunch of times due to the parameters it is given. This causes a cool effect to be visualized on the canvas. I also think the colors work well together.

sketch
var nPoints = 100;

function setup() {
    createCanvas(480, 480);
    background(200,50,86);
}

function draw() {
    
        push();
        translate(240, 240);
        Hypotrochoid();
        Astroid();
        pop();

}

function Astroid() {
    //housekeeping
    c = color(map(mouseX, 0,480, 0, 255), map(mouseY, 0,480, 150, 200),map(mouseY+mouseY, 0, 960, 0, 255))
    stroke(c);
    strokeWeight(3);
    noFill();

    //asteroid equation
    var a = int(map(mouseY, 0, width, 4, 20));
    var b = int(map(mouseX, 0, width, 0, 100));
    beginShape();
    for (var i = 0; i < nPoints; i++){
        angle = map(i, 0, nPoints, 0, radians(360));
        x = (b / a) * ((a - 1) * cos(angle) + cos((a - 1) * angle));
        y = (b / a) * ((a - 1) * sin(angle) - sin((a - 1) * angle));
        vertex(x,y);
    }
    endShape();

}

function Hypotrochoid() {
    //housekeeping
    c = color(map(mouseX, 0,480, 150, 200), map(mouseY, 0,480, 0, 255),map(mouseY+mouseY, 0, 960, 0, 255))
    stroke(c);
    strokeWeight(1);
    noFill();

    // hypotrochoid equation
    var a = map(mouseY, 0, 480, 0, 250);
    var b = 5
    var h = map(mouseX, 0, 480, 2, 105);
    beginShape();
    for (var i = 0; i < nPoints; i++ ) {
        var angle = map(i, 0, nPoints, 0, radians(360));
         x = (a - b) * cos(angle) + h * cos((a - b) * (angle / b));
         y = (a - b) * sin(angle) - h * sin((a - b) * (angle / b));
        vertex(x, y);
    }

  endShape();
}

LO-07

Jonathan Harris’s A Silent Place


The Looking Outwards topic for this week is computational information visualization. I chose to write about Jonathan Harris’s “a silent place.” A silent place is a pictographic oracle consisting of rock drawings from the Utah desert.  When Harris visited this site in Utah, he was struck by the deep silence of the ancient images, which exist beyond interpretation— their meanings can be guessed at, but can never be known.each drawing appears for 227 seconds and reappears 227 minutes later in a cycle that continues indefinitely. Harris created a Magic 8 Ball with no words, speaking out of the silence, helping people see what they already know. I admire the fact that Harris thinks that nature can have this much power over emotions. I found this project really interesting due to the abnormal use of pictures on a website. The pictures were also very cool and presented very well on the website.

an example of a picture on this site

LO-06

Karlheinz Stockhausen’s KLAVIERSTÜCK XI

I chose to write about German composer Karlheinz Stockhausen’s KLAVIERSTÜCK XI for this week’s Looking Outward assignment. Klavierstück XI consists of 19 fragments spread over a single, large page. The performer may begin with any fragment, and continue to any other, proceeding through the labyrinth until a fragment has been reached for the third time, when the performance ends. This means that there is an almost unimaginable number of versions. This huge number of options stems from the fact that it is an “open-form” composition. The nineteen fragments are then distributed over the single, large page of the score in such a way as to minimize any possible influence on spontaneity of choice and promote statistical equality. While this is not completely “truly” random, it still is similar to randomness. I think this piece by Karlheinz Stockhausen is extremely interesting and think you should look in to it more, as there is lots to learn!

6 of the 36 possible rhythm patterns from the “final matrix”.
(from Truelove’s “The Translation of Rhythm into Pitch in KLAVIERSTÜCK XI”)