SuperHi FM

Up to 50% off if you buy two or more of our courses! Discount automatically applied
Up to 50% off if you buy two or more of our courses! Discount automatically applied
Up to 50% off if you buy two or more of our courses! Discount automatically applied
Up to 50% off if you buy two or more of our courses! Discount automatically applied
Up to 50% off if you buy two or more of our courses! Discount automatically applied
Up to 50% off if you buy two or more of our courses! Discount automatically applied
Up to 50% off if you buy two or more of our courses! Discount automatically applied
Up to 50% off if you buy two or more of our courses! Discount automatically applied
Up to 50% off if you buy two or more of our courses! Discount automatically applied
Up to 50% off if you buy two or more of our courses! Discount automatically applied
CatalogCart AboutSign in

SuperHi

Shaders for the Web

Hi Records
Chapter 06

Hi Records

If SuperHi had a record label, we'd use smooth animated gradients to sell those records! In this project, we'll talk about how make those gradients, how to add multiple palettes using arrays then make the texture react to page scroll to change colors.

Links + downloads

Videos

Lesson 01

Welcome to Hi Records

Lesson 02

Making a circle with step and smoothstep

Lesson 03

Mixing colors using steps

Lesson 04

Animating our gradient

Lesson 05

Adding record ridges

Lesson 06

Variations on outerDist

Lesson 07

Adding grain to our gradient

Lesson 08

Adding color palettes with arrays

Lesson 09

Adding a scroll uniform to pick palettes

Lesson 10

Blending color palettes

Lesson 11

How to pick from an array using WebGL

Lesson 12

Making the shader ready for the web

Lesson 13

Making our website

Lesson 14

Adding Javascript

Lesson 15

Adding scroll and color uniforms

Private notes

A place for you to post notes about anything on this page. Only you can view your notes.

SuperHi FM

Want some ambient music in the background? Play our radio station!

The Art of Posing

Next: Chapter 07

The Art of Posing

Neon Nights

Back: Chapter 05

Neon Nights

Feeling stuck?

Don’t worry, we are here to help you with:

  • Speedy help from one of our team members
  • Detailed, relevant solutions
  • Direct access to peer support through Discord!

Remember, there’s no such thing as a silly question, so don’t hesitate to reach out, we love hearing from you!

EmailDiscord