Solve-Un-Solve #101

Pre-rendered videos of animations available for your convenience here

Form

It’s the toy you played with as a kid. You don’t remember who gave it to you—maybe it was your dad’s. You held the block in your hand, rotated the parts randomly and scrambled it into a mess of color. The game was built for logical reasoning but there was no logic in your motions—you were having fun. Then came the desire to solve it; but without internet or a guide, you didn’t know the algorithm required and it was beyond you to derive it. You could solve one side, maybe two, but never the entire thing; for that you need to know the seemingly random motions—but actually a calculated algorithm. So the block was left on the shelf in the closet.

Then you return to it one day, older and wiser. Now you have the internet and a computer science degree, you go through the motions and put the algorithm into practice. Sometimes you mess up, break the algorithm, and you get frustrated and start over. Suddenly you become like a robot making ever precise movements, and you finally solve it. You put the block down, satisfied and smug, you feel smart even though the solution is well known. You decide never to scramble it again since, to be fair, the solving process wasn’t as fun as the un-solving. So it goes back onto the shelf in the closet.

Then you return to it one day resolving to make a generative art collection that captures the feeling you had when you solved it and realized your childhood was over.

Solve-Un-Solve mirrors the uncleanliness of life. It’s a puzzle that creates problems for itself. It’s a puzzle that also tries to solve itself.

Function

Each piece in the collection will first un-solve (where blocks are randomly rotated and translated from their initial positions), then solve (where the blocks are rotated so that each side of the structure has a uniform color), and finally reset itself (where the blocks return to their initial positions). Each piece is therefore its own puzzle and there is a secret logic to solve every one. Fortunately, the viewer will never have to understand the methods to get a solution–but they can find pleasure in the show as the structure changes infinitely on its own.

Controls:

• "f" fullscreen view
• “u” upscale the resolution (default is 2x, max is 4x)
• “j” downscale the resolution (minimum is 1x at ~1080p)
• “y” start solving
• “h” start un-solving
• “o” jump to reset state
• “l” jump to solved state
• “k” jump to unsolved state
• “q” enable / disable messy lines
• “v” start / stop recording mp4 video (a red circle will appear in the top right corner of the page to indicate recording is active). Currently, video has been tested and verified to work up to 2x scaled resolution on Chrome and Safari.
• “p” play / pause animation
• “click” play / pause animation
• “drag (once animation plays)” rotate structure

URL Params:

• "BLOCK_TIME_MULT" number multiplier for how fast the block animations play (the smaller the number the faster)
• "CAMERA_ANIM_TIME_MULT" number multiplier for how fast the camera animations play (the smaller the number the faster)
• "SIDES_TO_SEE" number for how many sides of the structure to see before the next state transition (default is 2 sides)
• "UNSOLVE_EXIT_SECS" number of seconds for how much time the structure un-solves for before the next state transition (default is 30 seconds)

Example usage of URL Params:

<insert artwork_url here>?SIDES_TO_SEE=3&UNSOLVE_EXIT_SECS=20

Credits

Tested on: Chrome (Version 119.0.6045.159). Compatibility with other versions and browsers may vary.

Thank you to the contributors to the following open-source repositories:

• three
• simplex-noise
• canvas-record
• core-js

In memory of Jimmy: You were the part of my childhood that I couldn't let go of.