Javascript 画布左侧绿色椭圆和右侧红色

Question

我想在左侧制作绿色省略号，在右侧制作红色省略号。我使用随机函数来填充画布。我使用 if 语句来达到我的目的。也许开关大小写更适合这项任务？ 这种语法只生成粉红点，有什么问题？

var spotPos = {
x:300,
y:200
}
var spotCol = {
r:0,
g:0,
b:0
}
function setup() {
createCanvas(600,400);
background(0);
}
function draw() {
spotPos.x = random(0,width);
spotPos.y = random(0,height);
//spotCol.r = random(60,255);
noStroke()
fill(spotCol.r, spotCol.g, spotCol.b)
ellipse(spotPos.x, spotPos.y, 25, 25);
if(spotPos.x < 300) {
spotCol.b = 255;
} else if(spotPos.x > 300) {
spotCol.r = 255;
}
}

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

Answer 1

有一些事情阻止你达到你想要的结果。

首先绘制椭圆，然后选择一种颜色。这意味着在draw循环的下一轮中，椭圆将被绘制到其他地方，但颜色仍将基于之前的位置。

第二个问题是RGB值的分配：

if(spotPos.x < 300) {
spotCol.b = 255;
} else if(spotPos.x > 300) {
spotCol.r = 255;
}

您只为蓝色和红色分配了值 255，并且从未更改过它。因此，经过几次迭代后，您fill(255, 0, 255)例如全红色，没有绿色，全蓝色，这导致了您看到的粉红色。

draw可以想象成一组一遍又一遍重复的指令。您需要考虑指令的顺序以及结束/启动循环每次迭代的状态。如果更改某些全局变量，它们将在下次运行时draw如何影响程序？

我在下面提供了一个工作示例，但请随意尝试您自己的想法和解决方案。

const spotPos = {
x: 300,
y: 200
}
const spotCol = {
r: 0,
g: 0,
b: 0
}
function setup() {
createCanvas(600, 400);
background(0);
}
function draw() {
spotPos.x = random(0, width);
spotPos.y = random(0, height);
if (spotPos.x < 300) {
spotCol.r = 0;
spotCol.g = 255;
} else if (spotPos.x > 300) {
spotCol.r = 255;
spotCol.g = 0;
}

noStroke();
fill(spotCol.r, spotCol.g, spotCol.b)
ellipse(spotPos.x, spotPos.y, 25, 25);
}

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

Answer 2

如果在上色之前先绘制圆圈，它不会检测到新颜色。