Web – Final Concept

Final project idea:

A website about electronic music.

  • Categories and genres with example songs.
  • Ability to sort/filter music by objective attributes, such as: key, BPM, and elements such as claps, high hat, synth, vocals, etc.
  • Ability to sort/filter music by subject attributes, such as mood, genre, etc.
  • Possibly pair each song with visuals. I’m a fan of this website: http://audiograph.xyz/ 
  • The intention is to encourage people to think more about what they’re listening to (not to rule anything out by categories)

Day 5 code.MidtermGame: Dance Oracle 手神


— processing code —


PImage image;
float x;
float y;
int w;
int h;

void setup(){
x = 500;
y = 300;
w = width/2;
h = height/2;
image = loadImage(“game-01.jpg”);

void draw() {
image(image, 0, 0, 1300,800);

if(key == CODED){

if(keyCode == UP){
fill(1,168, 158, 160);
rect(w/8, y/0.6, x, y);
} if(keyCode == LEFT){
fill(1,168, 158, 160);
rect(w/8, y/1.5, x, y);

} if(keyCode == RIGHT){
fill(1,168, 158, 160);
rect(w/1.01, y/1.5, x, y);

} if(keyCode == DOWN){
fill(1,168, 158,160);
rect(w/1.01, y/0.6, x, y);

} if(keyCode == CONTROL){
fill(1,168, 158,160);
rect(w/1.01, y/0.6, x, y);

} if(keyCode == CONTROL){
fill(1,168, 158,160);
rect(w/5.5, y/0.6, x, y);

} if(keyCode == SHIFT){
fill(1,168, 158,160);
rect(w/5.5, y/1.5, x*2, y*2);


—end processing code —

for separate file on determining stages: GitHub Game Stages Code

Design Homework 1 – Mastery Project

From the book  Invisible Cities, the phrase below caught my attention

You leave Tamara without having discovered it

This resonated with me, as I do not want to leave New York without discovering it.

Based on this resonance, I developed my mind map, below is the mind map I developed:

Based on my Mind Map, I decided to develop an already existing art to signify my Domain map which is below to represent my experience in New York.

The original work I decided to develop is below:




The development based on the Mind Map and Domain Map is below:




This art symbolizes the experiences I will receive from New York while living here.

Code Homework 1 – Animated Processing Art

The inspiration behind the Processing Art I created below is the course of life or time. This is represented by the circles moving at the top from left to right,  an infinite movement.

The rectangles stacked below represents the random happenings of life.

The target board (dart board) represent the different goals we are pushing to hit daily in life.

The color scheme of black and white represents the diversity of life.

Finally, the flickering of the art represents the uncertainties of life.

Processing Animated Art

[Design] Day 2 Mastery Project


Precedent: Monument Valley




In order to commit something to memory, humans use repetition. Memories are storied across thousands of synapses and neurons, but even so, memories are always evolving and changing — degrading. Memory is unreliable.

Stories of the past often change when different people retell it, because people remember the same event differently.

I decided to build a structure that repeated itself over and over to reinforce itself. At the same time, it becomes harder to see clearly. The mist shows that the structure is not permanent and can easily be erased.