ShaderBattle

2D toolkit · lesson 7 of 8 · Intermediate · about 5 min

Cosine palettes

You will build: Make a rainbow that scrolls: t = uv.x + time × 0.2.

Start this lesson All lessons
The picture produced by the shader in the lesson "Cosine palettes"
The target picture. In the lesson you write the shader that draws it, and a match bar shows how close you are.

Picking pretty colors by hand is hard. A trick from Inigo Quilez (the shader-art wizard behind Shadertoy): feed a number through cos with a different phase per channel — you get a smooth cycling rainbow.

float t = uv.x + time * 0.2;
float3 col = 0.5 + 0.5 * cos(6.28318 * (t + float3(0.0, 0.33, 0.67)));

Reading it: 6.28318 is 2π (one full cycle per unit of t). The three offsets shift red, green and blue by a third of a cycle each. 0.5 + 0.5 * cos squeezes −1..1 into 0..1. Notice t + float3(...) adds a scalar to a vector — each channel gets its own value.

The numbers you need

Everything the picture depends on is given, so the challenge is the code, not guessing.

Phases
float3(0.0, 0.33, 0.67)
Scroll speed
0.2

Try it in your own language

The lesson is written once and shown in every language. Pick yours: Unity (Built-in), Unity (URP), Unreal, Shadertoy / WebGL, OpenGL (LWJGL, raylib), three.js, GameMaker, LÖVE (Lua), Godot, Apple (iOS, macOS), WebGPU / Bevy.

Start coding

Go deeper

Concept explainers with a live example: cosine palette.

Part of the learning paths: From Shadertoy to Unity, Noise and procedural textures, Shader art basics.

More in 2D toolkit