首页 > 教程 > 献给Processing爱好者的教程【1】—-前言【卡卡】
2017
08-10

献给Processing爱好者的教程【1】—-前言【卡卡】

献给Processing爱好者的教程【1】—-前言【卡卡】

献给Processing爱好者的教程【1】----前言【卡卡】 - 第1张  | Processing编程艺术

欢迎大家来到processing编程艺术,www.iprocessing.cn

网站的文档翻译工作已经基本完成,后续将继续修改和添加,

从今天开始,我将在网站上持续更新processing的教程,希望大家喜欢。

Processing是什么?

Processing是一种具有革命前瞻性的新兴计算机语言,是Java语言的延伸,并支持许多现有的Java语言架构,不过在语法(syntax)上简易许多,并具有许多贴心及人性化的设计;它的概念是在电子艺术的环境下介绍程序语言,并将电子艺术的概念介绍给程序设计师。Processing可以在Windows、MAC OS X、MAC OS 9 、Linux 等操作系统上使用。以Processing完成的作品可在个人本机端作用,或以Java Applets的模式外输至网络上发布。

Processing是最简单最容易上手的编程语言了。它就是为了让更多人能轻松使用这个编程工具来实现自己的创意想法而被设计出来的。确实它也做到了极简,简单的安装步骤(准确来说压根就不用安装,解压后就能直接用了),打一两句代码就能开始编程学习。。。上手极快。

Processing是把视觉形式、动画、交互与软件中的概念关联在一起,是为了在可视化的开发环境下教授计算机编程基础,设计软件草图以及软件开发而设计的,学生、艺术家、设计师以及研究人员可以用processing来学习,设计原型和产品。

但是,简结并不简陋,Processing的背后是强大的java语言在支持。java是什么?请自行百度。举个例子,你甚至可以开发个程序出来。其实Processing也只是用java写个一个类库。所以就像视频里所说的,这门工具上手了以后,限制你的只是你的想法。

至于MIT的那两个哥们我就不介绍了。

Processing能做什么?

processing是一种文本编程语言,专用于生成以及编辑图像。processing力求达到易用且功能丰富,且在短时间内学会并编写自己的程序,但更多的高级用户则是使用或编写带有更多功能的类库,包括矢量图与光栅图的绘制、图像处理、色彩模式、鼠标和键盘时间、网络通信、以及面向对象式编程,声音还有三维文件的处理等。

可以在本网站的Skech中找到下面三个例子的源码和解析

献给Processing爱好者的教程【1】----前言【卡卡】 - 第2张  | Processing编程艺术

献给Processing爱好者的教程【1】----前言【卡卡】 - 第3张  | Processing编程艺术

献给Processing爱好者的教程【1】----前言【卡卡】 - 第4张  | Processing编程艺术

 

 

迭代之美,一蹴而就(以下大篇幅摘抄自叶师傅的算法艺术实验室)

使用编程基本语句之一,Iteration迭代,优雅的矢量绘图大体量图形

献给Processing爱好者的教程【1】----前言【卡卡】 - 第5张  | Processing编程艺术

三角之美,周而复始

编写代码把时间转换成三角函数的弧度,运算结果化作图形的属性,制作出周而复始的Gif影像

献给Processing爱好者的教程【1】----前言【卡卡】 - 第6张  | Processing编程艺术

献给Processing爱好者的教程【1】----前言【卡卡】 - 第7张  | Processing编程艺术

 

噪声之美,时空转换 

Perlin Noise算法把时间的变化转换在空间维度之上,计算出连续随机的坐标,用在静态动态图形之上,呈现数学信号上的噪声之美

献给Processing爱好者的教程【1】----前言【卡卡】 - 第8张  | Processing编程艺术

献给Processing爱好者的教程【1】----前言【卡卡】 - 第9张  | Processing编程艺术

献给Processing爱好者的教程【1】----前言【卡卡】 - 第10张  | Processing编程艺术

自然之美,浮游天地

大规模群体活动,个体单位之间的互相行为,由flock算法来推演,编码用在动态图形上

献给Processing爱好者的教程【1】----前言【卡卡】 - 第11张  | Processing编程艺术

频率之美,傅里叶变换

编码分析声音频谱,抓取节奏信号,转换为光电影像

献给Processing爱好者的教程【1】----前言【卡卡】 - 第12张  | Processing编程艺术

献给Processing爱好者的教程【1】----前言【卡卡】 - 第13张  | Processing编程艺术

造型之美,参数建模

从数字入手,构建造型关系,用数学和编程生成复杂造型

献给Processing爱好者的教程【1】----前言【卡卡】 - 第14张  | Processing编程艺术

数据之美,大数据可视化

献给Processing爱好者的教程【1】----前言【卡卡】 - 第15张  | Processing编程艺术

以上所有还是在没有传感器参与的情况下制作的项目

传感器在实际生活中无处不在。

摄像头,单反相机的关键部件ccd是颜色传感器。触摸屏其实本质也是电容传感器,厕所自动冲水还有自动开关的玻璃门用得都是红外传感器。Kinect也是红外传感器,发出大量的红外光线感知物体深度,自带强大计算单元可以实时处理这些深度信息,用严谨的人体比例来确定运动的物体是不是人类,然后按照比例分析解构出每个关节的位置信息。Myo臂环(一直只有视频没产品一直再融资,不知道是不是骗局)原理就是肌电信号传感器,捕捉不同手势对应的肌肉用力情况的变化,分析辨别手势,从而发送控制信号给计算机软件,游戏等等。

市面上可以买到的不贵的传感器有很多种,比如压力传感,红外传感,湿度传感,超声波测距仪,这些传感器没有usb接口接电脑,所以Arduino可编程电路板就是给设计师和艺术家来操控传感器做产品原型开发或者装置艺术的,他的编程语言和Processing差不多。

那么怎么下载Processing IDE?

当然你可以在processing的官方网站上下载最新版本

https://www.processing.org/download/

献给Processing爱好者的教程【1】----前言【卡卡】 - 第16张  | Processing编程艺术

但是官网经常性的被墙或者下载不下来,所以我给大家在百度云准备了下载

软件下载:

processing  3.3.5   最新版本下载(感谢distance-_o不辞辛苦,提供资源)

软件下载

献给Processing爱好者的教程【1】----前言【卡卡】 - 第17张  | Processing编程艺术

开发环境PDE的介绍

Sketch

之前已经提到过,Processing的创造者它看作是一个代码的素描本,在这里,你可以用代码绘画。所以,Processing的工程也非常文艺地取名为”素描本”——Sketch。

选择Sketch→Show Sketch Folder,打开当前工程文件目录。

这个素描本中的素描纸,也就是Processing的源文件是.pde文件,在PDE中以tab的形式显示,tab的名称就是pde文件的名称。每个sketch中都有一个主tab,这个tab和目录文件夹同名,是Processing的程序入口。

PDE

Processing的开发环境被称为PDE(ProcessingDevelopment Environment),在PDE的界面中,你可以看到三个部分:工具栏,代码编辑区,控制台。

Toolbar工具栏

献给Processing爱好者的教程【1】----前言【卡卡】 - 第18张  | Processing编程艺术

 运行 停止

献给Processing爱好者的教程【1】----前言【卡卡】 - 第19张  | Processing编程艺术

 新建 打开 保存 输出应用

这些功能用来控制Sketch(Processing工程),其中,输出应用的功能将在下一节详述。

献给Processing爱好者的教程【1】----前言【卡卡】 - 第20张  | Processing编程艺术

 模式选择

Android安卓JavaScriptProcessing支持多种运行模式,默认为Java,即运行时生成一个桌面应用,可以下载添加(生成程序),(生成嵌入web的applet)等模式。

Text editor 代码编辑区

献给Processing爱好者的教程【1】----前言【卡卡】 - 第21张  | Processing编程艺术

选项卡区

Processing以选项卡tab组织代码编辑区,每个tab实际上对应了一个.pde格式的代码源文件。点击右方的小下拉箭头,可以对tabs进行操作。

当你打开processing.exe时,Processing就为你默认创建了一个工程(Processing中被称为Sketch),并为你创建了一个以”sketch_+当前日期+顺序编号”命名的tab。选择Sketch→Show Sketch Folder,就能够看到当前工程文件目录。这是工程是暂存的状态,选择

献给Processing爱好者的教程【1】----前言【卡卡】 - 第22张  | Processing编程艺术

 可以进行更名和保存。

Console 控制台

献给Processing爱好者的教程【1】----前言【卡卡】 - 第23张  | Processing编程艺术

黑色区域上方是信息区,运行时的PDE状态、出错信息等都会显示在这里;

黑色区域是控制台;

最下方显示的是当前的行数。

Errors

显示错误

现在刚打开的工程是空白的,点击运行键,你的屏幕上将出现运行结果:

献给Processing爱好者的教程【1】----前言【卡卡】 - 第24张  | Processing编程艺术

默认情况下,Processing程序的运行结果是一个100*100的灰色空白窗口。在代码编辑区输入下列代码:

献给Processing爱好者的教程【1】----前言【卡卡】 - 第25张  | Processing编程艺术

再次运行,如果不出什么意外的话,你将看到:

献给Processing爱好者的教程【1】----前言【卡卡】 - 第26张  | Processing编程艺术

如果出了意外,那你的代码输入错误,你将在控制台看到你的错误信息,根据这个信息修正你的代码。

Hello World!

清空你的代码编辑区,在代码编辑区输入下列代码,然后运行:

void setup() {

 size(480, 120);

}

void draw() {

  if(mousePressed) {

   fill(0);

  }else {

   fill(255);

  }

 ellipse(mouseX, mouseY, 80, 80);

}

献给Processing爱好者的教程【1】----前言【卡卡】 - 第27张  | Processing编程艺术

感觉如何?

这段代码的意思是,将窗口大小设定为480*120,如果鼠标按下,则在鼠标的位置画一个半径为80的白色圆,否则在鼠标的位置画一个半径80的黑色圆。

Processing程序逻辑

点击stop按钮 

献给Processing爱好者的教程【1】----前言【卡卡】 - 第28张  | Processing编程艺术

 终止程序,让我们来这段代码。

在这个程序中我们重写了两个函数:setup()和draw()。

setup()是在程序开始时调用的函数,只执行一次;而draw()在setup后被调用,并且将循环地、不停地被调用。

这里的setup()和draw()函数类似于MFC的回调函数,也就是说,在特定的条件下被系统调用的函数,如,setup是在程序启动时被调用的,draw是setup以后按照每秒多少帧被系统调用的(类似的函数还有mousePressed()—在鼠标按下时被调用,keyPressed()—在键盘某个键按下时会被调用,等等)。然而setup()和draw()是所有函数中最关键的两个函数。

下面我们来尝试一下:

1、在setup函数中加入如下代码并运行:background(255);

2、将刚才加到setup中的那一行代码剪切到draw函数中并运行。

结果如何?我们可以看到,在第一步时,运行效果和一开始相仿,鼠标滑动会留下一连串的圆圈轨迹,而第二步中,我们不能得到轨迹,只能看到一个随着鼠标移动的黑球或者白球。

献给Processing爱好者的教程【1】----前言【卡卡】 - 第29张  | Processing编程艺术

献给Processing爱好者的教程【1】----前言【卡卡】 - 第30张  | Processing编程艺术

background()是设置背景颜色的函数,里面的参数是颜色,当有一个数字参数时,它指代的是0-255的灰度值,所以”background(255);”这条语句的作用是,将背景颜色设置为白色。而之所以出现刚刚两种完全不同的效果,原因是setup()只在程序开始执行一次,之后不断画上去的圈圈,将背景盖住,而draw()会被不断调用,每一次调用,都会执行一次background函数,将整个画面刷新一遍,再绘制新的小圈圈,所以看起来就是只有一个随着鼠标移动的小球了。

draw()就像动画中的一帧,我们的代码决定了每一帧中要画什么东西。如果我们说,每一帧都画一样的东西,最后画面就是静止的;如果我们告诉Processing,每一帧要画什么不一样的东西,我们的画面就动起来了;如果我们说,按照鼠标的移动画出不同的东西,你的画面就成为了交互式的。

Processing就以这样的方式,让图形图像动起来,和用户进行交互。

空间和色彩的游戏

下面将写在draw函数中的background()语句修改一下:

background(mouseX,mouseY, 100);

再次运行。

献给Processing爱好者的教程【1】----前言【卡卡】 - 第31张  | Processing编程艺术

如果一切正常,你在移动鼠标的时候可以看到背景颜色随着鼠标小球的位置在逐渐的变化。

这里我们给了background函数三个参数,这时候,这三个参数就分别代表了red,green和blue的值,而mouseX,mouseY是Processing中记录鼠标位置的对象,所以,当时间流逝,draw函数被不断调用,窗口的背景值就随着鼠标的位置不断改变了。

看到了么?Processing就这样将你的鼠标位置”翻译”成了色彩!

这只是Processing的冰山一角。Processing中有大量的内置对象和函数,它们让你轻松的操控空间和色彩,创造出各式各样的作品。

1.4.3 保存和分享!

到现在为止我们还没保存过我们的工作,点击 

献给Processing爱好者的教程【1】----前言【卡卡】 - 第32张  | Processing编程艺术

(或ctrl+s),在弹出的窗口里输入你想保存的工程名(Processing默认的工程名是”Sketch+当天时间+字母编号”,我一般保存时将最后的字母修改为我想要的名字即可,即”sketch_131022_helloworld”)Processing会在你选好的位置为它创建一个sketch。

如果你想让将你的大作和朋友们分享,你可以将程序发布成应用。点击 

献给Processing爱好者的教程【1】----前言【卡卡】 - 第33张  | Processing编程艺术

iOSLinux(或ctrl+e),根据提示操作,你就能得到在Windows、或者下运行的应用程序。以Windows为例,导出应用后sketch中会出现为32位系统和64位系统的两个文件夹,其中每个文件夹中都含有一个同名批处理文件,一个Processing库文件夹lib,和一个ped源文件夹source(程序源代码,没有它仍然导出的程序可以运行),如果有数据还会有一个data文件夹,运行时,执行.bat批处理文件就行了。

献给Processing爱好者的教程【1】----前言【卡卡】 - 第34张  | Processing编程艺术

献给Processing爱好者的教程【1】----前言【卡卡】 - 第35张  | Processing编程艺术

三个锦囊

到现在为止,Processing的基本操作和逻辑我已经介绍完了。最后送大家三个锦囊。

1、Reference文档

Processing为它的使用者提供了相当好用的文档。

观察PDE中的程序代码,程序中有颜色的size()、fill()、ellipse()函数和mousePressed、mouseX、mouseY,是Processing内置的函数和值。

在这些词上点击右键 > Find in Reference,就会在弹出的页面中看到这些内置函数、对象的说明文档。

献给Processing爱好者的教程【1】----前言【卡卡】 - 第36张  | Processing编程艺术

这个文档来自本地(在你解压的Processing包里),你可以从打开的这个文档中的链接找到所有的Processing对象、类、函数,Processing的创作者为我们提供了全面的描述和形象的介绍。同样的内容可以在官网的Reference上找到。

当你不清楚这个函数的用途,或者参数、返回值时,可以以这样的方式查看它。当你想知道Processing中所有的函数、对象和它们的用法时,也可以去查看Reference。

中文版文档

我已经将文档做了中文翻译,希望对大家有帮助

文档

 

2、Examples

Processing为它的使用者贴心地准备了大量全面的使用示例。

在PDE中选择file > Examples(或Ctrl+Shift+O)就会弹出Processing的Examples窗口。

献给Processing爱好者的教程【1】----前言【卡卡】 - 第37张  | Processing编程艺术

献给Processing爱好者的教程【1】----前言【卡卡】 - 第38张  | Processing编程艺术

这里集成了大量的Processing案例,涵盖了Processing的各个方面各种话题。点开其中的任何一个工程,都会开启新的PDE窗口,这里,Processing用最简单优美的代码来表达问题,你可以点击运行查看代码结果,在代码区观察代码结构。

3、 One More Thing

打开一个新工程(Ctrl+n),输入下列代码并运行:

void setup(){

 size(400, 400);

}

void draw(){

 background(#FFEE31);

 pushMatrix();

 translate(200, 200 – 60);

 //eyes

 PVector mouse = new PVector(mouseX, mouseY);

 mouse.sub(200, 200 – 60, 0);

 mouse.limit(7);

 fill(0);

 noStroke();

 rectMode(CENTER);

 rect(-1*40+mouse.x, -15+mouse.y, 15, 25, 8);

 if(mousePressed)

   rect(40+mouse.x, -15+mouse.y, 28, 10, 5);

 else

   rect(40+mouse.x, -15+mouse.y, 15, 25, 8);

 //mouth

 noFill();

 strokeWeight(12);

 stroke(0);

 arc(0, 0, 150, 120, PI/4, PI-PI/4);

 popMatrix();

 //text

 textSize(25);

 textAlign(CENTER);

 text(“Enjoy your hacking with\nProcessing!”, width/2,height/2+100);

}



最后编辑:
作者:卡萨布兰卡
这个作者貌似有点懒,什么都没有留下。

献给Processing爱好者的教程【1】—-前言【卡卡】》有 15 条评论

  1. 头发消失的地方 说:

孔斐的回复 取消回复

你的email不会被公开。