Final Project Information and Topics (Library Choices)
For your final project, you will be required to choose a library from the list below and use it in a project. (If you are using ML5, you will also choose a model.)
No more than 2 people in each section will be allowed to choose the same library. If more than 2 people choose the same library, the first 2 to submit their choice will be able to use it, and the other student(s) will need to pick a different one. (For ML5, only 2 students can use the same model, but more than 2 students can ML5.)
There will be a Canvas assignment posted with a due date for submitting your choice of library. If you want to change your choice after the due date, this may be allowed, but not if it’s too close to the final due date for the final project.
Further assignment details including points and due dates for the final assignment and related assignments will be posted.
Functional Requirements
Here are the functional requirements for the final project:
Create an interactive game or app using p5.js and the library you selected. Your project should:
• Have a clear purpose that the user can understand. For example, if it’s a game, to win the game. If it’s not a game, it should still be an app with a purpose.
• Be interactive: do things in response to how the user interacts with it; not just be something you look at or watch.
• Do something that you couldn’t easily do with p5.js without your library.
• Be generally usable and do what it’s supposed to without any errors.
Note that there will be additional requirements about how you are required to write the code.
Topics (Library Choices)
Below is the list you may choose from, with ratings of how easy each library is to set up and to use, how flexible it is (i.e., how much potential there is to create a totally original project), and notes on usage. All libraries except p5.sound can be found at https://p5js.org/libraries/
If there is another library that depends on or is designed to work with p5.js that you find and want choose as your library for this project, discuss with the instructor.
You may use more than one library, however, one needs to be your main library choice and your grade will primarily reflect your use of that library.
You are not allowed to use p5.fillgradient, shown in class, as your main library choice for this project; however, you can use it in addition to your main library choice if you’d like.
(Note: This list does not include p5play. It has diverged from “regular” p5.js programming in many ways, and educational use now requires paid license. Check it out if you want to develop games using skills you learned in this course—you may want to use it in the future, just not for this project.)
|
Library Name
|
Setup
|
Usage
|
Flexibility
|
Notes
|
|
p5.sound(live example)
|
none
|
medium
|
high
|
Part of P5 project starter. Documentation link in main P5 reference. You need to do much more than just play an audio file if you use this!
|
|
p5.bezier
(example)
|
simple
|
simple
|
low
|
Creates Bezier curves. Need to use
extensively in original ways in final project to demonstrate understanding and be original
|
|
p5.brush (live example)
|
simple
|
medium
|
medium
|
Creates natural brushstrokes and fills.
Need to experiment with and understand more than basic features to produce a
good final project
|
|
p5.grain
|
medium
|
medium
|
medium
|
Creates "film grain" and other animated
texture effects. Requires some JavaScript knowledge beyond what's covered in class to fully use.
|
|
p5.mapper (live examples)
|
simple
|
medium
|
high
|
Creates "projection maps" of textures,
video, and even P5 sketches on to 3D and complex 2D shapes. Much creative
potential, if you go beyond the demos.
|
|
p5.marching
|
simple
|
simple
|
low
|
Converts image areas to arrays of lines. Not much documentation and requires a lot of creativity to come up with a good and original use case.
|
|
p5.pattern (live example)
|
simple
|
medium
|
medium
|
Create reusable custom patterns. Has a good tutorial. A good demo/project will at least explain and use the customPattern() function in an original way.
|
|
p5.Polar
|
simple
|
medium
|
high
|
Radial geometry with polar coordinates. Easy to make static drawings, but you
need to understand the math to make an interactive project with it!
|
|
p5.quadrille.js
|
medium
|
medium
|
high
|
Create square-based grids with P5
content and mouse awareness. Could be used for a board game. Uses concepts
from class, but requires some study.
|
|
p5grid
|
difficult
|
difficult
|
medium
|
Create hex grids, as for games. A work-in- progress with documentation in the
library. Requires research and
experimentation to use in interesting ways.
|
|
Tilemapp5js
|
difficult
|
difficult
|
high
|
Load and draw tilemaps (often used in videogames). Requires graphics and JavaScript. knowledge beyond what's covered in class to use effectively.
|