Learning
Tutorials for this page are under construction. Please take a look at the basic demos on the right for some great examples of how to use Processing.js.
Custom Built / "Found In the Wild" Demos
A live, molten, bar and pie chart.
Artistic water-color style drawing.
A snake that chases your mouse cursor.
Basic Demos (91 Total)
All of the following demos were written by Casey Reas and Ben Fry unless otherwise stated.
Using buffers to draw multiple, simultaneous, canvases.(Firefox 3, Opera 9.5)
Simple, but elegant, shape drawing.
Drawing lots of simultaneous circles to create an impressive effect.
Eyes following your mouse cursor!
Simple implementation, beautiful result.
Generating smooth waves.
Re-sampling the points of an image.
Dynamically drawing multiple, dynamically-generated, transparent, images.(Firefox, Opera 9.5)
Scaling and moving blocks based on mouse position.
Random Ellipses drawn using bezier curves.
Remembering the movement of a mouse.
Drag, Drop, and Hover with mouse.
Translating keyboard presses into colors.
A simple clock.
Topical Demos (51 Total)
All of the following demos were written by Casey Reas and Ben Fry unless otherwise stated.
Multiple draggable handles.
Wolfram's Cellular Automata
Conway's Game of Life
Animator (builds an animation out of drawing).
Drawing a pattern with shapes.
Dynamically pull colors from an image.
Adjusting brightness on an image.(Firefox, Opera 9.5)
Scanning the pixels of an image.(Firefox, Opera 9.5)
Drag image portions using a scrollbar.
Dynamic histogram drawn over an image.
Bouncing, colliding, bubbles.
A sort-of pong clone.
Ball bouncing on a dynamic surface.
Ball bouncing on a rocky surface.
Flexible spring.
Springy circles
Bouncing physics and joints.
Simple particle system.
Birds flocking together.
Koch Fractal
Mandelbrot Fractal(Firefox, Opera 9.5)
Dynamic Tree Fractal
Soft Body Dynamics
