Processing.js

Basic Demos

Basic demonstrations of how Processing works, from the Processing.org web site. All of the following demos were written by Casey Reas and Ben Fry unless otherwise stated.

Processing.org Basic Demos


Structure

Statements and Comments
Coordinates
Width and Height
Setup and Draw
No Loop
Loop
Redraw
Functions
Recursion
Recursion 2
CreateGraphics


Form

Points and Lines
Shape Primitives
Simple Curves
Pie Chart
Vertices (Note: Canvas can't do all styles of curved vertex.)
Triangle Strip (Note: Only normal triangles are drawn.)
Bezier
Bezier Ellipse


Data

Variables
Integers and Floats
True/False
Characters and Strings (Firefox 3)
Datatype Conversion
Variable Scope


Control

Iteration
Embedded Iteration
Conditionals 1
Conditionals 2
Logical Operators


Math

Increment/Decrement
Operator Precedence
Modulo
Distance 1D
Distance 2D
Sine
Sine and Cosine
Sine Wave
Additive Wave
Polar to Cartesian
Arctangent
Graphing 2D Equation
Random
Double Random
Noise 1D
Noise 2D
Noise 3D
NoiseWave


Typography

Letters (Firefox 3)
Words (Firefox 3)


Image

Displaying
Background Image
Pointillism
Transparency
Sprite
Alphamask (Note: Canvas can't alpha-blend properly.)
CreateImage


Color

Hue
Saturation
Brightness
Color Wheel
Reading
Creating
Relativity
Linear Gradient


Transform

Translate
Scale
Rotate
Triangle Flower
Arm


Input

Mouse 1D
Mouse 2D
MousePress
Mouse Signals
Easing
Constrain
Storing Input
Mouse Functions
Keyboard
Keyboard Functions
Milliseconds
Clock


Arrays

Array
Array 2D
Array Objects


Objects

Objects
Multiple Constructors
Composite Objects (Note: Canvas can't do all styles of curved vertex.)
Inheritance
Neighborhood


Web

Embedded Links