Show HN: Draw a fish and watch it swim with the others
4 days ago (drawafish.com)
Made this website as an exercise in vibe-coding and GCP. It was posted about a few times around the internet, on sites like [Morning Brew](https://www.morningbrew.com/issues/business-buzzkill), [MetaFilter](https://www.metafilter.com/209703/Draw-A-Fish), boingboing.net, etc. I think it's cute!
I built a basic CNN trained against penises and swastikas, and then anything that doesn't hit the 63% confidence score gets sent to a mod queue, a [vibe-coded fish-tinder](https://bsky.app/profile/bigass.bsky.social/post/3luvikxn3f2...).
Was a fun exercise, spent about a month on it. Frontend is HTML5 hosted on github pages, backend is Node.JS on GCP.
The leaderboard is fascinating. Some people are clearly putting a lot of time into this, while the rest of us are trying to sneak phallic shapes past your CNN.
1. https://drawafish.com/rank.html?userId=1753510318634_cdeh6a4...
I am literally trying my best to draw a fish only to be told it is only 30% likely to be a fish. Cruel.
Got a potted flower through. It's swimming nicely
https://drawafish.com/tank.html?capacity=55&sort=popular also don't sleep on that one
My hot dog with a smiley face got a 64%, I'm sorry.
Semi relevant Silicon Valley clip (maybe nsfw, language)
https://www.youtube.com/watch?v=ACmydtFDTGs
3 replies →
That makes me feel better about my fish, I thought it was among the worst, but good to know it atleast qualified.
Also make sure you’re filling up the canvas — don’t draw something too small.
Did it face the right way?
I could dedicate a month, or a year, and never come up with something like those. Are they really using the site tool, or is there a trick to draw them elsewhere and import them? Those are truly amazing!
It would be hilarious if that guy vibe coded a thing that’s just repeatedly googling images of real fish and then slavishly drawing them into the site.
If you have a tablet and some artistic background, these are all definitely doable. Doing those with a mouse would be a lot harder.
2 replies →
I was extremely happy with my 60% Wang fish. And now after looking at the leaderboard I feel bad.
I drew a real triumphant one that edged over the 60% threshold. Then read that the mod queue was at 63% and had to do it all over again.
Looking at those I feel my fish was totally inadequate. The first one didn't even pass the autofilter since it had a stick figure face ...
Really nice toy!
Are people actually drawing these in the browser, or is there some extension that lets you populate a canvas with something you did with a stylus in Photoshop?
I drew it with the mouse, doable bit you can use your ipad
You could also just load up the website on an iPad with an Apple Pen.
1 reply →
I’m browsing hn on my iphone, clicked this link, drew a fish with my finger, and saw it
Worked out the box didn't think twice of it
Good point though as the site doesnt follow responsive design patterns
you can also upvote your favorite however many times you want!
Ok there's some sort of bot war going on with the leaderboard, right? The Palestine fish has 370,000 votes total (both up & down), which seems like a lot. Does HN really drive that kind of traffic??
Well you can click thumbs how many times you want so ...
The rule of thumb is 100*upvotes+50, so with the current 600 points, it's like 60.000 visits. Don't take that estimation too seriously, it's only a not so bad initial estimation.
OP really needs to read "How not to sort by average rating"
https://www.evanmiller.org/how-not-to-sort-by-average-rating...
[dead]
The website is great!
> I built a basic CNN trained against penises
After seeing it in action, my second thought (first was just watching my fish) was that I was amazed at the good behavior of the users because I would have expected a lot of penises floating around. Now I understand. Nicely done!
Actually most people aren't trying to submit bad fish! I was surprised to, it's really like 95/5 good to bad submissions. People seem to follow the rules on average :)
Yeah, there’s two rules that define the internet:
1. 95% of people will not be trying to draw penises
2. 5% penises by volume is a lot of penises
3 replies →
To be fair, you stop them from submitting the bad fish before they have a chance. I never submitted a fish that wasn't already 'green' for %
I tried to draw an eel, and when I was done I realized that all I'd done was draw a very orange, toothed penis.
is this a reference to the new South Park episode?
(sorry)
2 replies →
There are some fish decorated with swastikas floating around
And a Star of David
Edit: And a lot of Palestinian flags when sorting by popular.
1 reply →
As hard as I tried to add fish characteristics, it knew what I was doing.
I wonder if it's resilient against swastikas made of penises.
That was the Slack logo redesign.
3 replies →
Well apparently it wasn't trained against asses, since it let me write "Ass" on my fish :P
I drew a fish and wrote PENIS on the side. Did I beat the game?
I just saw the N-word written on a fish. so eh.. that didn't last long.
https://imgur.com/a/Vtoxc7p
35% for this masterpiece? Rigged
My guess is the CNN was trained on highly abstracted stereotypical-fish-drawings, not on actual pictures or high-quality drawings of fish. I put in my best effort to draw a good-looking fish (although I'm no artist) and I got 35%. Then I drew a basic single-stroke fish and got 65%.
Magikarp is not a fish to a robot
It's not a good fish to pokemon trainers either. 35% seems about right.
Try SolidGoldMagikarp
Somewhat interesting thing with my 9yo. She's a pretty good artist, she can draw various characters and objects pretty well.
With this she clearly just wanted to do the standard stick fish shape, but it turns out she only knows how to do it facing left. Facing left, looks typical, facing right, almost a figure 8. So after like 6 attempts being judged by the computer she's getting frustrated, and I'm like how about this, turn the phone upside down to have her draw facing left. But now she can't do it left either!
Feature request: Make the model evaluate the fish and then evaluate the mirrored version of the fish. Pick the highest value as the orientation. What could go wrong? Perhaps ask the user before mirroring?
You're right, that IS interesting. Something about having to learn with rigid constraints first before you can generalize the knowledge, I guess.
I think she learned to do the fish the way kids learn to draw a star. It's a motion they learn to do, and she wanted to do that simple motion. She's good at knowing a shape she wants to make and drawing it but I think knowing a gesture she wants to make is different.
And then I think when she consciously thinks about it - trying to do it the opposite way, or later the normal way after being judged repeatedly - she can't make the motion that way. But I bet if she was just thinking of the shape and trying to draw that shape it would be zero issue.
Suggestion: canvas.addEventListener('dragstart', (e) => { e.preventDefault(); } );
At least on Firefox/Mac, sometimes while dragging it "picks up" the image to drag it. This should prevent that.
> exercise in vibe-coding
The code shows it... Your escaping routine seems OK, but you really __should not__ be building HTML and JS(!) using raw string interpolation. Or letting the client decide whether the submission needs moderation.
I don't let the client decide whether the submission needs moderation :)
There's a very slightly different model in the backend that sends things to the mod queue. Strings are also sanitized there. But copilot really wanted to add all that logic to the frontend too and I thought it was funny
You still should not be building HTML and JS using string interpolation.
2 replies →
To be fair, everything on the client is raw string interpolation. It's only secure if you comprehensively vet everything once it's on the server.
That's absolutely not true. Sanitization on the client is significantly safer, because the client knows how it parses HTML, while the server can, at best, guess (and hope it follows the spec).
When you set element.textContent = someUserGeneratedContent, the browser guarantees that the user-generated content will never be parsed as HTML.
response.write("<div>" + sanitize(someUserGeneratedContent) + "</div>") has no such guarantee.
1 reply →
I did this on a trip to Japan but can't remember for the life of me where. Some museum. My wife and I drew fishes and then they were uploaded and we went to a room and watched them swim across walls/ceilings. Really cool experience
The Singapore ArtScience museum has this concept. Templated sea animal colour in pages that a guide vetted before scanning and then your fish appears on the walls of the dark room in a sea life picture swimming with all the other fish. It was pretty cool. A variation in the other room was the same deal but with flying machines, but this time they gave you a remote control that controlled specifically your creation as it flew around on the landscape projected onto the walls.
One of the teamLab exhibitions, probably: https://www.teamlab.art/e/
2013 https://futurepark.teamlab.art/en/places/ryubo/
They have it in several other places.
Our family did this recently as well at teamLab Planets in Tokyo. I filled out a circular template with a very creepy looking "smiley" face. The template turned out to be for raindrops. I couldn't stop giggling when hundreds of my monstrous creations filled the room, it was very fun.
I found https://dibulo.com - where you (ok and kids) can do it at home :)
Teamlabs - Borderless, I also did the same : )
yep that was it!
I couldn’t get it to go above 50% and then I wrote “fish” on it and it went up 5 points
I gave my blue fish a black Hitler mustache and it went up by ten points
https://i.imgur.com/SADe8kn.png
6.3%??????
I have 100 of these in the training data under not_fish....
This guy reddits
Moray fans in outrage.
> I built a basic CNN trained against penises and swastikas
From the description
I would say its a 100% dfish
First thing I drew.
> I built a basic CNN trained against penises and swastikas
Isn't this how some Lego MMO died? They spent too many resources on "moderation" and too few on the actual game.
If you post that more proeminently, maybe you'll get a bunch of kids on summer holidays finding ways to make penises pass your filter...
I tried my damnedest to give my fish a ballsack. That's a real good fishiness detector.
challenge accepted
https://monosnap.com/file/uD9n2bXCODCLwthVwdKXdGleogXuJ6
Cackling.
heh
Did you manage it after commenting? 'ballsy' is ranked quite highly: https://drawafish.com/rank.html
This is only possible due to the surfeit of ballsacks in the training data from users like you :)
You mean a skein?
What a fun game! Especially on a Note 10+, and I have to say, seeing the dongnet keep up with each pen stroke on a 2019 device is really impressive! Possibly still a little generous, though, I think. Writing "FISH" on a rectangle shouldn't hit 50%, but this does explain why SSN-69 didn't have much of a chance :D
This is the most wholesome thing I saw on the internet for a long time. Thanks for the effort!
That is fun. And it's nice to know that everyone else on HN is about as artistic as I am.
I love when there are traffic spikes and I get to discover which corners of the internet have artistic talent or lack thereof :)
We visited the St Louis Aquarium a couple years ago and they have a similar set up. It's pretty awesome and great for kids. It's simply called "Fish Draw" https://www.stlaquariumfoundation.org/education/conservation...
As does the Long Beach Aquarium. Had a lot of fun!
Fun!!!
Small changes if make: - Change the background colour of the drawing canvas to match the water background - Add fill tool? So folks can color this fish white? Bonus points if you automatically color the inside part of the fish white - Fix the discontinuity of how the fish swim by stretching the pixels of the fish that you draw
This is too much fun! If anyone missed it, you can also rank the fish here: https://drawafish.com/rank.html
I drew a fish but I couldn't find it anywhere when it switched to the tank. Perhaps you could highlight the user's own fish, at least initially?
EDIT: Tried again and now I see there is a highlight, but it's pretty hard to see a in a busy tank, the color contrast is not very high
There are light yellow rays coming out of your particular fish
I noticed that on the second time but it’s still not very easy to see against the light background
Same I drew a mola mola, maybe the probably filtered it out (not fish enough)
Took me a sec but your fish has a yellow "glow" effect around it
Mine was highlighted with golden rays around it (like a cartoon sun)
This doesn’t work for me on Firefox Focus on iOS, even with all the ad and tracker blocking disabled. Tapping on the make it swim button does nothing. I’m able to see the tank with the tank button though.
Weird. Vanilla firefox on android works.
This is my favorite thing today! I only saw one penis fish (with the penis nestled inside the face, as a facial feature of sorts). That's pretty good for a drawing app on the internet, well done! I've given up on running public apps that accept user contributions.
There used to be something like this at the Boston Museum of Science, where you created a fish (don’t remember if you drew it freehand and/or selected from different fish parts) and released it into the tank with other fish and predators.
I realized that my drawn with a mouse fish looks a lot like the fish quilt block I made. Neither were very good. But I enjoyed making them both :-)
Now to share with my grandkids.
There’s a museum in Tokyo that has this but for physically drawn fish and is then projected on a large wall. Cool to see a digital version
This was my first thought. It’s called Sketch Ocean and it’s in a teamLab experience!
This is brilliant. Checkout my [Anatomically Correct Fish Tank](https://drawafish.com/fishtank-view.html?id=gYCWJ24lhxSvR4lG...)
Shocking no one has mentioned Jian Yang's hotdog app :) [1]
[1] https://www.youtube.com/watch?v=tWwCK95X6go&ab_channel=Felix
Love the simplicity of this.
OP has a clear bias against angelfish.
Drawing a catfish was pretty rough. Sometimes the little fins would make it be more fish-like, other times, they would make it less so.
I did manage to finally get one in there, but it looked more like a plane than a fish.
I keep getting this error on both Safari and Firefox:
Uncaught (in promise) Error: Fish model not loaded verifyFishDoodle https://drawafish.com/src/js/app.js:514 <anonymous> https://drawafish.com/src/js/app.js:170 EventListener.handleEvent* https://drawafish.com/src/js/app.js:168
Edit: Never mind, I had to wait till the model loaded. Took some time though. Fun project nevertheless!
This is an issue that many are seeing, it has to do with how the model is loaded / how the submission logic works without it. I think I know the fix, but am currently getting slammed at my big boy job and so I can't fix it until I'm free in the evening ...
Absolutely no issues, I figured it out anyway. No stress on this, big boy job way more important :)
Nice, I got my upside down penis fish past the filter! Although, once it was swimming it did look very much like a fancy guppy. I don't think anyone would recognize it, but I still feel smug about "beating" the machine.
It's OK at filtering out penises, next step is to filter out all the flags...
Locally we have the National Museum of Play. One of the exhibits right near the entrance is a virtual aquarium where you can color in a picture of a fish. Then you take it to a scanner and press a button and your fish starts swimming in a huge screen that serves as a virtual aquarium.
Does not work for me on desktop Firefox. When I press the "make it swim!" button, there's an error in console: "Uncaught (in promise) Error: Fish model not loaded"
I could submit a fish on desktop Firefox, but apparently the fish died shortly thereafter. Voting is broken though.
EDIT: Nevermind! Now there's a problem uploading a fish, and the local aquarium is broken, so I can't view the previous one, either. It's a nice idea, but I really wish it worked better with Firefox (being on the web and all).
I'm glad we've stopped drawing dead fish (beautiful talk by Bret Victor, 12 years ago): https://vimeo.com/64895205
Also inspired by that: https://drawdeadfish.com/
I recently went to an aquarium in Exmouth, Western Australia, which had a giant wall mounted display with a tablet which allowed kids (of all ages!) to draw a fish and "release" it into the tank.
Show me a tank of the leaderboard fish!
What a fun, whimsical idea. I love this.
Also: When you release something like this to the public, I'm amazed at how quickly humans race to the bottom. That bit can be awful to watch.
As Bret would say, please stop drawing dead fish.
dead fish should float to the top of the tank, not fall to the bottom
> Frontend is HTML5 hosted on github pages, backend is Node.JS on GCP.
So this means it's doing CORS? Why not just have GCP serve everything?
Some of you are wayy too bored at work - some of these are too realistic
Cool but ......
This is my feeling of vibe coding this kind of stuff so far. It's never really good, it's just kind of acceptable because it was vibe codeded.
The way the fish are stretched where they gets sliced into bands is not something I think most humans would generally choose to do. With a few characters of code change you could at least stretch each column so it scales to the next column.
I know vibe coding will continue to get better. There's a bunch of people at my work that have a vibe-coding chat where they show off their latest creation. Most of them they'd done in Gemini Canvas. The prompts are usually 1 or 2 paragraphs like "Make a 3d tower defense game with joypad input where you move a character using the joypad and can place towers by pressing the button. ....." And it spits out a working game but it's only interesting because it was vibe coded, not because the game is actually in any-way-shape-or-form interesting, good, pretty.
Also, I appreciate that this game had a fish recognizer but I also found it super scary. I tried to make to make a sunfish and it was like "not a fish". I don't want bad AI judging what is and isn't acceptable.
Would love to hear more info on how you actually vibe coded this as the fishbowl seems incredibly cool
I love these kind of websites. After finishing my drawing, I spent way more time than I expected looking through other people drawings.
I love that the common styles of fish are a function of what tools people were given.
For example, if a fill tool was available I bet we would see far far fewer hollow fish.
I love how it immediately became a meta game of how large of a phallus you can get on your fish while still maintaining an acceptable fish-like score.
edit - my beautiful Esox Pinilis was culled from the UGC ocean by whoever is manually moderating this :D
This is so cool!
I did just about spit out of coffee reading the words vibe coded fish tinder though. But a smart thing to implement.
I carefully drew a lion fish. Turns out only 37% odds of being a fish. (https://en.wikipedia.org/wiki/Lionfish)
Fun idea, fun site!
Very cool! NN seems too focused on precision over recall (not allowing enough false positives) but trying to get stuff past it is also part of the fun.
Tell me why my fish just died!? Just went through a little loss and now feel sad
It only shows the most recent 50 fish. Your fish got bumped by a newer fish.
In firefox I'm able to vote for the same fish over and over.
This is the same thing I did when going to teamLab Borderless in Japan, very cool.
Great capcha!
I’m so bad at drawing it only had a 46% confidence level that it was a fish
Very fun. My only suggestion would be a small highlight when you submit your fish so you can easily see which fish is yours - at least for a few seconds.
Mine was showing a highlight in Firefox on Windows 11. Subtle "sun rays" around my fish.
My fish had a highlight. It looked like rays of light emanating from the fish
This happened for me, yellow/gold flashy lines around my fish. Maybe you missed it?
Well the first thing I did was submit a good ole CNB (use your imagination) and it put it under review.... so nice job hah!
This is so fun. I wonder if there is a similar page for other animals,
that's so random and fun! I love it!
Please approve my anglerfish. Thank you.
I know you tried to hack it the same way as I did.
you can upvote your own fish as much as you want
I'm hard stuck on fish probability 59% fml
If vibe coding means more silly fish-drawing apps in the world then I’m 100% for it.
i love frivolous stuff like this. it's art that reminds me of the internet's early days, well done.
How do I eat the other fish?
My eel didn't qualify as a fish :(
Neither did mine, only 6.5%, they're the best fish though.
No obscene fishes observed. Well done! :)
its got nazi fish (one with a swastika on it) in the tank already, hooray for the internet
is it normal to expose API key and App ID on Github? I don't use firebase but figured I should ask
"Built with hate"...? Too bad. Love the rest of the project.
Cool, just made nemo!
This is the only type of thing people should actually vibe code. I love it
Haha this is good times - solid site
Very nice work. You could improve the tank rendering performance though...
Asking ChatGPT Agent to try doing this is hilarious
The top ranked fish, with a score of 236,208, advocates for a second Jewish holocaust.
https://imgur.com/a/qwRQJcL
I presume lots of people are flagging it but no action is being taken. It really damages the wholesome vibes.
https://www.theguardian.com/world/2023/oct/31/from-the-river...
Top ranked fish has score 248k, 324k likes. Second has score 8k, 8k likes.
All other submissions have score approximately equal to number of likes.
Is the first submission legit or the result of hackers?
Getting that fishmax is really hard, any tips?
This is who I want to be when I grow up
It did not like my fish :(
Kudos to the person who managed to sneak a tiny fish, in a fish tank, on a table, with a plant in a plant pot, past the detector.
Can you add search by fish name?
Start drawing live fish
This is ingenious
I get neal.fun vibes from this
he is an inspiration 100%!!!
Missed opportunity to call it
Fish or no fish
No worky (Android/FF)
Great project!
10/10 love it!
No mobile support?
There is mobile support... but it currently loads a 40mb model which doesn't work so great in a lot of places where you will use a phone. I meant to allow you to submit anyway, but I didn't test enough. Sorry...
Didn't work for me either, android/waterfox :(
I drew a 100% fish but it was classed only 58% a fish.
https://drawafish.com/rank.html?userId=1754072603630_i0f8iw6...
Reminds me of Team Lab Borderless in Tokyo, Japan
I saw my fish die :(
This is what the internet should be all about.
Now, make a man and we will make him adventure in the forest?
I waited for my fish. But it never came. Made me sad.
It turns out there are two filters; the fishiness as determined by the UI layer must be separate from the content moderation filters on the backend. I've also had a couple fish that the UI thought were acceptable but the backend (rightfully) disappeared into the void.
sorry, i accidentally broke it by giving 500 in the url-param
omg best shit that happened in 2025 yet, well done
RS HN crossover didn't expect to see this lol
Now I want to see the adult version of this project: same thing with no CNN.
Inundate me with penises and swastikas!
Recently, https://news.ycombinator.com/item?id=44670499
It got a lot of excitement but almost no front page time so we've given it another go via a re-post and the SCP.
Yeah, the mods reposted it because I am a lurker not a poster and have all the deficiencies that exist therein...
[dead]