Mouse Ripple

p5.js Tutorials

Which Processing should I use?

Welcome to Coding

Calling Functions
- Rainbow
- Blue Squares
- Circles
- Pig
- Arcs
- Pumpkin
- Jack-o'-Lantern
- Skull

Creating Variables
- Triangle Inset
- Pumpkin (with Variables)
- Random Pumpkin
- Random Skull
- Typography

Using Variables
- Curved Grid
- Spider 🕷

Creating Functions
- drawHouse
- drawTown
- Christmas Tree
- drawCity

If Statements
- Daily Greetings
- Fizz Buzz

Animation
- Falling Line
- Random Lines
- Square Fill
- Random Walker
- Bouncing Line
- Pumpkin Patch
- Ghost 👻
- Random Skulls
- Flickering Jack-o'-Lantern
- Square Lines

Input
- Clickable Text
- Mouse Ripple
- Grouchy Face
- Warmer / Colder

For Loops
- Lines Silhouette
- Wrong Lines
- Vertical Gradient
- Flower Grid
- Spooky Text
- Menorah
- Code Rocket
- Vera Molnár Squares

Arrays
- Falling Points
- Oscillating Lines
- Fading Grid
- Pi Visualization
- Earth Moon Emoji Orbit

Using Objects
- Accumulating Snow
- Year Percent
- Numbers Station

Creating Classes
- Fireworks
- Bonsai Tree
- Loopers
- Recursive Lines
- Isometric Cubes
- Ant Colony
- Popping Circles
- Campfire
- Parallax Dots
- Ghosts 👻👻👻
- Planets
- Circle Packing

Array Functions

Images
- Genuary 19
- Image Filter
- Image Palette
- Image Blender
- Image Tiles
- Pixel Painter
- Pixel Swapper
- Pixel Sorter
- Clovers
- Poorly Coded Cats
- Truchet Tiles

From p5.js to Web Dev

Debugging

What's Next?

Editors

Hello World

Review

Libraries
- Random Notes

Random

/ / /

Previous:

Mouse Ripple

This sketch shows a ripple effect when you click the mouse.

Remix Ideas

Give each new circle a random color.
Make the ripple look more like a drop of water falling into a lake.
Add support for multiple ripples at the same time.

Previous:

Input Examples