The Artists | Think Like A Coder, Ep 5

譯者: Lilian Chiu 審譯者: Harper Chang

[用程式設計的方式思考]

[地點（上）：八達圍] [地點（下）：198 森林]

[第五集：藝術家]

Dawn and the train are both breaking when Ethic and Hedge arrive in the woods.

當艾希克和海吉搭乘火車 到達樹林時，天剛破曉。

The adventurers have recovered the first artifact—

這兩位冒險家已經取得了 第一件工藝品——

the Node of Power—

力量球，

and have come to the 198forest in search of the second.

現在來到 198 森林尋找第二個。

Here they’re welcomed by the director of the colony, Octavia.

在這裡迎接他們的是 殖民地領導人奧特薇雅。

She established this treehouse sanctuary

在機器人出現讓大家 可以免於工作之後，

after the robots freed everyone from having to work.

她建立了這個樹屋聖所。

It was meant to be a haven where people could follow their passions,

本意是要成為一個避風港， 讓大家能追求自己的熱情，

take up crafts, and find fulfillment.

學習工藝，找到滿足感。

Which they did… at first.

他們也做到了……一開始時。

Some years ago everyone forgot the point.

幾年前，大家忘了重點。

They abandoned arts and crafts

他們拋棄了藝術和工藝，變成只是

and instead just painted and exhibited pictures of themselves

繪製和展示他們自己的圖像，

over, and over, and over.

一而再，再而三。

The location of the second artifact is no secret;

第二件工藝品的所在並不是秘密；

it’s in a tower, guarded by a garrison of bots,

它在一個由機器人 警衛隊看守的塔中，

a bottomless ravine, and who knows what other traps.

那是個不見底的深谷， 天知道還有什麼其他陷阱。

As soon as the tower went up with the node inside,

隨著塔帶著裡面的 力量球向上升起，

human communication across the land went dark.

整片土地上的人類 交通網都陷入黑暗。

Octavia’s been after it for years,

數年來，奧特薇雅都想取得它，

but try as she might, the defenses thwart her.

但她怎麼努力也無法 通過塔的防禦。

In order to even get to the tower, the team will need a distraction.

要到達塔的所在，這個團隊 需要分散對方的注意力。

Octavia has an idea:

奧特薇雅有個點子：

stir up the people through some well-intentioned vandalism.

用善意的破壞行為 來引起大家的騷動。

The residents’ paintings are all squares that come in different sizes,

居民的畫作都是方形的，尺寸不一。

all an odd number of pixels across.

邊長的像素數目都是奇數。

Helper-bots pick up the finished portraits

助手機器人會去取得完成的畫像，

and hang them in public places for everyone to admire.

將它們公開掛出來給大家欣賞。

There’s a slim margin of time when Hedge can access the paintings.

有一個小小的空檔， 海吉可以接觸到那些畫作。

If he were to deface each one with an X,

如果他能把每張畫 都畫上一個大叉叉，

the people would blame the helper-bots,

大家就會怪罪助手機器人，

creating just the distraction the team needs.

就能幫團隊達到 分散注意力的效果。

If only it were so easy.

事實上沒那麼簡單。

Hedge can’t just paint an X—

不能只叫海吉去畫個大叉叉，

his painting processor requires very specific instructions.

他的繪圖處理器需要 非常明確的指令。

Treating the paintings as square grids,

把畫作視為是方形的格子，

he can fill in one pixel, or little square, at a time.

他一次能填滿一個像素 或一個小方格。

He can move forwards and make 90 degree turns over the canvas,

在畫布上，他能向前移動， 也可以做九十度的轉彎，

but can’t move diagonally.

但不能走斜對角。

How does Ethic program Hedge to paint an X over each portrait?

艾希克要如何設定海吉的程式，

才能在每張畫像上 都畫一個大叉叉？

Pause now to figure it out for yourself.

[若你想要嘗試解題，請在此暫停]

[題目規則一、二、三]

Here’s a hint.

提示如下。

Try drawing a square grid like this,

試試看畫一個像這樣的方格，

and simulating Hedge’s path over it.

並模擬海吉在上面的路徑。

What patterns can you find to guide him?

你能找出什麼模式來引導他？

Pause now to figure it out for yourself.

[若你想要嘗試解題，請在此暫停]

The challenge here is to craft a set of instructions

這裡的挑戰，是要 設計出一組指令，

that will work for any square grid.

能夠用在任何方格上。

Fortunately, one of the strengths of programming

幸運的是，寫程式的優點之一

is the flexibility to solve not just one problem,

就是有彈性，可以 不只解一個問題，

but a whole class of them all at once.

同類的問題都能解決。

It often helps to start with one case, and work towards the general.

有個不錯的方式是 先處理一個，再普及到整體。

Let’s say we had this square.

比如，我們有這個方形。

Hedge can measure the length of its sides and store that number as a variable.

海吉可以測量它的邊長， 把這個數字當作變數儲存下來。

Now, what we need is a plan for how Hedge will paint an X,

我們現在需要一個計畫， 規劃海吉要如何畫出大叉叉。

pixel by pixel.

一次畫一個像素。

There’s more than one right answer for how to do this;

要做到這件事， 正確答案不只一個；

let’s look at two.

咱們來看兩種做法。

First, what if Hedge went row by row, like a typewriter?

首先，如果海吉像打字機 一樣逐行進行呢？

If it’s a 9 pixel by 9 pixel painting,

如果一幅畫的長寬都是九像素，

in the first row he’d paint, skip 7, and then paint again.

在第一行，他會先上色， 跳過七格，接著再上色。

In the second row he’d skip the first, paint, skip 5, and paint.

在第二行，他會跳過第一格， 上色，跳過五格，再上色。

And so on.

以此類推。

The pattern here is that for each row the pixels skipped at the beginning

這裡的模式是，每跳到下一行

一開始要跳過的像素 數目就要多一個，

go up by one,

and the pixels skipped in the middle go down by 2.

每行中間要跳過的像素 數目則會少兩個。

Things get more complicated when Hedge reaches the center.

海吉越接近中心時， 情況就會越複雜。

Here there’s a row with just one pixel painted.

在這裡，這一行只要 將一個像素上色。

Then the whole thing reverses—

接著整個模式就會反轉——

the number of pixels skipped goes down by one each time on the left,

每換一行，左側要跳過的 像素數目會少一個，

and up by two each time in the middle.

中間要跳過的像素 數目則會多兩個。

Instructing Hedge to do this with a series of loops will work

用一系列的迴圈可以 指示海吉做到這件事，

and is a perfectly fine solution.

且這個解決方案完全沒問題。

The main drawback is that this requires quite a bit of logic—

主要的缺點是，這個做法 需要相當的邏輯——

knowing what to do in the middle, when to reverse the process,

要知道在中間時該怎麼做、 何時要反轉過程，

and exactly how to reverse it.

以及要如何反轉過程。

So how might we approach this

我們要怎麼在邏輯 不變的情況下做到這件事？

so that the logic remains consistent from start to finish?

The key insight is to look at a grid as a series of concentric squares.

關鍵點在於要把一個方格 視為是一系列的同心方形。

Each square follows the same pattern—

每個方形都遵循同樣的模式——

painted pixels in the corners, and unaltered pixels in between.

將角落的像素上色， 中間的像素則不做改變。

So if we can figure out a way to paint one nested square,

如果我們能想辦法 將角落的方形上色，

transition to the next, and repeat, we can paint them all.

轉換到下一個，再重覆， 就可以全部上色完成。

Painting the outermost one is easy.

將最外面的方形上色很容易。

Start in a corner and paint that pixel.

從一個角落開始， 將那個像素上色。

If we call the length of the painting n,

如果我們把畫作的長度叫做 n，

fly forward n minus 1 spaces.

就是向前飛躍 n 減一格。

Paint another pixel, and turn right.

將那個像素上色，接著向右轉。

Now do the whole thing again… and again.

再把整個過程做一次， 然後再做一次。

Now move forward one less space, turn right, fly forward once,

現在向前進的距離減少一格， 向右轉，向前飛躍一次，

and Hedge will be in the next concentric square

接著海吉就會進入 下一個同心方形，

and ready to repeat the whole process.

準備繼續重覆同樣的流程。

Each square is n minus 2 pixels smaller than the last in length and width,

每一個方形的長寬都會比 上一個方形小 n 減二個像素，

and we can follow this spiral pattern all the way to the center

我們可以循著這個 螺旋模式一路到中心點，

with a loop and a variable that tracks how far Hedge should fly.

只要用一個迴圈和一個變數 來追蹤海吉應該飛躍的距離即可。

Is one of these methods better than the other?

這些方法有高下嗎？ 這就要看你重視什麼了。

It really depends on what you value.

The strength of the spiral is the simplicity of finding a pattern

螺旋法的優點是很容易找到模式，

and reusing the same logic from start to finish.

同樣的邏輯可以 從頭到尾一直重覆使用。

The advantage of the typewriter approach

打字機法的優點在於 它是較一般化的解決方案，

is that it’s a more generalized solution,

meaning it can be adapted much more simply to fill in any pattern.

意思就是，很容易就可以 把它改寫套用在任何模式上。

For Ethic’s sake, either will do just fine.

就艾希克的情況來說， 兩種方法皆可行。

So here’s what happens.

所以，發生的狀況是這樣：

Hedge rapidly defaces all of the portraits.

海吉很快地破壞了所有的畫像。

And within moments

沒多久，整個森林各處 都可以聽見憤怒的吼叫。

cries of anguish break out all over the forest.

The garrison guarding the tower abandon their posts

看守著塔的警衛隊 離開了它們的崗位，

to calm the agitated people,

去安撫激動的民眾，

and Ethic, Hedge, and Octavia slip through—

而艾西克、海吉， 及奧特薇雅便溜過去——

and nearly slip into the depths of the gorge

差一點點滑落 他們和塔之間的深谷。

standing between them and the tower.