Using a Buffer Canvas as a Data Source for p5.js Generative Art

Channel:
United States Steve's Makerspace
Subscribers:
7,360
Published on ● Video Link: https://www.youtube.com/watch?v=rqz1izotBWA


Duration: 15:13
1,193 views
57

In this p5.js video, I go over how to use a buffer canvas as a data source for your generative art. You can use color on multiple buffer canvases to obtain your drawing's colors, shape types, rotation angles, and where to place objects. I go over some simple examples. Code below.

Example code with triangles, circles, & squares:
https://editor.p5js.org/StevesMakerspace/sketches/T_bW8TXEf

Example code with a simple flow field plus circles:
https://editor.p5js.org/StevesMakerspace/sketches/rfBT7Jhs4

Join my Discord: https://discord.gg/FSW6zzU

Follow me on Twitter: https://twitter.com/SteveMakerspace

Music:
Funk Down (Sting) by MK2 (theme)



Other Videos By Steve's Makerspace


2023-10-16Combining ml5 PoseNet and p5play to manipulate objects with my body - p5js
2023-10-10Replacing p5play Blocks with Custom Generative Blocks
2023-10-10Introducing p5play: a Physics and Game Engine for p5js - with coding example
2023-08-03How I made String Theory - Generative Art Homage to Jackson Pollock in p5.js
2023-05-14Debrief of Two More Gen Art fxhash Projects made in p5.js
2023-05-13Discussing Four of My Gen Art Projects on fxhash - made with p5.js
2023-04-29Animating the Drawing Process of Your Static Art in p5.js
2023-04-13Getting Started with fxhash params and fxlens using Visual Studio Code - full tutorial for artists
2023-04-08Adding Circular Flow to a Flow Field with Generative Artist Jeff Palmer - p5.js
2023-03-19Making a Static Flow Field in p5.js
2023-03-05Using a Buffer Canvas as a Data Source for p5.js Generative Art
2023-01-23How to Sell on fxhash - How to Get Started, Guide
2023-01-23How to Resize Your Art in p5.js, especially for selling on fxhash
2023-01-03Composition Elements for Generative Art - p5.js creative coding, art composition
2023-01-02Made in 10 Minutes Genuary Prompt p5.js - Perlin noise field with the letters of g-e-n-u-a-r-y
2022-12-04How I Made "Hex-a-Sketch" Art Project - Hexagonal Truchet Tiling Made Sketchy with p5.js
2022-11-27Truchet Tiling with Octagons in p5.js
2022-11-26Truchet Tiling with Hexagons in p5.js
2022-11-20Making Truchet Tiles in p5.js
2022-11-07Use Any Color in Shape Intersections - Overlapping Shapes in p5.js
2022-10-23Using Erase Function in p5.js to Make Interesting Shapes


Tags:
p5js
coding in p5js
learn to code
art generator
computer art
digital art
digital painting
p5js creative coding
p5js gen art
generative art
p5js tutorial
createGraphics
p5js generative art
buffer canvas
generative art buffer canvas
buffer canvas as data