Question

我是一名新手程序员，试图教我自己p5js和js。当我偶然发现以下问题时，我正在从一个名为“自然的代码”的免费在线网站上阅读：

考虑将油漆飞溅模拟为彩色圆点的集合。大多数油漆聚集在中心位置周围，但有些点会向边缘喷溅。你能用正态的随机数分布来产生点的位置吗？你还可以使用正态分布的随机数来生成调色板吗？

我成功了解了位置分布部分，但我似乎无法正常分配调色板。这是我试图做的事情：

// 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>

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

1 个答案: