Painting a Character with Maths

Inigo Quilez · 457K views · 2020 · 24:46

Open on YouTube

Creative coding & generative artComputer graphics & renderingtutorial

Why Hacker News recommends it

HN repeatedly calls it a mind-blowing and accessible introduction to SDFs and procedural art from a master explainer.

What it is

Inigo Quilez live-codes a cartoon character painting entirely from math, using signed distance fields in a Shadertoy shader. He explains each step of building the image from formulas.

Recommended by 13 HN commenters across 10 different months, 2021 to 2025.

What Hacker News said

Strong rec kn8a · 2021-01 · on “2020 Mathematical Art Exhibition”

This was a mind blowing example of math and art from last year - perhaps the live coding of the method was even more impressive than the outcome: [this video]

Strong rec sxp · 2021-01 · on “Neural Geometric Level of Detail: Real-Time Rendering with Implicit 3D Surfaces”

If you don't have an understanding of signed distance fields, [this video] is an amazing demo of their power. There are more videos about the fundamentals of SDFs at [LINK] The interesting thing about this paper is that they replace the mathematical SDF with a neural net that computes SDF_NN(x,y,z) => -1/1 and use this as a compression system for mesh based inputs. This feels like a graphical version of the [LINK] for NN-based text compression.

Strong rec gregsadetsky · 2021-08 · on “Fishdraw: Procedurally Generated Fish Drawings”

Agreed. Check out his incredible videos! Such as this mind-blowing one... [this video] "Painting a Selfie Girl, with Maths"

Strong rec nighthawk454 · 2022-12 · on “Signed distance functions in 46 lines of Python”

Great write up. If anyone wants to explore SDFs more, check out Inigo Quilez - he's a master of this stuff and a great explainer. Painting a Character with Maths: [this video] And plenty more on his website in article form: [LINK] Finally, Shadertoy, a graphics shader playground where you can see (and try!) a lot of this kind of stuff: [LINK]

Strong rec dgellow · 2023-04 · on “Simple Pathtracing”

I see a Inigo Quilez link, I upvote! He's one of those incredible artist-engineer out there always pushing boundaries further and sharing his ideas and techniques publicly. If you have some time today, watch a few of his videos on his youtube channel, it's incredible to see his creation process in action: [LINK] For example, "Painting a character with maths" is mind-blowing and packed with SO MUCH educative content: [this video]

Recommends lligallo · 2021-01 · on “Graphtoy”

Checkout this video by the author. It makes a full 3d complex scene out of a math formula, with step by step explanation [this video]

Recommends dominicjj · 2021-04 · on “Condition: A 64KB WebGL Intro”

Demos are almost always generated and displayed at runtime. The music is composed of samples generated at runtime by additive synthesis which is just adding waveforms of differing frequencies together when you get down to it. It doesn't take many lines of code to produce CD quality instruments that can be arranged as a soundtrack. Today's 64k intros offload their drawing onto the GPU using shaders and a technique called raymarching which is a form of fixed-step raytracing that can be done in real time. Essentially the objects you see are painted with math: instead of thousands of vertices for a 3d fractal or a complex object, a formula is fed in to the ray marcher and it returns a shape with

Recommends lifthrasiir · 2022-05 · on “Making graphics in 4 kilobytes (2008) [pdf]”

Inigo Quilez, the author of this slide, also has made in-depth videos [1] [2] which might be more accessible to who aren't familiar with shader languages. [1] [this video] [2] [LINK]