Fala galera, tudo bem?
Criei meu código dessa maneira, tentando juntar tudo o que foi aprendido na unidade 3.
Acredito que seria dessa forma a junção dos 3 conteúdos.
<canvas width="600" height="400"></canvas>
<script>
var tela = document.querySelector("canvas");
var pincel = tela.getContext("2d");
pincel.fillStyle = "lightgray";
pincel.fillRect(0, 0, 600, 400);
var cores = ["red", "orange", "yellow", "green", "blue", "black"];
var indiceCorAtual = 0;
var x = 20;
var raio = 10;
var sentido = 1;
var aumento = 1;
function desenhaCirculo(x, y, raio, cores) {
pincel.fillStyle = cores[indiceCorAtual];
pincel.beginPath();
pincel.arc(x, y, raio, 0, 2 * Math.PI);
pincel.fill();
}
function limpaTela() {
pincel.clearRect(0, 0, 600, 400);
}
function atualizaTela() {
limpaTela();
if( x > 600) {
sentido = -1;
} else if (x < 0) {
sentido = 1;
}
desenhaCirculo(x, 20, raio, cores);
x = x + sentido;
}
function cresceu(){
if(raio > 30) {
aumento = -1;
}else if ( raio < 20){
aumento = 1;
}
raio = raio + aumento;
}
function mudaCor() {
indiceCorAtual++;
if(indiceCorAtual >= cores.length) {
indiceCorAtual = 0;
}
}
setInterval(atualizaTela, 1);
setInterval(cresceu,100);
setInterval(mudaCor,300);
</script>