To play, use the array keys to move the player(waiter) to left,right,up and down. And you may use space bar to create bullets(hamburger). If the waiter collides with the burger, the game is over.

sketch

//Min Young Jeong
//mjeong1@andrew.cmu.edu
//section A
//Final Project

var screenwidth = 500;
var screenheight = 300;
//setting up three functions each for the player,bullets,and targets
//waiter(player)

var waiter = {
    x : 280,
    width : 60,
    y : 240,
    height: 60,
    draw : function(){
        image(img_waiter, this.x, this.y, this.width, this.height);
    }
}

//burger
var burger  = [];
function Burger(I){
    I.active = true;
    I.x =random(500);
    I.y = 0;
    I.width = 50;
    I.height = 50;
    I.speed = 2;
    I.inBounds = function(){
        return I.x >= 0 & I.y >= 0 && I.x < screenwidth - I.width && I.y < screenheight - I.height;
    }
    I.draw = function(){
        image(img_Burger, I.x, I.y, I.width, I.height);
    }
    I.update= function(){
        I.active = I.active & I.inBounds();
        I.y += I.speed;
    }
    return I;
}

//Coke(bullets)

var coke = [];
function Coke(I){
    I.active = true;
    I.x = waiter.x;//use the same x and y for the initial origin point
    I.y = waiter.y;
    I.width = 30;
    I.height = 30;
    I.speed = 20;
    I.inBounds = function(){
        return I.x >= 0 & I.y >= 0 && I.x < screenwidth - I.width && I.y < screenheight -  I.height;
    }
    I.update = function(){
        I.active  = I.active & I.inBounds();
        I.y -= I.speed;
    }
    I.draw = function(){
        image(img_Coke, I.x, I.y, I.width, I.height);
    }
    return I;
}

//shooting function

function shooting(Burger, Coke){
    return Coke.x + Coke.width >= Burger.x & Coke.x < Burger.x + Burger.width &&
            Coke.y + Coke.height >= Burger.y && Coke.y < Burger.y + Burger.height;
}
//canvas functions 
var img_Burger, img_waiter, img_Coke,img_background;
var score = 0;

function preload(){
    img_Burger = loadImage("https://i.imgur.com/4qXtEIR.png");
    img_waiter = loadImage("https://i.imgur.com/7IGyR4c.png");
    img_Coke = loadImage("https://i.imgur.com/ugtVBKn.png");
    img_background = loadImage("https://i.imgur.com/eHRSSik.jpg");
}//preloading images for each characters

function setup(){
    createCanvas(screenwidth, screenheight);
    noCursor();
}

function draw(){
    clear();
    image(img_background,0,0);
    fill(0);
    text("score : " + score, 10, 10);
    if(keyIsDown(LEFT_ARROW)){
        if(waiter.x-5 >= 0)
            waiter.x -= 5;
        else
            waiter.x = 0;
    }//left key to move the player to the left 
    if(keyIsDown(RIGHT_ARROW)){
        if(waiter.x + 5 <= screenwidth-waiter.width)
            waiter.x += 5;
        else
            waiter.x = screenwidth - waiter.width;
    }//right key to move the player to the right
    if(keyIsDown(UP_ARROW)){
        if(waiter.y-5 >= 0)
            waiter.y -= 5;
        else
            waiter.y = 0;
    }//upward key to move the player upward
    if(keyIsDown(DOWN_ARROW)){
        if(waiter.y + 5 <= screenheight-waiter.height)
            waiter.y += 5;
        else
            waiter.y = screenheight - waiter.height;
    }//downward key to move the player downward 
    if(keyIsDown(32)){
        coke.push(Coke({}));
    }//space to make bullets moving upward
    waiter.draw();//draw waiter

    coke.forEach(function(Coke){
        Coke.update();
        Coke.draw();
    });

    if(Math.random()<0.05){
        burger.push(Burger({}));
    }
    burger = burger.filter(function(Burger){
        return Burger.active;
    });
    burger.forEach(function(Burger){
        Burger.update();
        Burger.draw();
    });

    coke.forEach(function(Coke){
        burger.forEach(function(Burger){
            if(shooting(Burger, Coke)){
                Burger.active = false;
                Coke.active = false;
                score++;
            }
        });
    });

    burger.forEach(function(Burger){
        if(shooting(Burger, waiter)){
            Burger.active = false;
            noLoop();
            textSize(100);
            fill(0);
            text("TOO FULL", 10, 150);
        }
    });
}

For this assignment, I explored the forEach function for the array of bullets and targets and how they collide each other in order to disappear. I also played with the inserting image files into the js file.

Project Name: Feeding Packman

For final project  I am creating a shooting game. I want to combine packman game and 2D shooting game. The gamer has only two controls (mouse location on horizontal direction and key press to create the bullets or foods for packman). As we press key to create the foods(bullets) and shoot, the user has to control mouse to locate the position of ball shooting. The users have to aim at targeted packman to feed it. As we feed packman, packmans may want to disappear because they had enough food and want to leave. We have to continuously feed new comers. As we lever up, the bigger, and more starving packmans will come. They need more foods because they are hungrier than the previous packmans. Feeding them before they touch the bottom line is getting hard as more and hungrier packmans are coming to get foods. When the user fail to feed 5 packmans then the game is over.

I think key park for this game will be how we use the function of mouse press and location of mouse on the horizontal direction and I am also hoping to make the game graphically attractive by using many drawing and coloring commands.

“Swipe Brick Breaker” by Monthly 23 (Yoonsup Choi)

In research for my precursor project, I decided to compare different app games that have been popular among my friends. First game, Swipe Brick Breaker is a simple and very addictive game that I recently fell in love. Swipe Brick Breaker is a mobile app game developed by Monthly 23. Monthly23(Yoonsup Choi) is independent one man developer who release game every month. He makes addictive minimalist game for all ages. I like how he creates interesting game with simple geometry and simple rules. The rule for this game is simply swipe to shoot balls to break bricks. When the ball hits the brick, durability is reduced. When durability reduce to 0, brick breaks. You should get the green circle to increase the number(power) of balls. When the bricks reach the bottom line, game is over.

link to appstore for brick breaker

“Ready Steady Bang” by  The Cowboy

Second game that I looked into is “Ready Steady Bang” by The Cowboy Games limited. Ready Steady Bang is a simple shooter game, perfect for gamers who love the minimalist approach.This black and white cartoon-like dueling game has players tap their side of the screen as soon as the countdown is finished. The twist? The “bang” happens at random intervals, meaning you have to wait to hear it before you can pull the trigger. This game relies on pure speed and reflexes and is perfect to play with a friend. Although, it does have a single-player mode that increases difficulty as you progress further.

link to ready steady bang

Key part I like the most about the first game is calculating reflection angle with the bouncing wall. Second game is interesting because it requires perfect timing when the shooting is required. I like how both of them take minimalist approach to its design and  operation. I also like how they rely on simple “tapping” or “pressing” instead of complex control keys or mouse control. For my final project I want to combine two project to create minimalist shooting game. I initially took a idea of shooting and aiming method from the ready steady bang. Like brick breaker game, I want to create a game that people have to aim precisely at target object and calculate the reflection angle with the edges of the canvas to make a shoot.

sketch

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;
}

var positionx = [];
var positiony = [];
function setup() {
  createCanvas(480,480);
  background(255,0,0,100);

}
function draw() {
  for (var x=0; x<positionx
  .length; x++){
    var turtle = makeTurtle(positionx[x], positiony[x]);
  turtle.setColor(random(100));
    for (var i=0; i<20; i++) {
        turtle.penDown();
        turtle.forward(random(60),100);
        turtle.right(141.5);
        turtle.forward(random(60));
      
      turtle.penUp();
      turtle.x = positionx[x];
      turtle.y = positiony[x];
    }
  }
}

function mousePressed(){ 
  positionx.push(mouseX);
  positiony.push(mouseY);
}

For this assignment I wanted to create interactive art work using turtle graphics. For each mouse click, new geometry will appear with glittery effect created by random command.

“Bicycle for Two” by Max Mathews(1962)

Max Mathew is one of the early pioneers of Computer Music. He studied electrical engineering at California Institute of Technology and MIT. He developed Graphic 1, an interactive graphic sound system on which one could draw figure with light pen which can be converted into sound. This simplified the process of composing computer generated music. He also developed GROOVE, a first fully developed music synthesis system for interactive composition and realtime performance using 3C/Honeywell minicomputers. Through his inventions, he showed his admiration to live performance and his interest in what a computer can do to aid a performer. He made a controller, the Radio-Baton, to provide new ways for interpreting and performing traditional scores.

“Daisy Bell” is the most famous music composed by Mathews. In 1961,  He arranged accompaniment of the song by computer synthesized human voice through technology developed by John Kelly. My favorite music composed by Max is “Bicycle for two” because it has simple melody and rhythm that I enjoyed and I admire how Max use computer software to generate music based on compositional algorithm.

link to max mathews

sketch

var terrainSpeed = 0.001;
var terrainDetail = 0.009;
var terrainDetail2 = 0.003;
var stars = [];
var clouds=[];

function setup() {
    createCanvas(500,500);
    frameRate(10);
    for (var s = 0; s < 3000; s++) {
        stars.push(new Star());
    }
    //array for stars
    for (var i = 0; i < 10; i++){
        var rx = random(width);
        clouds[i] = makeCloud(rx);
    }
    //array for clouds
}


function draw() {
    stroke(255);
    strokeWeight(3);    

    var bgColor2 = color(164,174,224);
    var bgColor1 = color(66, 38, 89);
    gradient(0,0,width,height,bgColor1,bgColor2);
    //draw background gradient
    DrawStar();
    drawmountains();
    updateAndDisplayClouds();
    removeCloudsThatHaveSlippedOutOfView();
    addNewCloudsWithSomeRandomProbability();
    train();
}

function Star() {
    //randomized stars

    this.x = random(width);
    this.y = random(height);
    this.di = random(0,1);
    this.speed = 0.5;
    this.border = random(0, 0.3);
    this.vol = 0; 
    this.move = function() {
    this.x += random(-this.speed, this.speed + this.vol);
    this.di = this.di +this.vol;
    var prob = random(0, 1);
    if (this.di <= 0.16) {
      this.vol = 0.001;
    }else if(this.di>=0.16){
    this.vol=0;}

  }

  this.display = function() {
    strokeWeight(this.border);
    stroke(255);
    fill(255);
    ellipse(this.x, this.y,  this.di,  this.di);

  }
}

function DrawStar() {
  for (var i = 0; i < stars.length; i++) {
    stars[i].move();
    stars[i].display();
  }
}


function gradient(x,y,wid,y2,c1,c2){
    noFill();
    for (var i = y; i < y+y2; i++){
        var inter = map(i,y,y+y2,0,1);
        var col = lerpColor(c1,c2,inter);
        stroke(col);
        line(x,i,x+wid,i);
    }

}
function drawmountains() {
    noStroke();
    fill(232,183,239,100);
    beginShape();
    for (var x=0; x < width; x++){
        var t = (x * terrainDetail) + (millis() * terrainSpeed);
        var y = map(noise(t), 0,1, 0, height*0.6);
        vertex(x, y+100); 
    }
    vertex(width,height);
    vertex(0,height);
    endShape();
    fill(163,123,186,100);
    beginShape();
    for (var x=0; x < width; x++){
        var t = (x * terrainDetail2) + (millis() * terrainSpeed);
        var y = map(noise(t), 0,1, 0, height*0.7);
        vertex(x, y+200); 
    }
    vertex(width,height);
    vertex(0,height);
    endShape();
    fill(153,71,117,100);
    beginShape();
    for (var x=0; x < width; x++){
        var t = (x * terrainDetail2) + (millis() * terrainSpeed);
        var y = map(noise(t), 0,1, 0, height*0.1);
        vertex(x, y+400); 
    }
    vertex(width,height);
    vertex(0,height);
    endShape();
}

function updateAndDisplayClouds(){
    for (var i = 0; i < clouds.length; i++){
        clouds[i].move();
        clouds[i].display();
    }
}


function removeCloudsThatHaveSlippedOutOfView(){
    
    var cloudsToKeep = [];
    for (var i = 0; i < clouds.length; i++){
        if (clouds[i].x + clouds[i].breadth > 0) {
            cloudsToKeep.push(clouds[i]);
        }
    }
    clouds = cloudsToKeep; // remember the surviving clouds
}


function addNewCloudsWithSomeRandomProbability() {
    
    var newBuildingLikelihood = 0.007; 
    if (random(0,1) < newBuildingLikelihood) {
        clouds.push(makeCloud(width));
    }
}

function buildingMove() {
    this.x += this.speed;
}
    


function buildingDisplay() {
    var floorHeight = 10;
    var bHeight = this.nFloors * floorHeight; 
    
    fill(255,90); 

    push();
    fill(255,20)
    translate(this.x, height - 40);
    ellipse(30, - bHeight -200, this.breadth, bHeight);
    pop();
}


function makeCloud(birthLocationX) {
    var bldg = {x: birthLocationX,
                breadth: random(100, 300),
                speed: -random(1,3),
                nFloors: round(random(2,10)),
                move: buildingMove,
                display: buildingDisplay}
    return bldg;
}

function train() {
    fill(106,67,132);
    for (var i = 0; i < 3; i++){
        rect(i * 105,400,100,50);
        push();
        fill(255,206,173);
        rect(i * 105 +10,405,80,20);
        pop();
        beginShape();
        vertex(305,400);
        vertex(305,400);
        curveVertex(325,410);
        curveVertex(345,430);
        curveVertex(350,450);
        vertex(305,450);
        vertex(305,450);
        endShape();
    }
    for(var i = 0; i  < 315; i+= 30){
        ellipse(i+5,450,10,10);
    }
    rect(295,380,15,20);
    fill(255,150);
    ellipse(270,370,50,20);
    ellipse(210,350,70,30);
    ellipse(130,330,90,40);

}
//creating train and smoke

For this assignment I created a 2D animation. I wanted the train remain unmoving and the back ground terrain so that the combination of two can create an illusion. The randomized size and speed of the stars made shiny effect for the stars. Also I lowered the opacity of terrains and clouds to highlight the movement of the train.

Kazuyo Sejima

Kazuyo Sejima is a Japanese architect who founded SANAA. She is a leading exponent of contemporary architecture. She earned a degree from the Japan Women’s University and worked in the studio of Toyo It0. She is known for a clean modernist design by using clean and shiny surfaces and use of squares and cubes. She uses natural light to create a fluid transition between interior and exterior. I admire how she uses traditional elements such as square boxes and how she combine traditional elements and modernistic elements. Her idea is not to initiate a complete rejection to tradition, but rather to challenge the conventional process of design.

One of her famous building, New Art Museum by SANAA is located in Lower Manhattan, NYC. The museum shows how she appreciates simple but strong concept by using traditional shape. Her work shows how contemporary architects do not have to use crazy shapes to make good space. The building shape reflects the surrounding urban box shaped buildings. She stacks the boxes on top of the other but makes variation of them through varying sixe and shifting them, which makes dynamicity and an attracting shape. Different from contemporary artists who uses fancy materials, she uses materials that may look moderate externally. However, her buildings encompasses her unique charisma that attracts people’s attention for buildings sharpness and use of essential elements for construction.

Link to New Art Museum

^]

“New Art Museum” by SANAA in Lower Manhattan, NYC

sketch

//Min Young Jeong
//mjeong1@andrew.cmu.edu
//Section A
//Project-09

var underlyingImage;

function preload() {
    var myImageURL = "https://i.imgur.com/sDyW7gl.jpg";
    underlyingImage = loadImage(myImageURL);
}

function setup() {
    createCanvas(500, 500);
    background(0);
    underlyingImage.loadPixels();
    frameRate(10);
}

function draw() {
    var px = mouseX;
    var py = mouseY;
    var ix = constrain(floor(px), 0, width-1);
    var iy = constrain(floor(py), 0, height-1);
    var theColorAtLocationXY = underlyingImage.get(ix, iy);

    noStroke();
    fill(theColorAtLocationXY);
    rect(px,py,random(5,10),random(5,10));
    rect(px+10,py+10,random(5,10),random(5,10));
    rect(px-10,py-10,random(5,10),random(5,10));
}

For this project I created a pixelated portrait that the user can control. Each set of rectangles are created on the position of mouse X and mouse Y. The viewer can control the number of rectangles and the position of rectangles that are drawn.

Link to Hae Wan Park’s Looking Outwards06

Link to Maius Watz

Marius Watz, “Arcs04-01” and “Arcs-04-01″
Jer Thorp,” RGB – NYT Word Frequency, 1981 – 2010″ and “Hope/Crisis – NYT Word Frequency, 1981 – 2010”

Random Number Multiples by Marius Watz and Jer Thorp

What I admire about Marius and Jer’s “Random Number Multiple” series is that the artist never neglect the beauty of traditional craft while embracing new digital interface through computer generated design. They used computer software to generate complicated geometry and screen-printed the final work. In Haewan’s post, she admired Marius Watz’s “Arc” series for its intentionality given to it random shape. The artists does not just randomly shape the geometry but they precisely calculate the geometry they want.

I agree with her that the randomness is generated by certain rules through a definite computer software to satisfy a statistical test. It seems random but it is actually generated by mathematical processes. I really admire their process of working. They effectively take advantage of computer generated design to visualize complicated statistical data and they also used traditional way to print it. Its nice combination expands more possible ways of executing art expression.

“Eyeo 2015 Meejin Yoon” from Eyeo Festival //INSTINT

Meejin Yoon is Korean American Architect who graduated from Cornell University and received her Master in Urban Design from Harvard University. She effectively integrated responsive technologies and architecture to create interactive environment and public spaces.

“Hover” in New Orleans by Meejin Yoon-interactive lighting installation

One of her projects, “Hover”, shows a nice combination of her interest in responsive technology and interactive environment. Hover is a temporary canopy fir the DesCours festival. It is a luminous canopy that has both LEDs and “photovoltaic” cells that power them. She took inspiration from human body cell to create this interactive installation. The installation reacts to the surrounding environment, emitting more light on sunny days and less on cloudy days.

How she used the material and how the material or system reacts to its surrounding is very inspiring. Everything she creates and every material she uses is very intentional as aesthetic as well as systematic. And the result of the practicality of materials, space, and interactive potential created a public installation that interacts with the viewers.

link to hover