ICM Final Project Documentation: Tracking the Vote

Description/Motivation:

For my final ICM project I decided to use data visualizations to explore what happened in the 2016 US presidential election.  As the project progressed, the motivation became one that would inform readers about our election process and why we should care. The webpage follows the votes in the 2016 elections and tells the story of how and why some voices get eliminated in the process.  Toward the end, the visualizations get manipulated in order to explore faults in our electoral college system.  Hopefully, this webpage will inform the uninformed and empower everyone to care about future elections.

Figure 1: Demonstration

Process:

At the beginning of the process I had an idea of how the webpage would look however, I did not know what the final visualizations would tell.  This resulted in an iterative exploration of the data to develop visualizations that were meaningful and purposeful to the message about voting I was trying to convey.

Figure 2 shows a brief storyboard of my initial idea.  Generally, the idea was that the story would begin with the population as a whole and slowly narrow down the number of people visualized as the voting process got explained.  Ultimately, votes in each state would be weighted against votes in other states to get a picture of whose votes matter more.

  Figure 2 : Initial Idea

Figure 2: Initial Idea

With this idea a began collecting data about voting and registration in the 2016 election.  My main, most reliable data, came from the United States Census Bureau which had voting records for the election in many different forms.  This research gave me an understanding of the data so I was able to plan my visualizations.  This was the most difficult part of the process.  I went through many iterations of how I would tell this story through visuals.  Ultimately, I decided to use the storyboard shown in Figure 3.  I would represent voters from each state using the stars in the American flag.

With this plan set, I began to code the different stages of my storyboard.  Each stage would be its own canvas so that I could embed them into the website at a later stage.  Figure4&5 show videos of progress sketches I created while building these visualizations.

Figure 4: Process Visualization

Figure 5: Process Visualization

Once I had most of the stages nearly complete, I realized that I needed to set up the webpage. This would give me a better idea of the size canvases I needed to use and how the user interactions should be implemented for the webpage.  To begin this process, I created a design layout in Illustrator to plan out how I wanted the webpage to look (Figure 6).

I then researched how to use the bootstrap library and built the html page using bootstrap and my layout design for reference. Finally, I then updated the visualizations to match the size and style of the webpage and wrote the script.  I combined all of these features into one webpage and uploaded it through github.  

For a more detailed description of the process, see previous posts on this blog.

Final Project Links:

The Website

The Website Files

The Population Visualization

The Registered Visualization

The Voters Visualization

The State by State Vote Visualization

The Value of Votes Visualization

The Winning Votes Visualization

Conclusion/Reflection:

Upon reflection this was my first webpage and first attempt at visualizations of big data.  Therefore, as a first attempt, I am quite satisfied with the result.  Of course along the way, I learned that developing useful data visualizations is hard and using html to implement is further challenging.  The visuals did not end up as striking as I had initial thought.  Perhaps, rethinking how I display the data would show the data in a more compelling way.  However, I have learned that this is the process of data visualization.  You must iterate and show the data in different ways in order to understand the full story and the best way to display the data.  The data does not lie, so the it is important to explore visuals in many ways before you jump to a conclusion.  This project certainly inspired me to work more with data visualization and research what makes visualizations successful.  I also really enjoyed building my knowledge with html and bootstrap and feel that I have a great basis to continue learning these tools. Overall, I learned a lot of new skills from this project and learned a great deal about the process of visual story telling. 

References:

  1. https://www.politico.com/story/2016/10/how-many-registered-voters-are-in-america-2016-229993

  2. https://www.census.gov/data/tables/time-series/demo/voting-and-registration/p20-580.html

  3. https://www.statista.com/statistics/273743/number-of-registered-voters-in-the-united-states/ 

  4. http://www.pewresearch.org/fact-tank/2017/05/12/black-voter-turnout-fell-in-2016-even-as-a-record-number-of-americans-cast-ballots/

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

  6. https://pixabay.com/en/usa-map-united-states-of-america-35713/

  7. https://www.youtube.com/watch?v=s7tWHJfhiyo

  8. https://www.youtube.com/watch?v=3Y3jE3B8HsE

  9. https://www.census.gov/data/tables/time-series/demo/voting-and-registration/p20-580.html (Table 4a)

  10. https://www.archives.gov/federal-register/electoral-college/about.html

  11. https://processing.org/examples/star.html

  12. https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure

  13. https://www.w3schools.com/bootstrap/bootstrap_affix.asp

  14. https://stackoverflow.com/questions/11718457/bootstrap-spans

  15. http://getbootstrap.com/docs/4.1/getting-started/introduction/

  16. https://www.youtube.com/watch?v=gqOEoUR5RHg

  17. https://www.w3schools.com/howto/howto_js_animate.asp

Week 11: Final Project User Testing Response

This week I completed user testing for my final project.  I tested four of the five stages that I have ready at this point and typed descriptions before each stage.  The responses I received from this user test was very helpful.  There are small improvements that I plan to take in to consideration for each stage as the result of this user test. 

Users seemed to generally understand the purpose of the first stage.  Even though I mentioned that each rectangle represented 40,000 people in the description, the users suggested adding an arrow and label on the sketch to make this very clear.  Since this is a very important number to grasp for the remaining stages, I think this is a good feature to implement. 

The second stage seems to be the least affective.  The fade away of the non registered voters needs to be more clear.   At its current state, the fade away is too subtle.  One user pointed me to this fivethirtyeight visualization that uses fading in a clear way.  I think I will adjust this stage to fade the non registered people into a light grey and the registered people will all have full opacity.  I also may add a stroke to make sure each individual rectangle is distinct. 

For the following stage, I am most worried that people will not wait to watch till the end of this stage.  From user testing it is clear that the layout of my website will dictate the flow. 

Overall, people liked the fourth stage and were able to easily interactive with it.  For the final stage that I have yet to complete I also got some good comments.  Someone pointed out that I should highlight the 3 states that I mentioned in the intro at the end in order to show how much those states made a difference in the the election.  I like this idea, and plan to implement it in the final stage. 

In addition to these comments, I came away with some general ideas that I want to keep in mind as a result of the user testing.  I realize that the way I format this information will be really important.  One user mentioned this link as inspiration for my layout.  I want to keep the users attention and be consistent in the design without being repetitive and boring.  In some ways I should embrace the text and create a full story that is emphasized by my visuals.  It also may be helpful to include a legend for the rectangles, stars and colors that is stationary on the page for the most clarity.  In addition I want to make sure that this website and the language I use is accessible to an international audience. I should use the extra space on the page to explain things further and make sure to use and explain my language carefully.  Lastly, someone suggested that I should make the display for each visual bigger and maybe make it a rectangle to fit better in the browser.  This is something I need to consider when I am determining my layout. 

As a result of this user test, I feel that my next steps need to be to figure out the layout and begin to set up the website html and css files.  With this I will know exactly what changes I need to make to my visualizations.  This way I won't need to make adjustments to my stages more than once. 

Week 10: Final Project Progress Update

This week I began the beginning stages of my 2016 voter visualization project.  I spent time thinking about how I will eventually display the various visualizations as a whole and how that decision would incite the development of each visualization.  Eventually, I decided to create an interactive webpage that will tell the story of the 2016 votes through individual canvases on one webpage.   A description of each canvas will fill the empty space on the webpage in order to guide the story I am trying to tell.  I went through a number of storyboards and eventually decided to pursue this one (Figure 1).

Each row of this storyboard will be a stage (or canvas) on the webpage.  In ‘Stage 0’ one rectangle representing a certain number of the of age population will expand into the entire population represented by this rectangle. ‘Stage 1’ will begin with the non registered people fading away and then the registered voters will move into an American flag formation.  Once in the flag formation, the people who did not vote will fade away while the stars (representing the 50 states) fade in.  ‘Stage 2’ begins as the screen zooms into the star section of the flag.  Then each voter rectangle is sorted into their respective states (ie. stars).  Next, in ‘Stage 3’ the votes grow based on the electoral college weights.  Then the votes will change color based on the voter parties.  Lastly, the votes of the losing party in each state will fade away.  If I have time I will add a fourth stage where the ‘over past the post’ voters fade away.  I will be left with a visualization of the votes that actually mattered in the 2016 election.  Once I had this story, I developed a project plan.  I began by collecting data for each stage.  I primarily used figure4a from the United State Census Bureau website. Using this data and the story board, I began to code the stages.  I animated ‘Stage 0’ to represent the entire population (Figure 2).  The code can be found here.

Figure 2

From here, I developed ‘Stage 1’ through three versions.  In version 1 I focused on fading out the non registered part of the population (Figure 3).

Figure 3

Then in version 2 I organized the registered population into the flag formation (Figure 4).

Figure 4

In the final version I faded out the non voters and faded in the 50 stars to complete the flag representation (Figure 5).

  Figure 5

Figure 5

Once I complete these two stages I realized that Stage 1 should be split into two stages.  The first one should just show the fade of the non registered population and the second should show the fade of the non voters.  This, I think will create a less confusing story for the final website. Overall, I am happy with how these animations turned out. While there are some small improvements to be made on these stages I plan to continue to complete the remaining stages first so I have a complete picture of the story.  If I have time in the end, I will manipulate these stages further. 

Week 9: Final Project Concept

Motivation:

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. 

References

  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.