当前位置: 华文星空 > 知识

有哪些计算机生成的精美图形?

2011-12-20知识

这题不应该放到 新媒体艺术(new media arts)、生成艺术(generative arts) 下头么! 都闪开,让新媒体艺术来一发!

前面先放成熟作品。都用了不仅仅一种算法。后面会有几个简单的带代码的。

先砸图 ( 因为都是代码写出来的,所以其实都是动画, 甚至是实时交互的,但是我这里为了方便,而且大部分资源都在vimeo/youtube,所以就只贴图了 ,有兴趣的自己去科学上网吧!)

先来几张Casey Reas的:

Microimage


KNBC

Ideology

Process 9


Reas这位就是大名鼎鼎的Processing语言的创始人(虽然说是语言,其实内核是Java, 把很多需要很多步才可以的功能简化了,比如说画一条线,就是 line(x1, y1, x2, y2) 这么简单, x1,y1就是第一个点的X,Y 坐标, x2, y2 就是第二个点的xy坐标。)


上面就是processing 的界面,相当新手友好,几行代码就出来一个美丽的图形。



然后,上面很多朋友都贴了Fractal, 就这样子的:


其实,稍微调教一下颜色,加一些贴图,打一下光,然后加一个维度,可以玩的更嗨。

你看,这里有个新媒体艺术家专门做Fractal的。他还把这些东西做成了VR体验。





对他作品有兴趣的可以去他网站看,类似的有很多。 -> Julius Horsthuis

在生成艺术里,Fractal是个很好用的算法,另外一个特别特别好用的,就是 Perlin Noise.

这个noise屌就屌在它的产出非常的自然,如果你用普通的随机函数,你得到这么一张图:

但是你用perlin Noise你得到这样一张图

非常自然。然后利用它,再加一个维度,你就得到看起来很真是的地理构造:

能想象这个凹凸就是一个noise就生成出来的东西么(天空是贴图)?

然后你再让它的函数演变一下:

可能性是无穷的。其实前面我所有贴的东西,几乎都有用到这个Noise,只要你想让东西起来自然却又很随机,这个就是很好用的。

然后,说完了算法味儿特别重的,下面是数据味的:

首先是Marius Watz, 平面设计背景,自学成才。



其实大家也发现了,生成艺术的法宝就是 重复 加看起来自然的 随机。


然后,毫无羞耻的放一个自己上半年做的一个项目。一个机械数码装置,自动生成的图像和文字,自己动的鼠标+自己敲自己的键盘,还有自动24/7全天候接受程序发来的打印任务的打印机。



除了算法是事先写好的,内容都是生成的或者网上随机抓的。不同于上面的风格,我想让把生成的东西看起来特别像是人类设计师的作品。装置放在那里跑了一星期,生成了几千张海报:



技术上除了语法生成器 ( 给标题用) glitch art ( 有些背景) ,剩下的排版什么的,很大程度上还是依赖于perlin noise, 这样有一种很有机的随机感觉。像是创意人设计出来的海报。


------------ 手好酸,下面贴几个我们敬爱的dan shiffman的简单教程: 都是最基本的例子,想试试的就去Download \ Processing.org下载processing吧!


首先当然是recursive




strokeWeight ( 2 ); line ( 0 , 0 , 0 , - len ); // Move to the end of that line translate ( 0 , - len ); len *= 0 . 66 ; // All recursive functions must have an exit condition!!!! // Here, ours is when the length of the branch is 2 pixels or less if ( len > 2 ) { pushMatrix (); // Save the current state of transformation (i.e. where are we now) rotate ( theta ); // Rotate by theta branch ( len ); // Ok, now call myself to draw two new branches!! popMatrix (); // Whenever we get back here, we "pop" in order to restore the previous matrix state // Repeat the same thing, only branch off to the "left" this time! pushMatrix (); rotate (- theta ); branch ( len ); popMatrix (); }


再来个perlin noise的:


(这个下面的代码复制粘贴到你的Processing里面可以直接跑哦!)

// adapted from http://openprocessing.org/sketch/2785 // alexis farmer 2014 int nPoints = 4096 ; // points to draw float complexity = 8 ; // wind complexity float maxMass = . 8 ; // max pollen mass float timeSpeed = . 02 ; // wind variation speed float phase = TWO_PI ; // separate u-noise from v-noise float windSpeed = 40 ; // wind vector magnitude for debug int step = 10 ; // spatial sampling rate for debug float [] pollenMass ; float [][] points ; void setup () { size ( 512 , 512 , P2D ); points = new float [ nPoints ][ 2 ]; pollenMass = new float [ nPoints ]; for ( int i = 0 ; i < nPoints ; i ++ ) { points [ i ] = new float []{ random ( 0 , width ), random ( 0 , height )}; pollenMass [ i ] = random ( 0 , maxMass ); } noiseDetail ( 14 ); background ( 255 ); } void draw () { float t = frameCount * timeSpeed ; stroke ( 0 , 10 ); for ( int i = 0 ; i < nPoints ; i ++) { float x = points [ i ][ 0 ]; float y = points [ i ][ 1 ]; float normx = norm ( x , 0 , width ); float normy = norm ( y , 0 , height ); float u = noise ( t + phase , normx * complexity + phase , normy * complexity + phase ); float v = noise ( t - phase , normx * complexity - phase , normy * complexity + phase ); float speed = ( 1 + noise ( t , u , v ) ) / pollenMass [ i ]; x += lerp ( - speed , speed , u ); y += lerp ( - speed , speed , v ); if ( x < 0 ) x = width - 1 ; else if ( x >= width ) x = 0 ; if ( y < 0 ) y = height - 1 ; else if ( y >= width ) y = 0 ; point ( x , y ); points [ i ][ 0 ] = x ; points [ i ][ 1 ] = y ; } } void mousePressed () { setup (); }


这里有更多简单好看的例子: Generative Art (AbandonedArt.org)

有兴趣的,可以去下载一个Processing 的IDE, 不要钱,体积也很小。下载链接在上面。想系统学的话可以看书,书的话,可以先从shiffman的"learning processing"看起,或者"Nature of Code", 各种模仿自然的简单算法,真的炒鸡简单。我12年入坑,之前完全是平面背景,但是现在已经无法自拔了。

好了今天说的逻辑好混乱,希望大家看到自己喜欢的东西,然后入坑,然后发现编程的乐趣。其实写程序还是挥画笔都是个工具而已,目的还是自我表达。


有兴趣想入坑需要更多信息的可以私信我,欢迎纽约面基。


啊。