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

Описание: 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:    • How to Code Generative Art using p5.js  

Grid art with blur and posterize:
https://editor.p5js.org/StevesMakersp...

Reference for linear gradient:
https://developer.mozilla.org/en-US/d...

Easy canvas resize:
https://editor.p5js.org/StevesMakersp...

Getting time passed:
https://editor.p5js.org/StevesMakersp...

Gaussian distribution edges:
https://editor.p5js.org/StevesMakersp...

Video on shadow edges:
   • Shadowy Edges & Making Shapes using Vertex...  

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:   / discord  

Follow me on Twitter:   / stevemakerspace  

Steve's Patreon page:   / steves_makerspace