質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.47%

  • Processing

    276questions

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

p5jsのloadPixelsについて

受付中

回答 0

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 682

dialbird

score 323

こんにちは

p5.jsのドキュメントにあった、loadPixelsについてなのですが、このpixelsというarrayはどの様な仕組みになっているのでしょうか?見ていると、y座標にcanvasの幅をかけて、そこにx座標を足したものをキーにしていたりと、どの様に位置を特定しているのかの仕組みがわかりません。

端的に聞くと、loadPixelsを使って、canvasを描画する方法を知りたいということです

よろしくお願いいたします。

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の仕組みはなんとなくわかったのですが、以下の様に打ってもパーリンノイズの雲模様が出てきません。
間違っているところを教えてください。
よろしくお願いいたします。

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();
};
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

まだ回答がついていません

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 90.47%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

  • 解決済

    三秒点灯させて三秒点滅 JS

    信号っぽいものを作ろうとしています。青をボタンを押してから三秒点灯させて、そこから自動的に三秒点滅させて、黄色というようにしたいのですが、三秒点灯させてから点滅させるやり方がよくわ

  • 解決済

    Leafletの地図上に付けたオーバーレイをON/OFFしたい

    Leafletのサンプルページにある、このページにある地図上のオーバーレイを、ON 表示/OFF 非表示で切り替える事がしたいのですが、 どうやったらいいか分かりません。

  • 解決済

    leafletjs choroplethサンプルの改造について

    Leaflet.jsのサンプルで、 http://leafletjs.com/examples/choropleth/ を改造しようとしているのですが、チェックボックスのON/

  • 解決済

    leafletjs choroplethサンプルの改造について02

    Leaflet.jsのサンプルで、  http://leafletjs.com/examples/choropleth/  を改造しようとしているのですが、overlayの切り

  • 解決済

    JavaScript canvasにimageファイルが表示されません。

    JavaScriptで以下のソースを書きましたが、 drawImage()でイメージファイルが表示できません。 ブラウザはGoogle Chromeです。 どなたか、理由がわかるか

  • 解決済

    変数の自動生成をしたい

    前提・実現したいこと 引数で指定した回数だけ、新しいCanvasの作成と設定を行いたいのですが、別の場所で描画コンテキストの取得を行いたいため、 配列の中の要素を変数名として、変数

  • 解決済

    画像の読み込みに失敗する

    前提・実現したいこと MicrosoftのインターネットブラウザEdgeでプログラム動作を確認していたのですが、たまたまMacのSafariを使ったところ、画像の表示を行う部分のプ

  • 解決済

    javascriptで時計を表示したい

    週刊アスキーに掲載されていたJavascriptで時計を表示するのをさいげんしているのですが、うまく表示されません。どこか間違っていると思うのですが、javascriptに触れてい

同じタグがついた質問を見る

  • Processing

    276questions

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