const Example = () => {
const bounce = 0.9;
const gravity = 0.5;
const radius = 20;
const { width, height } = useCanvasContext();
const state = useReactive({
velX: 20,
velY: 10,
x: width * 0.5,
y: height * 0.5,
});
useLoop(() => {
state.velY += gravity;
state.y += state.velY;
state.x += state.velX;
if (state.x - radius < 0) {
state.x = radius;
state.velX *= -bounce;
}
if (state.x + radius > width) {
state.x = width - radius;
state.velX *= -bounce;
}
if (state.y + radius > height) {
state.y = height - radius;
state.velY *= -bounce;
}
});
return (
<Circle
x={state.x}
y={state.y}
radius={radius}
style={{ fill: 'white', strokeWidth: 2 }}
/>
);
};