Square Lines

p5.js Tutorials
Tutorials
/
p5.js Tutorials
/
Animation
/
Square Lines
Previous:
Animation

Square Lines

One of the things I love about p5.js is the concept of a sketch. Just like you doodle on paper without thinking about it, you can doodle with code without a real end goal in mind ahead of time.

I had some time to fill while waiting for a flight. So, inspired by the kind of doodle I absent-mindedly draw during boring meetings, this sketch starts with a point at the top edge, then draws a line to the right edge, then to the bottom, to the left, and finally back to the top. And just for fun I had to add some random colors.

The result is a slowly filling square of randomly colored lines. I’ll let you decide whether it’s art, but coding this sketch beat staring at my phone. 🛩️

square filled with yellow lines square filled with grayscale lines square filled with red and blue lines

Previous:
Animation

Animation Examples

Falling Line Falling Line

Show a falling line that fills the screen.

Random Lines Random Lines

Fill the screen with random lines.

Square Fill Square Fill

Create a border of squares.

Random Walker Random Walker

Show a scribble that randomly moves around.

Bouncing Line Bouncing Line

Draw a line, pick a new color, move a bit.

Pumpkin Patch Pumpkin Patch

Fill the screen with random pumpkins.

Ghost 👻 Ghost 👻

Boo!

Random Skulls Random Skulls

Fill the screen with random skulls.

Flickering Jack-o'-Lantern Flickering Jack-o'-Lantern

Animate a flickering Jack-o'-lantern.

Square Lines Square Lines

Fill a square with lines.

Add Your Own Example Add Your Own Example

Add your own example to Happy Coding.

Comments

Happy Coding is a community of folks just like you learning about coding.
Do you have a comment or question? Post it here!

Comments are powered by the Happy Coding forum. This page has a corresponding forum post, and replies to that post show up as comments here. Click the button above to go to the forum to post a comment!