1

p5.j​​sを使用して画像（またはキャンバスのみ）のピクセルを編集したいのですが、ドキュメントのWebサイトに表示されています：

var img;
function preload() {
  img = loadImage("assets/rockies.jpg");
}

function setup() {
  image(img, 0, 0);
  var d = pixelDensity();
  var halfImage = 4 * (img.width * d) *
      (img.height/2 * d);
  loadPixels();
  for (var i = 0; i < halfImage; i++) {
    pixels[i+halfImage] = pixels[i];
  }
  updatePixels();
}

そのため、p5.js が正しくリンクされた codepen でそのコードを正確に試してみましたが、うまくいきませんでした (もちろん、自分のイメージでは)。

Processing IDE 自体でバージョンを作成して動作したので、JS に変換しようとしたのですが、動作しない理由がわかりません。

var img;

function setup() {
  createCanvas(500, 400);
  img = loadImage("https://s3-us-west-2.amazonaws.com/s.cdpn.io/379903/image.png");  // Load the image

}

function draw() {
  background(255);

  image(img, 0, 0, 500, 400);



  loadPixels();

  for (var i = 0; i < pixels.length; i++) {
        pixels[i] = color(255, i, 0);
  }

  updatePixels();
}

キャンバスのピクセルを編集できるようにしたいだけですが、できません。

これが私が使用しているコードペンです。

画像は正常にロードされますが、ピクセルを編集できませんか?

YouTube でDaniel Shiffman のチュートリアルをフォローしていました。

どんな助けでも大歓迎です、ありがとう。

4

1 に答える 1

1

画像の読み込みには数秒かかります。関数と関数へのsetup()最初の呼び出しdraw()は、数ミリ秒で行われます。描画しようとすると、画像の読み込みが完了しません。そのため、空白のキャンバスが表示されます。

この問題を回避するために、p5.js はpreload()関数を提供します。

setup() の直前に呼び出される preload() 関数は、外部ファイルの非同期ロードを処理するために使用されます。プリロード関数が定義されている場合、setup() はその中のロード呼び出しが完了するまで待機します。プリロード内には、ロード呼び出し以外のものは何も含めるべきではありません (loadImage、loadJSON、loadFont、loadStrings など)。

関数preload()の代わりに画像をロードします。setup()

var img;

function preload(){
  img = loadImage("https://graph.facebook.com/100001230751686/picture?type=large");  
}

function setup() {
  createCanvas(500, 400);
  noLoop();
}

function draw(){
  image(img, 0, 0, 500, 400);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.0/p5.js"></script>

コードの残りの部分はあまり意味がないため、ピクセルで何をしようとしているのか正確にはわかりません。i変数が何であり、何color(255, i, 0)が返されるかを考えてください。しかし、うまくいけば、そのコードは単なるプレースホルダーであり、画像をロードできるようになったので続行できます。

pixels[]配列を読みたいと思うかもしれません。画像を表示する例を次に示しますが、すべてのピクセル強度が半分になります。

var img;
    
function preload(){
  img = loadImage("https://graph.facebook.com/100001230751686/picture?type=large");  
}

function setup() {
  createCanvas(500, 400);
  noLoop();
}

function draw() {
  background(0);
  image(img, 0, 0, 500, 400);
  loadPixels();

  for (var i = 0; i < pixels.length; i++) {
    pixels[i] = pixels[i]/2;
  }
  updatePixels();
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.0/p5.js"></script>

試してみたい場合は、上記の CodePenを次に示します。

于 2016-04-13T12:32:31.127 に答える