ShaderToy for absolute beginners: youtube.com/watch?v=u5HAYVHsascLive Coding: Cairo Tiling Explained!The Art of Code2023-03-06 | You probably know that you can tile the plane with triangles, squares and hexagons. But did you know you can do it with pentagons? While the pentagon has to be skewed a little, this is possible, and it makes for a beautiful, geometric-yet-organic looking pattern called a Cairo tiling, that isn't nearly used enough. In this video we will create this tiling from scratch, in the hopes that it will be used more in the future!
========== Timetable ==========
0:00 - Intro 2:33 - Explanation 4:34 - ShaderToy 5:36 - Coding Starting Pos 6:38 - Square Pattern 14:33 - Angle Range 15:48 - Repeat Pattern 20:32 - Distance 23:55 - ID 27:49 - Hash Function 29:00 - ID 31:20 - Function 32:15 - Blinking Effect 33:43 - Outro
ShaderToy for complete beginners: youtu.be/u5HAYVHsasc Writing a ray marcher: youtu.be/PGtv-dBi2wECoding a Bezier curve from scratch!The Art of Code2022-12-21 | This topic has been much requested, so I finally decided to make a video about it. Bezier curves are used throughout computer graphics and in engineering in general. Most software packages implement curves like these out of the box, but if you want to really get the most out of them then it is good to know how they work, and how you can create them yourself.
In this video we make a segmented quadratic Bezier curve that could be useful in all kinds of scenarios. The topic of Bezier curves is much larger than just this video, so in the future we'll probably visit this topic some more.
========== Timetable ==========
0:00 - Intro 0:32 - Setup 10:04 - Bezier Interpolation 16:56 - Drawing the Curve 24:40 - Outro
Other interesting topics related to this: Tweening Functions: youtube.com/watch?v=pydKWTSGMEM Lagrange Interpolation: youtu.be/4S6G-zenbFMLive Coding: 3d Truchet WeaveThe Art of Code2022-12-09 | In this video we'll make the Truchet weave effect from the last video, in 3d!
ShaderToy for complete beginners: youtu.be/u5HAYVHsasc Writing a ray marcher: youtu.be/PGtv-dBi2wE Torus SDF Explained: youtu.be/Ff0jJyyiVyw?t=490 Booleans Explained: youtu.be/AfKGMUDWfuE?t=763Coding a crazy weave patternThe Art of Code2022-08-15 | In a previous video (linked below) I showed how to make a basic Truchet effect. This tutorial video is about how to weave two Truchet layers together to create a more complex and interesting pattern. It also covers some tips and tricks to make the final result look cooler.
========== Get an NFT of this effect ===============
I added log-polar coordinates to make it look more interesting. If you want to do the same in your own effect, you can just convert the uv coordinates like so: uv = vec2(atan(uv.x, uv.y)/6.283185+0.5, log(length(uv)));
https://www.fxhash.xyz/generative/18101
========== Timetable ==========
00:00 - Intro 00:40 - Setup 01:48 - Truchet Function 17:58 - Colors 19:27 - Multiple Layers 20:40 - Making a Weave 25:37 - Better Blending 29:42 - Chebychev Length 33:10 - Changing Curves 34:01 - Changing Thickness 36:33 - Adding a Pattern 42:14 - Outro
ShaderToy for complete beginners: youtu.be/u5HAYVHsasc Truchet Tiling, explained!: youtube.com/watch?v=2R7h76GoIJMLive Coding: Koch Fractal MagicThe Art of Code2022-07-07 | In the last video we made a fancy 3d fractal Christmas ball by using a Koch Snowflake curve. I mentioned there that there are multiple ways to use this curve to get 3d fractals. In this video we use another technique to get something completely different. If you like 3d fractals, this is a great video to watch.
========== Timetable ==========
0:00 - Intro 0:56 - Start 1:52 - Drawing using Koch coordinates 12:14 - Drawing in 3d 19:36 - Lighting 20:45 - Shaping the fractal 23:05 - Background 26:20 - Outer layer 30:17 - Fade background 31:30 - More tweaking 33:00 - Domain repetition 35:13 - Outro
2D Koch Fractal explained!: youtu.be/il_Qg9AqQkE 3D Koch Fractals Part 1: youtu.be/__dSLc7-Cpo ShaderToy for complete beginners: youtu.be/u5HAYVHsasc Writing a ray marcher: youtu.be/PGtv-dBi2wE Booleans Explained: youtu.be/AfKGMUDWfuEShader Showcase: Code CoutureThe Art of Code2022-07-01 | I digital fashion project I have been working on with Isabelle Udo and Lucas Guzman. The idea is to create 'generative fashion'. Since this will be a blockchain project and all data will go on-chain, it was imperative to minimize the data footprint to generate these visuals as much as possible. At this point we think we can fit everything (minus music, sadly) in less than 10k. If you are on desktop and have a decent graphics card, then you can check out the live version on ShaderToy by clicking the link below.
Twitter: @The_ArtOfCode Facebook: facebook.com/groups/theartofcode Patreon: patreon.com/TheArtOfCode ShaderToy: shadertoy.com/user/BigWIngs PayPal Donation: paypal.me/theartofcode FX Hash (NFTs): https://www.fxhash.xyz/u/The%20Art%20of%20CodeHow to turn your 2d fractal into 3d!The Art of Code2022-06-05 | A while ago someone asked me if its possible to turn a 2d Koch Snowflake into 3d. I thought about it for a bit and came up with a few ways to do this. In this video we'll go over some of those ways!
========== Timetable ==========
0:00 - Intro 0:40 - Setup 5:57 - 2d Koch Distance 10:48 - Implementation in 3d 14:40 - Straight Intersection 17:43 - Material 18:50 - Revolution 24:10 - Blend with Sphere 28:25 - Outro
ShaderToy for complete beginners: youtu.be/u5HAYVHsasc Writing a ray marcher: youtu.be/PGtv-dBi2wE Raymarching operators (Booleans etc): youtu.be/AfKGMUDWfuE Distance functions for 3d primitives (torus, cylinder etc): youtu.be/Ff0jJyyiVyw Creating a Koch snowflake: youtu.be/il_Qg9AqQkEBouncing Balls, Round Two: Logarithms?!The Art of Code2022-04-21 | In this video we'll build the second easing function for a bounce. While I was building the first (with a loop, check link below) I became convinced that there must be a smarter way to do this. The way I came up with uses a logarithm, which gives us an infinite number of bounces, for the price of one! Logarithms are often a bit mysterious to people and therefore quickly forgotten after high school. In this video I hope to give you an intuition about how you can leverage a logarithm to do stuff that could otherwise get quite costly.
========== Timetable =================
0:00 - Intro 1:37 - Problems with Loops 3:01 - Intro to Logarithms 6:30 - Visualizing in ShaderToy 8:30 - Drawing Parabola 10:50 - Changing the Base 13:00 - Attenuate Bounces 16:15 - Undoing Deformation 21:45 - Start at the Top 24:50 - Bonus Time 27:02 - Outro
Let's get Bouncy! (loop version): ShaderToy for complete beginners: youtu.be/u5HAYVHsasc Writing a ray marcher: youtu.be/PGtv-dBi2wEHow to Create Cool Bounce Effects Using a LoopThe Art of Code2022-04-14 | In this video we'll build an easing function for a bounce. This could be used in a game, or a UI to make objects or elements bounce realistically. There are a few different ways to do this. In this video, we'll use a loop to add bounces.
========== Timetable =================
0:00 - Intro 1:06 - Hardcoded Bounce Desmos 5:22 - Hardcoded Bounce Shadertoy 7:06 - Visualize Graph 10:20 - Building the Loop 18:49 - Geometric Series 20:40 - Attenuation 21:55 - Normalizing Length 23:58 - Fixing Floating Point Error 25:21 - Outro
Easing functions: youtu.be/pydKWTSGMEM ShaderToy for complete beginners: youtu.be/u5HAYVHsasc The most useful function (smoothstep): youtu.be/60VoL-F-jIQUseful functions for Game Designers: Easing FunctionsThe Art of Code2022-04-01 | If you ever want to do anything related to software and animation, you should really know about easing (or tweening) functions. These simple functions allow you to add a lot of pizzazz to your project and are essential building blocks for any developer. In this video we'll go over the most common ones.
========== Timetable ==========
0:00 - Intro 1:46 - Setup 7:50 - Linear 9:22 - Ease In 11:06 - Ease Out 12:50 - Smooth 15:29 - Overshoot 23:30 - Outro
ShaderToy for complete beginners: youtu.be/u5HAYVHsasc Writing a ray marcher: youtu.be/PGtv-dBi2wELive Coding an Alien Orb - God Rays & TranslucencyThe Art of Code2022-03-16 | A while ago I made a little doodle while playing with Gyroids and I decided to polish it up to make a nice effect and then make a tutorial about it. This is the last video in the series, in this video we go over the volumetric god rays and sub surface scattering.
========== Timetable ==========
0:00 - Intro 0:44 - Light Color 2:15 - Fake Starburst 6:50 - Ray-Plane Intersection 10:22 - God Rays 17:06 - Translucency 25:10 - Vignette 26:14 - Outro
ShaderToy for complete beginners: youtu.be/u5HAYVHsasc Writing a ray marcher: youtu.be/PGtv-dBi2wE Smooth minimums: youtube.com/watch?v=YJ4iyff7zbk Playing with Gyroids: youtu.be/-adHIyjIYgkLive Coding an Alien Orb - Glitters & Blinding LightThe Art of Code2022-03-06 | A while ago I made a little doodle while playing with Gyroids and I decided to polish it up to make a nice effect and then make a tutorial about it. In the second part of this series we'll go over the glitters in the sand and we'll put a blinding light inside of the sphere.
ShaderToy for complete beginners: youtu.be/u5HAYVHsasc Writing a ray marcher: youtu.be/PGtv-dBi2wE Smooth minimums: youtube.com/watch?v=YJ4iyff7zbk Polar coordinates: youtu.be/r1UOB8NVE8ILive Coding and Alien Orb - Modeling & ShadowsThe Art of Code2022-02-23 | A while ago I made a little doodle while playing with Gyroids and I decided to polish it up to make a nice effect and then make a tutorial about it. In the first part of this series we'll go over the modeling and shadowing of this object.
========== Timetable ==========
0:00 - Intro 0:37 - Basic Scene Setup 3:30 - Gyroid 8:13 - Shell 12:34 - Camera Fix 13:52 - Light 16:25 - Shadows 23:49 - Light Falloff 24:25 - Wavy Ground 27:20 - Rolling the Ball 29:42 - Outro
ShaderToy for complete beginners: youtu.be/u5HAYVHsasc Writing a ray marcher: youtu.be/PGtv-dBi2wE Smooth minimums: youtube.com/watch?v=YJ4iyff7zbkUseful functions for game designers - Cosine InterpolationThe Art of Code2022-01-26 | While working on a previous video about Lagrange interpolation, I figured that it would be an interesting exercise to go over some other kinds of interpolation. In this video we go over piecewise linear, and cosine interpolations.
Or using Hermite interpolation (smoothstep): youtube.com/watch?v=60VoL-F-jIQUseful functions for game designers - Lagrange InterpolationThe Art of Code2022-01-12 | In science, technology and engineering it is very common to have to interpolate between data points. One of the many ways to do this is through Lagrange interpolation. In this video I'll go through how it works and if you go to desmos.com you can follow right along.
Or using Hermite interpolation (smoothstep): youtube.com/watch?v=60VoL-F-jIQCoding the Game of Life - Part IIThe Art of Code2021-12-13 | This is a continuation of the first video in this series. In this video we make the effect more pleasing to the eye.
Part 1of this video: youtu.be/xh61Ol2X4GACoding the Game of LifeThe Art of Code2021-12-03 | This is the first of two videos about Conways Game of Life. In this video we'll go through the basic concept, some crazy examples of what people have made, and then we code life from scratch!
How to build a computer in game of life: youtube.com/watch?v=Kk2MH9O4pXYLive Coding: Making the American flag with math!The Art of Code2021-07-04 | For the fourth of July I decided to make an American flag. This shader is made from scratch, no prior knowledge is necessary.
ShaderToy for complete beginners: youtu.be/u5HAYVHsasc Smoothstep Explained: youtu.be/60VoL-F-jIQLive Coding: Bending Light - Part 2The Art of Code2021-06-11 | In this video we'll build on the beginning we made last time and will make a gem stone and add special effects like chromatic aberration and out scattering.
ShaderToy for complete beginners: youtu.be/u5HAYVHsasc Writing a ray marcher: youtu.be/PGtv-dBi2wELive Coding:Bending LightThe Art of Code2021-06-04 | In this video we'll look at refraction: the bending of light as it moves from one medium to another.
Setting up Materials - shadertoy.com/view/NdSGDG Making it reflective - youtu.be/beNDx5Cvt7MNewtons Cradle: Setting up MaterialsThe Art of Code2021-04-29 | This is part 2 of the Newton's Cradle tutorial. In this video we'll set up a basic material system.
Starting point: shadertoy.com/view/Ndl3WS End of part 2: shadertoy.com/view/NdSGDGNewtons Cradle: Modeling & AnimationThe Art of Code2021-04-15 | Over the next three videos we'll build a little Newton's Cradle. In this video we'll start with the modeling and animation.
Starting point: shadertoy.com/view/WtGXDD The end-result of part 1 is here: shadertoy.com/view/Ndl3WSShader Showcase: HODLThe Art of Code2021-02-26 | I have many unfinished shader snippets lying around. One of those was a bitcoin shader I started in 2017. I finally managed to finish it. Be sure to check out the live version on ShaderToy if you are not on mobile.
Live version: Not the exact same code as in the video, but close enough ;) shadertoy.com/view/lscGRlShader Showcase: MegaparsecsThe Art of Code2021-01-02 | My attempt at a spiral galaxy. Made from a bunch of ellipses.
I got the idea when I read about new theories concerning spiral galaxy formation. The standard idea of the spiral arms just orbiting around the center doesn't work because it would 'wind up' the spiral with every rotation. This would very quickly (on cosmological scales) lead the spirals to would wind up to the point where they'd dissapear. This is not what we observe so a different theory is needed. One such theory, called desnity wave theory, is that we are actually looking at lots of overlapping and rotated elliptical orbits, which I tried to emulate here.
Playing around with this made me realize that a galaxy is just a big vortex of dust, where every dust particle is a star! I threw in some super big & bright stars to make for a more interesting image. There is also the occasional supernova thrown in. Though in reality super novae happen in our galaxy about once every 50 years and since one orbit takes about 250 million years it should have about 150,000 super nova flashes per second if we look at it at this time-scale!
Music: Yearning by Michael fk - ArtlistHow to texture a procedural objectThe Art of Code2020-12-29 | As requested by Patrons, in this video I'll go over some techniques to add a texture to raymarched objects. I'll explain, among other things, tri-planar mapping and displacement mapping.
Music: NiceWave by Captain Qubz - ArtListThe Matrix explained!The Art of Code2020-11-12 | Matrices are used all the time in computer graphics. In this video I'll explain the basics of matrices used for coordinate transformations.
Click here if you want to learn shader coding with ShaderToy from scratch: youtu.be/u5HAYVHsasc
Click here for the smiley tutorial: youtu.be/ZlNnrpM0TRgTorus Knots explained!The Art of Code2020-08-15 | In this video we'll look at how to construct a torus, or trefoil knot. Torus knots are not too hard to understand and they look very cool and can serve as the basis of many cool effects.
To learn how to write your own ray marcher, see this video: youtube.com/watch?v=PGtv-dBi2wEShader Coding: Feathers in the Wind - Part 2The Art of Code2020-07-04 | This is part 2 of the Feathers in the Wind shader coding tutorial. In this part we will stick the feathers onto ray traced spheres to get them flowing around in 3d.
Music: Hammer & Felt by Beneath the MountainShader Coding: Feathers in the WindThe Art of Code2020-06-26 | Patrons decided, through the future topic poll, that the next video be wind-themed so in this video we'll be making procedural feathers blowing in the wind!
For a more indepth derivation of this function, check out 'Interpolation for Dummies': youtu.be/NO5JGFJJ_Kk
To see what you can do by drawing ONE line after you have folded space, check out this video on the Koch fractals: youtu.be/il_Qg9AqQkEShader Showcase: Danger NoodleThe Art of Code2020-03-20 | One of my first shaders was a snake-scale effect and ever since then I've been wanting to go all National Geographic and make a full blown snake shader.
There isn't much in this shader that I haven't already covered in tutorial videos. This uses: Ray Marching, Voronoi, Gyroids and tiled effects.
Live version: shadertoy.com/view/wlKSRcPlaying with Gyroids - Part 1The Art of Code2020-03-04 | In this video we'll build something cool with Gyroids. A Gyroid is a minimal surface: a surface that minimizes its area for a given boundary. Minimal surfaces appear in nature as well, soap bubbles for minimal surfaces for example. The cool thing about Gyroids is that their distance function is very simple. In this video we'll explore that function and start building the 'Up in Flames' effect you can see here: youtube.com/watch?v=TTz3aiRpk4s
Star fields were some of the first effect I ever coded, back in the late 80's. I decided to revisit this effect and make a 2020 shader version of it. In this video we'll be making this effect in ShaderToy, from scratch!
ShaderToy for absolute beginners: youtube.com/watch?v=u5HAYVHsascShader Coding: Making a starfield - Part 1The Art of Code2020-01-27 | Star fields were some of the first effect I ever coded, back in the late 80's. I decided to revisit this effect and make a 2020 shader version of it. In this video we'll be making this effect in SHaderToy, from scratch!
ShaderToy for absolute beginners: youtube.com/watch?v=u5HAYVHsascWriting a ray marcher in UnityThe Art of Code2019-12-18 | In this video we'll code a ray marcher inside of a shader in Unity that allows you to render 3d objects on the surface of other 3d objects, like a hologram!
Sphere, Torus and other distance function are explained here: youtube.com/watch?v=Ff0jJyyiVywThe Art of Code Live StreamThe Art of Code2019-12-11 | ...Shader Showcase: Wait.. what? CyberTruck!The Art of Code2019-11-28 | As soon as the Tesla CyberTuck was unveiled I knew I had to render it procedurally inside of a shader. Maybe I'll do a run-through on how this was done. ;)
Basic operators (translate, rotate, scale): youtu.be/AfKGMUDWfuEShader Coding: KIFS Fractals explained!The Art of Code2019-10-02 | In this video I'll explain how to make a Koch Snowflake fractal. The Koch snowflake is an example of a kaleidoscopic iterated function system (KIFS) fractal.
Music: Verve - Assaf AyalonShader Coding: Truchet Tiling Explained!The Art of Code2019-09-05 | In this video I'll explain how to use the Truchet effect to make cool looking vines. We'll code a shader in ShaderToy from scratch!
I did an effect a little while ago that shows rain dripping down a window. I figured it could be good to use in a game perhaps but since it was made in ShaderToy, and ShaderToy is not used for game development, I figured I would do a better version of the original effect, in Unity! So, if you are making a game or any kind of interactive program in Unity, you can now add a nice 'Rainy Grey Sunday' effect to it ;)
In this video we'll code a rain-on-window shader from scratch in Unity. This is part 1, in which we'll make the drops.
Music: Buddha by Kontekst soundcloud.com/kontekstmusic Creative Commons — Attribution 3.0 Unported— CC BY 3.0 http://creativecommons.org/licenses/b... Music promoted by Audio Library youtu.be/b6jK2t3lcRs