I had the concept in my head for some time and firstly just prototyped it using only HTML & CSS. Sent it to a few friends and they liked it so I made it into its own website and added few 'competitive' features like click counter and share button.
It's nice but could you make it so that the rotation direction can additionally be toggled by holding down shift while clicking? I find it very irritating to always move the mouse to the bottom right corner to select the rotation direction - especially since "every click counts".
Other than that, I first thought that some of the tiles should start with correct orientation but soon realized that would make this puzzle just really easy, because our brains are just excellent at seeing the correct image from just a few correctly oriented tiles I think.
Not really? It's not free, it costs 1 to do 3 or 1 rotation, and it costs 2 to do 2 rotations. There is still a challenge because it's still the combination of multiple tiles that makes the full image, you don't necessarily gain information from doing 1 vs 3 rotations if the neighboring pieces aren't already correct
I would like to see either as you describe (which I think would be the most relaxing), or have the direction-changing buttons also count as a click each time they are pressed. I found it tempting to switch direction, turn a piece, then switch back, often using two clicks instead of the three it would take to turn it clockwise-only, but very inefficient since I switched back and forth many times. Making those count as clicks, though, does up the difficulty and would make hitting the target require you to use them only once, so perhaps removing them altogether is the solution.
If you did it as clockwise by default instead of listing the ideal turn count you could list the minimum number of “counter” turns. Then have a button to do the next turn as a counter turn.
I would have suggested having 2 zones per tile: one to rotate left, one to rotate right. But the tap zone is quite small already, so it's prone to errors.
One slower but more UX-friendly option would be to allow long-press on a tile, it would zoom in, and you can pick left or right with each button.
Double tap is also an option but you need to remove the ability to select the content of the page.
Not sure how easy it is to implement, but here is another idea:
hold on the tile few seconds, then you have the choice to swipe left or right (has also some edge cases, when the elements are in the corner)
Tap-and-hold a tile, move finger outside of it and then rotate by moving finger around tile's center (like using a handle that you just extended from the tile).
I like how well this specific picture works for this puzzle. The coastline lines up perfectly with a square border. The cat's face is sideways. The two steps are the same color, so the rotation could be in one of two possible positions. It makes it just tricky enough to make the right answer not immediately obvious, but it's not so hard that there's any chance for being frustrated. Plus, it's a kitty.
Right - I only noticed the "ideal" number of clicks after I had finished the puzzle. That kinda diminished the "relaxing" aspect and made me want to go back and start speedrunning.
Otherwise, neat lil game. I got a nice picture of a kitty cat. :)
import numpy as np
from mip import Model, xsum, minimize, BINARY
def solve(tiles):
rotations = [[[] for _ in row] for row in tiles]
rot_vars = [[[] for _ in row] for row in tiles]
model = Model("rotaboxes")
for i, row in enumerate(tiles):
for j, tile in enumerate(row):
for _ in range(3):
tile = tile.transpose((1, 0, 2))[::-1]
rotations[i][j].append(tile)
rot_vars[i][j].append(model.add_var(var_type=BINARY))
model += (xsum(rot_vars[i][j]) == 1)
costs = []
for i, row in enumerate(tiles):
for j, tile in enumerate(row):
for (di, dj) in [(0, 1), (1, 0)]:
if (i + di >= len(tiles)) or (j + dj >= len(tiles[0])):
continue
for r0, t0 in enumerate(rotations[i][j]):
for r1, t1 in enumerate(rotations[i + di][j + dj]):
if di:
a, b = t0[-1], t1[0]
else:
a, b = t0[:,-1], t1[:,0]
n = np.square(a - b).mean()
d = np.square(a[1:] - a[:1]).mean() + np.square(b[1:] - b[:1]).mean()
e = 2. * n / (d + 0.01)
v = model.add_var(var_type=BINARY)
model += (v >= rot_vars[i][j][r0] + rot_vars[i + di][j + dj][r1] - 1)
costs.append(e * v)
model.objective = minimize(xsum(costs))
model.optimize()
solution = [[[r for v, r in zip(vs, rs) if v.x >= 0.99][0] for vs, rs in zip(row0, row1)] for row0, row1 in zip(rot_vars, rotations)]
return solution
It could be optimized to change the rotation direction depending on whether the current rotation is smaller or larger than 180deg, but that's not really necessary since running the script only counts as one click, and generates negative "overspin" numbers ;-)
... is the spread syntax, which is a neat way to use the entries of an existing array or object in an argument list or within an array or object literal.
Array(length) creates an array that has a length but no elements (or weird, "empty" elements). The square brackets create a new array [...Array(length)] which will have undefined elements instead, as trying to access an "empty" element returns undefined.
> Array(clicks) instantiate an array of length 'clicks', with its elements undefined.
Not undefined elements but no elements, or "empty" elements.
> they could've just used Array(clicks).
No, because the following forEach call does nothing for such an array. You need to fill the array first with Array(clicks).fill() or shorter, [...Array(clicks)]
Yes it creates an array of length 'clicks'; so for example [...Array(2)] creates the array [undefined, undefined]. It's just a way to do a loop without writing a for loop and use forEach instead.
(But since querySelectorAll returns a NodeList and not a regular array, some methods are unavailable, so I just have this habit of making it an array. But for iteration that's indeed not needed.)
Some of the squares are basically a solid color (not so much the cat picture but the previous ones I checked). I like to do jigsaw puzzles and one good thing about them is even in fairly solid color areas, you get a good confirmation by pieces fitting together well. Something to think about when selecting photos.
Yeah, apologies for that. There is no.4 that's extremely difficult, especially on phones with not such great colours and there's one more that has 2 tricky squares. I'm trying to pick pictures that do not have solid squares for future.
Agreed. In Tabletop simulator Jigsaw Join the pieces fuse together when they're in the correct place. Maybe the white border could disappear between pieces in the correct place - although that might make it too easy if there's only one left.
Epilepsy warning: if you finish it you might have a page refresh bug where it constantly keeps refreshing (with flashing content) the page - for me it was solved by clearing localStorage (or just close the page I guess), I think this bug needs to be fixed ASAP.
Happened to me, chrome on Android. Likely there is some precondition required to trigger the bug other than winning the game, since it doesn't seem to happen to everyone
This was nice - I woke up in the middle of the night with some anxiety and insomnia and this was just what I needed; a dark background theme would have helped with the bright rectangle in my hand :)
Perhaps an option to hide the ideal clicks. If I was upset and using this to calm down (which I totally will!) it would just infuriate my messed up brain. But that's just me.
Would be interesting if you combined it with DALLE-2. Either with a prompt at the top that generates the picture on the fly or just by curating some DALLE-2 pictures and using them for the puzzles (and maybe the prompt to generate it could be revealed as a reward).
I have a puzzles app on my phone[1] that does just what you describe. It's awful; I will always tap repeatedly instead of long-pressing. Long-pressing is a gigantic usability failure.
That app also implements the solution here, of having a toggle that swaps the effect of press and long-press. I use that... sometimes. Rarely. But more often than I attempt to long-press.
Cell phones have a bad UI paradigm and therefore using software on a cell phone is generally more painful and annoying than using software on a computer. But that's not a reason to force painful, annoying UI into the computer too.
I had a computer game similar to this one like 15 years ago!
I can't remember the name but I think it came as a CD with some encyclopedia for kids or something like this.
You unlocked a memory of me solving the puzzle of a picture of a shark :D
This is nice. If possible, I would change it so that a left rotation happened on a left click and a right rotation happened on a right click; make scoring optional if you want it to be more relaxing.
Thanks! That was some of the feedback from my friends when I initially sent it to them. They were like: "wow this is relaxing" but shortly after: "ok, how do we compete?" :D
Am I missing something? I completed a picture with two rotations left, and nothing happened. I was optimal in the number of rotations (always 1 or 2 rotations.) I checked I was right by clicking the eye. The cute cat just sits there...
"Tiles left to rotate" tells you how many still need to be rotated to solve the puzzle. Sounds like you're still two away from the goal. Some of the differences in this picture between right/wrong are very subtle.
On a phone, I didn't like having to change rotation direction separately from rotating. And I don't always find rotation directions intuitive. So maybe a direct manipulation would be better?
I was surprised that I did find this relaxing - thanks OP. To other commenters point toggle on/off competitive features would be great otherwise it produces tiny amounts of competitive anxiety.
It could probably benefit from an indicator that there's still work to be done. I thought I was done, but noticed a comment from someone else that they got confetti.
Yeah, that's actually a great idea. Do you have any idea on how the indicator could look like? Something like counter how many tiles are still not in position?
I was thinking something like that, "x tiles to go". Or a "Check" button that tells you how many are left, but it still automatically shows the confetti when you're done.
Excellent game, well done! Love that there’s a new image daily so I can choose to spend a small amount of time each day but I won’t get sucked into a non-stop treadmill.
Really like the concept, and played it longer than I initially expected!
Shameless plug for a multiplayer puzzle game I created a year ago https://flipcards.online of which your game reminded me. Although mine has nothing relaxing as it favours competition. But rotating tiles of images is clearly checked.
I like that game! It's way less relaxing for sure lol Have you considered showing the progress of others in real-time to add some spice, go more into details?
That's actually a great idea! Will work on it in the next fews days. Also planning on putting a quick tutorial to explain the concept.
PS: Thanks for the link, looking at it right now.
I like it, but I will say I found 28 very frustrating... There's not enough detail in the picture to get the top row -- the entire row is basically 3 very similar colors, and there's no good hints... You basically have to determine the positioning by looking at the artifacting of the background.
I loved this game and thanks for making it. It had a prayer-beads quality to it, and extending that metaphor, may I suggest you remove stats, but keep counter clock moves, where the mind gets trapped, and moves on to the next block, thereby helping the user focus on the task at hand.
Some pictures were hard to distinguish they still needed to be turned (like 95% mountain and a sliver of something else).
I’d consider making the background already in place - i find rotating the cat the most enjoyable. Lining up a cloud or shoreline starts to feel tedious to me.
I was slightly annoyed at the dog puzzle, while i tried to rotate the boxes which contained just grass and a lot of bokeh. I guess picking the right pictures is really important.
Very cool. I made something kinda similar a while back but never got around to publishing it. I think mine is overly complicated and I never got around to writing a tutorial but you can check it out here:
I really enjoyed this, it was indeed relaxing. Do you grab any statistics on how well people do? I was hugely over, but only because a few of the 'difficult' squares were wrong.
So I use Imagus in Firefox. When playing older games hovering over some of the tiles ends up loading the full image. Doesn't do it on today's cat image.
The picture changes every day (there’s a countdown timer until the next picture at the top after you finish), and you can play previous days if you scroll down.
really interesting the effect on short-term memory when you click to reveal the completed image (principally when you have a good chunk set already)! i loved it
also, as everyone probably, right-click to rotate counterclockwise came intuitively real quick in thoughts...
Other than that, I first thought that some of the tiles should start with correct orientation but soon realized that would make this puzzle just really easy, because our brains are just excellent at seeing the correct image from just a few correctly oriented tiles I think.