dnam final project

Title Page to the Game

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.

ctv Final Project

You are able to type in the box, click it to expand, and move the text box up and down!

sketch

var CONTAINERS;
var img;
var img2;
var img3;

function preload(){
    img = loadImage("https://i.imgur.com/SiATbai.png");
    img2 = loadImage("https://i.imgur.com/g9q8qO8.png");
    img3 = loadImage("https://i.imgur.com/zFUnlLi.png");
}

function setup() {
    createCanvas(800, 800);
    CONTAINERS = new aContainer();
}

function draw(){
    background('#165fa8');
    CONTAINERS.display();
}

//////Design and functionality of the text container
function aContainer() {
//////Properties for the individual container
  var state = 0;
  var txt = "";
  this.pos = 0;
  this.h = 100;
  this.color = color('#e2f0fb');
  this.shadow = 1;
  this.r = 20;
  this.txtSize = 34;

//////Save Button Dimensions
      var buttonX = 80;
      var buttonY = 40;
      var buttonX2 = 200;
      var buttonX3 = 500;
      var buttonW = 100;
      var buttonH = 40;

//////Execute the shapes and text when this is called,
//////Calls properties in the section right above
  this.display = function() {
        if(this.pos <= 0){this.pos = 0}
        if(this.pos >= 5){this.pos = 5}
        fill(this.color);
        strokeWeight(0);
        rect(80, this.pos*100+120, 640, this.h, this.r);
        fill(60);
        textSize(this.txtSize);
        textFont("Avenir");
        text(txt, 110, this.pos*100+180);
        fill(240);
        rect(buttonX, buttonY, buttonW, buttonH, 20);
        image(img, buttonX+buttonW/2-17.5, buttonY+2.5, 35, 35);
        rect(buttonX2, buttonY, buttonW, buttonH, 20);
        image(img2, buttonX2+buttonW/2-17.5, buttonY+2.5, 35, 35);
        rect(buttonX3, buttonY, buttonW, buttonH, 20);
        image(img3, buttonX3+buttonW/2-17.5, buttonY+2.5, 35, 35);
  }

//////Function is called when mouse is pressed
//////Only executes if cursor is over the container
  this.pressed = function() {
      if (mouseX > 80 & 
          mouseX < 720 && 
          mouseY > this.pos*100+120 && 
          mouseY < this.pos*100+this.h+120) {
          if(state%2 == 0){
              this.h = 500;
              state++;
          } else if(state%2 == 1){
              this.h = 100;
              state++;      
          }
     }
  }
//////Add the typed key to the string variable 'txt'
  this.keys = function(){
//////If text goes beyond specified width, put text on new line
      txt = txt + key;
      txtWid = textWidth(txt)%500;
      if(txtWid>475){
          txt+= "\n"
      }
//////If the enter key is pressed, put text on new line
      if(keyCode == 13){
          txt += "\n";
      }
//////Ability to delete a letter that is typed
        if(keyCode == 8 & txt.length>0){
            txt = txt.substring(0, txt.length - 2);
        }
  }
///////Adds abbility to press save button
  this.downButton = function(){
      if (mouseX > buttonX & 
          mouseX < buttonX + buttonW && 
          mouseY > buttonY && 
          mouseY < buttonY + buttonH) {
            this.pos++;
     } else if (mouseX > buttonX2 & 
          mouseX < buttonX2 + buttonW && 
          mouseY > buttonY && 
          mouseY < buttonY + buttonH) {
            this.pos--;
     }
  }
//////Make the text box larger
    this.expand = function(){
        if(this.h == 100){
        }
    }
}

function mousePressed(){
    CONTAINERS.pressed();  
    CONTAINERS.downButton();
}

function keyPressed() {
    CONTAINERS.keys();
}

 

 

BrandonHyun-FinalProject-SectionB

Website for actually trying the program online

 

 

 

code for Final Project

ZIP File for Final Project for 15104

The purpose of this project is to gain different interpretations about the current events by giving the users the opportunity to draw or write about the issues that are presented to them. The content that gets presented is related to current events and political status. Furthermore, I would like to develop this project so that this website can exist in the online world with different interpretations and with opinions that can reside and see different opinions visually. This would be an anonymous participation by the public so we can get honest reviews about the political atmosphere around us and what people are thinking about.

atraylor – Final Project

For my final project I made a boredom simulator. Please, enjoy the fun that awaits you in this blandly furnished room with plenty of fun and exciting activities to entertain yourself with. If you become bored, that’s okay! Just click again and find another riveting thing to do to take your mind off the boredom! Along with engaging visuals, treat your weary mind with the wondrous sounds that accompany the many fascinating capabilities of this program. You won’t be disappointed…

atraylor final project

To open this project, I suggest using a local server because it contains several sound files.

To use the simulator, click on an object to entertain yourself, once you are done, click “i’m bored” to return to the room.

jamieh-final-project

*Move mouse around canvas to move particles

*Click and/or drag to add more particles

sketch

/*
Jamie Ho
jamieh@andrew.cmu.edu
10:30
Project 12
*/

var particles = [];		//array to store circle particles
var d;					//distance between two particles
var md;					//distance between particle and 
var r = 255;
var g = 255;
var b = 255;

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

function draw(){
	background(0);
	//create particles and push into array
	p = new Particle();
	particles.push(p);
	//if mouse is pressed, then add more particles & invert background colour
	if(mouseIsPressed){
		particles.push(p);
		background(255);
	}
	//first for loop counting backwards of the array
	for(var i = particles.length-1; i > 0; i--){		
		particles[i].show();
		particles[i].update();
		//second for loop counting forwards of the array. two for loops needed to draw lines between all particles
		for(var j = 0; j < particles.length; j++){		
			//distance between two particles
			d = dist(particles[i].x, particles[i].y, particles[j].x, particles[j].y);
			//distance between particle and mouse
			md = dist(particles[i].x, particles[i].y, mouseX, mouseY);
			//if distance between two particles is less than 45 then lines will be blue and thicker
			if(d < 45){
				if(d < 25){
					stroke(102, 204, 255);
					strokeWeight(0.35);
				} else if(d < 45 & d > 25){
					//if mouse is pressed, inverse colours
					if(mouseIsPressed){
						stroke(0);
						strokeWeight(0.1);
					} else{
						stroke(255);
						strokeWeight(0.1);
					}
				}
				line(particles[i].x, particles[i].y, particles[j].x, particles[j].y);
			}
			//if the distance between particle and mouse is between range to determine whether or not to push particles away
			if(md < 50 & mouseIsPressed == false){
				if(particles[i].x > mouseX){
					particles[i].x += random(md/4, md/2);
				} else if(particles[i].x < mouseX){
					particles[i].x -= random(md/4, md/2);
				} else if(particles[i].y > mouseY){
					particles[i].y += random(md/4, md/2);
				} else if(particles[i].y < mouseY){
					particles[i].y -= random(md/4, md/2);
				}
			}
			//if the alpha is less than 0 and returns true
			//then that particle is "killed off" or removed from array
			if(particles[i].finished()){
				particles.splice(i, 1);
			}
		}
	}
}

class Particle{
	//defines locations of particles and velocities and alphas
	constructor(){
		//if mouse is pressed then particle shows up where mouse is clicked
		if(mouseIsPressed){
			this.x = mouseX;
			this.y = mouseY;
		} else {
		//otherwise anywhere on canvas
			this.x = random(width);
			this.y = random(height);
		}
		//size of particles
		this.cSize = random(2, 8);
		//velocities
		this.vx = random(-0.5, 0.5);
		this.vy = random(-0.5, 0.5);
		//brightness of circles
		this.alpha = 255;
	}
	//creates the particles
	show(){
		noStroke();
		if(mouseIsPressed){
			fill(r, g, b, this.alpha);
		} else {
			fill(255, this.alpha);
		}
		ellipse(this.x, this.y, this.cSize);
	}
	//to move the particles
	update(){
		//make particles move
		this.x += this.vx;
		this.y += this.vy;
		//conditions where if particles hit the four edges, bounce
		if(this.x > width-this.cSize/2){
			this.vx -= random(0.5, 1.5);
		} else if(this.x < 0+this.cSize/2){
			this.vx += random(0.5, 1.5);
		} else if(this.y > height-this.cSize/2){
			this.vy -= random(0.5, 1.5);
		} else if(this.y < 0+this.cSize/2){
			this.vy += random(0.5, 1.5);
		}
		//to decrease the brightness of particles
		this.alpha -= 1.25;
	}
	//to "kill off" particles
	finished(){
		return this.alpha < 0; 	//either true or false
	}
}

function mouseDragged(){
	if(particles.push(p) & mouseIsPressed){
		r = map(mouseY, 0, height, 100, 255);
		g -= random(2, 3);	
		b = map(mouseX, 0, width, 150, 255);
	}
}

For my final project, I wanted to work with objects again to become more familiar with it. I chose to use particles and linking those particles based on different conditions. The particles are also interactive so that they’re not just floating circles that move by itself randomly. And while the mouse is clicked, the colours invert to show something more geometrical based on the lines drawn between particles.

mjanco – Final Project – Section B

sketch

//Michelle Janco
//mjanco@andrew.cmu.edu
//Final Project - Section B

var fish = [];
var tree = .05;
var treeSpeed = .0009;
var lX = 300;
var song;

//yellow sky color
var yellowSkyR = 240;
var yellowSkyG = 215;
var yellowSkyB = 87;

//new sky color
var skyR = 217;
var skyG = 98;
var skyB = 88;

function setup() {
    createCanvas(640, 240);
    // create fish
    for (var i = 0; i < 5; i++){
        var rx = random(width);
        fish[i] = makefish(rx);
    }
  frameRate(30);
}

function draw() {
    background(yellowSkyR, yellowSkyG, yellowSkyB);
    displayHorizon();
    makeTree();
    updateAndDisplayfish();
    removefishThatAreOutOfView();
    addNewfishWithSomeRandomProbability();

    //change background color as mouse
    //moves across canvas
    if ((mouseX >= 640) & (mouseX <=640)){
      mouseX = 640;
  }
    if ((mouseX > 0) & (mouseX < 640)){
        yellowSkyR = mouseX*((217-240)/640) + 240;
        yellowSkyG = mouseX*((98-215)/640) + 215;
        yellowSkyB = mouseX*((88-87)/640) + 87;
    }

    //big cloud
    fill(255);
    ellipse(mouseX + 5, 55, 20);
    ellipse(mouseX + 25, 50, 35);
    ellipse(mouseX + 40, 60, 25);
    ellipse(mouseX + 55, 50, 40);
    ellipse(mouseX + 80, 50, 25);
    ellipse(mouseX + 95, 55, 15);

    //smaller cloud
    fill(255);
    ellipse(mouseX + 68, 10, 10);
    ellipse(mouseX + 80, 10, 20);
    ellipse(mouseX + 95, 10, 25);
    ellipse(mouseX + 110, 10, 30);
    ellipse(mouseX + 125, 8, 30);
    ellipse(mouseX + 140, 10, 15);
    ellipse(mouseX + 145, 10, 10);

    //smallest cloud
    fill(255);
    ellipse(mouseX + 268, 40, 10);
    ellipse(mouseX + 280, 40, 20);
    ellipse(mouseX + 295, 40, 25);
    ellipse(mouseX + 310, 40, 40);
    ellipse(mouseX + 325, 38, 30);
    ellipse(mouseX + 340, 40, 15);
    ellipse(mouseX + 345, 40, 10);
}

function mouseClicked() {
  //if mouse is inside sun, draw text
    var d = dist(mouseX, mouseY, 550, 50);
    if (d < 100) {
    showText(true);
    }
}

function showText(mouse) {
    if (mouse==true) {
      textSize(32);
      fill(0);
      text("Salmon Skies", 20, 50);
    }
}

//make trees
function makeTree() {
    noStroke();
    fill(22, 60, 28);
    beginShape();
    for (var i = 0; i < width; i++) {
        var x = (i * tree) + (millis() * treeSpeed);
        var y = map(noise(x), 0, 1, height/2, height/3);
        vertex(i, y);
    }
    vertex(width, height-height/2);
    vertex(0, height-height/2);
    endShape();
}

function displayHorizon() {
    noStroke();
    line(0,height-height/2, width, height-height/2);
    //pond
    fill(44, 80, 108);
    rect(0, height-height/2, width, height-height/2);
    //sun
    fill(240);
    noStroke();
    ellipse(550, 50, 50, 50);
}

function updateAndDisplayfish(){
    // update fish positions, display them
    for (var i = 0; i < fish.length; i++){
        fish[i].move();
        fish[i].display();
    }
}

function removefishThatAreOutOfView(){
    //if entirety of the fish are off canvas
    //then remove them
    var fishToKeep = [];
    for (var i = 0; i < fish.length; i++){
        if (fish[i].x + fish[i].breadth > 0) {
            fishToKeep.push(fish[i]);
    }
        }
  fish = fishToKeep;
}

function addNewfishWithSomeRandomProbability() {
    //small probability, add a new fish to the end
    var newfishLikelihood = 0.005;
    if (random(0,1) < newfishLikelihood) {
        fish.push(makefish(width));
    }
}

//update position of fish
function fishMove() {
    this.x += this.speed;
}

//draw the fish
function fishDisplay() {
    var fishHeight = random(10, 15);
    var fHeight = (20);
    fill(219, 97, 87, 150);
    noStroke();
    push();
    translate(this.x, height - 60);
    //fish body
    ellipse(0, -fHeight, this.breadth, fishHeight);
    fill(255);
    //fish eyes
    ellipse(-13, -fHeight, 4, 6);
    fill(0);
    ellipse(-13, -fHeight, 2, 3);
    //fish fins
    fill(219, 97, 87, 150);
    ellipse(0, -fHeight+7, 4, 8);
    fill(219, 97, 87, 150);
    ellipse(-2, -fHeight-7, 6, 8);
    fill(219, 97, 87, 150);
    arc(23, -fHeight, 30, 30, 0, HALF_PI);

    //fish reflection
    fill(219, 97, 87, 30);
    ellipse(0, fHeight, this.breadth, fishHeight);
    //reflection fish eyes
    fill(255, 30);
    ellipse(-13, fHeight, 4, 6);
    fill(0, 30);
    ellipse(-13, fHeight, 2, 3);
    //reflection fish fins
    fill(219, 97, 87, 30);
    ellipse(0, fHeight+7, 4, 8);
    fill(219, 97, 87, 30);
    ellipse(-2, fHeight-7, 6, 8);
    fill(219, 97, 87, 30);
    arc(23, fHeight, 30, 30, 0, HALF_PI)
    pop();
}

function makefish(birthLocationX) {
    var fis = {x: birthLocationX,
                breadth: 50,
                speed: -2.0,
                nlil: round(random(2,40)),
                move: fishMove,
                display: fishDisplay}
    return fis;
}

For this project, I wanted to go back to a concept that I struggled with. During the generative landscape project, I ran into quite a few problems and was not able to make an image that I found aesthetically pleasing. I wanted to return to this, and have more time to work through the concepts to be able to make something calming to watch. I am drawn to imagery that relaxes the viewer, and I imagine this is the type of image that could be watched to slow down a person’s heart rate, as the fish move at a calming pace. I love going to the lake back home with my Dad and watching the fish go by, which was always a therapeutic activity. This image in my head was what I wanted to emulate. Considering the amount of difficulty and trouble I have faced in this class, I’m glad I had extra time to really focus, take my time, and make something that feels fairly complete. I learned a lot more skills from being able to slow down and focus on these concepts.

kyungak + dayoungl – finalproject

For our final project, Sharon and I made a game named, “TOM.” In order to play TOM, users are to:

  1. Use the arrow keys (up, down, left, right) to move the main character, TOM
  2. Avoid contact with bombs – if contact is made, TOM dies and the game is over
  3. Avoid contact with puffs – if contact is made, TOM loses a point (-1)
  4. Consume hearts – if contact is made, TOM earns a point (+1)
  5. Notice: If bombs make contact with hearts, the bomb bursts and gets rid of the hearts
  6. Notice: Hearts randomly get patched across the canvas. It shrinks in size and disappears if not consumed by TOM.
  7. Notice: When the game starts, you might immediately see the game over sign because the randomly generated bombs overlap with the initial position of TOM (100,100). Don’t panic and just refresh the webpage so you can restart.

Your goal is to get as much point as possible. Compete with friends and see who can get the most points!

Please download the file and use the local file to access the html file of TOM.

PLAY ME

GRADE ME

sketch

//Kyunga Ko
//15104B
//kyungak@andrew.cmu.edu
//Capstone Project:Tom and Toms (COMPLETE VERSION)

var bomb;
var puff;
var heart;
var explosion;
var tomcharacter; 
var eating;
var gameover;
var scoreboard;
var score = 0;

function preload() {

  //Preloading gameover and scoreboard image
  gameover = loadImage("https://i.imgur.com/VlLC4xC.png");
  scoreboard = loadImage("https://i.imgur.com/8ke3Z26.png");

}

function setup() {
  createCanvas(800,800);  

  //Grouping variables
  bomb = new Group();
  puff = new Group();
  heart = new Group();
  explosion = new Group();
  tomcharacter = new Group();
  eating = new Group();

  //Create bomb at random locations on canvas
  for(var i=0; i<15; i++) {
    createBomb(random(0,width), random(0,height));
  }

  //Single character "Tom" is created
  for(var i=0; i<1; i++) {
    createTom(100, 100);
  }

}

function draw() {
  background(230);
  //Reduce the size of the heart by the rate of the frameCount
  if(frameCount%60==0 & heart.length<5) {
    //Create hearts at random locations on the canvas
    createHeart(random(0,width), random(0,height)); 
  }
  
  //Recycle puff on four sides = randomly displaced
  if(frameCount%60==0 & puff.length<10) {
    var canvasside = floor(random(0,4));
    
    if(canvasside == 0) //left
      createPuff(0, random(height));
    if(canvasside == 1) //right
      createPuff(width, random(height));
    if(canvasside == 2) //top
      createPuff(random(width), 0);
    if(canvasside == 3) //bottom
      createPuff(random(width), height);
      
    }
  
  //(BOMB) Bomb orientation in general
  for(var i = 0; i<bomb.length; i++) {
  
    var b = bomb[i];
    b.noisePosition += 0.1;
    b.rotation += (noise(b.noisePosition)-0.5)*10;
    b.setSpeed(2, b.rotation);
    randomrelocation(b);

  }
  
  //(PUFF) When puff collides with bomb and heart
  for(var i = 0; i<puff.length; i++) {
      var p = puff[i]; 
      randomrelocation(p);

      for(var j = 0; j<bomb.length; j++) {
        var b = bomb[j]; 
        //Distance btw puff and bomb
        var dis = p5.Vector.dist(p.position, b.position); 
        
        //Puff and bomb does not attract
        if(dis < 70) {   
          var angle = degrees(atan2(b.position.y-p.position.y, 
            b.position.x-p.position.x));
          //repel
          var attraction = -30 / dis;
          p.addSpeed(attraction, angle);

        }
      }

      for(var z = 0; z<heart.length; z++) {
        var h = heart[z]; 
        //Distance btw heart and puff
        var dis2 = p5.Vector.dist(p.position, h.position); 
        
        //Puff and heart attract
        if(dis2 < 30) {   
          var angle2 = degrees(atan2(h.position.y-p.position.y, 
            h.position.x-p.position.x));
          var attraction2 = 100 / dis2;
          p.addSpeed(attraction2, angle2);

        }

      }
  }

  //(HEART) When heart collides with bomb and puff
  for(var i = 0; i<heart.length; i++) {

      var h = heart[i]; //save in a temp variable
      h.scale = map(h.life, 300, 0, 1, 0);
      h.overlap(bomb, bombeatsheart);
      h.overlap(puff, puffeatsheart); 

  }

  //(TOM) When Tom collides with bomb and heart
  for(var i = 0; i<tomcharacter.length; i++) {

    var t = tomcharacter[i]; //save in a temp variable
    t.overlap(bomb, bombmeetstom); 
    t.overlap(heart, heartmeetstom);
    t.overlap(puff, puffmeetstom);
   
  }

  //Scoreboard
  image(scoreboard, 580, 15); //Scoreboard image
  textSize(30);
  fill(0); 
  text(score,670,90); //Displays the score

  //Draws all sprites
  drawSprites();

}

//Makes Tom move up, down, left, right using the arrow keys
function keyPressed(){
  var tab = 20;
  var clickCount = 0;

  for (var i = 0; i<tomcharacter.length; i++ ){
    var t = tomcharacter[i];

    if (keyIsPressed === true){
      clickCount ++; //clickcount increases with movement
    }

    if (keyIsDown(LEFT_ARROW)){
      t.position.x -= tab; //left
    }

    if (keyIsDown(RIGHT_ARROW)){
      t.position.x += tab; //right
    }

    if (keyIsDown(UP_ARROW)){
      t.position.y -= tab; //up

    } else if (keyIsDown(DOWN_ARROW)){
      t.position.y += tab; //down
      }
    
  }
  
}

//The object dissapears outside the canvas and is randomly located again
function randomrelocation(w) {
   //wrap around the screen
    if (w.position.x > width)
      w.position.x = 0;
    if (w.position.x < 0)
      w.position.x = width;
    if (w.position.y > height)
      w.position.y = 0;
    if (w.position.y < 0)
      w.position.y = height;

}

//When puff eats the heart, they multiply x2 
function puffeatsheart(puff, heart) {
  puff.remove();
  createPuff(heart.position.x, heart.position.y);

}

//When Tom meets puff, score decreases by one
function puffmeetstom(puff, tomcharacter) {
  tomcharacter.remove();
  score--;

}

//Bomb eats/gets rid of the heart + explosion sign
function bombeatsheart(bomb, heart) {
  bomb.remove();
  createExplosion(heart.position.x, heart.position.y);
  createExplosion(heart.position.x, heart.position.y);
  createExplosion(heart.position.x, heart.position.y);
  createExplosion(heart.position.x, heart.position.y);
  createExplosion(heart.position.x, heart.position.y);
  createExplosion(heart.position.x, heart.position.y);
  createExplosion(heart.position.x, heart.position.y);
  

}

//Tom eats heart and +1 sign comes up
function heartmeetstom(heart, tomcharacter) {
  tomcharacter.remove();
  aftereatingheart(heart.position.x, heart.position.y);
  score++;
  
}

//When bomb meets Tom, Tom dies and game over sign comes up
function bombmeetstom(bomb, Tom) {
  bomb.remove();
  noLoop();
  push();
  scale(0.7);
  image(gameover, 175, 400);
  pop();

}

//Bomb is created
function createBomb(x, y) {

  var b = createSprite(x, y);
  b.addAnimation("bomb", "https://i.imgur.com/N4m1kty.png");
  b.setSpeed(2, random(0,360));
  b.noisePosition = random(0, 1000);
  b.maxSpeed = 2;
  bomb.add(b);

}

//When bomb eats heart, explosion is created to indicate that a heart was ate
function createExplosion(x, y) {

  var e = createSprite(x, y);
  e.addAnimation("bomb", "https://i.imgur.com/wzVAcbK.png");
  e.setSpeed(2, random(0,360));
  e.noisePosition = random(0, 1000);
  e.maxSpeed = 2;
  explosion.add(e);

}

//After Tom eats heart, +1 sign is created
function aftereatingheart(x, y) {

  var a = createSprite(x,y);
  a.addAnimation("eat", "https://i.imgur.com/b9C1Xyl.png");
  a.setSpeed(2, random(0,360));
  a.noisePosition = random(0, 1000);
  a.maxSpeed = 2;
  eating.add(a);

}

//Puff is created
function createPuff(x, y) {

  var p = createSprite(x, y);
  p.addAnimation("puff", "https://i.imgur.com/cs8Mkcr.png");
  p.setSpeed(-2, random(0,360));
  p.maxSpeed = 1;
  puff.add(p);

}

//Heart is created
function createHeart(x, y) {
  
  var h = createSprite(x, y);
  h.addAnimation("heart", "https://i.imgur.com/u2uRAYl.png");
  h.life = 300; 
  heart.add(h);

}

//Tom is created
function createTom(x, y) {

  var t = createSprite(x, y);
  t.addAnimation("tomcharacter", "https://i.imgur.com/Q8FnPtP.png", 
    "https://i.imgur.com/QzOR227.png");
  tomcharacter.add(t);

}

















Yoonseo1- Final project

TURN UP YOUR SOUND!

My exploration on the final project was on illustrating the beauty of space and exploration. I tried on how to create 3D experience in p5.js. I have successfully developed beginning exploration scene with
interaction between characters, but I could not get to the next part, which character is visible and exploring the foreign planet. I am still very satisfied with what I came up with.
Some sound effects are from free-sound effects and music from No Man’s Sky.

Press ENTER to continue on dialogues and Scripts.
Animation below will tell you control, but in case you miss it.
W to raise speed and S to lower speed.
Enjoy!

Beginning of Space Exploration

//Name: Yoonseo(Dave) Choi
//Andrew ID: yoonseo1
//15-104: final project
//Space exploration 
stars = [];
stars.length = 2500;
var speed = 1; var ox;var oy;var nx;var ny;var Sspeed;var galaxy;var planet1;
var ship; var dTodestine; // distance left to planet
var arrive = false; var dialoague = true; var main = true; var control = true;
var imgplanet;
var pr = 0; // planet raito
var startup = false; var Onwarp = false; var durWarp = false; var off = false;
var counter = 0; //counter for the string output
var warp; var end; var engine; var starthyp;
var fcount=0; // custom frame count
var tposx; var barh; var slow;
var tposy; var tboxx; var tboxy; var dstart = true; 
var BGM;
var currentText; 
var num = 0; // for calling dialogues
var diagarray = []; //array for dialogues
var diagCount = 13; // total dialogues
var monologues = false; // monologue boolean
var comm = true;  // communication boolean
var portrait = []; // portrait animation calling
var monoarray = []; // monologue array 
var monotext; // current monologues
var monocount = 4; // total monologues
var nnum = 0; //calling monologues
var crystal; // crystal image
var aimOn = false;  // boolean for aim setting
var crossline; //cross line image
var da = 0; // darkness level for the black out later. 
var distort1;
var distort2;
var distort3;
var distort4;
function preload(){
		//Sound calling

		BGM = loadSound("https://courses.ideate.cmu.edu/15-104/f2017/wp-content/uploads/2017/12/BGM.mp3"); //back ground music
		warp = loadSound("https://courses.ideate.cmu.edu/15-104/f2017/wp-content/uploads/2017/12/warp.wav"); //warping sound
		end = loadSound("https://courses.ideate.cmu.edu/15-104/f2017/wp-content/uploads/2017/12/End.wav"); // end of warping sound
		starthyp = loadSound("https://courses.ideate.cmu.edu/15-104/f2017/wp-content/uploads/2017/12/hyps-2.wav"); // beginig of warping
		engine = loadSound("https://courses.ideate.cmu.edu/15-104/f2017/wp-content/uploads/2017/12/engine-start-2.wav"); // engine sound 
		IamHere = loadSound("https://courses.ideate.cmu.edu/15-104/f2017/wp-content/uploads/2017/12/Arrived.mp3"); // when arrived to planet
		Digital = loadSound("https://courses.ideate.cmu.edu/15-104/f2017/wp-content/uploads/2017/12/Typing.wav"); // typing sound
		Intro = loadSound("https://courses.ideate.cmu.edu/15-104/f2017/wp-content/uploads/2017/12/Intro-theme.wav"); // intro main sounds
		Message = loadSound("https://courses.ideate.cmu.edu/15-104/f2017/wp-content/uploads/2017/12/message-receive.wav"); // coordinate exchange
		slow = loadSound("https://courses.ideate.cmu.edu/15-104/f2017/wp-content/uploads/2017/12/engine-back.wav"); // deceleration 

		crossline = loadImage("https://i.imgur.com/hbpD5CT.png"); 
		crystal = loadImage("https://i.imgur.com/sm0Kud3.png");
		galaxy = loadImage("https://i.imgur.com/59T2snK.jpg");
		ship = loadImage("https://i.imgur.com/vIFxRkT.png");
		warpped = loadImage("https://i.imgur.com/gjcQn7H.jpg"); // altered space image
		imgplanet = loadImage("https://i.imgur.com/Je1AEea.png"); // planet image

		// portrait animation call
		distort1 = loadImage("https://i.imgur.com/gXjhgGZ.png");
		distort2 = loadImage("https://i.imgur.com/rx5N8wr.png");
		distort3 = loadImage("https://i.imgur.com/OGEuf4o.png");
		distort4 = loadImage("https://i.imgur.com/oi7RWEZ.png");
		
		portrait.push(distort1);
		portrait.push(distort2);
		portrait.push(distort3);
		portrait.push(distort4);

		//calling the dialogues and monologues. 
		
		for (var i =0; i < 13; i ++){ // calling dialogues 
		diagarray.push(loadStrings('https://courses.ideate.cmu.edu/15-104/f2017/wp-content/uploads/2017/12/info'+ i + '.txt'));
		}
		for (var m = 0; m < 4; m ++){ // calling monologues
		monoarray.push(loadStrings('https://courses.ideate.cmu.edu/15-104/f2017/wp-content/uploads/2017/12/mono'+ m +'.txt'));
		}
}
function setup() {
  createCanvas(480, 480);
  background(0);
  Intro.loop();	//BGM play
  tposx = width-200; // setting position for the text
  tposy = 100;
  tboxx = 200;
  tboxy = height/2;
  currentText = diagarray[0];
 	for (var i = 0; i < stars.length; i++){ //array for creating stars
 		stars[i] = new makeStar();
 	
 	}
}
function makeStar() {
	var star = { 	x : random(-width,width),  // random position in X
					y : random(-height,height), // random position in Y
					z : random(width), // for acceleration of stars
					pz: this.z,
					R : random(100,255), //colors
					G : random(150,200),
					B : random(150,255),
					update: starupdate,
					Display: starmake

				}
				return star;
}
function approach(x,y,x2,y2){ // displaying planet

	image(imgplanet,x,y,x2,y2)
}
function UD(spe){ // displaying speed meter
	textAlign(CENTER);
	textSize(10);
	stroke(0,255,0);
	text("Speed Meter",width-40,height/2+60);

	noFill();
	stroke(0,255,0)
	rect(width-50,height/2+50.5,25,-51)
	fill(255,0,0);
	noStroke();
	rect(width-49.5,height/2+52,25,spe);
	noFill();
}
function starmake(){ // creating starts
		
		fill(this.R,this.G,this.B,aplh); //fill with colors
		noStroke(); 
		var sx = map (this.x/this.z,0,1,0,width); // x movement of stars 
		var sy = map(this.y/this.z,0,1,0,height); // y movement of stars 
		var r = map (this.z,0,width,10,0); // raidus change so it gets large as user get closer
		var aplh = map (this.z,0,width,10,700) // alpha level 
		if (Sspeed < 34){ // while it is not warping
		ellipse(sx,sy,r,r); //creating visible stars
		fill(255,255,255);
		ellipse(sx,sy,r/2,r/2)
	}
	else if (Sspeed >= 34){ // if in state of warpping
			var px = map (this.x/this.pz,0,1,0,width); // get the x 
			var py = map(this.y/this.pz,0,1,0,height); // get the y 
			this.pz =this.z; // update z 
			stroke(255)
			line(px,py,sx,sy); //create line from previous stars to current creating lines
		}
	
}
function starupdate(){
	this.z = this.z -Sspeed; // movement of the stars based on the speed of the ship.
	if (this.z < 1){ // if it is out set new position to it. 
		this.z = width; 
		this.x = random(-width,width);
		this.y = random(-height,height);
		this.pz = this.z;
	}
}
function keyReleased(){ // preventing constant sound creation. 
	// W = 87, S =83
	if (keyCode === 87 & Onwarp == false && dialoague == false){
		engine.stop(); // engine stop when up arrow is disabled
	}
	if (keyCode === 83 & Onwarp == false && dialoague == false){
		slow.stop(); // decelerating sound stop 
	}
}
function keyPressed(){
	if (keyCode === 87  & Onwarp == false && dialoague == false){
		engine.loop(); // when up is pressed, engine creates sound
	}
	if (keyCode === 83 & Onwarp == false && dialoague == false){
		slow.loop(); // when down is pressed slow 
	}
	if (keyCode === 13 & dialoague == true && frameCount/5 > 60){ // for dialogues when enter is pressed. 
		
		diagCount -= 1; // keep track of dialogues
		num += 1; // move on to next line
		currentText = str(diagarray[num]); // current text set to next line  
		counter = 0; // counter set to 0 every time enter is pressed 
		if(num > 13){ // preventing error lines appearing 
			num = 13; 
		}
		
		if (num< 13){ // prevent playing sound at the end of line
		Digital.play();
		}
		if (num == 6){ // alarams the coordinate message
			Message.play();
		}

	}
	if ( keyCode === 13 & monologues == true){ // when enter pressed on monologues part
		monocount -= 1; // track of monologues 
		nnum += 1; //move on to the next lien 
		counter = 0; // reset counter 
		monotext = str(monoarray[nnum]); // set current monologues 
		if (nnum == 3){ // when at the last line play 
			Digital.play();
		}
		if (nnum > 3){ // prevent error in monologues message 
			
			nnum = 3
			monologues = false; 
		}
		if (nnum < 3){ // prevent playing sound at the end of line 
			Digital.play();
		}
	}
}
function draw() {
	noCursor(); // no cursor 
	rectMode(CORNER); // rectangle set corner to default 
	barh = -map(Sspeed,0,27,0,40); // tracking the speed of the ship for speed meter
	engine.setVolume(0.3); // set volumes of sounds 
		starthyp.setVolume(0.1);
		warp.setVolume(0.3);
		end.setVolume(0.3);
		slow.setVolume(0.3);
		 var  f = frameCount % 3; //getting the timing for the frame.  
	if (main == true){ // in main screen. 
		textAlign(CENTER); // Set the text in the center
		background(0); // back ground to black 
		fill(255); // fill the text with white for lcontrast 
		textSize(50); // set the size of the test to be 50. 
		text("Start Exploration?", width/2, height/2 -100); // starting sentence 
			if (frameCount % 30 == 1 || frameCount % 30 == 2 || frameCount % 10 == 3){
			fill(0);
			}
			textSize(20);
			text("Press S to Start",width/2, height/2 + 100); // display blinking effect of the satar
				if(keyCode == 83){
					Intro.stop();
					BGM.loop(); // let the BGM loop at the main screen., 
				main = false;
				}
	}
	if (arrive == false & main == false){ // when the main screen is off and moved to the actual game

		fcount += 1; // custom frame count
		background(0); //set back ground to black 
		image(galaxy,0,0); // display the galaxy image
 
    	if ( dialoague == false){ // i f dialogues to false 
    		background(0); // set back ground to black 
			image(galaxy,0,0); //show space image 
    	}
		if (keyIsDown(87) & control == true && dialoague == false){
		
			speed += 1; //raise speed
			}
		if (keyIsDown(83) & control == true && dialoague == false){
			speed -= 1; // reduce speed 
			}
			Sspeed = map(speed,0,100,0.5,20); // factor of speed 
		if (Sspeed < 0){
			Sspeed = 1;// not letting speed to go under 1
			}
		if (Sspeed > 40){
			Sspeed = 40; // maximum speed limit 
			}
		
		if (Sspeed >= 27){ 
			Sspeed += 8 // let speed to go up automatic for warp. 
			}
		if (Sspeed >= 27 & Onwarp == false){ // set warp true and play warpping sounds
			Onwarp = true; // this is to prevent sounds to play constantly
			engine.stop();
			starthyp.play();
			}
		if (Sspeed >= 34 & durWarp == false){ // when the speed is greater than 34, warp initiates
			warp.loop();
			durWarp = true; //allows star to be lines for faster movment visual
			}
		if (Sspeed >= 34){
			image(warpped,0,0); //back ground image alters 
			aimOn = false; 
			control = false; //not allowing user input 
		}
	push();
	translate(width/2,height/2);
for(var i = 0; i < stars.length; i ++){ // putting stars into display 
		stars[i].update();
		stars[i].Display();
	}
	
	pop();
	if (aimOn == true){
	//image(crossline,mouseX-crossline.width/2,mouseY-crossline.height/2);	
	}
	UD(barh); //display HUD 

	if (Sspeed <34){ // allow sHUD to be displayed before warp
		UD(barh)
	image(ship,0,0);
	}else if (Sspeed >= 34){
		UD(barh)
	dTodestine -= 10;
	image(ship,random(-5,0),random(-5,0)); //during warp ship shakes 
	}
	if ( fcount/5 > 60 & dstart == true){ // begining scene start
			Digital.play();
			dstart = false; 
		}
		if ( fcount/5 > 60){ // start of the dialogues
		counter += 1; //start counter for the string output speed
		textSize(20); // set size of text 
		if (num == 9){ // no more animation at dialogue 9 
			comm = false;
		}
  		if (num > 1 & comm == true){  // show animation 
  			image(portrait[f],350,0,100,100);
  		}
  		if (dialoague == true){ // when the dialogue is true 
  		for(var t =0; t < currentText.length; t ++){
  			fill(255,0,0);
  			if (num == 1 || num == 3||num == 5 || num == 7 || num == 9){ // protagonist commentary
  				fill(255,255,0);
  				textAlign(CENTER);
  				text(
    				currentText[t].substring(0, counter),
    				70,height/2+50,350,100);
    	
  			}else{
  			textAlign(LEFT);
  			text(
    				currentText[t].substring(0, counter), //info/ N's commentary
    				tposx,tposy,tboxx,tboxy);
  				}
 
  			}
    	if (diagCount ==0){// if reached to end of dialogue
    		counter =0; //reset 
    		dialoague = false; 
    		dTodestine = 7000; //set distance to the planet
    		diagCount = -1; // not letting any overlap of numbers
    		aimOn = true;
    		
    		}
    	}
    }
	}
	if (dTodestine < 800 & off == false){ //one time running codes 
		monologues = true;
		BGM.stop();
		IamHere.play(); //arriving sound
		warp.stop();
		Digital.play();
		end.play(); // end warp sound
		monotext = monoarray[0];
		off = true;
	}
	if (dTodestine < 800){
		pr += 0.25
		ox = width/2-pr;
		oy = height/2-pr;
		nx = pr*2
		ny = pr*2;
		approach(ox,oy,nx,ny) // set the planet to get large as it approaches
		control = false; //no control input
		speed -= 3; // slow down after warp 
	if (Sspeed <34){
		UD(barh);
		image(ship,0,0);
		dTodestine -= 0.75; // set distance reduce amount 
	}
	}

	if ( dTodestine < 800 & monologues == true){ //monologues display 
			textSize(20);
				for(var t =0; t < monotext.length; t ++){
  				fill(255,0,0);
  			
  				fill(255,255,0);
  				textAlign(CENTER);
  				text(
    			monotext[t].substring(0, counter),
    			70,height/2+50,350,100);
  				}
			}
	

	if (dTodestine < 100){ //if get close to planet
		da += 10;
		fill(0,da); //black out start  
		rect(0,0,width,height)

	}
	if (dTodestine  < 0){
		arrive = true; //arrive to true
		dTodestine = 0;  
		speed = 0;
		monologues = false;
		clear(); //reset the scene
		background(0);
		fill(255);
		textSize(40);
		textAlign(CENTER);
		text("...To Be Continued....",width/2,height/2); // message for continued 
}
}

Looking Outwards 11

I saw Ryoji Ikeda perform Supercodex Last year, and it was an intense experience. Although his piece was a performance, it was not a musical composition. He used data sets to inform the music and visuals that created the piece. The sound aspect was created entirely by clicks, and each click was distinguishable at the beginning of the piece. As the piece progressed, the click-frequency increased, and became keyed (and un-keyed) tones. Ikeda does not reveal much of his process, but it was clear he was manipulating and abstracting the input data to control and sway the crowd. One part that was neat was to hear the transformation from single clicks into “continuous” square waves. It was beneficial to hear that transformation because it was a good primer for talking about a computer’s process for breaking songs down into samples. Ryoji Ikeda is intense and loud.

Looking Outwards 10

Eva Mattes is an artist living in New York. One project on her website that caught my eye is titled Life Sharing. For the project, she opened the contents of her personal computer to a public internet server. This project is interesting because she places trust in the public to find interest in her personal life. With the piece she comments on privacy, saying that it’s stupid; she blurs the line of visibility of peoples lives. The piece originally is from 2001, just after the turn of the century, but well into the digital age. Mattes is an artist originally from Italy.

http://0100101110101101.org/