Educational p5js projects

  • tomsmith 

Just some bits and bobs that are useful for learning p5js, or bits that I might use later.

Image Classification and web cam. What is the web cam seeing?

Colour-tracking of video file.

Video pixel editing:

SLOGANS images generator

Text to Lightning

Markov Chat App:

Strobes Expanding squares. Contrasting colours.


Geo YouTube

An example of displaying YouTube videos, in the background, and fired off by the user’s location (mobile) – unfinished.

Drag-n-drop Image Example (that works) .

The p5js documented examples don’t work.


Example of zooming faded images.

Tory Leadership

This is an example of tinting and fading between images. It also shows how to load a .csv file and read its data/images.

Blending between images, loading CSV of image URLs.

Chicken Kaleidoscope

An example of “chopping shapes” from images and then rotating them. Video shape kaleidoscope.

And Devil Woman is an example of taking the web-cam and creating a cheesy Cliff Richard effect.

Eyes and Teeth Webcam

Using face recognition and a web camera.

Audio Experiments

Simple FFT Visualisation

Working with audio and audio visualisations

Working with audio synthesis.

Animated Gifs

This is just an example of how to use one. Using an Animated Gif in p5js requires using a library. See the index.html file to see how to add it. You can do it by creating a DOM image, but that’s another story… I need lots of these sorts of examples for when/if I work with kids. I have just discovered the p5.Play.js library that makes game creation and interaction ridiculously easy. I need to explore that more.


A very simple automatic synth sounds… Sounds like Eno. Part of the problem I have with audio synthesis, Tone.js and the like is that a lot of the time I don’t know how to make a “nice sound”. Why aren’t there tools that let me shape the sound, and then copy-and-paste the code.

Black and white cow shaped noise – slow but maybe useful to make Friesians or maps later.

Example Falling Boxes – not finished/started.

More Audio Experiments

Simple Tone.js experiment? Working? Nope

Simple Tone example – not there…

Very simple Tone.js another

Solfa Cipher
Turns text into mid, music and other things, configurable.

SOUNDFONTS Nice + standard p5js!

All Trees

Something -Basic Firebase projects

Text to speech – working?

Falling letter blocks

Slogans with Firebase – Markov experimentation taking commercial and poltical slogans scraped from Wikipedia and generating new ones.

Camera as dots How to draw a spiral.

Nexus UI



Simple Posenet Example

Text To Points

Disunion Jack