如何在两个不同的 sketches/canvases 之间共享调用 P5.js 函数的方法？

Question

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

在下面的示例中有两个草图，每个草图都使用 P5.js.

的实例模式加载到不同的 canvas 元素中

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

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

谢谢

// 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 对象需要作为函数的参数:

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

如何在两个不同的 sketches/canvases 之间共享调用 P5.js 函数的方法？

How can I share methods that call P5.js functions between two different sketches/canvases?

javascript

processing

p5.js