Clone-a-Lisa
vole.wtf333 points by CharlesW 2 years ago
333 points by CharlesW 2 years 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.
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!
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.
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.
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.
(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.
> 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.
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..?
Are you Matt Round of Amazon fame? If yes, I have to thank you for my career building on Matt Rounds Tool (MRT)
I love that you went to the effort to do brush dynamics for this. It really enhances the joke.
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.
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
It's kind of fun, but pretty difficult and I would like to have an option for more time.
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.
I did a full black painting and got 65%. Kinda showcases how humans and computers differ in how they "see" things.
Cool!
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 would be nice [1] to see a side by side comparison.
[1] actually horrible in my case.
Was this perhaps inspired by this video?
Awesome concept and game idea Matt. Would be interesting to maybe add a simple 'stroke count' idea and add to scoring. I know -0zero- about painting but it might drive players to be closer to how IRL painters paint.
Anyone know many strokes it takes an average artist to get to completion? [sorry joke had to be made but really curious about answer as well].
This already gave me a better feel about what painters do, and I'm blind in the mind.
Comments about trolling the scoring algorithm seemed a little silly to me, if you folks want max score just run some sort of soft-ICE, scan the sandboxed mem and change it ;) This is a really cool idea and I love it.
Can this be given a multiplayer flair? Would be a very fun party game!
I painted the Mona Lisa with 88.1% accuracy! https://vole.wtf/clone-a-lisa/ https://imgur.com/a/87HFCSB
Hmm, the scoring seems off https://imgur.com/a/b9NHotr
There's a bug in Android Chrome with certain devices that thoroughly breaks some canvas operations, you're not supposed to be painting over the original. Been looking for workarounds but so far only managed to make it glitch in different ways (apparently it's fixed in Chrome Canary)
wow. that's surprisingly good in 60 seconds, well not good but accurate placement
Dope! Feedback: 1. An option for infinite time would be lovely. 2. I'd love to have a way to see both the original and my painting. Keyboard shortcuts to toggle back and forth? I find the biggest challenge is I keep forgetting... Side by side of painting + original with maybe an additional overlayed would be great.
What a perfect game.
What a great developer.
This doesn't work well with browser extensions which darken web pages color themes (like "Dark Reader"), as all the painting colors will be rendered to black.
I know It might be obvious but having those extension always on I tend to forget they sometime can cause some visibility issues, so I'm leaving this here :)
I have Dark Reader and had no issues.
There's a global setting in Dark Reader to "Detect dark theme" pages -- when that is enabled, this game is automatically detected as using a dark theme so the Dark Reader plugin is disabled for the page.
But the Clone-a-Lisa page does not use a native dark theme, and the problem seem to be just with the paint colors, which in my case for some reason are altered by Dark Reader. It could also be that it was a temporarily glitch as I've noticed that color manipulation by Dark Reader can be inconsistent at times (could be due to DOM loading timing and stuff like that).
Ok, I got 51.5% but I come here because I thought it was about DosFox's Apple Lisa clone. Painting was fun too.
My best score was achieved by rubbing all colours across the canvas. Got 70 percent this way
I don't understand how to play this. I tried clicking on all the colors and brushes but no matter what it only paints in the color black. Is there something I'm missing?
I thought it was related to Clone A Willy https://www.youtube.com/watch?v=wKEXJkdSSMU
What score can I get if it looks like Lisa Simpson?
This seems to be very generous on the low end, I got 48% with basically a stick man with a green background and beige body.
This is reminding me of the John Cleese bit about hamlet having 8262 words and comparing the Shakespeare roles by word count.
68.9%. Feeling VERY lucky at that, lol. This seems like a really fun family or party game, thank you for making it.
0.1% off 'nice' feels a little bit unlucky.
No, I have a vision issue at the moment. Hope to be hitting those high scores soon, thanks for your feedback
Sorry, can you describe it for me. Looking to come off this strong, thanks
It would be cool to see other people's drawings... maybe as simple as a hashtag and a feed of tweets?
Not working in Opera (
Hilarious way to spend 15 mins. Thanks!
This is really awesome
0986314427
78% with just 4 color bars.
Super fun game.
Problem is, I got a 78% score with just 4 horizontal color bars.
EDIT: why the downvotes?
77% with just two.
71% with one: https://vole.wtf/clone-a-lisa/
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.
At first I thought it was going to be about this, a very recently successful effort to clone the Apple Lisa: https://hackaday.io/project/192235-a-brand-new-apple-lisa
25%, very cool. Is it possible to see other people's submissions or is it all client-side?
P.S: I thought it'd be an entry about cloning the 1983 Apple Lisa computer...
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).
62.8% https://vole.wtf/clone-a-lisa/
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
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).
Definitely did a double take when I saw the URL, I don’t see many .wtf urls let alone so close to my own.
Fun little game :)
12.5%! Take that, dad, you said I'd never be an artist.
.gif){kind=link}
