Color Cycle

This tutorial will explore some variations on the color cycle example from "Meet the Canvas." It includes instructions on animation and some basic user controls.

Basic Color Cycle

This effect consists of a rectangle that fills the entire canvas and changes color over time. The user can edit the speed of the color shift.

<head>

<title>Generic</title>

</head>

</body>

// 3. Get the canvas element from the DOM

var c = document.getElementById("exCanvas");

var ctx = c.getContext("2d");

// 4. Declare script variables

var width = 320;

var height = 200;

var hue = 0;

// 5. Write update function to render each frame

function update() {

The result is colorful but basic. We can do more with the canvas!

Gradient Color Cycle

Here, I've replaced the single color with a gradient that shifts over time. The user can edit the speed of the color shift, as well as the distance of each gradient point from the rest.

<head>

<title>Generic</title>

</head>

</body>

var c = document.getElementById("exCanvas");

var ctx = c.getContext("2d");

var width = 320;

var height = 200;

// 2. Initial hue is set to 0

var hue1 = 0;

function update() {

// 3. Create two more colors for use with the gradient by adding the user's color width.

Pixelated Color Cycle

This one got a little complicated, so bear with me on the math. Our final color cycle is a pixelated, snake-like color crawl.

<head>

<title>Generic</title>

</head>

</body>

var c = document.getElementById("exCanvas");

var ctx = c.getContext("2d");

var width = 320;

var height = 200;

var hue = 0;

function update() {

I hope you had some fun working on color cycles! For a tutorial involving class-based behavior and some minor physics, check out the Ball Class page.

Last updated on

Was this page helpful?