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

您只给 blue 和 red 分配了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

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

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

2 个答案: