For this in-class activity you are going to have two parts to complete.

Part 1

  1. First, complete your in-class from last week on making an interactive visualization.
  2. Second, update your HCI portfolio (from week 8) with a link to your interactive visualization.

Part 2

  1. We have learned about color, so let us apply it in P5JS by following the tutorial here
    • You will learn how to use the color commands, and understand the differenc between stroke and fill.
    • The tutorial covers the additive colors used in computing, as well as transparency.
  2. Finally, we will complete this tutorial:
    • Last class there was some discussion about "why not use just a regular html image"
    • Understanding that an image in html is different than an image in processing is important. Images in processing we can manipulate using the processing library. Here is a simple example that we could not do with regular html.
    • HTML however, is great for statically laying out images that will not need to be interacted with or changed.
    • Choosing which should be static or dynamic, should be apparent to users so they know what they can and cannot interact with.

(Optional)Part 3

  1. There are some nice examples here showing more simple processing examples.
  2. If you have time, there is an optional D3 page here with many example visualizations. Some of these are ones that we have discussed previously in class. You can begin to explore them and think about how p5js and d3 could be used to work together.
  3. In particular, there is one colorblind friendly example to view.


Note that in-class activities are part of your participation grade, and participating will help you perform well on your assignments. You do not have to formally submit anything, (however I take notes of who participated!).