标 题: 色块图绘制思维
发信站: 水木社区 (Sat Mar 2 19:37:27 2013), 站内
其实色块的绘制比起线条要简单，
特别是在于弧度的呈现，
复杂的地方主要是前景与背景色的交互运用，
而线条只会使用到前景色而已。
例如像这样的弧度：
▁
_▁,-`▔ ▔`-,▁_
▄▅▆▇█▇▆▅▄
色块可以轻松完成，线条则必须比对与寻找适合高度的字符，
而且较难达到平滑的表现。
色块更进一步精致的话，就必须像这样运用背景色：
▁▂▃▂▁
▅▂▄▆▇▆▄▂▅
可以得到较细的粗线条，缺点则是有时占用的空间会变多，
而且线条可以运用单字节字符，色块则全都是双字节。
至于为什么大家会觉得色块不容易学习，
应该是因为色块在绘制上不如线条那样直观，
前景和背景色的变换是其一，
另一个原因则在于字符表排列方式。
lstar 兄曾经传给我 GB 码的字符表，
里面在色块方面的排列大致如下，我后来检查了一下AE，
方式大致也是一样：
▏ ▁
▎ ▂
▍ ▃
▌ ▄
▋ ▅ ◢◣
▊ ▆ ◥◤
▉ ▇
几乎都是以直行的方式排列。
如果是这种竖直的色块 ▎还好，水平式的色块就会有所影响了，
这里我会建议将色块重新排列组合，
在绘制时可以提高思维与使用的效率。
像这样：
▁▂▃▄▅▆▇█▇▆▅▄▃▂▁
▏▎▍▌▋▊▉█ ◤◢ ◣◥
并且有些色块重复一次，尤其是水平式色块。
再来，详细说明一下如此排列的好处，
下面标注了号码，方便大家辨识：
▁▂▃▄▅▆▇█▇▆▅▄▃▂▁
1 2 3 4 5 6 7 8 7 6 5 4 3 2 1
为什么要重复一次？
请大家想一想，如果要画左下到右上的倾斜度，
是不是直接复制左半边的色块(1~8)即可呢？
反之亦然，左上到右下的斜度也只要直接复制右半边(8~1)。
大家可能会想，AE 里的字符表都是直接点击的，
没什么差异，反过来点不就好了吗？
但是有一个符合的倾斜度摆在眼前是有助于绘制思维的，
只要直接将它搬过去就行了，唯有复制黏贴比较麻烦点，
但如果已经建立好概念，不用这样做也行的。
更进一步的，来说明一下倾斜度是怎么调整的，
如果要更陡俏的斜度，只要跳着选号就可以了。
┌──────────────┐┌──────────────┐
│ 左 ││ 右 │
├──────────────┤├──────────────┤
│ ▁▂▃▄▅▆▇█ ││ █▇▆▅▄▃▂▁ │
│ 1 2 3 4 5 6 7 8 ││ 8 7 6 5 4 3 2 1 │
├──────────────┤├──────────────┤
│ ▁▃▅▇ ▂▄▆ ││ ▇▅▃▁ █▅▂ │
│ 1 3 5 7 2 4 6 ││ 7 5 3 1 8 5 2 │
├──────────────┤├──────────────┤
│ ▂2 ▁▃▅▇││ ▆▄▂ │
│▁▄▇█ ▁▃▅▇1 3 5 7 ││ 6 4 2 ▇▅▃▁ │
│1 4 7 8 1 3 5 7 ││ 7 5 3 1 │
└──────────────┘└──────────────┘
当然使用上是不需标上号码，只要了解思维方式即可，这边只是强化印象，
大家也可以整理出适合自己且常用的色块字符表。
竖直色块也是一样的，原本的直行式排列有其好处，如上面那样，
而改成水平排列则有助于间隔的思维，通常是用来调整描绘线条的粗细。
▏▎▍▌▋▊▉█
1 2 3 4 5 6 7 8
但是竖直色块的前景与背景色运用就比较频繁了，
搭配上比较接近组合式概念。
重要的地方在于 4 号 ▌这个分水岭，视觉上恰好占了一个单字节的宽度，
其实绘制上需要用到的机会非常少，除非要画高亮，或节省代码，
不然只要直接用背景色去填就可以了。(8 号 █ 则是双字节全满)
称它为分水岭，有一个更重要的思维，也就是相对观念。
这边也要将竖直式色块分组，类似上面水平式色块，但不需重复，
左 中 右
▋▊▉ ▌ ▏▎▍
5 6 7 4 1 2 3
为什么要这样放是有意义的，后面会说明。
然后是两两视为一组：
┌────┐┌────┐┌────┐
│ ▋ ▍ ││ ▊ ▎ ││ ▉ ▏ │
│ 5 3 ││ 6 2 ││ 7 1 │
└────┘└────┘└────┘
但此处的一组并不是要绑在一起使用的意思，
而是 5、6、7 号会很容易使用到背景色。
例如：7号 ▉，前景与背景颜色交替的时候→ ▉，
出现的情况和 1号 ▏是一样的。
也就是请把 5号视为线条3，然后 6号视为线条2，还有 7号视为线条1，
反过来也是。
这样有什么好处呢？
很多人在绘制色块时，不知道前景色和背景色运用诀窍，
所以很容易就画的不细致，大多将色块只当成前景色去填。
有了这个概念，就是开始色块挪移的基础了，
比如说，我们需要一个 3号 ▍宽度的线条，
除了直接使用 3号之外，为了前后或上下的弧度需要错开，
有时空间不允许而需要做调整，
我们就可以用 7号 ▉(背景)=1＋2号 ▎(前景)，
或是 6号 ▊(背景)=2＋1号 ▏(前景)，
两者在视觉上呈现出来的粗细都和 3号是一样的。
接着，是更进一步的诀窍。
▋▊▉ ＝ ▏▎▍
5 6 7 1 2 3
这边小心别被编号给迷惑了，可能会看得混乱，只要注意色块宽度就可以。
为什么要说 567 = 123 呢？
因为 5号 ▋可以代换成一个单字节空格[Space]，加上 1号 ▏，其他类推。
和 4号对比一下就知道： ▋ (5号) ▊ (6号) ▉ (7号)
▌ (4号) ▌ (4号) ▌ (4号)
▏(1号) ▎(2号) ▍(3号)
↑ ↑ ↑
如何，是否一目了然呢？空间的挪移便由此而生。
假设目前有一处使用了 6号 ▊色块，在它左侧需要一点空间，
也许刚好只差了一个单字节的空间，那么我们就可以用一个[Space]+2号 ▎来代替，
如此左侧就获得了使用的空间。
当然这样就必须向 6号的右侧占用一个单字节空间，
这个就是要机动调整的地方了，有时是左侧需要但右侧刚好空着，挪过去也无妨。
然后，反过来也是，
也许我们用了 2号 ▎，在它右侧需要一小格空间，但又不希望色块的位置跑掉，
那么就可以向左要求一个单字节空间，并将 2号 ▎色块改成 6号 ▊色块，
右侧就空出来了。
但通常不太这么顺心如意，可能经常会觉得左支右绌。
那就只能继续向隔壁的隔壁借空间，
可以想像成一间屋子(满屏)，里面有许多房间(双字节空间)，
这个房间东西放不下了，就得放到隔壁房去，
不过隔壁房也满了，那就只能先把隔壁房整理一下腾出空间，才能把东西放过去。
(不过挪移的考虑只要看单一层楼[单一行内]即可)
这个多少是需要一点练习的，少有人天生就是整理高手，
这边仅能提供一下整理的方法，也就是思惟方式，
希望能对想学习的人有些帮助。
Title: Thinking about color block diagram drawing
Sending station: Shuimu Community Sat Mar 2 19:37:27 2013 , within the station
In fact, drawing color blocks is simpler than drawing lines
Especially the presentation of arcs
The complexity lies mainly in the interactive use of foreground and background colors.
The lines will only use the foreground color.
For example, a curvature like this
, ,
Color blocks can be easily completed, but lines must be compared and found to match the height of the characters.
And it is more difficult to achieve smooth performance
If the color block is more refined, the background color must be used like this
You can get thinner thick lines. The disadvantage is that it sometimes takes up more space.
Moreover, lines can use single-byte characters, while color blocks are all double-byte characters.
As for why people think color blocks are not easy to learn
It should be because color blocks are not as intuitive to draw as lines
The transformation of foreground and background colors is one of
Another reason lies in the arrangement of the character table
Brother lstar once sent me the character table of GB code
The arrangement of color blocks inside is roughly as follows. I checked AE later.
The method is roughly the same
Almost always arranged in a straight line
It would be fine if it were a vertical color block, but it would have some effect on the horizontal color block.
Here I would suggest rearranging and combining the color blocks
It can improve the efficiency of thinking and use when drawing.
like this
And some color blocks are repeated once, especially the horizontal color blocks
Next, let’s explain in detail the benefits of this arrangement.
The numbers are marked below for easy identification.
1 2 3 4 5 6 7 8 7 6 5 4 3 2 1
Why repeat it?
Please think about it if you want to draw a slope from lower left to upper right
Can I just copy the color block 1 8 on the left half?
Vice versa, the slope from upper left to lower right only needs to be copied directly to the right half 8 1
You may think that the character table in AE is directly clickable.
There's no difference. Couldn't we just do it the other way around?
But having a suitable inclination in front of you is helpful for drawing your thinking.
Just move it over directly. Only copying and pasting is more troublesome.
But if you have already established a good concept, you don’t need to do this.
Let’s take a closer look at how to adjust the inclination.
If you want a steeper slope, just jump and select numbers.
about
1 2 3 4 5 6 7 8 8 7 6 5 4 3 2 1
1 3 5 7 2 4 6 7 5 3 1 8 5 2
2
1 3 5 7 6 4 2
1 4 7 8 1 3 5 7 7 5 3 1
Of course, there is no need to put a number on it when using it, as long as you understand the way of thinking, this is just to strengthen the impression.
You can also sort out a color block character table that suits you and is commonly used.
The same goes for vertical color blocks. The original straight-line arrangement has its benefits, as shown above.
Changing the arrangement to a horizontal arrangement helps with the idea of intervals. It is usually used to adjust the thickness of the drawn lines.
1 2 3 4 5 6 7 8
However, the foreground and background colors of vertical color blocks are used more frequently.
The combination is closer to the concept of combination
The important thing is that the watershed number 4 visually occupies a single byte width.
In fact, there are very few opportunities to use it in drawing, unless you want to draw highlights or save code.
Otherwise, just use the background color to fill it in directly. Number 8 is full of double bytes.
Call it a watershed. There is a more important thinking, which is the relative concept.
The vertical color blocks should also be grouped here, similar to the horizontal color blocks above, but there is no need to repeat them.
left middle right
5 6 7 4 1 2 3
Why it makes sense to put it this way will be explained later.
Then the two are treated as a group
5 3 6 2 7 1
But the group here does not mean to be tied together and used together.
But No. 5 6 7 will be easy to use the background color
For example, No. 7, when the foreground and background colors alternate
The situation is the same as No. 1
That is, please consider No. 5 as line 3, then No. 6 as line 2, and No. 7 as line 1.
Vice versa
What's the benefit of this?
Many people don’t know how to use foreground and background colors when drawing color blocks.
Therefore, it is easy to draw without detail. Most of the time, the color blocks are only used as foreground colors to fill in.
With this concept, it is the basis for starting the color block shifting.
For example, we need a line with width 3
In addition to using No. 3 directly, it needs to be staggered for the front and rear or up and down arcs.
Sometimes space does not allow and adjustments need to be made
We can use No. 7 as background and No. 2 as foreground.
Or No. 6 background 2 No. 1 foreground
The visual thickness of both is the same as No. 3
Then there are further tips
5 6 7 1 2 3
Be careful not to be confused by the numbers here. It may be confusing. Just pay attention to the width of the color block.
Why do you say 567 123?
Because No. 5 can be replaced by a single-byte space [Space] plus No. 1 and so on.
Compare it with No. 4 and you will know No. 5, No. 6, No. 7
No. 4 No. 4 No. 4
No. 1 No. 2 No. 3
How? Is it clear at a glance? This is how the movement of space arises.
Suppose there is currently a spot where color block No. 6 is used and a little space is needed on the left side of it.
Maybe there is just a single-byte space difference, so we can use a [Space] No. 2 instead.
In this way, the left side gets the space to use
Of course, this requires occupying a single byte space to the right of number 6
This is where you need to maneuver and adjust. Sometimes the left side is needed but the right side happens to be empty. It doesn't hurt to move over there.
And vice versa
Maybe we used No. 2. We need a small space on the right side of it, but we don’t want the color block to move away.
Then you can request a single-byte space to the left and change color block No. 2 to color block No. 6
The right side is empty
But it’s usually not so smooth. You may often feel overwhelmed.
Then we can only continue to borrow space from the neighbor next door.
It can be imagined as a room full of screens with many rooms and double-byte space.
If we can't put anything in this room, we have to put it in the next room.
But the room next door is also full, so we have to tidy up the room next door to make space before we can put things there.
However, when considering moving, you only need to look at a single floor [within a single row]
This requires a bit of practice. Few people are born to be masters of organization.
Here I can only provide some sorting methods, that is, ways of thinking.
I hope it can be of some help to those who want to learn
