顏色不適用於具有噪聲功能的p5.js示例

Question

我想實現代碼本性的p5.js示例。

其目的是爲畫布填充亮度由Perlin Noise函數隨機選擇的像素。我受到Processing的Java的啓發，但我得到的不是我期望的原因，它是一個幾乎黑色的畫布。

這是我的代碼：

var increment = 0.02 

function setup() { 
    createCanvas(100, 100) 
    noLoop() 
} 

function draw() { 
    background(0) 

    loadPixels(); 

    var xoff = 0 

    for (var x = 0; x < width; x++) { 
    xoff += increment 
    var yoff = 0 

    for (var y = 0; y < height; y++) { 
     yoff += increment 
     var bright = floor(noise(xoff, yoff) * 255) 

     console.log('bright', bright, '(', x, ', ', y, ')') 

     pixels[x+y*width] = color(bright); 
    } 
    } 
    updatePixels(); 
} 

我的console.log顯示一個明亮的價值似乎一致。 你在我的代碼中看到任何問題嗎？

Answer 1

像素陣列是平的，每4個元素創建一個像素。

第一像素居然是：

pixels[0] // red value of pixel, between 0-255 
pixels[1] // green value of pixel, between 0-255 
pixels[2] // blue value of pixel, between 0-255 
pixels[3] // alpha value of pixel, between 0-255 

不過，翻翻p5.js文檔，我注意到當有helper method set其抽象像素的顏色設置。要使用set方法，我們只需要像素的座標以及color instance。改變顏色模式還可以讓我們輕鬆創建具有給定亮度的顏色對象。

注：我已經包含一個CDN鏈接到p5.js，以便您可以運行該示例。

const increment = 0.02; 
 

 
function setup() { 
 
    createCanvas(200, 200); 
 
    noLoop(); 
 
} 
 

 
function draw() { 
 
    background(0); 
 
    
 
    colorMode(HSB, 255); 
 
    
 
    let xOff = 0; 
 
    
 
    for (let x = 0; x < width; x++) { 
 
    let yOff = 0; 
 
    
 
    xOff += increment; 
 
    
 
    for (let y = 0; y < height; y++) { 
 
     yOff += increment 
 
     
 
     const n = noise(xOff, yOff); // noise 
 
     const h = 255;     // hue 
 
     const s = 126;     // saturation 
 
     const b = map(n, 0, 1, 0, 255); // brightness 
 
     const c = color(h, s, b);  // color instance 
 
     
 
     set(x, y, c);     // set pixel 
 
    } 
 
    } 
 
    
 
    updatePixels(); 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.8/p5.min.js"></script>