How to avoid motion blur using physics?

6 days ago 9
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>
Read Entire Article