質問編集履歴

1 追加

dialbird

dialbird score 337

2016/04/12 16:14  投稿

p5jsのloadPixelsについて
こんにちは
p5.jsのドキュメントにあった、loadPixelsについてなのですが、このpixelsというarrayはどの様な仕組みになっているのでしょうか?見ていると、y座標にcanvasの幅をかけて、そこにx座標を足したものをキーにしていたりと、どの様に位置を特定しているのかの仕組みがわかりません。
端的に聞くと、loadPixelsを使って、canvasを描画する方法を知りたいということです
よろしくお願いいたします。
```javascript
var pink = color(255, 102, 204);
loadPixels();
var d = pixelDensity();
var halfImage = 4 * (width * d) * (height/2 * d);
for (var i = 0; i < halfImage; i+=4) {
 pixels[i] = red(pink);
 pixels[i+1] = green(pink);
 pixels[i+2] = blue(pink);
 pixels[i+3] = alpha(pink);
}
updatePixels();
```  
 
 
 
 
 
以下訂正------------------------------------------------------  
 
loadPixelsの仕組みはなんとなくわかったのですが、以下の様に打ってもパーリンノイズの雲模様が出てきません。  
間違っているところを教えてください。  
よろしくお願いいたします。  
 
 
 
```javascript  
 
var c=0;  
var detail = 100;  
 
 
function setup(){  
   createCanvas(200,200);  
   background(0);  
     
}  
 
function draw(){  
   background(255);  
   loadPixels();  
   for(var y=0;y<height;y++){  
       for(var x=0;x<width;x++){  
           var bright = map(noise((x+c)/detail,(y+c)/detail),0,1,0,255);  
           pixels[x+y*width] = color(bright);  
       }  
       c++;  
   }  
   updatePixels();  
};  
```
  • Processing

    366 questions

    Processingは、オープンソースプロジェクトによるCGのためのプログラミング言語です。Javaをベースにしており、グラフィック機能に特化しています。イメージの生成やアニメーションなど、視覚的なフィードバックを簡単に得ることが可能です。

思考するエンジニアのためのQ&Aサイト「teratail」について詳しく知る