Week 9: Final Project Concept


At the beginning of the semester I wrote about my fascination with data visualizations. One map visualization that I have spent time digging through is the New York Times map called “An Extremely Detailed Map of the 2016 Election.”  I appreciate the detail of this map however,  what I find it is lacking is what all of this data means. 

The 2016 election was a wake up call for everyone across America.  We are more divided than ever before.  In order to make progress, we must first understand what happened in 2016 and why.  For my final project I would like to create a visualization about whose votes essentially mattered in the 2016 election.  This will identify where our election system is flawed and why it is important to fix these issues.  This it not a story about why your vote doesn't matter, rather understanding how our system is built to favor certain votes over others.

In the end, the 2016 election came down to the voters in three states, Wisconsin, Michigan and Pennsylvania.  While this seems like a small amount, it is hard to grasp how this even happens and how few votes this is compared to all of the eligible voters.  Hopefully, my visualization with help people to grasp this concept and learn what areas of our voting system need re-thinking.

The Idea:

The visualization will begin with a representation of all of the eligible voters (Figure 1).  Each dot will represent, a certain number of voters.

  Figure 1

Figure 1

Next I will eliminate all of the people who did not vote and those who voted for third party candidates (Figure 2).  This will leave 58% of the dots from Figure 1.  I am choosing to focus mainly on the main party voters here so I have chosen to eliminate third party voters at this stage.  In the current “first past the post system”, a vote for a third party candidate is considered a wasted vote so I am choosing to representing it as such here. 

  Figure 2

Figure 2

Next I will divide the remaining dots into each state based on the voters per state (Figure 3).  This figure shows the dots under their state name, however I would like to represent these dots over a state map at this point.

  Figure 3

Figure 3

Once the votes are represented by state, I will weight the size of the dots based on how many electoral votes each state has (Figure 4).  I will make this calculation using the total state population divided by the number of electoral college votes.  At this point you will visually be able to see what votes matter more than others based on the size of the dots.

  Figure 4

Figure 4

 Next I will color the dots base on party (Figure 5).

  Figure 5

Figure 5

Lastly, I will remove the vote for the candidate in each state that lost (Figure 6).  If I have time, I will continue by eliminating the excess votes that the candidate who won received in each state.  This last feature will highlight the fact that the way our system works today a candidate does not need to receive a majority of the vote to win, instead, they need to receive the most votes.

  Figure 6

Figure 6

At the end, I would like the user to be able to click on two stages of the visualization and compare them.  The most telling comparison will likely be the first and last stages where you compare all of the eligible voters to how many votes really mattered. I think the most challenging aspect of this project is going to be to get a clear movement of all of the dots between phases.  I need this animation to be smooth in order for it to not get in the way of the messages I am trying to convey. 


  1. https://www.youtube.com/watch?v=Ae73YY_GAU8

  2. https://www.270towin.com/

  3. https://www.politico.com/mapdata-2016/2016-election/results/map/president/

  4. https://mappa.js.org/docs/examples-mapquest-static.html

Other Ideas I had in mind:

Throughout the brainstorm process, I was focused on two areas, data visualization and the ml5 poseNet library.  The following are some other ideas I had that involve the ml5 poseNet library.

  • Using poseNet.js to visualize connections between people. When you hold hands with someone a beat shows up and you can move with the other person and display the moving connection.

    • reference: http://www.ivan.cash/

  • Creating a project with finger shadow puppets.  If you make a bird shape with you hands, a real animated bird shows up on the screen, etc. 

Week 8: Video Filter

This week, I played around with manipulating video input in p5.  First I loaded the video from the computer camera and adjusted the pixels to create new patterns and practice with the loadPixels() and updatePixels() functions (Figure 1).

Next I animated these samples to understand how I could incorporate some user interactions (Figure 2-4).

Figure 2

Figure 3

Figure 4

Once I felt comfortable with these elements I started to make a video filter.  I began by making a grid that divided the screen into four sections (Figure 5).

  Figure 5

Figure 5

The colors differentiate the four sections in this grid.  My idea was to take the capture image and display slivers of that image in a different area on the canvas.  For instance the slivers of the original image that make up the blue section of the grid would be displayed in the white section on the canvas.  While the slivers of the original image that make up the white section would be displayed in the blue section on the canvas.  The same would be true for the green and red sections.  Meaning the green section in the original image would be displayed in the red section and visa versa.  The result of this pixel manipulation is shown in Figure 6.

  Figure 6

Figure 6

This created an interesting effect where the image was superimposed on itself in a strange way and created a video filter.  Then I decided to incorporate a color tint to each section to make the image easier to understand.  So I added a slightly different tint to each section of the grid (Figure 7).

  Figure 7

Figure 7

 From there I added horizontal lines to break the grid up even more.  The final result is shown in Figure 8 and the code can be found here.  A fullscreen version can be found here

  Figure 8

Figure 8

Week 7: MTA Fare Data

This week I used the MTA data feeds to create a p5.js sketch.  At first I took time to sort through most of the data that was available on the MTA developer data feed.  I came up with an idea to combine some data from two csv data sets.  One data set had information about the types of fares used at each station.  At each station you could see how many full fares, senior/disabled fares, and student fares were used.  In the other data set you could see what stations had an elevator entrance or were considered ADA accessible.  Thus, I had the idea to combine these two data sets.  I wanted to map the full, senior/disabled, and student fares for each station, and then list whether that station was ADA certified or had an elevator or escalator.  Perhaps the results would find some stations that require ADA accessibility due to the amount of seniors/disabled fares being used at that station.  With this idea, I started to load the two csv sets into p5.  I created a button that would pick a random station from the fares csv file.  I used black ellipses to graph the full fares, green ellipses to graph the student fares and red ellipses to graph the senior/disabled fares (Figure 1).

  Figure 1

Figure 1

From there, I tried to get the data from the other csv file so that I could load the ADA and entrance type information for each station.  The only similarity between the two data files was the station names.  So I used the name from the fare file and found the element of the station name array in the entrance file that match that name.  The problem was, that the name for each station was not consistent between the files which made it difficult to match the two.  One might have said 42 St Port Authority while the other just said Port Authority.  Or one said 42 St Times Square while the other just said Times Square.  After many different attempt to match these two names, I decided to simplify my idea and just create a graphic for the fare types.  I replaced the ellipses with more meaningful symbols and colors and finished the sketch.  Figure 2 shows the final sketch which can also be found here.

Week 6: Finding Nemo

This week I created a finding nemo game. I started with a simple webpage with a title, a button and a slider. First I added a canvas and an ellipse to the page (Figure 1).

  Figure 1

Figure 1

Then I animated this ellipse based on the mousePressed function.  If the ellipse was clicked on, it would shrink in size (Figure 2).

Figure 2

From there, I added many ellipses.  The slider changes the number of ellipses shown and the button changes whether you will inflate or deflate the ellipse when you click on it (Figure 3). 

Figure 3

 At this point the framework for the sketch was made I just needed to add the images to the sketch.  I also included a feature that moves Dory toward Nemo when the user clicks on Nemo.  The final result can be seen at this link or in Figure 4

Figure 4

Week 5: Snowfall

This week I experimented with classes in javaScript.  To do this I created a snowfall scene with unique snowflake instances.  First, I made one snowflake using a rotate and repeat method around its center (Figure 1). 

  Figure 1 : First snowflake

Figure 1: First snowflake

I placed this snowflake into a class and created two snowflake instances.  Adjusting different elements of the snowflake class changes the look of the individual snowflakes (Figure 2).

  Figure 2 : Adjusting snowflake parameters

Figure 2: Adjusting snowflake parameters

Next I created a move() function within the snowflake class to animate the two snowflakes (Figure 3).  When the snowflakes move just past the height of the screen, they move back to the top and repeat the falling motion.  This creates the look of a continuous snowfall.

Figure 3: Two snowflakes falling

In the end, I created an array of many unique snowflakes and displayed them falling at different rates (Figure 4).  The final result can be viewed at this link.  I had some trouble trying to get each individual snowflake to rotate about its own center as it fell.  If I were to continue this project I would work on solving that problem and add more variation to the look of each snowflake. 

Figure 4: Snowfall

Once I completed this project, I used serial input to connect this animation to an Arduino for my Pcomp homework. I adjusted the sparkle of each snowflake using the location of a potentiometer. Figures 5&6 show the results.

Figure 5

Figure 6

Week 4: Grid Pattern Animation

This week I used functions and arguments to make color patterns in a p5 sketch.  I first created a function that drew a grid of circles on the screen.  Then I created two functions that animated the grid.  This resulted in different patterns based on the color and speed of the animation.  In addition, the variables in the code are organized into objects in order to create clear and repeatable code.  The following videos show some examples of different variations of the pattern based on speed and color changes.  

Figure 1

Figure 2

Figure 3

Figure 4

Figure 5

Figure 6

Week 3: Moon Animation

This week I worked with Emily Lin to develop an animating moon sketch.  Together we came up with an idea to make an interactive animated moon image.  Originally we planned to have the sketch resemble Figure 1.

  Figure 1:  Original Plan

Figure 1: Original Plan

The sketch would contain three sliders, a moon slider that changes the phase of the moon, a night sky slider that changes the color of the sky, and a star slider that changes the brightness of the stars.  Once we got started we realized this was a bit ambitious for a one week project so we decided to focus on a design with just one slider that changes the color of the sky and the phase of the moon together.  Then we would have stars animating in the background, without an interactive element.  Once we had this plan we experimented with ways to make the moon.  We considered making the moon out of bezier curves but ultimately decided this would be too complicated to manipulate once we incorporated the animation.  Eventually we decided to develop images of the phases of the moon in Illustrator and load them into the sketch.  Sample illustrator images are shown in Figure 2.

Depending on the location of the slider, we could display a corresponding moon phase image using an array of moon phases and mapping that array to the slider.  Once we developed this plan we split up the work.  Emily developed the star animation and the illustrator files with 100 phases of the moon while I developed the slider and mapped the moon images and background color to the slider.  Emily also developed her own slider in order to grasp that concept on her own.  First, I developed the slider and mapped the background color to a range that resembled the range of a night sky.  This slider toggles the variable ‘dragged’ between true and not true depending on the pressed/released state of the users mouse.  If the mouse is dragging the slider, the slider rectangle moves with the mouse.  The general concept of this slider was loosely base on this example provided in the syllabus for ICM.  Then I used the moon images that Emily provided to tackle displaying the moon phases.  I used the function loadImage() to load each image in the preload() function and then displayed the image in the draw() function using image().  Doing this with one image worked wonderfully, however a unique problem arose when I implemented a for loop in order to load all of the moon images into an array.  Somehow the size of the images got compressed into a 1 pixel by 1 pixel image while using a for loop.  I could not solve this problem alone, so I eventually decided to hardcode just 7 moon images into the file to create a less smooth animation of the moon phases.  I loaded each image in the preload() function individually and then displayed the image based on the location of the slider.  Since these moon images were not in an array anymore, I did not use the map() function to map the images to the slider.  Instead I used if statements to determine which image should be displayed based on the location of the slider.  

Once we each developed our parts, Emily and I met to go over our sketches and combine them.  Working with Emily was wonderful. We took time to go through both of our sketches so we each understood the others work.  After we met, we decided to use a timeInterval() to flash the stars so that they could slow down without affecting the slider interaction.  Emily implemented this timeInterval() into our code.  The final result can be seen here. Both Emily and I would love to work together in the future to improve this sketch and perhaps add the other two sliders that we originally planned on making.  

Figure 3 shows a video of the final program. 

Figure 3: Final Moon Animation

Week 2: Animated Elephant

This week I modified my previous program to accommodate the guidelines of this week’s assignment.  My goals could be divided into three parts.  First, I wanted to animate the elephant’s trunk dependent on the position of the users mouse.  Second, I wanted to add a message cloud to the elephant image that displays the word “Hello” in a different way each time you run the code.  Lastly, I wanted to change the color scheme of the elephant so that it randomly changes color over time. 

To achieve this goal, I modified my previous planning method to accommodate the way I would code these new effects.  Figure 1 shows the diagramed plan that I made.

  Figure 1 : Plan

Figure 1: Plan

First I re-drew the elephant and re-numbered the triangles that made up the elephant.  The way I numbered them this time allowed me to group them into body parts.  This made them easier to decipher and group in the code.  The list of which triangles belong to which body part is represented on the right of the figure in the following groups; back leg, front leg, body, ear, face, and trunk 1.  I then drew a triangle configuration for a new trunk (called trunk 2) which was used to animate the elephant with the movement of the mouse.  I lettered each vertex on the elephant and on the new trunk and listed them below the elephant sketch.  I copied the coordinates associated with each vertex from the previous weeks plan onto this drawing.  Using p5, I drew the new trunk (Figure 2) and recorded their desired coordinate positions on the plan.

  Figure 2 : Trunk 2

Figure 2: Trunk 2

To keep the color mapping consistent, I created a color scheme plan (top right of Figure 1).  Here I referred to the previous weeks project and noted which triangles were made the same color.  For instance, triangles 2 and 6 were the same color in my previous drawing, so I assigned them to be the color ‘c2.’  This way the randomizer will make triangles 1&2 different, for example, but keep 2&6 the same.  

Now I was ready to tackle the drawing in p5.  I first redrew my elephant with variables in order to clean up the code.  I also used comments to organize the triangles by body part.  Using an if statement I alternated trunk 1 and trunk 2 dependent on the position of the users mouse.  Trunk 2 included the message bubble and text.  Figure 3A&B represent the drawing when the mouse is on the left and right sides of the screen, respectively.

Using an array, I randomized what language the message would say hello in.  Every time the page is reloaded, the message displays the word hello in one of ten languages.  To randomize the color scheme, I assigned a random number generator for the RGB ranges within each color group (c1, c2, c3, etc).  I then applied those color fills to the appropriate triangles using the c1, c2, c3, etc variables.  The biggest problem that arose at this point was that the color randomization was happening every time the code looped.  Thus, the colors were changing so fast it looked like the image was flashing and created an epileptic effect.  In order to trouble shoot this problem, I changed the frame rate of the program.  This slowed down the transition of colors but also delayed the user interaction with the mouse position.  In order to slow the color transitions without affecting the mouse interaction I eventually implemented the timeInterval() function instead of the frameRate() function.  In this instance I created my own function and called it through the setup function every half second. The final result is represented here or in Figure 4.

The problems that I faced this week cause me to think creatively about how I would write my code in a clear way and still execute the goals I made for myself.  While the planning took a long time, I think that it gave me a clear path for developing the code.  I also was happy with how I spit the problem into three sections.  First I implemented the animation, then randomized the message, then randomized the color scheme.  This made it easy to debug as I went.  The ultimate solution to the color issue took some trial and error.  With each solution, new problems arose that I had to figure out.  If I were to continue this project, I would further organize my code such that the randomizing functions were placed inside a for loop.  I also might add more languages to the program through a web search, instead of a hard coded array.  This would shorten the code and eliminate human error like typos. Overall, I am happy with the way the final product turned out. 

Week 1: Elephant Drawing

For my Week 1 drawing sketch I developed an elephant out of triangle elements.  Elephants are my favorite animal and the mascot of Tufts University, where I got my undergraduate degree.  I also wear an elephant necklace almost everyday.  

Once I decided to make an elephant for my sketch I completed a quick google search for elephant sketches.  In my search I was inspired by this image of an elephant sketched out of triangles and other basic shapes (Figure 1).

  Figure 1 : Inspiration sketch

Figure 1: Inspiration sketch

I sketched out my own version of this elephant, simplifying the shape in a way that I could recreate in p5 (Figure 2).

  Figure 2 : Paper sketch/map

Figure 2: Paper sketch/map

As you can see from Figure 2, I first labeled each triangle with a distinct number. Then, starting from #1, I mapped out each triangle into my p5 sketch.  Along the way, I recorded the coordinates of each vertex so that I could easily connect the triangles as I went.  In order to stay consistent and not mix up the coordinates, I started with the vertex on the bottom most point of each triangle and then worked my way clockwise.  This way the mapping of each triangle was the same for any adjustments I made later. The coordinates were more or less guessed based on the way I drew my initial paper drawing.  Eventually I ended up with a p5 sketch that resembled my original drawing (Figure 3).

  Figure 3 : Initial p5 line sketch

Figure 3: Initial p5 line sketch

Once this was complete, I played around with color and fill() to incorporate some depth into the image.  I also removed the stroke lines to enhance the final image.  My process is shown in the video below (Figure 4).

Figure 4: Process

The final product is shown in the image below…

  Figure 5 : Final Product

Figure 5: Final Product

Overall, I am pleased with how this sketch came out and the method I developed to execute it.  My system of recording the coordinates sped up this process quite a bit.  I also think that the method of sketching without a fill initially was an efficient use of time.  In the beginning I was planning to use rectangles and ellipses in addition to triangles in order to add more complexity to the image.  Once I began coding, however, I noticed that we do not have the tools yet to rotate shapes so triangles seemed like the best shape to implement.  I could manipulate the vertices of the triangles using the triangle() function without needing to know how to rotate the triangle.  I think my lack of computational knowledge here taught me a great coding lesson.  In coding, there is never one way to do something.  In this case my lack of the rotation commands forced me to find a new way to get a similar outcome.  I imagine I will come across this type of problem a lot as I continue this term in computational media. My code is made mostly of changing the fill color,  drawing a triangle and repeating.  I see how the repetition could be solved and shortened with the use of conditional statements that we will learn later in the semester.  I also could see how an algorithm might be able to be developed in order to choose the coordinates of the vertices instead of using a guessing system.  While developing this sketch, I found the addition of color to be the most difficult of this process.  There are so many combinations of colors to choose from and finding an assortment that I liked for this sketch took some time.  There were some instances where I was attempting to get a general shade of one color and ended up with a completely different color.  I am definitely going to need to practice using the RGB color system.  Using the p5 editor for this project was generally enjoyable, I don't have any complaints about it yet.

Week 1: How Computation Applies to my Interests

Since I have some coding background, I am really excited to dive deeper into computing and to learn new languages.  These new languages will allow me to develop more creative projects that hopefully integrate the physical and computing world.  I also have noticed how powerful and informative interactive mappings and graphics can become.  I would love to use p5.js to develop data driven maps or graphics that convey a message or teach something to the user.  It would be especially appealing to use interactive mapping/graphics in a way that addresses an important cause or issue that faces the world today.  The most pressing issue that would be interesting would be to find ways to express the gravity of climate change and the things we can do to make a positive difference for our environment. 

Along these lines, I envision the projects that I make this term to fall under these categories: combining physical objects with computing and interactive mappings/graphics.  A few months ago, the New York Times created what became a popular graphic entitled An Extremely Detailed Map of the 2016 Election.  I found this project to be extremely interesting and informative.  I spent hours searching and zooming around this map to understand my own district as well as districts in places I have never been.  This map provides a wonderful user experience while informing the user in extreme detail.  While I understood why the political map of the United States is shifted red due to the vast difference in populations of states, it wasn't until I explored this map that I truly felt like I grasped the population disparity and how that impacts elections. Seeing all of this information in this way provides an understanding of the information that really could not be grasped before seeing this map.  Developing maps and experiences like this one would be a wonderful way to explore my new computational skills this term.  Since I am a mechanical engineer, I am also interested in potentially combining my physical computing class with this one to see what types of physical projects I could develop and enhance with my computing knowledge.