Broken Symmetry

Splash screen
Setting the mood
The puzzle. What is that?
What do you see?
Responsive design!
Review your interpretations
Solve it before your moves run out to pass.

Inspiration

Broken Symmetry is inspired by classic inkblot interpretation tests. I tried to create a vaguely unsettling, clinical atmosphere, while still retaining a sense of humor. Broken Symmetry is designed to exercise both your logical and creative sides.

What it does

"Inkblot" patterns are generated via closed bezier curves with animated control points. These patterns are drawn over the puzzle solution, then the image is chopped up into tiles. The inkblot continues to reshape itself as you work the puzzle.

How we built it

The inkblots are drawn into a Canvas, which is saved to a Picture, then that Picture is drawn over the solution image. Tiles are animated into position via AnimatedPositioned. Other animations include the interpretation feedback, and dialog dismissal progress indicator.

Challenges we ran into

Originally, I wanted to use a live webcam feed as the puzzle solution, so that you would have to solve your own scrambled face, but since the video is implemented via a webview, it was not possible to get an adequately fast feed.

Accomplishments that we're proud of

The game is genuinely fun. I find myself playing just to see the generated inkblots and come up with funny answers. I'm also proud of the fact that I included working keyboard accessibility for the puzzle interface.

What we learned

Animations in Flutter are easy to add to create little touches of fluidity and UI polish. I will definitely consider them first-class in UI designs in the future.

What's next for Broken Symmetry

I do not plan on going further with this project, but it has been a wonderful learning experience. If there is demand, I will gladly publish to the Play Store.