Technical Lectures 09-02

Some creative coding basics

12-minute presentation about the constrain() and map() functions in p5.js:

12-minute presentation about shaping functions (tweens) in p5.js:

12-minute presentation on how to export frames for the loop:

Let’s dig in to some specifics of creative graphics programming.

If you’d like more information, here are some Coding Train videos that might be helpful for you:

Shaping Functions

Shaping functions (also called easing functions, tweens, and unit generators) can be used to create nonlinear movement.

  • Luke DuBois’ p5.js-func (JavaScript) is a proper p5.js library which you can include into your project.
  • My Pattern_Master (Processing/Java) is just a collection of functions. You’ll have to copy/paste code directly to use the functions you want.

Here’s a how-to-use-p5func in the Editor: 

  • Go to Download the zip.
  • Unzip the archive. Locate p5.func.min.js in its ‘lib’ folder.
  • At the, create a new sketch (File > New).
  • In your sketch, click on the small > character to open up your files.
  • Click the V character, select ‘Add file’.
  • Drag the p5.func.min.js into the indicated region.
  • In your index.html file, add the p5.func.min.js script to the head. (See the image below.)
  • Win!
  • See Luke’s animation demo
  • Golan’s ultra-minimal demo
  • Golan’s plot demo
  • Golan’s color gradient demo

Your index.html and project should look like this: