Drag the background!
P5 Editor porting project

Port to Ancient Brain of P5 Editor built-in sketches. Source: editor.p5js.org/p5/sketches. Port done by: Joseph Lyons. Done with permission. URL of each World is in code comment at top.

Userid: p5editor
Joined: 14 Jun 2021
Country: United States  

Uploads
owned by this user
Drop
8 runs ♦ 0 likes
Created: 16 Jun 2021
Modified: 2 Sep 2021
Drag an image file onto the canvas to see it displayed.
weather
33 runs ♦ 0 likes
Created: 16 Jun 2021
Modified: 2 Sep 2021
This example grabs JSON weather data from www.metaweather.com
create an elemen...
6 runs ♦ 0 likes
Created: 20 Jun 2021
Modified: 2 Sep 2021
create an element, pass in a pointer
piano simulator
9 runs ♦ 0 likes
Created: 16 Jun 2021
Modified: 2 Sep 2021
Play a song. * You will need to include the * <a href="http://p5js.org/reference/#/libraries/p...
Input and Button
6 runs ♦ 0 likes
Created: 20 Jun 2021
Modified: 2 Sep 2021
Input text and click the button to see it affect the the canvas
Modifying the DOM
4 runs ♦ 0 likes
Created: 20 Jun 2021
Modified: 2 Sep 2021
Create DOM elements and modify their properties every time * draw() is called
Kaleidoscope
21 runs ♦ 0 likes
Created: 20 Jun 2021
Modified: 1 Sep 2021
A kaleidoscope is an optical instrument with two or more reflecting surfaces tilted to each othe...
Slider
22 runs ♦ 0 likes
Created: 20 Jun 2021
Modified: 1 Sep 2021
Move the sliders to control the R, G, B values of the background.
video Pixels
11 runs ♦ 0 likes
Created: 16 Jun 2021
Modified: 1 Sep 2021
Load a video, manipulate its pixels and draw to canvas.
Textures
8 runs ♦ 0 likes
Created: 16 Jun 2021
Modified: 1 Sep 2021
Images and videos are supported for texture.
Video Canvas
5 runs ♦ 0 likes
Created: 16 Jun 2021
Modified: 1 Sep 2021
Load a video with multiple formats and draw it to the canvas
Video Canvas
8 runs ♦ 0 likes
Created: 20 Jun 2021
Modified: 1 Sep 2021
Load a video with multiple formats and draw it to the canvas.
Convolution Reverb
29 runs ♦ 0 likes
Created: 16 Jun 2021
Modified: 1 Sep 2021
The p5.Convolver can recreate the sound of actual * spaces using convolution. Convolution takes...
Materials
9 runs ♦ 0 likes
Created: 16 Jun 2021
Modified: 14 Jul 2021
There are five types of materials supported. * They respond to light differently. * Move your ...
soundFormats
9 runs ♦ 0 likes
Created: 16 Jun 2021
Modified: 14 Jul 2021
Technically, due to patent issues, there is no single * sound format that is supported by all ...
Pan Sound
13 runs ♦ 0 likes
Created: 16 Jun 2021
Modified: 14 Jul 2021
Click mouse to play the sound. Ball position follows mouse and correlates to panning of sound.
Sound Measuring ...
10 runs ♦ 0 likes
Created: 16 Jun 2021
Modified: 14 Jul 2021
Analyze the amplitude of sound with * p5.Amplitude. is the magnitude of vibration. Sound is vib...
Sound Filter LowPass
12 runs ♦ 0 likes
Created: 16 Jun 2021
Modified: 14 Jul 2021
Apply a p5.LowPass filter to a p5.SoundFile. * Visualize the sound with FFT. * Map mouseX to...
Delay
11 runs ♦ 0 likes
Created: 16 Jun 2021
Modified: 14 Jul 2021
Click the mouse to hear the p5.Delay process a SoundFile. * MouseX controls the p5.Delay Filte...
Sound Effect
9 runs ♦ 0 likes
Created: 16 Jun 2021
Modified: 14 Jul 2021
Play a sound effect when the mouse is clicked inside the circle.
Load and Play Sound
5 runs ♦ 0 likes
Created: 16 Jun 2021
Modified: 14 Jul 2021
Load sound during preload(). Play a sound when canvas is clicked.
Preload SoundFile
6 runs ♦ 0 likes
Created: 16 Jun 2021
Modified: 14 Jul 2021
Call loadSound() during preload() to ensure that the * sound is completely loaded before setup(...
Play Mode
5 runs ♦ 0 likes
Created: 16 Jun 2021
Modified: 14 Jul 2021
In 'sustain' mode, the sound will overlap with itself. * In 'restart' mode it will stop and the...
SmokeParticles
10 runs ♦ 0 likes
Created: 20 Jun 2021
Modified: 14 Jul 2021
description a port of Dan Shiffman's SmokeParticleSystem example originally * for Processing. C...
Coordinates
4 runs ♦ 0 likes
Created: 26 Jun 2021
Modified: 14 Jul 2021
All shapes drawn to the screen have a position that is * specified as a coordinate. All coordin...
Width and Height
5 runs ♦ 0 likes
Created: 26 Jun 2021
Modified: 14 Jul 2021
The 'width' and 'height' variables contain the * width and height of the display window as def...
Setup and Draw
6 runs ♦ 0 likes
Created: 26 Jun 2021
Modified: 14 Jul 2021
The code inside the draw() function runs continuously from top * to bottom until the program is...
No Loop
3 runs ♦ 0 likes
Created: 26 Jun 2021
Modified: 14 Jul 2021
The noLoop() function causes draw() to only execute once. * Without calling noLoop(), the code ...
Loop
5 runs ♦ 0 likes
Created: 26 Jun 2021
Modified: 14 Jul 2021
The code inside the draw() function runs continuously from top * to bottom until the program is...
Redraw
4 runs ♦ 0 likes
Created: 26 Jun 2021
Modified: 14 Jul 2021
The redraw() function makes draw() execute once. In this example, * draw() is executed once eve...
Functions
13 runs ♦ 0 likes
Created: 26 Jun 2021
Modified: 14 Jul 2021
The drawTarget() function makes it easy to draw many distinct *targets. Each call to drawTarget...
Recursion
9 runs ♦ 0 likes
Created: 26 Jun 2021
Modified: 14 Jul 2021
A demonstration of recursion, which means functions call themselves. * Notice how the drawCircl...
Create Graphics
5 runs ♦ 0 likes
Created: 26 Jun 2021
Modified: 14 Jul 2021
Creates and returns a new p5.Renderer object. Use this * class if you need to draw into an off-...
Points and Lines
4 runs ♦ 0 likes
Created: 26 Jun 2021
Modified: 14 Jul 2021
Points and lines can be used to draw basic geometry. * Change the value of the variable 'd' to ...
Shape Primitives
4 runs ♦ 0 likes
Created: 26 Jun 2021
Modified: 14 Jul 2021
The basic shape primitive functions are triangle(), * rect(), quad(), ellipse(), and arc(). Squ...
Pie Chart
3 runs ♦ 0 likes
Created: 20 Jun 2021
Modified: 14 Jul 2021
Uses the arc() function to generate a pie chart from the data * stored in an array.
Regular Polygon
3 runs ♦ 0 likes
Created: 20 Jun 2021
Modified: 14 Jul 2021
What is your favorite? Pentagon? Hexagon? Heptagon? No? * What about the icosagon? The polygon(...
Star
5 runs ♦ 0 likes
Created: 20 Jun 2021
Modified: 14 Jul 2021
The star() function created for this example is capable of * drawing a wide range of different ...
Triangle Strip
6 runs ♦ 0 likes
Created: 20 Jun 2021
Modified: 14 Jul 2021
Generate a closed ring using the * vertex() function and beginShape(TRIANGLE_STRIP) mode. The o...
Bezier
20 runs ♦ 0 likes
Created: 20 Jun 2021
Modified: 14 Jul 2021
The first two parameters for the bezier() function specify the * first point in the curve and t...
3D Primitives
10 runs ♦ 0 likes
Created: 20 Jun 2021
Modified: 14 Jul 2021
Placing mathematically 3D objects in synthetic space. * The box() and sphere() functions take a...
Variables
3 runs ♦ 0 likes
Created: 20 Jun 2021
Modified: 14 Jul 2021
Variables are used for storing values. In this example, change * the values of variables to aff...
True and False
3 runs ♦ 0 likes
Created: 20 Jun 2021
Modified: 14 Jul 2021
A Boolean variable has only two possible values: true or false. * It is common to use Booleans ...
Variable Scope
2 runs ♦ 0 likes
Created: 20 Jun 2021
Modified: 14 Jul 2021
Variables have a global or function "scope". For example, * variables declared within either th...
Numbers
4 runs ♦ 0 likes
Created: 20 Jun 2021
Modified: 14 Jul 2021
Numbers can be written with or without decimals. An integer * (more commonly called an int) is ...
Array
6 runs ♦ 0 likes
Created: 20 Jun 2021
Modified: 14 Jul 2021
An array is a list of data. Each piece of data in an array * is identified by an index number r...
Array 2D
5 runs ♦ 0 likes
Created: 20 Jun 2021
Modified: 14 Jul 2021
Demonstrates the syntax for creating a two-dimensional (2D) * array. Values in a 2D array are a...
Array Objects
5 runs ♦ 0 likes
Created: 20 Jun 2021
Modified: 14 Jul 2021
Demonstrates the syntax for creating an array of custom objects.
Iteration
5 runs ♦ 0 likes
Created: 20 Jun 2021
Modified: 14 Jul 2021
Iteration with a "for" structure to construct repetitive forms.
Embedded Iteration
5 runs ♦ 0 likes
Created: 20 Jun 2021
Modified: 14 Jul 2021
Embedding "for" structures allows repetition in two dimensions.
Conditionals 1
3 runs ♦ 0 likes
Created: 20 Jun 2021
Modified: 14 Jul 2021
Conditions are like questions. * They allow a program to decide to take one action if * the an...
Conditionals 2
3 runs ♦ 0 likes
Created: 20 Jun 2021
Modified: 14 Jul 2021
We extend the language of conditionals from the previous * example by adding the keyword "else"...
Logical Operators
3 runs ♦ 0 likes
Created: 20 Jun 2021
Modified: 14 Jul 2021
The logical operators for AND (&&) and OR (||) are used to * combine simple relational statemen...
Load and Display...
3 runs ♦ 0 likes
Created: 20 Jun 2021
Modified: 14 Jul 2021
Images can be loaded and displayed to the screen at their * actual size or any other size.
Background Image
3 runs ♦ 0 likes
Created: 20 Jun 2021
Modified: 14 Jul 2021
This example presents the fastest way to load a * background image. To load an image as the bac...
Transparency
3 runs ♦ 0 likes
Created: 20 Jun 2021
Modified: 14 Jul 2021
Move the pointer left and right across the image to change its * position. This program overlay...
Alpha Mask
4 runs ♦ 0 likes
Created: 20 Jun 2021
Modified: 14 Jul 2021
ask * @description Loads a "mask" for an image to specify the transparency in * different part...
Create Image
3 runs ♦ 0 likes
Created: 20 Jun 2021
Modified: 14 Jul 2021
The createImage() function provides a fresh buffer of pixels to * play with. This example creat...
Pointillism
3 runs ♦ 0 likes
Created: 20 Jun 2021
Modified: 14 Jul 2021
By Dan Shiffman. Mouse horizontal location controls size of * dots. Creates a simple pointillis...
Blur
4 runs ♦ 0 likes
Created: 20 Jun 2021
Modified: 14 Jul 2021
A low-pass filter that blurs an image. This program analyzes every pixel in an image and blends ...
Convolution
12 runs ♦ 0 likes
Created: 20 Jun 2021
Modified: 14 Jul 2021
Applies a convolution matrix to a portion of an image. Move mouse to apply filter to different p...
paint erase picture
7 runs ♦ 0 likes
Created: 20 Jun 2021
Modified: 14 Jul 2021
An example of how to simulate coloring image with the copy() method.
Hue
2 runs ♦ 0 likes
Created: 20 Jun 2021
Modified: 14 Jul 2021
Hue is the color reflected from or transmitted through an * object and is typically referred to...
Saturation
2 runs ♦ 0 likes
Created: 20 Jun 2021
Modified: 14 Jul 2021
Saturation is the strength or purity of the color and * represents the amount of gray in propor...
Brightness
5 runs ♦ 0 likes
Created: 20 Jun 2021
Modified: 14 Jul 2021
This program adjusts the brightness of a part * of the image by calculating the distance of eac...
Color Variables
4 runs ♦ 0 likes
Created: 20 Jun 2021
Modified: 14 Jul 2021
This example creates variables for colors * that may be referred to in the program by a name, r...
Relativity
3 runs ♦ 0 likes
Created: 20 Jun 2021
Modified: 14 Jul 2021
Each color is perceived in relation to other colors. The top * and bottom bars each contain the...
Linear Gradient
3 runs ♦ 0 likes
Created: 20 Jun 2021
Modified: 14 Jul 2021
The lerpColor() function is useful for interpolating between two colors.
Radial Gradient
15 runs ♦ 0 likes
Created: 20 Jun 2021
Modified: 14 Jul 2021
Draws a series of concentric circles to create a gradient * from one color to another.
Lerp Color
5 runs ♦ 0 likes
Created: 20 Jun 2021
Modified: 14 Jul 2021
Loop random shapes, * lerp color from red to blue.
Increment Decrement
3 runs ♦ 0 likes
Created: 20 Jun 2021
Modified: 14 Jul 2021
Writing "a++" is equivalent to "a = a + 1". * Writing "a--" is equivalent to "a = a - 1".
Operator Precedence
2 runs ♦ 0 likes
Created: 20 Jun 2021
Modified: 14 Jul 2021
If you don't explicitly state the order in which an * expression is evaluated, they are evaluat...
Distance 1D
4 runs ♦ 0 likes
Created: 20 Jun 2021
Modified: 14 Jul 2021
Move the mouse left and right to control * the speed and direction of the moving shapes.
Distance 2D
8 runs ♦ 0 likes
Created: 20 Jun 2021
Modified: 14 Jul 2021
Move the mouse across the image to obscure * and reveal the matrix. Measures the distance from ...
Sine
2 runs ♦ 0 likes
Created: 20 Jun 2021
Modified: 14 Jul 2021
Smoothly scaling size with the sin() function.
Sine Cosine
3 runs ♦ 0 likes
Created: 20 Jun 2021
Modified: 14 Jul 2021
Linear movement with sin() and cos(). * Numbers between 0 and PI*2 (TWO_PI which angles roughly...
Sine Wave
4 runs ♦ 0 likes
Created: 20 Jun 2021
Modified: 14 Jul 2021
Render a simple sine wave. * Original by Daniel Shiffman.
Additive Wave
7 runs ♦ 0 likes
Created: 20 Jun 2021
Modified: 14 Jul 2021
Create a more complex wave by adding two waves together. * Original by Daniel Shiffman
PolarToCartesian
6 runs ♦ 0 likes
Created: 20 Jun 2021
Modified: 14 Jul 2021
Convert a polar coordinate (r,theta) * to cartesian (x,y): x = rcos(theta) y = rsin(theta) * O...
Arctangent
4 runs ♦ 0 likes
Created: 20 Jun 2021
Modified: 14 Jul 2021
Move the mouse to change the direction of the eyes.<br>The atan2() function computes the angle f...
Linear Interpolation
6 runs ♦ 0 likes
Created: 20 Jun 2021
Modified: 14 Jul 2021
Move the mouse across the screen and the symbol will follow. * Between drawing each frame of th...
Double Random
5 runs ♦ 0 likes
Created: 20 Jun 2021
Modified: 14 Jul 2021
Using two random() calls and the point() * function to create an irregular sawtooth line. * Or...
Random
6 runs ♦ 0 likes
Created: 20 Jun 2021
Modified: 14 Jul 2021
Random numbers create the basis of this image. * Each time the program is loaded the result is ...
Noise1D
4 runs ♦ 0 likes
Created: 20 Jun 2021
Modified: 14 Jul 2021
Using 1D Perlin Noise to assign location.
Noise Wave
3 runs ♦ 0 likes
Created: 20 Jun 2021
Modified: 14 Jul 2021
Using Perlin Noise to generate a wave-like pattern. * Original by Daniel Shiffman.
Noise2D
4 runs ♦ 0 likes
Created: 20 Jun 2021
Modified: 14 Jul 2021
Create a 2D noise with different parameters.
Noise3D
4 runs ♦ 0 likes
Created: 20 Jun 2021
Modified: 14 Jul 2021
Using 3D noise to create simple animated texture.
Random Chords
5 runs ♦ 0 likes
Created: 20 Jun 2021
Modified: 14 Jul 2021
Accumulates random chords of a circle. Each chord in translucent * so they accumulate to give t...
Map
3 runs ♦ 0 likes
Created: 20 Jun 2021
Modified: 14 Jul 2021
Use the map() function to take any number and scale it to a * new number that is more useful fo...
Parametric Equations
7 runs ♦ 0 likes
Created: 20 Jun 2021
Modified: 14 Jul 2021
A parametric equation is where x and y * coordinates are both written in terms of another lett...
Forces
5 runs ♦ 0 likes
Created: 20 Jun 2021
Modified: 14 Jul 2021
Demonstration of multiple force acting on bodies
Particle System
4 runs ♦ 0 likes
Created: 20 Jun 2021
Modified: 14 Jul 2021
This is a basic Particle System
Flocking
3 runs ♦ 0 likes
Created: 20 Jun 2021
Modified: 14 Jul 2021
Demonstration of Craig Reynolds' "Flocking" behavior. * See: http://www.red3d.com/cwr/ * Rules...
Wolfram CA
3 runs ♦ 0 likes
Created: 20 Jun 2021
Modified: 14 Jul 2021
Simple demonstration of a Wolfram 1-dimensional cellular automata
Game of Life
6 runs ♦ 0 likes
Created: 20 Jun 2021
Modified: 14 Jul 2021
A basic implementation of John Conway's Game of Life CA
Multiple Particl...
9 runs ♦ 0 likes
Created: 20 Jun 2021
Modified: 7 Jul 2021
Click the mouse to generate a burst of particles at mouse location. Each burst is one instance o...
Spirograph
3 runs ♦ 0 likes
Created: 20 Jun 2021
Modified: 7 Jul 2021
This sketch uses simple transformations to create a * Spirograph-like effect with interlocking ...
L-Systems
5 runs ♦ 0 likes
Created: 20 Jun 2021
Modified: 7 Jul 2021
This sketch creates an automated drawing based on a Lindenmayer * or (L-) system. L-systems are...
Spring
3 runs ♦ 0 likes
Created: 20 Jun 2021
Modified: 7 Jul 2021
Click, drag, and release the horizontal bar to start the spring.
Springs
3 runs ♦ 0 likes
Created: 20 Jun 2021
Modified: 7 Jul 2021
Move the mouse over one of the circles and click to re-position. * When you release the mouse, ...
Soft Body
2 runs ♦ 0 likes
Created: 20 Jun 2021
Modified: 7 Jul 2021
Softbody dynamics simulation using curveVertex() and curveTightness().
Brownian Motion
3 runs ♦ 0 likes
Created: 20 Jun 2021
Modified: 7 Jul 2021
Recording random movement as a continuous line. * Port of original example from the Processing ...
Chain
3 runs ♦ 0 likes
Created: 20 Jun 2021
Modified: 7 Jul 2021
One mass is attached to the mouse position and the other is attached the position of the other m...
Snowflakes
6 runs ♦ 0 likes
Created: 20 Jun 2021
Modified: 7 Jul 2021
Particle system simulating the motion of falling snowflakes. * Uses an array of objects to hold...
Penrose Tiles
4 runs ♦ 0 likes
Created: 20 Jun 2021
Modified: 7 Jul 2021
This is a port by David Blitz of the "Penrose Tile" example from processing.org/examples
Recursive Tree
8 runs ♦ 0 likes
Created: 20 Jun 2021
Modified: 7 Jul 2021
Renders a simple tree-like structure via recursion. * The branching angle is calculated as a fu...
The Mandelbrot Set
3 runs ♦ 0 likes
Created: 20 Jun 2021
Modified: 7 Jul 2021
Simple rendering of the Mandelbrot set.
Koch Curve
2 runs ♦ 0 likes
Created: 20 Jun 2021
Modified: 7 Jul 2021
Renders a simple fractal, the Koch snowflake. Each recursive level is drawn in sequence
Bubble Sort
8 runs ♦ 0 likes
Created: 20 Jun 2021
Modified: 7 Jul 2021
Sorts the randomly distributed bars * according to their height in ascending order * while si...
Stepping Feet Il...
4 runs ♦ 0 likes
Created: 20 Jun 2021
Modified: 7 Jul 2021
Stepping feet illusion is a very famous psychological experiment * Both the bricks will appear ...
Particles
4 runs ♦ 0 likes
Created: 20 Jun 2021
Modified: 7 Jul 2021
There is a light-weight JavaScript library named * particle.js which creates a very pleasing pa...
Follow 1
3 runs ♦ 0 likes
Created: 20 Jun 2021
Modified: 7 Jul 2021
A line segment is pushed and pulled by the cursor. * Based on code from Keith Peters.
Follow 2
3 runs ♦ 0 likes
Created: 20 Jun 2021
Modified: 7 Jul 2021
A two-segmented arm follows the cursor position. The relative * angle between the segments is c...
Follow 3
8 runs ♦ 0 likes
Created: 20 Jun 2021
Modified: 7 Jul 2021
A segmented line follows the mouse. The relative angle from * each segment to the next is calcu...
Snake game
35 runs ♦ 0 likes
Created: 20 Jun 2021
Modified: 7 Jul 2021
The famous snake game! Once you click run, click anywhere * inside the black area, and control ...
Wavemaker
9 runs ♦ 0 likes
Created: 20 Jun 2021
Modified: 7 Jul 2021
his illustrates how waves (like water waves) emerge * from particles oscillating in place. Move...
Reach 1
3 runs ♦ 0 likes
Created: 20 Jun 2021
Modified: 7 Jul 2021
The arm follows the position of the mouse by calculating the * angles with atan2(). Based on co...
Reach 2
3 runs ♦ 0 likes
Created: 20 Jun 2021
Modified: 7 Jul 2021
The arm follows the position of the mouse by calculating the * angles with atan2(). Based on co...
Reach 3
3 runs ♦ 0 likes
Created: 20 Jun 2021
Modified: 7 Jul 2021
The arm follows the position of the ball by calculating the * angles with atan2(). Based on cod...
Objects
4 runs ♦ 0 likes
Created: 20 Jun 2021
Modified: 7 Jul 2021
Create a Jitter class, instantiate an object, * and move it around the screen. Adapted from Get...
Multiple Objects
2 runs ♦ 0 likes
Created: 20 Jun 2021
Modified: 7 Jul 2021
Create a Jitter class, instantiate multiple objects, * and move it around the screen.
Array of Objects
4 runs ♦ 0 likes
Created: 20 Jun 2021
Modified: 7 Jul 2021
Create a Jitter class, instantiate an array of objects * and move them around the screen.
Objects 2
2 runs ♦ 0 likes
Created: 20 Jun 2021
Modified: 7 Jul 2021
Ported from example by hbarragan. Move the cursor across the * image to change the speed and po...
Inheritance
2 runs ♦ 0 likes
Created: 20 Jun 2021
Modified: 7 Jul 2021
A class can be defined using another class as a * foundation. In object-oriented programming te...
Composite Objects
3 runs ♦ 0 likes
Created: 20 Jun 2021
Modified: 7 Jul 2021
An object can include several other objects. * Creating such composite objects is a good way to...
Directional
2 runs ♦ 0 likes
Created: 20 Jun 2021
Modified: 7 Jul 2021
Move the mouse to change the direction of the light. * Directional light comes from one directi...
Mixture
2 runs ♦ 0 likes
Created: 20 Jun 2021
Modified: 7 Jul 2021
Display a box with three different kinds of lights.
Non Orthogonal R...
2 runs ♦ 0 likes
Created: 20 Jun 2021
Modified: 7 Jul 2021
This is a port by David Blitz of the "Reflection 1" example from processing.org/examples
Motion Linear
4 runs ♦ 0 likes
Created: 20 Jun 2021
Modified: 7 Jul 2021
Changing a variable to create a moving line. * When the line moves off the edge of the window, ...
Bounce
4 runs ♦ 0 likes
Created: 20 Jun 2021
Modified: 7 Jul 2021
When the shape hits the edge of the window, it reverses its direction.
Bouncy Bubbles
5 runs ♦ 0 likes
Created: 20 Jun 2021
Modified: 7 Jul 2021
based on code from Keith Peters. Multiple-object collision..
Morph
2 runs ♦ 0 likes
Created: 20 Jun 2021
Modified: 7 Jul 2021
Changing one shape into another by interpolating vertices from one to another.
Moving On Curves
3 runs ♦ 0 likes
Created: 20 Jun 2021
Modified: 7 Jul 2021
In this example, the circles moves along the curve y = x^4. * Click the mouse to have it move t...
Instantiation
3 runs ♦ 0 likes
Created: 20 Jun 2021
Modified: 7 Jul 2021
Create a p5 instance, which keeps all variables * out of the global scope of your page.
Video Capture
2 runs ♦ 0 likes
Created: 16 Jun 2021
Modified: 7 Jul 2021
Capture video from the webcam and display * on the canvas as well with invert filter. Note that...
Continous Lines
7 runs ♦ 0 likes
Created: 16 Jun 2021
Modified: 7 Jul 2021
Click and drag the mouse to draw a line.
Patterns
7 runs ♦ 0 likes
Created: 16 Jun 2021
Modified: 7 Jul 2021
Move the cursor over the image to draw with a software tool * which responds to the speed of th...
Pulses
5 runs ♦ 0 likes
Created: 16 Jun 2021
Modified: 7 Jul 2021
Software drawing instruments can follow a rhythm or abide by * rules independent of drawn gestu...
Translate
5 runs ♦ 0 likes
Created: 16 Jun 2021
Modified: 7 Jul 2021
The translate() function allows objects to be * moved to any location within the window. The fi...
Scale
3 runs ♦ 0 likes
Created: 16 Jun 2021
Modified: 7 Jul 2021
Paramenters for the scale() function are values * specified as decimal percentages. For example...
rotate
5 runs ♦ 0 likes
Created: 16 Jun 2021
Modified: 7 Jul 2021
Rotating a square around the Z axis. * To get the results you expect, send the rotate function ...
moving Arm
3 runs ♦ 0 likes
Created: 16 Jun 2021
Modified: 7 Jul 2021
This example uses transform matrices to create * an arm. The angle of each segment is controlle...
Geometries
5 runs ♦ 0 likes
Created: 16 Jun 2021
Modified: 7 Jul 2021
There are six 3D primitives in p5 now.
Sine Cosine in 3D
4 runs ♦ 0 likes
Created: 16 Jun 2021
Modified: 7 Jul 2021
Sine, cosine and push / pop could be applied in 3D as well
Multiple Lights
6 runs ♦ 0 likes
Created: 16 Jun 2021
Modified: 7 Jul 2021
All types of lights could be used in one sketch.
Ray Casting
3 runs ♦ 0 likes
Created: 16 Jun 2021
Modified: 7 Jul 2021
Original example by Jonathan Watson. Detecting the position of the mouse in 3D space with ray ca...
Orbit Control
5 runs ♦ 0 likes
Created: 16 Jun 2021
Modified: 7 Jul 2021
Orbit control allows you to drag and move around the world.
Clock
5 runs ♦ 0 likes
Created: 16 Jun 2021
Modified: 7 Jul 2021
The current time can be read with the second(), * minute(), and hour() functions. In this examp...
Constrain
2 runs ♦ 0 likes
Created: 16 Jun 2021
Modified: 7 Jul 2021
Move the mouse across the screen to move * the circle. The program constrains the circle to its...
Easing
2 runs ♦ 0 likes
Created: 16 Jun 2021
Modified: 7 Jul 2021
Move the mouse across the screen and the symbol * will follow. Between drawing each frame of th...
Keyboard
3 runs ♦ 0 likes
Created: 16 Jun 2021
Modified: 7 Jul 2021
Click on the image to give it focus and * press the letter keys to create forms in time and spa...
Mouse 1D
4 runs ♦ 0 likes
Created: 16 Jun 2021
Modified: 7 Jul 2021
Move the mouse left and right to * shift the balance. The "mouseX" variable is used * to cont...
Mouse 2D
3 runs ♦ 0 likes
Created: 16 Jun 2021
Modified: 7 Jul 2021
Moving the mouse changes the position and * size of each box.
Mouse Press
7 runs ♦ 0 likes
Created: 16 Jun 2021
Modified: 7 Jul 2021
Move the mouse to position the shape. * Press the mouse button to invert the color.
Mouse Functions
2 runs ♦ 0 likes
Created: 16 Jun 2021
Modified: 7 Jul 2021
Click on the box and drag it across the screen.
Mouse Signals
5 runs ♦ 0 likes
Created: 16 Jun 2021
Modified: 7 Jul 2021
Move and click the mouse to generate signals. * The top row is the signal from "mouseX", the mi...
Storing Input
4 runs ♦ 0 likes
Created: 16 Jun 2021
Modified: 7 Jul 2021
Move the mouse across the screen to * change the position of the circles. The positions * of t...
black to white
4 runs ♦ 0 likes
Created: 16 Jun 2021
Modified: 7 Jul 2021
Roll over the colored squares in the center of the image to change the color of the outside rect...
Sound Noise Drum...
5 runs ♦ 0 likes
Created: 16 Jun 2021
Modified: 7 Jul 2021
White Noise is a random audio signal with equal energy * at every part of the frequency spectrum
Sound Note Envelope
4 runs ♦ 0 likes
Created: 16 Jun 2021
Modified: 7 Jul 2021
An Envelope is a series of fades, defined * as time / value pairs. In this example, the envelo...
Sound Oscillator...
4 runs ♦ 0 likes
Created: 16 Jun 2021
Modified: 7 Jul 2021
Control an Oscillator and view the waveform using FFT. * MouseX is mapped to frequency, mouseY ...
Sound Mic Input
6 runs ♦ 0 likes
Created: 16 Jun 2021
Modified: 7 Jul 2021
Get audio input from your computer's microphone. * Make noise to float the ellipse. Note: p5.Au...
Sound Frequency ...
4 runs ♦ 0 likes
Created: 16 Jun 2021
Modified: 7 Jul 2021
Visualize the frequency spectrum of live audio input.
Sound Mic Threshold
4 runs ♦ 0 likes
Created: 16 Jun 2021
Modified: 7 Jul 2021
Trigger an event (draw a rectangle) when the Audio Input * volume surpasses a threshold
soud Filter BandPass
4 runs ♦ 0 likes
Created: 16 Jun 2021
Modified: 7 Jul 2021
Apply a p5.BandPass filter to white noise. * Visualize the sound with FFT. * Map mouseX to t...
Record Save Audio
4 runs ♦ 0 likes
Created: 16 Jun 2021
Modified: 7 Jul 2021
Record a sound, play it back and save * it as a .wav file to the client's computer. * We need ...
Frequency Modulation
4 runs ♦ 0 likes
Created: 16 Jun 2021
Modified: 7 Jul 2021
Frequency Modulation is a powerful form of synthesis. * In its simplest form, FM involves two o...
Amplitude Modulation
6 runs ♦ 0 likes
Created: 16 Jun 2021
Modified: 7 Jul 2021
Amplitude Modulation involves two oscillators, referred * to as the carrier and the modulator, ...
Simple Draw
6 runs ♦ 0 likes
Created: 16 Jun 2021
Modified: 7 Jul 2021
Touch to draw on the screen using mouseX, mouseY, pmouseX, and pmouseY values.
Acceleration Color
5 runs ♦ 0 likes
Created: 16 Jun 2021
Modified: 7 Jul 2021
Use deviceMoved() to detect when the device is rotated. The background RGB color values are mapp...
mobile Shake Ball
8 runs ♦ 0 likes
Created: 16 Jun 2021
Modified: 7 Jul 2021
Create a Ball class, instantiate multiple objects, move it around the screen, and bounce when to...
tilted 3d box
3 runs ♦ 0 likes
Created: 16 Jun 2021
Modified: 7 Jul 2021
Use mobile to tilt a box
shapes
2 runs ♦ 0 likes
Created: 16 Jun 2021
Modified: 7 Jul 2021
This examples includes a circle, square, triangle, and a flower
Interactivity 1
2 runs ♦ 0 likes
Created: 16 Jun 2021
Modified: 7 Jul 2021
The circle changes color when you click on it.
colour change circle
3 runs ♦ 0 likes
Created: 16 Jun 2021
Modified: 7 Jul 2021
The circle changes color when you click on it.
animate
3 runs ♦ 0 likes
Created: 16 Jun 2021
Modified: 7 Jul 2021
The circle moves.
flocking
6 runs ♦ 0 likes
Created: 16 Jun 2021
Modified: 7 Jul 2021
Demonstration of <a href="http://www.red3d.com/cwr/">Craig Reynolds' "Flocking" behavior</a>.<b...
p5 drawing
11 runs ♦ 0 likes
Created: 16 Jun 2021
Modified: 7 Jul 2021
Generative painting program.
Acceleration Bal...
11 runs ♦ 0 likes
Created: 16 Jun 2021
Modified: 16 Jun 2021
Move an ellipse around based on accelerationX and accelerationY values, and bounces when touch t...
The background is a program, showing the JavaScript graphics used on this site.
The globes light up when you log in.
 
Font:

Users retain ownership of user content.

Platforms      Stats      The name      Terms and conditions

Call for partners      Contact

Call for partners!
Ancient Brain is looking for partners. In particular, we seek a partner in writing a JavaScript coding book for schools, to be used worldwide. We will integrate your course into the Ancient Brain site. This is an opportunity for someone looking to develop a course and textbook to partner with a site to promote it. Read more.