我想实现代码本质的 p5.js 示例。
目的是用像素填充画布，其亮度由柏林噪声函数随机选择。我受到 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 显示了一个看起来连贯的明亮值。你看我的代码有什么问题吗？
像素阵列是扁平的，每 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 文档时，我注意到有一个辅助方法set可以抽象像素颜色的设置。要使用该set方法，我们只需要一个像素的坐标以及一个color实例。更改颜色模式还允许我们轻松创建具有给定亮度的颜色对象。
注意：我已经包含了一个指向 p5.js 的 CDN 链接，因此您可以运行该示例。
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>本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句