dayoungl & kyungak – Final project

Please refer to the gif file for how the game works.The objective of our game, “TOM” is to survive from the bombs by navigating its to stay away from bombs. A little bonus of the game would be eating hearts to achieve higher points. One can navigate the character using the arrow keys. The scoreboard on the top right corner keeps track of the hearts the character eats. Each time character consumes a heart, it will be logged as +1 on the scoreboard; whenever the character comes into contact with the puffs, it will result in -1 point from the scoreboard. When the character comes into contact with the bomb, the game will end with a “gameover” message. When heart and bomb collides with each other, the heart will turn into a little fire icon indicating that the heart is gone.

Download the PLAY-ME version to play the game on your device.


data-width=”800″ data-height=”800″TOM-FINAL

//Kyunga Ko
//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("");
  scoreboard = loadImage("");


function setup() {

  //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() {
  //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);

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

      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, 
          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, 
          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(, 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);

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

  //Draws all sprites


//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) {
  createPuff(heart.position.x, heart.position.y);


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


//Bomb eats/gets rid of the heart + explosion sign
function bombeatsheart(bomb, heart) {
  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) {
  aftereatingheart(heart.position.x, heart.position.y);

//When bomb meets Tom, Tom dies and game over sign comes up
function bombmeetstom(bomb, Tom) {
  image(gameover, 175, 400);


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

  var b = createSprite(x, y);
  b.addAnimation("bomb", "");
  b.setSpeed(2, random(0,360));
  b.noisePosition = random(0, 1000);
  b.maxSpeed = 2;


//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", "");
  e.setSpeed(2, random(0,360));
  e.noisePosition = random(0, 1000);
  e.maxSpeed = 2;


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

  var a = createSprite(x,y);
  a.addAnimation("eat", "");
  a.setSpeed(2, random(0,360));
  a.noisePosition = random(0, 1000);
  a.maxSpeed = 2;


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

  var p = createSprite(x, y);
  p.addAnimation("puff", "");
  p.setSpeed(-2, random(0,360));
  p.maxSpeed = 1;


//Heart is created
function createHeart(x, y) {
  var h = createSprite(x, y);
  h.addAnimation("heart", ""); = 300; 


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

  var t = createSprite(x, y);
  t.addAnimation("tomcharacter", "", 


jwchou-Project-Proposal v2

Note: This is my new proposal.

My new proposal is to create an interactive game is controlled by the arrow keys on the keyboard.

I want to create an airplane landing game, sort of inspired by the game/app Flight Control which used to be quite popular. I wanted to do this to continue my series of airplane-themed projects.

I’m imagining that the game will progress either through different levels, or just naturally increase in hardness (ie the planes fly faster, are harder to control, etc). I might try to make it with more than one plane in the frame at a time, but if I can’t execute that, I might just stick with one plane at a time to keep things simple.

The styling will probably be simple and contemporary, and I might explore sound feedback as well, if possible.

I plan to work on this by myself.


Looking Outwards 8

Jessica Rosenkrantz is a lecturer at MIT’s school of architecture. Her talk from 2011 (and her work) is about computationally grown visual forms, based on plant growth structures. I have followed her Instagram ( for a while, and was so excited to see her name on the list. One thing I find most interesting about her work is that she wants to design products that intrigue or reveal a little bit about how it was made. She likes to use the generated forms to create material designs in the real world, as opposed to keeping them in digital space. Another concept that she’s working toward is designing material reactions that have extremely precise properties, so the materials can naturally grow into the form, rather than being 3D printed from a grown model. One product I specifically find interesting is a puzzle that has no edge. She designed a puzzle that can be put together in a very large number of combinations!

Nervous System – Eyeo Festival 2011 from Eyeo Festival // INSTINT on Vimeo.

dayoungl Looking Outwards 12


For the final project, we took our concept from “Pac Man” and an online game called “”. Because everyone knows how Pac Man goes, I will discuss more on My first encounter with was when I was back in high school. Everyone in my grade used to play this game and how this game works is that you simply log-in to the team server and you can play with your friends that way. This game was developed by  a 19 ear old Matheus Valadares. The concept of the game is to “bulk up” by eating other cells in the game; more specifically, The objective of is to grow a cell on a petri dish by swallowing both randomly generated pellets (agar), which slightly increases a cell’s mass, and smaller cells, without being swallowed by larger cells. This game was coded using C++ and javascript.

Here is a link to the game.



I think I want to base my project around something political, because I think art/design can be very political.

Here are two simple projects that help make politics most digestable and visible, and I think that is in the vein of what I want to do.

Trump Tracker by Viren Mohindra

This simple website tracks Trump’s promises and highlights them using a color code, depending on if he broke or kept his promise.

Tracking Trump’s Agenda, Step by Step
This is yet another web-based infographic by the New York Times. It shows a chronological timeline of the president’s actions and how they affect people of different populations. Each piece in the timeline links to an article about the specific event.


Both of these are simple web-apps with very primitive interactions. I appreciate how direct they are and how they make following politics more visual and more accessible. However, I think in order for them to be truly effective, they need to be more personalized to the person accessing them. I plan to move in this direction for my project.



rgroves – Looking Outwards – 12

Seven Sets by Santiago Ortiz is related to my projects because it is a visualization of a mathematical concept using color. It is basically the answer to the question “how many subsets are there of a set of size 7” (the answer is 2^7) but instead it’s a set of colors and he visualizes a subset as a combination of those colors. The way the information is displayed is very simple, beautiful, and easy to understand.

While this isn’t exactly an art project, sodoku puzzles can be directly analyzed as graph coloring problems as shown here. They are an example of many simple games that can be analyzed as mathematical concepts, which also include the Japanese game Hashiwokakero and even tic-tac-toe.


For my final project, I want to expand on the work I did in week 9. I will create a photo editor. An editor that applies a multitude of filters to different aspects of the images. It will load an image of the correct size, provide multiple options for editing through a panel of interactive buttons, and will re-display the edited image. Different buttons will edit the composition, color, pixels, and any other edits I can come up with or code. I plan to create a blur function. A black and white filter. A duotone filter with an attached color editor. A pixelating function. And possibly more I will come up with in the process, this is all I know I can code right now.

I want to also focus on creating a clean and successful UI in p5js to successfully support the code. Something simple but powerful that I will also create descriptive icons to describe the different possible edits that can be made to the image.

enwandu-Project 12-Proposal

For the final project, I will be working with Ryu Kondrup to create a program which animates the drawings of famous 20th century buildings by Mies van der Rohe. The generative graphics will be used to draw building plans, as well as a perspective or axonometric view of a few of his buildings. In addition to this, we are thinking of incorporating some interactive elements: possibly using the mouse to complete the drawings, color them in or reveal an underlying image of the building that matches the linework. We will also be including a directory for the user to pick which image they would like to see generated next. We will be using Turtle Graphics to complete this project.

Sketch of Directory to navigate the program


For my project I would like to create an animation which draws iconic 20th century buildings by Mies Van Der Rohe such as the Barcelona Pavilion, the Brick Country House, and the IIT Crown Hall. The canvas would start blank and the user would click or push a button to initiate the drawing animation, which gradually draws the outlines of a chosen building and when the user interacts with the canvas after the drawing completes, possibly by dragging the mouse, an underlying perspective photograph of the building reveals and matches the linework of the building already on top. After the full colored image is revealed the user would be redirected to a rendering of another building in the Mies buildings list. The drawings may possibly be done using turtle graphics.
This project will be in collaboration with Emmanuel Nwandu.


I thought this particular Super Mario game could be relevant to my final project idea. Basically, what I am looking to make is a game where the user controls a main character to move (walk, jump, duck, etc) and achieve goals such as avoiding obstacles, meeting other characters, and collecting items. Me and my partner decided to base the story our game off of the novel “A Little Prince,” and have the character collect (or learn) items (knowledges) as he proceeds. The aspect that I especially thought was helpful in developing our vision for our project in this Super Mario game, was that not only the interaction is relevant, it leads the user to different stages as the character exits the frame, which gets us to help the viewer understand the shift of environments because in the novel, the little prince has to travel from planet to planet in order to meet different characters. I thought this game was interesting to look at because not only it challenges the user through the obstacles in the map, it also opens up an opportunity for the user to think based on whatever I decide to place at the end of each map.

Another piece that I was inspired by was the online game Maplestory, which is basically a game where you are given quests through interactions with static characters and solving them. I was largely inspired not only how the user controls the character, but also its aspect of having conversations with characters embedded in the environment, and how it affects the character that the user is controlling. So, I am going to merge aspects of these two games to make my final project.