数字画面里的岩彩感经常被一个“随机颗粒”滑块概括。可所有像素都等概率变亮或变暗得到的往往更像电视雪花。想让纸面有层次至少要把底色、颗粒和边缘积色分开知道每一层在改变什么。先定义视觉目标这里追求的是带颗粒的平面色块不是矿物颜料的化学或光学模拟。底色决定大面积观感少量局部颗粒让表面不均匀靠近色块边界的深色带暗示积色。参数只控制图像没有证据支持把它们直接命名为真实矿石粒径或胶液浓度。下面用一个圆形掩膜生成 RGBA 数组。半径外完全透明半径内以距边缘的距离决定深色带伪随机数用于轻微噪声并设置固定种子。固定种子不是为了证明自然而是为了比较参数时不被另一次随机图案干扰。读旧像素写新像素Canvas 的像素操作文档解释了ImageData的 RGBA 布局。浏览器接入时可将本例数组交给ImageData这里输出简单的 PPM 文件方便在无图形依赖的环境中检查。PPM 不支持透明导出时会合成到白纸上这个处理不能省略。颗粒强度太高会吞掉轮廓边缘带太宽会像描边。先用同一随机种子比较几个强度再看缩小后的画面通常比盯着放大像素更有用。若要接真实画笔还需要处理采样间距、压感和重复叠色本例没有覆盖。运行node pigment.js会生成pigment.ppm。本地检查了种子复现、边界透明以及所有通道范围没有运行浏览器 Canvas也没有做真实颜料对比或性能跑分。给近似起一个准确名字反而能让它成为一个好用的设计参数。可独立运行的核心例子const fsrequire(node:fs); function random(seed) {return (){seed(Math.imul(seed,1664525)1013904223)0;return seed/2**32;};} function pigment(w,h,seed) { const outnew Uint8ClampedArray(w*h*4), randrandom(seed), rMath.min(w,h)*.4; for(let y0;yh;y)for(let x0;xw;x) { const dMath.hypot(x-w/2,y-h/2),i(y*wx)*4; if(dr) continue; const edgeMath.max(0,1-(r-d)/8),grain(rand()-.5)*18; out.set([120grain-30*edge,145grain-30*edge,170grain-25*edge,255],i); } return out; } function ppm(data,w,h) { const rgb[]; for(let i0;idata.length;i4) { const adata[i3]/255; rgb.push(...[0,1,2].map(cMath.round(data[ic]*a255*(1-a)))); } return P3\n${w} ${h}\n255\nrgb.join( ); } const apigment(96,96,19),bpigment(96,96,19); if(a.some((v,i)v!b[i])||a[3]!0)throw Error(复现或边界失败); if(a.length!96*96*4 || a.some(vv0||v255)) throw Error(像素越界); fs.writeFileSync(pigment.ppm,ppm(a,96,96)); console.log(已生成 pigment.ppm固定种子19);内图解释叠层思路不是圆形像素例子的输出截图。
