Painting a Character with Maths
Inigo QuilezRecommended by 13 HN commenters across 10 months, 2021–2025
tutorial · intermediate · evergreen · 2021–2025 on HN
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.
HN repeatedly calls it a mind-blowing and accessible introduction to SDFs and procedural art from a master explainer.
Up next
7 mo on HNI painted a Landscape with Mathematics
Inigo Quilez
Recommended 7× on HN · 2022–2025
1 mo on HNReact without memo
React Conf
Recommended 1× on HN · 2022–2023
2 mo on HNMy descent into America's neo-Nazi movement & how I got out | Christian Picciolini | TEDxMileHigh
TEDx Talks
Recommended 2× on HN · 2020–2023
3 mo on HNBackpropagation, intuitively | Deep Learning Chapter 3
3Blue1Brown
Recommended 4× on HN · 2017–2024
5 mo on HNJames Burke Connections, Ep. 4 "Faith in Numbers"
DRS_Education
Recommended 4× on HN · 2020–2026
11 mo on HNJames Burke Connections, Ep. 1 "The Trigger Effect"
DRS_Education
Recommended 12× on HN · 2019–2026
4 mo on HNGreat Impractical Ideas in Computer Science: PowerPoint Programming
Tom Wildenhain
Recommended 4× on HN · 2020–2026
2 mo on HNSensor Fusion on Android Devices: A Revolution in Motion Processing
Google TechTalks
Recommended 2× on HN · 2012–2026
17 mo on HN8 Bit & '8 Bitish' Graphics-Outside the Box
GDC Festival of Gaming
Recommended 13× on HN · 2018–2026
10 mo on HNelevated by Rgba & TBC | 4k intro (FullHD 1080p demoscene demo)
Demoscene High-Quality Videos (Annikras)
Recommended 7× on HN · 2013–2025
6 mo on HNThe Art of Code - Dylan Beattie
NDC Conferences
Recommended 6× on HN · 2020–2024
6 mo on HNFunctional Composition - Chris Ford
ClojureTV
Recommended 6× on HN · 2013–2023
12 comments from Hacker News
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
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
Agreed. Check out his incredible videos! Such as this mind-blowing one... ▶ this video "Painting a Selfie Girl, with Maths"
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
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.
Obligatory "this painting is a mathematical formula, a big function on the x and y coordinates of each pixel" video from Iñigo Quilez. ▶ this video
Check out 'Painting a Character with Maths' [1] (2020) by him, it's a very interesting video. [1] ▶ this video
Good to see high quality articles gaining traction. If the article looks too verbose, be sure to check out, as the author cites, Inigo Quilez's videos Painting a Landscape with Maths - link Painting a Character with Maths - ▶ this video Bonus: Painting with Maths in Google Sheets - link
And, if we're suggesting Shadertoy, this video by one of its creators is probably worth watching: ▶ this video
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
It's very similar to writing shaders. Check out this video for some crazy stuff you can do with equations: ▶ this video
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 colors and lighting. Combining shapes using unions and intersections is then done and often the shape formula will take time as a parameter as well. To play with this concept yourself go to link and see how shader programs are rendered into incredible scenes with astonishingly few lines of code. For a wonderful look at the creation process, see the grandfather of raymarching Inigo Quilez create a selfie of a girl from scratch using formulas here: ▶ this video