0

I have the code from the library p5.js, the rendering takes place in function setup(). How can I specify that this code is not rendered in the canvas that p5 creates, but in my div block.

<body>
<div class"box"></div>
</body>

let ball = {
  x: 100,
  y: 100,
  xspeed: 1,
  yspeed: 1
}

function setup() {
  createCanvas(1000, 400);
}

function draw() {
  background(0);
  display()
  move()
  bounce()
}

function display() {
  fill(random(255, 255), 0, 0);
  ellipse(ball.x, ball.y, 30, 30);
}

function move() {
  ball.x = ball.x + ball.xspeed
  ball.y = ball.y + ball.yspeed
}

function bounce() {
  if (ball.x > width || ball.x < 0) {
    ball.xspeed = ball.xspeed * -1
  }
  if (ball.y > height || ball.y < 0) {
    ball.yspeed = ball.yspeed * -1
  }
}
Alex
  • 31
  • 3

0 Answers0