Skip to content
☰
Makeability Lab —
p5.js Examples
GitHub Repo
Physical Computing Course
Makeability Lab JS Library
Jon E. Froehlich
Animation
2 examples
Ball Bounce 1D
BallBounce1D
▶ Run
Code
Ball Bounce 2D
BallBounce2D
▶ Run
Code
Art
11 examples
Landscape Generator 1
LandscapeGenerator1
▶ Run
Code
Landscape Generator 2
LandscapeGenerator2
▶ Run
Code
Landscape Generator 2 – Santa
LandscapeGenerator2-Santa
▶ Run
Code
Landscape Generator 3
LandscapeGenerator3
▶ Run
Code
Makeability Lab Animation 1 – Grid Fade
MakeabilityLabAnimation1-GridFade
▶ Run
Code
Makeability Lab Animation 2 – Reverse Explosion
MakeabilityLabAnimation2-ReverseExplosion
▶ Run
Code
Makeability Lab Logo
MakeabilityLabLogo
▶ Run
Code
Santa To Makeability Lab
SantaToMakeabilityLab
▶ Run
Code
Simple Flower
SimpleFlower
▶ Run
Code
Sine Wave Playground
SineWavePlayground
▶ Run
Code
Triangle Santa
TriangleSanta
▶ Run
Code
Color
4 examples
Color Cube 3D
ColorCube3D
▶ Run
Code
Color Explorer 3D
ColorExplorer3D
▶ Run
Code
Color Panel 2D
ColorPanel2D
▶ Run
Code
Cross Fade Rgb 3D
CrossFadeRgb3D
▶ Run
Code
DOM
2 examples
Collapsible Sidebar Example from W3.CSS
CollapsibleSidebar1-NoP5js
▶ Run
Code
Sketch
CollapsibleSidebar2-WithP5js
▶ Run
Code
Drawing
2 examples
Ascent And Descent
AscentAndDescent
▶ Run
Code
Drawing Grid
DrawingGrid
▶ Run
Code
Games
14 examples
Cookie Monster 1
CookieMonster1
▶ Run
Code
Cookie Monster 2
CookieMonster2
▶ Run
Code
Cookie Monster 3
CookieMonster3
▶ Run
Code
FFTGame
FFTGame
▶ Run
Code
Flappy Arm
FlappyArm
▶ Run
Code
Flappy Bird
FlappyBird
▶ Run
Code
Flappy Bird 2
FlappyBird2
▶ Run
Code
Pong
Pong
▶ Run
Code
Side Scroller – Cheetah Racer
SideScroller-CheetahRacer
▶ Run
Code
Side Scroller 1 – Basic
SideScroller1-Basic
▶ Run
Code
Sidescroller 2 – With Mario Sprite Sheet
Sidescroller2-WithMarioSpriteSheet
▶ Run
Code
Simple Keyboard Game
SimpleKeyboardGame
▶ Run
Code
Snake
Snake
▶ Run
Code
Snake Speech
SnakeSpeech
▶ Run
Code
Interaction
3 examples
Drawing With Mouse 1
DrawingWithMouse1
▶ Run
Code
Drawing With Mouse 2
DrawingWithMouse2
▶ Run
Code
Drawing With Mouse 3
DrawingWithMouse3
▶ Run
Code
PerlinNoise
3 examples
Noise 2D
Noise2D
▶ Run
Code
Noise Graph
NoiseGraph
▶ Run
Code
Noise Loop
NoiseLoop
▶ Run
Code
Sound
19 examples
Frequency Bar Graph 1 – Simple
FrequencyBarGraph1-Simple
▶ Run
Code
Frequency Bar Graph 2 – Axes
FrequencyBarGraph2-Axes
▶ Run
Code
Frequency Bar Graph 3 – With Classes
FrequencyBarGraph3-WithClasses
▶ Run
Code
Frequency Bubbles 1 – Simple
FrequencyBubbles1-Simple
▶ Run
Code
Frequency Bubbles 2 – Image
FrequencyBubbles2-Image
▶ Run
Code
Frequency Spectrum 1 – Simple
FrequencySpectrum1-Simple
▶ Run
Code
Sound Level 1 – Circle Size Meter
SoundLevel1-CircleSizeMeter
▶ Run
Code
Sound Level 2 – Circle YLocation Meter
SoundLevel2-CircleYLocationMeter
▶ Run
Code
Sound Level Bubbles 1 – Simple
SoundLevelBubbles1-Simple
▶ Run
Code
Sound Level Bubbles 2 – Image
SoundLevelBubbles2-Image
▶ Run
Code
Sound Level Times Series 1 – Simple
SoundLevelTimesSeries1-Simple
▶ Run
Code
Sound Level Times Series 2 – Axes
SoundLevelTimesSeries2-Axes
▶ Run
Code
Sound Reactive Flower 1 – Sound Level
SoundReactiveFlower1-SoundLevel
▶ Run
Code
Sound Reactive Flower 2 – Frequency
SoundReactiveFlower2-Frequency
▶ Run
Code
Sound Vis 1 – Waveform And Spectrogram
SoundVis1-WaveformAndSpectrogram
▶ Run
Code
Sound Vis 2 – Now With Axis Labels
SoundVis2-NowWithAxisLabels
▶ Run
Code
Sound Vis 3
SoundVis3
▶ Run
Code
Sound Vis 4 – Improved Performance
SoundVis4-ImprovedPerformance
▶ Run
Code
Waveform Vis 1 – Simple
WaveformVis1-Simple
▶ Run
Code
Vectors
9 examples
Angle Explorer
AngleExplorer
▶ Run
Code
Angle Playground
AnglePlayground
▶ Run
Code
Bouncing Ball
BouncingBall
▶ Run
Code
Bouncing Ball With Acceleration
BouncingBallWithAcceleration
▶ Run
Code
Bouncing Balls And Line Segments
BouncingBallsAndLineSegments
▶ Run
Code
Bouncing Balls And Line Segments Improved
BouncingBallsAndLineSegmentsImproved
▶ Run
Code
Bouncing Balls And Rotating Rectangles
BouncingBallsAndRotatingRectangles
▶ Run
Code
Distance Point Line
DistancePointLine
▶ Run
Code
Magnitude Playground
MagnitudePlayground
▶ Run
Code
WebSerial
21 examples
Basic
4
Display Text Demo
DisplayText
▶ Run
Code
Simple Web Serial I/O Demo
SliderOut
▶ Run
Code
Web Serial Demo
SliderOutSuperBasic
▶ Run
Code
Simple Web Serial I/O Demo
SliderOutWithInstructions
▶ Run
Code
ml5.js
3
Hand Wave Detector
HandWaveDetector
▶ Run
Code
Hand Waver
HandWaver
▶ Run
Code
Nose Tracker
NoseTracker
▶ Run
Code
p5.js
14
Basic – Withp 5.js
Basic-WithP5js
▶ Run
Code
Blank Template
BlankTemplate
▶ Run
Code
Circle Size In
CircleSizeIn
▶ Run
Code
Circle Size In Demo
CircleSizeInDemo
▶ Run
Code
Color IO
ColorIO
▶ Run
Code
Color Serial Out
ColorSerialOut
▶ Run
Code
Display Shape Bidirectional
DisplayShapeBidirectional
▶ Run
Code
Display Shape Out
DisplayShapeOut
▶ Run
Code
Etch ASketch In
EtchASketchIn
▶ Run
Code
Graph In
GraphIn
▶ Run
Code
Paint IO
PaintIO
▶ Run
Code
Serial Template
SerialTemplate
▶ Run
Code
Shape Location In
ShapeLocationIn
▶ Run
Code
XMouse Serial Out
XMouseSerialOut
▶ Run
Code
ml5js
5 examples
HandPose
2
Hand PoseDemo
HandPoseDemo
▶ Run
Code
Hand Wave Detector
HandWaveDetector
▶ Run
Code
PoseNet
3
Elmo Generator
ElmoGenerator
▶ Run
Code
Elmo Generator Multiperson
ElmoGeneratorMultiperson
▶ Run
Code
Skeleton
Skeleton
▶ Run
Code
