Live Coding: Cairo Tiling Explained! The Art of Code 2023-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 - Intro2:33 - Explanation4:34 - ShaderToy5:36 - Coding Starting Pos6:38 - Square Pattern14:33 - Angle Range15:48 - Repeat Pattern20:32 - Distance23:55 - ID27:49 - Hash Function29:00 - ID31:20 - Function32:15 - Blinking Effect33:43 - Outro========== Social Media Links ========== Twitter: @The_ArtOfCodeFacebook: facebook.com/groups/theartofcodePatreon: patreon.com/TheArtOfCodeShaderToy: shadertoy.com/user/BigWIngsPayPal Donation: paypal.me/theartofcodeFX Hash (NFTs): https://www.fxhash.xyz/u/The%20Art%20of%20CodeGitHub: github.com/BigWings2020/ArtOfCode========== Other videos to watch ========== ShaderToy for complete beginners: youtu.be/u5HAYVHsascWriting a ray marcher: youtu.be/PGtv-dBi2wE
Coding a Bezier curve from scratch! The Art of Code 2022-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 - Intro0:32 - Setup10:04 - Bezier Interpolation16:56 - Drawing the Curve24:40 - Outro========== Social Media Links ========== Twitter: @The_ArtOfCodeFacebook: facebook.com/groups/theartofcodePatreon: patreon.com/TheArtOfCodeShaderToy: shadertoy.com/user/BigWIngsPayPal Donation: paypal.me/theartofcodeFX Hash (NFTs): https://www.fxhash.xyz/u/The%20Art%20of%20Code========== If you want to follow along ========== Just go to ShaderToy.com and make a new shader!========== Other videos to watch ========== ShaderToy for complete beginners: youtu.be/u5HAYVHsascOther interesting topics related to this:Tweening Functions: youtube.com/watch?v=pydKWTSGMEMLagrange Interpolation: youtu.be/4S6G-zenbFM
Live Coding: 3d Truchet Weave The Art of Code 2022-12-09 | In this video we'll make the Truchet weave effect from the last video, in 3d!========== Timetable ========== 0:00 - Intro0:34 - Create Grid6:50 - Truchet15:15 - Weave20:45 - Minkowski Fence27:30 - Background33:00 - Outro========== Social Media Links ========== Twitter: @The_ArtOfCodeFacebook: facebook.com/groups/theartofcodePatreon: patreon.com/TheArtOfCodeShaderToy: shadertoy.com/user/BigWIngsPayPal Donation: paypal.me/theartofcodeFX Hash (NFTs): https://www.fxhash.xyz/u/The%20Art%20of%20Code========== If you want to follow along ========== Starting point: shadertoy.com/view/WtGXDD========== Other videos to watch ========== ShaderToy for complete beginners: youtu.be/u5HAYVHsascWriting a ray marcher: youtu.be/PGtv-dBi2wETorus SDF Explained: youtu.be/Ff0jJyyiVyw?t=490Booleans Explained: youtu.be/AfKGMUDWfuE?t=763
Coding a crazy weave pattern The Art of Code 2022-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 - Intro00:40 - Setup01:48 - Truchet Function17:58 - Colors19:27 - Multiple Layers20:40 - Making a Weave25:37 - Better Blending29:42 - Chebychev Length33:10 - Changing Curves34:01 - Changing Thickness36:33 - Adding a Pattern42:14 - Outro========== Social Media Links ========== Twitter: @The_ArtOfCodeFacebook: facebook.com/groups/theartofcodePatreon: patreon.com/TheArtOfCodeShaderToy: shadertoy.com/user/BigWIngsPayPal Donation: paypal.me/theartofcodeFX Hash (NFTs): https://www.fxhash.xyz/u/The%20Art%20of%20Code========== If you want to follow along ========== Start point:Just go to ShaderToy.com and make a new shader.End point: shadertoy.com/view/NtdyWN========== Other videos to watch ========== ShaderToy for complete beginners: youtu.be/u5HAYVHsascTruchet Tiling, explained!: youtube.com/watch?v=2R7h76GoIJM
Live Coding: Koch Fractal Magic The Art of Code 2022-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 - Intro0:56 - Start1:52 - Drawing using Koch coordinates12:14 - Drawing in 3d19:36 - Lighting20:45 - Shaping the fractal23:05 - Background26:20 - Outer layer30:17 - Fade background31:30 - More tweaking33:00 - Domain repetition35:13 - Outro========== Social Media Links ========== Twitter: @The_ArtOfCodeFacebook: facebook.com/groups/theartofcodePatreon: patreon.com/TheArtOfCodeShaderToy: shadertoy.com/user/BigWIngsPayPal Donation: paypal.me/theartofcodeFX Hash (NFTs): https://www.fxhash.xyz/u/The%20Art%20of%20Code========== NFT of this video =================https://www.fxhash.xyz/generative/15827========== If you want to follow along ========== Starting point: shadertoy.com/view/sdtcR2End Point:shadertoy.com/view/sddfDN========== Other videos to watch ========== 2D Koch Fractal explained!: youtu.be/il_Qg9AqQkE3D Koch Fractals Part 1: youtu.be/__dSLc7-CpoShaderToy for complete beginners: youtu.be/u5HAYVHsascWriting a ray marcher: youtu.be/PGtv-dBi2wEBooleans Explained: youtu.be/AfKGMUDWfuE
Shader Showcase: Code Couture The Art of Code 2022-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.If you want to learn more about this project then check out the Code Couture website at: https://codecouture.studio/or follow us on Instagram:instagram.com/codecouture.studio/?igshid=YmMyMTA2M2Y========== Live Version ========== Takes 20 seconds to compile. Needs a beefy PC.shadertoy.com/view/ssdfWM========== Music ===============Mystic State - Society (featuring Astrid)soundcloud.com/mysticstate/mystic-state-society-feat-astrid========== Social Media Links ========== Twitter: @The_ArtOfCodeFacebook: facebook.com/groups/theartofcodePatreon: patreon.com/TheArtOfCodeShaderToy: shadertoy.com/user/BigWIngsPayPal Donation: paypal.me/theartofcodeFX Hash (NFTs): https://www.fxhash.xyz/u/The%20Art%20of%20Code
How to turn your 2d fractal into 3d! The Art of Code 2022-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 - Intro0:40 - Setup5:57 - 2d Koch Distance10:48 - Implementation in 3d14:40 - Straight Intersection17:43 - Material18:50 - Revolution24:10 - Blend with Sphere28:25 - Outro========== Social Media Links ========== Twitter: @The_ArtOfCodeFacebook: facebook.com/groups/theartofcodePatreon: patreon.com/TheArtOfCodeShaderToy: shadertoy.com/user/BigWIngsPayPal Donation: paypal.me/theartofcodeFX Hash (NFTs): https://www.fxhash.xyz/u/The%20Art%20of%20Code========== NFT of this video =================https://www.fxhash.xyz/generative/13884========== If you want to follow along ========== Starting point: shadertoy.com/view/WtGXDDKoch Snowflake:shadertoy.com/view/tdcGDjEnd Result:shadertoy.com/view/sdtcR2========== Other videos to watch ========== ShaderToy for complete beginners: youtu.be/u5HAYVHsascWriting a ray marcher: youtu.be/PGtv-dBi2wERaymarching operators (Booleans etc): youtu.be/AfKGMUDWfuEDistance functions for 3d primitives (torus, cylinder etc): youtu.be/Ff0jJyyiVywCreating a Koch snowflake: youtu.be/il_Qg9AqQkE
Bouncing Balls, Round Two: Logarithms?! The Art of Code 2022-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 - Intro1:37 - Problems with Loops3:01 - Intro to Logarithms6:30 - Visualizing in ShaderToy8:30 - Drawing Parabola10:50 - Changing the Base13:00 - Attenuate Bounces16:15 - Undoing Deformation21:45 - Start at the Top24:50 - Bonus Time27:02 - Outro========== Social Media Links ========== Twitter: @The_ArtOfCodeFacebook: facebook.com/groups/theartofcodePatreon: patreon.com/TheArtOfCodeShaderToy: shadertoy.com/user/BigWIngsPayPal Donation: paypal.me/theartofcodeFX Hash (NFTs): https://www.fxhash.xyz/u/The%20Art%20of%20Code========== If you want to follow along ========== Start point (if you want to follow along): shadertoy.com/view/NlXyzSEnd point:shadertoy.com/view/7lByDz========== Other videos to watch ========== Let's get Bouncy! (loop version): ShaderToy for complete beginners: youtu.be/u5HAYVHsascWriting a ray marcher: youtu.be/PGtv-dBi2wE
How to Create Cool Bounce Effects Using a Loop The Art of Code 2022-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 - Intro1:06 - Hardcoded Bounce Desmos5:22 - Hardcoded Bounce Shadertoy7:06 - Visualize Graph10:20 - Building the Loop18:49 - Geometric Series20:40 - Attenuation21:55 - Normalizing Length23:58 - Fixing Floating Point Error25:21 - Outro========== Social Media Links ========== Twitter: @The_ArtOfCodeFacebook: facebook.com/groups/theartofcodePatreon: patreon.com/TheArtOfCodeShaderToy: shadertoy.com/user/BigWIngsPayPal Donation: paypal.me/theartofcodeFX Hash (NFTs): https://www.fxhash.xyz/u/The%20Art%20of%20Code========== If you want to follow along ========== Starting point: shadertoy.com/view/7tfyW8End point:shadertoy.com/view/NlXyzS========== Other videos to watch ========== Easing functions: youtu.be/pydKWTSGMEMShaderToy for complete beginners: youtu.be/u5HAYVHsascThe most useful function (smoothstep): youtu.be/60VoL-F-jIQ
Useful functions for Game Designers: Easing Functions The Art of Code 2022-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 - Intro1:46 - Setup7:50 - Linear9:22 - Ease In11:06 - Ease Out 12:50 - Smooth15:29 - Overshoot23:30 - Outro========== Social Media Links ========== Twitter: @The_ArtOfCodeFacebook: facebook.com/groups/theartofcodePatreon: patreon.com/TheArtOfCodeShaderToy: shadertoy.com/user/BigWIngsPayPal Donation: paypal.me/theartofcodeFX Hash (NFTs): https://www.fxhash.xyz/u/The%20Art%20of%20Code========== If you want to follow along ========== shadertoy.com========== Other videos to watch ========== ShaderToy for complete beginners: youtu.be/u5HAYVHsascWriting a ray marcher: youtu.be/PGtv-dBi2wE
Live Coding an Alien Orb - God Rays & Translucency The Art of Code 2022-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 - Intro0:44 - Light Color2:15 - Fake Starburst6:50 - Ray-Plane Intersection10:22 - God Rays17:06 - Translucency25:10 - Vignette26:14 - Outro========== Social Media Links ========== Twitter: @The_ArtOfCodeFacebook: facebook.com/groups/theartofcodePatreon: patreon.com/TheArtOfCodeShaderToy: shadertoy.com/user/BigWIngsPayPal Donation: paypal.me/theartofcodeFXHash Generative NFTs: https://www.fxhash.xyz/u/The%20Art%20of%20Code========== If you want to follow along ========== Part 1 Starting point: shadertoy.com/view/WtGXDDPart 2 starting point:shadertoy.com/view/7sSfDRStarting point of this video:shadertoy.com/view/7dXBzsThe finished effect:shadertoy.com/view/tlcXWX========== Other videos to watch ========== Part 1 of this tutorial: youtu.be/b0AayhCO7s8Part 2 of this tutorial: youtu.be/ESUy11kc3y8ShaderToy for complete beginners: youtu.be/u5HAYVHsascWriting a ray marcher: youtu.be/PGtv-dBi2wESmooth minimums: youtube.com/watch?v=YJ4iyff7zbkPlaying with Gyroids: youtu.be/-adHIyjIYgk
Live Coding an Alien Orb - Glitters & Blinding Light The Art of Code 2022-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.========== Timetable ========== 0:00 - Intro0:32 - Glitter Texture12:00 - Glitter on Ground19:30 - Light23:20 - Glow26:30 - Outro========== Social Media Links ========== Twitter: @The_ArtOfCodeFacebook: facebook.com/groups/theartofcodePatreon: patreon.com/TheArtOfCodeShaderToy: shadertoy.com/user/BigWIngsPayPal Donation: paypal.me/theartofcodeFXHash Generative NFTs: https://www.fxhash.xyz/u/The%20Art%20of%20Code========== If you want to follow along ========== Starting point: shadertoy.com/view/7sSfDRThe finished effect:shadertoy.com/view/tlcXWX========== Other videos to watch ========== Part 1 of this tutorial: youtu.be/b0AayhCO7s8ShaderToy for complete beginners: youtu.be/u5HAYVHsascWriting a ray marcher: youtu.be/PGtv-dBi2wESmooth minimums: youtube.com/watch?v=YJ4iyff7zbkPolar coordinates: youtu.be/r1UOB8NVE8I
Live Coding and Alien Orb - Modeling & Shadows The Art of Code 2022-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 - Intro0:37 - Basic Scene Setup3:30 - Gyroid8:13 - Shell12:34 - Camera Fix13:52 - Light16:25 - Shadows23:49 - Light Falloff24:25 - Wavy Ground27:20 - Rolling the Ball29:42 - Outro========== Social Media Links ========== Twitter: @The_ArtOfCodeFacebook: facebook.com/groups/theartofcodePatreon: patreon.com/TheArtOfCodeShaderToy: shadertoy.com/user/BigWIngsPayPal Donation: paypal.me/theartofcodeFXHash Generative NFTs: https://www.fxhash.xyz/u/The%20Art%20of%20Code========== If you want to follow along ========== Starting point: shadertoy.com/view/WtGXDDThe finished effect:shadertoy.com/view/tlcXWX========== Other videos to watch ========== ShaderToy for complete beginners: youtu.be/u5HAYVHsascWriting a ray marcher: youtu.be/PGtv-dBi2wESmooth minimums: youtube.com/watch?v=YJ4iyff7zbk
Useful functions for game designers - Cosine Interpolation The Art of Code 2022-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.========== Social Media Links ========== Twitter: @The_ArtOfCodeFacebook: facebook.com/groups/theartofcodePatreon: patreon.com/TheArtOfCodeShaderToy: shadertoy.com/user/BigWIngsPayPal Donation: paypal.me/theartofcode========== If you want to follow along ========== Starting point: desmos.comEnd Point:desmos.com/calculator/cfumbhj3yk========== Other videos to watch ========== Linear interpolation:youtube.com/watch?v=NO5JGFJJ_KkLagrange interpolation:youtube.com/watch?v=4S6G-zenbFMOr using smooth minimums:youtube.com/watch?v=YJ4iyff7zbkOr using Hermite interpolation (smoothstep):youtube.com/watch?v=60VoL-F-jIQ
Useful functions for game designers - Lagrange Interpolation The Art of Code 2022-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.========== Social Media Links ========== Twitter: @The_ArtOfCodeFacebook: facebook.com/groups/theartofcodePatreon: patreon.com/TheArtOfCodeShaderToy: shadertoy.com/user/BigWIngsPayPal Donation: paypal.me/theartofcode========== If you want to follow along ========== Starting point: desmos.comEnd Point:desmos.com/calculator/zsnqrj1xu3========== Other videos to watch ========== Check out my video about linear interpolation:youtube.com/watch?v=NO5JGFJJ_KkOr using smooth minimums:youtube.com/watch?v=YJ4iyff7zbkOr using Hermite interpolation (smoothstep):youtube.com/watch?v=60VoL-F-jIQ
Coding the Game of Life - Part II The Art of Code 2021-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.Be sure to check out part 1 here:youtu.be/xh61Ol2X4GA========== Social Media Links ========== Twitter: @The_ArtOfCodeFacebook: facebook.com/groups/theartofcodePatreon: patreon.com/TheArtOfCodeShaderToy: shadertoy.com/user/BigWIngsPayPal Donation: paypal.me/theartofcode========== Other videos to watch ========== ShaderToy for complete beginners: youtu.be/u5HAYVHsascPart 1of this video: youtu.be/xh61Ol2X4GA
Coding the Game of Life The Art of Code 2021-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!========== Social Media Links ========== Twitter: @The_ArtOfCodeFacebook: facebook.com/groups/theartofcodePatreon: patreon.com/TheArtOfCodeShaderToy: shadertoy.com/user/BigWIngsPayPal Donation: paypal.me/theartofcode========== Other videos to watch ========== ShaderToy for complete beginners: youtu.be/u5HAYVHsascHow to build a computer in game of life: youtube.com/watch?v=Kk2MH9O4pXY
Live Coding: Making the American flag with math! The Art of Code 2021-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.========== Social Media Links ========== Twitter: @The_ArtOfCodeFacebook: facebook.com/groups/theartofcodePatreon: patreon.com/TheArtOfCodeShaderToy: shadertoy.com/user/BigWIngsPayPal Donation: paypal.me/theartofcode========== If you want to follow along ========== Live Version: shadertoy.com/view/flsXRM========== Other videos to watch ========== ShaderToy for complete beginners: youtu.be/u5HAYVHsascSmoothstep Explained: youtu.be/60VoL-F-jIQ
Live Coding: Bending Light - Part 2 The Art of Code 2021-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.========== Social Media Links ========== Twitter: @The_ArtOfCodeFacebook: facebook.com/groups/theartofcodePatreon: patreon.com/TheArtOfCodeShaderToy: shadertoy.com/user/BigWIngsPayPal Donation: paypal.me/theartofcode========== If you want to follow along ========== Starting point of this video: shadertoy.com/view/sls3WNEnd Result: shadertoy.com/view/sllGDN========== Other videos to watch ========== Part 1 of this tutorial: youtu.be/NCpaaLkmXI8ShaderToy for complete beginners: youtu.be/u5HAYVHsascWriting a ray marcher: youtu.be/PGtv-dBi2wE
Live Coding:Bending Light The Art of Code 2021-06-04 | In this video we'll look at refraction: the bending of light as it moves from one medium to another.========== Social Media Links ========== Twitter: @The_ArtOfCodeFacebook: facebook.com/groups/theartofcodePatreon: patreon.com/TheArtOfCodeShaderToy: shadertoy.com/user/BigWIngsPayPal Donation: paypal.me/theartofcode========== If you want to follow along ========== Starting point: shadertoy.com/view/WtGXDDEnd point of this video:shadertoy.com/view/sls3WN========== Other videos to watch ========== ShaderToy for complete beginners: youtu.be/u5HAYVHsascWriting a ray marcher: youtu.be/PGtv-dBi2wE
Raymarched Reflections The Art of Code 2021-05-13 | In this video we'll go over how to do proper raymarched reflections.Twitter: @The_ArtOfCodeFacebook: facebook.com/groups/theartofcodePatreon: patreon.com/TheArtOfCodeShaderToy: shadertoy.com/user/BigWIngsPayPal Donation: paypal.me/theartofcodeIf you want to follow along building the Newtons Cradle, here are the live versions:Starting point: shadertoy.com/view/WtGXDDModeling&Animating - shadertoy.com/view/Ndl3WSSetting up Materials - shadertoy.com/view/NdSGDGMaking it reflective - youtu.be/beNDx5Cvt7M
Newtons Cradle: Setting up Materials The Art of Code 2021-04-29 | This is part 2 of the Newton's Cradle tutorial. In this video we'll set up a basic material system.========== Social Media Links ========== Twitter: @The_ArtOfCodeFacebook: facebook.com/groups/theartofcodePatreon: patreon.com/TheArtOfCodeShaderToy: shadertoy.com/user/BigWIngsPayPal Donation: paypal.me/theartofcode========== Other videos to watch ========== Newton's Cradle part 1: youtu.be/nd7Auhb9YN8ShaderToy for complete beginners: youtu.be/u5HAYVHsascWriting a ray marcher: youtu.be/PGtv-dBi2wE========== If you want to follow along ========== Starting point: shadertoy.com/view/Ndl3WSEnd of part 2:shadertoy.com/view/NdSGDG
Newtons Cradle: Modeling & Animation The Art of Code 2021-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.========== Social Media Links ========== Twitter: @The_ArtOfCodeFacebook: facebook.com/groups/theartofcodePatreon: patreon.com/TheArtOfCodeShaderToy: shadertoy.com/user/BigWIngsPayPal Donation: paypal.me/theartofcode========== Other videos to watch ========== Shadertoy for complete beginners: youtu.be/u5HAYVHsascWriting a ray marcher: youtu.be/PGtv-dBi2wETorus & Line segment are explained here: youtu.be/Ff0jJyyiVywUnderstanding Boolean operations: youtu.be/AfKGMUDWfuE========== If you want to follow along ========== Starting point: shadertoy.com/view/WtGXDDThe end-result of part 1 is here:shadertoy.com/view/Ndl3WS
Shader Showcase: HODL The Art of Code 2021-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. Twitter: @The_ArtOfCodeFacebook: facebook.com/groups/theartofcodePatreon: patreon.com/TheArtOfCodeShaderToy: shadertoy.com/user/BigWIngsPayPal Donation: paypal.me/theartofcodeLive version:shadertoy.com/view/WtGBW1Music: Fly Me To The Moon (prod. ibrahim) - Going Spacewardsoundcloud.com/going-spaceward/fly-me-to-the-moon
Coding a fireworks effect The Art of Code 2021-02-03 | In this video we'll make a fireworks effect from scratch!If you are new to ShaderToy then I highly recommend starting at the beginning:youtu.be/u5HAYVHsascIf you want to know how smoothstep works, check this out:youtu.be/60VoL-F-jIQTwitter: @The_ArtOfCodeFacebook: facebook.com/groups/theartofcodePatreon: patreon.com/TheArtOfCodeShaderToy: shadertoy.com/user/BigWIngsPayPal Donation: paypal.me/theartofcodeLive version:Not the exact same code as in the video, but close enough ;)shadertoy.com/view/lscGRl
Shader Showcase: Megaparsecs The Art of Code 2021-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!Twitter: @The_ArtOfCodeFacebook: facebook.com/groups/theartofcodePatreon: patreon.com/TheArtOfCodeShaderToy: shadertoy.com/user/BigWIngsPayPal Donation: paypal.me/theartofcodeLive version:shadertoy.com/view/WsyBDzMusic: Yearning by Michael fk - Artlist
How to texture a procedural object The Art of Code 2020-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.Twitter: @The_ArtOfCodeFacebook: facebook.com/groups/theartofcodePatreon: patreon.com/TheArtOfCodeShaderToy: shadertoy.com/user/BigWIngsPayPal Donation: paypal.me/theartofcode=== YouTube Links ==============================If you've never used ShaderToy, or made shaders, start here:youtu.be/u5HAYVHsascSmoothStep Explained:youtu.be/60VoL-F-jIQRayMarching for Dummies:youtu.be/PGtv-dBi2wEMore displacement mapping for ray marched objects:youtu.be/Vmb7VGBVZJA=== ShaderToy Links ============================Starting point:shadertoy.com/view/WtGXDDLive version:shadertoy.com/view/tscBWnMusic:NiceWave by Captain Qubz - ArtList
The Matrix explained! The Art of Code 2020-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.Twitter: @The_ArtOfCodeFacebook: facebook.com/groups/theartofcodePatreon: patreon.com/TheArtOfCodeShaderToy: shadertoy.com/user/BigWIngsPayPal Donation: paypal.me/theartofcodeClick here if you want to follow along:shadertoy.com/view/3tSfDwClick here if you want to learn shader coding with ShaderToy from scratch:youtu.be/u5HAYVHsascClick here for the smiley tutorial:youtu.be/ZlNnrpM0TRg
Torus Knots explained! The Art of Code 2020-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. Twitter: @The_ArtOfCodeFacebook: facebook.com/groups/theartofcodePatreon: patreon.com/TheArtOfCodeShaderToy: shadertoy.com/user/BigWIngsPayPal Donation: paypal.me/theartofcode Starting point:shadertoy.com/view/WtGXDDLive version:shadertoy.com/view/ttXBzBTo learn how to write your own ray marcher, see this video: youtube.com/watch?v=PGtv-dBi2wE
Shader Coding: Feathers in the Wind - Part 2 The Art of Code 2020-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.Twitter: @The_ArtOfCodeFacebook: facebook.com/groups/theartofcodePatreon: patreon.com/TheArtOfCodeShaderToy: shadertoy.com/user/BigWIngsPayPal Donation: paypal.me/theartofcode Helpful links:Feathers in the Wind - Part 1:youtu.be/68IFmCCy_AMShaderToy for absolute beginners:youtu.be/u5HAYVHsascSimple camera setup:youtu.be/dKA5ZVALOhsRay-sphere intersection:youtu.be/HFPlKQGChpEPolar coordinates:youtu.be/r1UOB8NVE8ISmoothstep explained:youtu.be/60VoL-F-jIQLive version:shadertoy.com/view/tljcRWMusic:Hammer & Felt by Beneath the Mountain
Shader Coding: Feathers in the Wind The Art of Code 2020-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!Live version:shadertoy.com/view/ttlcR2ShaderToy for absolute beginners:youtu.be/u5HAYVHsascSmoothstep explained:youtu.be/60VoL-F-jIQTwitter: @The_ArtOfCodeFacebook: facebook.com/groups/theartofcodePatreon: patreon.com/TheArtOfCodeShaderToy: shadertoy.com/user/BigWIngsPayPal Donation: paypal.me/theartofcode
Smoothstep: The most useful function The Art of Code 2020-04-03 | The smoothstep function is used all the time in shader creation so I made a video about exactly how this function works, and how to derive it yourself.Twitter: @The_ArtOfCodeFacebook: facebook.com/groups/theartofcodePatreon: patreon.com/TheArtOfCodeShaderToy: shadertoy.com/user/BigWIngsPayPal Donation: paypal.me/theartofcode For a more indepth derivation of this function, check out 'Interpolation for Dummies':youtu.be/NO5JGFJJ_KkTo 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_Qg9AqQkE
Shader Showcase: Danger Noodle The Art of Code 2020-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.Twitter: @The_ArtOfCodeFacebook: facebook.com/groups/theartofcodePatreon: patreon.com/TheArtOfCodeShaderToy: shadertoy.com/user/BigWIngsPayPal Donation: paypal.me/theartofcodeLive version of this effect:shadertoy.com/view/wlVSDKOriginal snake scale effect:shadertoy.com/view/4dc3R2Music:Liam Seagrave - Pandemic (Prologue) - Slow Strings Suspensesoundcloud.com/liam-seagrave/pandemic-prologue-slow-strings-suspense-music-original-horror-piano-compositionJungle Sounds:soundcloud.com/extasis_demencial/jungle-sounds
Playing with Gyroids - Part 2 The Art of Code 2020-03-11 | This is part 2 of the Gyroid shader coding tutorial. Be sure to check out part 1: youtube.com/watch?v=-adHIyjIYgkTwitter: @The_ArtOfCodeFacebook: facebook.com/groups/theartofcodePatreon: patreon.com/TheArtOfCodeShaderToy: shadertoy.com/user/BigWIngsPayPal Donation: paypal.me/theartofcodeLive version:shadertoy.com/view/wlKSRc
Playing with Gyroids - Part 1 The Art of Code 2020-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=TTz3aiRpk4sTutorial starting point:shadertoy.com/view/WtGXDDIf you want to write your own raymarcher:youtube.com/watch?v=PGtv-dBi2wEBasic operators, like booleans, explained:youtube.com/watch?v=AfKGMUDWfuETwitter: @The_ArtOfCodeFacebook: facebook.com/groups/theartofcodePatreon: patreon.com/TheArtOfCodeShaderToy: shadertoy.com/user/BigWIngsPayPal Donation: paypal.me/theartofcode
Shader Showcase: Up in flames The Art of Code 2020-02-22 | For an upcoming tutorial video on Gyroids!Twitter: @The_ArtOfCodeFacebook: facebook.com/groups/theartofcodePatreon: patreon.com/TheArtOfCodeShaderToy: shadertoy.com/user/BigWIngsPayPal Donation: paypal.me/theartofcodeLive version:shadertoy.com/view/WtKSRz
Shader Coding: Making a starfield - Part 2 The Art of Code 2020-02-03 | This is part 2 of this tutorial. Be sure to watch part 1 first:youtu.be/rvDo9LvfoVEStar 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!Twitter: @The_ArtOfCodeFacebook: facebook.com/groups/theartofcodePatreon: patreon.com/TheArtOfCodeShaderToy: shadertoy.com/user/BigWIngsPayPal Donation: paypal.me/theartofcodeLive version:shadertoy.com/view/tlyGW3Music:Empyrean - MichaelFKShaderToy for absolute beginners:youtube.com/watch?v=u5HAYVHsasc
Shader Coding: Making a starfield - Part 1 The Art of Code 2020-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!Twitter: @The_ArtOfCodeFacebook: facebook.com/groups/theartofcodePatreon: patreon.com/TheArtOfCodeShaderToy: shadertoy.com/user/BigWIngsPayPal Donation: paypal.me/theartofcodeLive version:shadertoy.com/view/tlyGW3Music:Empyrean - MichaelFKShaderToy for absolute beginners:youtube.com/watch?v=u5HAYVHsasc
Shader Coding: Over the Moon - Part 2 The Art of Code 2020-01-05 | This is the second part of the making of Over the Moon. Be sure to check out part one here:youtu.be/LLZPnh_LK8cTwitter: @The_ArtOfCodeFacebook: facebook.com/groups/theartofcodePatreon: patreon.com/TheArtOfCodeShaderToy: shadertoy.com/user/BigWIngsPayPal Donation: paypal.me/theartofcodeLive version:shadertoy.com/view/4s33zfMusic:Solitude - Michele NoblerShaderToy for absolute beginners:youtube.com/watch?v=u5HAYVHsasc
Shader Coding: Over the Moon - Part 1 The Art of Code 2019-12-29 | In this video we'll be shader coding an old effect of mine in ShaderToy from scratch!Twitter: @The_ArtOfCodeFacebook: facebook.com/groups/theartofcodePatreon: patreon.com/TheArtOfCodeShaderToy: shadertoy.com/user/BigWIngsPayPal Donation: paypal.me/theartofcodeLive version:shadertoy.com/view/4s33zfMusic:Solitude - Michele NoblerShaderToy for absolute beginners:youtube.com/watch?v=u5HAYVHsasc
Writing a ray marcher in Unity The Art of Code 2019-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!Twitter: @The_ArtOfCodeFacebook: facebook.com/groups/theartofcodePatreon: patreon.com/TheArtOfCodeShaderToy: shadertoy.com/user/BigWIngs PayPal Donation: paypal.me/theartofcodeA Unity package with the shader is available for everyone on Patreon. Ray Marching is explained in detail here:youtube.com/watch?v=PGtv-dBi2wESphere, Torus and other distance function are explained here:youtube.com/watch?v=Ff0jJyyiVyw
Shader Showcase: Wait.. what? CyberTruck! The Art of Code 2019-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. ;)Twitter: @The_ArtOfCodeFacebook: facebook.com/groups/theartofcodePatreon: patreon.com/TheArtOfCodeShaderToy: shadertoy.com/user/BigWIngsPayPal Donation: paypal.me/theartofcodeLive version:shadertoy.com/view/wdGXzKMusic:soundcloud.com/weareallsynners/cyberpunk
Shader Coding: Ray Marching Tips & Tricks The Art of Code 2019-10-22 | Twitter: @The_ArtOfCodeFacebook: facebook.com/groups/theartofcodePatreon: patreon.com/TheArtOfCodeShaderToy: shadertoy.com/user/BigWIngsPayPal Donation: paypal.me/theartofcodeShader starting point:shadertoy.com/view/wdGGz3Shadertoy for absolute beginners (if you've never shader coded before):youtu.be/u5HAYVHsascRay Marching for dummies (building a ray marcher from scratch):youtu.be/PGtv-dBi2wESimple shapes explained (sphere, cube, cylinder, torus):youtu.be/Ff0jJyyiVywBasic operators (translate, rotate, scale):youtu.be/AfKGMUDWfuE
Shader Coding: KIFS Fractals explained! The Art of Code 2019-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.Twitter: @The_ArtOfCodeFacebook: facebook.com/groups/theartofcodePatreon: patreon.com/TheArtOfCodeShaderToy: shadertoy.com/user/BigWIngsPayPal Donation: paypal.me/theartofcodeIf you are new to shader coding then check out my absolute beginners tutorial:youtube.com/watch?v=u5HAYVHsascLive version:shadertoy.com/view/tdcGDjTruchet mirror tiling solution:shadertoy.com/view/td33D4Music:Verve - Assaf Ayalon
Shader Coding: Truchet Tiling Explained! The Art of Code 2019-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!Twitter: @The_ArtOfCodeFacebook: facebook.com/groups/theartofcodePatreon: patreon.com/TheArtOfCodeShaderToy: shadertoy.com/user/BigWIngsLive version:shadertoy.com/view/3lBXWKSmoothstep explained:youtu.be/60VoL-F-jIQ
Making a Mandelbrot fractal explorer in Unity - Part 2 The Art of Code 2019-05-31 | Twitter: @The_ArtOfCodeFacebook: facebook.com/groups/theartofcodePatreon: patreon.com/TheArtOfCodePayPal Donation: paypal.me/theartofcodePart 1:youtu.be/kY7liQVPQScSmoothstep explained:youtu.be/60VoL-F-jIQThis is the second of two videos in which we will create a Mandelbrot fractal explorer. In this video we'll add colors and patterns.Patrons, check out the link on Patreon for the source files!The color gradients texture is from Inigo Quilez great article about procedural color gradients:http://www.iquilezles.org/www/articles/palettes/palettes.htmHe also has a ton of other interesting articles, including one on smooth iteration:http://www.iquilezles.org/www/articles/mset_smooth/mset_smooth.htm
ShaderToy FX Coding: Twisted Toroid The Art of Code 2019-04-12 | Twitter: @The_ArtOfCodeFacebook: facebook.com/groups/theartofcodePatreon: patreon.com/TheArtOfCodePayPal Donation: paypal.me/theartofcodeIn this video we'll write a ray marcher from scratch and texture map a cool material onto the inside of a torus.Inspiration for this effect:twitter.com/ReinderNijhoff/status/1088560266273583104Live version:shadertoy.com/view/ts2XDwMusic: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
Making a rainy window in Unity - Part 2 The Art of Code 2019-03-29 | Twitter: @The_ArtOfCodeFacebook: facebook.com/groups/theartofcodePatreon: patreon.com/TheArtOfCodePayPal Donation: paypal.me/theartofcodeIn this video we'll code a rain-on-window shader from scratch in Unity. This is part 2, in which we'll make the fog and transparency.ShaderToy Live Version:shadertoy.com/view/ltffzlMusic: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
Making a rainy window in Unity - Part 1 The Art of Code 2019-03-24 | Twitter: @The_ArtOfCodeFacebook: facebook.com/groups/theartofcodePatreon: patreon.com/TheArtOfCodePayPal Donation: paypal.me/theartofcodeI 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.ShaderToy Live Version:shadertoy.com/view/ltffzlMusic: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
