designer-code-starter-guideline-1

提起「编程」二字,很多人脑中会觉得高端、烧脑、难学,@WENZY– 希望通过这个系列指南,扫除大家对“编程”的刻板影响,一路玩转编程。这不仅仅适合设计师阅读,相信任何一个想了解编程的人都能通过它迅速入门。

设计师为什么学编程?

lg201607239

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

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

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

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

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

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

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

编程是什么?

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

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

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

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

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

选择哪种语言入门

lg201607231

编程语言有上百种,在这里,我向你隆重推荐Processing。

它可能不是现阶段最主流的,但却是最适合入门的,特别是设计师。

优点如下:

  1. 它能让你建立起创作者的思维。编程技术作为辅助手段,图形创作是最终目的。可以让你不要一味地钻进技术的海洋。
  2. 语法简练,短小精悍。可以用很少的代码写出很棒的效果,极易获得反馈。
  3. 当你接触编程概念的时候,过往抽象的逻辑,符号,知识点。都像重生一般,会以一种鲜活的视觉形式呈现出来,十分适合视觉系的设计师。
  4. 编写绘图,动画,交互程序十分简单,可以整合各种音频视频文件,输出属于自己的作品。
  5. 如果你是视觉控,是geek,那一定会对它爱不释手。

PROCESSING可以做什么?

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

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

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

Dave Whyte作品:

lg2016072310

lg201607233

lg2016072313

体验

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

lg201607237

若想支持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)

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

lg201607236

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

图像发生变化了!

lg2016072311

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

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

lg201607232

有没有感受到无法言喻的秩序之美?参数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);
 }
 }

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

运行效果:

lg201607235

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

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

范例与资源

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

lg2016072312

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

lg201607238

其他资源网站:

  1. http://p5art.tumblr.com
  2. http://fyprocessing.tumblr.com
  3. http://processing.tumblr.com

有关processing的体验就到此为止。

下一节,会正式介绍processing的众多神奇特性,你将会写出属于自己的第一个程序,用数据来画图。

欢迎关注作者的微信公众号:InsLab

zyqr20160723

「技多不压身的设计师才有高薪资!」

  1. 平面设计:《超赞!设计师完全自学指南》
  2. 交互设计:《交互设计师修炼指南!教你从零开始成为优秀交互设计师》
  3. UI设计:《超实用新手指南!零基础如何自学UI设计?》
  4. 前端开发:《天猫高手来教你!零基础如何系统地学习前端开发?》
  5. 抠图技巧:《从菜鸟到高手!PHOTOSHOP抠图全方位攻略》
  6. 配色方案:《色彩搭配速成!3个实用方法帮你全面搞定配色》
  7. DPI指南:《基础知识学起来!为设计师量身打造的DPI指南》
  8. 交互设计自学路径图:《零基础入门!给非科班生的自学路径图之交互设计篇》

yestone-uisdc-2

【优设网 原创文章 投稿邮箱:2650232288@qq.com】

================关于优设网================
“优设网uisdc.com“是国内人气最高的网页设计师学习平台,专注分享网页设计、无线端设计以及PS教程。
【特色推荐】
设计师需要读的100本书:史上最全的设计师图书导航:http://hao.uisdc.com/book/
设计微博:拥有粉丝量160万的人气微博@优秀网页设计 ,欢迎关注获取网页设计资源、下载顶尖设计素材。
设计导航:全球顶尖设计网站推荐,设计师必备导航:http://hao.uisdc.com

点赞
收藏 3

发表评论 快来秀出你的观点

还可以输入 800 个字
 
 
载入中....
相关推荐
评论 收藏