Skip to content
HomeVideos
AllLongsCategoriesPlaylists
BooksBlogsPodcasts
HistoryListsWatch laterLiked videosFollowing

The videos, books, blogs and podcasts Hacker News keeps recommending, all in one place.

VideosBooksBlogsPodcastsAboutPrivacySettings

Data from Hacker News, HackerTube, HackerBooks, HackerBlogs and Open Library. Credits · Not affiliated with Y Combinator.

HomeVideosBooksBlogsPodcasts
Ctrl K

    LIVE Coding "Happy Jumping"

    Inigo Quilez

    2 HN recommenders · recommended in 3 months, 2020–2022

    YouTube

    5:43:06 · 106K views · Aug 14, 2019

    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.

    Design, Graphics & Visual MediaCreative coding & generative artComputer graphics & rendering
    1. 24:02
      Learn to Paint with MathematicsInigo Quilez191K views • 12 years ago
    2. 42:00
      I painted a Landscape with MathematicsInigo Quilez812K views • 4 years ago
    3. 24:46
      Painting a Character with MathsInigo Quilez458K views • 5 years ago
    4. 10:14
      Making a heart with MathsInigo Quilez112K views • 9 years ago
    5. 15:39
      ShaderToy LiveCoding - The Drive Home - 1. Basic SetupThe Art of Code28K views • 8 years ago
    6. 17:54
      Coding Adventure: Ant and Slime SimulationsSebastian Lague2.2M views • 5 years ago
    7. 1:25:34
      8 Bit & '8 Bitish' Graphics-Outside the BoxGDC Festival of Gaming569K views • 9 years ago
    8. 3:36
      elevated by Rgba & TBC | 4k intro (FullHD 1080p demoscene demo)Demoscene High-Quality Videos (Annikras)317K views • 15 years ago
    9. 30:55
      [JSConfUS 2013] Steven Wittens: Making WebGL DanceJSConf56K views • 13 years ago
    10. 3:36
      Elevated by RGBA and TBCBUTTONTANG974K views • 17 years ago
    11. 29:16
      SYMBOLICS S-PACKAGES 3D GRAPHICS AND ANIMATION DEMORed Martian14K views • 13 years ago
    12. 26:13
      Animation Bootcamp: An Indie Approach to Procedural AnimationGDC Festival of Gaming787K views • 9 years ago
    13. 2:01
      The Drive Home - ShaderToyThe Art of Code11K views • 9 years ago
    14. 53:41
      How I animate 3Blue1Brown | A Manim demo with Ben Sparks3Blue1Brown3.3M views • 2 years ago
    15. 24:26
      The Beauty of Bézier CurvesFreya Holmér2.2M views • 5 years ago
    16. 3:53:11
      Shader Basics, Blending & Textures • Shaders for Game Devs [Part 1]Freya Holmér1.9M views • 5 years ago
    17. 5:58
      MarI/O - Machine Learning for Video GamesSethBling12M views • 11 years ago
    18. 10:36
      RiftSketch: Live coding in VR with the Oculus Rift, Firefox WebVR, JavaScript and Three.jsBrian Peiris273K views • 12 years ago
    19. 15:00
      I wrote a Raytracer for DOS, 16 VGA colorsBisqwit905K views • 15 years ago
    20. 51:06
      NVScene 2015 Session: How to Create Content with Signed Distance Functions (Johann Korndörfer)NVScene35K views • 11 years ago

    3 comments from Hacker News

    1. @jwatzmanJun 2022· 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
    2. @trolliedOct 2020· 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
    3. @DonHopkinsJan 2021· 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