Patt Vira | p5.js Coding Tutorial | Lava Lamp (Marching Squares) @pattvira | Uploaded January 2024 | Updated October 2024, 24 minutes ago.
✨ Get your 'Basic toolkit to Getting Started with Creative Coding' on my website: https://www.pattvira.com. Let me know if you find it useful! ✨
—
Links:
🔗 p5.js editor: editor.p5js.org
🔗 Marching Squares Code: editor.p5js.org/pattvira/sketches/rk3vy7vvx
🔗 Introduction to Creative Coding Playlist: youtube.com/playlist?list=PL0beHPVMklwgMz4Z-mNp4_udo9mjBk7pn&si=XhvQaojd6cIrxvdn
References:
🔗 Jamie Wong's article on Metaballs: jamie-wong.com/2014/08/19/metaballs-and-marching-squares
Timestamps:
0:00 Intro
0:36 Approach
2:33 Calculating location of circles relative to a point
13:34 Calculating location of circles relative to each cell on a grid
18:55 Setting value of each corner based on location calculations
22:22 Mapping each cell to a contour
27:56 Interpolating points to get smoother contours
✨ Get your 'Basic toolkit to Getting Started with Creative Coding' on my website: https://www.pattvira.com. Let me know if you find it useful! ✨
—
Links:
🔗 p5.js editor: editor.p5js.org
🔗 Marching Squares Code: editor.p5js.org/pattvira/sketches/rk3vy7vvx
🔗 Introduction to Creative Coding Playlist: youtube.com/playlist?list=PL0beHPVMklwgMz4Z-mNp4_udo9mjBk7pn&si=XhvQaojd6cIrxvdn
References:
🔗 Jamie Wong's article on Metaballs: jamie-wong.com/2014/08/19/metaballs-and-marching-squares
Timestamps:
0:00 Intro
0:36 Approach
2:33 Calculating location of circles relative to a point
13:34 Calculating location of circles relative to each cell on a grid
18:55 Setting value of each corner based on location calculations
22:22 Mapping each cell to a contour
27:56 Interpolating points to get smoother contours