In-Class


Last time we started learning ProcessingJS. Now we are going to use ProcessingJS to implement a Fitts's Law demo. This will give some programming knowledge, better understand a classic experiment, and give you a headstart on your medium fidelity prototype.

Your goal will be to make a program that starts, and then generates randomly sized targets. Users will select the targets using a pointing device(mouse or touchpad).
  1. Create a canvas that is 640x480
  2. When the user clicks their mouse for the first time, start the simulation.
    • Record the current time using the millis function.
    • Draw a square at a random position.
      • The random x-coordinate will be between 0-600.
      • The random y-coordinate will be between 0-400.
      • The square size will be 40x40.
      • Record the mouseX and mouseY position at this time.
    • Everytime the user presses their mouse, increment a counter.
      • If the user clicks in the box, then record how long it took.
        • Add this to an array data structure to store these times.
        • You add elements to arrays by 'pushing them'
      • Calculate the distance from the previously recorded mouseX and mouseY variables. Push these values in a separate array.
      • If the user misses the square, tally that as an error.
  3. For display you may find useful: text
  4. Consult the Reference for more commands and add at least one new element our library beyond what I have done.

The final part of this assignment is to check out some of the p5 libraries and see if they could be useful during the medium fidelity prototype stage of your project. Check out the libraries here.

And here is our full simulation!

Source code to use as a reference if you cannot solve during class

More resources to explore if you finish early.


Grading


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!).