Processing是目前最流行的图形和人机互动开发平台之一。和传统的开发平台,比如,OpenGL相比,Processing从绘制的角度出发而设计的编程模式更适合可视化和互动设计。同时,它隐藏了很多底层技术细节,因此它非常适合缺少编程基础的艺术和设计专业的人。在另一方面,由于数据量越来越大,以及互动在可视化中越来越重要,信息设计也正在从以前的用Adobe Illustrator手绘静态图片向用程序绘制互动可视化发展。由于这些因素,Processing逐渐成为了信息设计师的首选。

我们时常收到读者来信询问合适的可视化工具,特别是平面设计师想要找一种容易上手的计算机语言,因此我们计划推出一系列关于Processing的教程,和大家一起学习探讨Processing。网上有很多Processing的学习资料。小编认真研究后,觉得Vormplus之前推出Processing Month系列由浅入深,很值得推荐给大家。我们决定陆续翻译这个系列和大家分享,希望能对大家有用。请大家多多给我们留言反馈。如果你有其它好的Processing例子,也欢迎和我们分享。

不过Processing Month系列并不是从对Processing一无所知起步的。在开始之前介绍一下怎么安装设置Processing的开发环境,怎么跑第一个程序还是有必要的。因此,我们在这里翻译编辑了官网的Getting Started Guide。首先,你要从这里下载Processing系统。可以选择Mac,Windows或者Linux。安装很简单,在windows和linux只要解压下载的压缩包。而Mac,打开下载的dmg文件,然后把Processing图标拖到Application里面就可以了。双击可执行文件就打开了Processing开发环境(Processing Developement Enviroment,简称PDE)就像下面的图这样。在Processing里面一个程序叫做一个Sketch。保存之后的文件后缀是.pde。双击pde文件也能打开这个sketch。

你的第一个Processing程序

把下面这段程序输入到窗口中。这段程序做的就是以(50,50)为圆心,画一个直径为80的圆。对于Processing来说坐标的原点在窗口的左上角。

ellipse(50, 50, 80, 80);
点击窗口上端工具条里的运行符号来运行这段程序。一个新窗口会打开,窗口里的图案应该象下面这样。如果你的没有得到这样的圆,那一定是你输入错了。请再检查一遍。


鼠标互动

从严格意义上来说,上面这个并不是一个完整的Processing程序。接下来让我们试一个完整的,甚至有鼠标互动的程序。把刚才那段代码删掉,输入下面的代码,然后点击运行。

void setup() {
   size(480, 120);
   smooth();
}

void draw() {
    if (mousePressed) {
       fill(0);
    } else {
       fill(255);
    }
    ellipse(mouseX, mouseY, 80, 80);
}
你应该得到下面这样的互动可视化:
圆会随着你的鼠标一起移动,并保留移动的轨迹。要结束运行,按按钮。在PDE里面,你还可以保存,读取你的程序。新建一个sketch。最重要的是Processing提供了非常好用的分享功能。点击,Processing就会生成在当前程序的目录下生成一个Applet目录。这个目录里包含了要在网站上分享你的可视化所有需要所有文件。里面的index.html就包含了你的可视化。你可以直接把这个html上传到你的网站,或者把里面的相关代码粘贴到你自己的网页上。千万记住,目录里的.jar文件必须和你用来分享的网页在同一个目录下。
这些基本上就是Processing开发环境里最常用的功能了。是不是写一个可视化程序并没有想象的那么难呢?
Update:
推荐中文教程:

© 2011, 视物 | 致知. All rights reserved.

Related Posts:

  1. 经检验证明保存的文件文件名要大于3个字符,否则会出现“Prefix string too short”的error
    大概是Java的问题
    期待博客的Processing连载

  2. 把教程照抄进了P5,然后输出,哇撒,EXE哇~可以动诶
    嘿,好有成就感的小菜鸟哇