​

let gif;

let x = 0;

let y = 0;

let directionX = 2;

let directionY = 1;

​

/*In order to uplaod the gif, I wrote:

function preload() {gif = createImage("lunidin.gif", "lunidin.gif");}

which failed to upload the gif. By checking the basic concepts in reference, I finally understood the difference among createImg, createImage and loadImage.*/

​

function preload() {

  gif = createImg("lunidin.gif", "lunidin.gif");

}

​

​

function setup() {

  createCanvas(500, 500);

  background(220);

}

​

function draw() {

  gif.position(x, y);

  x = x + directionX;

  y = y + directionY;

​

  /*  In order to achieve pong style,I wrote:

  if (x > width) {

    directionX = -1;

  }

  if (y > height) {

    directionY = -3;

  }

  if (x < 0) {

    directionX = 1;

  }

  if (y < 0) {

    directionY = 3;

  }

  but the gif still exceeded the frame of the sketch.I solved it by writing down about the sepcific problem and consulted with a peer.*/

  if (x > width-150) {

    directionX = -1;

  }

  if (y > height-150) {

    directionY = -3;

  }

  if (x < 0) {

    directionX = 1;

  }

  if (y < 0) {

    directionY = 3;

  }

}

​