Zeyao – LM – LM Game

For the last project, I decided to make a game that is not included the competitive function. For me, I don’t like how people have to win something in a game. Sometimes, a game can just be entertained and for fun. So, this game is a drawing game which people draw the shape of the city based on the metro line. Usually, when we talk about the metro system, we will think of it based on the city itself. Also, the metro map is seen as an extra attributes to a map. However, I realized that why can’t we put the metro line at first, then based on the metro shape, we draw the shape of the city?

I used the google map javascript api for this project. First, I initialize the map then I added a transit layer on the map, which make it more complete. I also added a overlay Tile system to help the player to draw the city. Originally I wanted to use p5 to make the drawing system. Yet I found that there was a drawing manager function on the google map api. So I used that. I made 3 buttons to change the location center by using jquery, however, it showed the error “google is not defined” and I was working on this for hours. So for now this was not working.

For the future development (hopefully I can fix it recently – in the next few days), I want to fix the button first because there is only a line of error and I knew it could work functionally. Then I have another problem that I do not really know how to fix it. The map itself (the city) is the base of the whole API, so to be honest it is basically impossible for me to separate the base from the other add-on layer, for example, the transit. I tried to search it online, and I did not see any results. My idea was to create a button, and once you clicked it, the map will show up. The default page is just the transit layer. I tried to make the map null — which is how people hide the layer or the map itself, but it wouldnt work. Because the transit is based on the initMap by settings. On the Gaode Maps (a Chinese map) API, the subway can be separated by the map itself, but the metro map is more like an image with a white background. It makes everything underneath and you can barely create anything based on the metro map. Also I did not see that they include the drawing system in the API. So hopefully I can find a way to figure it out.

Here is the code:

Locative Media Project 3: Capture the Treasures

My final design of locative game is very similar to Capture the Flag, but just adds more technical elements in it. After changing several ideas and watching several TV shows I think add something new to a already success traditional game will be a good way.

There’re still going to be two teams with same people(ideally each group have 4 people or more, let’s use “n” to represent the number), and each team will have n-1 objects to be picked up by another team. These objects are virtual treasures(which can be different) and and be unlocked with AR scanning. You can tell the location of these treasures on your phone side but can only know what it exactly is until you unlock it. When enemy players is “tagged” by the opposite team member, they will be “frozen” until freed by a member of his own team. The team that unlocks all the items quicker will win and can collect all the items.

So instead of only one side has a “lag, both team have items to be captured on their side in this game, because it takes more time to collect items on phone. Also it requires bigger and more complex environment for players to hide instead of plain playground. Playing in playground will be too much running involved and difficult to unlock anything from your phone (I can imaging people get tagged once they take out their phones out of pocket). So in this sense, think of CS that requires using more strategy when approaching to the “flags” .

Prototypes:

 

(The prototype is based on Jardin du Luxembourg in Paris, which I think is a good location to play this game ^ ^)

LM: Location Website

For my location website, I decided to make a website that would show the user which hemisphere (north vs south) they were in. This is a play on other location websites that try to show you a more precise location, whereas mine is very vague.

I made my website give the user their coordinate, then check whether the latitude was greater than 0. If it is, then a picture of the northern hemisphere will pop up. If not, a picture of the southern hemisphere will pop up.

In the middle of working on this project, my computer decided that it no longer thought the getLocation() attached to the onclick of the button was valid. I didn’t make any edits to this part of the code, and it suddenly stopped working. I tried closing the programs and reopening them, but nothing fixed it. This happened before I was able to put the photos in the program, so even if this getLocation() problem gets fixed, I don’t know if the photos will show up.

https://github.com/ashley-aili/Location-Website

LM: Location Game

For my location-based game, I chose to do an airport bingo game.

The user will open the website and see a traditional looking bingo game board. On the 24 squares (not counting the free space) the user will see different situations or people that they may encounter at the airport or in the airplane. As the user sees these, they can simply tap the square to check it off. There is no “signifier” when a user gets a bingo, allowing them to check off as many as they see, not just simply stopping when they’ve found 4 or 5 of the squares.

I found a website that allows the user to create bingo squares and every time the website is refreshed, the game board is reconfigured with the tiles you put in. I then loaded this website onto an html document. I wanted to make sure that this game could be played anywhere, but also couldn’t be completely filled in at one airport, so I put specific squares in that are only available at certain airports or contradicting squares like only two terminals or more than four terminals – you can’t have both of those.

In order to put more emphasis on the location of the user (what airport they are at), I decided to put a form at the bottom of the website where the user can fill in their name, airport, and an interesting/unique/cool thing they saw at that airport. Once they press submit, the website will load a new page that lists all the users and their answers. This way users can see similarities and differences between airports (that may be in a similar area).

I had a bit of trouble with the layout of the website. I continued to use EvoThings and its platforms. When I would view the website on my phone, the bingo table (which is in an iframe) would continuously shrink. I also couldn’t zoom in. The form was also all the way on the left instead of centered. With Matt, I put a red border around everything to see the edges of all my sections on the page. We finally were able to configure the CSS to make everything look nice.

I tried to add another page that would display all users’ answers, but I ran into more issues. I had to work with PHP and got confused pretty fast. What the website does now is navigates to the list page, but for some reason comments out my php get functions so they don’t show up. I would love to get this working eventually!

This is before centering the form (and before the second page):

IMG_6435.TRIM_

This is how it is now:

https://github.com/ashley-aili/Location-Game

Zeyao – LM – GeoJsonProject

For this project, I used part of Ashley’s data of the tram in Berlin. However, I realized that it is hard to remake the visualization of those data. I noticed that one of the properties is what are near the stations, so I thought I might find the coffee shops which are close to the tram station, and find the data of their active time. I collected 7 coffee shops’ name, coordinates, and their active time. It took me a while to do this, and it was really hard to find some because some tram stops were too close to each other.

Here are part of the data:

Then my idea was that I used a slide bar to control the active hour, and show whether the coffee shop was busy or not. The first thing I did was to use the googleMaps API and create a map. Then I tried to load the GeoJson in to the map. However, I tried so many different ways and it would not work. First, I tried to just convert the geoJson file to simple javascript, and use the function addGeoJson(data), but it wouldn’t work. Then I uploaded the geoJson file to my website server, and tried to put url into the loadGeoJson function, it showed the issue of “Access-Control-Allow-Origin”. Basically, this is the issue when you used different host for different files and tried to combine it together. So I decided to make a local server. Here is the terminal screenshot that I have for the local server, then it works.

Then I used the GUI under the p5.js and made a slide bar to control the active hours. I learned the GUI from the nature of code, however I got confused by how to get the number of the index from the geoJson file, and control it. I called Ada, and she helped me with that. Basically, geoJson file is a combination of different arrays and all I need to do is to console.log the data and go deeper and find out. geoJson.features[15].properties.active_time[params.hours] this is what Ada helped me got. it hid here! Then I could use slide bar to control the index and get the data that I want.

LM: Beacons

For my beacon project, I wanted to have one beacon that loaded events at the student dorms and one beacon that loaded events at the academic center. This way, students could see exactly which events were happening that day because it’s easy to forget what’s happening on Thursday when we are sent an events email early Monday morning.

I started with testing EvoThings and its connection from my laptop to my phone. I simply loaded the events email onto an HTML document. It worked on the first try! I then went to create my own website that listed all the events for that specific beacon.

I then ran into issues with trying to connect this HTML document to the beacon. In order to configure the URL to the beacon, I had to first find my localhost address, then try to configure a shorter URL address, then attach it to the beacon.

The local host address was the biggest issue. I downloaded MAMP and copied the beacon folder into MAMP’s htdocs folder. Matt and I had to try a few different options with the local host address. We finally found my IPv4 address, then had to find whether I needed to put :8888 after the address or not. We finally got it to work on the laptop, but couldn’t connect on my phone. We figured this was because of NYU Berlin’s WiFi configuration and settings. When I arrived back at my home in the US, my phone was able to connect.

I put my localhost address into bitly’s URL shortener and put that as my beacon’s URL. Normally, you can’t shorten localhost addresses with a URL shortener, but this time it did work. Because I spent so much time trying to figure out the URL and the local host issues, I decided to just do one beacon that would load the events email we got every Monday. If this project were to go as is in the school, I would just replace the email URL every Monday with the new events email. One issue that still remains is that on the laptop, the loaded email is very small whereas it loads correctly on the phone. I don’t see this as a huge issue as I intended people to be looking at this on their phones, and not have a laptop in close proximity to the beacon.

This was the first test:

This was the first test:

IMG_6385.TRIM_

This is the website I built:

This is the final:

IMG_6438.TRIM_

https://github.com/ashley-aili/Beacons-Project

Final Project-Ellen

In this final project, Pearl, Paschal, Jeffrey and I worked together to make the “couple shirts”. This project is meant to express the relationship between a couple A and B: if A needs a hug, she/he will press the button of her shirt. And then the buzzer on the shirt of B will start to scream until B comes to A and the two hug together.

The materials included are: two Arduino boards, one sending the signal and the other receiving; two 220 resistors for the buzzers to work; two buzzers, each attached to one Arduino board; two 10k resistors; two batteries, two cotton shirts, several wires and some conductive fabrics and threads.

The missions were divided to each of us before we started to work. I have the part of getting materials, Paschal and Jeffrey write codes, Pearl sews and fixes the circuits onto the shirts. On Friday I went to the fake market and got two cotton shirts, while Paschal sent the picture of circuits to our group chat. I completed the circuit according to the diagram of Paschal, and the next day we met together and fixed the circuits onto two pieces of fabric. The fabrics then were sewed onto the shirts with batteries on.

/*
  AnalogReadSerial

  Reads an analog input on pin 0, prints the result to the Serial Monitor.
  Graphical representation is available using Serial Plotter (Tools > Serial Plotter menu).
  Attach the center pin of a potentiometer to pin A0, and the outside pins to +5V and ground.

  This example code is in the public domain.

  http://www.arduino.cc/en/Tutorial/AnalogReadSerial
*/
const int sensorPin = 8;     // the number of sensor. it is digital
const int output = 13;

int sensorValueSend=0;
int sensorValueReceive=0;
// the setup routine runs once when you press reset:

void setup() {
  // initialize serial c ommunication at 9600 bits per second:
  Serial.begin(9600);
  pinMode(sensorPin, INPUT);
  pinMode(output, OUTPUT);
}

// the loop routine runs over and over again forever:
void loop() {
  
 
  sensorValueSend = digitalRead(sensorPin);   // read the input from the sensor
  sensorValueReceive=Serial.read(); //read input from the Arduino

  // send the read value to the other Arduino:
  Serial.write(sensorValueSend);

  if (sensorValueSend==LOW ){
    if (sensorValueReceive==LOW){
      digitalWrite(output, LOW);     
    }
    if (sensorValueReceive==HIGH){
      while (sensorValueSend==LOW){
        digitalWrite(output, HIGH);
        sensorValueSend=digitalRead(sensorPin); //read input from the sensor again    
      }
           
    }
  }

  else if (sensorValueSend==HIGH ){
    if (sensorValueReceive==LOW){
      
      digitalWrite(output, LOW);     
    }
    if(sensorValueReceive==HIGH){
       digitalWrite(output, LOW);    
    }
  }
  
 //now compare the send and received values
  delay(10);        // delay in between reads for stability
}

Rudi-Ellen Final Project

This final project is based on the interaction between a captured live video and two LEDs.

The reference was the BrightnessThresholding sample code in the examples of  Processing. What I want to do is to let the LEDs blink according to where a small dot travels inside the Processing screen. To realize this goal, I need to do the following things:

  1. capture the live video with a camera;
  2. let the video be black and white so that I can easily divide different areas of the taken screen;
  3. create a dot that travels inside the video;
  4. let the dot change its color every time it travels to a different area;
  5. let the red LED light when the dot travels to black areas; let the green LED light when the dot travels to white areas.

At first, I was thinking about using a class to create a function of the traveling dot. However, after writing the code out, I found that the color of the dot cannot change according to different colors of the area it’s in because the variable c(color) in the fill() function is not a global one — it is in the class dot(). The function cannot understand it. So I tried to delete the class part of my code and directly describe how the dot travels and changes its color in the void draw() part.

This is the code of Processing:

import processing.video.*;
import processing.serial.*;

Serial myPort;
int valueFromArduino;

int c;
int xpos = width/2;
int ypos = height/2;
int xspeed = 10;
int yspeed = 10;

color black = color(0);
color white = color(255);
int numPixels;
Capture video;

void setup() {
size(640, 480);
strokeWeight(5);
video = new Capture(this, width, height);

video.start();

numPixels = video.width * video.height;
noCursor();
smooth();
printArray(Serial.list());
myPort = new Serial(this, Serial.list()[1], 9600);
}

void draw() {
if (video.available()) {
video.read();
video.loadPixels();
int threshold = 127;
float pixelBrightness;
loadPixels();
for (int i = 0; i < numPixels; i++) {
pixelBrightness = brightness(video.pixels[i]);
if (pixelBrightness > threshold) {
pixels[i] = white;
}
else {
pixels[i] = black;
}
}
updatePixels();

int testValue = get(xpos, ypos);
float testBrightness = brightness(testValue);
if (testBrightness > threshold) {
c = 0;
myPort.write(‘H’);
}
else {
c = 255;
myPort.write(‘L’);
}

noStroke();
fill(c);
ellipse(xpos,ypos,10,10);
xpos = xpos + xspeed;
ypos = ypos + yspeed;
if (xpos > width) {
xspeed = xspeed * -1;
}
if (xpos < 0) {
xspeed = xspeed * -1;
}
if (ypos > height) {
yspeed = yspeed * -1;
}
if (ypos < 0) {
yspeed = yspeed * -1;
}
}
}

This is the code of Arduino:

int valueFromProcessing;
int ledPinG = 12;
int ledPinR = 13;

void setup() {
Serial.begin(9600);
pinMode(ledPinG, OUTPUT);
pinMode(ledPinR, OUTPUT);
}

void loop() {
while (Serial.available()) {
valueFromProcessing = Serial.read();
}

if (valueFromProcessing == ‘H’) {
digitalWrite(ledPinG, HIGH);
digitalWrite(ledPinR, LOW);
} else {
digitalWrite(ledPinG, LOW);
digitalWrite(ledPinR, HIGH);
}
delay(10);
}

This is the final effect:

 

Locative Media Project 1: Map of Street Artists

Project inspiration:

One of the first thing I noticed since arriving in Europe is that there’re so many talented street artists with different professions. They sing, play instruments, draw, make bubbles, and pretend to be status… I found out that they always have a favourite spot to do art. You can always found them their. Even people playing music on the metro (probably) have a fav line to go on. What’s more, during my traveling in Europe, I found that street artists in different countries have a certain “style”. Paris is more classic, Prague is more absurd (like kafka’s work), and Copenhagen feels more “minimalistic”. It would be fun to map the out – a map of street artists that you can’t possibly found them on google. It’s also a way to exhibit these arts online, showing their talents to more people.

progress:

GeoJson:

So we start mark locations on the map with geojson. You click on the map and codes with the mark info will be generated. I give my every marks with a few properties: “where ” “type” and “id”.

Collecting datas

One thing that is particularly important for me is to let my image/video source match with the array since it’s easy to mess up. I learned that it’s important to name your assets. My assets folder looks like this:

(although my first level is not quite well-organized..)

So I have 13 datas collected by myself and my friends from several countries: France, Danmark, Czech Republic, Portugal, and Austria.

Mapbox

I choose to use mapbox as my map basis because it looks more aesthetic. https://www.mapbox.com/

They also have very thorough documentations if you don’t know how to code something.

Feedbacks:

Feedback from class is very useful. It mainly gathered in the “Reset” button in my map. The function of it is letting user easily zoom out from a country and getting to see the map of europe more easily. It is hard to do so manually with clicking “-” button. critics about the button are: 1) probably change the name. “reset” makes people don’t know what it does. 2) move it somewhere else than the middle top, because now it looks like an ugly title.

Server:

Using localhost for this project is really legging, and I think it’s because there’re too many videos. So I just dragg it into firebox.

Continue reading

Group Members: Ellen Yang, Jeffery Kung, Paschal Giki
Instructor: Antonious Wiriadjaja
Class: Talking Fabrics
Project: Final Project
Description:
Our project was a take on couple’s outfits. Rather than showing that the two people were in a relationship, these clothes provide an example of an unhealthy relationship with an unequal power dynamic.

Process:
We spent a long time developing our idea. It was difficult for us to reach a consensus for a idea. After a few different proposals, the group decided to make couple’s gloves that would warm up when both parties were wearing the gloves. The gloves would also be able to send pre-determined emails to the party requesting favors from the other. The way the original proposal was phrased in a way that made me think of an unhealthy, borderline abusive relationship. I didn’t want to make something teetering on the edge of abusive, so I thought it would be better to make something that intentionally created an unhealthy dynamic in a relationship. The actions of one user would be intentionally make the other user’s more difficult or distressing.

Initially, we were going to incorporate emails and heating elements into the interactions, however, due to difficulties Jeffery and I had with the flag foot ball belt battery, we were uncomfortable that would require more power or dealing with a modified heating pad is such a small space. We tried prototyping the project by just trying to get two arduino yuns to communicate with one another while still connected to the computer. We had difficulty getting the arduino yuns to communicate using wireless communication, so once again, we scaled down our idea.

Emails were out, so we decided we would use the xbee controller to allow two arduino unos to communicate via radio waves. We were able to get these two to communicate; we had decided to use a buzzer to signal our other user. Below is our code and a video of our test:

/*
AnalogReadSerial

Reads an analog input on pin 0, prints the result to the Serial Monitor.
Graphical representation is available using Serial Plotter (Tools > Serial Plotter menu).
Attach the center pin of a potentiometer to pin A0, and the outside pins to +5V and ground.

This example code is in the public domain.

http://www.arduino.cc/en/Tutorial/AnalogReadSerial
*/
const int sensorPin = 8; // the number of sensor. it is digital
const int output = 13;

int sensorValueSend=0;
int sensorValueReceive=0;
// the setup routine runs once when you press reset:

void setup() {
// initialize serial c ommunication at 9600 bits per second:
Serial.begin(9600);
pinMode(sensorPin, INPUT);
pinMode(output, OUTPUT);
}

// the loop routine runs over and over again forever:
void loop() {

sensorValueSend = digitalRead(sensorPin); // read the input from the sensor
sensorValueReceive=Serial.read(); //read input from the Arduino

// send the read value to the other Arduino:
Serial.write(sensorValueSend);

if (sensorValueSend==LOW ){
if (sensorValueReceive==LOW){
digitalWrite(output, LOW);
}
if (sensorValueReceive==HIGH){
while (sensorValueSend==LOW){
digitalWrite(output, HIGH);
sensorValueSend=digitalRead(sensorPin); //read input from the sensor again
}

}
}

else if (sensorValueSend==HIGH ){
if (sensorValueReceive==LOW){

digitalWrite(output, LOW);
}
if(sensorValueReceive==HIGH){
digitalWrite(output, LOW);
}
}

//now compare the send and received values
delay(10); // delay in between reads for stability
}

 

Partner A would have an button they could press that would send a wireless signal to Partner B’s arduino causing a buzzer to go off. This buzzer could only be quieted if Partner B made physical contact with Partner A. We had abandoned the idea of gloves, our aruionos would be too bulky and it would be inconvenient to wear and affix to the gloves. After deciding on sweatshirts over scarves, we ended up with t-shirts. This would compromise the comfort of the user, as we wanted to place the arduinos in pockets of a sweatshirt, so we decided that we would have to just try our best to hide the arduinos within the shirt.

With the t-shirts ready, we decided we would use conductive fabric as a switch to turn the buzzer off. We ended up with Supreme shirts, and decided to incorporate their iconic logo into the design. Partner A would have one whole piece of conductive fabric, which would be able to complete the circuit on Partner B’s shirt. Partner B would have two pieces of conductive fabric in the same place as on Partner A’s shirt (right over the logo). There would be a gap between these two pieces of conductive fabric, making an intentionally disconnected circuit. When the two hugged, Partner A’s shirt would be able to complete the circuit on Partner B’s shirt, shutting off the buzzer. These pieces of conductive fabric would function as our sensors.

The switch to turn the buzzing on was on the left arm of Partner A’s shirt. The switch was made of two pieces of conductive fabric with a bit of space in between them. When pinched together, they would complete a circuit that would send a signal to Partner B’s arudio to turn the buzzer on.

Illustrations for the circuit are below:

We used a combination of hand sewing and the sewing machine to attach everything to the shirt. The sensor pieces of conductive fabric were attached to the t-shirts using the sewing machine, while all the other components were attached by hand, as many of them required conductive fabric. We created little pouches for the aruinos and batteries that we then attached to the back of the t-shirts.

Below is a video of the t-shirts working in person:

Reflection:

I had really wanted to focus on making this project something that looked like it wasn’t a rough prototype, instead, I felt like my design ideas were not considered and plain ignored. If we were to do another version of this project, I would really like to make it as small as possible, maybe using the Lilly pad Arduino or a smaller one. While most of us were all present to work on the project on the same time, I don’t think it required four people to work on it. Perhaps if we had divided the work more clearly, there would have been more active participation. That’s the main take-away I got from this project.

In addition, for me, I think this project suffered from  a problem I face in general when creating things. I think I try so hard to be aware of the message that the thing I’m working on is sending that I want to make sure it sends a message that says something ‘important.’ I thought our project was really interesting because I thought it visualized a toxic relationship in a very clear way, while when people you’re actually in the middle of a bad relationship, it’s difficult to tell.

This project could have gone in a much more light-hearted way that was more of a spin on a couples outfit that didn’t send a negative message, but also wasn’t trying to make commentary on a heavy or political topic. Now that the project is done and life has calmed down, a bunch of other ideas that are expansions on the couple’s outfit that rather than illustrate a very serious and potentially dangerous situation, poke fun at the obnoxiousness of couples outfits and PDA. I think I need to focus a lot more on the development of the project and try to make something more ‘fun’ in the future.