23: More Useful Functions in p5.js: How to Code Generative Art
31Another video in the series on How to Code Generative Art using p5.js. In this video, I'm going over a bunch of different things that I couldn't fit in the other videos, but that I think are useful. This includes several filters for modifying color, a shadow effect, a gradient effect, resizing the canvas, getting the time it takes for parts of your code to work, using a Gaussian distribution to make shadow edges, and some other useful functions. # beginner's guide to coding, getting started generative art p5js.
The playlist: https://www.youtube.com/playlist?list=PLnJOmsprq3bE0QLbe7wZ8yb1-Dt0FBcP5
Grid art with blur and posterize:
https://editor.p5js.org/StevesMakerspace/sketches/yUiK195H5
Reference for linear gradient:
https://developer.mozilla.org/en-US/docs/Web/CSS/gradient/linear-gradient
Easy canvas resize:
https://editor.p5js.org/StevesMakerspace/sketches/OAPpXMTC_
Getting time passed:
https://editor.p5js.org/StevesMakerspace/sketches/5YxtfMBDR
Gaussian distribution edges:
https://editor.p5js.org/StevesMakerspace/sketches/m1xg_A6nZ
Video on shadow edges:
https://youtu.be/IY9bYwWiGLs?si=Wca7ka__khiiDjii
Here is the syntax to go with some of the native JavaScript functions:
drawingContext.filter = `hue-rotate(${hueShift}deg)`;
drawingContext.filter = 'blur(12px)';
drawingContext.filter = 'drop-shadow(10px 15px 10px black)'; //offsetX offsetY shadowBlur shadowColor
See the code links above for examples of each.
https://p5js.org/
Join my Discord: https://discord.gg/FSW6zzU
Follow me on Twitter: https://twitter.com/SteveMakerspace
Steve's Patreon page: https://www.patreon.com/steves_makerspace