SuperHi FM

Search:

Catalog Cart About Sign in

Shaders for the Web

Neon Nights

Chapter 05

Neon Nights

Links + downloads

Chapter resources

Chapter URL

Videos

Lesson 01

Welcome to Neon Nights

Lesson 02

Adding color shift

Lesson 03

Adding a wave distortion pattern

Lesson 04

Sampling colors within bounds

Lesson 05

Sampling with gl_FragCoord

Lesson 06

Rotating our distortion

Lesson 07

Adding grain to our distortion

Lesson 08

Adding a strength uniform

Lesson 09

Creating our website

Lesson 10

Adding and styling a canvas tag

Lesson 11

Replacing images with canvas tags

Lesson 12

Loading our sandbox

Lesson 13

Adding our fragment shader

Lesson 14

Making the shader retina-friendly

Lesson 15

Changing the strength with IntersectionObserver

Lesson 16

Variations on the strength uniform

SuperHi FM

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

Hi Records

Next: Chapter 06

Hi Records

Arabella

Back: Chapter 04

Arabella

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!

© 2024 SuperHi, Inc.

Learn

All courses Code Design Project management SuperHi Editor

Company

About Student work SuperHi for Business NEW Careers Newsletter

Support

Return policy Terms of use Discrimination policy Code of conduct Contact us

Colors are made from 4 parts in shaders but what if we mess around with those separate parts? In this project, we've divide textures into different channels and stitch them back together to get a color split effect, and then we'll make it transition in-and-out on scroll.

Private notes

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

Sign in to save notes