僅用5個字元就能繪製複雜圖案！CFR[]繪圖語言紅到連ChatGPT都學會了

只用五個字元，就能完成一幅像素圖畫的繪製了。 

這是一種新的繪圖語言，總共支援8種顏色，畫幅可達256*256。 

它包含了「CFR[]」這五個符號，因此名字也就叫CFR[]了。 

而且CFR[]免費開源，無需安裝，線上就能體驗。

An extremely minimal drawing language consisting of only 5 simple commands: https://t.co/wFGLJwKwWN

More information here: https://t.co/YZuEqxS4d9#programming#graphicspic.twitter.com/9wDf7nJ7e8

— Susam (@susam) October 19, 2023

雖然只有5個符號，但它能繪製出的圖像可並不簡單，例如作者展示的這個DEMO：

CFR[]推出之後，在Reddit和The Hacker News上都引發了熱烈討論，網友們也紛紛貼出了自己的作品：

網友看了這些展示以後，都覺得這真的太酷了。 

那麼，這五個符號各自代表了什麼意義，又該如何使用呢？ 

五個字元就能繪圖

前面已經說到，這個繪圖語言包含了「C」「F」「R」「[」和「]」這五個字元。 

直覺的不只是名字，這幾個符號本身也是直觀的英文首字母，它們的意義和用法是這樣的： 

C代表color，用來切換顏色，支援的顏色總共有八種，依序為黑、藍、綠、藍綠（Cyan）、紅、品紅（Magenta）、黃、白。

▲ 最左邊看起來像灰色的其實是白色

若不輸入C指令則預設為白色（畫布為黑色），其他顏色則輸入對應數量的C。 

F則代表Forward，每輸入一個F指令都會向前前進（繪製）出一個點（初始方向向上）。 

R則是Rotate的首字母，也就是旋轉，每一個R指令會使前進方向順時針旋轉45度。

有了上面這三個指令，就已經可以拿來畫一些簡單的圖了。 

不過這個工具一次最多輸入256個字元，所以只靠這些基本指令還沒辦法畫得太複雜。 

沒關係，我們還有兩個符號—「[」和「]」。 

這兩個符號是成對使用的，用來表示循環結構。 

假如我們要畫一條長度為32的線，直接輸入32個F顯然太麻煩了。 

利用循環結構，我們就可以把它化簡[[[FFFF]]]。

在這樣一個結構中，紅色部分的FFFF會因為綠色括號的存在而被執行兩次。 

同理，藍色括號是把整個綠色括號執行兩次，黑色則是執行兩次藍色，最後就畫出了長度為2×[2×(2×4)]=32的線。 

為了更好地了解循環的執行方式，我們來對比看看這兩個命令：

它們所畫出的效果分別是這樣的：

還是同樣的道理，綠色括號中的內容，即第一個指令中CF（這部分的一串F將用一個字母代替）首先重複一次形成最內部的循環體(CFCF)，然後再經兩次循環得到[(CFCF)(CFCF)]和{[(CFCF)(CFCF)]}，其間顏色一共發生了8次變化。 

而第二組指令中，F先被綠色括號變成(FF)，這樣藍色括號中的內容就是C(FF)，重複後得到[C(FF)C(FF)]，最後被黑色括號變成{[C(FF)C(FF)][C(FF)C(FF)]}，總共涉及四次顏色變化，且每一個色條的長度都是第一個指令的兩倍。 

理解了這樣的循環方式之後，我們就可以繪製各種複雜的圖形了，例如作者展示的這組條帶（相對於CFR的像素繪圖方式，它只是看起來簡單）：

它是由上圖所示的指令繪製而成，如果進行拆解的話是長這樣的： 

如果展開則是這樣的形式：{256個F-RRFRRRRRRR}循環32次然後加C作為新的循環體循環8次。 

至於更複雜的圖案，可能就需要豐富的想像力和邏輯運算能力了。 

不過我們也試了試把這種新語言教給ChatGPT，前面的對話大概是給它介紹規則以及試著畫了一個藍色正方形。

ChatGPT瞭解CFR[]的一部分規則，不過對於循環，它似乎還沒完全理解。 

下圖中ChatGPT給的指令雖然是正確的，但還不是最簡形式。

又經歷了一輪「調校」之後，ChatGPT成功寫出了最簡形式的正方形指令。

需要說明的是，CFR[]繪製的影像必須是連續的，如果有斷點則無法完成想要的效果。

不過，ChatGPT只能畫一些簡單圖形，想要做到作者和網友們展示的範例還是有點困難的。 

那麼，CFR[]又是如何做的呢？ 

「畫板後藏著一隻烏龜」

作者介紹，他是受到了教育程式語言Logo程式語言P′′的啟發。 

這裡的Logo不是一般指的商標，而是希臘文的「文字」或「思考」、「想法」。 

這是MIT在LISP的基礎之上專門為兒童開發的一種模組化語言，具有豐富的繪圖功能。

▲ CFRS[] 的靈感來自教育性程式語言 Logo 和奇特的程式語言 P′′ (P double prime) 的啟發。受到 Logo 的啟發，CFRS[] 有一隻虛擬的烏龜在圖形畫布上移動，並在移動時在畫布上繪製。受到 P′′ 的啟發，它擁有一套非常小的指令集。CFRS[] 故意被設計為難以寫入和讀取。 此專案介紹了 CFRS[] 語言，並提供使用 HTML5 Canvas 和 JavaScript 的基於網頁的實現。

而它的Web介面，則是利用Canvas和JavaScript來完成的。 

作者說，在介面中256*256的畫布背後「隱藏著一隻烏龜」，它包含了位置、顏色和方向三個參數。 

值得一提的是，Logo語言的圖表也是一隻小烏龜。 

這隻烏龜的初始位置是畫布正中，方向向上，顏色為白色。 

當收到使用者的指令時，這隻「烏龜」就會按照使用者要求的方向和距離移動，並留下對應顏色的痕跡。 

想要體驗一下的網友，可以自己親自試試。

▲ CFR[]網址：https:// susam.net/cfr.html

GitHub專案網頁：

• https:// github.com/susam/cfr