WEEK 13: P5js Animations
(April 7 & 9)

To Do This Week

Weather App  DUE this Wednesday, April 16th

P5js Project (5%)
Due April 16th

 

 

Generative Art with P5js

Processing Overview

P5js (Processing for JavaScript) is a library 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.

p5js.org/ : processing > javascript for fun and art, creative programming

P5js

  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

draw():  executes the code contained within its block repeatedly, allowing for the animation and interaction within the canvas. It’s where most of the dynamic drawing code goes.

fill(): Sets the color used to fill shapes.

arc(): Draws an arc or a portion of an ellipse. 
P5js : arc(x, y, w, h, start, stop, [mode], [detail]);
HTML5 Canvas: arc(x, y, radius, startAngle, endAngle, counterclockwise)

Generative Techniques -Amy Goodchild

  • randomness / pseudorandomness
  • rules, instructions, algorithms, math
  • natural systems

The random() function in p5.js generates pseudorandom numbers. It can return a floating-point number between 0 and 1, a number within a specified range, or a random element from an array, depending on how it’s used. It’s useful for introducing unpredictability and variation in sketches.

The noise() function in p5.js generates Perlin noise, which produces smooth, natural-looking sequences of numbers. Unlike random numbers that jump abruptly, values from noise() change gradually and predictably, making them ideal for creating organic patterns, textures, and motions in generative art and animations.

John Conway’s Game of Life (P5js simultaion)

Vera Molnar

Generative Artists:

Michael Hansmeyer

Generative Art In-class Exercise

Examples:

Student Pairings

Tyler Hobbs, Fidenza 313 / About the making of 

Flow Fields:
Creating a flow field with p5.js involves simulating a fluid-like motion by placing particles in an invisible vector field, where each vector influences the direction and speed of the particles moving over it. Below is a simple example of a flow field in p5.js embedded in a one-page HTML5 document. This example uses Perlin noise to generate the vector directions for a more organic flow.
JavaScript Canvas with Processing (P5js) -Flow Fields
Description by Tyler Hobbs