Reactive Example

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 }}
    />
  );
};