LIVE Coding "Happy Jumping"

Inigo Quilez · 106K views · 2019 · 5:43:06

Open on YouTube

Creative coding & generative artComputer graphics & renderingtutorial

Why Hacker News recommends it

HN commenters point to it as a patient, full-length walkthrough of how a raymarched shader is built from scratch.

What it is

Inigo Quilez live-codes the "Happy Jumping" animated scene in a Shadertoy GLSL shader over about six hours. He builds the raymarched character step by step, explaining the math and procedural techniques, with checkpoints linked for each stage.

Recommended by 2 HN commenters across 2 different months, 2020 to 2022.

What Hacker News said

Strong rec jwatzman · 2022-06 · on “Source code for 4kb demoscene production “Elevated” released (2016)”

Indeed his videos are amazing . My recommendation though would be to start with the "beginner" video -- which is completely 2D but at least gets some ideas across. Then watch [LINK] which isn't his but introduces how you get 3D out of fragment shaders. Finally just drink from the firehose -- [this video] is fantastic, yes it's five hours but worth it. (Definitely come into that familiar with the idea of raymarching though... the first few minutes start off super basic but it goes to eleven real quick.)

Recommends trollied · 2020-10 · on “Raymarching with Fennel and LÖVE”

If you have 6 hours to kill, check this shadertoy that uses ray marching: [LINK] And the video that goes through its creation step by step: [this video]

Cites DonHopkins · 2021-01 · on “Raymarching Distance Fields (2008-2020 compilation)”

Inigo Quilez's procedural raymarching masterpiece, "Surfer Boy": [LINK] // Created by inigo quilez - iq/2018 // License Creative Commons Attribution-NonCommercial-ShareAlike 3.0 Unported License. // A surfer boy in the beach, disney/pixar style. I had to be very careful // with the complexity, otherwise the browser would crash during shader // compilation. I also had to split the boy in two layers because of that, // see below (the single pass version is smaller of course but takes 3 extra // seconds to compile, and renders a bit more slowly) // // This is totally painted to camera, it won't work from others perspectives. // // Common - contains some basic stuff // Buffer A - renders the bra