Rectangle Packing in a Perlin Flow Field - Part 1 of 2 - p5.js generative art

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


Duration: 18:25
4,254 views
166

In this video, I go over the p5.js code for rectangle packing in a Perlin noise field. Includes how to do rectangle packing, rotating the pixels of a rectangle, and using Perlin noise to control the rotation. This is part 1 of 2. In part 2, I'll go over creating a center of rotation on the canvas, and also go more in depth on how I did the color.

The Code:
https://editor.p5js.org/StevesMakerspace/sketches/AWvuvS1VG

Video part two:
https://youtu.be/EMMRHmHt69Y

Rotate rectangle example code:
https://editor.p5js.org/StevesMakerspace/sketches/afXkFZtfR

Matthew Hughes on Twitter:
https://twitter.com/tasty_plots

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


2022-10-23Using Erase Function in p5.js to Make Interesting Shapes
2022-10-16Shadowy Edges & Making Shapes using Vertex in p5.js
2022-10-14My First fxhash Drop! Auction Watch Party & Code Review
2022-10-11My First Art Project on fxhash! #shorts
2022-10-09How to Buy Clean NFT Art on fxhash and objkt using Tezos, Coinbase, and Temple wallet
2022-09-12Watercolor Effect and Paper Texture in p5.js
2022-08-29Final Variations for Flow Packing Code - p5.js creative coding gen art
2022-08-28Placing shapes and images inside of shapes - Clipping masks in p5.js
2022-08-16The Best Art-Maker I've Ever Made - p5.js generative art creative coding
2022-08-07Creating a Center of Rotation - Part 2 of Rectangle Packing in a Noise Field - p5.js generative art
2022-08-07Rectangle Packing in a Perlin Flow Field - Part 1 of 2 - p5.js generative art
2022-07-31Coding a Quad Art-Maker in p5.js
2022-07-26Adding Perlin Noise to My WIP Art Maker - p5.js generative art
2022-07-17Art Maker WIP - p5.js generative art
2022-07-10Making Simple Patterns in p5.js
2022-06-26Fan Creations in Scrap Mechanic - including an entire city!
2022-06-25MidJourney - Awesome AI Art Generated from Text Prompts
2022-06-22Perlin Noise Art - p5.js
2022-06-09Color Mixing for Generative Artists in p5.js
2022-06-05Generative Art from a 3D Landscape in p5.js
2022-06-043D Landscape Generation in p5.js (no moving around)


Tags:
p5js
coding in p5js
learn to code
art generator
computer art
digital art
generative art
algorithm art
dynamic painting
creative coding
p5.js programming
digital painting
new media art
p5.js art maker
generative art process
creative coding process
perlin noise
perlin noise art
p5js perlin noise
p5js generative art
p5js creative coding
rectangle packing
p5js rectangle packing
rectangle packing flow field
noise flow field