ARTICLE AD BOX
P5js is used for rendering, but this can be replicated in any language and graphics library (not an engine).
Moving an object without a fixed time step and interpolation is crisp, but with a fixed time step and interpolation, it's blurry. Removing interpolation also makes it jerky for obvious reasons.
Sandbox: editor.p5js.org, paste the example on the left and run it with the button or ctrl + enter
const step = 1 / 60; // Physics step
let acc = 0; // Accumulator
let pos1; // Upper rectangle
let lastPos1; // Last position of the upper rectangle
let pos2; // Lower rectangle
// The function is called once (init)
function setup() {
createCanvas(windowWidth, windowHeight); // Create the canvas
frameRate(144); // Set the number of frames per second
// Initialize the rectangle positions
pos1 = createVector(0, height / 2 - 100);
pos2 = createVector(0, height / 2);
}
// The function is called every frame
function draw() {
background(220); // Fill the background
acc += deltaTime / 1000; // Increase the accumulator
lastPos1 = pos1; // Store the last position of the top rectangle
while (acc >= step) {
// While the accumulator is greater than the physics step
pos1.x += 100 * step; // Move the top rectangle to the right
acc -= step; // Decrease the accumulator
}
pos2.x += 100 * (deltaTime / 1000); // Move the bottom rectangle to the right
const alpha = acc / step; // Interpolation coefficient
// Position interpolation
const interpPos = p5.Vector.lerp(lastPos1, pos1, alpha);
// Top rectangle (moves: physics)
rect(interpPos.x, interpPos.y, 200, 50);
// Bottom rectangle (moves: render)
rect(pos2.x, pos2.y, 200, 50);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.11.0/p5.js"></script>
