Coloquei a bolinha para pulsar em lugares aleatórios da tela, contudo acho que o código acabou ficando muito longo pra um propósito tão simples. Existe outra maneira de chegar nesse resultado?
<canvas width="600" height="400"></canvas>
<script>
var tela = document.querySelector('canvas');
var pincel = tela.getContext('2d');
var x = 1;
var y = 1;
function numeroAleatorioX(){
x = Math.round(Math.random() * 1000);
while (x >= 580){
x = Math.round(Math.random() * 1000);
}
return x;
}
function numeroAleatorioY(){
y = Math.round(Math.random() * 1000);
while (y >= 380){
y = Math.round(Math.random() * 1000);
}
return y;
}
function desenhaCirculo(x, y, raio, cor) {
pincel.fillStyle = cor;
pincel.beginPath();
pincel.arc(x, y, raio, 0, 2 * Math.PI);
pincel.fill();
}
function limpaTela() {
pincel.clearRect(0, 0, 600, 400);
}
var raio = 20;
var limite = 1;
var pulso = 1;
numeroAleatorioX();
numeroAleatorioY();
function pulsaBola (){
if (pulso >= 60){
numeroAleatorioX();
numeroAleatorioY();
pulso = 1;
}
limpaTela();
if( raio > 40) {
limite = -1;
} else if (raio < 20) {
limite = 1;
}
desenhaCirculo(x, y, raio, "red")
raio = raio + limite;
pulso = pulso + 1
console.log ("x = " + x + " e y = " + y);
}
setInterval (pulsaBola, 20);
</script>