Blue Squares

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:

Calling Functions

Blue Squares

This sketch creates a gradient of blue squares.

Remix Ideas

Show a gradient of red squares.
Add more squares.

Previous:

Calling Functions

Calling Functions Examples