Question

我刚刚在 p5 中启动了一个新项目，我已经使用了它直接导入浏览器中的功能，但是这次，由于它是一个更复杂的项目，因此我将在webpack。

我导入了该库并以这种方式引导它：

import * as p5 from 'p5';

function setup() {
  createCanvas(640, 480);
}

function draw() {
  if (mouseIsPressed) {
    fill(0);
  } else {
    fill(255);
  }
  ellipse(mouseX, mouseY, 80, 80);
}

但这不起作用。

原因很简单：webpack将模块包装在本地范围内，而 p5 却不知道。

由于这个原因，我将功能分配给了全局范围：

import * as p5 from 'p5';

window.setup = function () {
  createCanvas(640, 480);
}

window.draw = function () {
  if (mouseIsPressed) {
    fill(0);
  } else {
    fill(255);
  }
  ellipse(mouseX, mouseY, 80, 80);
}

它工作正常，但仍然看起来不对。我认为在2019年使用JS来处理全局范围不是正确的方法。特别是如果我使用的是webpack，并且即将实现TypeScript。

那么，如何告诉 p5 在模块作用域而不是全局作用域中查找功能？

Answer 1

您将使用instance mode，它不依赖于全局变量。这是该页面上的示例：

var sketch = function( p ) {

  var x = 100; 
  var y = 100;

  p.setup = function() {
    p.createCanvas(700, 410);
  };

  p.draw = function() {
    p.background(0);
    p.fill(255);
    p.rect(x,y,50,50);
  };
};

var myp5 = new p5(sketch);

实时示例：

var sketch = function( p ) {

  var x = 100; 
  var y = 100;

  p.setup = function() {
    p.createCanvas(700, 410);
  };

  p.draw = function() {
    p.background(0);
    p.fill(255);
    p.rect(x,y,50,50);
  };
};

var myp5 = new p5(sketch);

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.3/p5.min.js"></script>

避免在p5中使用全局范围

1 个答案: