p5.js: 可以改变颜色的绘图工具

Question

我想用 p5.js 编写绘图工具。

这是我目前的方法：

function setup() {
  let c = createCanvas(window.innerWidth, window.innerHeight);
  stroke(155, 204, 250);
  strokeWeight(20);
  c.parent('canvas');
}

function mouseMoved() {
  line(mouseX, mouseY, pmouseX, pmouseY);
  return false;
}

* {
  margin: 0;
  padding: 0;
  cursor: crosshair;
}

#canvas {
  width: 100%;
  height: 100%;
  background-color: rgb(240, 200, 200);
}

<script src="https://cdn.jsdelivr.net/npm/p5@1.4.0/lib/p5.js"></script>

<div id="canvas"></div>

现在，我想添加以下功能：

如果页面重新加载，应使用随机的笔颜色，从一行准备好的颜色值。
如果mousePressed()，准备的行的另一个颜色值颜色值应该继续绘制。

我是从这个开始的：

function setup() {
  let c = createCanvas(window.innerWidth, window.innerHeight);
  c.parent('canvas');
  let colors = ['155, 204, 250', '205, 104, 200', '205, 104, 200'];
  let color = random(colors);
}

function mouseMoved() {
  stroke(color);
  strokeWeight(20);
  line(mouseX, mouseY, pmouseX, pmouseY);
  return false;
}

我的方法好像根本不管用。请问有人可以帮我吗？我将不胜感激！

Answer 1

您的代码有两个问题：

您的 color 变量的范围是 setup() 函数，因此从 draw() 函数访问它是无效的。您需要在顶层声明此变量才能在两者中访问它。
p5.js color() 函数不适用于包含逗号分隔的 RGB 值的字符串。如果您想使用字符串，您需要使用颜色名称或十六进制代码。但是，如果您想使用数字 RGB 值，您可以使用数组和扩展运算符（见下文）。

let colors;
let color;

function setup() {
  let c = createCanvas(windowWidth, windowHeight);
  colors = [[155, 204, 250], [205, 104, 200], [255, 0, 0], [0, 255, 0], [0, 0, 255]];
  color = random(colors);
}

function mouseClicked() {
  color = random(colors);
}

function mouseMoved() {
  stroke(...color);
  strokeWeight(20);
  line(mouseX, mouseY, pmouseX, pmouseY);
  return false;
}

<script src="https://cdn.jsdelivr.net/npm/p5@1.4.0/lib/p5.js"></script>

p5.js: 可以改变颜色的绘图工具

p5.js: Drawing tool with the possibility to change the colors

javascript

p5.js