In the function SwirlColor we use a "shortcut", the ternary operation, for something we type out a lot, the if/else statement. Each of the following produce the same result:
1)
if (Math.Random() > 5) {colR += -1;}
test? - operation - var - change depending on result
else {colR += 1;}
test? - var - change depending on result
2) result is - true : false
colR += Math.Random() > 5 ? -1 : 1;
var - change - operation - test? - change depending on operation
This isn't applicable to a lot of situations but is a fun concept to learn. A great place to use it is on a rotating, rectangular device where we want to have a variable to be a fraction of either the height or width, depending on orientation so that the output is the same regardless of orientation.
(ex C_C = widthInt < heightInt ? widthInt / 10 : heightInt / 10; )
New variables in this design:
- colR/colG/colB are holders for the rgb values (ex. rgb(100,0,255) = colR,colG,colB)
- dcMin/Max is the change(d) in color(c) Min and Max between each layer
- SwirlRadius is each individual circle we see, starting with the largest and layering smaller circles on top in the do loop
- SwitchColor is used to determine if we're changing R, G, or B. It changes at the beginning of SwirlColor()
function drawShapes() {
c.translate(w / 2, h / 2);
speed = 500;
swirlRadius = h / 2;
switchColor = 1;
i = 1;
dcMin = 1;
dcMax = 3;
colR = 155;
colG = 155;
colB = 5;
setInterval(function() {
do {
swirlColor();
c.beginPath();
c.fillStyle = "rgb(" + colR + "," + colG + "," + colB + ")";
c.arc(0, 0, swirlRadius, 0, Math.PI * 2, true);
c.fill();
swirlRadius -= Math.floor((Math.random() * 10) + 5);
} while (swirlRadius > 10);
i++;
swirlRadius = h / 2;
}, speed);
}
function swirlColor() {
if (i > 10) {
i = 1;
switchColor = Math.floor((Math.random() * 2) + 1);
}
switch (switchColor) {
case 1:
colR += Math.random() > 0.5 ? dcMin : dcMax;
if (colR > 255) colR = 1;
if (colR < 0) colR = 255;
break;
case 2:
colG += Math.random() > 0.5 ? dcMin : dcMax;
if (colG > 255) colG = 1;
if (colG < 0) colG = 255;
break;
case 3:
colB += Math.random() > 0.5 ? dcMin : dcMax;
if (colB > 255) colB = 1;
if (colB < 0) colB = 255;
break;
}
}
No comments:
Post a Comment