| Creative Coding

Three.js – Repetition

Cover Image for Three.js – Repetition

Assignment

Make a sketch with a lot of repetition, more than you want to hand-code. Can you make your sketch responsive to mouse behavior or key presses?

Result

Ideas & Process

I wanted to use this weeks project to experiment with react-three-fiber, a library that lets you build three.js projects declaratively with re-usable, self-contained components. Their documentation got me started with a pair of slowly spinning cubes. With a couple of loops, I was able to create a screen of cubes. This screen of cubes could then be used to render text.

The word “hi” spelled out in cubes

My lovely wife, Raven, had the idea to build something representing the embodying the quote oft misattributed to Einstein: "Insanity is doing the same thing over and over again and expecting different results."

This gave me the idea to create a game whereby the users actions often did nothing...until they suddenly did. I really liked the parallel between the users repeated actions and the repetition of the cubes.

Hurdles

Once the text has been revealed, I wanted to interpolate between the two states so the change from small to large cubes wasn’t so sudden. One of my favorite animation libraries react-spring, has support for three.js built in. After reacclimating to the library, I was able to get some really neat results.

I really wanted the pointed light to follow the users mouse but kept running into performance issues. I learned quickly that you never want to tie any animations to react state in three.js. You end up re-rendering way more than you need or intended causing everything to come to a crawl. This is discussed in depth in the react-three-fiber performance pitfalls documentation.

Takeaways

I learned a lot about three.js and performance. In the next assignment, I’d like to experiment more with moving the camera and loading external resources for objects.