IMA Documentation

Links to my final project:

Code: https://glitch.com/edit/#!/wentao-final-game

Site: player: https://wentao-final-game.glitch.me

host: https://wentao-final-game.glitch.me/host/

Presentation slide: https://docs.google.com/presentation/d/1mS7ja9S7THymeDbdkVV4OLB1vaAkA-9SB1xMJyPg2jA/edit#slide=id.p

My final project is a multi-player game. For each player, there will be four questions with three options each. The players will earn or lose points when choosing different options. The questions and options are designed based on game theory. (Game theory studies interactive decision-making, where the outcome for each participant or “player” depends on the actions of all.)

Here are the steps I took to complete this project:

Step 1: I did some research on game theory and designed several questions and options.

Step 2: I referred to the trivia example and made the function of showing the questions and options to the players. I created two namespaces, one for the host to push questions, and one for the players to receive questions and options.

Step 3: I added the first receive result function. All the players’ choices will be sent to the server then emit to the host namespace. After clicking on the show result button, the host can see a long list of {player name, question number, option number}. The player could not see their final points.

Step 4: I added a data visualization function using the d3 client side library. This data visualization aims to show the number of players choosing each options. Based on the data received in the last step, I used for loops to count the number of players choosing options and put the data into an array. Then I used d3 to created four circle, each circle represent a question.

Step 5: The greatest challenge of this project was to calculate the points for each player. The four questions all have different rules for adding and losing points, I had to write different point counting functions for each option. After getting the result of all the players on the host namespace, I added another function that would push the result to the player side and show if a player wins or loses. I also made other modifications based on the user testing feedbacks. I added an introduction page for the player to get a better idea of this game. I altered the language use in the questions and options to make them easy to understand. I also added a timer for the users to keep track of the time.

Further development:

• Use the timer to control the question changing, instead of pushing each question manually.
• Add a waiting room, let players know how many players are joining the game and start the game when all the players are ready.
• Design more question for this game.
• Maybe add a communicating function so that players can communicate with each other while making decisions.

This is the result I record from the final presentation testing:

For midterm 1, I made an interactive map, demonstrating coffee production and trading all over the world.

I broke the project down to several steps. The first step was to create a world map and show it on the P5 canvas. After researching and learning about the mapbox api, I successfully used the mapbox api to draw a world map. 

The next step was to show the country location on the map. I watched a tutorial by coding train and learned how to convert longitude and latitude into the x and y coordinate on the P5 canvas. Then I gathered all the country location information and put them in the json file I created. By using the fetch function, I was able to extract all the longitude and latitude of each country and show them on the map. As for the circles showing the country, I used an object to represent all the circles. The sizes of the circles were determined by the coffee production number. The greater amount of coffee bean a country produce per year, the larger the circle would be.

After showing all the circles on the map, the next step was to make all the circles interactive. I added a hover effect and a clicl function to the circles. By clicking a circle, the name of the country and a picture showing local coffee plantation will show on the bottom of the page. 

I also want users to input their current city and make connections with other countries in the world. I added a text input box for users to type in the city they are interested in. To show that city on the map, I used the geocoding function of the mapbox api. It gives you information for the city name you input, including longitude and latitude number. With these numbers, I would be able to show that city on the map.

Then I add more interactions to the map. After a user types in a city name and shows it on the map, the user can keep click on other circles on the map, and the clicked circle will connect with the city. A number indicating coffee export information will also shown on the line.

For the final project, I decided to make a music tuner and visualizer. I broke it down to different functions and tried to realize them one by one.

The first function was making a music player. Here is the link to the first prototype:

https://editor.p5js.org/WentaoWang/sketches/xSZdhb9Ls

I looked into the codes in p5 reference pages and example pages. In this sketch, I managed to upload the music, preload and play the music when pressing the button. I add four sliders to play with the music, one changes the volume, one changes the frequency of a low pass filter, one changes the rate of the music, and one changes the panning of the music. I also added for buttons at the bottom of the canvas, when pressing each button, a particular sound effect will be played. I created a class for creating the sound effect players.

My second goal was to visualize the sound. Here is the link to prototype 2.0:

https://editor.p5js.org/WentaoWang/sketches/7_xixnmWC

To visualize the music, I looked into the coding train videos about music visualization. I managed to create a wavey visualization that shows the changes of the amplitude over time.

Then I looked into visualizing sound frequency, that’s when I got to prototype 3.0:

https://editor.p5js.org/WentaoWang/sketches/F2gAOI_sH

I referred to the example from p5 example page, and I was able to visualize the frequency using fft function.

I was trying to incorporate the techniques from interface lab to this project. So I add the communication between Arduino and p5. Here is the link to my prototype 4.0.

https://editor.p5js.org/WentaoWang/sketches/GfO_MLWPL

I also switched to using physical sensors to control the different parameters in the p5 sketch. I used potentiometers to realize the functions of the sliders. And I used push buttons to realize the functions of the sound effect buttons.

After I got everything working, I tried to improve the music visualization part of my project. And here is the link to my final version:

https://editor.p5js.org/WentaoWang/sketches/pGkACfokI

I used 3d functions in p5 to visualize the frequency bands, and I also added color changing based on time and mouse position to it. Although the 3d looked amazing, something weird happened. The four sound effect buttons in p5 couldn’t show up. I didn’t have time to fix that problem. But since I was also using physical sensors to control the music tuning, this project was still able to work properly.

Here is the link to my sketch: 

https://editor.p5js.org/WentaoWang/sketches/qdw1qAeo_

When first starting the sketch, buildings will be randomly created at the bottom of the canvas. When you change the mouse’s X position, several things will change: day and night background color, the rise and fall of the sun and moon, the turning on and off of the lights in the building.

I created separate functions for drawing the buildings, the windows, and the moon. 

I tried to generate all buildings randomly when the sketch starts by using for loop instead of hard coding each parameters of the buildings, but I failed. If I draw the buildings in setup, I couldn’t change the window color; if I draw the buildings in draw, the buildings are all changing constantly. So instead of making all building random, I ended up hard coding two random buildings, and then use the for loop to create duplicates of the two buildings to add some randomness.

Here is the link to my sketch:

https://editor.p5js.org/WentaoWang/sketches/3yXg7CxLO

In this project, when mouse is pressed on a certain location, it will change the color of that row and column the mouse is positioned. The color is determined by the location of the x and y coordinate of the mouse. When you press the mouse and move it around the canvas, you will see a beautiful change of color pattern. If you move the mouse in different direction, the picture shows different color pattern.

To be honest, this was not what I originally intended to make. I was trying to make a light-out puzzle like shown in this image at first. But I found it hard to change the color, preserving the state of the color, and change the state of a square. I was able to change the color of the four squares around the mouse location, so I decided to go down that road, and in the end, creating my project.