Month: December 2020

For the final project, I worked with Daryl Goh to create an audio visualizer that changes pitch based on body movements using JSON data. 

To start, we set the let() variables for later. 

Then, we uploaded the audio file, Fractures by ILLENIUM, in order to set the preload() function to ensure that the audio loads later. 

In the setup() function, we set the canvas size to fit the full web screen of the users’ devices, and set the values for the variables set earlier. Setting the constant for poseNet ensures that the ml5.poseNet data will be input and output, and setting the camera position to flipHorizontal inverts the frame. 

The function draw() part was honestly the toughest part for us. We essentially wanted to create a pixellated grid in order for specific points to be drawn out and controlled, and also to allow those points to control the nature of the audio. First, we loaded the pixels for the camera and the grid, then we created several let() loops in order to allocate colors for the specific colors within the pixels of the camera and grid. We separated the previous RGB from the current RGB in order to ensure that the colors shown are still in real time. Then, we set the img.pixels index to different values to customize them and keep them randomized in the specific frames. After setting the let() and img.pixels commands, we drew vertex shapes to create the geometric design that moves with the body points to create more aesthetics. 

The function gotResults(newPoses) keeps the real-time movements to date. 

We created a function for drawKeypoints(poses), which controls the movements within our body points of the user. We also changed the fill() settings to randomize the color of the key points of the body points. 

In the function drawSkeleton(poses), we essentially made the lines connecting each body point in order to mimic the stick figure, or skeleton. 

Lastly, we created two functions for the music to stop and start. Function mousePressed() ensures that when the mouse is pressed, the music starts, and the keyPressed() function makes the music stop when the space bar is clicked. 

Overall, I learned a lot from this project. In the future, I would maybe add dynamic landscapes to the background that changes the volume or song according to where the body of the user is on the screen. 

Here is the final product and code: project and code

 

For this project, we were working with data visualization and implementing JSON data files into the code. I decided to visualize the rankings of F1 constructors and drivers based on the 2020 race results. 

The first steps I took were uploading the JSON files and setting up the normal setup() functions. As shown above, I set the data as Mercedes-Petronas, McLaren, Ferrari, Racing Point, Redbull, Renault, and Alpha Tauri, as well as their main drivers. While there were other teams, I decided to exclude them as they were doing too poorly during this season. 

I then set a preload() function to load the data in the JSON files and a draw() function to show the shapes I will be drawing later. I then set the title() function for the title at the top of the drawing, and set the attributes for the text such as the font (Helvetica), text size, and color. 

The next step was to create the ellipses for each category to go into. To create the diagonal striation to differentiate the rankings and constructors, I set the ellipse coordinates and set all the dimensions the same. 

This part was harder for me to figure out. This makes the data appear and show up on the final product. I set a for() loop and set the variables for each constructor, Driver 1, and Driver 2. The text() function differentiates and makes sure that the text for each data point isn’t all in one string on each circle. 

The last part was the most challenging for me, as I couldn’t figure out how to make the data points even appear at first. However, with Moon’s help, by adding the console.log() function for the attributes that we set to the variables constructor, driver1, and driver2, as well as setting the values for the x-value and y-value (xconstructor and yconstructor) respectively, we allow the values to properly show up on the project. 

In the future, I would expand on this by adding more striation, and maybe even using other JSON data to input more accurate data such as the points earned by each team and driver. I would also add an interactive element to it, such as making it an interactive timeline to see the progression over the years (2016-2020?). Overall, I learned a lot from this project. 

Here is the final code: code