p5js를 사용하여 색상을 올바르게 표시하는 방법은 무엇입니까?

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

포인트()의 색상은 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>

에 따른 스트로크로 판단