幀幻象——一步與半步

來自專欄 演算法藝術實驗室

作者：榴槤

備註：AALab話嘮級學員，但是寫起文章來認真思考程度和話嘮程度成正比

幀幻象是這些題目中我感覺比較容易理解的，在運動與否的問題中，它側重於討論人類感官的極限。

何為真實？

眼見為實。

而對於答案的追尋者，人類來說，主要的問題在於，人眼是否能見「真實」？

人類進化出了五種感官：眼——視覺；耳——聽覺；口——味覺；鼻——味覺；皮膚——觸覺。

人們通過五種感官建立起了一套擁有五個維度的感知系統來觀察世界，就像三維中還有更高的維度，這個世界的形狀也並非人類五種感官就能完全覆蓋。

而且人類在這五種感官維度中的區間也是有極限的。

人眼中的視錐細胞只能感受到三種顏色（三原色），而螳螂蝦（皮皮蝦）的視錐細胞能夠感受到十六種顏色。

就好像普通人難以理解四維空間一樣，人們也難以想像擁有16種原色的世界，但是唯一可以確定的是無論怎麼樣，天空還是那個天空，雲彩還是那個雲彩，只是我們和螳螂蝦觀察的角度不同。

而在幀幻象中，它將帶領我們深入人類視神經反應速度的極限，以此來探索人眼究竟能見到何種程度的「真實」。

在觀察幀幻象之前，首先要再次討論一下「運動的真相」的問題，從另一個角度來討論一下。

一般意義上，在現實中，我們將一個球從左邊移到右邊，這個球在我們看來是確確實實在運動的，但是在屏幕上，一個圓從左邊移動到右邊卻並不是真正的「運動」，而是通過人眼的視覺暫留效應，將一系列連續而靜止的圖像快速顯示而造成的「假象」，你也可以說這是「幻象」，這也確實是一個「幻象」，因為它欺騙了你，讓你誤以為小球是運動的，但其實並不是。

這一系列連續圖像中的每一幅圖像我們稱之為「幀」，這個過程可以用代碼簡單而直觀地描述出來，這也是我為什麼喜歡程序語言的原因，它在文學創作上可能沒有自然語言那麼得心應手，但是在描述一些抽象事物上卻有獨到之處。

int x=0;int y=50;void setup(){size(100,100);}void draw(){background(20);x++;ellipse(x,y,10,10);}

在代碼中你可以看到圓和它的背景是被不斷創建的，以極快的速度，飛快地沿著設定的運動軌跡一幀一幀地繪製新圖，覆蓋舊圖，開始的圓（原始圓）在代碼運行第一次之後就被覆蓋在重重新圓之下了。

而現實中真實的運動里，原始的球在運動開始的一刻是那個原始的球，在運動的任意一刻也都是運動開始時的那個原始球。

這是屏幕中的「運動」與真實的「運動」的一個區別。

然而這個區別對於人眼來說實在是太微妙了，以至於欺騙人眼製造運動的幻象只需要做到這樣兩點：

1、圓的運動軌跡要自然，要符合大腦的「思維定勢」；

2、每秒的幀數一定要足夠多，越多越好；

總結下來就是，現實里的運動，再真實，再實在，它在人眼中也不過是一幀幀靜止的圖像，每秒的幀數取決於個人視神經的反應速度。

但是一般來說，每秒24幀就基本能夠造成運動的幻象了，當然還是那句話，多多益善。

洛夫克拉夫特說：

人的一生不過是大腦中存儲的一系列圖片，在這些圖片中，無論是真實發生過的，還是夢境中出現的，對人腦來說其實都沒有區別。

在某種程度上來看，似乎確實如此。

在幀幻象中，這種運動軌跡與圖案被精心設計過了。

1、幀幻象的主體圖案是由12組相同的元素組成的；2、這12組元素均勻地排布，我們可以得出每組元素間的角度間隔為30°；3、主體圖案做自轉

為了進行研究，我們製造了兩種觀察工具：

4、一個變速桿，可以控制自轉速度，刻度為-30°到30°；

5、一個同位素示蹤儀，通過這個機器可以給特定元素打上標記。

因為觀察工具的介入，幀幻象不再是一個迷惑人的幻象，相反，它成為了一個研究對象。

在這裡需要注意的是，processing中默認幀率是60，也就是說在默認情況下，主體代碼每秒運行六十次，這也就是說變速桿可以將自轉速度控制在-30°/(1/60)s到30°/(1/60)s之間。

在初始狀態下，速度為0°/(1/60)s，所以主體圖案保持靜止，隨著條件4，變速桿的拖動，圖案的自轉速度漸漸變快，也就是說每一幀圖案的自轉的角度慢慢變大，當變速桿拖到最大速度時，每一幀都會自轉30°，由於條件1，讓你沒有參照物，加上條件2，使得整個圖案自轉30°後的樣子就和沒轉一樣，又因為你眼睛看到的東西都是按幀來的，而每一幀就跟沒有運動過的原始狀態一樣，兩個條件結合，所以這就導致了每一幀的圖案都是一模一樣的，進而導致在每幀自轉30°的情況下你看到的圖像好像靜止了一樣。

但是這一次，我們不會像上一章圖斯幻象那樣再被欺騙了，我們引入了新的觀察工具。

使用條件5，同位素示蹤儀，我們可以為其中一組元素打上標記，從而破壞條件1，得到了一個參照物，在最高速下我們可以看到被打上標記的那一組元素在閃爍。

這種閃爍其實就是主題圖案在高速旋轉下所產生的效果。

運動與靜止的幻象瞬間就被破壞了。

是動是靜，最終揭曉答案的還是親自實踐。

因為速度足夠快，人眼視神經跟不上反應，雖然標記組是在旋轉，但是卻好像無處不在，這種現象讓我想起了《三體》中對智子的描寫，因為智子速度接近光速，所以一個智子可以以光速進行多線程操作，這使得智子好像會分身術，能夠同時出現在很多個地方！

若沒有示蹤儀，光是憑藉肉眼，確實難以分辨到底是動還是靜。

這讓我想到了一個著名的「空地上的奶牛的問題」，這個問題是這樣的：

一個農民擔心自己的獲獎的奶牛走丟了。這時送奶工到了農場，他告訴農民不要擔心，因為他看到那頭奶牛在附近的一塊空地上。雖然農民很相信送奶工，但他還是親自看了看，他看到了熟悉的黑白相間的形狀並感到很滿意。過了一會，送奶工到那塊空地上再次確認。那頭奶牛確實在那，但它躲在樹林里，而且空地上還有一大張黑白相間的紙纏在樹上，很明顯，農民把這張紙錯當成自己的奶牛了。於是問題出現了，雖然奶牛一直都在空地上，但農民說自己知道奶牛在空地上時是否正確？

這個問題放在幀幻象中同樣適用，你打開了processing，運行了幀幻象的代碼後下樓去便利店買了瓶可樂，而你的室友趁你不在，悄悄將變速桿拉到最大，你上樓後站在門口瞄了一眼電腦（當然你忽略了細細的變速桿），看到圖案和速度為0的初始狀態一樣保持「靜止」，沒有人動你的電腦，你站在門口盯著屏幕直到喝完可樂，你的室友看你回來了，趁你喝完可樂轉身把空瓶子丟向垃圾桶的時候趕緊又將變速桿撥回了初始狀態。於是問題出現了，雖然圖案一直是「靜止」的，但是你說你看見圖案是「靜止」時，這句話是真是假？

這個問題被稱作「蓋梯爾問題」，該問題還有無數變種。

我認為圖斯幻象與幀幻象都可以作為蓋梯爾問題的另一種表現形式，至於「蓋梯爾問題」本身，那又是一個複雜的內容。

何為真實？

眼見的，部分為實，而唯有實踐才能出真知。

直接實現視頻中的效果不難，有意思的地方在於製造工具，我這個效果主要使用了這樣幾個不錯的函數：

mouseDragged()

mousePressed()

pow()

degrees()

constrain()

antan2()

void setup() { size(600, 600); smooth();}float angle=0;float dragX,dragY;float theta=0;void draw() {background(250, 100, 200); translate(width/2, height/2); strokeWeight(4); noFill();stroke(255);arc(0,0,140,140,radians(-120),radians(-60)); strokeWeight(2); float angle=constrain(atan2(dragY,dragX),2/3*PI-2*(PI/3),-(PI/3)); float deg=map(degrees(angle),-120,-60,-30,30); println(deg); rotate(angle); line(0,0,70,0); float thetaV=deg;theta=theta+thetaV; pushMatrix(); noStroke(); rotate(radians(theta)); for (int i=0; i<=375; i+=30) { fill(255); ellipse(100*cos(radians(i+0)), 100*sin(radians(i)), 10, 10); ellipse(120*cos(radians(i+15)), 120*sin(radians(i+15)), 15, 15); ellipse(150*cos(radians(i)), 150*sin(radians(i)), 20, 20); ellipse(190*cos(radians(i+15)), 190*sin(radians(i+15)), 25, 25); ellipse(240*cos(radians(i)), 240*sin(radians(i)), 30, 30); } if((pow((mouseX-300),2)+pow((mouseY-300),2)<pow(15,2))){ fill(57, 197, 187); ellipse(100*cos(radians(0)), 100*sin(radians(0)), 10, 10); ellipse(120*cos(radians(0+15)), 120*sin(radians(0+15)), 15, 15); ellipse(150*cos(radians(0+30)), 150*sin(radians(0+30)), 20, 20); ellipse(190*cos(radians(0+45)), 190*sin(radians(0+45)), 25, 25); ellipse(240*cos(radians(60)), 240*sin(radians(60)), 30, 30); }else{ fill(255); } ellipse(0,0,30,30); popMatrix();}int flag=1;void mousePressed(){ flag=flag*-1;}void mouseDragged(){dragX=mouseX-300;dragY=mouseY-300;}

——