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
5 runs ♦ 0 likes
Created: 16 Jun 2021
Modified: 2 Sep 2021
Drag an image file onto the canvas to see it displayed.
weather
15 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
6 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
4 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
13 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
19 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
9 runs ♦ 0 likes
Created: 16 Jun 2021
Modified: 1 Sep 2021
Load a video, manipulate its pixels and draw to canvas.
Textures
7 runs ♦ 0 likes
Created: 16 Jun 2021
Modified: 1 Sep 2021
Images and videos are supported for texture.
Video Canvas
3 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
24 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
8 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
11 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
10 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
10 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
7 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
5 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
6 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
3 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
4 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
3 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
6 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
3 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
3 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
4 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
4 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
2 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
2 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
2 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
2 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
3 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
2 runs ♦ 0 likes
Created: 20 Jun 2021
Modified: 14 Jul 2021
Demonstrates the syntax for creating an array of custom objects.
Iteration
2 runs ♦ 0 likes
Created: 20 Jun 2021
Modified: 14 Jul 2021
Iteration with a "for" structure to construct repetitive forms.
Embedded Iteration
2 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
2 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
3 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
6 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
5 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
4 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
2 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
2 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
2 runs ♦ 0 likes
Created: 20 Jun 2021
Modified: 14 Jul 2021
The lerpColor() function is useful for interpolating between two colors.
Radial Gradient
3 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
3 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
2 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
2 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
2 runs ♦ 0 likes
Created: 20 Jun 2021
Modified: 14 Jul 2021
Render a simple sine wave. * Original by Daniel Shiffman.
Additive Wave
3 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
4 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
2 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
5 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
3 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
3 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
2 runs ♦ 0 likes
Created: 20 Jun 2021
Modified: 14 Jul 2021
Using 1D Perlin Noise to assign location.
Noise Wave
2 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
4 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
2 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
2 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
4 runs ♦ 0 likes
Created: 20 Jun 2021
Modified: 14 Jul 2021
Demonstration of multiple force acting on bodies
Particle System
3 runs ♦ 0 likes
Created: 20 Jun 2021
Modified: 14 Jul 2021
This is a basic Particle System
Flocking
2 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
3 runs ♦ 0 likes
Created: 20 Jun 2021
Modified: 14 Jul 2021
A basic implementation of John Conway's Game of Life CA
Multiple Particl...
5 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
4 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
2 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
2 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
2 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
2 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
2 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
5 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...
2 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
5 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
4 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
3 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
2 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
2 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
3 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
3 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
2 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
5 runs ♦ 0 likes
Created: 16 Jun 2021
Modified: 7 Jul 2021
Click and drag the mouse to draw a line.
Patterns
4 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
4 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
4 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
4 runs ♦ 0 likes
Created: 16 Jun 2021
Modified: 7 Jul 2021
There are six 3D primitives in p5 now.
Sine Cosine in 3D
3 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
5 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
4 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
2 runs ♦ 0 likes
Created: 16 Jun 2021
Modified: 7 Jul 2021
Moving the mouse changes the position and * size of each box.
Mouse Press
2 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
3 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
3 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
5 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
3 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
4 runs ♦ 0 likes
Created: 16 Jun 2021
Modified: 7 Jul 2021
Generative painting program.
Acceleration Bal...
7 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:

Website copyright Ancient Brain. 2018-2021.
Users retain ownership of user content.

Platforms      Stats      The name      Terms and conditions

Call for partners      Contact

Call for partners!
If you are interested in writing a programming course, textbook or tutorial videos, Ancient Brain is looking for partners. We will work with you, and integrate your course into the site. This is an opportunity for someone looking to develop a course or textbook to partner with a site to support it and promote it.