js生成随机颜色_代码与艺术(0)—随机中的秩序

一、随机颜色

随机和秩序普遍存在于自然界中，但是自然界中往往没有纯粹的随机与纯粹的秩序。纯粹的随机混乱而无序，纯粹的秩序重复而枯燥，美也许存在于随机与秩序之间的某个平衡点。

如下图，RGB通道同时随机，特点是色彩种类多，明暗和饱和度不一，不协调

RBG随机

换成HSB模型，饱和度和高亮为1，色调随机，如下图。特点是色彩种类多，比较鲜艳，让人眼花缭乱，非常不协调。

HSB随机

限制色调，统一为蓝色，让饱和度和明亮小范围随机，生成如下图，颜色比较和谐，看起来比较舒适。^[1]

HSB随机

---

完全的随机产生混乱，有限制的随机产生美。

二、柏林·蒙德里安梯田

随机中最有秩序的恐怕非柏林噪声^[2]莫属了，柏林噪声的美在于随机而有秩序，有秩序而不重复。用柏林噪声生成向量场，让粒子在向量场上运动，加上皮特·蒙德里^[3]的红黄蓝配色，如下一幅美丽而有韵律的梯田图就生成了。

柏林·蒙德里安梯田

该图使用p5.js渲染，代码不到40行^[4]

function MakeParticle(col,lifetime)
{
let pos  = [random(0,width), random(0,height)]; let pre_pos = pos;
    return function(){ //update particle  return true if dead
      stroke(col); line(pre_pos[0],pre_pos[1],pos[0],pos[1]);     
      if (lifetime-- <= 0) return true;
      let a = noise(pos[0]/2000,pos[1]/2000)*2000;
      pre_pos = pos;
      pos = [pos[0]+cos(a)*5,pos[1] +sin(a)*5];
      return false;
    }
}
function MakeParticleSystem(num,col,lifetime)
{
    let parts = Array.from({length:num},_=>MakeParticle(col,lifetime)); //create num of particles   
    return  _=> parts.map(p=>p()).every(dead=>dead); //update layer until all particles die
}
function MakeParticleLayer(configs)
{
  let layers = configs.map(cfg =>MakeParticleSystem(cfg.num,cfg.col,cfg.lifetime));
  let iter = 0;
  return _=> {//run particle layer , if dead then next 
    if( iter < layers.length && layers[iter]()) ++iter;
  }
}
function setup () {
  createCanvas (800, 400);
  colorMode(RGB,1.0);background (.976, .949, .878);
  draw = MakeParticleLayer([{col:color(.667,.133, .141,0.35),num : 4000,lifetime:100},
      {col:color(1., .812, .337,.25),num : 800,lifetime:55},
      {col:color(0.,.369, .608,0.25),num : 600,lifetime:35},
      {col:color(.667,.133, .141,0.35),num : 200,lifetime:100},
    ]);
}

---

三、混沌中的混沌，秩序中的秩序

如果叠加多层噪声，在噪声上再嵌套噪声会怎么样^[5]？

可能是一幅水彩画^[6]

也有可能是木星的云^[7]

木星云

如果你喜欢这些图片，请点个赞吧～～

参考

1. ^https://www.shadertoy.com/view/3tyXzz
2. ^https://en.wikipedia.org/wiki/Perlin_noise
3. ^https://en.wikipedia.org/wiki/Piet_Mondrian
4. ^https://www.openprocessing.org/sketch/846151
5. ^http://www.iquilezles.org/www/articles/warp/warp.htm
6. ^https://www.shadertoy.com/view/3lySRR
7. ^https://www.shadertoy.com/view/wtdXzN