23: More Useful Functions in p5.js: How to Code Generative Art

Channel:

Steve's Makerspace

Subscribers:

7,360

Published on January 5, 2024 1:30:30 PM ● Video Link: https://www.youtube.com/watch?v=lNxMKPGSpBQ

Category:

Guide

Duration: 15:10

1,359 views

44

Another 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