Game Download

sketch

var terrainSpeed = 0.0005; //set up terrain details for the water effects
var terrainDetail = 0.005;
var smallFishs; //group for food
var fish; //main character
var sharks; 
var horses;
var smallRock;
var bigRock;
var deadImg;
var plant;
var img;
var fishImage; //set up for loading image
var sound;
var nE = 0; //number of fish eaten
var play = false;
var dead = false;
//set up coordinates for certain aspects in order to change them throughout code
var imgX = 0; 
var imgY = 0;
var textX = 450;

function preload() {

//load up the images from assets
fishImage = loadImage("assets/fish.png");
img = loadImage("assets/titl.png");
deadImg = loadImage("assets/ded.png");
bigRock = loadImage("assets/bigrock.png");
smallRock = loadImage("assets/smallrock.png");
plant = loadImage("assets/plant.png");
sound = loadSound('assets/boop.wav');
}

function setup() {
createCanvas(1000 , 600);

fish = createSprite(width/2, height/2); //spawn goldfish in the middle
//set movement limits to goldfish
fish.maxSpeed = 6; 
fish.friction = .9;
fish.setCollider();
//add the actual image into sprite variable
fish.addImage("normal", fishImage);

//set up groups 
smallFishs = new Group();
sharks = new Group();
horses = new Group();
}

function draw() {
//set up background of the game
  background(80, 80, 220);
  fill(150, 150, 0);
  noStroke();
  rect(0, 570, 1000, 100);
  image(smallRock, 1000, 490)
  push();
  scale(2);
  image(plant, 90, 255);
  pop();
  image(bigRock, 600, 480);
  image(smallRock, -250, 450);
  
//set up conditions for starting screen
if (play == false){
  image(img, imgX, imgY);
  
} else {
  drawWaves();

  fish.overlap(smallFishs, eatFish); //set up overlap for goldfish and food fish
  sharks.overlap(fish, sharkEat);
  
  //set up rotation speed / movement speed for gold fish
  if(keyDown(LEFT_ARROW)) {
    fish.rotation -= 2;
  }
  if(keyDown(RIGHT_ARROW)) {
    fish.rotation += 2;
  }
  if(keyDown(UP_ARROW)) {
    fish.addSpeed(.45, fish.rotation);
  }
  
  //come over on the other side if fish goes too far left/right
  if (fish.position.x > 1000) {
    fish.position.x = 0;
  } else if (fish.position.x < 0) {
    fish.position.x = 1000;
  }
  
  //come over on the other side if fish goes too far top/bottom
  if (fish.position.y > 600) {
    fish.position.y = 0;
  } else if(fish.position.y < 0){
    fish.position.y = 600;
  }
  
  //constantly create small fish randomly around the canvas
  if(random(0, 100) < 10) {
  var pn = random(360);
  var px = (width/2 + 1000) * cos(radians(pn));
  var py = (height/2 + 1000) * sin(radians(pn));
  createSmallFish(3, px, py);
  }
  
  //create sharks randomly but rarely
  if(random(0, 100) < 1) {
  var bn = random(300);
  var bx = (width/2 + 1000) * cos(radians(bn));
  var by = (height/2 + 1000) * sin(radians(bn));
  createShark(3, bx, by);
  }

  //constantly spawn seahorses, but rarely
  if(frameCount%70==0 & horses.length < 20) {
    createHorses(random(0,width), random(0,height));
  }
  for(var i = 0; i < horses.length; i++) {
      var sea = horses[i]; //create variable for seahorses
      sea.scale = map(sea.life, 220, 0, 1, 0); //lives for limited frames, changes sizes according to time
      sea.displace(fish); //push away and block goldfish's path
}
  drawSprites();
  text("Fishy Points: " + nE, textX, 50); //text showing current game points 
  }
}

function createSmallFish(x, y) { //function that builds small fish
  var smol = createSprite(x, y);
  var smolfish  = loadImage("assets/smallfish.png");
  smol.addImage(smolfish);
  smol.setSpeed(1, random(360));
  smol.rotationSpeed = .1;
  smol.setCollider("rectangle", 0, 0, 0, 0);
  smallFishs.add(smol);
  return smol;
}

function createShark(x, y) { //function that builds sharks
  var big = createSprite(-x, y);
  var bigShark = loadImage("assets/shark.png");
  big.addImage(bigShark);
  big.setSpeed(.5, random(360));
  big.rotationSpeed = .05
  big.setCollider("rectangle", 0, 0, 100, 10);
  sharks.add(big);
  return big;
}

function createHorses(x, y) { //function that builds seahorses with an animation that shrinks size
  var sea = createSprite(x, y);
  sea.addAnimation("horses", "assets/seahor.png");
  sea.life = 220;
  sea.rotationSpeed = .08
  sea.setCollider("rectangle", 0, 0, 0, 0);
  horses.add(sea);
}

function eatFish(fish, smallFishs) { //function to remove the small fish when overlapping as well as
  //adding on to fish eaten counter
  sound.play();
  nE += 1;
  smallFishs.remove();
}

function sharkEat(sharks, fish) {
  dead = true;
  play = false;

  if (dead == true) {
    imgX += 1000;
    imgY += 1000;
    textX += 1000;
    image(deadImg, 0, 0);
    fill(186, 217, 180);
    textSize(52.72);
    text("" + nE, 550, 321);
    noLoop();
  }
}

function keyPressed(){
  if (keyCode === 88){
    play = true;
  }
}

function drawWaves(){
  
  //wave 1
  fill(144,175,197, 60);
  beginShape();
  for (var x = 0; x < width; x++) {
      var t = (x * 0.003) + (millis() * terrainSpeed * 2);
      var y = map(noise(t), 0,1, 0, height * 0.1);
      vertex(x, y+ 1);
  }
  vertex(width,height);
  vertex(0,height);
  endShape();

  //wave 2
  fill(51,107,135, 60);
  beginShape();
  for (var x = 0; x < width; x++) {
      var t = (x * 0.003) + (millis() * terrainSpeed * 2);
      var y = map(noise(t), 0,1, 0, height * 0.1);
      vertex(x, y+50);
  }
  vertex(width,height);
  vertex(0,height);
  endShape();

  //wave 3
  fill(144,175,197, 60);
  beginShape();
  for (var x = 0; x < width; x++) {
      var t = (x * 0.003) + (millis() * terrainSpeed * 2);
      var y = map(noise(t), 0,1, 0, height * 0.1);
      vertex(x, y+65);
      if(noise(t) > 0.2){
        fill(144, 175, 197, 80);
      }
      else {
        fill(144,175,197,120);
      }
  }
  vertex(width,height);
  vertex(0,height);
  endShape();

  //wave 4
  fill(51,107,135, 60);
  beginShape();
  for (var x = 0; x < width; x++) {
      var t = (x * 0.003) + (millis() * terrainSpeed * 2);
      var y = map(noise(t), 0,1, 0, height * 0.1);
      vertex(x, y+100);
  }
  vertex(width,height);
  vertex(0,height);
  endShape();
}

The game is played by using the left / right arrow keys to change the rotation of the fish, and using the up arrow to move forward. Try to get as many points as possible by eating the smaller fish, while avoiding the angry sharks that will end the game if they touch you. The searhorses will stop your movement, so try to move around them.

Basing off how old styled games were formed, I wanted to make a game that has an unlimited ‘reward’ while having a losing condition. Using knowledge earned from the class, I was able to display and create the game I wanted to.

As a kid, I always loved playing pixel mini games. These games included a winning and losing situations, where players would try to get the highest scores they can. I want to implement a similar game that takes place underwater. Taking on the classic “grow your fish” games, the fish character would attempt to eat smaller fish while avoiding the sharks.

The players would be able to interact by controlling where the position of the fish are. As the game continues on, the rate the shark characters come out would increase as well as the speed of how fast the fish and sharks swim, making the game more challenging.

As I plan to work on an interactive pixel game, I looked at two popular games that I personally have played before: Fez designed by Phil Fish and Flappy Bird developed by dotGears.

The games definitely have their similarities. The obvious trait being the use of pixel art on both projects. The games both also create a character that is easily recognised by the audience. However, Flappy Bird can be seen as a much more simple game. While Fez requires the player to crack the puzzles by utilizing 3D-space in a 2D game world to find loops and holes, Flappy Bird only requires people to do one task of not hitting the pipes. Still, both games are challenges to their players. I look forward to creating a game of a similar caliber with a lovable character.

sketch

var circPositions = [33, 66, 132, 198, 264, 330]; //5 dots in the middle

function setup() {
  createCanvas(400, 400);
  background(0);
  frameRate(10); //reduce lag, choose frequency of updates
}

function draw() {
  fill(mouseX, mouseY, mouseY) //color interacts with mouse position
  for(var i = 1; i < 6; i++) { //create the dots
    ellipse(circPositions[i], 200, 10, 10);
  }
  for(var b = 1; b < 100; b++){ //create turtle lines / marks with loop
    var turtle = makeTurtle(circPositions[b], random(0, 400)); //set variable for turtle
     turtle.penDown();
     turtle.setColor(mouseX); //shade depending on the mouse position
     turtle.setWeight(0.1 * mouseY / 10); //changes weight depending on mouse position
     turtle.right(random(1, 360)); //mark changes depending on a random factor
     turtle.forward(3); //small mark
     
  if (mouseIsPressed === true) { //when mouse is pressed, make large web like lines
  makeTurtle(circPositions[b], 100);
  turtle.penUp();
  turtle.right(90);
  turtle.setWeight(1);
  turtle.penDown();
  turtle.forward(100);
}
     
  if (keyIsPressed === true){ //clear and reset canvas
       background(0);
}
}




// turtle graphics ----------------------------------------------
function turtleLeft(d){this.angle-=d;}function turtleRight(d){this.angle+=d;}
function turtleForward(p){var rad=radians(this.angle);var newx=this.x+cos(rad)*p;
var newy=this.y+sin(rad)*p;this.goto(newx,newy);}function turtleBack(p){
this.forward(-p);}function turtlePenDown(){this.penIsDown=true;}
function turtlePenUp(){this.penIsDown = false;}function turtleGoTo(x,y){
if(this.penIsDown){stroke(this.color);strokeWeight(this.weight);
line(this.x,this.y,x,y);}this.x = x;this.y = y;}function turtleDistTo(x,y){
return sqrt(sq(this.x-x)+sq(this.y-y));}function turtleAngleTo(x,y){
var absAngle=degrees(atan2(y-this.y,x-this.x));
var angle=((absAngle-this.angle)+360)%360.0;return angle;}
function turtleTurnToward(x,y,d){var angle = this.angleTo(x,y);if(angle< 180){
this.angle+=d;}else{this.angle-=d;}}function turtleSetColor(c){this.color=c;}
function turtleSetWeight(w){this.weight=w;}function turtleFace(angle){
this.angle = angle;}function makeTurtle(tx,ty){var turtle={x:tx,y:ty,
angle:0.0,penIsDown:true,color:color(128),weight:1,left:turtleLeft,
right:turtleRight,forward:turtleForward, back:turtleBack,penDown:turtlePenDown,
penUp:turtlePenUp,goto:turtleGoTo, angleto:turtleAngleTo,
turnToward:turtleTurnToward,distanceTo:turtleDistTo, angleTo:turtleAngleTo,
setColor:turtleSetColor, setWeight:turtleSetWeight,face:turtleFace};
return turtle;}}

I wanted to create something like a spider web using the turtle tool we were given. I allowed for two different types of art to be created. The results differ depending on the user and their mouse movements.

One of the most interesting development in recent music development is how technology has allowed new types of musicians to create a whole new genre. In the forefront of this ‘evolution’, Porter Robinson is one of the most famous up-and-coming EDM musician, DJ, and composer. By using sample sounds recorded from an instrument to a sound made purely from electronics, Porter Robinson and his assistants are able to showcase a music that would require a large amount of people to perform the piece. To add on to the previous mentioned comfort, computer generated music allows for a whole new different types of sounds to be created, whereas traditional orchestras may have limited sounds. My favorite piece from Porter Robinson is his collaboration with Madeon, Shelter. I am personally excited to see how far computer music will develop the genres.

sketch

var terrainSpeed = 0.0005;
var terrainDetail = 0.005;
var birds = [];
var redu;


function preload() { //load birds
    birdie = loadImage("https://i.imgur.com/ql6l0Rq.png")
}

function setup() {
    createCanvas(480 , 270);
    frameRate(24);

    for (var i = 0; i < 5; i++){ //set up loop for birds
        var location = random(width);
        birds[i] = makeBirds(location);
    }
}

function draw() {
    background(redu, 50, 200); 
    //call drawings
    sun();
    drawMountains();
    drawRivers();
    drawBackground();
    updateBirds();
    displayBirds();
    addBirds();
    makeBirds();
    moveBirds();

    redu = mouseY/5; //let background change depending on y
 
}
// SUN-----
function sun(){ 
  fill("red");
  ellipse(240, 135, 100, 100);

}
// BIRDS -----
function updateBirds(){
    for (var i = 0; i < birds.length; i++){
        birds[i].move();
        birds[i].display();
    }
}

function addBirds() {
    var a = random(1);
    if (a < 0.03) {
        birds.push(makeBirds(width));
    }
}

function moveBirds() { //change x of birds
    this.x += this.speed;
}

function displayBirds() { //put birds on canvas
    var birdY = 10;
    push();
    translate(this.x, this.height);
    for(var i=0; i<this.number; i++) {
        image(birdie, 10, birdY, random(10, 50), random(10, 50));
    }
    birdY += 1;
    pop();
}
 
function makeBirds(birthx) { //set up variables for birds
    var birds2 = {x: birthx,
                number: floor(random(1,2)),
                speed: -3,
                height: random(90,100),
                move: moveBirds,
                display: displayBirds}
    return birds2;
}

function drawBackground(){ //part of background color
  fill(238,238,238,100);
  beginShape();
  rect(0, 0, width - 1, height - 1);
  endShape();
}

//RIVER
function drawRivers(){
  //River 1
  fill(144,175,197,255);
  beginShape();
  for (var x = 0; x < width; x++) {
      var t = (x * 0.003) + (millis() * terrainSpeed * 2);
      var y = map(noise(t), 0,1, 0, height * 0.1);
      vertex(x, y+225);
  }
  vertex(width,height);
  vertex(0,height);
  endShape();

  //River 2
  fill(51,107,135,255);
  beginShape();
  for (var x = 0; x < width; x++) {
      var t = (x * 0.003) + (millis() * terrainSpeed * 2);
      var y = map(noise(t), 0,1, 0, height * 0.1);
      vertex(x, y+230);
  }
  vertex(width,height);
  vertex(0,height);
  endShape();

  //River 3
  fill(144,175,197,255);
  beginShape();
  for (var x = 0; x < width; x++) {
      var t = (x * 0.003) + (millis() * terrainSpeed * 2);
      var y = map(noise(t), 0,1, 0, height * 0.1);
      vertex(x, y+235);
      if(noise(t) > 0.2){
        fill(144, 175, 197, 80);
      }
      else {
        fill(144,175,197,120);
      }
  }
  vertex(width,height);
  vertex(0,height);
  endShape();

  //River 4
  fill(51,107,135,255);
  beginShape();
  for (var x = 0; x < width; x++) {
      var t = (x * 0.003) + (millis() * terrainSpeed * 2);
      var y = map(noise(t), 0,1, 0, height * 0.1);
      vertex(x, y+240);
  }
  vertex(width,height);
  vertex(0,height);
  endShape();
}

function drawMountains() {
  noStroke();
  fill(118,54,38,255);
  beginShape();
  for (var x = 0; x < width; x++) {
      var t = (x * terrainDetail) + (millis() * terrainSpeed*0.5);
      var y = map(noise(t), 0,1, 0, height*1.1);
      vertex(x, y-15);
  }
  vertex(width,height);
  vertex(0,height);
  endShape();
}

Using the moving landscapes, I wanted to display a landscape of the ocean and mountain moving. For an interesting part of the project, I added a random variation in the birds to make it seem as if the birds were flocking in the sky.

For this week’s Looking Outwards based on female artists, I looked into Angela Washko. Her works are very unique – a lot of times she is pushing our boundaries of what we can truly call ‘art’. One of the project I found intriguing was her project: “The Council on Gender Sensitivity and Behavioral Awareness in World of Warcraft”. This was a project where Washko would go into the virtual world in World of Warcraft to tell the players about feminism and gender equality. Angela Washko presented this by showcasing her discussing the issue ingame and on a projector. Personally, I found the work interesting as internet is often used as a place where people show blatant sexism and offend others, but Washko used it to attempt to educated the players. Her project can be seen here.

sketch

var jisoo;

function preload() { //load the images for underlay
    var geum = "https://i.imgur.com/tG77kDu.jpg";
    jisoo = loadImage(geum);
}

function setup() {
    createCanvas(800, 700);
    background(100); 
    jisoo.loadPixels(); //load up colors of the pixels from the photo
    frameRate(1000);
}

function draw() {
    var px = random(width);
    var py = random(height);
    var ix = constrain(floor(px), 0, width-1);
    var iy = constrain(floor(py), 0, height-1);
    var coLoc = jisoo.get(ix, iy); 

    stroke(coLoc); 
    noFill();
    ellipse(px, py, random(6, 20), random(6, 15)); //each ellipses are somewhat random to create
    //different image with a similar style

}

Using the sample code, I altered how the canvas would fill up. By using ellipses with no fill, I was able to create a sketchy yet vague paint style. By adding a random element to the code, I am able to create different results with the same style.

For this week’s Looking Outwards assignment, I looked at the writing by my close friend, Na Hyun Kim. On week 4, she looked at different types of sound arts and decided to further explore loop sounds in music. She linked the topic of sound art to something that she is interested in. She further discusses loop music by giving an example of a youtube musician who used sound loops to cover songs. This is the youtube video mentioned before, and Na Hyun’s Looking Outwards post can be found here.

While we center art on a lot of traditional style painting, drawings, and some new technology generated visual arts, Sissel Tolaas work is very interesting. In fact, it stinks. Sissel Tolas focus on scent and its ability to bring back memories. Tolaas has collected over 7000 different real scents. She believes that scent is one of the strongest image and memory provoking sense that we have. In her presentation, she showcases the variety of the scents she has collected and how they collect the scents in the first place. While Sissel Tolaas does not have a seperate artist page, she does have the smell memory kit infosite.