Easy Generative Art and Scanner Effect with JavaScript + P5js

Code from video: editor.p5js.org/BarneyCodes/s...
Online P5js editor: editor.p5js.org
In this video I show you how to code some simple generative art using perlin noise as well as an awesome looking "scanner" effect (I have no idea what to call it, please help!). The concepts in this video will help you to create your own amazing generative art pieces and help you along in your creative coding journey!
Follow me:
Support the channel: www.youtube.com/@BarneyCodes/...
Twitter: / barneycodes
Reddit: / barneycodes
Chapters:
0:00 Intro
1:11 Background canvas
1:55 Generative background
2:28 Black and white Perlin Noise
4:44 Adding colour to the noise
6:34 Uploading a background image (if you don't want to generate it)
7:33 How the scanner effect works
7:52 Coding the scanner effect
9:30 Line issue
10:03 Moving the line
10:52 Final product
#creativecoding #p5js #javascript

[@BarneyCodes]

Do you have a better name for it than the "Scanner" effect? I'd love to know!
If you'd like to see what else I'm working on, it would be great if you could wishlist my game Star Mining Co. on Steam! s.team/a/2584800/

[@JacobTekiela]

“pixelsorting” can be made to look like this ! - often seen in after effects or ps 🙂

[@BarneyCodes]

Oh cool, I'll take a look at that effect, thanks!

[@j_uice]

Love your editing with this too, made me chuckle :)
Would love to see more generative art tutorials! I always follow along

[@j_uice]

Also explaining how the little band number to color slideshow operates thatd be interesting to hear

[@BarneyCodes]

Thanks so much, glad you enjoyed it! There should be some more generative art videos in the future, but I'm working on a pretty long video about shaders at the moment, so it might be a little while, sorry!

[@jugbrewer]

awesome! i'd also love to see how you'd code this effect in reverse - randomly generating the size and position of vertical bands and having the pixels at the top of the bands generate a noise map as they wipe down the canvas

[@BarneyCodes]

Thanks! I like the idea, it might be a bit hard to make it smooth, but I guess that's part of the challenge! Thanks for the comment :)