Warmer / Colder

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:

Warmer / Colder

This sketch hides a circle, and tells you whether your mouse is getting warmer (closer) or colder (further away).

Click here to edit this code in the p5.js editor.

Remix Ideas

Add other hints like “move left” or “move right”
Show a trail of red or blue dots based on whether the user was warmer or colder
Move the shape over time

Previous:

Input Examples