September 2019

Educational p5js projects

  • tomsmith 

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

Image Classification

https://editor.p5js.org/tom.smith/sketches/mAEZ-iEb3 and web cam. What is the web cam seeing?

Colour-tracking https://editor.p5js.org/remarkability/sketches/4zNOq4_hM of video file.

Video pixel editing: https://editor.p5js.org/remarkability/sketches/M4_UIloN1

SLOGANS images generator

Text to Lightning https://editor.p5js.org/remarkability/sketches/qslz9Oma5

Markov Chat App: https://editor.p5js.org/tom.smith/sketches/qhUQsgsAb

Strobes

https://editor.p5js.org/remarkability/sketches/eLgsAa8yQ Expanding squares.

https://editor.p5js.org/tom.smith/sketches/PGsap0whV Contrasting colours.

Fire

Geo YouTube

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

https://editor.p5js.org/tom.smith/sketches/7TcOKWjYq

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

The p5js documented examples don’t work. https://editor.p5js.org/tom.smith/sketches/tLh1bT9Cq

Boris-a-clipse

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.

https://editor.p5js.org/remarkability/sketches/xefxQJ1sa Video shape kaleidoscope.

And Devil Woman https://editor.p5js.org/remarkability/sketches/w9lVCWxN7 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.

https://editor.p5js.org/tom.smith/sketches/bcyE7v3Xu

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.

Air

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.
http://projects.everythingability.com/local/noise/

Example Falling Boxes – not finished/started.
http://projects.everythingability.com/local/physics-sign/

More Audio Experiments

Simple Tone.js experiment? Working? Nope
http://projects.everythingability.com/local/simplesofa/

Simple Tone example – not there…
http://projects.everythingability.com/local/simpleToneExample/

Very simple Tone.js https://editor.p5js.org/remarkability/sketches/dMNXMRW3q another https://editor.p5js.org/remarkability/sketches/emItp7klU https://editor.p5js.org/remarkability/sketches/dMNXMRW3q

Solfa Cipher
http://projects.everythingability.com/local/sofa/
Turns text into mid, music and other things, configurable.

SOUNDFONTS Nice + standard p5js!
http://projects.everythingability.com/local/soundfonts/

All Trees https://editor.p5js.org/tom.smith/sketches/mp0Wk5yhf

Something -Basic Firebase projects
http://projects.everythingability.com/local/something/

Text to speech – working?
http://projects.everythingability.com/local/speaker/

Falling letter blocks
http://projects.everythingability.com/local/textmatter/

Slogans with Firebase – Markov experimentation taking commercial and poltical slogans scraped from Wikipedia and generating new ones.
http://projects.everythingability.com/local/slogans/

Camera as dots

https://editor.p5js.org/remarkability/sketches/pPWWOBgUl

https://editor.p5js.org/remarkability/sketches/BFgF_4Ii0 How to draw a spiral.

Nexus UI

https://editor.p5js.org/remarkability/sketches/gWWapOyzP

See: https://nexus-js.github.io/ui/

Posenet

Simple Posenet Example



Text To Points https://editor.p5js.org/remarkability/sketches/xOfuCNUVZ

Disunion Jack

https://editor.p5js.org/remarkability/sketches/ZE0rC9aCL