Processing自学第一课

Processing自学第一课

7  2013-01-12 16:19:54

【什么是Processing】 
Processing是一种特别简单并容易学习的编程语言，它被研发的初衷是为了服务于艺术家和设计师们，它是一个用来做数据动画（ motion graphics）、数据可视化（ data visualization）、large-scale installation work的工具。 

【Processing和JAVA的关系】 它是JAVA基础上所作的改良工具,它们属于同源关系，但processing简单多了，即使不懂JAVA也可以轻松上手。目前Processing免费开放中，任何人都可以下载并使用。下载链接： http://processing.org/download/

【Sketch】
使用Processing生成的文件叫做Sketch（草图），这就好比使用JAVA生成的文件叫做Script(脚本），简单形象。而Sketch通常是保存在默认文件夹Sketchbook。

【好！开始玩】
体验Processing，第一步是输入下面这行指令。
       line(15, 25, 70, 90);

输入指令后，点击左上的播放键，会弹出一个新窗口把指令转变成图像（实际如下，弹出了一条斜线line，第一次体验我觉得好好玩，土包激动了）。

玩过第一步，尝试更复杂的指令。
     size(400, 400);
     background(192, 64, 0);
     stroke(255);
     line(150, 25, 270, 350);
从指令的语义上推测，依次是控制图像大小size400×400像素；背景色（应该是RGB吧？）；stroke不晓得是什么（笔触么？）；最后是线条（line）

输入指令后，再次点击播放键（RUN BOTTON），弹出如上的图像窗口。400*400的大小，橘红色背景，白色斜线，


继续阅读官网的解释，随后发现stroke应该就是前景的颜色。通过括号中的色彩指令方式不同，得到与之相对应的图像。
        stroke(255); // sets the stroke color to white
       stroke(255, 255, 255); // identical to the line above
       stroke(255, 128, 0); // bright orange (red 255, green 128, blue 0)
       stroke(#FF8000); // bright orange as a web color
       stroke(255, 128, 0, 128); // bright orange with 50% transparency


【跟鼠标say hi】（鼠标说，干嘛？）
像前面罗列的那些指令被叫做static sketch（静态的sketch文件？）——即有由组属性描述的词组组成的（static sketch的翻译不太有把握，还需请教组长）。Static sketch只能生成执行命令（？）或者单一的图像，而无法产生动画以及互动。
如果想生成互动文件需要拉出一组语法，以“ setup() ”作为开头，以“draw()”作尾的函数。编码如下：
     void setup() {
       size(400, 400);
       stroke(255);
       background(192, 64, 0);
     } 

void draw() {
       line(150, 25, mouseX, mouseY);
     }

这一次输入指令后弹出的窗口中，图像会跟着鼠标轨迹而生成变化。
这时我就明白为什么这章叫hello mouse了，这是一个鼠标跟随的指令。有一个鼠标跟随的绘图网站，很酷炫的说>>： http://site.douban.com/144949/widget/photos/9063995/photo/1812072988/

像上面那个内嵌式的函数被叫做automatically（这不是形容词吗？）上述指令的语法规则是：
1.“ setup() ”的部分会执行一次，“draw()”的部分会重复执行。
2.“ setup() ”本身可以用作任何初始化的指令，在这个案例中它所下达的指令包括画框大小size\前景色stroke\背景色background。这里头值得一提的是，"size（）"的指令永远都要在“ setup() ”第一行。
3.“draw()”的指令是用来控制动画的。

前面那个案例中background() 放在setup()里头，意味着它只被使用一次，所以屏幕最终会被鼠标跟随的线条填充满。当把backgroud()放到drawn()时，就会发现画面形式是始终只有一条线跟随着鼠标。其原理是，background()在drawn()里所以背景色无限次填充了。
     void setup() {
       size(400, 400);
       stroke(255);
     }

void draw() {
       background(192, 64, 0);
       line(150, 25, mouseX, mouseY);
     }

输入指令后生成的窗口如上图，鼠标移动的时候画面中的白线会跟随，但不会留下鼠标轨迹，始终只有一条白线。

{小小章}：（这一段我的翻译有点勉强，我也没把我自己是不是正确理解了）
传统的图像生成的是static program(眼熟么？前面提到过），这种形式的图像生成路劲十分简单，属于lineaer fashion(线性方式）。也就是不可逆转的，生成的图像就会存在着。
现在大部分的项目都是用the setup()和draw() blocks的函数组合。然后有一种比较先进的鼠标跟随方式运营而生。请尝试下面的代码：
     void setup() {
       size(400, 400);
       stroke(255);
     }

void draw() {
       line(150, 25, mouseX, mouseY);
     }

void mousePressed() {
       background(192, 64, 0);
     }

上述代码中增加了一段mousePressed(),于是乎，只要点击了鼠标左键，Sketch就会执行相应的background指令。只要点击鼠标，画面立刻就被某种颜色填充了，也就等于前面画的图像都没了。

【文件输出】
Processing一个最重要的优点是它可以一键输出你制作的Sketch:点击File → 选择Export Application 即可。（生成的文件夹中有一个PDE的文件，我觉得它是核心，但打不开。百度了一下，看得头晕。再问组长吧）
好像每一次输出都会覆盖掉原来的文件夹，所以一定要实现做好复制保存。

【保存图像】
如果说不想整个打包保存，而是指向保存生成的图像，可以在draw() 里头的最后一行添加saveFrame()可以生成一连串的TIFF格式的文件，文件的默认命名方式是screen-0001.tif, screen-0002.tif等等。当然文件的命名和格式也可以自己定，如下设定制定即可：
saveFrame("output.png")
值得注意的是每一次RUN都可能会保存出一堆的图片，你可以用如下的形式明明，使用#可以得到一按顺序排列的图像。
saveFrame("output-####.png");
For high quality output, you can write geometry to PDF files instead of the screen, as described in the later section about the size() function.

【案例学习】
在下载的安装包中有一个命名为modes的文件，里头是大量的案例，后缀名都是pde。这些文件都可以用processing打开，通过多看多模仿逐步学习起来。
案例打开方式：在Processing中的file里头点击example，会弹出一个窗口，里头有很多案例。

【size()里头有文章】
{1}
size()决定的是整个画框的大小，而画框中的前景（比如说前面距离的斜线）应该在画面的那个位置呢？ 通常都会用变量来代替具体的数字。（因为画框大小有的时候因为屏幕大小不同显现效果不一样。体验一下：
错误示例：
     size(400, 400);
         ellipse(200, 200, 50, 50); 
如果是这样子输入指令，那么当size产生变化的时候，ellipse(圆）还是在长200宽200的座标位置，就不再保持与画框的正中央了。

正确示例：
     size(400, 400);
         ellipse(width/2, height/2, 50, 50);
这样子的指令，ellipse（圆）就会永远画框中央。

{2}（？？？？？不知道自己理解的对不对）
在size()中增加一个变量如下
   size(400, 400, P2D);

size(400, 400, P3D);
这两个指令的区别：P3D还可以觉得画面明亮度（lighting）,质感（ texture）,材质（ materials）

还有第三个指令：
size(400, 400, PDF, "output.pdf");


【加载与演示数据】
Processing还有一个独到的特点就是它存储文件的路径。在Sketch文件包中有一个子目录叫data。通过函数loadImage()和 loadStrings() 可以找到这个文件夹。
『一段引文：data中的便签（notes）
对于那种线下编辑但联网展示的代码实际上挺麻烦的。因为外方需要访问你的硬盘数据，此外展示行为还可能损坏你的数据（？不确定翻译正确否。）
项目运作中安全访问机制也是很复杂的。当你是本地运行的时候，数据可以直接访问你的硬盘，尽管说这也是要通过“working directory,” 也就是引用的所在路径。当在网上运营的时候，也需要从同样的服务器中获取数据。（.....看得头好晕，中间的逻辑都没看懂）
大意是processing文件包方便线上线下通用吧。』

loadStrings()：这个指令函数是从String中读取文本文件（text file ）
loadImage() ：这个指令函数则是从PImage读取图像。

//举个栗子：怎么样加载文本文件（txt）和Jpeg图像（从Sketch的数据文件夹中）
     String[] lines = loadStrings("something.txt");
     PImage image = loadImage("picture.jpg");

每个变量数据都有属性：string或者Pimage。如果理解了数据(data)属性，就比较容易理解上面的编程代码了。
String：String()这个语法意味着“一组由数据组成的字符串”（A array of data of a class of string）。这一堆字符串是由loadString生成的，并且根据括号中的文字来命名，loadStings 把txt文件分解成一个个独立字符条。 而后面那个指令loadImage则是创立一个单独的图像变量（ a single variable of class PImage），带上名字。


创建数据包（ the data folder ）的方法有两种： 1.Sketch → Add File menu option；2.或者直接把文件包拽进编辑框中，只要这个文件包之前没有存在过那就会自动生成一个。
（不过，我尝试了，没成功。 难道说是我翻译理解错了？原文如下）
To add a file to the data folder of a Processing sketch, use the Sketch → Add File menu option, or drag the file into the editor window of the PDE. The data folder will be created if it does not exist already. 

预览文件包（sketch folder）的内容：Sketch → Show Sketch Folder menu option

【关于library以及一些新功能】
library是编码（code）的集合存储区，为了方便Processing操作。lib的优势似乎是不用API接口就可以读取features（不晓得是什么）。Libraries have been important to the growth of the project, because they let developers make new features accessible to users without needing to make them part of the core Processing API.

Several core libraries come with Processing. These can be seen in the Libraries section of the online reference (also available from the Help menu from within the PDE.) These libraries can be seen at http://processing.org/reference/libraries/

再来个栗子： the PDF Export library. 这个方便读写，直接从Processing下手就可以了。 These vector graphics files can be scaled to any size and output at very high resolutions.

使用PDF library的窗口路径： Sketch → Import Library → pdf，选择完后，编辑框内会出现下面这段代码：
 import processing.pdf.*;
如此，PDF就被导入了，然后可以给予他创建一个新的文件。比如说：
     beginRecord(PDF, "lines.pdf");
创建一个名为 lines.pdf 的可编辑文件。之后，所做的编辑都会呈现在这个PDF文件中了。

其他的lib有其他功能，比如说：从相机中读取图片，接受或输送MIDI或者QSC指令，撰改3D摄像机的控制指令，进入MySQL的数据库。


【Sketching和Scripting】
Sketch其实是有一个个的tab组成的，每一个tab代表着一段代码。环境（environment）通常有3-5个tab组成。这个经常是通过海量的项目（project）去发展成一个TEXT或者创意原型。（This covers a significant number of projects developed to test and prototype ideas, often before embedding them into a larger project or building a more robust application for broader deployment.）（算了，英语真的不够好，我被打败了，看半天没看懂）

其实sketching的概念就相当于scripting（前面说过了），除非你并不是在一个scripting语言体系里做Processing，相反的，只是仗着编译JAVA过程中的属性优势（翻译过来我自己都看不懂呀，我擦，什么意思啊，烦躁）。当然了，严格说起来，JAVA本身也是一种被编译过的语言，它的字节码（bytecode）汇编使得它比JavaScript, Python, Ruby更接近于“metal”（金属？？）

Processing研发团队本身没有宏伟壮志，去做什么最重要的图像编程语言，但是他们有如下的目标：
1.简化呈现团队自身的努力
2.做亲民性高的编程语言，及时一点基础知识都没有的人也可以解除processing
3.作为一块敲门砖， 吸引更多的人进入编程世界，去遨游比如说Java or C++.这类发展更成熟、更复杂、更有挑战性的语言。

【甭打算一上来就建个教堂】
不要着急，从基础开始。 几点建议：
1.结构不要架设得太大，修繁为简。
2.记住第一条。

举报

Measure

Measure