P5.js updatePixelsは（）私は赤に、各ピクセルを更新したい

Question

動作しませんので、これは私のコード

const canvasWidth = 800 
const canvasHeight = 600 

function setup() { 
    createCanvas(canvasWidth, canvasHeight) 
    loadPixels() 
    let xoff = 0 
    for (let x = 0; x < canvasWidth; x++) { 
    let yoff = 0 
    for (let y = 0; y < canvasHeight; y++) { 
     pixels[x + y * canvasWidth] = color('red') 
     yoff += + 0.01; 
    } 
    xoff += 0.01 
    } 
    updatePixels() 
} 

ですが、コードは動作しません

Answer 1

pixels配列doesnのですそのような色の値を保持しないでください。 pixels配列は、色を赤、緑、青、およびアルファの4つの別々のインデックスに分割します。 the referenceから：

const canvasWidth = 800 
const canvasHeight = 600 

function setup(){ 
    createCanvas(canvasWidth, canvasHeight); 
    loadPixels(); 
    for (let x = 0; x < canvasWidth; x++) { 
     for (let y = 0; y < canvasHeight; y++) { 
      set(x, y, color('red')); 
     } 
    } 
    updatePixels(); 
} 

：

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(); 

あなたはそれが簡単にx、y、およびcolorのパラメータを取りset()機能、で動作するように見つけるかもしれません