Adding Circular Flow to a Flow Field with Generative Artist Jeff Palmer - p5.js

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


Duration: 28:36
1,105 views
40

In this video, generative artist Jeff Palmer shows me how to add circular flow to a flow field using signed distance function (SDF) and vectors in p5.js. It gets a bit complicated, but I break it all down and example code is below. Signed distance field.

Jeff Palmer's website, fxhash, and Twitter:
https://jpalmer.art/
https://www.fxhash.xyz/u/Jeff%20Palmer
https://twitter.com/jeffpalmer

My fxhash page with art using circular flow:
https://www.fxhash.xyz/u/Steve's%20Makerspace

Final code - flow fields with circular flow:
https://editor.p5js.org/StevesMakerspace/sketches/7kfrLBqy4

Color gradient code:
https://editor.p5js.org/StevesMakerspace/sketches/qmwxoH77v

Circular vectors with bound circle code:
https://editor.p5js.org/StevesMakerspace/sketches/ivMqXeoSI

Bound circle with line segments added:
https://editor.p5js.org/StevesMakerspace/sketches/7WwSRlmHJ

Multiple circles in flow:
https://editor.p5js.org/StevesMakerspace/sketches/IUl3niqBK

My video on Static Flow Fields:
https://youtu.be/R0OFyWEglGA

What is Signed Distance Function? by Ankit:
https://not-another-engineer.medium.com/what-is-signed-distance-function-818101f6fe3e

Vector Math video by the Coding Train:
https://youtu.be/Rob0pbE7kks

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-11-30I'm on Patreon!
2023-11-21Fixing Perlin noise - p5js #shorts
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


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
p5js generative art
p5js flow field
static flow field
p5js static flow field
flow field art
how to make a flow field
flow field how to
noise flow field
perlin noise flow field
signed distance field
signed distance function
sdf
circular flow
jeff palmer
jeff palmer artist
vector flow
sdf vector