Sedimentary Groove: Gen Art coding and project review in p5js

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


Duration: 0:00
754 views
61

In this video, I go over the code from Sedimentary Groove, a generative art project released on fxhash and coded with p5js. I have to be honest though: there's an important bit of the code that I can't explain. It's just weird magic.

Starter code if you want to code with me:
https://editor.p5js.org/StevesMakerspace/sketches/dZTck1-WU

fxhash project: https://www.fxhash.xyz/generative/30721

Final code from the tutorial: https://editor.p5js.org/StevesMakerspace/sketches/8XEPUNSQ-

About fixing Perlin noise:
   • 16: Introduction to Perlin Noise in p...   at 11:30

https://p5js.org/

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

Follow me on BlueSky: https://bsky.app/profile/stevesmakerspace.bsky.social
Twitter: https://twitter.com/SteveMakerspace

Steve's Patreon page: https://www.patreon.com/steves_makerspace

0:00 Intro
0:57 Frame
1:32 Color shuffle
4:57 Starter code for main project
5:54 Color map of Perlin noise space
8:20 Using the Pixel Array
13:13 Adjusting Perlin noise
16:03 Adding a gradient
17:27 The final mystery ingredients
23: 43 Adding blank space
24:51 Outro



Other Videos By Steve's Makerspace


2025-03-24Real 3D in p5js - Uses 3D Glasses
2025-03-09Let's Talk - Channel Update & What Steve's Up To
2025-03-02How I Made Little Galleries - p5js generative art
2025-01-05Sedimentary Groove: Gen Art coding and project review in p5js
2024-05-25Fun with MoveNet plus p5play and p5js - Creative Coding
2024-05-14Gen Art Code Review: Surrender to the Dance
2024-01-0724: Where to go from here; the creative process; big list of resources: How to Code Generative Art
2024-01-0523: More Useful Functions in p5.js: How to Code Generative Art
2024-01-0322: Deeper Dive into Color in p5.js: How to Code Generative Art
2024-01-0121: Return, Break & Continue in p5.js: How to Code Generative Art
2023-12-3020: Intro to WEBGL-3D Graphics in p5.js: How to Code Generative Art
2023-12-2819: Clipping Function in p5.js: How to Code Generative Art
2023-12-2618: Perlin Noise Flow Fields in p5.js: How to Code Generative Art
2023-12-2417: Perlin Noise Grid Project in p5.js: How to Code Generative Art
2023-12-2216: Introduction to Perlin Noise in p5.js: How to Code Generative Art
2023-12-2015: Sine and Cosine to make wonky circles and meandering lines in p5.js: How to Code Generative Art
2023-12-1814: Array Examples from Steve's Projects in p5.js: How to Code Generative Art
2023-12-1813: Basics of Arrays in p5.js: How to Code Generative Art
2023-12-1611: Using a Buffer Canvas - createGraphics, Get, Image, Tint in p5.js: How to Code Generative Art
2023-12-1410: Creating Functions in p5.js: How to Code Generative Art
2023-12-139: On Being a Generative Artist - How to Code Generative Art - p5.js