投稿記事

ProcessingJS 勉強 - Noise

15 Jun 2016


Khan Academy での学習

Perlin noise

Perlin Noise

Perlin noise(Ken Perlinが考案) を使用した描画

山並み、雲、 UFO の描画に noise() を使用しています

random() との違いは、隣り合った値は極端に離れた値にはならない

var incAmount = 0.01;

// mountains 
for (var t = 0; t < incAmount*width; t += incAmount) {
   var n = processing.noise(t);
   var n2 = processing.noise(t+15);
   var n3 = processing.noise(t+30);
   var y = processing.map(n, 0, 1, 0, height/2);
   var y2 = processing.map(n2, 0, 1, 0, height/2+70);
   var y3 = processing.map(n3, 0, 1, 0, height/2+150);
    
   processing.noStroke();
   processing.fill(209, 188, 188);
   processing.rect(t*100, height-y3, 1, y3);

   processing.fill(161, 137, 137);
   processing.rect(t*100, height-y2, 1, y2);

   processing.fill(0, 0, 0);
   processing.rect(t*100, height-y, 1, y);

}
  


2次元ノイズ

2D noise

random()を使った場合

for (var x = 0; x < 500; x++) {
    for (var y = 0; y < 500; y++) {
        // A random brightness!
        var bright = processing.random(255);
        processing.stroke(bright, bright, bright);
        processing.point(x, y);
    }
}

noise()を使った場合

var xoff = 0.0;
for (var x = 0; x < 500; x++) {
    var yoff = 10.0;
    for (var y = 0; y < 500; y++) {
       var bright = processing.map(processing.noise(xoff, yoff), 0, 1, 0, 255);
        processing.stroke(bright, bright, bright);
        processing.point(x, y);
        yoff += 0.01;
    }
    xoff += 0.01;
}