帮你迅速入门!写给设计师的趣味编程指南 - 优设网 - UISDC

帮你迅速入门!写给设计师的趣味编程指南

2016/07/23 5800评论区

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

优设大课堂

非特殊说明,本文版权归原作者所有,转载请注明出处
本文地址:https://www.uisdc.com/designer-code-starter-guideline

发表评论 加载中....

评论加载中....

uisdc

评论区都快饿瘪了,看看我期盼的小眼神...

版式设计 交互设计师 界面设计 设计师干货 排版布局 职场 优设专访 优设大课堂 设计达人 配色 视觉设计 web前端开发 素材下载 设计流程 AI教程 设计理论 神器下载 字体下载 设计师专访 psd下载 平面设计 设计趋势 海报设计 用户体验设计 设计规范 动效设计 logo设计 图标设计 产品设计 ICON 神器推荐 App设计 字体设计 职场规划 酷站推荐 交互设计 ui设计 优秀网页设计 设计师职场 ps技巧 酷站 用户体验 PS教程 网页设计 经验分享

您还没有登录

优设启用更安全省心的 微信扫码登录

微信扫码

300万设计师聚集地!优设网是极具人气的设计师平台
2012年成立至今,一直专注于设计师的学习成长交流

把好文章收藏到微信

打开微信,扫码分享
学设计 优设网 在这里