Implementing gravity in React.js

Question

Im trying to implement a gravity effect on cookie images. The idea was that they have an initial acceleration and velocity while they are being pulled by the gravitational force at the same time. I used setInterval to update the cookies every 1/60th second to achieve 60 FPS (Is this the common approach? Since in most games FPS is fluctuating i assume that it needs to be done differently, but i don't know how). Here is my code:

import './App.css'; import cookie from '../src/images/cookie.png'; import { Vector } from './Physics'; import { useEffect, useState } from 'react'; const GRAVITY = 1; function App() { const initCookieProps = () => { let cookiesProps = []; for(let i = 0; i < 1; i++){ let cookieProps = {}; cookieProps['pos'] = new Vector(0,0); cookieProps['acceleration'] = new Vector(0, GRAVITY); cookieProps['velocity'] = new Vector(10, 0); cookiesProps.push(cookieProps); } return cookiesProps; } const [cookiesProps, setCookiesProps] = useState(() => { const initialState = initCookieProps(); return initialState; }) const updateCookies = (delta) => { setCookiesProps(cookiesProps.map(cookieProps => { cookieProps['velocity'] = cookieProps['velocity'].add(cookieProps['acceleration'].multiply(delta)); cookieProps['pos'] = cookieProps['pos'].add(cookieProps['velocity'].multiply(delta)); return cookieProps; })); } useEffect(() => { setInterval(() => { updateCookies(1/60); }, 1000/60); }, []) return ( <div className="content"> {cookiesProps.map( props => <img className="cookie" style={{left: props['pos'].x, top: props['pos'].y}} src={cookie} alt="cookie"/>)} </div> ); } export default App;

I wasted a lot of hours trying to implement the correct Physics. I'm not sure if it is correct the way i am doing it right now. With the specified code i managed to increase the velocity in the y-direction by 1, and the position in x direction by 10 every second. So i think its right? Would appreciate any help. Would this also work if the cookies are not only accelerated horizontally?

Physics.js looks like this:

export function Vector(x,y){ this.x = x; this.y = y; } Vector.prototype.normalize = function() { const abs = Math.sqrt(this.x*this.x+this.y*this.y); return new Vector(this.x/abs, this.y/abs); } Vector.prototype.add = function(other) { return new Vector(this.x+other.x,this.y+other.y); } Vector.prototype.multiply = function(scalar){ return new Vector(this.x*scalar,this.y*scalar); } Vector.prototype.subtract = function (other){ return new Vector(this.x-other.x,this.y-other.y); }

Hope someone can help me, can approve that it is done right, or maybe give me tips how to do it better!

You should not use setInterval for animations. Use requestAnimationFrame and cancelAnimationFrame for this purpose developer.mozilla.org/en-US/docs/Web/API/window/… — Limbo
– Limbo, Commented Apr 30, 2023 at 15:50

Robin Richtsfeld · Accepted Answer · 2021-12-05 14:21:31Z

As JavaScript is single-threaded and uses an event loop, timer delay is not guaranteed. Instead you should use a delta timing approach:

class DeltaTimer { constructor(func, delay) { this.func = func; this.delay = delay; } start() { this.lastTime = Date.now(); this.timeout = setTimeout(this.loop.bind(this), this.delay); } stop() { if (this.timeout) { clearTimeout(this.timeout); } } loop() { const now = Date.now(); const delta = now - lastTime; this.func(delta); this.lastTime = now; this.timeout = setTimeout(this.loop.bind(this), this.delay); } }

Collectives™ on Stack Overflow

Implementing gravity in React.js

1 Answer 1

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Related