Canvas size does not resize on click

p5.js Coding Questions
1

I have multiple different sketches defined and put them all in an array so I can iterate through them and show them one by one with an on click event. It does work fine except when I change the visual after a window resize, the new sketch uses the initial window size (the size on page load) as its canvas size. Every sketch has windowResized() but it does not fire on sketch initialization because, well, window has not been resized since the sketch has come to life.

I tried to circumvent this problem by calling windowResized() on various stages of sketch’s lifecycle but none did work.

What could the problem be?

Edit: I forgot to mention that windowResized() itself does work but only fires when the current sketch is resized. When I change the sketch with an on click method, it goes back to initial canvas size.

1 Like
2

Can you please post some example code that shows what you’re doing?

(Note that this should not be your full project! Try to isolate the problem into a smaller example, so we can focus on just the problem you’re dealing with.)

1 Like
3

Hello, sure. Here is a simple example you can use to reproduce the bug.

<!DOCTYPE html>
<html lang="en" dir="auto">

<head>
    <title>Test</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.0.0/p5.js"></script>
</head>

<body>
    <div id="stage"></div>
    <script>
        const sketch1 = (p5) => {
            const p = p5;
            let theta = 0;

            p.setup = () => {
                const canvas = p.createCanvas(p.windowWidth, p.windowHeight, p.WEBGL);

                canvas.parent('stage');
                canvas.position(0, 0);
                canvas.elt.style.position = 'fixed';
                canvas.style('z-index', '-1');
            };

            p.draw = () => {
                p.clear();
                p.normalMaterial();

                p.translate(0, 0, 0);
                p.push();
                p.rotateZ(theta);
                p.rotateX(theta);
                p.rotateY(theta);
                p.box(75);
                p.pop();
                theta += 0.003;
            };

            p.windowResized = () => {
                p.resizeCanvas(p.windowWidth, p.windowHeight);
            };
        };

        const sketch2 = (p5) => {
            const p = p5;
            let theta = 0;

            p.setup = () => {
                const canvas = p.createCanvas(p.windowWidth, p.windowHeight, p.WEBGL);
                canvas.parent('stage');
                canvas.position(0, 0);
                canvas.elt.style.position = 'fixed';
                canvas.style('z-index', '-1');
            };

            p.draw = () => {
                p.clear();
                p.normalMaterial();

                p.translate(0, 0, 0);
                p.push();
                p.rotateZ(theta);
                p.rotateX(theta);
                p.rotateY(theta);
                p.torus(75, 35);
                p.pop();
                theta += 0.003;
            };

            p.windowResized = () => {
                p.resizeCanvas(p.windowWidth, p.windowHeight);
            };
        };

        let visual;
        let sketchIndex = 0;
        let initialLoad = true;

        const showSketch = () => {
            const sketches = [sketch1, sketch2];
            const sketch = sketches[sketchIndex];

            if (!initialLoad) {
                visual.remove();
            }

            initialLoad = false;
            visual = new p5(sketch);

            sketchIndex = (sketchIndex + 1) % sketches.length;
        }

        const initialize = () => {
            showSketch();
        };

        window.addEventListener('click', showSketch);
        window.addEventListener('load', showSketch);
    </script>
</body>

</html>
1 Like
4

You could use ...(window.innerWidth, window.innerHeight); instead of ...(p.windowWidth, p.windowHeight);

2 Likes
5

Huh, never thought these two would result in different behaviour. Thank you