Processing介绍PPT课件

1、Processing介绍,一种快捷的图形表达工具,.,介绍,Processing 是由 Ben Fry 和 Casey Reas 开发的开源软件. 它由Java发展而来，为艺术家和设计师所设计. 简单。 它使得我们可以直接专注于图形和交互的程序，而不需要考虑很多麻烦的任务，比如建立类的路径和编译参数，或者建立窗口和图形环境这样辅助性的图形环境。 友好。 有非常活跃的社区和用户，非常容易得到支持。,.,使用环境,坐标系统 左上角为原点。,.,三种模式,基础型（Basic ） 画静态图像。 活动型（ Continuous ） setup() 初始设置。 draw() 不断的运行，直到停止。 Jav

2、a 型。最复杂，最灵活，写java程序。,.,注释,/ /* 或者 /* 结束 */. /*多行 注释可以说明程序结构，使得更为清晰可读,.,调试（debugging）,print() println() 此两个函数在调试窗口输出参数,.,变量variables,变量是程序的核心 通过指定名称来读写内存中的数据 变量包括 name 和 type. 接收外部输入 创造通用解决方案 输入的细小变化引起输出巨大改变,.,命名,name / identifier 名字/识别符 有限长度的字母或数字 不能java的保留词 以字母或_开头 Valid names 有效 foo, foo_bar, f00,

3、 _foo, xposition Invalid names 无效 35foo, $bar, 245, (, true, int,.,驼峰命名 camelCasing 小写开头 易读,.,数据类型type,变量存储的类别。 取值的范围。 int : 非负自然数. In Processing, 范围 -2147483648 , 2147483647 操作符operators: +, -, *, DIV, MOD 浮点数 float In Processing, 范围 -3.40282347E+38 , 3.40282347E+38 操作符: +, -, *, /, square root, .

4、boolean : 两个值: true and false 操作符: AND, OR, NOT, .,.,using variables 使用变量,变量首先要声明（ declared） 表示让程序为它保留一些内存空间,.,好的编程习惯 初始化变量后立即赋值 赋值运算符 =,.,变量只能初始化一次 但值可以多次赋予,.,变量可以读出,.,variables for modularity变量的模块性,画一个点,.,另一种方式,.,每隔二十个像素画一个点 丑陋，hardcoding,.,漂亮,.,内建变量built-in variables,只读，不能赋值 mouseX / mouseY : 当前鼠

5、标值 width / height : 当前窗口的长宽 frameCount : 当前帧的数量，从程序开始.,.,/ 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,

6、yPos); point(xPos+spacing, yPos);,functions 函数,.,函数是特定名称的一系列代码，在一个更大的程序里面执行某种任务 在面向对象编程中，也被称为方法method 黑箱模型,.,函数的作用,定义一次，多次使用。 They allow a program to employ a sequence of code multiple times from a single definition. 把大段程序重构为有意义的子单元。 They provide a means of deconstructing a program into meaningful s

7、ub-units. 代码易读，易维护和易再用 They help in writing code that is readable, maintainable and reusable,.,使用函数using functions,To declare or define a function in Processing, you use the following format:,.,例子,.,call 调用,调用 变量 类型相同 数量相同,.,调用的例子,.,variable scope 变量范围,global 全局变量 local 局部变量 应该把大段代码编程小段的函数，从而易于理解 全局

8、变量尽量少用,.,/ global variables, accessible throughout the program 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);,fill(255, 0, 0); ellipse(width/2, height/2, circleSize, circl

9、eSize); void draw() / mouseX and mouseY are global built-in variables circle(mouseX, mouseY); / 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); ,.,built-in function

10、s 内在函数,很多内在函数， 参考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 r

11、ect(25, 50, 100, 100); / 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,.,/ draw an ellipse centered at (280,150), with / its width equal to 100, and its height equal to 75 ellip

12、se(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); / use noStroke() to not draw an outline noStroke(); / use fill() to specify what color should be i

13、nside 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);,.,custom shapes 自定义形状,vertex() 放在 beginShape() 和 endShape() 中间,.,void setup() size(400, 400); smooth(); noStroke(); void draw() backgro

14、und(0); / 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/

15、2, yPos-starSize/8); vertex(xPos+starSize/3, yPos+starSize/2); vertex(xPos, yPos-starSize/2); endShape();,.,composite expressions 复合表达式,数字运算numerical operators 10 + 500 变量variables a + width - 10 函数functions random() + myAngle() 数学运算mathematical operators (which are also functions) log(500) + b,.,常用

16、函数 round() abs() ceil() floor() random() sqrt(),.,int minSize = 50; int maxSize = 100; void setup() size(400, 400); smooth(); rectMode(CENTER); strokeWeight(2); void draw() drawSquares(random(width), random(height), random(minSize, maxSize); ,void drawSquares(float xPos, float yPos, float sqSize) /

17、draw the outer square first fill(254, 255, 0); stroke(255, 166, 0); drawSquare(xPos, yPos, sqSize); / draw the inner square next fill(252, 233, 8); stroke(216, 61, 4); drawSquare(xPos, yPos, sqSize/2); void drawSquare(float xPos, float yPos, float sqSize) rect(xPos, yPos, sqSize, sqSize); ,.,一些短的操作符

18、 a += b; is equivalent to a = a+b; a -= b; is equivalent to a = a-b; a *= b; is equivalent to a = a*b; a /= b; is equivalent to a = a/b; a+; is equivalent to a = a+1; a-; is equivalent to a = a-1;,.,实际 x = x+1;x+;x += 1;: adds 1 to the value of x and makes the result the new value of x x = x+25;x +=

19、 25;: adds 25 to the value of x and makes the result the new value of x x = x-1;x-;x -= 1;: subtracts 1 from the value of x and makes the result the new value of x,.,operator precedence 操作符的优先级,int a = 10; int b = 5; int c = 12; int d = 2; and evaluate the following expressions: a + b * c / d 10 + 5

20、 * 12 / 2 10 + 60 / 2 10 + 30 40,( a + b) * c / d (10 + 5) * 12 / 2 15 * 12 / 2 180 / 2 90 ( a + (b * c) / d (10 + (5 * 12) / 2 (10 + 60) / 2 70 / 2 35,.,datatype conversion 数据类型转换,有时候会出错 加 int运算符,.,原来程序加入 abs() 跟踪鼠标速度,.,void setup() size(400, 400); smooth(); noStroke(); void draw() background(0); /

21、 draw a star at the current mouse position with size relative to the mouse movement fill(216, 61, 4); int avgMove = int(abs(pmouseX-mouseX)+abs(pmouseY-mouseY)/2); drawStar(mouseX, mouseY, avgMove*5); ,void drawStar(int xPos, int yPos, int starSize) beginShape(); vertex(xPos, yPos-starSize/2); verte

22、x(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();,color 色彩,.,默认的色彩空间是RGB/255。RGB三通道0-255的值 color(red, green, blue) 函数 color(val) 函数 灰度值 0-255 大于

23、255，作为RGB值 也可以用16进制hexadecimal,.,.,色彩模式转化,colorMode(mode) (RGB or HSB) colorMode(mode, range) 指定色彩范围,.,transparency 透明度,色彩带透明度属性，Alpha通道 color(), fill(), and stroke(), but NOT background(). / draw a red circle fill(1.0, 0, 0, 0.5); ellipse(125, 125, 100, 100); / draw a green circle fill(0, 1.0, 0, 0.5); ellipse(150, 175, 100, 100); / draw a blue circle fill(0, 0, 1.0, 0.5); ellipse(175, 125, 100, 100);,.,运动模糊效果 motion blur effect. 把 background() 用 半透明的rect() 覆盖整个画面,.,练习一个脸,脸必须要有眼，鼻子和嘴巴 The face m