Create a gameloop with an update function in P5.js.

The example you see here is an animated gif and does not do the animation justice. I recommend trying the code on your machine to see how smooth the animation is.

Update and render

A game engine like Unity has two major functions in game objects:

1. Update
2. Render

The update function is called for you by the framework with the argument dateTime. DateTime is the time that has past since drawing the last frame. This magic value will help you to calculate exactly where you game objects are supposed to be.

P5 has no update function

In the P5 examples, position updating happens in the draw-function. In the example below, I create an update function and call it from draw. In the update function, I update the angle (which is used to calculate my game object positions) and use deltaTime:

let angle = 0;
function update() {
angle += deltaTime * .008;
}

function draw() {
update();
background("#000");
}

You can also update the game object positions in the draw function of course. I created an update function to mimic other game engines and to create a clear separation for updating and rendering.

Try the code

You can find the code on github.