LINKS AND SCREENSHOTS
https://glitch.com/~ccl10r-jyoti-dataviz
Static (script.js): 
Dynamic (newscript.js):
BASIC VISUALIZATION
As for this week’s recitation, we reviewed and practiced on JavaScript Object Notation. Some of the basic syntaxes we’ve learned include loading JSON File to the Script, reading multiple objects in on JSON Object, viewing JSON Object in the Console, etc. The exercise for this recitation was intended to practice irritating over a JSON object and visualizing the data accordingly. To be more specific, it visualizes all the given “body points” to depict a person’s figure. The pose.json file gives the data of the figure at only one frame, yet the poses.json file includes all the data of every body point at over 400 frames (say, poses), which asks us to challenge realizing a dynamic dancing effect of the figure.
Based on what we’ve learned during the class, it was not difficult to realize the first version. I used for loop to access the x, y coordinates of each body point and drew a red point accordingly. To further draw the arms and legs, since the order of the body points is already set in the JSON object, I first displayed the point index by applying text() function in the for loop. Finding that the arms and legs started from 5, 6, 11, 12 and should be lined with two other points with step 2, I applied an if() condition targeted the above four points, and declared other two variables (points) still inside the for loop so that they could be lined within the if() condition. A basic skeleton was therefore visualized.
CHALLENGE AND IMPROVEMENT
To realize the dynamic dancing effect of the poses.json, the first challenge was to access the data since the structure is more complicated than the first one. Besides, since there are different poses at different frames, what we need to irritate and draw is actually the body points accord with the frame, meaning that there should be one more irritation outside of the for loop used to draw each point. I first tried the for loop with iterator j, yet what it drew would always be on the canvas and would not be cleared out. I once set a state and tried to switch in order to separate each irritation, yet failed. Finally, I applied the clear() function, clearing out the whole canvas every time run the function. The effect was therefore visually realized, though the code was a little bit tricky.
IMA ONLY SURPRISE!!
I initially set the framerate to be 2 in order to observe its movement. And when doing the project, I was playing songs randomly in a music software around midnight. At one moment it played a song that I’ve never heard, yet with great surprise, I found that the beats perfectly accorded with the dancing steps! The project suddenly became sooooooo lovely that I could never help watching it again and again. Even the night became lovely too. I tried to load the music into the project without hesitation and would be more than willing to show it to everyone. It can heal everything!!!
REFLECTION
In this exercise project, I practiced to access data with complicated structures and visualize them using JavaScript. If I had more time, I shall first “debug” the code so that it can run and draw in the correct sense. Also further decorations surely deserve exploring:D Anyway, I pretty much like this lovely project especially with this lovely song.
Leave a Reply