Processing介绍PPT学习课件

// use noStroke() to not draw an outline noStroke(); // use fill() to specify what color should be inside the shape fill(185, 17, 39); // red // draw a quad with points at (240,240), (390,320), // (360,380), and (220,350) quad(240, 240, 390, 320, 360, 380, 220, 350);
– 接收外部输入 – 创造通用解决方案 – 输入的细小变化引起输出巨大改变
上海大学
范乐明
命名
➢ name / identifier 名字/识别符
– 有限长度的字母或数字 – 不能java的保留词 – 以字母或_开头
➢ Valid names 有效
– foo, foo_bar, f00, _foo, xposition
Processing介绍
一种快捷的图形表达工具
介绍
➢ Processing 是由 Ben Fry 和 Casey Reas 开发的开源软 件. 它由Java发展而来，为艺术家和设计师所设计.
➢ 简单。
– 它使得我们可以直接专注于图形和交互的程序，而不需要考虑很 多麻烦的任务，比如建立类的路径和编译参数，或者建立窗口和 图形环境这样辅助性的图形环境。
}
// x and y are local variables passed as parameters void circle(int x, int y) {
// fillColor is a local variable int fillColor = 255;
fill(fillColor); ellipse(x, y, circleSize, circleSize); }
// use fill() to specify what color should be inside the shape fill(255, 100, 0); // orange // use stroke() to specify the color of the outline stroke(100, 100, 255); // blue
范乐明
composite expressions 复合表达式
➢ 数字运算numerical operators
– 10 + 500
➢ 变量variables
– a + width - 10
➢ 函数functions
– random() + myAngle()
➢ 数学运算mathematical operators (which are also functions)
上海大学
范乐明
使用函数using functions
➢To declare or define a function in Processing, you use the following format:
上海大学
范乐明
例子
上海大学
范乐明
➢调用
➢变量
– 类型相同 – 数量相同
上海大学
call 调用
➢ Invalid names 无效
– 35foo, $bar, 245, (, true, int
上海大学
范乐明
➢驼峰命名 camelCasing
– 小写开头 – 易读
上海大学
范乐明
数据类型 type
➢ 变量存储的类别。 取值的范围。 ➢ int :: 非负自然数.
– In Processing, 范围 [ -2147483648 , 2147483647 ] – 操作符operators: +, -, *, DIV, MOD
始.
上海大学
范乐明
// set the size of the display size(200, 200);
// set the background color to white background(255);
// draw three points along the horizontal axis int spacing = 20; int xPos = width/2; int yPos = height/2; point(xPos-spacing, yPos); point(xPos, yPos); point(xPos+spacing, yPos);
➢ 友好。
– 有非常活跃的社区和用户，非常容易得到支持。
上海大学
范乐明
➢ 坐标系统
– 左上角为原点。
使用环境
上海大学
范乐明
三种模式
➢ 基础型（Basic ）
– 画静态图像。
➢活动型（ Continuous ）
– setup() 初始设置。 – draw() 不断的运行，直到停止。
➢Java 型。最复杂，最灵活，写java程序。
➢ 浮点数 float
– In Processing, 范围 [ -3.40282347E+38 , 3.40282347E+38 ] – 操作符: +, -, *, /, square root, ...
➢ boolean :: 两个值: true and false
– 操作符: AND, OR, NOT, ...
范乐明
built-in functions 内在函数
➢很多内在函数， ➢参考Reference
上海大学
范乐明
shapes
// draw a line from (200,10) to (210,380) line(200, 10, 210, 380);
// use fill() to specify what color should be inside the shape fill(100, 100, 200); // blue // draw a rectangle with the upper left-hand corner at (25,50) // and its width and height both equal to 100 rect(25, 50, 100, 100);
int circleSize = 25;
void setup() { size(400, 400); smooth(); background(255); stroke(0);
// xPos and yPos are local variables int xPos = 200; int yPos = 100; circle(xPos, yPos);
➢ 把大段程序重构为有意义的子单元。
– They provide a means of deconstructing a program into meaningful sub-units.
➢ 代码易读，易维护和易再用
– They help in writing code that is readable, maintainable and reusable
– log(500) + b
上海大学
范乐明
➢ 常用函数
– round() – abs() – ceil() – floor() – random() – sqrt()
上海大学
范乐明
int minSize = 50; int maxSize = 100;
void setup() { size(400, 400); smooth(); rectMode(CENTER); strokeWeight(2);
范乐明
➢调用的例子
上海大学
范乐明
variable scope 变量范围
➢global 全局变量 ➢local 局部变量 ➢应该把大段代码编程小段的函数，从而易
于理解 ➢全局变量尽量少用
上海大学
范乐明
// global variables, accessible throughout the program
上海大学
范乐明
functions 函数
➢函数是特定名称的一系列代码，在一个更 大的程序里面执行某种任务
➢在面向对象编程中，也被称为方法method ➢黑箱模型
上海大学
范乐明
函数的作用
➢ 定义一次，多次使用。
– They allow a program to employ a sequence of code multiple times from a single definition.
variables for modularity 变量的模块性
➢画一个点
上海大学
范乐明
➢另一种方式
上海大学
范乐明
➢每隔二十个像素画一个点
– 丑陋，hardcoding
上海大学
范乐明
➢漂亮
上海大学
范乐明
内建变量built-in variables
➢只读，不能赋值 ➢ mouseX / mouseY :: 当前鼠标值 ➢ width / height :: 当前窗口的长宽 ➢ frameCount :: 当前帧的数量，从程序开
}
void draw() { drawSquares(random(width), random(height), random(minSize, maxSize));
上海大学
范乐明
➢ // ➢ /** 或者 /* 结束 */.
– /**多行
➢ 注释可以说明程序结 构，使得更为清晰可 读
上海大学
注释
范乐明
调试（debugging）
➢print() ➢ println() ➢此两个函数在调试窗口输出参数
上海大学
范乐明
变量variables
➢变量是程序的核心 ➢通过指定名称来读写内存中的数据 ➢变量包括 name 和 type.
// draw a star at the current mouse position fill(216, 61, 4); drawStar(mouseX, mouseY, 100); }
}
上海大学
void drawStar(int xPos, int yPos, int starSize) { beginShape(); vertex(xPos, yPos-starSize/2); vertex(xPos-starSize/3, yPos+starSize/2); vertex(xPos+starSize/2, yPos-starSize/8); vertex(xPos-starSize/2, yPos-starSize/8); vertex(xPos+starSize/3, yPos+starSize/2); vertex(xPos, yPos-starSize/2); endShape();
上海大学
fill(255, 0, 0); ellipse(width/2, height/2, circleSize, circleSize); }
void draw() { // mouseX and mouseY are global built-in variables circle(mouseX, mouseY);
上海大学
范乐明
custom shapes 自定义形状
➢vertex() ➢放在 beginShape() 和 endShape() 中间
上海大学
范乐明
void setup() { size(400, 400); smooth(); noStroke();
}
void draw() { background(0);
上海大学
范乐明
using variables 使用变量
➢变量首先要声明（ declared） ➢表示让程序为它保留一些内存空间
上海大学
范乐明
➢好的编程习惯
– 初始化变量后立即赋值 – 赋值运算符 =
上海大学
范乐明
➢变量只能初始化一次 ➢但值可以多次赋予
上海大学
范乐明
➢变量可以读出
上海大学
范乐明
上海大学
范乐明
// draw an ellipse centered at (280,150), with // its width equal to 100, and its height equal to 75 ellipse(280, 150, 100, 75);
// use strokeWeight() to specify the width of the outline strokeWeight(3); // draw a triangle with points at (30,275), (58,225), and (186,350) triangle(30, 275, 58, 225, 186, 350);