An introduction to Shader Art Coding

1.3M views · 3 years ago · tutorial · intermediate · evergreen

A tutorial by kishimisu that teaches shader art from scratch, building up a colourful animated fragment shader step by step. It covers the shader mindset, coordinates, distance functions, palettes and iteration, written as GLSL in the browser.

HN people treat it as the friendliest entry point to making art with shaders, often listed next to The Book of Shaders.

“Great intro to programming shaders for art from kishimisu”

8 comments from Hacker News

T
@Tomte2024 · in “Ask HN: What to build (to get excited again)?”
I feel similarly. My plan is the new edition of "The Nature of Code" and "Mazes for Programmers". Also maybe ▶ this video
RecommendsView on HN
z
@zengid2024 · in “The Book of Shaders (2015)”
I just started working through this over holiday break, and it's been a joy! I can also recommend this awesome video from kishimisu: ▶ this video
RecommendsView on HN
z
@zengid2023 · in “Genuary 2024: Generative Art / Creative Coding Month”
Edit: Hey my bad the prompts for Genuary are all for making visuals, but I suppose they could be interpreted for audio too. My bad, but I'll leave my music-nerd rant below in tact in case anyone finds it useful ---------------- This is awesome, I didn't know about this but I've been subconsciously preparing for it over Christmas break. Here's what I've found useful: Music: - Eli Fieldsteel's intro to SuperCollider course is fantastic. SuperCollider language is kind of nice. Function literals are simply curly braces, `{}`, and the last expression is returned. It has pipe's for function arguments, so if you squint it kind of feels like Ruby or Rust. // a silly function. Note that paren "blocks" make evaluating multiple lines easier ( x = {|num| num.squared + 42 }; y = x.(0); ) If you've only ever used JavaScript, there's a lot of "wtf is this shit" moments, but otherwise it's really nice. I feel like SCLang is super powerful and want to use it for some projects. Here's Eli's course playlist: link - Sonic Pi is built on-top of SuperCollider, but it's MUCH easier to get started with making bleeps and bloops. Sam Aaron, who originally created Overtone (a Clojure front-end for SuperCollider) created Sonic Pi initially to teach kids computer programming and music, but now it's turning into a pretty nice live-coding setup. The language is basically a DSL extension of Ruby, and although it's very elegant, I feel like it's a little nerfed in terms of a full language when compared to SCLang, so I'm sticking with the latter for now. High recommend checking it out if you're new to making music or code. link - This 'Intro To Live Coding' vid from Alex McLean is great. Gives a good overview of a few fun tools out there that I won't mention here for sake of time (check out Gibber and Hydra for web-based coding things. Gibber is really slick). Alex invented Tidal Cycles, which I feel is like god-tier in terms of power and conciseness. Maybe I'll tinker with Tidal someday, but I want to start with SC. link Graphics - Processing is a great place to start: link - Great intro to programming shaders for art from kishimisu: ▶ this video - Inigo Quilex invented ShaderToy among other things. I haven't watched this yet but I'm sure it's awesome: link - Hydra looks pretty neat for live-coding graphics in the browser: link I was really hoping to find a platform that would allow for integrating a programmatic 'score' of music and drive visuals from it, like one step above just using the wave-form to trigger visuals.. I don't know if I've found what I'm happy with yet.. I think I'll try to hook up the OSC signals from SuperCollider with some visuals, but not sure. I want to use shaders if possible, and SC doesn't really support that. Gibber seems great but I'm not sure. Maybe Tidal has it, but the Tidal lang might take a while to learn. I want to use raw frequency values for the notes as much as possible, and that's really easy in SC. I don't want to be stuck using midi notes.
RecommendsView on HN
r
@russellbeattie2023 · in “An Introduction to Shader Art Coding”
Submitted the video to Hacker News.
RecommendsView on HN
d
@danboarder2023 · in “An introduction to Shader Art Coding [video]”
Submitted the video to Hacker News.
RecommendsView on HN
d
@ducaale2023 · in “An Introduction to Shader Art Coding”
Submitted the video to Hacker News.
RecommendsView on HN
h
@hello_computer2023 · in “An Introduction to Shader Art Coding”
Submitted the video to Hacker News.
RecommendsView on HN
r
@rntc2023 · in “An Introduction to Shader Art Coding”
Submitted the video to Hacker News.
RecommendsView on HN