p5js processing:noisy艺术流体

设计说明

这份代码使用Processing编程语言创建了一个图像生成程序，旨在通过噪声函数和颜色映射生成一幅具有幻彩效果的图像。以下是代码的设计说明：

设置画布和基本参数：

通过size(1000, 500, P2D)设置了画布的尺寸为1000x500像素，并使用了2D渲染模式。
smooth()函数启用了平滑抗锯齿效果，使图像绘制更加平滑。
frameRate(60)将帧率设置为60，控制了动画的流畅程度。
noiseDetail(4, 0.2)函数调整了噪声函数的细节级别和平滑程度，以增加噪声的复杂性和平滑度。
定义背景颜色和速度：

r、g、b分别表示背景颜色的红、绿、蓝分量，可以根据需要进行调整。
speed控制了图像中元素的运动速度。
绘制图像：

draw()函数是主要的绘制循环，它首先使用background(255)清空画布背景，将其设置为白色。
生成噪声图案：

使用嵌套的双重循环，遍历画布上的每个像素位置。
在不同方向上生成噪声值，通过噪声的叠加和缩放，在每个像素点生成了一个噪声图案。
颜色映射和渲染：

将噪声值映射到0到1的范围，然后乘以255，得到一个0到255的颜色值。
使用生成的噪声颜色设置像素颜色，创建出具有幻彩效果的图像。
添加半透明背景矩形：

使用fill(r, g, b, 150)设置一个半透明的背景颜色，通过rect()函数绘制在整个画布上，以增加幻彩效果的强度。
绘制扩散的椭圆：

使用noStroke()函数去除边框线。
通过ellipse()函数在画布中心绘制一系列逐渐增大的椭圆，每次循环都将椭圆的直径增加，从而产生一种扩散效果。
通过这些步骤，代码创建了一个精美的幻彩效果图像，通过噪声函数和颜色映射的组合，实现了一种具有动感和独特视觉效果的艺术作品。你可以通过调整参数和颜色映射来探索不同的效果。

部分代码

/*
可以的修改的参数
 
 1.noiseDetail(4, 0.2); // 设置噪声参数
 2.speed 移动速度
 3.第62行    color pixelColor = color(noiseValue *255); // 设置颜色效果  (噪声颜色)
 4.r,g,b 背景色
 5.  float noiseScale = 0.01; // 噪声缩放比例
  6.float noiseStrength = 10000; // 噪声强度
 */

float speed = 0.1;
void setup() {

  size(1000, 500, P2D);
  smooth();
  frameRate(60);
  noiseDetail(4, 0.2); // 设置噪声参数

  //noiseDetail(4, 0.2); // 设置噪声参数
  /*
  noiseDetail() 函数用于设置噪声的细节级别。它接受两个参数：
   
   第一个参数：噪声细节级别（octaves）。
   
   这个参数控制噪声的细腻度或细节级别。它指定了生成噪声时使用的频率层数。较高的数值会增加噪声的细节和复杂性。每个频率层都会增加一些细节。例如，将第一个参数设置为 8，意味着噪声将在 8 个不同的频率层上进行计算。
   
   第二个参数：噪声的平滑程度（falloff）。
   
   这个参数控制噪声的平滑程度或淡出效果。它的取值范围是 0 到 1，表示噪声从一个频率到下一个频率之间的渐变程度。较低的数值会产生更平滑的过渡，而较高的数值会产生更突然的过渡。通常，0.5 是一个比较合适的值。
   
   综上所述，noiseDetail(8, 0.65) 中的参数表示将噪声细节级别设置为 8，平滑程度设置为 0.65。这将增加噪声的细节和复杂性，并产生比较平滑的过渡效果
   */
}
int r = 109;
int g = 157;
int b = 235;


void draw() {
  background(255);
  loadPixels();

  float noiseScale = 0.01; // 噪声缩放比例
  float noiseStrength = 10000; // 噪声强度

  int index = 0;
  for (float y = 0; y < height; y++) {
    for (float x = 0; x < width; x++) {
      float qx = noise(x * noiseScale, y * noiseScale); // 在 x 方向上的噪声值
      float qy = noise(x * noiseScale + 400, y * noiseScale + 100); // 在 y 方向上的噪声值
      float rx = noise(x * noiseScale + 4 * qx + 1000, y * noiseScale + 4 * qy + 6000); // 在 x 方向上的噪声值（根据 qx 和 qy）
      float ry = noise(x * noiseScale + 4 * qx + frameCount * speed, y * noiseScale + 4 * qy + frameCount * speed + 888); // 在 y 方向上的噪声值（根据 qx 和 qy）
      float noiseValue = noise(x * noiseScale + 4 * rx, y * noiseScale + 4 * ry) * noiseStrength; // 最终的噪声值

      // 将噪声值映射到合适的范围
      noiseValue = map(noiseValue, 0, noiseStrength, 0, 1);



      //color pixelColor = color(r, g, noiseValue * b); // 设置颜色效果
      //color pixelColor = color(noiseValue *255, 0, 0); // 设置颜色效果
      color pixelColor = color(noiseValue *255); // 设置颜色效果  (噪声颜色)
      pixels[index++] = pixelColor;
    }
  }
  /*
   在这里，color(0, 0, noiseValue * 255) 表示设置像素的颜色。默认情况下，它是一个蓝色渐变，其中红色和绿色通道的值为0，蓝色通道的值通过 noiseValue * 255 计算得到。你可以根据需要修改这些参数来自定义颜色。
   
   下面是一些常见的颜色修改示例：
   
   将颜色设置为红色：color pixelColor = color(noiseValue * 255, 0, 0);
   将颜色设置为绿色：color pixelColor = color(0, noiseValue * 255, 0);
   将颜色设置为黄色：color pixelColor = color(noiseValue * 255, noiseValue * 255, 0);
   将颜色设置为随机颜色：color pixelColor = color(random(255), random(255), random(255));
   你可以根据自己的喜好和需要来调整这些参数。根据你的修改，你可以创建出不同的颜色效果。
   */

  updatePixels();

  //覆盖一个透明度为150的背景色
  fill(r,g,b,150);
  rect(0,0,width,height);
  

运行视频

p5js processing noisy艺术流体

运行图