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.
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.
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.
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)
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
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!
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).
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.
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.
This is really cool - the scoring is "easy" enough that it felt rewarding enough to spend the time on. Though it may need tweaking if as someone mentioned a solid color gets 80%. Maybe it just needs to have the mean subtracted first so a color doesn't automatically being you closer than 0,0,0? (I could be completely misunderstanding how it works).
A hosted leaderboard with pics
that got the highest % would be cool
Would've been nice to do that (& maybe play back the drawing process), but I was keen to keep the project small & get it launched (took 2.75 days in total, I tweeted the dev process).
All client-side; would've been nice to store & play back the drawing process, but that would've been a lot of extra work and created a whole load more UI/design/clutter problems to solve (it was very much a keep-it-small-and-get-it-launched project, around 2.75 days total).
I definitely want to see other people's versions, and then I want to see everybody's (or the last 100 or 1,000) averaged together. Also a leaderboard with the best ones. :)
It feels like a solid gray patch with the default color would have a slightly higher percentage but I'm having a hard time getting an even enough spray to say it's from the shade and not density variations between the light/dark portions.
Sadly for me, using single color leaving the middle and top brighter was significantly better than my actual attempts hitting near 80.
101 comments
[ 3.6 ms ] story [ 163 ms ] thread[1] actually horrible in my case.
Fun little game :)
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.
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 :)
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.
Needless to stay I best stick to software engineering:
https://i.imgur.com/b7wbUNI.jpg
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!
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
I think that makes it much more fun for most people, so improving the scoring would actually make it worse.
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.
Also, I'm not so sure about the scoring.
I got over 80% just painting solid color rectangles filling the entire width stacked top to bottom.
That is better than I got when I actually tried drawing the picture as accurately as I could.
A hosted leaderboard with pics that got the highest % would be cool
What a great developer.
EDIT: Oh, I thought it would embed the results in the link. I think you should add that as a feature so it’s easier to share
P.S: I thought it'd be an entry about cloning the 1983 Apple Lisa computer...
I definitely want to see other people's versions, and then I want to see everybody's (or the last 100 or 1,000) averaged together. Also a leaderboard with the best ones. :)
Super fun game.
Problem is, I got a 78% score with just 4 horizontal color bars.
https://ibb.co/Mpvt1c2
EDIT: why the downvotes?
https://i.imgur.com/qlmmGL9.png
It feels like a solid gray patch with the default color would have a slightly higher percentage but I'm having a hard time getting an even enough spray to say it's from the shade and not density variations between the light/dark portions.
Sadly for me, using single color leaving the middle and top brighter was significantly better than my actual attempts hitting near 80.
[1] https://tech.lgbt/@DosFox/110899091679452156
https://youtube.com/watch?v=WqnXp6Saa8Y