Can I “Command /” my Brain?: My relationship to Physical Computing

I keep finding myself wanting to press “command /” to comment out a part of an essay, or some thought I had, to save it for later. I have spent so much of my life actively avoiding learning how to program, it has been an interesting experience, finally getting into it. When working on a project, it feels like there is always some part of my mind trying to process what is happening in the code I am working, even when I am doing something else. In this way it has really become an interesting part of my life, that I never thought it would.

I feel Like I have improved my coding skills significantly, but with every weekly project, I feel like I end up kicking my own ass. Just one little conceptual misunderstanding can throw me off and send me into a downward spiral of confusion for hours. It is like trying to fly a plane without knowing what all the buttons do.

In that way, I really hate how limited i feel. It was much easier for me to conceptually understand physical things at the beginning of the semester, like circuitry and mechanical systems. Sometimes when I rely on just programming, I feel like I am sliding backwards down a slide, and end up feeling stupider than the day before.

I really want to keep improving my skills, but it is hard on my conscience and confidence to always be working just above the range of my ability.

Still, I am fascinated by computing. I wouldn’t keep working so hard at leaning it if I wasn’t. It helps me to see the world a little differently. I am really grateful that I stepped out of my comfort zone.

Alien snake game 2.0 (Joystick)

For this week, I thought it would be really cool to make my snake game more advanced by using a joystick to control the movement using both Processing and Arduino. For this I used 4 male and 4 female cables and a joystick. I faced different challenges such as the arduino not transferring to processing or only two sides of the joystick working and it was more challenging than I initially thought, but it I got it working in the end!

Arduino:

void setup() {
  // put your setup code here, to run once:
  Serial.begin(9600);
  Serial.println("0,0");
}

void loop() {
  if(Serial.available()>0){
    char inByte=Serial.read();
    int sensor = analogRead(A0);
    delay(0);
    int sensor2 = analogRead(A1);
    delay(0);
    Serial.print(sensor);
    Serial.print(',');
    Serial.println(sensor2);
  }
}

Processing:

int grid = 20; //How big each grid square will be
import processing.serial.*;
PVector food;
int speed = 10;
boolean dead = true;
int highscore = 0;
Snake snake;
Serial myPort;
int xPos=0;
int yPos=0;

void setup() {
  size(500, 500);
  snake = new Snake();
  food = new PVector();
  newFood();
    String portname=Serial.list()[2];
  println(portname);
  myPort = new Serial(this,portname,9600);
  //myPort.clear();
  //myPort.bufferUntil('\n');
}

void draw() {
  background(0,0,50);
  fill(200,200,200);
  if (!dead) {
    
    if (frameCount % speed == 0) {
      snake.update(xPos,yPos);
    }
    snake.show();
    snake.eat();
    fill(200,50,100);
    rect(food.x, food.y, grid, grid);
    textAlign(LEFT);
    textSize(15);
    fill(255);
    text("Score: " + snake.len, 10, 20);
  } else {
    textSize(25);
    textAlign(CENTER, CENTER);
    text("Alien snake Game\nAre you up for the challenge?\nClick to start" + "\nHighscore: " + highscore, width/2, height/2);
  }
}

void newFood() {
  food.x = floor(random(width));
  food.y = floor(random(height));
  fill( random(255), random(255), random(255), random(255));
  food.x = floor(food.x/grid) * grid;
  food.y = floor(food.y/grid) * grid;
}

void mousePressed() {
  if (dead) {
    snake = new Snake();
    newFood();
    speed = 10;
    dead = false;
  }
}

void serialEvent(Serial myPort){
  String s=myPort.readStringUntil('\n');
  s=trim(s);
  if (s!=null){
    int values[]=int(split(s,','));
    if (values.length==2){
      xPos=(int)map(values[0],0,1023,0, width);
      yPos=(int)map(values[1],0,1023,0, height);
    }
  }
  println(xPos+ " "+yPos);
  myPort.write('0');
}

class Snake {
  PVector pos;
  PVector vel;
  ArrayList<PVector> hist;
  int len;
  int moveX = 0;
  int moveY = 0;

  Snake() {
    pos = new PVector(0, 0);
    vel = new PVector();
    hist = new ArrayList<PVector>();
    len = 0;
  }

  void update(int x, int y) {

    if (x>300 && y<300 && y>200 && snake.moveX != 2) {
      snake.vel.x = -1;
      snake.vel.y = 0;
    } else if (x<200 && y<300 && y>200 && snake.moveX != -1) {
      snake.vel.x = 1;
      snake.vel.y = 0;
    } else if (x<300 && x>200 && y<200 && snake.moveY != 2) {
      snake.vel.y = -1;
      snake.vel.x = 0;
    } else if (x<300 && x>200 && y>300 && snake.moveY != -1) {
      snake.vel.y = 1;
      snake.vel.x = 0;
    }

    hist.add(pos.copy());
    pos.x += vel.x*grid;
    pos.y += vel.y*grid;
    moveX = int(vel.x);
    moveY = int(vel.y);

    pos.x = (pos.x + width) % width;
    pos.y = (pos.y + height) % height;

    if (hist.size() > len) {
      hist.remove(0);
    }

    for (PVector p : hist) {
      if (p.x == pos.x && p.y == pos.y) {
        dead = true;
        if (len > highscore) highscore = len;
      }
    }
  }

  void eat() {
    if (pos.x == food.x && pos.y == food.y) {
      len++;
      if (speed > 5) speed--;
      newFood();
    }
  }

  void show() {
    noStroke();
    fill( random(255), random(255), random(255), random(255));
    ;
    rect(pos.x, pos.y, grid, grid);
    for (PVector p : hist) {
      rect(p.x, p.y, grid, grid);
    }
  }
}
void keyPressed() {
  if (keyCode == LEFT && snake.moveX != 1) {
    snake.vel.x = -1;
    snake.vel.y = 0;
  } else if (keyCode == RIGHT && snake.moveX != -1) {
    snake.vel.x = 1;
    snake.vel.y = 0;
  } else if (keyCode == UP && snake.moveY != 1) {
    snake.vel.y = -1;
    snake.vel.x = 0;
  } else if (keyCode == DOWN && snake.moveY != -1) {
    snake.vel.y = 1;
    snake.vel.x = 0;
  }
}

 

What Physical Computing Means to Me

Physical computing has been one of the primary technique that I has changed the way I see and my responses to the world. As an interactive media and computer science majors, I have realized that “software” is not the only method to present ideas to tackle rising issues, and physical computing allowed me to bring out these ideas to the real world. It may not necessarily make me a good person with physical computing at this point, but it is definitely providing me the path to become one as I develop and dive further into physical computing world. It is opening up possibilities and now I just have to create them!

It’s a “Hello World” in Physical Computing Now!

Final Project Idea

After reading Tega Brain’s “The Environment is Not a System”, I wanted to focus on the idea of portraying the nature and the environment, where human intervention can be a trigger to the destruction of nature.

The project entails a camera and processing to provide an interactive experience that shows the following idea. The general outline of an audience’s body will be captured through the camera, and the processing code will create growing plants on the outline. However, depending on the proximity of the audience, the stages of the plants will change (which is shown on the drawing above). As the audience gets closer to the camera, the plants will wither away – showing how some of our nature environment is good for us to stay away from it, especially if we want to protect it.

Iron Man Glove by Nick and me

Concept of the Game:

3D videogame controls an iron man glove and a button to shoot, obstacles will be shown flying at the user and the user would have to aim and destroy the obstacle.

Materials Needed:

  • glove with Ultrasonic or Infrared sensors
  • button controller
  •  Environment made in processing
  • Box Surrounding the user to detect the distance.

Procedure:

  1. We will create a glove similar to the iron man glove with infrared sensors and ultrasonic light that will detect the distance from the hand to the box that will surround the user.
  2.  The values gathered by the sensors will cause movement in an aiming box in the processing environment
  3. If the aiming box is at the same location as the obstacle and the user shoot,  a laser beam will be shown in the screen and the obstacle will be destroyed
  4. The player will have one minute to destroy as many obstacles as possible. At the end of the game, we will show a scoreboard with the highest scores.

 

Creditst to the following videos and avengers Endgame for giving us the inspiration to this videogame.

 

 

 

Physical Controller for my OOP Game

I decided to create a physical controller for my simple version of Flappy Bird, that I coded for the OOP assignment. I tried to code a button which will control the movement of the object in the game, and with some help from Rick, I was able FINALLY figure it out! I set up a button state and used it in the draw function, since I have three states for the game – pressing the button will change the button state from 0 to 1 then change the state of the game also from 0 to 1.

Arduino Code:

int buttonPin = 2;
int button;

void setup() {
  Serial.begin(9600);
  Serial.println('0');
  pinMode(buttonPin, INPUT);
}
 
void loop() {
    char inByte=Serial.read();
    button = digitalRead(buttonPin);
    delay(0);
    Serial.println(button);
}

Processing Code:

import processing.serial.*;
Serial myPort;
int state = 0; 
int score=0;
boolean currentState = false;
boolean prevState = false;
int arduinoButton = 0;
bird b = new bird();
pillar[] p = new pillar[3];


void setup(){
 size(500,700);
 
 printArray(Serial.list());
  String portname=Serial.list()[7];
  println(portname);
  myPort = new Serial(this,portname,9600);
  myPort.clear();
  myPort.bufferUntil('\n');
  
 int i; 
 for (i = 0; i < 3; i++){
   p[i]=new pillar(i);
 };
}

void draw(){
  background(0);
  if (arduinoButton == 1 && prevState == false) {
    currentState = true;
    prevState = true;
    state = 1;
  }
  
  if (arduinoButton == 1) {
    b.jump();
  }
  
  if (state==0){
    // intro state
    text("Click to Play",155,240);
    b.move(p);
  }
  
  else if (state==1){
    // start state 
    b.move(p);
    b.drag();
    b.checkCollisions();
    rect(20,20,100,50);
    fill(255);
    text(score,30,58);
  }
  
  else {
    // end state 
    rect(150,100,200,50);
    rect(150,200,200,50);
    fill(255);
    text("game over",170,140);
    text("score",180,240);
    text(score,280,240);
  }
  
  b.drawBird();
  
  for(int i = 0;i<3;i++){
    p[i].drawPillar();
    p[i].checkPosition();
  }
  
  stroke(255);
  textSize(32);
}
void mousePressed(){
  state = 1;
} 

void serialEvent(Serial myPort){
  String s=myPort.readStringUntil('\n');
  s=trim(s);
  if (s!=null){
    arduinoButton = int(s);
  }
  println(arduinoButton);
}

 

Final Project: Self-Portrait Generator

I’m interested in the idea of using cameras and live video with Processing, and so for my final project, I want to create some form of a “self-portrait generator”, where I’ll use concepts from generative art along with video. I’m not completely confident that I have enough knowledge in this premise, but I’ve found enough relevant examples online that I can refer to as a start.

For the interaction, I will either use a screen where the user can re-assemble the portrayed image by touching the screen, or by using a regular screen, an infrared sensor and allowing the user to manipulate the self-portrait using hand gestures. I will have to think more about the affordances and clarity of interaction for each approach, perhaps through user testing.

For this project, I’ll need:

-one, or perhaps two cameras.

-a touch screen OR a regular screen

-(possibly) an infrared sensor

As for visuals, I’m interested in imitating a style of art (ex: pointillism, cubism, post-impressionism, suprematism) using Processing, and merging that with video to create an interactive self-portrait where the user can then intervene in their own way. For example, if I were to use a piece by Malevich as inspiration, the camera footage would interact in a certain way with the shapes, and the user would be able to rearrange and reassemble them.

Kazimir Malevich, Untitled, ca. 1916. Oil on canvas, 20 7/8 x 20 7/8 inches (53 x 53 cm)
Kazimir Malevich, Untitled, ca. 1916.

As I mentioned already, I am not sure of how I would want the visuals to look like yet, but this is a quick sketch of how I would want the setup to look like. 

 

Table tennis using physical controller and final project idea

Soooo, I have recreated my table tennis game but using a physical controller a.k.a. Potentiometer. It turned out to be better than the previous version since more than one key cannot be pressed at a time and the sensor transfer their values once a frame. I have encountered a problem though during coding. The thing is that when you output data from arduino to processing we use serial monitor. It transfers one line at a time, when i needed two. What Jack advised me to do is to put all the data in one line and separate using a comma (CSV file? really? how didnt I come up with that? Am I really a CS major?) Here is a short video:

And here is the code:

1)Code for arduino:

void setup() {
  // put your setup code here, to run once:
  Serial.begin(9600);
  Serial.println("0,0");
}

void loop() {
  // put your main code here, to run repeatedly:
  if (Serial.available()>0){
    char inByte = Serial.read();
    int sensor = analogRead(A0);
    int sensor1 = analogRead(A1);
    delay(0);
    Serial.print(sensor);
    Serial.print(",");
    Serial.println(sensor1);
  }
}

2) Code for processing:

a. Main file:

import processing.serial.*;
Serial myPort;
ball ball;
padle padle1, padle2;
color fillVal = color(126);
float move = 0;
float velocity = 40;
float move1 = 0;
PFont f;
int padle3 = 0;
int padle4 = 0;



void setup() {
  rectMode(CENTER);
  size(1280, 640);
  f = createFont("Arial", 16, true);
  ball = new ball(5, 5, 20);
  padle1 = new padle(width*0.05, height/2, 10, height/4);
  padle2 = new padle(width*0.95, height/2, 10, height/4);
  printArray(Serial.list());
  String portname=Serial.list()[32];
  println(portname);
  myPort = new Serial(this, portname, 9600);
  myPort.clear();
}

void keyPressed() {
  //println(keyCode);
  if (keyCode == 32) {
    ball.velocityX = 5;
    ball.ballY = height/2;
    ball.velocityY = 5;
    ball.ballX = width/2;
    ball.counter1 = 0;
    ball.counter2 = 0;
  }
  //if (keyCode == 83) {
  //  if (move<=200)
  //    move+= velocity;
  //}
  //if (keyCode == 87) {
  //  if (move>=-200)
  //    move -= velocity;
  //} 
  //if (keyCode == 38) {
  //  if (move1>=-200)
  //    move1-= velocity;
  //}
  //if (keyCode == 40) {
  //  if (move1<=200)
  //    move1+= velocity;
  //}
}
void draw() {
  background(0);
  textFont(f, 32);
  fill(255);
  text(ball.counter1, width*0.33, height*0.1);
  text(ball.counter2, width*0.66, height*0.1);
  textFont(f, 14);
  text("'SPACE' to reset score", 5, 14);
  text("'W' and 'S' to move left paddle", 5, height-7);
  text("'UP' and 'DOWN' to move right paddle", width*0.78, height-7);
  drawLine();  
  ball.run(padle3-height/8, padle3+height/8, padle4-height/8, padle4+height/8);
  padle1.display(width*0.05, padle3, 10, height/4);
  padle2.display(width*0.95, padle4, 10, height/4);
}


void drawLine() {
  stroke(255);
  strokeWeight(4);
  fill(0);
  line(width/2, 0, width/2, height);
}
void serialEvent(Serial myPort) {
  String s=myPort.readStringUntil('\n');
  s=trim(s);
  if (s!=null) {
    println(s);
    String[] s1 = split(s, ',');
    padle3 = (int)map(int(s1[0]),0,1023,0,height);
    padle4 = (int)map(int(s1[1]),0,1023,0,height);
    
    println(s1[0]);
    println(s1[1]);
  }
  
  myPort.write('0');
}

b. Ball class:

class ball {
  float velocityX;
  float velocityY;
  int size;
  float ballX = width/2;
  float ballY = height/2;
  color fillVal = color(255, 0, 0);
  int counter1 = 0;
  int counter2 = 0;

  ball(float _velocityX, float _velocityY, int _size) {
    velocityX = _velocityX;
    velocityY = _velocityY;
    size = _size;
  }
  void update(float a, float b, float c, float d) {
    //println("velocityX = "+velocityX); 
    if (ballX >= width) {
      ballX = width/2;
      ballY = height/2;
      velocityX = -5;
      velocityY = 5;
      counter1+=1;
    }
    if (ballX <= 0 ) {
      ballX = width/2;
      ballY = height/2;
      velocityX = 5;
      velocityY = 5;
      counter2+=1;
    }
    if (ballX >= width*0.94 && ballX <= width*0.96 && ballY >= c && ballY <=d ||  ballX >= width*0.04 && ballX <= width*0.06 && ballY >= a && ballY <=b) {
      velocityX*=1.1;
      velocityY = random(-15,15);
      velocityX = -velocityX;
    }
    ballX += velocityX;
    if (ballY >= height || ballY <= 0) {
      velocityY = -velocityY;
    }
    ballY += velocityY;
  }


  void display() {
    //ellipse(width/2, height/2, size, size);
    fill(fillVal);
    noStroke();

    ellipse(ballX, ballY, size, size);
  }
  void run(float a, float b, float c, float d) {
    update(a, b, c, d);
    display();
  }
}

c. Padle class:

class padle {
  float x;
  float y;
  float w;
  float h;
  color fillVal = color(0, 255, 0);
  padle(float _x, float _y, float _w, float _h) {
    x = _x;
    y = _y;
    w = _w;
    h = _h;

  }
  void update() {
  }
  void display(float x, float y, float w, float h) {
    fill(fillVal);
    rect(x, y, w, h, 5);
  }
  void run() {
    update();
    display(x,y,w,h);
  }
}

 

 

Final project idea:


My idea is to make a claw game where you pull out toys. But all of that will be on the screen except the controller. After that an actual toy that you have pulled out in the game falls from behind the screen. The idea is to make an unexpected result. The user won’t have an idea that the toy from the computer will fall out from behind the computer. Other than that I have some ideas like making a game in processing

and using a physical controller (sensors, buttons), but Aaron didn’t really liked this idea 🙁

Addition to Game

This week I struggled with coming up with an idea on which of my processing designs I could combine with arduino. I ended up going with my game, popping balloons. But which aspect would I change? I played around with a button to pop them, a potentiometer to change the speed in which they moved, but then settled on using a potentiometer to change how many circles would appear at the start of the game.

My biggest challenge with this was rearranging certain aspects of my code in order to fit how I had defined the sensor. Then, once I had done that, I struggled with the sensor reading being on a loop. Jack helped me add in a boolean to have it only read once at the start of the game.

Here’s some video:

https://vimeo.com/333083714

Here’s my code from arduino:

int sensor;

void setup() {
  Serial.begin(9600);
   
}

void loop() {
  sensor = analogRead(A0);
  Serial.write(sensor);

}

and from processing:

import processing.serial.*;

Serial myPort;

int sensor;
int totBall = 0;
float xPos;
float yPos;
float spd;
boolean ugh = false;

//int counter = 30;
//boolean timer = true;
//int x = 1;
//boolean time = false;




Ball[] ball; 


boolean timeIsUp=false;
float timeTillOver;

void setup() {
  size(640, 360);

  printArray(Serial.list());
  String portname=Serial.list()[0];
  println(portname);
  myPort = new Serial(this, portname, 9600);

  noStroke();
  timeTillOver=millis()+random(10000, 30000);
}


void draw() {


  background(0);
for (int i = 0; i < totBall; i++) {
    ball[i].run();
  }


  fill(0);
  rect(0, 0, width, 50); 
}

void serialEvent(Serial myPort) {


  sensor=myPort.read();




  if (ugh == false) {
    totBall = int(map(sensor, 0, 1023, 1, 40));
    ball = new Ball[totBall];
    ugh = true;

    for (int i = 0; i < totBall; i++) {
      ball[i] = new Ball(random(0, width), random(0, height), random(1, 5), random(1, 5));
    }
  }
}

(note that I also used a ball class, but that’s the same as my last upload)

Final Project: Brainstorming

My initial impulse was to focus on a processing heavy project as me and physical computing did not turn out to be very good friends – but primarily because I would like to work on a bigger, more challenging project in Processing which we did not get to during the second half of the semester.

I would like to create an art-piece using computer vision. This would form a silhouette of the person standing in front of the camera that would mimic the person’s movement – and making them pretty much one person.

What would be happening on the screen, however, would be the most important. I would like the silhouette to be filled with a lot of tiny little objects – flowers, hearts, ice-cream, a lot of happy lively colorful objects. But in between those I would insert some very ugly objects (snakes, scary clowns, spiders etc.) which would not be visible through the beauty. Next to the person, there would be a stand with three buttons that would filter what the silhouette is made of – just pretty things, just ugly things, or both (probably marked as “The Pretty, The Ugly and The Reality”).

In order to make the experience unique for each person, I would like to have it separated by walls/curtains so only one person at a time can enter and interact. Also, I would like them to first interact with the piece without pressing the filters. I was thinking of doing this through putting instructions on the floor- which would indicate that stepping into a marked circle and interacting is the first step, and pressing the buttons the second.