2017-1-3 12:57:35 [显示全部楼层]
15436浏览
查看: 15436|回复: 12

[入门教程] 写给设计师的编程趣味指南-(1)PROCESSING初接触

[复制链接]
本帖最后由 kaka 于 2017-8-18 08:21 编辑

写给设计师的编程趣味指南-(1)PROCESSING初接触图1
编程?

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

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

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

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

设计师为什么学编程?
写给设计师的编程趣味指南-(1)PROCESSING初接触图2
设计师可以说是灵感泛滥的物种之一,脑袋里往往装着各式天马行空的想法。通过学习绘画,我们就比常人多了一种洞察事物本质的能力。

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

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

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

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

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

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

编程是什么?
写给设计师的编程趣味指南-(1)PROCESSING初接触图3
编程到底是什么?它的最终目的,就是让计算机解决某个问题。如果我们想让计算机理解指令,就得掌握编程语言。

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

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

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

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

选择哪种语言入门
写给设计师的编程趣味指南-(1)PROCESSING初接触图4

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

优点如下

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

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

PROCESSING可以做什么?

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

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

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

Dave Whyte作品:

写给设计师的编程趣味指南-(1)PROCESSING初接触图5

写给设计师的编程趣味指南-(1)PROCESSING初接触图6


写给设计师的编程趣味指南-(1)PROCESSING初接触图7

写给设计师的编程趣味指南-(1)PROCESSING初接触图8

体验

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

写给设计师的编程趣味指南-(1)PROCESSING初接触图9

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

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

[mw_shl_code=cpp,true]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();
}
}[/mw_shl_code]

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

(*若中文注释在程序中无法正常显示,可以在preference-Editor and Console font中,选择字体Andale Mono)

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

写给设计师的编程趣味指南-(1)PROCESSING初接触图10

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

(*若中文注释在程序中无法正常显示,可以在preference-Editor and Console font中,选择字体Andale Mono)

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

写给设计师的编程趣味指南-(1)PROCESSING初接触图11

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

(*若中文注释在程序中无法正常显示,可以在preference-Editor and Console font中,选择字体Andale Mono)

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

写给设计师的编程趣味指南-(1)PROCESSING初接触图12

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

(*若中文注释在程序中无法正常显示,可以在preference-Editor and Console font中,选择字体Andale Mono)

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

[mw_shl_code=cpp,true]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);
}
}[/mw_shl_code]

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

运行效果

写给设计师的编程趣味指南-(1)PROCESSING初接触图13

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

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

范例与资源

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

写给设计师的编程趣味指南-(1)PROCESSING初接触图14

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

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

范例与资源

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

写给设计师的编程趣味指南-(1)PROCESSING初接触图15

转自www.inslab.cn

dsweiliang  初级技神

发表于 2017-1-4 08:16:15

感谢分享
回复

使用道具 举报

liweilin  高级技师

发表于 2017-1-10 21:45:40

掌握一门程序语言真的很实用
回复

使用道具 举报

gray6666  初级技神

发表于 2017-1-11 11:15:58

好东西,学习了
回复

使用道具 举报

svw  初级技匠

发表于 2017-1-11 17:54:34

好东西,不过除了图形还能干嘛?
回复

使用道具 举报

MaxPower  初级技师

发表于 2017-1-12 13:08:25

看起来很有趣的样子。
回复

使用道具 举报

MaxPower  初级技师

发表于 2017-1-12 13:09:26

为什么点击官网下载是404 Not Found,难道需要翻墙吗?
回复

使用道具 举报

kaka  高级技师
 楼主|

发表于 2017-1-17 13:04:02

MaxPower 发表于 2017-1-12 13:09
为什么点击官网下载是404 Not Found,难道需要翻墙吗?

如果官方下载不到,请移步下载
http://www.makerspaces.cn/forum. ... p;tid=14&extra=
回复

使用道具 举报

kaka  高级技师
 楼主|

发表于 2017-1-17 13:04:35

svw 发表于 2017-1-11 17:54
好东西,不过除了图形还能干嘛?

图形,图像,摄像头,声音,动画
回复

使用道具 举报

kaka  高级技师
 楼主|

发表于 2017-1-17 13:05:05

svw 发表于 2017-1-11 17:54
好东西,不过除了图形还能干嘛?

人工智能,机器学习等等
回复

使用道具 举报

凌风清羽  中级技匠

发表于 2017-1-27 14:16:44

来学习一下~~~~~~~~~~~~
回复

使用道具 举报

gray6666  初级技神

发表于 2017-2-22 16:10:39

官网链接 需要翻墙吗?咱 下载不来
回复

使用道具 举报

kaka  高级技师
 楼主|

发表于 2017-2-23 18:30:52

gray6666 发表于 2017-2-22 16:10
官网链接 需要翻墙吗?咱 下载不来

http://www.makerspaces.cn/forum. ... p;tid=14&extra=
这个是下载地址
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

为本项目制作心愿单
购买心愿单
心愿单 编辑
[[wsData.name]]

硬件清单

  • [[d.name]]
btnicon
我也要做!
点击进入购买页面
上海智位机器人股份有限公司 沪ICP备09038501号-4

© 2013-2024 Comsenz Inc. Powered by Discuz! X3.4 Licensed

mail