（1）Processing初接触

编程？

提起「编程」二字，很多人脑中会冒出这些词。高端？烧脑？难学？…最终的结论是……不适合我。

少数想接触它的人，在看到厚厚的教科书以及一堆枯燥的术语之后，便会心生恐惧，望而却步。

极少数的人，凭自己的悟性也好，韧劲也罢。最终跨进了编程的大门，在里面肆意玩耍。

希望通过这个系列指南，能扫除大家对“编程”的刻板影响，一路玩转编程。这不仅仅适合设计师阅读，相信任何一个想了解编程的人都能通过它迅速入门。

设计师为什么学编程？

设计师可以说是灵感泛滥的物种之一，脑袋里往往装着各式天马行空的想法。通过学习绘画，我们就比常人多了一种洞察事物本质的能力。

这种能力让我们对造型和色彩更加敏感，可以轻易地看见常人忽略的细节，可以捕捉日常生活中精彩的画面瞬间。

可是，仅仅用画笔和绘图软件来展示自己脑中的构想还是有些局限。你应该多掌握一门魔法般的技能，那就是编程。

它可以让你从另一个维度认识世界，不再是感观层面，而是回归到图像的源头——数据。

你可以最直观地了解图像的生成原理，是什么构成了色彩？又是什么产生了造型？各种图形处理的过程，数据发生了哪些变化？

在深入接触的过程中，你还可以了解万事万物的运行原理，创造各种粒子系统，模拟各种自然现象。

在程序世界中，你就是造物主。想尽快体验这种创造的快感？那赶紧往下看吧～～我已经迫不及待想向你展示程序之美了。

编程是什么？

编程到底是什么？它的最终目的，就是让计算机解决某个问题。如果我们想让计算机理解指令，就得掌握编程语言。

编程语言还不止一种，它有自身的一个演化过程——机器语言，汇编语言，再到高级语言。语言的发展，其实是由一批批懒人做出的贡献。正如FORTRAN的设计者John Backus所言：我的大部分成果源自我的懒惰。因为我不喜欢写程序，所以我设计出了能轻松编写程序的系统。

在这样一批懒人的推动下，语言就越变越“高级”，也越来越接近人话（自然语言）。未来肯定会存在这样一个场景，你只需要向计算机描述一个问题，它便能瞬间理解你的意思，自动生成程序并迅速解决。

想象很美好，但在有生之年，估计还无法见证这个时刻。所以处于2015的我们，还是需要老老实实学一门编程语言。

在学习的同时，我们也需要向前辈们的偷懒精神致敬。尽量发挥计算机自身的优势，让它自动化地解决问题。

选择哪种语言入门

编程语言有上百种，在这里，我向你隆重推荐Processing。
它可能不是现阶段最主流的，但却是最适合入门的，特别是设计师。

优点如下：

•它能让你建立起创作者的思维。编程技术作为辅助手段，图形创作是最终目的。可以让你不要一味地钻进技术的海洋。

•语法简练，短小精悍。可以用很少的代码写出很棒的效果，极易获得反馈。

•当你接触编程概念的时候，过往抽象的逻辑，符号，知识点。都像重生一般，会以一种鲜活的视觉形式呈现出来，十分适合视觉系的设计师。

•编写绘图，动画，交互程序十分简单，可以整合各种音频视频文件，输出属于自己的作品。

如果你是视觉控，是geek，那一定会对它爱不释手。

PROCESSING可以做什么？

Processing诞生于鼎鼎大名的MIT MEDIA LAB。它最擅长创作图像，无论是静态或是动态，二维或是三维。既能做游戏，也能写音乐。

当某一天，你嫌photoshop提供的功能还不够强大，无法实现自己想要的效果，你完全可以自己写一个笔刷，写一个滤镜，对图片进行像素级别的操控。

下面的这些作品，就出自Processing之手。

Dave Whyte作品:

视频作品:

(Quayola)

体验

在开始之前，我们先到Processing官网下载安装包 [ https://processing.org/download/ ] 选择 No Donation，再点击download，即可免费下载。

若想支持Processing Foundation，可以考虑适当地捐赠。正因为两位创始人有开源的胸襟，才使我们能免费使用到这么棒的工具。

准备工作完毕。我们先动动手。把下面的代码复制到程序中。

float angle, a;
int circleW;
void setup(){
size(700, 400);
circleW = 3; //控制圆形节点的大小
}
void draw(){
background(0);
stroke(255);
a = 45; //控制树形的分叉角度
angle = radians(a);
translate(width/2, height);
line(0, 0, 0, -120);
translate(0, -120);
branch(130);
}
void branch(float h){
h *= 0.6;
if (h > 2){
pushMatrix();
rotate(angle);
line(0, 0, 0, -h);
ellipse(0, -h, circleW, circleW);
translate(0, -h);
branch(h);
popMatrix();
pushMatrix();
rotate(-angle);
line(0, 0, 0, -h);
ellipse(0, -h, circleW, circleW);
translate(0, -h);
branch(h);
popMatrix();
}
}

接着点击左上方的三角符号运行试试看。

（＊若中文注释在程序中无法正常显示，可以在preference-Editor and Console font中，选择字体Andale Mono）

最终，它会生成这样的图案。

这段程序用到了很著名的递归函数。现在看不懂没有关系，我们可以试着改变上面的一些数值，比如将“ a = 45 ”中的“ 45 ”改成“ 90 ”试试。

图像发生变化了！

这还不是最酷炫的效果。试着将变量值替换成一个神奇的参数mouseX（末尾字母大写），写成“a = mouseX”。

当你左右移动，图像就会产生动态的变化。

有没有感受到无法言喻的秩序之美？参数mouseX的作用是实时地获取鼠标的X坐标。所以只要左右移动鼠标，即可实时地改变数据，从而改变图形形状。

在这个程序中，定义的屏幕宽度是700。所以mouseX的数值变化范围就是0到700。鼠标移到最左为零，最右为700。

代码”a = mouseX”中的a，被称为变量。这个概念也可以先不去深究，这里的a是用来控制分叉的角度。如果我们觉得这个数值变化范围太大了，可以给它除以一个数值。改成“a＝mouseX/10”试试看。此时a的数值范围也就变成了0到70。与原来相比，在屏幕上移动同样的距离，图形的变化速度就变慢了10倍。

（＊与mouseX对应的概念，还有mouseY，它代表了鼠标的y坐标。可以替换看看有何不同～～）

最后再给一个例子供大家摸索。

float angle = 0;
int num = 20; //控制线条数量
void setup(){
size(400, 400); //控制屏幕宽，高
colorMode(HSB);
}
void draw(){
int c=0;
background(25);
strokeWeight(3); //控制线条粗细
translate(200, 200); //控制旋转中心的坐标
for(int i=0;i<num;i++){
c += i*1;
stroke(c, 255, 200);
rotate(PI/30);
line(mouseX-width/2, mouseY-height/2, 0, -60);
angle += 0.0001; //控制旋转速度
rotate(angle);
}
}

可以改变”// “号前的数字参数试试看。

运行效果：

（“//”是注释符，写在它之后的文字不会对程序产生影响，注释是给写程序的人看的，方便别人理解代码。）

从上面的例子，你可以最直观地感受到，如何通过数据操纵图形。

范例与资源

Processing本身内置了很多范例，介绍了各种函数的基本用法。在菜单栏里选择 file－excample，从中选择一些看看。

经过一翻折腾后觉得还不过瘾？那可以再到openprocessing社区（http://openprocessing.org.zcool.cn.zcool.cn/ 需翻墙）。在这里，你可以看到来自全球创作者的作品，并且代码是开源！你可以下载并研究这些代码。

其他资源网站：

http://p5art.tumblr.com/
http://fyprocessing.tumblr.com/
http://processing.tumblr.com/

END

有关processing的体验就到此为止。
下一节，会正式介绍processing的众多神奇特性，你将会写出属于自己的第一个程序，用数据来画图。

未经允许不得转载：前端撸码笔记 » 写给设计师的Processing编程指南(1)PROCESSING初接触