How I Made Little Galleries - p5js generative art

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


Duration: 0:00
895 views
77

In this video, I go over aspects of Little Galleries, my generative art project made in p5js and available on fxhash as NFT art. I mostly focus on the unique Perlin noise flow fields and re-thinking color to maximize contrast.

Little Galleries project page:
https://www.fxhash.xyz/generative/slug/little-galleries

Iterative Perlin noise flow field:
https://editor.p5js.org/StevesMakerspace/sketches/Sa9oCBL_1

Color palettes display for contrast:
https://editor.p5js.org/StevesMakerspace/sketches/WyECfXnm4

Middle noise map:
https://editor.p5js.org/StevesMakerspace/sketches/xzrndmDCN

Video Intro to Perlin Noise:
   • 16: Introduction to Perlin Noise in p...  

Video Perlin Flow Field:
   • 18: Perlin Noise Flow Fields in p5.js...  

Video Clip Function:
   • 19: Clipping Function in p5.js: How t...  

https://p5js.org/

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

Follow me: https://linktr.ee/steves_mspace

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

0:00 Intro
0:34 Unique noise flow field
4:36 Flow field inside objects - clip and drop-shadow
5:54 The color problem
7:07 New color method
9:44 Noise map lines
10:52 Portrait / landscape & 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