UsingProcessingExampleWalkThrough < Processing

r5 - 21 Dec 2007 - 13:25:19 - WhaleForestYou are here: TWiki >

Processing Web > ProcessingHandbookChinese > UsingProcessingExampleWalkThrough

(page11)

Example walk-through

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

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

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 < num; i++) {
            dx[i]=dx[i]+1;
            if(dx[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)

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

-- FlamingoEda - 06 Nov 2007

Processing

Copyright © by the contributing authors. All material on this collaboration platform is the property of the contributing authors.
Ideas, requests, problems regarding TWiki? Send feedback