The goal for this task is to be ready to do the hands-on work in class, and to be set up to do. You’ll be doing the following:
If you have problems with any of these steps, Google first, then ask on Slack.
You’ll get credit for following these instructions and being prepared in class. You’ll lose credit for not being ready to be hands-on in class.
Set up a Github account. You’ll be turning in all of your code for this class by posting it to Github. If you haven’t used Git before, you’ll want to learn about it by reading Git Basics. Github has available Windows and Mac GUIs that you can use rather than the command line. (Note: if you already have a Github account but don’t want to use it, feel free to make a new one for the purposes of this class.)
Once you have a Github account, set up a new repository for this assignment. You’ll turn it in by giving me the link to this repository. I’d suggest starting to use this repository right away while you work on this assignment.
Note: Because everything on Github is by default publically-visible, you must be extra-careful about giving attribution to code you didn’t write yourself. If in doubt, double-check the syllabus for the attribution and plagiarism policies.
Node comes with a package manager, npm; once you’ve got Node
installed, you can use npm to install different modules. For modules
you might use often you can use the
-g option (for “global”) to
install them once on your system; otherwise, the modules will be
installed in your current project directory. You use the modules with
require statement (similar to
import in Python):
var awesomeModule = require("awesomeModule");
Now all of the functionality of awesomeModule is available as the
Because Node is often used standalone (without a browser), there is an
extra step to be able to use Node modules with a web page. We need a
program called Browserify which bundles up your code and all of the
necessary Node modules into a single file you can include in your web
page. You can install Browserify with
npm install -g browserify.
While you’re at it, install Watchify the same way:
npm install -g
watchify. Watchify automatically runs Browserify anytime your file
changes, so you don’t have to remember to.
To use these programs, you’ll write all of your code in a single
require as necessary to load different
modules. In a Terminal window, change directories to your project,
watchify -d -v -o bundle.js yourfile.js (where
your main HTML file, include the generated file with
I recommend using Paper.js for visualization.
language called Paperscript which makes using it easier. In order to
take advantage of it, you’ll want to not use npm to install Paper,
but download it and install it from the site above, and include it in
your HTML file directly via
src="paperjs-v0.9.23/dist/paper-full.js"></script>. Read and work
through the Paper tutorials so you understand how to use it.
view.draw()to force an update.
--allow-file-access-from-filesargument. If you’re on a Mac, open a Terminal and run
/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --allow-file-access-from-files &; then you can close the Terminal window.
Use npm to install it and include it with
var $ =
require('jquery');. To use JQuery in Paperscript files, you’ll need
to add JQuery as a script line in your HTML file (
src="node_modules/jquery/dist/jquery.min.js"></script>) and then
reference its global variable in your Paperscript file:
var $ =
Feel free to use other libraries. If you have a favorite other than Paper, you’re welcome to use it as long as you can complete the assignment as requested.