HackerTube
HomeLongsLikedHistoryWatch laterCategoriesPlaylistsSettings

LIVE Coding "Happy Jumping"

Inigo Quilez2 HN recommenders · recommended in 2 months, 2020-2022
YouTube
106K views · 7 years ago · tutorial · evergreen

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.

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

Creative coding & generative artComputer graphics & rendering#shadertoy#glsl#raymarching#proceduralanimation#livecoding#signeddistancefields

3 comments from Hacker News

@jwatzman2022 · in “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.)

Strongly recommendsView on HN
@DonHopkins2021 · in “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 brackground - not super polished really // Buffer B - blurs the background // Buffer C - paints the boy, except the hand and the board // Image - paints the hand and the board, and does some minimal postpro // // If you have a slow PC, you can watch it here: link And Happy Jumping: link // Created by inigo quilez - iq/2019 // License Creative Commons Attribution-NonCommercial-ShareAlike 3.0 Unported License. // // // An animation test - a happy and blobby creature jumping and // looking around. It gets off-model very often, but it looks // good enough I think. // // Making-of and related math/shader/art explanations (6 hours // long): ▶ this video // // Video capture: link // // You can buy a metal print of this shader here: link

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

RecommendsView on HN
Learn to Paint with Mathematics24:02

Learn to Paint with Mathematics

Inigo Quilez
191K views • 12 years ago
I painted a Landscape with Mathematics42:00

I painted a Landscape with Mathematics

Inigo Quilez
812K views • 4 years ago
Making a heart with Maths10:14

Making a heart with Maths

Inigo Quilez
112K views • 9 years ago
Painting a Character with Maths24:46

Painting a Character with Maths

Inigo Quilez
458K views • 5 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
Coding Adventure: Ant and Slime Simulations17:54

Coding Adventure: Ant and Slime Simulations

Sebastian Lague
2.2M views • 5 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
This game DISAPPEARS if you pause it!3:58

This game DISAPPEARS if you pause it!

Branta Games
687K views • 1 year ago
[JSConfUS 2013] Steven Wittens: Making WebGL Dance30:55

[JSConfUS 2013] Steven Wittens: Making WebGL Dance

JSConf
56K views • 13 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
puls (256 bytes)0:43

puls (256 bytes)

JanRrrolaKadlec
36K views • 17 years ago
The Drive Home - ShaderToy2:01

The Drive Home - ShaderToy

The Art of Code
11K 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
Elevated by RGBA and TBC3:36

Elevated by RGBA and TBC

BUTTONTANG
974K views • 17 years ago
I wrote a Raytracer for DOS, 16 VGA colors15:00

I wrote a Raytracer for DOS, 16 VGA colors

Bisqwit
905K views • 15 years ago
How I animate 3Blue1Brown | A Manim demo with Ben Sparks53:41

How I animate 3Blue1Brown | A Manim demo with Ben Sparks

3Blue1Brown
3.3M views • 2 years ago
I Tried Turning Games Into Text18:18

I Tried Turning Games Into Text

Acerola
571K views • 2 years ago
Animation Bootcamp: An Indie Approach to Procedural Animation26:13

Animation Bootcamp: An Indie Approach to Procedural Animation

GDC Festival of Gaming
786K views • 9 years ago
Rendering Tiny Glades With Entirely Too Much Ray Marching59:20

Rendering Tiny Glades With Entirely Too Much Ray Marching

Graphics Programming Conference
108K views • 1 year 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