Cycle de Couleurs
Ce tutoriel explorera quelques variations sur l’exemple de cycle de couleurs de “Découvrir le Canvas”. Il comprend des instructions sur l’animation et quelques contrôles utilisateur de base.
Cycle de Couleurs de Base
Section intitulée « Cycle de Couleurs de Base »Cet effet consiste en un rectangle qui remplit tout le canvas et change de couleur au fil du temps. L’utilisateur peut modifier la vitesse du changement de couleur.
<head> <title>Generic</title> <meta description="Template"/> <meta publisher="WhirlwindFX" /> <!-- 1. Create numeric slider to edit the animation speed --> <meta property="speed" label="Cycle Speed" type="number" min="1" max="10" default="2"></head>
<body style="margin: 0; padding: 0;"> <!-- 2. Create the canvas element inside of the body tag --> <canvas id="exCanvas" width="320" height="200"></canvas></body>
<script> // 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() { // 6. Set fillstyle, hue is variable over time ctx.fillStyle = 'hsl('+ hue + ', 100%, 50%)'; // 7. Use the fillRect method to create the path and draw in the same command ctx.fillRect(0, 0, width , height); // 8. Iterate the hue by the speed set by the user. Small adjustment made for better user slider. hue+=(speed / 4); // 9. Limit hue to the 0-360 range for use with hsl if (hue > 360) { hue = hue % 360; } // 10. Re-call the update function at the end of every update window.requestAnimationFrame(update); }
// 11. Initial update call window.requestAnimationFrame(update);</script>
Le résultat est coloré mais basique. Nous pouvons faire plus avec le canvas !
Cycle de Couleurs Dégradé
Section intitulée « Cycle de Couleurs Dégradé »Ici, j’ai remplacé la couleur unique par un dégradé qui évolue au fil du temps. L’utilisateur peut modifier la vitesse du changement de couleur, ainsi que la distance de chaque point de dégradé par rapport aux autres.
<head> <title>Generic</title> <meta description="Template"/> <meta publisher="WhirlwindFX" /> <meta property="speed" label="Cycle Speed" type="number" min="1" max="10" default="2"> <!-- 1. Create numeric slider to edit the color width of the gradient --> <meta property="distance" label="Color Distance" type="number" min="1" max="160" default="50"></head>
<body style="margin: 0; padding: 0;"> <canvas id="exCanvas" width="320" height="200"></canvas></body>
<script>
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. hue1+=(speed / 4); hue2 = hue1 + distance; hue3 = hue2 + distance; // 4. Limit each individual hue to the 0-360 range if (hue1 > 360) { hue1 = hue1 % 360; } if (hue2 > 360) { hue2 = hue2 % 360; } if (hue3 > 360) { hue3 = hue3 % 360; }
// 5. Create a linear gradient. Mine starts at (0, 0) and is translated directly horizontally by the width. Changing the last 0 to an integer would add a vertical component to the gradient. var grd = ctx.createLinearGradient(0, 0, width, 0); //6. Set gradient color stops with the hues. I have one at far left, one middle, and one far right. grd.addColorStop(0, `hsl(${hue1}, 100%, 50%)`); grd.addColorStop(.5, `hsl(${hue2}, 100%, 50%)`); grd.addColorStop(1, `hsl(${hue3}, 100%, 50%)`);
// 7. Set fillstyle and draw rectangle ctx.fillStyle = grd; ctx.fillRect(0, 0, width , height);
window.requestAnimationFrame(update); }
window.requestAnimationFrame(update);
</script>
Cycle de Couleurs Pixelisé
Section intitulée « Cycle de Couleurs Pixelisé »Celui-ci est devenu un peu compliqué, alors soyez patient avec les calculs. Notre dernier cycle de couleurs est un défilement de couleurs pixelisé en forme de serpent.
<head> <title>Generic</title> <meta description="Template"/> <meta publisher="WhirlwindFX" /> <meta property="speed" label="Cycle Speed" type="number" min="1" max="10" default="2"> <meta property="distance" label="Color Distance" type="number" min="1" max="10" default="2"> <!-- 1. Create numeric slider to edit the pixel density of the cycle --> <meta property="density" label="Pixel Density" type="number" min="0" max="2" default="1"></head>
<body style="margin: 0; padding: 0;"> <canvas id="exCanvas" width="320" height="200"></canvas></body>
<script>
var c = document.getElementById("exCanvas"); var ctx = c.getContext("2d");
var width = 320; var height = 200; var hue = 0;
function update() {
// 2. Draw a white background to overwrite previous frames ctx.fillStyle = "white" ctx.fillRect(0, 0, width, height)
hue += (speed/4); if(hue > 360) { hue = hue % 360; }
// 3. Calculate the square size from user input. Based on our 320x200 screen ratio, my 4 possible values are 5px, 10px, 20px, and 40px squares. You can calculate size with the equation 10 * 2 ^ density. var size = 10 * Math.pow(2, density); // 4. Calculate the total number of squares by dividing the screen pixel area (320 * 200) by the square pixel area. var goal = 64000 / (size * size);
// 5. While loop will run until we hit the specified number of squares var i = 0; while(i < goal){ // 6. Calculate row and column multiplyer, same as grid example in HTML5+JS var iRow = Math.floor(i / (width / size)); var iCol = i % (width / size); // 7. Calculate (x ,y) for each square based on row and column multiplyer var ix = iCol * size; var iy = iRow * size; // 8. Calculate the variable color of each square based on user input. Make sure to include the index in your calculation so each square is different from the next. var iHue = hue + (i * distance); if(iHue > 360){ iHue = iHue % 360; }
// 9. If the iRow calculation is odd, flip the horizontal draw direction. if(iRow % 2 != 0){ ix = (width - size) - iCol * size; }
ctx.beginPath(); ctx.rect(ix, iy, size, size);
ctx.fillStyle = `hsl(${iHue}, 100%, 50%)`; ctx.fill(); i++; }
window.requestAnimationFrame(update); }
window.requestAnimationFrame(update);
</script>
J’espère que vous avez apprécié le travail sur les cycles de couleurs ! Pour un tutoriel impliquant un comportement basé sur des classes et quelques notions de physique, consultez la page Classe Ball.