Art Maker WIP - p5.js generative art
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)
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)