Weekly Creative Coding Challenges 2025 - Week 14 - ‘Zentangle’
Final Live Code
Final Result - Video
Summary
WCCChallenge Blurb
| Biz | Biz Biz |
|---|---|
| Author | Project Somedays |
| Title | Weekly Creative Coding Challenges 2025 - Week 14 - ‘Zentangle’ |
| 📅 Started | 2025-03-31 |
| 📅 Completed | 2025-04-06 |
| 🕒 Taken | 3.5hrs - chipping away at my many unknowns in Three.js |
| 🤯 Concept | Recreating but in 3D this image |
| 🔎 Focus | Experimenting with custom meshes in THREE.js |
Made for Sableraph’s weekly creative coding challenges, reviewed weekly on https://www.twitch.tv/sableraph
See other submissions here: https://openprocessing.org/curation/78544
Join The Birb’s Nest Discord community! https://discord.gg/g5J6Ajx9Am
Resources:
- Metamere’s Sample Code for using Three.js in OpenProcessing: https://openprocessing.org/sketch/2198844
- 🎵 “Night Detective”, Amaksi on Pixabay
Stretch Goals/Extension Ideas
- Adapt metamere’s template to fix the window fit issue
- Try just using an image texture with transparency for the hole in the plane so you can get the torn paper look
- Crinkle the paper a bit
TODO:
- Basic setup
- Get a setup of concentric toruses
- Import opensimplexnoise and write a mapping function
- Vibe code imperfect toruses: https://openprocessing.org/sketch/2604884
- Scratch head why this doesn’t quite seemed to have matched the result from that sketch
- Shrug and move on
- Add in local rotation
- Vibe code the frame with a hole in it
- Call it a day
🎓Lessons Learned🎓
- mesh.geometry.attribute.position.array is a big old 1D array in Threejs of positional data that gets passed to the GPU if you call .needsUpdate = true
- It’s soooo worth it to make a new mini-project when you want to try out a new technique BEFORE you try and integrate it into a more complicated project
- Reverse-Engineering: such a great way to learn and develop your own taste and sensibilities
🪵Dev Log🪵
2025-03-31 Building up slowly 🕒1.5hrs
- Step 1: get a torus on the screen
- Step 2: Nest Torii
- Step 3: Make a bunch of them and make them move around a bit with opensimplexnoise
;
2025-04-06 Final run 🕒2hrs
- Looked into a template by Metamere to properly host my three.js code in OpenProcessing
- Adapted code from “What happened to my donut” to slightly distort each torus
- Made the adapted code run with 4D noise given it will be used just once at setup
- Added local rotation to each set of discs
- Vibe coded a hole in a plane and positioned it as the frame
