Fishdraw: Procedurally Generated Fish Drawings | Hacker News Reader

Fishdraw: Procedurally Generated Fish Drawings

fishdraw.glitch.me

614 pointssigil87 comments

That's nuts. Someone has solved the algorithm of fish and this is it.

But I thought I recognized his name and workstyle before. This guy is literally a genius. Some other works I've seen before:

https://github.com/LingDong-/rrpl - a "radical" new way to describe Chinese characters as a composition of parts

http://nonflowers.lingdong.works/ - procedurally generated flowers in style of classic Chinese watercolor paintings

https://lingdong.works/

And don't forget more classics on his GitHub profile:

https://github.com/LingDong-

including "A programming language for ancient Chinese, and procedurally generated Chinese landscape paintings"

I want to see a gallery show in Beijing.... This guy's work is so fucking good. It's really cool how he puts all the code on GitHub too. Fuck yeah! :P ;) xx

Yeah I recognized him from his Chinese landscape prod gen. I fried my axidraw’s pen lift servo trying to print one of them out. So much stippling.

Need to learn JavaScript so I can understand what he’s doing.

:) Thanks. Cool story. Just perusing your other posts and saw your son wanted to learn linux? Not sure how advanced he is or his inclination but could you go with the OS course from MIT? There's a good PDF book that covers the basics of a linux-style OS to give a good overview. I crammed on it for a system internals interview with FAANG. It was fun! :)

  The parallel and distrubuted operating systems group
    operating systems engineering course
      model operating xv6

  https://pdos.csail.mit.edu/6.828/2018/xv6.html

So my current "people who consistently do really cool niche stuff" list contains foone, Neil Cicierega, jan misali, and now this guy.

Any other suggestions?

A favourite around these parts is Fabrice Bellard: https://bellard.org/

Take a look at the JSLinux project -- so effin' cool!

Definitely Tom7 (suckerpinch on youtube)

Yeah, it just can not be understated what an absolute gem that man is. I almost wish he'd post more often, but I'd always take quality over quantity, and he delivers.

That was a mistake on my part, definitely meant to include him! Very familiar with his work and it's all exceptional.

Inigo Quilez, the Shadertoy wizard.

Agreed. Check out his incredible videos! Such as this mind-blowing one...

https://www.youtube.com/watch?v=8--5LwHRhjk

"Painting a Selfie Girl, with Maths"

Michael Fogleman https://www.michaelfogleman.com/

Oh cool, I've used his Rush Hour solver before! Small world.

Why Beijing? He lives in the US.

Agreed his work is excellent. I particularly like that he brings different aesthetics to generative art. Traditional Chinese brushstrokes, these 19th century European themed fish drawings.. It's nice to see something calm and classical.

Right. Pa, CMU. Is that current though?

This is just lovely. But I am also tickled by the nominative determinism of the dots on the fish being generated using Poisson Disk sampling.

https://github.com/LingDong-/fishdraw/blob/main/fishdraw.js#...

https://en.wikipedia.org/wiki/Supersampling#Poisson_disk

Because poisson=fish in French? <º))))><

The same author's "Procedurally-generated vector-format infinitely-scrolling Chinese landscape" is also quite beautiful:

http://shan-shui-inf.lingdong.works/

(keep clicking the rightmost arrow)

Yes, Lingdong Huang is awesome! I have that exact one running on a framed eInk display on my wall. I had to make some minor modifications to make it run in NodeJS instead of in a browser, and then generate a raster image to send to the eInk display, but it wasn't hard.

I got permission from the author to post my work to Hackaday (with credit to him) which I'll do at some point. I'm actually working on a 3-panel "wide" version of it that I want to get done first.

https://dheera.net/projects/einkframe/

3-panel version in progress:

https://imgur.com/a/3IfKpb3

Really great project! Thanks for sharing it

>"Lingdong Huang is awesome!"

I looked at his github and yes is is awesome. Thanks for pointing this. Will read a bit more of his stuff.

That's brilliant, and a perfect application for a display like that. Thanks for sharing and I look forward to seeing the 3-panel version

Inconvergent (https://inconvergent.net/) is another stunning generative artist as well; their generative trees (browser version: https://zv.github.io/static/algorithmic-tree.html) are especially evocative of Fishdraw.

Love the generated art projects. I just want an art ‘frame’ (display with small computer) that generates new art every so often. Put together a few of the various art ML projects into one product for this.

with a button where you can click it to save particularly genius results that appeal

Maybe.

There's something beautiful about ephemeral things too.

Hacked kindles work well for this.

Kindles are too small and have no color. I want a large colorful framed picture. E-ink would be awesome but that’s not cheap for color displays and def not for large ones.

I mean, if you have cash and time to spend on the engineering, you can do it

https://shopkits.eink.com/product/31-2%cb%9d-color-epaper-di...

If you don't have that much cash but don't mind it emitting light, just get a used 4K TV or monitor and get a custom frame built for it.

The good thing is you only have to buy it once, and then you have unlimited amounts of art you can display.

Also, used Boox tablets of previous models. You can get ones upto 13 inches, which Kindle doesn't have. They run Android, so you can just write a standard Android app and run it, no hacking needed.

Yep, I did this

https://dheera.net/projects/einkframe/

I'm working on a 3-panel version of it since I want a "wider" view of this scrolling landscape, and single e-Ink displays that big aren't cheap but 3 of these smaller displays are still within my budget.

https://imgur.com/a/3IfKpb3

This is really cool! Thanks for sharing

New images, yes; but, new art? Isn't the art of an image imbued by the artist, DuChamp style.

Or, I guess maybe it's like a quantum effect and the art appears when the viewer perceives it.

Don't get me wrong, I too love generative art, conceptually and the outputs of generative algorithms too.

Have you seen the Samsung "The Frame" range? They really look like a painting, they have art you can display, and I'd guess you could add others to it.

https://www.samsung.com/au/tvs/the-frame/highlights/

Looks like the right hardware. I wonder if it’s easy enough to change the software though. I don’t want existing art, I want generated art, new for me :)

Does anyone have a good list of resources for people who want to get a get baseline on understanding and implementing procedural generation?

It's more art than code, maybe start drawing a city skyline. Have different basic types of roof (triangle, trapezoid, none), windows (round, square, subdivided) and a variable number of flours. Play around with it in html canvas.

I don't have a list, but "processing" language is very good at art and math(s) stuff

https://processing.org/

it has some cool demos/ examples

https://processing.org/examples/

and it's opensource

The Nature of Code book is a great resource. Dan also deep dives on specific topics on his YouTube channel.

- https://natureofcode.com/book/

- https://www.youtube.com/c/TheCodingTrain

I have some generative art tutorials using p5js on my blog @ https://brianfernandez.dev/art

In terms of the drawing aspects, working on SVG or raw canvas drawing each have some drawbacks. If you don't need to output vector files, I recommend PixiJS, which gives you a stage-based display chain on top of WebGL where you can mix free-form line drawing with pre-made sprites. I used to write a ton of procedural graphics with Actionscript, and this has been my clearest path to continue on those projects. Some AS3 drawing code is almost directly portable.

https://www.pixijs.com/

I would refer you to the demoscene. (I'm surprised to be the first one to mention the word in this discussion.)

This guy has a lot of interesting stuff on his site: https://iquilezles.org/

Never dabbling in the demoscene as a 90s teenage hacker is one of my few computing regrets.

I love the simple style, this is great. I’ve been toying with procedurually generated drawings in Racket and find it mesmerising to observe how much conplexity can be generated from the permutations of a few rules. There’s still a lot of fish to catch in generative art

This is great. Where did the inspiration come from for this project?

Why does this use let and var together? Was I (not a modern js expert) wrong to think var is considered obsolete? Is it because OP wanted to use var's scoping rules?

var is not obsolete. You still need it sometimes for scoping reasons.

Could you give an example? It seems like any "var" could be replaced with "let" at a different scope.

Won't work:

    if(checkForSomething()) {
      let foo = 2;
    } else {
      let foo = 3;
    }

    console.log(foo); // won't work

But:

    if(checkForSomething()) {
      var foo = 2;
    } else {
      var foo = 3;
    }

    console.log(foo); // will work

That said, I religiously avoid "var" and just declare the variable beforehand with "let" because there are too many other gotchas with var. Less debugging headaches. And use "const" religiously as well, like C++ people do.

const in C++ is very different than const in JavaScript though. I guess you are well aware of that but I feel like being pedantic.

This is allowed in JavaScript:

    const foo = {bar: 1};
    foo.bar = 2;

It's not really any different if you keep in mind that foo is a reference here, and so that's what const applies to. The equivalent in C++ would be a const pointer to a non-const object.

const foo = Object.freeze({bar: 1});

That's exactly what I meant by "any "var" could be replaced with "let" at a different scope":

    let foo;
    if (checkForSomething()) {
       foo = 2;
    } else {
       foo = 3;
    }

You don't need var, you don't need it's weird scoping behavior.

It's almost certainly from copy-pasted code from other sources. The Perlin Noise section at the top is not original code at least - though I can't find an original source.

https://github.com/processing/p5.js/blob/8213eecccdff510015e...

I think this is the first time I have ever seen Glitch used for anything.

This was made on Glitch too https://news.ycombinator.com/item?id=27929278

This is wonderful. There's just something evocative about fish--with their flat side portrait look, and wide open eyes that make them a perpetually interesting subject for art.

A gallery of example results:

https://github.com/LingDong-/fishdraw#gallery

I did this procedurally generated "groovy" fishes side project just a few weeks ago (it was a one day project). Not comparable to the work in this link obviously, but the coincidence made me smile.

https://neiman.co.il/temp/fish/

An absurd and wonderful project!

This is so dope - creating good generators is so hard, great work!

Fun! And since "there's no such thing as a fish", these drawings are as legitimate as anything else you call a fish.

I love these kind of projects. Well done!

If you like this, check out Lingdong Huang's personal website. It's chock-full of really joyful little projects.

Would be cool to have one of these simulated aquariums using these fishes.

1. I like it!!!

2. Are these fish real or just real-istic? Not judging, just curious.

Here is the repository (was shared yesterday in reddit’s r/generative): https://github.com/LingDong-/fishdraw

I took a look. I can't really understand it (unless I spend the whole next week on it... which I will probably do). Could someone with more expertise in the topic explain me how it is done (high level overview)?

0) sepect random parameters for body size/shape, fin size/shape, etc.

1) draw fish outline

2) complete rest of the fish

Sounds a bit like /r/restofthefuckingowl.

What coolspot says below. I want to have a look and maybe create my own version, I love generative art. My "best" (the one that made me happiest) creation followed the same approach. It's an iris [0] , and the process of drawing tries to mimic how you'd draw it… and I just broke the implementation in the pieces needed for it:

    - Create background gradient
    - Create muscular coloured stripes
    - Add a bit of noise to the stripes
    - Gradient for the pupil
    - Reflection in iris and reflection in pupil (the last one is "fake")

[0] https://github.com/rberenguel/sketches#iris-p5js

Generated AFAICT :)

lingdong is a awesome. tons of interesting stuff in his github. https://github.com/LingDong-

Feature request: it'd be nice to have a way to generate a link to a particular fish, such that it can be generated again.

It looks like you can provide a seed based on the readme in the github repo. This would produce the same fish every time.

I think GP is asking that every time you refresh the fish, it uses a different seed and it publishes it, perhaps via a share link. Otherwise, to find a fish you want you'll have to manipulate the url multiple times.

https://fishdraw.glitch.me/?Bob=1234

Adding to my favorites

cryptofish!

amazing.

Fish

why isn't this an NFT project?

ugh

because NFTs are bad for the fish / environment

underrated

the name could even be catchy ... CryptoFish

Reply on news.ycombinator.com