从交互设计到硬件创业 Interaction Design & Hardware Startup
October 24th, 2007

MIT Processing handbook 中文教程-1-Using Processing

来源:Processing: A Programming Handbook for Visual Designers and Artists
章节:1-“Using Processing-Example walk-through” Page11-16
进度:page11-16
作者:Casey Reas,Ben Fry
版权:MIT Press
翻译:鲸男(whaleforest).2007/10/19-10/26
发表:www.imlab.cn/forum与http://imlab.cn/whale/与http://www.douban.com/group/processing/
说明:翻译用于Processing中文用户的学习交流与推广,如有侵权请告知我将尽快删除(whaleforest@gmail.com),转载请包括此信息。期待大家指正错误及一起翻译。

由Processing: A Programming Handbook for Visual Designers and Artists一书11页开始:
和我们在日常生活使用的语言一样,构成processing程序的代码可以只有一行,也可以成百上千。接下来的例子将由浅入深介绍processing语言特性,如果对下面代码过敏,不妨先复制这些简短的小东西到processing中运行一下看看效果,跟着解说一步一步深入的话,即使是一窍不通的新手也能轻松上手。下面的例子仅仅是对整本书做出概述,更加详细的用法及实例在之后的章节做讲解。

Processing可以轻松绘制线,圆,曲线等图形元素,通过数字定位坐标之后连接成形,例如在line()函数中,绘制一条线段就需要四个数值 (x1,y1,x2,y2),x1,y1定义起点,x2,y2确定终点。在processing中坐标起点为左上角,也就是说左上角的坐标为零 (0,0),由此开始x轴由左往右递增,y轴由上往下递增。解读坐标与更多图形的绘制方法将在第23-30页做详细讲解。(本段为原书第11页)

height=”150″ width=”128″
line(10, 80, 30, 40); // 左边线段
line(20, 80, 40, 40);
line(30, 80, 50, 40); // 中间线段
line(40, 80, 60, 40);
line(50, 80, 70, 40); // 右边线段

0-01

(page12)

构成这些图形视觉元素的代码可以设定色彩,灰度,线条宽度,透明度等等。对绘画属性的讨论将在第31-35页进行。(本段为原书第12页)


background(0); // 设定背景为黑色
stroke(255); // 设定线段为白色
strokeWeight(5); // 设定线段宽度为5
smooth(); // 使图形边缘平滑
line(10, 80, 30, 40); //左边线段line(20, 80, 40, 40);
line(30, 80, 50, 40); //中间线段
line(40, 80, 60, 40);
line(50, 80, 70, 40); // 右边线段
0-02

变量:使用变量赋予x一个数值,运行代码时此数值被引入元件中替换元件本身的x值,而一个变量可以控制程序的多种属性。对变量的介绍将在第37-41页进行。(本段为原书第12页)


int x = 5; // 设定横向坐标
int y = 60; // 设定竖向坐标
line(x, y, x+20, y-40); // 起点坐标[5,60]终点坐标[25,20]的线段
line(x+10, y, x+30, y-40); // 起点坐标[15,60]终点坐标[35,20]的线段
line(x+20, y, x+40, y-40); // 起点坐标[25,60]终点坐标[45,20]的线段
line(x+30, y, x+50, y-40); // 起点坐标[35,60]终点坐标[55,20]的线段
line(x+40, y, x+60, y-40); // 起点坐标[45,60]终点坐标[65,20]的线段
0-03

使用setup()函数和draw()函数可以使程序持续运行-这是创建动画和交互程序的必要条件。setup()函数中的代码只能执行一次,默认情况下 draw()函数中的代码可以持续运行循环往复。接下来的例子中首先创建变量x,我们在程序中的任何位置都可以调用这个变量,由于每运行1桢x的值就增加 1,且线段的横向坐标由x的值决定,所以随着代码在draw()函数中的持续运行x数值持续增加,线段往右移动。在第14行我们会遇到新朋友if语句,它构建了一个表达式用来比较变量x和100的关系。当结果满足假设条件(true)时表达式中的代码运行,反之则不运行。也就是说当x的数值大于100时,代码重置x的数值为-40,此时可以看到线段跳转到视窗的左侧边缘。对draw()函数的详细介绍在第173-175进行,创建程序动画会在第315- 320页进行,对if语句的介绍在第53-56页进行。

(page13)

int x = 0; // 设定横向坐标
int y = 55; // 设定竖向坐标
void setup() {
size(100, 100); // 设定视窗大小为100*100像素
}
void draw() {
background(204);
line(x, y, x+20, y-40); // 左边线段
line(x+10, y, x+30, y-40); // 中间线段
line(x+20, y, x+40, y-40); // 右边线段
x = x + 1; // Add 1 to x
if (x > 100) { // 如果x数值大于100,
x = -40; // 重置x值为-40
}
}
0-04

processing程序可以和鼠标键盘等输入设备产生交互,由这些输入设备操纵图形窗口中的元素产生变化。关于程序与鼠标交互的详细讨论在第205-244页进行。

void setup() {
size(100, 100);
}
void draw() {
background(204);
// 把鼠标的横向轴坐标赋予x
float x = mouseX;
// 把鼠标的竖向坐标赋予y
float y = mouseY;
line(x, y, x+20, y-40);
line(x+10, y, x+30, y-40);
line(x+20, y, x+40, y-40);
}
0-05

函数是程序中用来执行某项特定任务的一组代码,它使程序变的容易阅读和理解。接下来的例子介绍如何通过diagonal()函数使draw()每执行一次就得到一组包含三条对角线的序列。diagonal()函数后面括号中的数字是它的两个参数,用来决定线段的位置。这些数值被引入到第12行的的 diagonal()函数中并被第13到15行中的变量x,y所引用。第181-196页对函数有更加深入的介绍。

(page14)


void setup() {
size(100, 100);
noLoop();
}
void draw() {
diagonals(40, 90);
diagonals(60, 62);
diagonals(20, 40);
}
void diagonals(int x, int y) {
line(x, y, x+20, y-40);
line(x+10, y, x+30, y-40);
line(x+20, y, x+40, y-40);
}
0-06

之前程序中的变量只能存储一种数据类型,如果我们想要在图形窗口中出现20条线段,程序里就要有40个变量:20个定义横向坐标,20个定义竖向坐标。程序因此开始变的又臭又长难以阅读,解决这个麻烦的方法是使用arrays(数组)。arrays(数组)是一个由许多同类型变量组成的集合,使用这些变量只需要引用这个集合的名字。A for structure canbe used to cycle through each array element in sequence. Arrays在第301-313页,for构造函数在第61-68页作详细介绍

int num=20;
int[]dx=new int[num];//Declare and create an array
int[]dy=new int[num];//Declare and create an array
void setup(){
size(100,100);
for(int i=0;i
dx[i]=i*5;
dy[i]=12+(i*6);
}
}
void draw(){
background(204);
for(int i=0;i <>100){
dx[i]=-100;
}
diagonals(dx[i],dy[i]);
}
}
void diagonals(int x,int y){
line(x,y,x+20,y-40);
line(x+10,y,x+30,y-40);
line(x+20,y,x+40,y-40);
}
0-07

(page15)

本段简要介绍面向对象编程(Object-oriented programming)的定义,举了一个例子,由于本人对oop甚不了解,新手们也可以先跳过待日后作解,相信等看到第400页的时候把oop搞懂不成问题。以下附原文。Object-oriented programming is a way of structuring code into objects,units of code that contain both data and functions.This style of programming makes a strong connectionbetween groups of data and the functions that act on this data.The diagonals() function can be expanded by making it part of a class definition.Objects are created using the class as a template.The variables for positioning the lines and setting their drawing attributes then move inside the class definition to be more closely associated with drawing the lines.Object-oriented programming is discussed further on pages 395–411.


Diagonals da,db;
void setup(){
size(100,100);
smooth();
//Inputs:x,y,speed,thick,gray
da=new Diagonals(0,80,1,2,0);
db=new Diagonals(0,55,2,6,255);
}
void draw(){
background(204);
da.update();
db.update();
}
class Diagonals{
int x,y,speed,thick,gray;
Diagonals(int xpos,int ypos,int s,int t,int g){
x=xpos;
y=ypos;
speed=s;
thick=t;
gray=g;
}
void update(){
strokeWeight(thick);
stroke(gray);
line(x,y,x+20,y-40);
line(x+10,y,x+30,y-40);
line(x+20,y,x+40,y-40);
x=x+speed;
if(x>100){
x=-100;
}
}
}
0-08

(page16)

以上这些例子作为正文前的引导概述了一些基础概念,并没有作详细的讲解。更多对于创作而言至关重要的思想只是一笔带过甚至省略不谈。稍后它们都会在这本书里做详细深入的讲解.

第一章 “Using Processing”翻译完毕
2007/10/19-10/26
www.imlab.cn/whale

by Whale | Posted in Processing.org | 6 Comments » | Tags:
October 1st, 2007

幸运遇到Keio SFC校区小檜山研究室的薛亮前辈!


SFC map 奥出研 小檜山研
原由 whaleforset 上載

遇到了小檜山研究室的薛亮前辈,他去年9月已经毕业在sfc附近的软件公司工作,今天聊了很久关于面试的注意事项,让我获益多多。
告诫我说一定要谦虚,不明白的一定要承认,还要多多准备话题,最好滔滔不绝让教授很难有发问的机会,只要做到不被问得没话说坚持到时间结束,应该就会成功通过。
嘿嘿,一定谨记教诲!希望顺利进入Keio media design奥出直人教授研究室!

by Whale | Posted in KMD | No Comments » |













Powered by Wordpress using the theme bbv1