Final Project Proposal

So far, my teammate and I have developed three basic proposals that we would like to have a try in the final project.

1.Gold Miner

This idea is basically to create a physical gold miner machine connected with the game. We intend to build a physical roller and push button for the users to mine. This proposal is inspired by the idea of making a computer game into a physical one in my first preparatory research where a physical pinball is made out from the pinball game on the computer. Doing so increases the interaction experience of the users.

This game is intended for kids. Such a interactive machine intensifies their cognition of money management and labor. The challenge we would like to address is to create a simulation of the mining process and the reward, so that the audience can get a direct and actual experience.

2.Scream!

This game is similar as the game “Eighth Note”, which emerged into our view in our second round of research. In our view, the idea of using shouting to control the movement of the character in the game provides an outlet of the pressure in the daily life. 

The good thing of this idea, also the goal we would like to achieve is that it also provides reward&punishment system, where user can enjoy the gaming process while releasing their pressure. We want to add more interactive and zen elements (both visual and acoustical) to this game so that it really becomes a game which eases pressure while giving users joy.

3.Aircraft War

This idea is based on my game in week 7 recitation, the “Strike!” game. The basic principles remains the same, which is to smash the bricks using cannonballs. This game is designed for all users since the processing of destorying something brings joy.

The previous design is a bit boring. We would like to make the previous cannon into a place with different weapons, which gives users more control of it. Also, we want to complicate this game more by adding more challenging barriers and other elements. Besides, we would like to use a tilted platform so that the user can stand on, and control the movement of the jet by tilting on the platform. We would like to increase the sense of interaction to the most. We want all the users can feel the simple but infinite joy through this game.

Recitation 7 Functions and Arrays

In this week, I learned how to apply functions and arrays in processing programming. Functions are code blocks that do specific jobs. Defining functions and using them provide great convenience in programming. Arrays are used to store data in sequence. Using array can greatly simplify the code so that making the code easy-understood and neat.

Step 1:

As you can see, I defined a function called flower() to draw a flower, which is composed of 1 circle and 8 ellipses.

Step 2:

Used a for loop to create 100 flowers in setup().

Called the flower() function in draw().

Step 3 & 4 & Optional:

The code is attached below. I used 5 arrays in total, two for generating random position for each flower, 1 for generating a random colour in value (in HSB mode), and the other two for generating random speed on x and y axis. Also, a set an if statement such that when the flower touches the boundary of the canvas, it can bounce back. I made one simple interaction which is to control the movement of the flower by pressing the spacebar. Once the user clicks it, the flowers stop moving and when the user clicks again, the flowers start to move.

int flower = 100;
float[] arrayx = new float[flower];
float[] arrayy = new float[flower];
float[] arrayc = new float[flower];
float[] arrayspdx = new float[flower];
float[] arrayspdy = new float[flower];
int keycount = 0;
void setup(){
  colorMode(HSB,360,80,80);
  size(1000,1000);
  background(255);
  for (int i = 0;i<flower;i++){
  arrayx[i] = random(65,920);
  arrayy[i] = random(95,905);
  arrayc[i] = random(0,360);
  arrayspdx[i] = random(-10,10);
  arrayspdy[i] = random(-10,10);
  
  }
}
void draw(){
  frameRate(60);
  background(360);
  for (int i = 0; i<flower;i++){
    flower(arrayx[i],arrayy[i],arrayc[i]);
    arrayx[i] += arrayspdx[i];
    arrayy[i] += arrayspdy[i];
    detect_edge(i);
  }
}
void flower(float x, float y, float c){//it would be better with a size parameter
  pushMatrix();
  translate(x, y);
  //colorMode(HSB,c,80,80);
  fill(c,40,90);
  for (int i = 0; i < 8; i++) {
    ellipse(0, -40, 40, 70);
    rotate(radians(45));
  } 
  fill(55,27,80);
  ellipse(0, 0, 50, 50);
  popMatrix();
}  

void detect_edge(int i){
  if (arrayx[i] < 65){
  arrayspdx[i] = -arrayspdx[i];
  }
  else if (arrayx[i] >920){
  arrayspdx[i] = -arrayspdx[i];
  }
  if (arrayy[i] < 95){
  arrayspdy[i] = -arrayspdy[i];
  }
  else if (arrayy[i] >905){
  arrayspdy[i] = -arrayspdy[i];   
  }
}
void keyPressed(){
  if (key == ' '){
    if (keycount == 0){
    noLoop();
    keycount = 1;}
    else{
    loop();
    keycount = 0;
  }
  }
}

Test Video:

Question 1:

Difference: draw() function repeatedly draw flowers with random positions every iteration. While setup() function only executes once at the program starts.

Question 2:

Arrays can be useful to store a sequence of objects and data, which helps to make the data easily accessible and well ordered. Also, it makes the code looks tidy and neat.  Since we are considering making a game for the final project, arrays can be used to store some game items, user data, score and so on. For example, in the game that I created in recitation 6, all the balls and bricks are stored in arrays so that I can update their position or make other modifications more easily.

Having finished my midterm project and visited the Chronus Art Center, I feel that I have a deeper understanding of the definition of interaction. Here am I writing this blog post to share some of my new ideas.

The Exhibition:

First of all, I would like to talk about the exhibition. Comparing with other non-technology based art exhibition, the most significant difference is that, all the art pieces here are motional while traditional art pieces use static colour and shape. The moving parts are made from motors, tracks, gears, PCBs and so on. They bring strong and great joy in dynamic aesthetics.  

Among all of them, the one I love most is this, The Form of Becoming.

Within my limited understanding, I guess this whole device is a machine learning art piece. Each stick is an individual that has its own range of movement, they are free to move from the bottom to the top. However, there is a reward&punishment mechanism that if the stick moves all the way up, it will fall down to the bottom. During each iteration, each individual learns what is the best outcome according to its movement and the condition of other individuals. I guess that ultimately, all the sticks will rise and fall in a rhythmic tune and display a beautiful curve.

The reason that I love it is that each individual is being affected by others while affecting others. This is the way that the system interacts, receiving data while sending data. It shows the progress from chaotic to ordered, revealing the revolution of Anthropocene. The system, organized in an ordered and symmetrical way, will greatly attract the attention of the viewers.

This is exactly one of the points that I would like to improve in the final project, that is to give the project aesthetic value, by applying section, symmetry, shape or colour combination. I want the final project to attract users eyes before they even interact with it. This will definitely contribute to a good interactive experience since the users are not only using a device but also admiring an art piece.

Defining Interaction & Research

Through this half of the semester until now,  my definition of interaction improved gradually with my research and practice on different projects. At the beginning of the semester, I defined interaction as the most basic concept: “input-output”. This is the most fundamental and core elements of interaction. But on the sense of successful interaction, I shall define it as an interaction that creates aesthetic value meanwhile involving the user in strongly and firmly attracts the user. In my plain words, that is “I am participating in, and I want to participate more.” 

Why? In the group project, we built a “paint your day” machine. It fits the basic “input-output” fundament, but the user is not strongly participating in it. Since all the work is done silently in the background.  And in the beginning phase of the midterm project, the automatic fan we intended to build involves no user at all. Even as the creator myself, it is difficult for me to say that I want to enjoy this device more.  So I established the conclusion that a successful interaction must strongly involve users in. You will accept this point by looking at the following two projects.

1. Homemade Arduino Pinball Machine

https://create.arduino.cc/projecthub/Frogger1108/homemade-arduino-pinball-machine-4a3314?ref=tag&ref_id=games&offset=18

A simple but infinitely joyous game, I would say as a gamer. In this project, though the interaction is very simple, just controlling two moving parts to stop the ball falling down. But the interaction experience is definitely successful. Why? Every time we play, we focus on it, we love it and we want to play more. That’s it. Also, we can see that this device is beautifully decorated,  all the lights, sounds and colours are carefully chosen to create a retro style, which provides joy meanwhile fulfilling aesthetic requirements.

2. Beautifully Finished Humidity and Temperature Sensor

https://create.arduino.cc/projecthub/WickedMakers/beautifully-finished-humidity-and-temperature-sensor-87ada5?ref=tag&ref_id=art&offset=8

The good thing about both projects is that they all look pretty, aren’t they? But this one, though it also fulfils the “input-output” principle, I am sure you won’t stand in front of it for a long time. Why? Because the user is not participating. I would say that even just adding a knob to tune the colour of the background light will make this project much more interactive. Everyone can try tuning the colour into their favourite one, to see how cool this stuff is.

Till this point, the definition is clear. A successful interaction must strongly involve users in.  The first project enlightened me and makes me even sure about what is my group going to produce in the final project. Since involving users is a must option, then what is the easiest yet funniest way? The answer is game. We are gamers, we interact with games, and now it’s time to try developing a game by ourselves. This is what are we going to stick on. We are going to create a game that is both interactive and aesthetic. Only in this way do we believe could create the most successful interaction with users.

Recitation 6 – Processing Animation

In this week, I learned how to create an animation effect in Processing through draw() function. Also, I learned how to interact with the program through mousePressed() and keyPressed() functions.

First of all, the interactive animation.

Actually, for this bit, as a strict gamer, the thing that I would like to create most is a mini-game.  So I did. It is a pixel-styled shooting game.  Using processing to build such a game indeed went beyond my expectation. Since the draw() function is continuously looping, it causes difficulty when I would like to stop it or fix something on the screen when I don’t want it to be covered by a new background every time. Any I managed it finally. Here is the final work.

The game is easy to understand. The player controls a gun, shooting at the bricks falling down. You get extra bullets if you hit one. You lose the game either because you run out of bullets or failed to hit 5 bricks.

For the coding bit, I used python as the language of this program, since I am more familiar with it. Here is the code:

Apologize for the screenshot. Somehow when I copy and paste, the code loses indentation here. The code can also be found on

GitHub: https://github.com/Barrywww/Strike-

    

Some functions I find interesting:

keyPressed(), mousePressed(),

& most importantly, noLoop(), to stop draw() function looping.

Additional Homework:

Step 1:

 

Very simple and basic circle, with strokeWeight(20).

Step 2:

An important point that I learned is when we expand and contract the size of a circle, we could simply set a fixed speed of the motivation and constantly change the direction of the speed.  

Step 3:

Setting the colour mode to HSB is a great help. Since the relationship between colour and HSB value is linear, thus the colour can change smoothly.

Step 4:

The good thing about draw() function is that it loops constantly. In this way, when setting up a boundary for the circle, draw() can change the position of the circle constantly to make sure that the circle stays in the boundary all the time.

Here is the code:

Recitation 5 Processing Basics

In this week, we were trying to use Processing to imitate a picture by applying some basic coding technique we learned in the last week.

Step 1: Choosing a Picture

Since the line and shapes that we learned in Processing are some pretty simple models like rectangle, ellipse, line… I decided I would like to imitate something simple, like cartoon pictures or some simple art. Having searched through the Internet, one cartoon character popped into my mind, that is, Plankton from a famous cartoon Spongebob Squarepants. This is the picture that I selected.

I chose this picture because the body of Plankton is made up of several simple parts. An ellipse-shaped body, thick lines as hands, feet and antennas and also ellipse-shaped eyes. In Processing, my goal is to draw a basic but recognizable picture. 

Finished Picture:

What needs to be improved further is the body of Plankton. Its body is not a regular-shaped ellipse. It looks more likely to be a rectangle and two semicircles at the top and the bottom. Also, the arms and hands could be improved in a more detailed way, which is to add curves and turns into it.

Code:

//canvas
size(800,600);
background(255,230,0);
// Body
stroke(0,0,0);
fill(91,141,103);
ellipse(400,300,100,200);
// Eye Brow
stroke(0);
strokeWeight(5);
line(388,217,412,223);
// Eye Layer 1
stroke(0,0,0);
strokeWeight(1);
fill(204,225,124);
ellipse(400,268,43,75);
// Eye Layer 2 
stroke(0);
fill(172,20,15);
ellipse(400,268,18,34);
// Eye Layer 3
noStroke();
fill(200,162,141);
ellipse(400,265,6,10);
// Antenna
stroke(47,128,72);
strokeWeight(5);
line(390,200,365,100);
stroke(47,128,72);
strokeWeight(5);
line(410,200,425,100);
// Mouth
//stroke(0);
//strokeWeight(3);
//line(385,340,415,340);
// Mouth_Curve
stroke(0);
strokeWeight(3);
noFill();
bezier(385,340,395,335,405,335,415,340);
// Feet
stroke(47,128,72);
strokeWeight(5);
line(415,395,415,425);
stroke(47,128,72);
strokeWeight(5);
line(385,395,385,425);
// Hands
stroke(47,128,72);
strokeWeight(5);
line(351,300,350,365);
line(449,300,450,365);
// Body Line
strokeWeight(1);
stroke(0,0,0);
noFill();
ellipse(400,300,100,200);

Overall, I consider drawing in Processing an interesting way to draw since I am drawing through codes, which I had never done before. However, I do think that Processing should more be put in creating some abstract works, for example, Tya’s creation. It takes a lot of time to draw a real-life, objective picture.