Reverse-Engineering Challenges: Rotten Columns
Final Live Code
Final Result - Video
Summary
WCCChallenge Blurb
| Biz | Biz Biz |
|---|---|
| Author | Project Somedays |
| Title | Reverse-Engineering Challenges: Rotten Towers |
| 📅 Started | 2025-03-31 |
| 📅 Completed | 2025-04-01 |
| 🕒 Taken | 1.5hrs |
| 🤯 Concept | 3D OpenSimplex Noise, but probs needs a shader |
| 🔎 Focus | ThreeJS performance boost from p5js |
Reverse-Engineering this sketch:
Rotten columns. Source code -> https://t.co/1l7ILYzarw #openframeworks #programming #creativecoding #プログラミング pic.twitter.com/cTSVQoSQ65
— JunKiyoshi (@junkiyoshi) March 28, 2025
I’ve tried this voxel kind of art before. Love it! Hitting limits of ThreeJS this many boxes though…
Basically, I’m looping over all the cubes and seeing if their 3D opensimplexnoise value is below some threshold.
Using lil-gui to speed up my iteration time
🎓Lessons Learned🎓
- Open Simple Noise returns values between -1 and 1 🤯 Haha was scratching my head for a very long time trying to work out why I wasn’t filtering out more blocks. Too used to Perlin noise.
Resources:
- Sliders: lil-gui
Stretch Goals/Extension Ideas
- Implement as a shader
- Learn ThreeJS shaders
- Use InstancedMeshes instead = massive performance boost
TODO:
- Make a column of a bunch boxes
- Set box visibility based on noise value over time
- Lil-GUI controls
- Refinement
🪵Dev Log🪵
2025-03-31 Starting from scrach 🕒45 minutes
- Step 1: Make a column of lots of cubes
- Step 2: Use 3D noise to determine whether we should show a cube or not
- Step 3: Colour from the outside in.
2025-04-01 Finishing the project 🕒 45 minutes
- Play around with threshold values
- Swapped to 3D OpenSimplex = faster
- Added sliders for noise progression and rotation of the whole column.
- Experimented with an outer shell of green. Did not enjoy.
- Experimented with making the axis that changes the y axis. Pretty cool!
- Found a balance between resolution and performance
