Author: Ariana Alvarez

Idea 1: “You can score-it too!”

This idea is an assistive technology driven project, that connects Arduino and Processing in order to create a more inclusive way of developing video games. The project  consists of creating a soccer penalty scoring game in Processing, and connecting it to a distance sensor in an Arduino. The Arduino, will be attached to a vest, which will be worn by the game user. Therefore, any subject with physical disabilities that doesn’t enable him or her to physically kick the ball, will be able to play the game by just putting the vest on. So, depending on the speed and distance of the player towards the sensor and display, the soccer ball within the Processing game animation will be impulsed to score a goal on the screen. This project is idealized to redefine video game creation, by making it inclusive to all members of society who want to feel the adrenaline of a real or virtual game, however, they have difficulties either holding a game controller, or physically kicking the ball. 

Idea 2: Music World Map

As I came to NYU Shanghai, I have been immersed into a complex student body of very diverse nationalities and cultures. From this immersion, I have also noticed the lack of knowledge between people in general about some smaller countries as they are overlooked by the bigger, powerful nation. Hence, inspired by the lack of knowledge of each others’ cultures, I developed the idea of creating an interactive world map. The map would either be 3D printed, or coded within Processing in such way that once the figure of one country on the map is pressed, then Arduino will output one of the songs from the top-10 list of songs of that country that will be extracted from worldwide music databases such as Spotify and Apple Music. This project will have the purpose of not only educating the viewers in regards to where certain smaller countries are located, but also show them a small part of their culture through their most popular up-to-date music.

Idea 3: “A Race through Race”

In this week’s recitation, we were assigned to sketch a graphic and create a code that encompassed different aspects learned in processing.

Step 1 & 2: 

*Graphic created was a traffic light, hence the function drawLight();*

Setup()

Draw()

Step 3 & 4:

Final Code:

float x ;
float y ;
color c ;

int instances = 100;
float [] posX = new float[instances];
float [] posY = new float[instances];
color[] colors = new color[instances];
float [] xSpeed = new float[instances];
float [] ySpeed = new float[instances];

void setup() {
  fullScreen(); 
  background (200);
  //x = random(width);
  //y = random(height);
  //c = color(random(255),0,255);
  
  //drawLight(x,y,c);
  for (int index = 0; index < instances; index ++) {
    posX [index] = random(width-470);
    posY [index] = random(height-150);
    colors [index] = color(random(255), random(255),random(255));
    xSpeed [index] = random(-4,4);
    ySpeed [index] = random(-4,4);
  }

}

void draw(){
  
  background(255);
   for (int i=0; i < instances; i++) {    
    drawLight(posX[i],posY[i],colors[i]);
    posX[i] += xSpeed[i];
    posY[i] += ySpeed[i];
     //drawLight(random(width), random(height), color(random(100,255), random(100,255), random(100,255)));
    if ( posX[i] + 470 > width || posX[i] < 0) {
     xSpeed[i] = - xSpeed[i];
    }
   if ( posY[i] + 150> height || posY[i] < 0) {
     ySpeed[i] = - ySpeed[i];
    }
 }
 
}

void drawLight(float x, float y, color c) {
  fill (0);
  rect(x+17,y+25,470,150);
   fill(c);
  ellipse(x+100,y+100,100,100);
    fill(c);
  ellipse(x+250,y+100,100,100);
    fill(c);
  ellipse(x+400,y+100,100,100);
}

Question 1:

Having the for loop in setup, as opposed to draw, is different as within setup() the code is only read once. Therefore, the graphics only appear once on the screen. Whereas, in draw(), the for loop is repeated continuously on the screen, hence constantly creating additional versions of the graphic.

Question 2:

The use of arrays benefits  the storage of multiple values within a same variable. Therefore, it creates a more organized system that the computer can read more effectively. I might use arrays in a potential project to arrange the size and shape of  a specific object. Or if it is a project that requires the storage and classification of large quantities of data, I would use arrays to arrange the information into a more graphical representation of it.

Visiting the Chronus exhibition was without a doubt a very inspiring activity. In this experience I was able to appreciate how components such as stepper motors and distance sensors were being used beyond a classroom. I had never before attended technology based art work exhibitions, therefore, while comparing this one to visits to art museums like the Louvre, truly put things into perspective. I felt a lot more immersed into what artists wanted me to see, as they were not just still images hung up on walls. The exhibition showed interacting objects as if they were coming to real life. The three art pieces that struck my interest the most, definitely were Artificial Intuition, Beholding the Big Bang, and Rechender Rauf.

Just as the Chronus exhibition redefined art for me, I would like my final project to redefine another predominant aspect in human entertainment; and that is, games. By using interactive methods, I plan to reestablish digital and non digital games in order to make them more inclusive. I have researched projects as inspiration within both Arduino, Processing, and neither.  The main project that has served for my interest is the Xbox Adaptive Controller, as it allows people with different types of physical disabilities to play games by pressing buttons with different parts of their bodies. I think it is a very successful interactive instrument, as it doesn’t only construct a bridge between a digital display and a human to connect with each other, but also its main purpose if for it to help include all members of society to enjoy Xbox Games. 

Other rather less broad range scale projects I researched, were those closer to my central ideas for project. The first one, is an Ultrasonic flying game, developed by Lintang Wisesa, and it consists in an interactive experience that combines both Arduino and Processing. It uses an arduino to connect an ultrasonic sensor, which will control the flying character included in the game coded into processing. Therefore, the game itself in processing is controlled by an external factor using arduino. This project aligned greatly with my definition of interaction, and has similar ideas towards what I want to create, nevertheless it is not put in a such a great scale of inclusivity as my original idea.

Another smaller project I researched was a game example codes within openprocessing.org. The game consisted of scoring penalty goals through a processing animation. Even though this project is, by my definition, a lot less interactive, as it only involves digital actions and reactions/responses; it provided me with an insight towards the kind of game which I wanted to redefine, and in which I wanted to enhance inclusivity.  Therefore, after researching about the Penalty Kick Processing code developed by Youze Aaron Huang, I realized that the direction in which I wanted to take the game, was a game that originally is a sport, such as soccer, however due to the nature of the game, it excludes playing from those who have disabilities. Therefore, with my project, I will be able to create a greater inclusive experience, that even though it will be digital, the participant will be able to feel the drive of “kicking a ball”.

During the group project, I defined interactivity as a dialogue between two agents in which there is a action-response relationship (Crawford 4). Therefore, based on this initial definition, and taking into account my experience taking a more meaningful stance for my midterm project; I would now redefine a successful interactive experience as such that does not only consist of two subjects communicating with each other through action-reaction, but also, this experience developing a more meaningful connection. After experiencing how technology can help solve so many current problematics, I believe that interactivity should embrace the ability that technology has, and actually create a change either through action, or making others reflect upon their actions. It is for this reason that regardless of the Chronus Exhibition experience being a very insightful one, not all of the projects aligned with my definition of interactivity as they did not all create a full interactive experience to my perspective because only in Artificial Intuition there was an action-response  relationship with the user and object. Whereas, both Beholding the Big Bang, and Rechender Rauf, did not require two agents interacting with each other, merely just one interacting on its own. 

References:

Ultrasonic flying game https://github.com/LintangWisesa/Ultrasonic_Flying_Game

Penalty goal processing game: https://www.openprocessing.org/sketch/118492

Recitation Exercise: 

For this week’s recitation, I decided to create a new design and animate it in the form of a game. The initial idea was to have a rectangular box chase an ellipse that was “falling” from the top of the screen; and if the player lost, then the screen created a geometrical shape in the center that englobed the box and indicated its user that the game was over. Due to time constraints, I wasn’t able to fully develop my idea. Nevertheless, this was the final animation product of the recitation. 

The code of the animation mainly focused on the inclusion of both mousePressed and keyCode, in order to show keyboard and mouse interaction.  keyCode, was used to move the rectangular box that simulated “catching” the ellipse moving on the x and y axis at a certain spX and spY. Whereas, the mousePressed function was utilized to draw the rectangular strokes that indicated “game over”, once the moving ellipse had surpassed the movable rectangle. 

int s = 20;
float x = 100;
float y = 0;
float spX = random(1,10);
float spY = random (1,10);
int d = 50;
int e = 200;
int c = color(random(50,225),0,200);

void setup() {
  size (1000,600);
  frameRate (10);
}

void draw() {
  float y = millis() / 10;
  line(y, 300, 50, 65);
  
  background(c);
  ellipse (x,y,s,s); 
  x = x + spX;
  y = y + spY;
  
  if (x > width) {
    spX = -spX;
  }
  if (y > height) {
    spY = -spY;
  }

  if (mousePressed == true) {
    noFill();
    strokeWeight(0.5);
    translate(width/2,height/2);
    rotate(frameCount);
    rectMode(CENTER);
    scale(random(0.1,3));
    rect(0, 0, 100, 100);

    } else if (keyCode == LEFT) {
    float x = width - millis() / 10;
    fill(255);
    rect(x, 200, e, d);
    } 
}

Recitation Homework:

Step 1:

For the first step, I followed the instructions by first setting the size of the canvas to 600×600. Then, I created a circle in the center of the screen by using the ellipse function, with a size of 200×200, and strokeWeight 15.

Step 2:

In order to make the circle expand and contract periodically, in this step I rearranged my code within “void setup” and “void draw” functions, that way, I had more control over the animation. I also determined two new variables, “x” and “a”, in order to identify with “x”, the size of the circle, and with “a”, the change this size would face. I also added the keyword frameRate, in order to have control over the speed in which the expansions and contractions were ocurring.

Step 3:

For this step, based on the instructions detailed for colorMode, I set this function to HSB, and included it within void setup. I later on introduced three new variables in order to identify HSB accordingly. Nevertheless, for this particular situation, the only setting within HSB that truly had to change was “H”, which stands for Hue. Therefore I introduced an if statement to perform such change in color, and obtain the desired results.

Step 4:

As a final step, in order to make the circle move according to the key arrows, I introduced a new keyword called keyCode. Before introducing keyCode, I had to declare four new variables regarding x, y, speed of x (spX), and the speed of y (spY). Nevertheless, in order for the functions to work, I created if statements so the circle moved according to the arrows, as well as it didn’t surpass the canvas delimited area. In the end, the animation was finalized as the following:

The code of the final animation looked as the following:

int a = 2;
int c = 100;
float h = 0;
float s = 100;
float b = 100;
float x = 300;
float y = 300;
float spX = 5;
float spY = 5;

void setup(){
  size (600,600);
  frameRate(80);
  colorMode(HSB, 300,100,100);

}

void draw() {
  background (255);
  stroke(h,s,b);
  strokeWeight(15);
  h++;
  if (h>300){
    h = 0;
  }
  
  if (c >=300 || c <=80) {
    a *= -1;
  }
  ellipse(x,y,c,c);
  c *= a;
  
  if (keyCode == UP) {
    y = y - spY;
  } else if (keyCode == DOWN) {
    y = y + spY;
  } else if (keyCode == RIGHT) {
    x = x + spX;
  } else if (keyCode == LEFT) {
    x = x - spX;
  }
  
  if (x > (width - c/2) || (y < (c/2))) {
    spX = spX * -1;
  }
  if (y > (height - c/2) || (y < (c/2))) {
    spY = spY * -1;
  } 
}

Most Interesting Functions:

• mousePressed ( == true ) ; *used to fill in the screen 
• keyCode (UP, DOWN, LEFT, RIGHT) ;
• colorMode (HSB) ; 
• frameRate (control speed of frames eg. 10) ; 
• “if” statements to control variables were definitely one of the key points in making the animation do what you want it to, and in what moment. It was a function mixed with all of the other ones. It helped me control everything from size, color, and even the direction in which I wanted to move it with the arrows and keyMode function.