hdw – Project 12 – Proposal

I will be working with classmate Tiffany LAi from Section A. 

I was inspired by one of my favorite arcade games, Dance Dance Revolution, and I thought it would be interesting to create something similar using the arrow keys. Essentially, the player will hit the arrow keys to the beat of a song while arrows move up (see picture). We are hoping to generate arrow keys based on the frequency/volume of the beat to create an entertaining game. I want to find a way to keep track of highest scores as well. 


The World’s Greatest Bar Chat by Roz Dimon


Kisses, Kisses by Yael Kanarek


Both of the pieces are a form of digital paintings or visual generations. What I admire about them is the interactive input in creating a cohesive piece. I am not aware of the algorithms used or the input audience members were allowed to share in forming the interaction, but a subject I think was overlooked was the physicality of these pieces and their linkage to audience members. I think if the interaction was an important part, the documentation of the interaction is also pivotal in display, otherwise it seems like another painting.


<em>Kisses Kisses, 2017</em>



Running Drawings

For my final project, I would like to create some data visualizations of the running routes I do in Pittsburgh. These visualizations would be algorithmic drawings documented as a running diary of my daily or weekly runs. What I normally do not notice on a run are the larger gestures I make and the shapes, speed rates, and heart rate variations accompanying the larger gesture of a route. Mapping out these routes, and creating algorithmic drawings from the resulting shapes would not only visualize the “gestures” I am constantly making but unaware of, but also document trends on the routes which can affect my running and the way we look at a route retrospectively.  I would be using turtle functions to follow the path, and arrays and for loops to create algorithmic patterns/visuals for a more appealing visualization of how I felt that day.

jdperez Project 12 – Project Proposal

For my final project, I’d like to propose a generative landscape at a more detailed and complex scale than our prior project. Specifically, there are a number of aspects that I’d like to implement into this animation.

One, I plan on using L-systems to generate some of the shapes implemented into the terrain. Perhaps most obviously plants, but also on a more abstract level, L-systems could be used to generate interesting backgrounds/horizons.

Two, I want this project to be distinct from our prior project in the sense that the program will generate a singular landscape that the “player” can roam around in. I like the idea of creating a space that is constant, since then there can be much more attention to detail by the audience. Also, with a scrolling generated landscape, there is no stillness…  and I think stillness is a quality I enjoy in artwork, and look to implement in my own.

Three (though this is more of an optional aspect), I am considering making my landscape a sort of collage, or mixed media landscape. I mean this in the sense that I would create physical objects that I then take pictures of to implement into the animation. This idea was largely inspired by Samorost 3: an artistic video game, actually largely renown for its soundtrack.

A screenshot from Samorost 3, showing the main character interacting with some kind of anteater
A stylized turtle sitting on the edge of a comet that is actually a root system of some sort of massive tree.

mjeong1-Looking Outwards-12-Section A

“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.

jdperez Looking Outwards 12

My final project will mostly be focusing on animation, so my primary focus for this weeks looking outwards was aesthetic inspiration, as well as interesting ways of generating animations.

So, while doing research, my largest aesthetic inspiration came from the game Limbo, created by the video game studio Playdead in 2010.

A screenshot of Limbo gameplay.

Limbo is characterized by this sort of disturbing, nightmare-scape. I’d like to incorporate this same beautiful, nightmare mood into my own work.

I think what I admire most about Limbo is its capability to create something so disturbing, but so breathtakingly beautiful at the same time.


After that, I was trying to think of the animation from a coding sense. That’s when I stumbled upon L-systems, actually mentioned in another student’s looking outwards from a few weeks ago. After some initial research, the subject sounded super interesting, and I went looking for artists using L-systems in their animations.

William Chyr came up pretty fast when I googled L-systems, and his work seemed to adequately demonstrate to me the potential of L-systems in regards to visual aesthetic.

A program using L-systems to generate a plant-like image

The above image is probably the simplest of Chyr’s pieces, but also really concisely describes the visuals of L-systems. What interested me more than just his still images, though, were the animations that developed over time.

I think that seeing the program rapidly increase in complexity to form a full image is much more impactful or interesting. It captures the viewers wonder, as he or she watches a line begin to split and branch out without any idea of what the final shape will be.



For my final project I would like to create a 2D platformer exploration game. I want to create an interactive game where a character has to navigate through an environment and either click on certain objects or come into contact with a portal to reach the next phase or environment. I want there to ultimately be some type of end environment in which the character is trying to reach. I am really inspired by the games, “Loved”, and “Limbo”, and would be interested in making the landscapes/environments slightly dangerous and contain traps. I would like to incorporate sounds in my game as well, and really focus on the art that goes into the environments and of course, the coding. I will be implementing gravity in the game/code so that my character can move around the environment, jump on top of things, etc. The game will also probably include animations in the environment and for the character.

This is a photoshop sketch of the type of environment I want to create. The character will interact with the background and jump, move, etc.

Final Project Proposal

I propose to design an interactive todo list. In a previous semester, I designed the visuals and interaction flow of a desktop app. I now want to take that design, and create a proof-of-concept applet. By creating an interactive prototype, the concept can be user-tested. The app will consist of modules that can contain and display a name, a date, and a matrix of content. The content will consist mainly of notes/thoughts/questions taken by the user, but it will additionally contain other documents like imagery. In the interface, users will be able to add new modules, delete modules, rearrange the order of modules, and stack modules inside one another. The user will also have the option to add a photo to be contained in the module. I am excited about having this project be interactive because it will allow me to understand how to make it better. The video included is digitally animated to showcase the interactions offered by the interface.


Example of a recursive loading icon, posted by /u/Caybris on Reddit.

For my final project, I’d like to create a series of recursively-generated loading icons, following multiple stylistic variations. This is in-line with an exploration of communications design variables–specifically, how color and images can be used in a moving picture to engage and hold a viewer’s attention. This is important in liminal spaces such as loading screens, where visitors to a website or video need some visual component to tell them that progress is being made. A visually-engaging loading icon, like the above, would make the interstitial space between pages seem shorter.

In doing this, I’d like to explore different illustration methods–from existing on the three-dimensional plane to using p5js physics– that can be translated efficiently to Processing.






I am interested in allowing people to question the reality.  What make one thinks the object is real or not. There are many existing things in our daily spaces that are invisible to our five senses: sight, hearing, touch, smell, taste. Sometimes one can so blinded by one’s thoughts and the reality that the society create. How can one be encouraged to see beyond the curated reality, focusing on seeing and feeling the true forms.

I am interested in creating a mix of 2D and 3D animation with particles and elements in space. Elements may be: strings, lines, dots, cubes, cylinders and such. Then, using these elements to create motions like: distortion, explosion, tension, and more. I want to connects the motions and flow of each scenes. Considering the sense of visual complexity can be delicate and intricate, how do I make complex elements in motion visually pleasing and soothing. Adding on the visual animation, I would want to add on sound affects.