Learning objectives

We’ll eventually be using our Photons to send data to the internet to
use it later, but first we’ll be getting data from the internet.
It’s convenient to be able to look at that data in a nice way, so our
very first step is to be able to visualize it. In this assignment,
you’ll be learning your way around the Paper.js
web graphics library.

Deliverables

Getting set up

Learning

Paper.js is a great library, but—like many useful things—it has a
bit of a learning curve. As usual, it’s best to go through some
tutorials. First, go through the following tutorials on the Paper.js
tutorial page:

Getting Started: Working with Paper.js

Geometry (all)

Paths (all)

Projects & Items: Working with Items

Then take a look at this
walkthrough which
shows a number of very simple things you can do.

Finally, have a look at the Paper.js
examples, and note that you can view
the source by clicking in the upper-right corner.

Set up for local development

Your web browser wants to keep you safe. One way it does this is by
preventing random web pages from accessing files on your computer.
This is usually a good thing! But for this assignment, it’s a little
annoying because you’ll be reloading your test page a lot and
loading Javascript files every time from somewhere else can get
annoying fast.

In order to do this assignment, you’ll need to install a local web
server. You already have npm installed from the Arduino basics
assignment, so we can use it to install a web server, too. Simply open
up a terminal and type npm install -g http-server.

Understand the example

Now have a look at the paper_example.html and paper_example.js
files and understand what’s going on in them. The basic idea is that
every 10 milliseconds or so, the myDraw() function is called with a
semi-random value (generated via a Perlin
noise-like function).
Later, we’ll use real data instead of noise.

What to do

Your goal is simple: modify the code in the example files to make your
own visualization. Pretending that the code is receiving “real” data,
you should use Paper.js to visualize this data in an interesting,
attractive, creative, and/or fun way.

The requirements are:

Visualize the semi-random data using Paper.js. This can be via a
graph or something more abstract.

Your visualization should be significantly different from my
example. My example is provided only as an example that I wrote in
15 minutes and yours should be significantly nicer and more
interesting.

Update the visualization in realtime as new data is provided.

Feel free to calculate properties such as the rate of change,
positive/negative-ness, or so on, and visualize those instead or in
addition to the raw data.

You can use extra files, extra libraries, rename functions, and so
forth.

As usual, be very clear about attribution, including the resources
you used for learning.

Turning in

Please zip up your files, including paper-full.js and name the zip
file according to the usual convention:
javascript_viz-<yourname>.zip. I should be able to unzip
this file, run a local webserver, and open your .html file and see
your visualization. You might want to test this out in a different
directory to ensure it works.

Grading

See the syllabus for how much this
assignment contributes to your final grade. The grade for this
assignment is determined as follows: