let y = 10;

​

let speed = 8;

​

let sx = -speed;

let sy = speed;

let size = 10;

​

let click;

​

let h = 0;

​

let started = false;

function setup() {

  cnv=createCanvas(400, 400);

  // print(img.width,img.height);

  // let newCanvasX = (windowWidth- 800)/2;

  // let newCanvasY = (windowHeight- 800)/2;

  // cnv.position(newCanvasX,newCanvasY)

​

  click = loadSound("https://cdn.pixabay.com/download/audio/2022/03/15/audio_3bfec40705.mp3?filename=metronome-85688.mp3");

}

​

function draw() {

  if (started) {

  colorMode(HSB)

  // background(220);

  fill(h, 100, 100);

  noStroke();

  h += 1;

  h = h % 255;

  x += sx;

  y += sy;

  circle(x, y, size);

  if (x + size/2 >= width) {

    sx = -speed;

    hit();

  } else if ( x - size/2 <= 0) {

    sx = speed;

    hit()

  }

  if (y + size/2 >= height) {

    sy = -speed;

    hit();

  } else if (y - size/2 <= 0) {

    sy = speed;

    hit();

  }

  }

}

​

function hit() {

    size += .1;

    speed += .1;

  if (speed < 400)

    click.play();

}

​

function keyPressed() {

  started = true;

}