Hacker News new | ask | show | jobs
by mattround 1037 days ago
I made this game; in case anyone's wondering how the scoring works: It draws your version over the original with 'difference' compositing, then downscales the result (using 'medium' quality to avoid most pixels getting skipped) and adds up the R, G & B values for every pixel in that small image. This total is then compared with the total difference for the initial state (which represents 0%).

Darker areas have the biggest initial difference, and the whole pic is darker than the initial canvas, so get a lot of paint down and pay most attention to the dark bits, you'll soon get over 70%. 85% is v good, and I think 90% is probably possible with enough skill and speed.

17 comments

I really wanted to hit 85% but the best I could do was 84.4% https://i.imgur.com/t3saf5D.jpeg

The scoring system could try to account for perceptual color differences, perhaps by ramping up the saturation of both images when calculating the differences. Since the original painting is relatively desaturated the current scoring mostly incentivizes focusing on light/dark rather than shades of color.

Lots of other great suggestions in the thread — would be fun to see a leaderboard!

Doing the distance calculation in CIELAB / Oklab color space would suffice.
What input device did you use (mouse, finger, touchpad, etc. ) ?
iPad + pencil
My high score:

Needless to stay I best stick to software engineering:

https://i.imgur.com/b7wbUNI.jpg

That's actually really impressive
It’s like some demented Winnie the Pooh
We call his great leader of the D-round Investment Xi Reddit Ping in these parts.
There's a very bad canvas bug in Android Chrome on some devices that's making the original show through - you're supposed to be painting on white (been looking for a workaround & it's fixed in Chrome Canary)
I managed to get 80% with only horizontal bars: https://imgur.com/a/OnhVdyr. I have not, however, managed to get above 85% (though I've gotten 84% a few times).

It looks like, if every pixel is colored using the closest color from the palette, the score would be 94.7%: https://imgur.com/a/wiltqay. So 90% would be quite close to the theoretical max score.

In terms of game mechanics, I love the percentage score that updates in real time. That immediate feedback is really compelling.

Interestingly very much looks like a Rothko !
I like it, but can I get a diff between my drawing and the real thing at the end please?
It was so frustrating at the end not to be able to see the difference. You should be able to click to toggle between your "art" and the original.
It should do a fade blend btwn the two. (and allow me to upload images for either personal or challenges among friends -- this should be like that old game "draw something" challenges
Just filling in the canvas with black gets you to 75%, then you can add some green and yellow to get to 76% but after that it seems you need to be more precise to get higher.
That's what i did
FYI, I can get over 65% by just scrawling the large black brush all over the canvas randomly.
It's fun, but not so much when you know you can get higher results by cheesing a dumb strategy than by actually trying to draw. Improving scoring could really help... (others already made good suggestions).

Drawing something that complex in such a short amount of time is quite a challenge, keeping within a minute is strictly in party game realm. I used to do ultra low-res versions of paintings (in Pico-8) and the shortest I could do for things like this would be 10 minutes I think (upwards to 20).

For reference, the Mona Lisa: https://woolion.art/assets/img/wobblepaint/017(joconde).gif

> you can get higher results by cheesing a dumb strategy

I think that makes it much more fun for most people, so improving the scoring would actually make it worse.

"Party game realm" is a great compliment!
(So yes, you can rack up points from simple blocks of colour up to a point, but need to get the shapes right to go higher)
My child-level attempt got 63.1%, so there are definitely diminishing returns.

Side note, I did not notice the button to show the reference until I was almost finished. I would most likely have done better if I had known :)

I wouldn't be too sure. My first attempt got ~67% without using the reference. My second attempt got 60% with the reference.
You're a very creative & talented person!
> I made this game

You moth..f.... piec. of sh..! Now I can't sleep!

EDIT: After having played it a few times, I think you should expand on the idea, because it seems to be a great tool for training visual memory.

You might like the non-maximum suppression algorithm from computer vision
Darker areas are also easier to get right, or close to right, as I'm assuming the scoring is done in sRGB space and thus gets skewed by the non-linearity of its gamma curve.
All the colors are black for me in Firefox 116.0.3
I'm guessing you have an add-on that alters page colours, eg to force dark mode..?
Same, but reloading with a clean cache (Ctrl+Shift+F5) made it work.
you probably meant Ctrl+F5 or Ctrl+Shift+R
Works just fine here.
Me too.
Are you Matt Round of Amazon fame? If yes, I have to thank you for my career building on Matt Rounds Tool (MRT)
No, I'm not aware of anyone building their career on my tool.
I love that you went to the effort to do brush dynamics for this. It really enhances the joke.
After the timer it up it'd be nice if you can continue going
Fun! What did you implement it with?
It's just simple HTML/CSS/JS and canvas manipulation; scoring is done using 'difference' compositing & checking pixel RGB values, and brushes are built up from bog-standard canvas strokes.