2017-12-20 6 views
1

私は初心者のプログラマーで、自分自身でp5jsとjsを教えようとしています。私は次のような問題につまずいたとき、私は「コードの自然」と呼ばれる無料のオンラインサイトから読んでいた:p5jsを使用して色を正しく表示するにはどうすればよいですか?

色のドットの集まりとして描かペイントスプラッタのシミュレーションを考えてみましょう。ペイントの大部分は中央の場所の周りに集まりますが、いくつかのドットは端に向かって飛び散ります。ドットの位置を生成するために乱数の正規分布を使用できますか?乱数の正規分布を使ってカラーパレットを生成することもできますか?

私は位置分布部分を下降させることができましたが、私はカラーパレットの正規分布を得ることができません。ここで私はやってみましたものです:

何らかの理由

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

しかし、関係なく、私がしようと私が変えるために色を得ることはできません。私は明白な何かを欠いていますかありがとう!

答えて

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>

に係るストロークによって決定されます
関連する問題