Below are different examples to get you started with understanding how different elements work. They are intended to be bits and pieces for you to experiment with and combine.
Make sure to also look at the P5.js website, specially look at the reference and the examples.
More code examples can also be found on the examples page
This little sketch has been set up to have the best practices for configuring p5js for apps and small installations. It includes:
full screen mode (press f).
ml5 is included
custom fonts from google
a simple GUI implementation is
fixed resolution for viewing on mobile platforms
a simple statemachine for making multiple views
Programmers have a tendency to pick really ugly colors. Don't be that programmer. Use google color picker to pick colors for your experiments. The color system is based on Red, Green and Blue, so copy the RGB values in the picker.
When you start combining multiple colors, you can use adobes color trends to learn from the best when it comes to color combinations. I am using the one above this tutorial.
Color are Red, Green, Blue from 0 to 255. By mixing those three colors you can get more than 16 million different colors.
If you want the background to be blue then write:
background(0,0,255);
If you want to fill an ellipse with a semitransparent red color then add another parameter for fill like this:
fill(255,0,0,150);
ellipse(40,40,50,50);
If you want to set the stroke and not have fill then do the following
stroke(255,0,150);
noFill();
ellipse(40,40,50,50);
https://p5js.org/reference/#/p5/ellipse
Basic drawing example. By drawing an ellipse where the mouse is every frame we can draw on the canvas:
ellipse(mouseX, mouseY, 20, 20);
The reason this works is that we are not clearing the frame for each draw with background(0);
However, this makes for a very dotted drawing app. To get a continuous line we need to draw a line between the last position of the mouse (pmouseX/Y) and the current position (mouseX/Y) like so:
line(pmouseX, pmouseY, mouseX, mouseY);
More info about line, pmouseX and mouseX.
This app is a good starting point for experimenting things you can do: Change the color of the line, combine it with the change color below, combine it with the pose app further down and add randomness to make more interesting things.
Use dist() to calculate the distance between two points. Combine this with an if statement and you can change the color when the distance to the mouse is within the circle size.
if (dist(mouseX, mouseY, 240, 240) < 150 / 2) {
fill(255, 0, 0, 150);
} else {
fill(209, 157, 44, 70);
}
Another programmer mistake is to not be mindful of the fonts they are using. It is common to just use the default font or a random font. A good place to start is to look at googles fonts and see if you can find one that matches your concept. This example uses two fonts loaded directly from googles font library. To use this do the following:
Find the name and type of the font (e.g. Sans or Serif).
Load the font in setup: loadGoogleFont( 'Droid Sans');
Set the font before writing text: textFont('Droid Sans');
Picking the right font for your project is a science in itself read more here.
You can use the function keyReleased() to register a keypress
function keyReleased() {
if (key == 'a') {
print("An A was pressed");
}
}
Notice that the function "keyReleased()" is already present in the sketches. This is because it is used to full-screen when you press "f". So you only need to add the if statement within the outer curly brackets.
https://p5js.org/reference/#/p5/keyReleased
You can also make an if statement in your draw() function. Then it will do something until you release the key (e.g. moving a ball forward).
function draw() {
if (keyIsPressed === true && key='a') {
print("An A is pressed down");
}
}
Notice that the function "draw()" is already present in the sketches. So you only need to add the if statement within the outer curly brackets to the existing draw function.
https://p5js.org/reference/#/p5/keyIsPressed
Playing sound samples is a quick way to make interactive experiences. To do so you need to upload your soundsample (see info to the left). Then you need to load the sample in preload():
song = loadSound('punch.mp3');
To play the song call:
song.play();
https://p5js.org/reference/#/p5.SoundFile
Find sound effects here:
https://sound-effects.bbcrewind.co.uk/search?
A bit about using images
Visually you have three strategies for making visual illustrations. You can use the code-based drawing tools (ellipse etc.), you can use a photo or you can use a vector illustration. They are easthetically very different and mixing them usually result is a very messy expression. So choose wisely and be mindful how the overall expression comes together.
If you want to design your own vector illustrations you can use google drawing or inkscape. If you want manipulate photos gimp is a free editor. The illustration above has been made with google drawing.
First, upload the image. Then load the image in setup:
img = loadImage('star.svg');
Draw the image at a position:
image(img, 40, 40);
Make sure to use free, creative commons or public domain images for your projects so you do not run into a copyright problem if you want to publish your project at a later stage.
This example records sound from the microphone and calculates the frequencies of them. This can be used for many things. To vislusize noise levels or to react when certain frequencies get above a certain level.
The call spectrum[0] will get the value of the first frequency and so forth.
This example records sound from the microphone and calculates the amplitude of it. This can be used for many things. To vislusize noise levels etc.
amplitude.getLevel()
This returns a value between 0 and 1.
This is a pretty advanced example, but it illustrates how you can simulate physics. Try to play with the parameters at the top to see how it changes the behaviour:
let numBalls = 20;
let spring = 0.05;
let gravity = 0.03;
let friction = -0.9;
The reason the balls have light trails is that the background is semi transparent. Based on code from Keith Peters. Multiple-object collision.
This is a simple pong examle. It moves a ball around on the canvas. If the ball is within the area of the square the balls direction is reversed on the axis that collided.
A gamepad is a quite versatile input device that can be used as-is, and also be hacked into other form-factors with the right tools. It gives you a lot of analogue inputs to works with and some Arduino boards can also simulate a joystick.
When a gamepad is present you can get the different parameters with e.g.:
gamePads[0].state["LEFT_STICK_X"]
Other names for buttons and sticks:
FACE_1, FACE_2, FACE_3, FACE_4, LEFT_TOP_SHOULDER, RIGHT_TOP_SHOULDER, LEFT_BOTTOM_SHOULDER, RIGHT_BOTTOM_SHOULDER, SELECT_BACK, START_FORWARD, LEFT_STICK, RIGHT_STICK, DPAD_UP, DPAD_DOWN, DPAD_LEFT, DPAD_RIGHT, HOME, LEFT_STICK_X, LEFT_STICK_Y, RIGHT_STICK_X, RIGHT_STICK_Y
Get the current weather information. The url returns a json file with different information:
{"coord":{"lon":12.0803,"lat":55.6415},"weather":[{"id":800,"main":"Clear","description":"clear sky","icon":"01d"}],"base":"stations","main":{"temp":4.45,"feels_like":-2.73,"temp_min":3.89,"temp_max":5,"pressure":1026,"humidity":41},"visibility":10000,"wind":{"speed":6.17,"deg":310},"clouds":{"all":0},"dt":1614951920,"sys":{"type":1,"id":1588,"country":"DK","sunrise":1614923558,"sunset":1614963240},"timezone":3600,"id":2614481,"name":"Roskilde","cod":200}
Go to https://openweathermap.org/ for more information.
When things get more advanced then you often want to draw on an image instead of directly to the canvas. This allows you to send the image to machine learning, save the image and refresh elements on the screen without affecting the drawing you are making
This little example converts text to points - so you can animate and make effects with text.
This example shows you how to capture an image from the webcamera. This is a good starting point for a photobooth, stopmotion or machine learning. Etc.
Make a noisy circle
https://processing.org/tutorials/trig
https://github.com/jdeboi/p5.mapper
This little example picks the color from a webcamera
Cirkel - trigonometry / enhedscirklen example
https://www.streambeats.com/
https://www.dendigitalejournalist.dk/gratis-ressourcer/
https://unsplash.com/
Creative commons licenses
Make sure to understand the license you are using - see below for CC definitions.CC-BY-SA: ShareAlike. Anything that is licensed this way should be made available under the same license.CC-BY-NC: NonCommercial. You can’t use this file in anything that’s intended for commercial gain without written permission from the artist.CC-BY-ND: Attribution-NoDerivs. Any file released under this license should not be remixed in any way, including using it as a soundtrack to a video.https://creativecommons.org/PIE CHART
https://editor.p5js.org/hobyedk/sketches/9kimDQnVr
https://github.com/ml5js/ml5-library/tree/main/examples/p5js/StyleTransfer/StyleTransfer_Video
https://editor.p5js.org/hobye/sketches/S_Xor8D2k
https://yining1023.github.io/styleTransfer_spell/
https://blog.paperspace.com/creating-your-own-style-transfer-mirror/
https://editor.p5js.org/hobyedk/sketches/z2a-y-GW_ - jitsi integration
https://www.amygoodchild.com/blog/curved-line-jellyfish?fbclid=IwAR2R21gdQYCaaPKlQCeiKA7EEsgl6-17-jdR14VIeed_8ybIUZXZzUITUUM
https://www.facebook.com/groups/creativecodingp5/permalink/2840506846197340/
https://multivocal.org/
https://google.github.io/tacotron/index.html
https://openai.com/blog/gpt-3-apps/
http://www.wekinator.org/
- [ ] 29/06/2021 mediapipe - handtracking
- [ ] 29/06/2021 https://mediapipe.dev/
