Skip to content(if available)orjump to list(if available)

Show HN: Draw a fish and watch it swim with the others

Show HN: Draw a fish and watch it swim with the others

224 comments

·July 29, 2025

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.

primitivesuave

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...

cortesoft

I am literally trying my best to draw a fish only to be told it is only 30% likely to be a fish. Cruel.

kristopolous

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

kayge

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

LtWorf

Well what's the difference between a lamprey and an hot dog?

theginger

That makes me feel better about my fish, I thought it was among the worst, but good to know it atleast qualified.

mikepurvis

Also make sure you’re filling up the canvas — don’t draw something too small.

GaggiX

Did it face the right way?

davidcollantes

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!

mikepurvis

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.

lelandfe

If you have a tablet and some artistic background, these are all definitely doable. Doing those with a mouse would be a lot harder.

jackero

I like to draw with a mouse. Just takes practice, like anything.

ionwake

I was extremely happy with my 60% Wang fish. And now after looking at the leaderboard I feel bad.

raisedbyninjas

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.

rightbyte

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!

alphazard

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?

creata

    const input = document.createElement("input");
    document.body.append(input);
    input.type = "file";
    input.accept = "image/*";
    input.onchange = e => {
        if (input.files && input.files[0]) {
            const canvas = document.getElementById("draw-canvas");
            const ctx = canvas.getContext("2d");
            createImageBitmap(input.files[0]).then(img => ctx.drawImage(img, 0, 0));
        }
    };

tamimio

I drew it with the mouse, doable bit you can use your ipad

fckgw

You could also just load up the website on an iPad with an Apple Pen.

mh-

Unfortunately, that did not improve my drawing skills over using the trackpad. At all. :(

yieldcrv

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

herval

you can also upvote your favorite however many times you want!

null

[deleted]

bbor

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??

rightbyte

Well you can click thumbs how many times you want so ...

gus_massa

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.

LordDragonfang

OP really needs to read "How not to sort by average rating"

https://www.evanmiller.org/how-not-to-sort-by-average-rating...

andy99

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!

hallak

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 :)

roughly

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

sebastiennight

By volume, yes, but by mass, it's a pretty reasonable load

jasonkester

When I launched Twiddla, it was so common that we joked about adding them to the shape tool.

I think it’s just human nature that that’s the first thing you try to draw on any online whiteboard.

stbtrax

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 %

nozzlegear

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.

dingnuts

is this a reference to the new South Park episode?

(sorry)

lawlessone

>is this a reference to the new South Park episode?

I don't think so, he said "long" lol

nozzlegear

Haha, not intentionally!

fossislife

There are some fish decorated with swastikas floating around

specproc

And a Star of David

Edit: And a lot of Palestinian flags when sorting by popular.

tgtweak

Just noticed "Chosen Fish" on the leaderboard - sometimes it's a bit less subtle.

salamanderman

As hard as I tried to add fish characteristics, it knew what I was doing.

praptak

I wonder if it's resilient against swastikas made of penises.

QuinnyPig

That was the Slack logo redesign.

maxbond

My hot take is that the Slack logo is an Alphabet-product logo. The colors aren't quite right, but it's red/yellow/green/blue like an Alphabet logo. It would fit right into the lineup. It's particularly similar to the (obsolete) Google Podcasts and Google Photos logos.

My pet theory (that I don't sincerely believe) is that this was deliberate to help smooth a hypothetical acquisition by Alphabet, before they were bought by Salesforce.

danesparza

Well now I can't unsee that.

Culonavirus

Well apparently it wasn't trained against asses, since it let me write "Ass" on my fish :P

alangibson

I drew a fish and wrote PENIS on the side. Did I beat the game?

mmmpetrichor

I just saw the N-word written on a fish. so eh.. that didn't last long.

dpoloncsak

https://imgur.com/a/Vtoxc7p

35% for this masterpiece? Rigged

MichaelDickens

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%.

xyst

Magikarp is not a fish to a robot

darknavi

It's not a good fish to pokemon trainers either. 35% seems about right.

magnat

Try SolidGoldMagikarp

furyofantares

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!

gus_massa

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?

littlekey

You're right, that IS interesting. Something about having to learn with rigid constraints first before you can generalize the knowledge, I guess.

furyofantares

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.

null

[deleted]

MikeHartman

Fun, but really frustrating to spend a ton of time making a detailed fish, get a fish probability of 67.2%, submit it successfully with no note about it needing moderation, and it still never shows up.

And I don't mean "I never noticed it show up in the public tank". I mean my profile says "8 fish created", but if I "view my fish" there are only two in the list. If I go to my default fish tank I see all 8, but if I click on one of the missing ones and try to add it to a different tank or vote on it I get "Failed to <do whatever>: Fish not found".

They exist but they don't exist. This isn't a tank, it's a window into purgatory.

amitp

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.

rafram

> 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.

hallak

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

rafram

You still should not be building HTML and JS using string interpolation.

hallak

Absolutely! I've removed all references of HTML and JS using string interpolation.

(jk)

This is definitely a drawback with with vibe-coding. I never really write like HTML5 style code - at work I always use typescript with heavy ESLint, so never have to worry about this.

I figured the string sanitization in the backend would take care of any XSS vulns, which was my main concern. But I will have to read into the dangers of string interpolation which I admit I do not remember too much about (outside of the XSS stuff I tried to mitigate).

Thanks for giving the opportunity to learn... :)

hyperhello

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.

rafram

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.

hyperhello

If that’s all you want, it’s trivial to replace all < and & with their encodings.

volkk

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

onlyusername

One of the teamLab exhibitions, probably: https://www.teamlab.art/e/

socalgal2

2013 https://futurepark.teamlab.art/en/places/ryubo/

They have it in several other places.

neumann

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.

romanhn

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.

zengineer

I found https://dibulo.com - where you (ok and kids) can do it at home :)

zedstar

Teamlabs - Borderless, I also did the same : )

volkk

yep that was it!

evan_

I couldn’t get it to go above 50% and then I wrote “fish” on it and it went up 5 points

WangComputers

I gave my blue fish a black Hitler mustache and it went up by ten points

Exuma

hallak

I have 100 of these in the training data under not_fish....

binarymax

This guy reddits

marginalia_nu

Moray fans in outrage.

8organicbits

> I built a basic CNN trained against penises and swastikas

From the description

cekanoni

I would say its a 100% dfish

crinkly

First thing I drew.

nottorp

> 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...

boje

I tried my damnedest to give my fish a ballsack. That's a real good fishiness detector.

OJFord

Did you manage it after commenting? 'ballsy' is ranked quite highly: https://drawafish.com/rank.html

hallak

This is only possible due to the surfeit of ballsacks in the training data from users like you :)

CGMthrowaway

You mean a skein?