expo / expo-2d-context

A pure-js implementation of the W3C's Canvas-2D Context API that can be run on either Expo Graphics or WebGL
112 stars 7 forks source link

variable not incrementing inside canvas function #31

Closed audrew closed 2 years ago

audrew commented 2 years ago

For some reason, variables are not incrementing inside the canvas function. Here is my code:

export default function App({ navigation }) {

const [counter, setCounter] = useState(330);

      useEffect(() => {
      const timeout = setTimeout(() => {
      setCounter(counter + 1);
      }, 1000);

      return () => {
      clearTimeout(timeout);
      };
  }, [counter]);

console.log('outside ', counter);

    const _onGLContextCreate = (gl) => {
        var ctx = new Expo2DContext(gl);

     //   setInterval(() => {
     //       console.log('set interval doesnt refresh too ', counter);
     //   }, 1000);

console.log('inside ', counter);

    let circle = {
        x: counter, 
        y: 100,
        radius: 30,
        color: 'black'
    }

    let circle2 = {
        x: 400,
        y: 100,
        radius: 30,
        color: 'blue'
    }

        function drawCircle() {
            ctx.beginPath();
            ctx.arc(circle.x, circle.y, circle.radius, 0, Math.PI * 2);
            ctx.fillStyle = circle.color;
            ctx.fill();
            ctx.closePath();
        }

        function drawCircle2() {
            ctx.beginPath();
            ctx.arc(circle2.x, circle2.y, circle2.radius, 0, Math.PI * 2);
            ctx.fillStyle = circle2.color;
            ctx.fill();
        }

        function update() {
            drawCircle();
            drawCircle2();
        }

        function animate() {
        ctx.clearRect(0, 0, ctx.width, ctx.height);
        requestAnimationFrame(animate);

        update();

        ctx.flush();
        }

        animate();

        ctx.stroke();
        ctx.flush();
    };

    return (
    <View
        style={{
            flex: 1,
            justifyContent: 'center',
        }}>
            <GLView style={{ flex: 1 }} onContextCreate={_onGLContextCreate} />
    </View>
    );
}

export { home };

Logs are:

outside  330
inside  330
outside  331
outside  332
outside  333
outside  334
outside  335
outside  336
outside  337

Who can suggest a solution?