The Art of Code
Creator channel

The Art of Code

15 recent indexed videos · 11,600 subscribers

Latest videos

Fresh from The Art of Code

Showing 12 of 15 kept videos

Guide | 3 years ago

Live Coding: Cairo Tiling Explained!

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

========== Social Media Links ==========

Twitter: @The_ArtOfCode Facebook: https://www.facebook.com/groups/theartofcode/ Patreon: https://www.patreon.com/TheArtOfCode ShaderToy: https://www.shadertoy.com/user/BigWIngs PayPal Donation: https://paypal.me/theartofcode FX Hash (NFTs): https://www.fxhash.xyz/u/The%20Art%20of%20Code GitHub: https://github.com/BigWings2020/ArtOfCode

========== Other videos to watch ==========

ShaderToy for complete beginners: https://youtu.be/u5HAYVHsasc Writing a ray marcher: https://youtu.be/PGtv-dBi2wE

Recent video details

Indexed videos from The Art of Code

Live Coding: Cairo Tiling Explained!

Guide | 3 years ago

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 pa...

Open this video on The Art of Code

Coding a Bezier curve from scratch!

Guide | 3 years ago

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 reall...

Open this video on The Art of Code

Live Coding: 3d Truchet Weave

Guide | 3 years ago

In this video we'll make the Truchet weave effect from the last video, in 3d! ========== Timetable ========== 0:00 - Intro 0:34 - Create Grid 6:50 - Truchet 15:15 - Weave 20:45 - Minkowski Fence 27:30 - Background 33:00 - Outro ========== Social Media Links...

Open this video on The Art of Code

Coding a crazy weave pattern

Guide | 4 years ago

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 res...

Open this video on The Art of Code

Live Coding: Koch Fractal Magic

Guide | 4 years ago

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. I...

Open this video on The Art of Code

Shader Showcase: Code Couture

Stream | 4 years ago

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 gener...

Open this video on The Art of Code

How to turn your 2d fractal into 3d!

Guide | 4 years ago

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 ...

Open this video on The Art of Code

Bouncing Balls, Round Two: Logarithms?!

Guide | 4 years ago

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 infi...

Open this video on The Art of Code

How to Create Cool Bounce Effects Using a Loop

Guide | 4 years ago

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. ========== Timetabl...

Open this video on The Art of Code

Useful functions for Game Designers: Easing Functions

Guide | 4 years ago

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 ...

Open this video on The Art of Code

Live Coding an Alien Orb - God Rays & Translucency

Guide | 4 years ago

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 scatt...

Open this video on The Art of Code

Live Coding an Alien Orb - Glitters & Blinding Light

Guide | 4 years ago

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 insi...

Open this video on The Art of Code