Animating the Drawing Process of Your Static Art in p5.js

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


Duration: 15:55
1,153 views
37

In this video, I go over how to give a static art project a short animation in p5.js. We'll start with the flow fields art I made in a previous video and convert it to one that animates the flow and other steps before settling into a final state. Code links below.

Animated art code: https://editor.p5js.org/StevesMakerspace/sketches/RbULssOKQ

Original flow field code:
https://editor.p5js.org/StevesMakerspace/sketches/4zn-XY-FH

My video on making a static flow field:
https://youtu.be/R0OFyWEglGA

Dan Shiffman / Coding Train Intro to Object Oriented Programming:
https://www.youtube.com/watch?v=xG2Vbnv0wvg

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-12-031: Getting Started with p5.js: How to Code Generative Art
2023-12-03How to Code Generative Art: Preview to the Course - p5.js
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


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
animated art
art animation
animated art p5js
animated flow field
flow field p5js