little boxes bouncing in the present box

let vecLocation = [];

let vecVelocity = [];

const NUM = 30;

​

​

function setup() {

  createCanvas(800, 800);

  frameRate(100);

  for(let i = 0; i<NUM ; i++){

    vecLocation[i]=createVector(width/2, height/2);

    vecVelocity[i]=createVector(random(-3,3), random(-3,3))

  }

}

​

function draw() {

  background(250);

  noStroke();

  fill(random(255,239), random(250), random(250),218);

  for(let i = 0; i<NUM; i++){

  rect(vecLocation[i].x, vecLocation[i].y, 20, 20);

  vecLocation[i].add(vecVelocity[i]);

  if (vecLocation[i].x > 580 || vecLocation[i].x < 200){

    vecVelocity[i].x = vecVelocity[i].x * -1;

    }   if (vecLocation[i].y > 580 || vecLocation[i].y < 200){

    vecVelocity[i].y = vecVelocity[i].y * -1;

    }

}

  strokeWeight(5)

  strokeJoin(ROUND)

  stroke(255,0,0);

  fill(255,99,71,100);

  rect(200,200,400,400);

  line(200,300,600,300);

  line(200,400,600,400);

  line(200,500,600,500);

  line(300,200,300,600);

  line(400,200,400,600);

  line(500,200,500,600);

  fill(255,99,71);

  triangle(180,80,180,300,400,200);

  triangle(620,80,620,300,400,200);

  triangle(150,350,180,380,400,200);

  triangle(650,350,620,380,400,200);

}