0

p5 é uma lib de criação e animação de canvas.

Obtive um erro quando não consegui buscar uma variável de uma função constructor "irmã".

Olhando para a sk.draw() function, o erro ocorre quando esta função está buscando uma variável da função acima: sk.setup, Como faço para puxar a variável b do escopo da sk.setup para o escopo da minha função sk.draw()` ?

segue o código abaixo.

/* eslint-disable */
import * as p5 from 'p5'




let sketch = (p5) => {
    console.log(p5)

    class Boundary {
        constructor(x1, y1, x2, y2) {
            this.a = p5.createVector(x1, y1);
            this.b = p5.createVector(x2, y2);
        }

        show = () => {
            p5.stroke(255);
            p5.line(this.a.x, this.a.y, this.b.x, this.b.y);
        };
    }


    p5.setup = () => {
        // eslint-disable-next-line
        let b
        p5.createCanvas(window.innerWidth, window.innerHeight);
        b = new Boundary(300, 100, 300, 300);
    };


    p5.draw = () => {
        p5.background(0);
        b.show();
    }
}


const P5 = new p5(sketch);

export default P5

1 Resposta 1

1

Basta mover a declaração da variável b de dentro do escopo da função setup() para o escopo da função sketch() tornado b assim visível tanto para setup() e draw().

let sketch = () => {

    class Boundary {
        constructor(x1, y1, x2, y2) {
            this.a = createVector(x1, y1);
            this.b = createVector(x2, y2);
        }

        show = () => {
            //Acrescentei essas linhas para explorar alguns recurso da biblioteca.
            //Não são necessárias ao seu código
            strokeWeight(2.0);
            strokeCap(ROUND);            
            textSize(32);
            fill(165, 10, 10);
            text('PT Stack Overflow',mouseX, mouseY); 
            strokeWeight(1.0);
            //**************************************
            stroke(255);
            line(this.a.x, this.a.y, this.b.x, this.b.y);
        };
    }

    let b; //agora b é visível tanto para setup() e draw() 

    setup = () => {         
        createCanvas(window.innerWidth, window.innerHeight);
        b = new Boundary(300, 100, 300, 300);
    };


    draw = () => {
        background(0);
        b.show();
    }

}

sketch();
<script type="module" src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.9.0/p5.js"></script>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .