javascript - 如何使用 p5js 正确显示颜色？

Question

我是一名新手程序员，正在尝试自学 p5js 和 js。当我偶然发现以下问题时，我正在阅读一个名为“代码的本质”的免费在线网站:

Consider a simulation of paint splatter drawn as a collection of colored dots. Most of the paint clusters around a central location, but some dots do splatter out towards the edges. Can you use a normal distribution of random numbers to generate the locations of the dots? Can you also use a normal distribution of random numbers to generate a color palette?

我设法了解了位置分布部分，但我似乎无法获得调色板的正态分布。这是我尝试做的:

// Practice
// Create a sketch that places random paint splatters with a gaussian
// distribution around the center of the screen
// Uses  Gaussian distribution for color palette
const standard_dev_pos = 60;
const standard_dev_color = 30;
const avg_color_r = 216;
const avg_color_g = 76;
const avg_color_b = 76;
var splatter;

function Splatter() {
  this.x = width/2;
  this.y = height/2;
  this.color = color(0, 0, 0);

  this.set_pos = function() {
    this.x = randomGaussian(width/2, standard_dev_pos);
    this.y = randomGaussian(height/2, standard_dev_pos);
  }
  this.set_color = function() {
    let a = randomGaussian(avg_color_r, standard_dev_color);
    let b = randomGaussian(avg_color_g, standard_dev_color);
    let c = randomGaussian(avg_color_b, standard_dev_color);
    this.color = color(a, b, c);
  }
  this.render = function() {
    stroke(0)
    strokeWeight(5)
    fill(this.color)
    point(this.x, this.y)
  }
}

function setup() {
  createCanvas(720, 360);
  background(155);
  splatter = new Splatter();
}

function draw() {
  splatter.set_pos();
  splatter.set_color();
  splatter.render();
}

<script language="javascript" type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.7/p5.js"></script>
<script src="sketch.js"></script>

但出于某种原因，无论我尝试什么，我都无法让颜色发生变化。我错过了一些明显的东西吗？谢谢!

Answer 1

point() 的颜色由根据 documentations 的笔划决定。

// Practice
// Create a sketch that places random paint splatters with a gaussian
// distribution around the center of the screen
// Uses  Gaussian distribution for color palette
const standard_dev_pos = 60;
const standard_dev_color = 30;
const avg_color_r = 216;
const avg_color_g = 76;
const avg_color_b = 76;
var splatter;

function Splatter() {
  this.x = width/2;
  this.y = height/2;
  this.color = color(0, 0, 0);

  this.set_pos = function() {
    this.x = randomGaussian(width/2, standard_dev_pos);
    this.y = randomGaussian(height/2, standard_dev_pos);
  }
  this.set_color = function() {
    let a = randomGaussian(avg_color_r, standard_dev_color);
    let b = randomGaussian(avg_color_g, standard_dev_color);
    let c = randomGaussian(avg_color_b, standard_dev_color);
    this.color = color(a, b, c);
  }

  this.render = function() {
    stroke(red(this.color), green(this.color), blue(this.color))
    strokeWeight(5)
    point(this.x, this.y)
  }
}

function setup() {
  createCanvas(720, 360);
  background(155);
  splatter = new Splatter();
}

function draw() {
  splatter.set_pos();
  splatter.set_color();
  splatter.render();
}

<script language="javascript" type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.7/p5.js"></script>
<script src="sketch.js"></script>