Art Maker WIP - p5.js generative art

Channel:

Steve's Makerspace

Subscribers:

7,360

Published on July 17, 2022 11:30:08 AM ● Video Link: https://www.youtube.com/watch?v=_19WW_0Ajwk

Duration: 15:24

2,063 views

60

I'm showing off a work-in-process art maker in p5.js. I talk about how to preload many images, using a clipping mask to put a pattern inside a circle, using a floodfill algorithm to fill in irregular shapes, producing small test images that can then be expanded to a larger final version, and how I plan to use principles of art composition to improve on this work. generative art creative coding.

The Art Maker WIP:
https://editor.p5js.org/StevesMakerspace/sketches/3S6p4PHpg

Image load and mask clipping example:
https://editor.p5js.org/StevesMakerspace/sketches/ZKo1uczWR

Jeff Thompson's Masking Images video:
https://www.youtube.com/watch?v=V-8FE_IQONY

Kazuki Umeda's Masking Effect video:
https://www.youtube.com/watch?v=_Nj49oc5WO4

czartacus's floodfill post on reddit (includes his code):
https://www.reddit.com/r/p5js/comments/rhzvvr/a_flood_fill_algorithm_i_couldnt_find_any_for_p5/?utm_source=share&utm_medium=web2x&context=3

Background maker:
https://editor.p5js.org/StevesMakerspace/sketches/2b4KWvp9O

Join the Generative Discord: https://discord.gg/cbz6ePJx

Join my Discord: https://discord.gg/FSW6zzU

Follow me on Twitter: https://twitter.com/SteveMakerspace

0:00 Intro
2:03 Preloading many images
3:11 Clipping mask to put a pattern inside a circle
4:45 Picking colors and drawing shapes
6:32 Using Perlin noise to create white space
7:15 Floodfill algo for filling irregular shapes
9:26 Small test size and large final size
12:19 Art composition and ideas for improvement

Music:
Funk Down (Sting) by MK2 (theme)