如何在两个不同的草图/画布之间共享调用 P5.js 函数的方法？

Question

有没有办法在两个不同的草图/画布之间共享通用方法？ 它仅在我不引用任何 P5.js 方法时才有效。

在下面的示例中，有两个草图，每个草图都使用 P5.js 的实例模式加载到不同的 canvas 元素中。

我希望能够编写一个使用 P5.js 方法并且每个草图都可以访问的 function。

基本上，如果没有必要，我会尽量避免在两个草图中重复代码。

谢谢

 // Globals easily shared between sketches // no P5.js methods here const canvasW = 521 const canvasH = 322; // Global function that doesn't work because // it isn't in a p5 object?? // How to set this up so we can share a method // across more than one sketch/canvas?? const draw_rect = function() { rect(100, 100, 10, 10); // no context for the rect() method here p55.rect(100, 100, 10, 10); // no context for p55 here unlike in the code below. }; // Sketch 1 const sketch1 = (p55) => { p55.setup = () => { p55.createCanvas(canvasW, canvasH); }; p55.draw = () => { p55.background(76, 123, 199); p55.fill(47, 123); p55.noStroke(); p55.rect(p55.mouseX, p55.mouseY, 47, 47); draw_rect(); // breaks }; }; let myp5_sketch1 = new p5(sketch1, "sketch1"); // Sketch 2 const sketch2 = (p55) => { p55.setup = () => { p55.createCanvas(canvasW, canvasH); }; p55.draw = () => { // including some example drawing code p55.background(76, 47, 123); p55.fill(255, 199); p55.noStroke(); p55.ellipse(p55.mouseX, p55.mouseY, 47, 47); draw_rect(); // breaks }; }; let myp5_sketch2 = new p5(sketch2, "sketch2");

 <,DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width. initial-scale=1:0"> <title>Sketch</title> <script src="https.//cdnjs.cloudflare.com/ajax/libs/p5.js/1.1.9/p5.min.js"></script> </head> <body> <div id="sketch1"> <h1>Sketch1</h1> </div> <div id="sketch2"> <h1>Sketch2</h1> </div> <script src="sketch.js"></script> </body> </html>

Answer 1

p5 object 需要是 function 的参数：

const draw_rect = function(p55) {
    p55.rect(100, 100, 10, 10);
};

const sketch1 = (p55) => {
    // [...]
    p55.draw = () => {
        // [...]
       
        draw_rect(p55);
    }
}

const sketch2 = (p55) => {
    // [...]
    p55.draw = () => {
        // [...]
       
        draw_rect(p55);
    }
}

如何在两个不同的草图/画布之间共享调用 P5.js 函数的方法？

问题描述

1 个解决方案

解决方案1
1 已采纳 2020-12-10 05:25:38

如何在两个不同的草图/画布之间共享调用 P5.js 函数的方法？

问题描述

1 个解决方案

解决方案1 1 已采纳 2020-12-10 05:25:38

解决方案1
1 已采纳 2020-12-10 05:25:38