一、随机颜色
随机和秩序普遍存在于自然界中,但是自然界中往往没有纯粹的随机与纯粹的秩序。纯粹的随机混乱而无序,纯粹的秩序重复而枯燥,美也许存在于随机与秩序之间的某个平衡点。
如下图,RGB通道同时随机,特点是色彩种类多,明暗和饱和度不一,不协调
换成HSB模型,饱和度和高亮为1,色调随机,如下图。特点是色彩种类多,比较鲜艳,让人眼花缭乱,非常不协调。
限制色调,统一为蓝色,让饱和度和明亮小范围随机,生成如下图,颜色比较和谐,看起来比较舒适。[1]
完全的随机产生混乱,有限制的随机产生美。
二、柏林·蒙德里安梯田
随机中最有秩序的恐怕非柏林噪声[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]
如果你喜欢这些图片,请点个赞吧~~
参考
- ^https://www.shadertoy.com/view/3tyXzz
- ^https://en.wikipedia.org/wiki/Perlin_noise
- ^https://en.wikipedia.org/wiki/Piet_Mondrian
- ^https://www.openprocessing.org/sketch/846151
- ^http://www.iquilezles.org/www/articles/warp/warp.htm
- ^https://www.shadertoy.com/view/3lySRR
- ^https://www.shadertoy.com/view/wtdXzN