loadPixelsは（）p5.js

Question

私はp5.jsを使用して画像のピクセル（または単にキャンバス）を編集したい

で作業していない、それはドキュメントの彼らのウェブサイト上のショーです：

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でそのコードを試してみましたが、それはうまくいきませんでした。

処理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(); 
} 

私はキャンバスのピクセルを編集できるようにしたいと思いますが、それはできません。

Here私は使用しているcodepenです。

イメージは正常に読み込まれますが、ピクセルは編集できません。

私はYoutubeのDaniel Shiffmanのtutorialsをフォローしていました。

ご協力いただきありがとうございます。

Answer 1

イメージを読み込むには数秒かかります。 setup()関数とdraw()関数への最初の呼び出しは、数ミリ秒で実行されます。 イメージを描こうとしているときにイメージが読み込まれません。だからこそ空白のキャンバスを手に入れました。この問題を回避するには

、p5.jsはpreload()機能提供しています（セットアップの前に直接呼び出され

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

preload()ではなく、setup()機能であなたのイメージをロードします。

var img; 
 

 
function preload(){ 
 
    img = loadImage("https://graph.facebook.com/1000/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/1000/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>

Here is a CodePenをあなたはそれで遊んしたい場合：ここでは、あなたのイメージを示していますが、すべてのピクセル強度を半減例です。