proofread ch07

pull/58/head
tornote 9 years ago
parent cf76aa22ab
commit d2caf1cb1d

@ -1,19 +1,19 @@
## 图形/形状
##### 图形和形状在这里会是有一些习惯上的区别。第二版在校正吧!!!
## 形状
![Alice Hubbard, Providence, United States, ca. 1892. Photo: Zindman/Freemont.](froebel.jpg)
终于我们一直学习的技能就等着这一刻你已经学习过GLSL的大部分基础类型和函数。你一遍又一遍的联系你的造型方程。是时候把他们整合起来了。你就是为了这个挑战而来的!在这一章里,你会学习到如何以一种并行处理方式来画简单的图形。
终于我们一直学习的技能就等着这一刻你已经学习过GLSL的大部分基础类型和函数。你一遍又一遍的练习你的造型方程。是时候把他们整合起来了。你就是为了这个挑战而来的!在这一章里,你会学习到如何以一种并行处理方式来画简单的图形。
### 长方形
想象我们有张数学课上使用的方格纸而我们的作业是画一个正方形。纸的大小是10 * 10而正方形应该是8 * 8. 你会怎么做?
想象我们有张数学课上使用的方格纸而我们的作业是画一个正方形。纸的大小是10 * 10而正方形应该是8 * 8你会怎么做?
![](grid_paper.jpg)
你是不是会涂满除了第一行第一列和最后一行和最后一列的所有格点?
这和着色器有什么关系方格纸上的每个小方形格点就是一个线程一个像素。每个格点有它的位置就想棋盘上的坐标一样。在之前的章节我们将x和y映射到rgb通道并且我们学习了如何将二维边界限制在0和1之间。我们如何用这些来画一个中心点位于示像屏的中心正方形?
这和着色器有什么关系方格纸上的每个小方形格点就是一个线程一个像素。每个格点有它的位置就想棋盘上的坐标一样。在之前的章节我们将x和y映射到rgb通道并且我们学习了如何将二维边界限制在0和1之间。我们如何用这些来画一个中心点位于屏幕中心的正方形?
我们从空间角度来判别的 if 语句伪代码开始。这个原理和我们思考方格纸的策略异曲同工。
@ -44,7 +44,7 @@ void main(){
}
```
step函数会让没每一个小于0.1的像素变成黑色vec30.0并将其与的变成白色vec31.0))。左边和底边的“并行”由逻辑运算符AND完成——当x y都为1.0时返回1.0.这就画了两条黑线,一个在画布的底面另一个在左边。
step函数会让没每一个小于0.1的像素变成黑色vec30.0并将其与的变成白色vec31.0))。```left``` 乘 ```bottom``` 效果相当于逻辑 AND —— 当 x y 都为 1.0 时乘积才能是 1.0。这样做的效果就是画了两条黑线,一个在画布的底边另一个在左边。
![](rect-01.jpg)
@ -59,7 +59,7 @@ step函数会让没每一个小于0.1的像素变成黑色vec30.0
<div class="codeAndCanvas" data="rect-making.frag"></div>
取消21~22行的注释来看看如何转置坐标的同时重复使用step函数。这样二维向量vec2(0.0,0.0)会被变换到右上角。这就是转置页面和重复过程的数字等价。
取消 21~22 行的注释来看看如何转置坐标的同时重复使用 ```step()``` 函数。这样二维向量 vec2(0.0,0.0) 会被变换到右上角。这就是转置页面和重复过程的数字等价。
![](rect-02.jpg)
@ -71,19 +71,19 @@ step函数会让没每一个小于0.1的像素变成黑色vec30.0
color = vec3(bl.x * bl.y * tr.x * tr.y);
```
是不是很有趣?这种都是关于运用step函数、逻辑运算和转置坐标的结合。
是不是很有趣?这种都是关于运用 step() 函数、逻辑运算和转置坐标的结合。
再进行下一个环节之前,挑战下下面的练习:
* 改变长方形的比例和大小。
* 用smoothstep函数代替step函数,试试在相同的代码下会有什么不同。注意通过改变取值,你可以不仅可以得到模糊边界也可以由漂亮的顺滑边界。
* 用 smoothstep() 函数代替 step() 函数,试试在相同的代码下会有什么不同。注意通过改变取值,你可以不仅可以得到模糊边界也可以由漂亮的顺滑边界。
* 应用 floor做个另外的案例。
* 应用 floor() 做个另外的案例。
* 挑个你最喜欢的应用做成函数,这样未来你可以调用它。并且让它灵活高效。
* 挑个你最喜欢的做成函数,这样未来你可以调用它。并且让它灵活高效。
* 写一个只画长方形边的函数。
* 写一个只画长方形边的函数。
* 想一下如何在一个画板上移动并放置不同的长方形?如果你做出来了,试着像[Piet Mondrian](http://en.wikipedia.org/wiki/Piet_Mondrian)一样创作以长方形和色彩的图画。
@ -107,9 +107,9 @@ There are several ways to calculate that distance. The easiest one uses the [```
![](hypotenuse.png)
你可以使用[```distance()```](../glossary/?search=distance), [```length()```](../glossary/?search=length) 或 [```sqrt()```](../glossary/?search=sqrt)到计算显示屏的中心的距离。下面的代码包含着三个函数,毫无悬念的他们返回相同的结果。
你可以使用[```distance()```](../glossary/?search=distance), [```length()```](../glossary/?search=length) 或 [```sqrt()```](../glossary/?search=sqrt)到计算屏的中心的距离。下面的代码包含着三个函数,毫无悬念的他们返回相同的结果。
* 注释和取消注释某行来试试看用不同方式得到相同的结果。
* 注释和取消某行的注释来试试看用不同方式得到相同的结果。
<div class="codeAndCanvas" data="circle-making.frag"></div>
@ -132,7 +132,7 @@ There are several ways to calculate that distance. The easiest one uses the [```
来小试下牛刀:
* 用[```step()```](../glossary/?search=step)函数把所有大于0.5的像素点变成白色并把小于的变成黑色0.0【原文似乎有问题等于0.5呢这就要看step函数的定义了哈哈哈】
* 用[```step()```](../glossary/?search=step)函数把所有大于0.5的像素点变成白色并把小于的变成黑色0.0
* 反转前景色和背景色。
@ -231,8 +231,8 @@ pct = pow(distance(st,vec2(0.4)),distance(st,vec2(0.6)));
* 结合使用 [```min()```](../glossary/?search=min) 和 [```max()```](../glossary/?search=max) 函数混合距离场。
* 选一个几何logo永距离场来衍生生成出一个。用距离场画个自己感兴趣的logo白话
* 用距离场画个自己感兴趣的logo。
恭喜!崎岖一路走来不容易啊休息下让这些概念沉淀一下吧当然不是用简单地用Processing来画些什么。在shader的世界里画图形变得有些别扭而且适应这种新的编程范式编程思维模式会有些精疲力竭
恭喜!你完成了最艰难的部分!休息下让这些概念沉淀一下吧 —— 用Processing 来画简单的形状很容易,但却不到火候。在 shader 的世界里,画形状是很纠结,而且适应这种新的编程范式会有些累人
既然现在你知道了如何画形,我十分肯定你脑袋里已经充满了新的点子。在接下来的章节里你会学习到怎么移动,旋转以及缩放图形。这将使你的创作如虎添翼!
既然现在你知道了如何画形,我十分肯定你脑袋里已经充满了新的点子。在接下来的章节里你会学习到怎么移动,旋转以及缩放图形。这将使你的创作如虎添翼!
Loading…
Cancel
Save