The Artists Think Like A Coder Ep 5

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.

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,

fly forward n minus 1 spaces.

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,

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.

Ethic 和 Hedge 到达树林时,黎明和火车都坏了。

冒险者
们已经找回了第一件神器——力量

节点——

并来到 198 森林
寻找第二件。

在这里,他们
受到了殖民地主管 Octavia 的欢迎。

在机器人将每个人都从工作中解放出来之后,她建立了这个树屋避难所

它原本是一个避风港
,人们可以在这里追随自己的激情、

从事手工艺并找到满足感。

他们做了什么……起初。

几年前,每个人都忘记了这一点。

他们放弃了艺术和手工艺

,而是一遍又一遍地绘画和展示
自己的照片

第二件神器的位置
已不是秘密;

它在一座塔里,
被一群机器人守卫着,

一个无底的峡谷
,谁知道还有什么陷阱。

塔内的节点一升起,

整个陆地的人类交流就陷入了黑暗。

Octavia 多年来一直在追寻它,

但无论她怎么努力
,防御措施都会阻挠她。

为了到达塔楼
,团队需要分散注意力。

Octavia 有一个想法:

通过一些善意的破坏行为来煽动人们。

居民的画
都是大小不一的正方形,

都是奇数个像素。

助手机器人
拿起完成的肖像

并将它们挂在公共场所
供大家欣赏。

Hedge 可以访问这些画作的时间很短。

如果他用 X 污损每个人

,人们会责怪辅助机器人,

从而造成
团队需要的分心。

要是这么容易就好了。

Hedge 不能只画一个 X——

他的绘画处理器
需要非常具体的指令。

把这些画当成方格,

他可以一次填充一个像素,
或者一个小方块。

他可以向前移动
并在画布上进行 90 度翻转,

但不能沿对角线移动。

Ethic 如何对 Hedge
进行编程以在每张肖像上画一个 X?

现在停下来自己弄清楚。

这是一个提示。

试着画一个像这样的方形网格,

并模拟 Hedge 在上面的路径。

你能找到什么模式来指导他?

现在停下来自己弄清楚。

这里的挑战
是制定

一套适用于任何方形网格的指令。

幸运的是,
编程的优势之一是

不仅可以灵活地解决一个问题,而且可以同时解决

一整类问题。

它通常有助于从一个案例开始,
然后朝着一般的方向努力。

假设我们有这个广场。

Hedge 可以测量其边长
并将该数字存储为变量。

现在,我们需要的是
Hedge 如何逐像素绘制 X 的计划

如何做到这一点有不止一个正确答案;

让我们看两个。

首先,如果 Hedge
像打字机一样逐行运行会怎样?

如果是 9 x 9 像素的画,

他会在第一行画,
跳过 7,然后再画。

在第二排,他会跳过第一排,
涂刷,跳过 5 排,然后涂刷。

等等。

这里的模式是,对于每一行
,开头跳过的像素

增加 1

,中间跳过的像素
减少 2。

当 Hedge 到达中心时,事情变得更加复杂。

这里有一
排只画了一个像素。

然后整个事情反过来

了——跳过的像素数量
在左边

每次减少 1,在中间每次增加 2。 通过一系列循环

来指示 Hedge 执行此操作
将起作用,

并且是一个非常好的解决方案。

主要缺点是
这需要相当多的逻辑——

知道中间要做什么,什么
时候反转过程,

以及如何反转它。

那么我们如何处理这个问题

,以使逻辑从头到尾保持一致
呢?

关键的见解是将网格
视为一系列同心正方形。

每个正方形都遵循相同的模式——

在角落绘制像素
,在它们之间绘制未改变的像素。

因此,如果我们能找到一种方法
来绘制一个嵌套正方形,

过渡到下一个,然后重复,
我们就可以将它们全部绘制出来。

画最外面的很容易。

从一个角落开始并绘制该像素。

如果我们称这幅画的长度为 n,则

向前飞行 n 减去 1 个空格。

绘制另一个像素,然后右转。

现在再次做整个事情……一次又一次。

现在向前少走一格,
右转,向前飞一次

,Hedge 就会
在下一个同心方格中

,准备重复整个过程。

每个正方形的长度和宽度都比最后一个小 n 减 2 个像素

,我们可以

通过一个循环和一个
跟踪 Hedge 应该飞多远的变量沿着这个螺旋图案一直到中心。

这些方法中的一种是否
比另一种更好?

这真的取决于你看重什么。

螺旋的力量在于
找到模式

并从头到尾重用相同逻辑的简单性

打字机方法的优势

在于它是一种更通用的解决方案,

这意味着它可以
更简单地适应任何模式。

为了 Ethic 的缘故,
两者都可以。

所以这就是发生的事情。

赫奇迅速破坏了
所有的肖像。

片刻之内

,痛苦的叫
喊声就传遍了整个森林。

守卫塔楼的
卫兵放弃了他们的岗位

,让激动的人们平静下来,

而埃西克、赫奇
和奥克塔维亚则溜了进来

——几乎
滑入了

站在他们和塔楼之间的峡谷深处。