// if windows users have problems: https://developer.mozilla.org/en-US/docs/Learn/Common_questions/set_up_a_local_testing_server

​

// the variables for the text coordinates

let x;

let y;

​

// how fast should the text move

let xSpeed = 2;

let ySpeed = 2;

​

// margin so that the text doesn't hide behind the borders

let r = 5;

​

​

let catSound;

let catImage;

​

// preload is called before anything else in the sketch

function preload() {

  catSound = loadSound('cat.wav');

  catImage = loadImage('cat.jpg');

}

​

​

// setup is called once when the sketch starts

function setup() {

  createCanvas(400, 500);

  x = r;

  y = r;

}

​

// the draw function is called multiple times per second and updates itself, which is why all the animation is done here

function draw() {

  background(255, 251, 0);

​

  // check if catSound is still playing and show the image

  if (catSound.isPlaying()) image(catImage, width/2-100, height/2-150, 200, 300);

  text("Hello World", x, y);

  // change the coordinate of x and y for the next frame

  x += xSpeed;

  y += ySpeed;

  // check if the text is at the borders then play he sound and change the direction

  if(x > (width - r) || x < r) {

    xSpeed = -xSpeed; 

    catSound.play();

  }

  if(y > (height - r) || y < r) {

    ySpeed = -ySpeed;

    catSound.play();

  }

}