WEEK 11: Creative Programming: P5JS Project
(March 27 & 29)

To Do This Week:

Game Project – DUE April 3rd

Explore and play around with P5js



  1. my p5js starter template  | ZIP download
  2. p5js examples
  3. p5js get started  | p5js overview
  4. p5js reference
  5. p5js online editor
  6. p5js video tutorial



View Audio/Video Projects

P5js Project
Due April 10th

Processing Overview
P5js (Processing for JavaScript) is a library, like jQuery, that makes it easy to create complex drawing and animations using Canvas and additional built-in Processing methods. Below are resources and a starter template (download the zip) which includes the p5js file. Look at theses resources in order to see how p5js works. Have fun.


  1. my p5js starter template  | ZIP folder
  2. p5js examples
  3. p5js get started  | p5js overview
  4. p5js reference
  5. p5js online editor
  6. p5js video tutorial


Final Project: 20%

The Final Project is quite open, but it must include your own scripting in JavaScript (jQuery is optional) and design with HTML/CSS. You have worked on small scripting projects, worked with an API and had the chance to write your own scripts in a creative way. Now is the time to put all of these skills together in a project for your portfolio. The subject and genre may be anything, but you will have to design something that involves user interaction with multimedia. Multimedia means using text, images, video, audio, maps in an integrated way. JavaScript and jQuery can be used to get data, add animation, create galleries, create dynamic video/audio, interactive elements, generative/random procedures  -anything you want. 

  • I encourage future developers to learn a JavaScript framework (such as the very popular React) for this project. I will take into account the effort to learn a new framework.
  • I encourage designers to explore methods of animation and interactivity that use JavaScript with jQuery or another framework.  An interactive learning module or animated infographic would be good in your portfolio.
  • I encourage game developers to work in teams. Please talk to me about this as I can point you to tutorials for building HTML5  games with Canvas.
  • You will be graded on your own scripting using JavaScript (30%), interface and interaction design (30%) and the completion of the content (30%).
  • Small group projects (max 2 people) are allowed, but you must work together on thinking through both the JavaScript and the design.
  • In the next three weeks, we will begin each class discussing 2-3 final projects in progress. This means that you must make progress after each class. If you are not making progress, this will be reflected on your final grade.
  • On your Final Projects, include a brief statement (as a link or pop-up) and commented-out description (on the html page) about the sources you used (include links) and how/what your scripted.

Student 477 Projects: