有哪些計算機生成的精美圖形?

請附上圖片鏈接, 有代碼的鏈接就更好了 : )


這題不應該放到新媒體藝術(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年入坑,之前完全是平面背景,但是現在已經無法自拔了。

好了今天說的邏輯好混亂,希望大家看到自己喜歡的東西,然後入坑,然後發現編程的樂趣。其實寫程序還是揮畫筆都是個工具而已,目的還是自我表達。


有興趣想入坑需要更多信息的可以私信我,歡迎紐約面基。

啊。


補充一個 Image Style Transfer Using Convolutional Neural Networks。這個演算法可以從一張圖片中提取藝術風格,並轉移到另一張圖片中。最近非常火的 Ostagram 就是用的這個演算法。
下面的圖片左下角是代表藝術風格的圖片,左上角是轉移風格的對象,右邊的大圖就是演算法生成的結果了。

(圖片引自 Ostagram)
這個演算法的背後其實是深度卷積神經網路,網上有很多不同的開源實現,比如
基於 Torch 的 GitHub - jcjohnson/neural-style
基於 TensorFlow 的 GitHub - anishathalye/neural-style
基於 Keras 的 GitHub - titu1994/Neural-Style-Transfer


有一個比賽,用小於等於140個字元分別寫三個函數Red、Green、Blue,生成1024*1024的圖片(函數的參數就是x和y坐標,函數返回值是顏色分量的大小)。
鏈接如下(國內打開可能比較慢,請耐心等待)
math - Tweetable Mathematical Art
裡面所有作品都是附上源代碼的。
下面附上幾個例子:

unsigned char RD(int i,int j){
double a=0,b=0,c,d,n=0;
while((c=a*a)+(d=b*b)&<4n++&<880) {b=2*a*b+j*8e-9-.645411;a=c-d+i*8e-9+.356888;} return 255*pow((n-80)/800,3.); } unsigned char GR(int i,int j){ double a=0,b=0,c,d,n=0; while((c=a*a)+(d=b*b)&<4n++&<880) {b=2*a*b+j*8e-9-.645411;a=c-d+i*8e-9+.356888;} return 255*pow((n-80)/800,.7); } unsigned char BL(int i,int j){ double a=0,b=0,c,d,n=0; while((c=a*a)+(d=b*b)&<4n++&<880) {b=2*a*b+j*8e-9-.645411;a=c-d+i*8e-9+.356888;} return 255*pow((n-80)/800,.5); }

char red_fn(int i,int j){
#define r(n)(rand()%n)
static char c[1024][1024];return!c[i][j]?c[i][j]=!r(999)?r(256):red_fn((i+r(2))%1024,(j+r(2))%1024):c[i][j];
}
char green_fn(int i,int j){
static char c[1024][1024];return!c[i][j]?c[i][j]=!r(999)?r(256):green_fn((i+r(2))%1024,(j+r(2))%1024):c[i][j];
}
char blue_fn(int i,int j){
static char c[1024][1024];return!c[i][j]?c[i][j]=!r(999)?r(256):blue_fn((i+r(2))%1024,(j+r(2))%1024):c[i][j];
}

unsigned char RD(int i,int j){
return DIM-BL(2*i,2*j);
}
unsigned char GR(int i,int j){
return BL(j,i)+128;
}
unsigned char BL(int i,int j){
i-=512;j-=512;int d=sqrt(i*i+j*j);return d+atan2(j,i)*82+sin(_cr(d*d))*32+sin(atan2(j,i)*10)*64;
}

unsigned char RD(int i,int j){
static double k;k+=rand()/1./RAND_MAX;int l=k;l%=512;return l&>255?511-l:l;
}
unsigned char GR(int i,int j){
static double k;k+=rand()/1./RAND_MAX;int l=k;l%=512;return l&>255?511-l:l;
}
unsigned char BL(int i,int j){
static double k;k+=rand()/1./RAND_MAX;int l=k;l%=512;return l&>255?511-l:l;
}

unsigned char RD(int i,int j){
#define A int x=0,y=0,p[10]={512,9,0,381,196,981,827,981,DM1,381}
auto s=99./(j+99);return GR(i,j)?0:abs(53-int((3e3-i)*s+j*s)%107);}

unsigned char GR(int i,int j){static int c[DIM][DIM];if(i+j&<1){A;for(int n=0;n&<2e7;n++){int v=(rand()%11+1)%5*2;x+=p[v];x/=2;y+=p[v+1];y/=2;c[x][y]++;}}return c[i][j];} unsigned char BL(int i,int j){static int c[DIM][DIM];if(i+j&<1){A;for(int n=0;n&<3e7;n++){int v=(rand()%11+4)%5*2;x+=p[v];x/=2;y+=p[v+1];y/=2;c[x][y]++;}}return c[i][j];}

更多作品點擊鏈接。
math - Tweetable Mathematical Art


窮盡所有色彩能畫出什麼?

Code Golf 是一個程序員網站,機制類似於知乎,用戶可以在上面提出編程問題,然後各路程序員在問題下用各種演算法,語言,代碼來尋求最佳最炫最快的解決方案。

一個問題是這樣的 popularity contest
——用所有色彩畫出的圖像。

題意大致是這樣的:我們知道計算機是用 R, G, B 三個分量來表示顏色,比如在最常用的24-bit 色彩空間中,每個分量有 2^8=256 階,也就是說一共可以呈現出 256^3 = 16777216 種顏色。那麼每個顏色給你一個像素,一共給你16777216個像素,請你用這些像素拼出一幅漂亮的圖案,不能多用一個像素,也不能少用。

最後,得票最高的作者畫出來的是這樣的:
(可以放大查看)

細部放大:

作者還微調了他的演算法,畫出了其它風格的圖像,可以到他的答案:popularity contest
和個人網站 Rainbow Smoke 上去看看。


原答案已經刪除,代碼和圖片放在 Github上。


【多圖】
皮克斯夢工廠等製作的動畫電影以及各種大片中的特效大場面每一幀都是計算機生成的精美圖形,
但我覺得最精美的還是分形啦,不需要建模,貼圖,藉助一些軟體就可以得到很漂亮的圖形,當然前提是你要有一雙善於發現美的眼睛,以及等待渲染的耐心。
下面放一些我自己搗鼓出來的圖。

首先是二維的分形,大名鼎鼎的Mandelbrot集合的局部放大圖

漂亮吧,用Ultra Fractal仔細探索就可以得到。

這是我製作的Mandelbrot集合放大動畫,也是用Ultra Fractal做的,花了好長時間才完成渲染
探索分形之美-自製Mandelbrot集合放大動畫

下面是三維的分形,使用的軟體是Mandelbulb3D。

這些圖在分形藝術網 - 門戶都可以找到,裡面還有許多別人的作品,軟體也可以在裡面下載到,自己去探索吧


提問者這裡先發幾個,,,

Julia 集分形 WebGL 動畫 http://people.mozilla.com/~sicking/webgl/juliaanim.html
three.js 框架的若干 DEMO http://mrdoob.github.com/three.js/
Fractals, Chaos 一個博客.. 這個怎麼介紹.. http://paulbourke.net/fractals/
然後 pyclutter 示例代碼裡面有個 flower.py http://wiki.clutter-project.org/wiki/PyClutter
Wayland 那個 wayland-run flowers http://www.tudou.com/programs/view/sFr6iRqpaAU/


來一發童年向回答,不知道現在小學還學不學PCLogo...
我們那時候四年級開始上電腦課,老師教了這個之後我們就成天沉迷擺弄小烏龜,也算是我的編程啟蒙課了吧...
-----------------------------------------------------------------------------------------
裝了一下PCLogo沒裝上去,可惜了,我就用Mathematica的AnglePath系統代替吧,這個功能更加強大一點,本質是一樣的...

第一節課教的是多邊形,大多數人還在瞎搗鼓,我想都沒想就決定畫個1000邊形...於是整個屏幕就花掉了...因為PCLogo的畫布是有大小的,且上下左右連通,一條很長很長的線段就表現為一堆平行線,然後各個角度的平行線交叉屏幕就花了...
那節課全場最佳是一位胖胖的小哥畫的這個:

--------------------------------------------------------------------------------------------
第二節課教了五角星,當然我們都覺得能畫出六角形,七角星什麼的,但是怎麼都想不出怎麼畫...怎麼辦...那就找唄,首先肯定是可以轉過一定角度得到的,所以我找60°-70°,你找70°-80°....然後全班同學一起來窮舉...

100° 8角...105°12角....108°5角.....110°18角,搞不懂了到底有什麼規律呢....
然後又是胖哥,胖哥扶了下眼鏡,我知道規律了,就是180-180/n,大家一試還真是...大家紛紛表示厲害了我的哥,簡直和柯南一樣厲害...
就這樣全班實驗學家被一個理論學家挑翻了...現在看來這個實驗設計挺失敗的,首先假定了旋轉角度只能是整數,然後至少有三種情況都會產生多角圖形,奇數,6的倍數和除此以外的偶數公式都是不一樣的,混雜起來就不是小學生能找得到規律的了.

然後是五星題...五星指的是難度...反正習題本標五星就是表示....說得好,表示不用做了.....這道題也和五角星有關----怎麼畫一個空心的五角星? 討論了好久,好像沒幾個人做出來的...然後....然後胖哥又推出規律了...左轉180-180/n,走你,右轉180-540/n,走你....這都能湊出來...,厲害了我的哥,簡直比柯南還厲害....

--------------------------------------------------------------------------------------------
這個我們叫迷宮圖,大概花了兩節課探索出來的...

再後來就是各種畫畫,畫風車,畫太陽,畫白雲什麼的了,記不清了,而且現在讓我畫我也畫不出來,沒那個閑心了.....
--------------------------------------------------------------------------------------------
限於PCLogo的機能有的東西無法呈現,比如第一步轉1弧度,第二步轉2弧度,第三步3弧度...這樣走上十萬步是什麼樣子呢?

就這個樣子了,要考究數學原理的話就是Mod[n,pi ]的擬周期性,導致不同尺度上呈現出不同的周期性.
--------------------------------------------------------------------------------------------
其實這個比較適合來畫分形,先畫一個基元,然後擴大一定倍數,把這個基元旋轉,一次類推,如此便是一個簡單的IFS(Iterated Function System).於是一兩行就能畫個分形了...
Dragon curve

Greek cross fractal

Sierpinski Hexagon

Lévy C curve

Fibonacci fractal

生成一顆分形樹也不難


我大部分空閑時間也在玩這個方向, @張小哈 一直鼓勵我做一些東西放上來。

那,這個問題,我就強答一下,這個故事要從一張毛爺爺開始。
上周五,我回到家整理零錢,翻到一張一元紙幣,看到毛爺爺慈祥的面容,想要臨摹一下。於是拿出塵封已久的紙筆,花了5分鐘,認真地畫了一下:

WTF。。。這是誰。。。不像毛爺爺,但這雙目囧囧有神,福星高照的天象,淡定從容的氣場,像腦海中的某個人,想了大半天,好像是ta:

(孔連順《萬萬沒想到》劇照,圖侵刪)

這。。。被精神污染了,趕緊閉目養神,清空記憶緩存,重新畫一稿:

這一稿簡直就是。。。SHIT。只有髮型和下巴上的痣有點像,已經無法找借口說具體是像誰了。。。在這種情況下,我只好承認,臨摹毛爺爺的難度太大了,為了體現我堅持不懈的精神,我又認真畫了一稿:

好氣哦,也許是需要加上光影才行,為了找挽尊,頂著壓力再畫一次:

好像好一點,淡定從容的神態貌似有那麼一丟丟了,但是距離毛爺爺,還差十萬八千里啊!!!
這時候,我就在想,「模仿」這種事情,計算機做的比人好太多了,我用計算機來搞一下吧。

首先呢,給萬能的人民幣拍一張照片,然後用程序採集一下圖片信息:

採集的是什麼信息呢?是用網狀點陣,對圖片的明暗程度進行採集。我以這些點為圓心,以明暗程度乘以一個適當的係數做為半徑,來畫圓。那麼結果可想而知,就是好多半徑不同的圓,Duang~:

對,為了高大上一點,我把它調成了紅色的毛爺爺。接下來,是做優化的時候了,這些小圓點現在是行列對齊的,為了讓這些點的分布顯得更自然一些(不那麼容易就看出來是程序生成的),我需要給這些點來一個隨機分布。

紅框內是隨機點陣隨機干擾演算法,來,看一下結果~

嗯,這回好很多,辨識度稍微低一些,不過要增加辨識度,只需要增加點陣密度就好了,或者站在遠處來看。資深一點的程序員都知道,優化是無窮無盡的,所以我這裡就先貼上我優化的第一步,後續有更高級的優化,還會再更新,例如,模擬手繪線條代替圓點等等。

現在看看人民幣上毛爺爺的肖像多麼精美,不僅在於它能買好多吃的,更在於它沒有一筆是多餘的,每一條線的長度和粗細都恰到好處,相信這些線條,也都是經過計算機處理過的。最後,科普一點小知識,你手中毛爺爺的原型,是一張牛逼的手繪:

(劉文西先生手繪,圖侵刪)


我閑時就研究這個
葉飛影 - 博客園

我寫了一個數學圖像生成工具,自己定義一套語言,生成了這些圖像。


用processing生成,裁切成滿意的構圖,然後拼起來。這張是做的效果圖,意思是展覽的時候要這麼掛。


512×512的圖片,每一個像素的顏色都不一樣。

Mathematica代碼(需要 Mathematica 11.1 以上版本):

Table[Image@Partition[a[[Ordering@b]]/2^6, 2^9],
{a, {Tuples[Range[2^6] - 1, 3],
FromDigits[Partition[#, 3], 2] /@ Tuples[{0, 1}, 3*6],
First@HilbertCurve[6, 3]}},
{b, {Tuples[Range[2^9] - 1, 2],
FromDigits[Partition[#, 2], 2] /@ Tuples[{0, 1}, 2*9],
First@HilbertCurve[9, 2]}}]

我覺得這些圖案挺適合製成拼圖的……


【多圖殺貓】

數學裡面一些相當基本的問題映射到平面上都可以產生十分漂亮的圖案。

曾經上電力系統分析課的時候,老師的PPT上出現過一句看起來特別牛逼的話:

近似隨機的結果可以在無隨機的確定性系統中產生

至今我依然無法完全理解這句「牛逼」的話,不過那節課討論的問題我卻還記得很清楚。

為了解決電力系統中的某些問題(學渣我已經不記得是什麼問題了。。或許是潮流計算?),我們那節課討論的是用牛頓迭代法(see:Newton"s method,數值計算的基礎方法之一)求解複數域上的高階方程。為了簡化,我們具體就討論方程 x^4 - 1 = 0 的解。當時老師讓我們課後寫個程序去解(顯然有4個解),並把不同解的收斂域用不同的顏色畫出來。

當然,即便是二維平面也是無窮無盡的,不過好在我們可以清楚地知道方程解大致所在的範圍(當然,這個簡單的方程可以直接看出解……)。所以我當時直接限定了一個矩形範圍,然後枚舉這個範圍內所有的點,作為方程的初始輸入,然後不斷的用牛頓法去迭代,看它收斂到了哪個解,再決定給這個初始輸入點塗上什麼顏色。

值得一提的是,並不是所有的初始點都是會收斂的,所以我們還要限定迭代次數,如果超出這個次數了,解還沒有達到我們想要的精度,則直接把它判定為發散,並且塗上跟所有收斂情況不同的顏色。

最終畫出來了這樣一個奇奇怪怪的圖案:

當然,如果你提高精度和枚舉次數,圖案將更加精細。

什麼?你說不好看?
……好吧,我承認當時電腦性能有限迭代次數不夠,自己也懶得花費時間優化程序、改進配色方案(是的,配色方案,這個很關鍵好么。。)什麼的,所以畫出了這個圖案之後我就沒管了(實際上我還調整了精度再畫了一次)。

但是!儘管我自己畫的不好看,不代表它不可以好看起來!

不信?
看看「別人家的畫」:

(圖片來自百度圖片)

好吧,理想跟現實果然是有差距的。。。T_T (當然,求解的具體方程不同)

不過,我們那節課的討論並沒有僅僅停留在欣賞畫出的畫是多麼好看上。
為什麼這些圖可以這麼好看?
我想關鍵就在收斂域的邊界上。
通過在複平面上畫出收斂域,發現其收斂域在著色之後是一個不斷細分且自相似的神奇圖案,它並沒有確切的邊界(邊界處是不斷細分的自相似),也就是我們常提的分形。

我們此時再回過頭來看老師PPT上牛逼的那句話:近似隨機的結果可以在無隨機的確定性系統中產生。我想,有一種理解應該是這樣:我們本身給定的方程是「無隨機的確定性系統」,沒有任何地方是含糊的,但是對於其解的收斂域的邊界,卻產生了「近似於隨機的結果」(邊界是不確切的、無限細分交織的)。

當時為了在老師面前裝一把逼改善一下學渣的形象(&>_&<),我在作業最後寫下了這樣的結語:

通過這個程序做出來的圖案,可以深切的體會到自然和宇宙的奇妙和偉大。簡單中蘊含著複雜,而往往自然又能輕易的化繁為簡。
宇宙和原子結構的相似性似乎是這種自相似性最好的佐證。

「 近似隨機的結果可以在無隨機的確定性系統中產生」。
上述這句話似乎冥冥中昭示著宇宙的真理。從量子力學的發展,測不準原理、薛定諤的貓、蝴蝶效應等等有意思的發現都可以窺見一二。世界是概率的,每一件事情發生都有其概率性,而事物的相互作用會改變其發生的概率。

以上。

附:
牛頓法求解複數域上x^4-1=0收斂域的程序源碼地址:https://github.com/Maples7/newtonMethod


Ostagram
這幾天Ostagram排隊時間明顯短了,打算嘗試的知友們抓緊機會

圖侵刪


還可以吧?


來強答一個,並不算精美圖形,但是也算比較好玩,適合初學者,大牛就不要笑啦。地址是: https://tour.golang.org/moretypes/18

這個是關於 Go 的官方入門教程,上面是其中的一個小小練習題。這個非常小白,只有藍色一種色調,圖像用一個二維數組表示,數組內元素的取值範圍是 [0, 255],0就是純藍,255就是白色,從0到255藍色逐漸變淺。這裡我們可以使用用數字來填充這個二維數組,就相當於用不同深淺的顏色去填滿這個圖形。

好啦,廢話不多說,大家有興趣可以去使用各種公式來創建各種圖形。貼幾個我的:

只用數組的下標來填充,一個漸變顏色的圖形

橫縱坐標之和。超過255的數值會自動取模,就出現了對角線的大分割。

橫縱坐標乘積。好吧這是什麼鬼。。。

異或。與、或的圖形差不多。

又是個奇怪的圖形

咦咦,好像發現了什麼不得了的東西

畫個圓

來吧,畫個心,要是紅的就好了
好了,數學渣渣也只能完成這樣了。。。貼一下心形的公式出處:Matrix67: The Aha Moments


樓主問得好有水平,一棒子打中所有計算機。

說細一點,集中到通過計算機計算機上最短的代碼產生的最接近自然景物的實時視頻效果,這是剛看到的一個例子:

  • Planet Shadertoy: Shadertoy BETA

網頁自帶源代碼與編譯(GLSL通過WebGL載入),題主可以隨時修改代碼隨時頁面上編譯看效果。

以前聽說許多最短openGL動畫幾十kB產生各種酷炫效果,這次可以看個現場版的並且比openGL更底層直接用顯卡GLSL語言跑的了。GLSL是通過openGL驅動載入字元串著色程序實時編譯來運行的一種顯卡著色器語言。

這個網站來源於這裡 -
怎樣學好 GPU 編程?目前有哪些流行的 shader 語言?有什麼書籍推薦嗎? - Milo Yip 的回答

Shadertoy BETA Browse里有許多(7k+)實現的例子,很多都很精彩可以逛逛。

這裡是ShaderToy最簡短的一點教程,至少告訴了你程序從哪裡開始都可以讀進來些什麼變數,其他的GLSL的語法和C++差不多。
Shadertoy BETA

正巧看到GLProgramming.com的首頁推薦介紹了背景,貼過來存檔:

Shadertoy 03:27:49 06/Nov/2015

www.shadertoy.com

Shadertoy is the first application to allow developers all over the globe to push pixels from code to screen using WebGL since 2009.

This website is the natural evolution of that original idea. On one hand, it has been rebuilt in order to provide the computer graphics developers and hobbyists with a great platform to prototype, experiment, teach, learn, inspire and share their creations with the community. On the other, the expressiveness of the shaders has arisen by allowing different types of inputs such as video, webcam or sound.

要產生視覺效果當然是顯卡計算最高效表現最好。我猜想題主是數學系的想多了解一點怎麼數學的生成各種酷炫效果圖片,但是也不僅限於各種分形什麼的純演算法生成的都感興趣並且想上手試一下。純演算法生成豐富多樣不需要安裝任何工具可以隨時修改測試,ShaderToy看起來是最合適的一個例子。


哈哈,我的頭像就是啊~


這個要答!!!
原創圖片!!
分形花的效果圖

再加一個圖片吧


2017-07 補充

獻醜

在論壇里對那個「用小於等於140個字元分別寫三個函數Red、Green、Blue,生成1024*1024的圖片」 的比賽做了延續,就是人氣不夠 (原帖已經顯示Closed了)
[收集]用三段 140 字元以內的代碼生成一張 1024×1024 的圖片

當然了,要說精美,倒是收藏了一些分形壁紙,希望熟悉的大神可以介紹下有關的演算法和製作方法


推薦閱讀:

TAG:編程 | 計算機 | 代碼 | OpenGL | 美術 | 圖形 | 分形理論 | 繪圖 |