P5js Examples
Learning through examples
On this page we have done a concentrated effort in curating a set of simple examples that can quickly get you started with making awesome things in p5 js. We are using the web editor, so all you have to do is to click the link and start exploring the code. For you to save your edits you need to make a copy of the sketch in the file menu so it can be added to your user.
The examples are specifically for making interactive installations and should be considered a supplement to the many basic examples presented in the p5 environment.
This base template has been designed to be a good starting point for interactive installations. We have done the following deviations from the standard sketch in p5 js:
Scrolling has been disabled (this allows for multitouch on a mobile application)
The canvas is stretched to the full width and height of the frame it is in.
Pressing the key 'f' will turn the screen into full screen mode.
There is an ellipse that follows the mouse for you to get started.
This is similar to the base template, but with a simple graphical user interace so you quickly can create buttons, scrollbars etc.
This example using pose tracking with tenserflow to create a skeleton of the whole body. This serves for easy ways of creating interactive installations. You can:
Detect when somebody is in the room.
Detect their movement.
Track multiple skeletons and their interaction with each other.
This example attempts to determine your facial expressions. This can be used for:
Interactive installations where people make stupid faces.
Detect the precense of a face in the frame.
This sketch also makes detailed feature detection, which can be useful.
This sketch looks for connected gamepads and shows the values on the screen. You can use this for:
Games where players are controlled by a gamepad.
Interactive installations where instead of writing advanced logic the interaction is controlled by a hidden "player".
Take the controller apart and wire up larger buttons etc so the controller becomes another interface than a controller.
For testing compability of your gamepad use this:
The leap motion controller is an advanced controller for tracking fingers and hands. With the controller you can:
Design interactive environments where you can use your hands to grab and hold things.
Design virtual interfaces where things are controlled in the air.
Make a rock, scissor, paper game.
Create a sign language interpreter.
For the leap motion controller to work, you need to install the appropriate driver and have the hardware:
This sketch shows how to get multitouch up and running. This probably only works on mobile/tablet platforms with native multitouch support. You can use this for:
Making a drawing application.
Making an interface in which multiple people can interact at the same time.
Try it on your mobile phone here:
For more advanced pressure based multitouch have a look at pressure js
Mobile phones and tablets has an accelerometer in them. This can be accessed via p5.js and used for:
Interactivity where tilting the phone is a part of the interaction.
Games where people should shake their phone as furiously as possible.
Interactive installations where the phone is strapped on the body to detect movement. e.g. converted into sound.
Cube example:
This sketch makes a sound play. This allows you to trigger a sound when something happens. In this case when the mouse is pressed:
Voice recognition is now becoming a simple API call. This example shows you how to use the browser ability to do so. It is specifically designed to run continuously. With this you can:
Create installations where your voice is the command.
Create poetic installations that accumulate phrases from people around you.
Play with language - the api (in Google Chrome) is language agnostic.
(Security warning - anything you say will be send to an online server and back to you again)
Text to speech is an integrated part of modern web systems. This little sketch speaks out a text allowing you to make interactions that are based on voice instead of visual feedback.
Projection mapping is an versatile way of making projection based installations on 3D surfaces and can give a beautifull illusion of objects travelling on the surfaces.
You can map the different canvasses by pressing "SHIFT + SPACE".
Be aware that the setup() and draw() logic has been replaced with an object oriented approach in which multiple canvasses are created. This will be confusing for beginners.
Having a graphical user interface can be an efficient way to experiment with different settings. This little example shows you how to make one.
Example of object recognition. It is based on ml5 and uses a list of known objects. Do not expect it to know every object, but it can still be used for interactive experiments.
Briliantly simple machine learning system. Train samples to different levels on the slider. Then set it to predict.
Getting the sound input out as a frequency spectrum is good for all kinds of usefull things. Use it to visualise music or use it to react to different tonal sounds.
The list below are interesting projects which I have yeat to convert in to p5js - ide. It is a todolist for myself, but also for your inspiration:
https://blog.tensorflow.org/2019/11/updated-bodypix-2.html
https://github.com/tensorflow/tfjs-models/tree/master/facemesh
https://github.com/tensorflow/tfjs-models/tree/master/handpose
Other interesting projects examples
Good examples of machine learning: https://andreasref.github.io/ml5js/
Library for visual and physics: http://haptic-data.com/toxiclibsjs
Touch and pressure library for mobile phones: http://tangiblejs.com/
Pitch detection: https://github.com/ml5js/ml5-examples/tree/master/p5js/PitchDetection
Networking sketches: https://github.com/peers/peerjs/tree/master/examples
Vr Ar libraries
https://samples.argonjs.io/jsartoolkit/index.html
https://artoolkit.github.io/jsartoolkit5/examples/index.html
https://stemkoski.github.io/AR-Examples/
This base template has been designed to be a good starting point for interactive installations. We have done the following deviations from the standard sketch in p5 js:
Scrolling has been disabled (this allows for multitouch on a mobile application)
The canvas is stretched to the full width and height of the frame it is in.
Pressing the key 'f' will turn the screen into full screen mode.
There is an ellipse that follows the mouse for you to get started.
This base template has been designed to be a good starting point for interactive installations. We have done the following deviations from the standard sketch in p5 js:
Scrolling has been disabled (this allows for multitouch on a mobile application)
The canvas is stretched to the full width and height of the frame it is in.
Pressing the key 'f' will turn the screen into full screen mode.
There is an ellipse that follows the mouse for you to get started.
This base template has been designed to be a good starting point for interactive installations. We have done the following deviations from the standard sketch in p5 js:
Scrolling has been disabled (this allows for multitouch on a mobile application)
The canvas is stretched to the full width and height of the frame it is in.
Pressing the key 'f' will turn the screen into full screen mode.
There is an ellipse that follows the mouse for you to get started.