HackerTube
HomeLongsLikedHistoryWatch laterCategoriesPlaylistsSettings

Painting a Character with Maths

Inigo Quilez13 HN recommenders · recommended in 10 months, 2021-2025
YouTube
458K views · 5 years ago · tutorial · evergreen

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.

Creative coding & generative artComputer graphics & rendering#sdf#shaders#shadertoy#proceduralart#raymarching#glsl

19 comments from Hacker News

@Jare2025 · in “Shaders: How to draw high fidelity graphics with just x and y coordinates”

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

RecommendsView on HN
@rozab2025 · in “LL3M: Large Language 3D Modelers”

This is of course true, but have you ever seen Inigo Quilez's SDF renderings? It's certainly not scalable, but it sure is interesting ▶ this video

CitesView on HN
@emigre2025 · in “Inigo Quilez: computer graphics, mathematics, shaders, fractals, demoscene”

Check out 'Painting a Character with Maths' [1] (2020) by him, it's a very interesting video. [1] ▶ this video

RecommendsView on HN
@antegamisou2023 · in “Painting with Math: A Gentle Study of Raymarching”

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

RecommendsView on HN
@vanderZwan2023 · in “Infinite Photorealistic Worlds Using Procedural Generation”

Could you define "assets", please? What would you consider the assets in these videos by Inigo Quillez, for example? link ▶ this video

CitesView on HN
@dgellow2023 · in “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

Strongly recommendsView on HN
@pdpi2023 · in “Procedural 3D mesh generation in a 64kB intro”

And, if we're suggesting Shadertoy, this video by one of its creators is probably worth watching: ▶ this video

RecommendsView on HN
@gcr2023 · in “The model for the coins in Super Mario Odyssey is 65% simpler than in SM Galaxy”

Inigo Quilez does some incredible stuff with signed distance fields! Those don't use textures in the traditional sense, but see ▶ this video

CitesView on HN
@nighthawk4542022 · in “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

Strongly recommendsView on HN
@CyborgCabbage2022 · in “Ask HN: What piece of code/codebase blew your mind when you saw it?”

He has a YouTube channel as well: ▶ this video Also you may like Marble Marcher made by Code Parade, it's a game that uses a similar approach to rendering: link

CitesView on HN
@silviot2022 · in “Bauble: A playground for making art with Lisp and math”

Previous discussion: link (36 comments - sep 6th 2022). This video [1] linked there shows how far you can get with this technique. [1] ▶ this video

CitesView on HN
@brundolf2022 · in “Sliderland – Creative coding with 64 HTML sliders”

It's very similar to writing shaders. Check out this video for some crazy stuff you can do with equations: ▶ this video

RecommendsView on HN
@lifthrasiir2022 · in “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

RecommendsView on HN
@t8y2022 · in “The performative quality of computer-generated art”

I don't think that people only value the output. Take "Selfie Girl"[0] by Inigo Quilez people appreciate that it's a shader, even people that are not into programming (though they'd need to see the making of video[1]). [0] link [1] ▶ this video

CitesView on HN
@gregsadetsky2021 · in “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"

Strongly recommendsView on HN
@dominicjj2021 · in “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 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

RecommendsView on HN
@sxp2021 · in “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.

Strongly recommendsView on HN
@kn8a2021 · in “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

Strongly recommendsView on HN
@lligallo2021 · in “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

RecommendsView on HN
Learn to Paint with Mathematics24:02

Learn to Paint with Mathematics

Inigo Quilez
191K views • 12 years ago
Making a heart with Maths10:14

Making a heart with Maths

Inigo Quilez
112K views • 9 years ago
I painted a Landscape with Mathematics42:00

I painted a Landscape with Mathematics

Inigo Quilez
812K views • 4 years ago
LIVE Coding "Happy Jumping"5:43:06

LIVE Coding "Happy Jumping"

Inigo Quilez
106K views • 7 years ago
NVScene 2015 Session: How to Create Content with Signed Distance Functions (Johann Korndörfer)51:06

NVScene 2015 Session: How to Create Content with Signed Distance Functions (Johann Korndörfer)

NVScene
35K views • 11 years ago
[JSConfUS 2013] Steven Wittens: Making WebGL Dance30:55

[JSConfUS 2013] Steven Wittens: Making WebGL Dance

JSConf
56K views • 13 years ago
I Tried Turning Games Into Text18:18

I Tried Turning Games Into Text

Acerola
571K views • 2 years ago
8 Bit & '8 Bitish' Graphics-Outside the Box1:25:34

8 Bit & '8 Bitish' Graphics-Outside the Box

GDC Festival of Gaming
568K views • 9 years ago
SYMBOLICS S-PACKAGES 3D GRAPHICS AND ANIMATION DEMO29:16

SYMBOLICS S-PACKAGES 3D GRAPHICS AND ANIMATION DEMO

Red Martian
14K views • 13 years ago
ShaderToy LiveCoding - The Drive Home - 1. Basic Setup15:39

ShaderToy LiveCoding - The Drive Home - 1. Basic Setup

The Art of Code
28K views • 9 years ago
elevated by Rgba & TBC | 4k intro (FullHD 1080p demoscene demo)3:36

elevated by Rgba & TBC | 4k intro (FullHD 1080p demoscene demo)

Demoscene High-Quality Videos (Annikras)
317K views • 15 years ago
Coding Adventure: Ant and Slime Simulations17:54

Coding Adventure: Ant and Slime Simulations

Sebastian Lague
2.2M views • 5 years ago
Shader Basics, Blending & Textures • Shaders for Game Devs [Part 1]3:53:11

Shader Basics, Blending & Textures • Shaders for Game Devs [Part 1]

Freya Holmér
1.9M views • 5 years ago
Superpositions, Sudoku, the Wave Function Collapse algorithm.14:28

Superpositions, Sudoku, the Wave Function Collapse algorithm.

Martin Donald
764K views • 6 years ago
The Drive Home - ShaderToy2:01

The Drive Home - ShaderToy

The Art of Code
11K views • 9 years ago
Surface-Stable Fractal Dithering Explained21:46

Surface-Stable Fractal Dithering Explained

runevision
646K views • 1 year ago
Alex Evans at Umbra Ignite 2015: Learning From Failure30:46

Alex Evans at Umbra Ignite 2015: Learning From Failure

Media Molecule
68K views • 11 years ago
The Art of Code - Dylan Beattie1:00:49

The Art of Code - Dylan Beattie

NDC Conferences
4.9M views • 6 years ago
GuiltyGearXrd's Art Style : The X Factor Between 2D and 3D58:59

GuiltyGearXrd's Art Style : The X Factor Between 2D and 3D

GDC Festival of Gaming
710K views • 11 years ago
Intrinsic Gravity by Still3:35

Intrinsic Gravity by Still

TiXL
224K views • 11 years ago