Author: Tinh Ngo

Concept

Whenever I went to the arcade, the dance machine was always the most fascinating and fun for me. This inspired me to create a dancing game, but with a twist. The story takes place on a planet about to be invaded by aliens, where a cat is granted a superpower to defeat them. The catch is that his superpower is activated through dance moves.

Game design

The game mechanism will be moving your mouse to avoid falling asteroids/aliens and using UP,DOWN,LEFT, RIGHT arrows to destroy them. After destroying a number of enemies, extra moves will be unlocked to destroy multiple aliens at the same time.

Implementation design

Structure of code:

• class for cat: display, move, unlock moves, variables: x, y, dance (current key pressed).
• class for enemies: display, move (fall), variables: x, y, arrow, velocity.
• starting screens: including story screens that tell the story of the cat.

Starting screens and tutorial

Game screens

Progress

Currently, I have implemented the basics of cat class: move, display and arrow class: move, display. I also implemented the randomly generated arrows and mechanism to remove it from the screen when users input a key.

Struggle

For this project, my main concern is how to synchronize the music with the gameplay. Typically, dancing games generate arrows in time with the beat. In the current version, the arrows in my game are randomly generated with random timing and velocity. Therefore, in the next step, I plan to improve this by generating arrows based on the music’s beats.

Another struggle I have is finding the sprite for the game. There was not a lot of resources online for sprites in dancing game. I was trying to generate from gif to sprite, however the file size was too large and cannot be imported to p5js. During the next step, I will try to create my own sprites and design the visuals for the game.

Next steps

• Implement extra moves
• Add collision when arrows fall on the cat
• Apply visuals
• Create starting scenes
• Fix initialization of falling arrows

 

One fundamental difference between human and computer is that computer cannot easily distinguish between objects. They only recognize sources as pixels and algorithms have to be implemented to distinguish a specific object. What impressed me most in the reading is Myron Krueger’s Videoplay. The system he built has a diverse enough reaction bank that users can play with. Based on the movement of the participants, the computer generates visual cues accordingly to that input. Based on the participants’ actions, the computer generates visual cues accordingly. I think the ability to respond flexibly gives the system an impression of intellectual thinking, rather than just following rigid algorithms. I also noticed how Krueger interpreted physical interaction in human-computer interaction. For example, squeezing a virtual character on the screen causes it to pop and disappear (4:12), making the interaction between human and computer feel more realistic and reducing the sense of untouchability of objects on the screen.

Other techniques that I find interesting to be used in interactive design are detecting presence and simple interactions described by Jonah Warren. Because the way computer is used in daily life is mostly rigid and only tailored to specific needs, tweaking computer’s reaction based on the aforementioned input can create an interesting art media. For example, the Cheese Installation by Christian Möller is a unique way of interpreting computer data. Normally, we would not perceive the intensity of a smile in specific percentage. However, the way the machine interprets how we smile and return it into visual cue create a creative material for artwork. As such, a simple footage of smiling can be turned into a scrutiny of someone’s emotions.

Norman’s idea of good design can be summarized by two key characteristics: Discoverability, how easy it is to figure out the functions of something, and Understanding, how well the design conveys meaning. The chapter also highlighted a flaw in everyday objects that I have personally experienced. Norman discusses a swinging door that lacks the characteristic of Understanding, trapping his friend inside. Although the door looks fashionable, it fails to fulfill its basic function—opening and closing.

Another example I found interesting is the sink. He mentioned a sink which fails in its design for the drain. He explained the signifier of the sink fails to guide the users to use it properly. I think in most cases, the design of objects also depend on uniformity, how other similar objects are used will signify the usage of an object that performs the same functionality. This explains why the user does not expect pressing on the stopper would drain the sink, or why the door at a new restaurant does not work (is it automatic? slide sideway? push inside?). Norman explained that this stems from the mismatch in the point of view, the engineer is too focused on the technicalities of the device and normally disregard how it would look from the perspective of users figuring it out on the first use. It is even worse when people are usually impatient or not accessible to the design manual.

Additionally, Norman points out the imbalance of factors in bad designs—one may prioritize fashion too much, while another over-engineers the functionality. In real life, I can think of some examples right here on NYUAD’s campus. The most frustrating one is the fridge commonly used in dorm suites. These fridges are built into the lower kitchen cabinets, blending in with the same wooden color as the other cabinets. However, due to the magnetic door and the absence of a handle or rack, it’s hard to open the fridge. At first glance, I couldn’t even identify which door was the fridge. This is a flaw in both Discoverability and signifiers. It seems the design prioritized the aesthetic of the kitchen over the functionality and user experience. In general, I agree with Norman’s principle of a good design – inclusion of all factors is necessary for a balanced product.

Concept

For this assignment, I want to represent the temperature of the star with its respective colors. This data visualization represents a scientific fun fact: the hotter a star is, the “colder” it looks!

This is because the hotter star usually shines blue or white, but we usually associate this color with cold and vice versa with red.

Implementation

The source data I used for this project is from Kaggle, with detailed measurements in source file.

For the implementation, I use an array to store the data of each column, for example, starColor will have the colors of all the stars in the list, access by the index of the star in the list.

I also create a class for the stars to store the coordinates to draw the stars on screen and other information passed in from the csv file. The class has one display function to display the stars. When users hover over the star, the temperature and type of the star will also be shown.

//display method of the star class
display(){
    
    //calculate how close the mouse is to the star
    let distance = ((mouseX - this.x)**2 + (mouseY-this.y)**2)**0.5
    
    noStroke();
    drawingContext.shadowBlur = 32;
    drawingContext.shadowColor = color(this.color);
    fill(this.color);
    circle(this.x,this.y,this.radius);
    
    //display information box if the cursor is hovering
    drawingContext.shadowBlur = 0;
    if (distance < this.radius){
      fill("white");
      rect(this.x,this.y - 10,180,30);
      fill("black");
      text("temperature: "+this.temperature, this.x,this.y);
      text("star type: " + this.type, this.x,this.y + 15)
    }
  }

 

Final Piece

Reflection

For this project, a problem I have is generating the data to visualization. For example, I was trying to use the real radius proportion to draw the stars on the screen, however, this is not possible because the range of the radii is too wide, so one star would be too big and the other would be too small.

In my opinion, a strongly interactive system should effectively incorporate all three aspects the author mentions in The Art of Interactive Design: listening, thinking, and speaking. I think that video games are a good example of an interactive system, hence to illustrate these characteristics, I will use a recent game I played, It Takes Two.

Regarding listening, It Takes Two, like many storytelling games, implements this by “listening” to the user’s input. In other words, the game adapts its narrative based on what the participants choose or want to experience. It Takes Two tells the story of a couple on the verge of breaking up, who are brought back together by their daughter-a very relatable story that touches on the theme of family.

The second aspect is thinking, which, in my view, is not always the best metaphor for interactivity when applied to machines. The concept of thinking is vague, and we usually associate it exclusively with humans. Despite that, I interpret “thinking” as the system’s ability to process information, or the mechanisms the designer employs to create meaning. In games, I see thinking as the game mechanics. For example, It Takes Two requires tasks to be completed by two players, which demonstrates how the system accepts input and processes it.

The last aspect is speaking. It Takes Two uses the adventure through the couple’s old possessions to retell their past, implementing “speaking” by showing how the interaction unfolds. This aspect prompts the user to react to the machine.

When discussing interactive design, I think most people tend to focus on the speaking aspect-the demonstration-more than on the other two factors. However, for an interaction to be well-executed, all three aspects need to work in harmony. I often fall into the trap of focusing solely on demonstration. In future projects, I want to focus on incorporating more meaningful interaction mechanisms and exploring how they can better convey the story.

Idea

For this assignment, I was inspired by how fireflies blink synchronously in the night. At first look, it might seem like they are just flashing their light randomly, but they are actually communicating with each other through the blinking.

I thought this was very ingenious of them, so I want to replicate this into coding. My idea is having a main firefly interacting with other fireflies. Whenever the main firefly (cursor) is near any other fireflies, they will start talking (blinking!) with each other.

Implementation

To execute my idea, I use two class – one for the main firefly and one for the rest of the swarm. I use the class Swarm as a subclass of Firefly to reduce repetitive coding, using some shared variables (eg. glowing, size, x, y) and overwrite the move function for the difference in the movement between the main firefly and the swarm.

First, let’s talk about the main firefly. I took reference from delayed mouse following code by kjhollen (https://editor.p5js.org/kjhollen/sketches/rJItdyEt-). For the continuous glowing light, I increase and reduce the size of the shadow to create effects of glowing as in the code below

glowing(){ //blinking of firefly light
    //if the glow size is bigger than 40, set glow to false and decrease size
    if (this.size>40){
      this.glow = false;
    }
    
    //if size is negative, set glow to true and increase the size
    
    if (this.size < 0){
      this.glow = true;
    }
    
    if (this.glow == true){
      this.size += 1;
    }else if (this.glow == false){
      this.size -= 1; 
    } 

  }

For the Swarm, most remain similar. The main difference is the swarm only glow when the cursor is near, to which I implement this code to check the condition

blinking(){
  // blink if main firefly is within 100 distance
  let distance = ((this.x - mouseX)**2 + (this.y - mouseY)**2)**(1/2);
  
  if(distance < 100){
    this.on = true;
  }else{
    this.on = false;
  }
}

I use an array to keep track of all (40) fireflies on the screen:

let fireflies = []; //list of all fireflies
 
function setup() {
  createCanvas(400, 400);
  colorMode(HSB,360,100,100,100);
  
  let x = 50;
  let y = 50;
  
  //create 40 fireflies with random positions
  for(i= 0; i<40; i++){
    fireflies.push(new Swarm(x,y));
    x = random(300);
    y = random(300);
  }
  
}

 

Final Piece

Reflection

For this assignment, I am happy with how my vision turned out like what I imagined. The fireflies glow together creates an eye-pleasing composition and interesting piece in my opinion. However, I would like to improve on the glowing pattern – the blink still happens randomly without a clear pattern. In addition, I would also like to try different representation of fireflies to further replicate the experience.

One of the key takeaways for me from Casey Reas’ talk is the importance of a ruleset in creating beauty from randomness. I was impressed by the amount of time and effort Reas and his team dedicated to experimenting with shapes – they created more than 1,000 compositions to explore patterns (11:20) . They observed and connected the pieces, then determined which rules to apply to restrict randomness and create stronger compositions.

The idea of developing concepts on paper before writing code also stood out to me. I think the notion of “play” is more effectively expressed through physical materials first, and then translated into code. This approach helps prevent getting sidetracked by implementation details and allows for more focus on the idea itself.

However, I do question the meaning of relinquishing control when creating art. Artists usually have specific intentions – such as what tools to use or how to arrange shapes. Without a ruleset, I feel that randomness can obscure the meaning of a piece. In creating my own art, I want to maintain control over what is in the picture, but I can incorporate randomness by allowing a range of inputs. For example, instead of using a single fixed shape, I could introduce an array of shapes and leave the selection to chance. In general, I think randomness is an intriguing element I would like to attempt at integrating into user interaction.

For inspiration, I found some online references with patterns created by combining similar shapes. Most of these combinations resulted in forms that resembled flowers.

Flower Pattern

I drew a connection between using a shape multiple times to draw a pattern and using loop in p5js. My idea is using the same shape, with elements of randomness to create a different flower every time the user interacts with the canvas.

Challenge

When creating this piece, what I found particularly challenging was using the rotate() function to position the petals around the center (the mouse cursor). However, the rotate() function in p5.js only allows rotation around the origin (0,0), so I had to use translate() to change the origin to the mouse cursor’s position. This quick fix created a problem later when I wanted the flowers to remain permanently on the canvas instead of disappearing every time the mouse was released.

For drawing the flowers, I created two functions: one to draw flowers with squares and one with ellipses. They are similar in essence except for the change in shapes used to draw.

function squareFlower(x,y,size,fcolor){
  //repeat drawing the square with the rotation of angle until the 360 degree is full
  for(let i =0; i<(360/angle); i++){
    rotate(angle);
    stroke(fcolor[0], fcolor[1],fcolor[2]);
    fill(fcolor[0], fcolor[1],fcolor[2],fcolor[3]);
    rect(x,y,size);
  }
}

Finally, I included random attributes like shape, petal size, and angle of rotation to create different flowers. I also adjusted the opacity of the shapes to create a more interesting composition. To make it look more like flowers, I implemented an increase in shape size over time when the mouse is pressed, creating a blooming effect.

Final Sketch

Reflection

After finishing the sketch, I tried to make the flower appear permanently on the screen instead of disappearing, but I couldn’t because the flowers are drawn based on their rotation around the origin (which changes for each flower). When I revisit this in the future, I want to change the drawing of the flowers from using the built-in rotate() function to using math to calculate the new coordinates. This will allow the flowers to be drawn independently of the origin’s location. Another issue is that some shapes in the flowers are overlapping, which I think stems from the calculation of the rotation angle. I will also try to improve this calculation in future sketches.