For this assignment, you’ll learn to use a Javscript visualization library to show data in nice-looking ways.
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.
Getting set up
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
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.
Now, do these things:
- Pick a folder on your computer where you want to put your project.
- Save the following files to the folder you chose (right-click, Save):
- Open the terminal and change into that directory.
http-serverand hit return. You’ll see something like this:
Starting up http-server, serving ./ Available on: http://127.0.0.1:8080 http://192.168.0.6:8080 Hit CTRL-C to stop the server
Copy one of those links and paste it into your web server, and add
/paper_example.htmlto the end, so you might have
- When you hit enter, you should see the example paper visualization I made. It’s ugly! If it doesn’t load, ask for help.
Understand the example
Click this link to see the example running.
Now have a look at the
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
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.
Please zip up your files, including
paper-full.js and name the zip
file according to the usual convention:
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.
See the syllabus for how much this assignment contributes to your final grade. The grade for this assignment is determined as follows:
- Working visualization (60%)
- Updates in realtime (10%)
- Works when I unzip your file (5%)
- Significantly different visualization from example (15%)
- Attractive/creative (10%)