在连续函数中引用全局变量 (p5.js)

Question

我已经好几年没有编写任何代码了，现在我需要重新学习 p5.js。作为练习，我试图制作一个简单的绘图程序——我希望我的程序默认以黑色绘制，并在我单击屏幕一角的红色矩形时将颜色切换为红色。我有以下非常草率的代码（我知道鼠标按下不完全与红色矩形对齐，'drawing' 机制不是最好的，等等。我只是在乱搞它 atm）

function setup() {
 createCanvas(600, 600);
 fill ('red'); 
   rect(570,20,5,5);
  //creates red rectangle at top right corner of screen

}
var color = 0;
function mousePressed(){
 if ( mouseX > 570) {
    if( mouseY > 20){
     color = 4;
     ellipse (10,20,50,50);
    }
    
   }
}
function draw() {
 
  stroke(color);
  if (mouseIsPressed) {
   ellipse(mouseX, mouseY, 1, 1)
   //creates colored dot when mouse is pressed
  } 
}

function keyTyped(){
 if (key === 'c'){
  clear();
 }
}

如果我不使用 'color' 变量而只是将描边设置为 0，我可以很好地绘制黑色。 mousePressed 函数似乎起作用了——当我按下矩形时，它会绘制出我放入其中进行测试的椭圆。但是，我似乎无法在我的绘图函数中引用 var 'color' - 这可能是一个愚蠢的问题，但我承认被难住了！我做错了什么？

Answer 1

命名变量时必须小心。具体来说，您不应该将它们命名为与现有函数相同的名称！

来自the Processing.js help articles：

One of the powerful features of JavaScript is its dynamic, typeless nature. Where typed languages like Java, and therefore Processing, can reuse names without fear of ambiguity (e.g., method overloading), Processing.js cannot. Without getting into the inner-workings of JavaScript, the best advice for Processing developers is to not use function/class/etc. names from Processing as variable names. For example, a variable named line might seem reasonable, but it will cause issues with the similarly named line() function built-into Processing and Processing.js.

Processing.js是JavaScript，所以函数可以存储在变量中。例如，color变量就是color()函数！因此，当您创建自己的 color 变量时，您将覆盖它，因此您将失去调用 color() 函数的能力。

最简单的解决方法是将 color 变量的名称更改为 myColor.

之类的名称

在连续函数中引用全局变量 (p5.js)

referencing global variables in a continuous function (p5.js)

global-variables

p5.js