// generate sprite

// move sprite within walls

// create edge cases for bouncing

​

let bottomWall, topWall, leftWall, rightWall, ball;

const MAX_SPEED = 8;

const ANGLE_STOP = 54;

​

const params = {

  ballSize: 10,

  maxSpeed: 8

}

​

const pane = new Tweakpane.Pane();

pane.addInput(params, 'ballSize', {min: 1, max: 100,});

pane.on('change', (ev) => {changeSize();});

​

function setup() {

  createCanvas(400, 400);

​

  leftWall = createSprite(5, height / 2, 10, height);

  leftWall.immovable = true;

  rightWall = createSprite(width - 5, height / 2, 10, height);

  rightWall.immovable = true;

  topWall = createSprite(width / 2, 5, width, 10);

  topWall.immovable = true;

  bottomWall = createSprite(width / 2, height - 5, width, 10);

  bottomWall.immovable = true;

​

  ball = createSprite(width/2, height/2, 20, 20);

  ball.maxSpeed = MAX_SPEED;

  ball.setSpeed(MAX_SPEED, random(-1 * ANGLE_STOP, ANGLE_STOP));

}

​

function draw() {

  background(0);

  ball.bounce(topWall);

  ball.bounce(bottomWall);

  ball.bounce(leftWall);

  ball.bounce(rightWall);

​

​

  drawSprites();

}

​

function changeSize(){

  ball.width = params.ballSize;

  ball.height = params.ballSize;

}