《Processing介绍》由会员分享，可在线阅读，更多相关《Processing介绍（53页珍藏版）》请在金锄头文库上搜索。
1、Processing介绍一种快捷的图形表达工具一种快捷的图形表达工具范乐明范乐明上海大学上海大学介绍 Processing 是由 Ben Fry 和 Casey Reas 开发的开源软件. 它由Java发展而来，为艺术家和设计师所设计. 简单。它使得我们可以直接专注于图形和交互的程序，而不需要考虑很多麻烦的任务，比如建立类的路径和编译参数，或者建立窗口和图形环境这样辅助性的图形环境。友好。有非常活跃的社区和用户，非常容易得到支持。2021/6/42021/6/4范乐明范乐明上海大学上海大学使用环境坐标系统左上角为原点。2021/6/42021/6/4范乐明范乐明上海大学上海大学三种模式 基础型
2、（Basic ） 画静态图像。活动型（ Continuous ）setup() 初始设置。draw() 不断的运行，直到停止。Java 型。最复杂，最灵活，写java程序。2021/6/42021/6/4范乐明范乐明上海大学上海大学注释/* 或者 /* 结束 */. /*多行注释可以说明程序结构，使得更为清晰可读2021/6/42021/6/4范乐明范乐明上海大学上海大学调试（debugging）print() println()此两个函数在调试窗口输出参数2021/6/42021/6/4范乐明范乐明上海大学上海大学变量variables 变量是程序的核心通过指定名称来读写内存中的数据变量包括
3、 name 和 type. 接收外部输入创造通用解决方案输入的细小变化引起输出巨大改变2021/6/42021/6/4范乐明范乐明上海大学上海大学命名name / identifier 名字/识别符有限长度的字母或数字不能java的保留词以字母或_开头Valid names 有效 foo, foo_bar, f00, _foo, xposition Invalid names 无效35foo, $bar, 245, (, true, int 2021/6/42021/6/4范乐明范乐明上海大学上海大学驼峰命名 camelCasing 小写开头易读2021/6/42021/6/4范乐明范乐明上海
4、大学上海大学数据类型type 变量存储的类别。 取值的范围。int : 非负自然数. In Processing, 范围 -2147483648 , 2147483647 操作符operators: +, -, *, DIV, MOD浮点数 floatIn Processing, 范围 -3.40282347E+38 , 3.40282347E+38 操作符: +, -, *, /, square root, . boolean : 两个值: true and false操作符: AND, OR, NOT, .2021/6/42021/6/4范乐明范乐明上海大学上海大学using variab
5、les 使用变量变量首先要声明（ declared）表示让程序为它保留一些内存空间2021/6/42021/6/4范乐明范乐明上海大学上海大学好的编程习惯初始化变量后立即赋值赋值运算符 =2021/6/42021/6/4范乐明范乐明上海大学上海大学变量只能初始化一次但值可以多次赋予2021/6/42021/6/4范乐明范乐明上海大学上海大学变量可以读出2021/6/42021/6/4范乐明范乐明上海大学上海大学variables for modularity变量的模块性画一个点2021/6/42021/6/4范乐明范乐明上海大学上海大学另一种方式2021/6/42021/6/4范乐明范乐明上海
6、大学上海大学每隔二十个像素画一个点丑陋，hardcoding2021/6/42021/6/4范乐明范乐明上海大学上海大学漂亮2021/6/42021/6/4范乐明范乐明上海大学上海大学内建变量built-in variables 只读，不能赋值 mouseX / mouseY : 当前鼠标值 width / height : 当前窗口的长宽 frameCount : 当前帧的数量，从程序开始.2021/6/42021/6/4范乐明范乐明上海大学上海大学/ set the size of the displaysize(200, 200);/ set the background color t
7、o whitebackground(255);/ draw three points along the horizontal axisint spacing = 20;int xPos = width/2;int yPos = height/2;point(xPos-spacing, yPos);point(xPos, yPos);point(xPos+spacing, yPos);2021/6/42021/6/4functions 函数范乐明范乐明上海大学上海大学函数是特定名称的一系列代码，在一个更大的程序里面执行某种任务在面向对象编程中，也被称为方法method黑箱模型2021/6/42
8、021/6/4范乐明范乐明上海大学上海大学函数的作用定义一次，多次使用。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 sub-units. 代码易读，易维护和易再用They help in writing code that is readable, maintainable and reusable
9、 2021/6/42021/6/4范乐明范乐明上海大学上海大学使用函数using functions To declare or define a function in Processing, you use the following format: 2021/6/42021/6/4范乐明范乐明上海大学上海大学例子2021/6/42021/6/4范乐明范乐明上海大学上海大学call 调用调用变量类型相同数量相同2021/6/42021/6/4范乐明范乐明上海大学上海大学调用的例子2021/6/42021/6/4范乐明范乐明上海大学上海大学variable scope 变量范围global
10、全局变量local 局部变量应该把大段代码编程小段的函数，从而易于理解全局变量尽量少用2021/6/42021/6/4范乐明范乐明上海大学上海大学/ global variables, accessible throughout the programint 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)
11、; fill(255, 0, 0); ellipse(width/2, height/2, circleSize, circleSize);void draw() / mouseX and mouseY are global built-in variables circle(mouseX, mouseY);/ x and y are local variables passed as parametersvoid circle(int x, int y) / fillColor is a local variable int fillColor = 255; fill(fillColor);
12、 ellipse(x, y, circleSize, circleSize);2021/6/42021/6/4范乐明范乐明上海大学上海大学built-in functions 内在函数很多内在函数，参考Reference 2021/6/42021/6/4范乐明范乐明上海大学上海大学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 shapefill(100, 100, 200); / blue
13、/ draw a rectangle with the upper left-hand corner at (25,50)/ and its width and height both equal to 100rect(25, 50, 100, 100); / use fill() to specify what color should be inside the shapefill(255, 100, 0); / orange/ use stroke() to specify the color of the outlinestroke(100, 100, 255); / blue2021
14、/6/42021/6/4范乐明范乐明上海大学上海大学/ draw an ellipse centered at (280,150), with/ its width equal to 100, and its height equal to 75ellipse(280, 150, 100, 75);/ use strokeWeight() to specify the width of the outlinestrokeWeight(3);/ draw a triangle with points at (30,275), (58,225), and (186,350)triangle(30,
15、 275, 58, 225, 186, 350);/ use noStroke() to not draw an outlinenoStroke();/ use fill() to specify what color should be inside the shapefill(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);2021/6/42021/6/4范乐
16、明范乐明上海大学上海大学custom shapes 自定义形状vertex() 放在 beginShape() 和 endShape() 中间2021/6/42021/6/4范乐明范乐明上海大学上海大学void setup() size(400, 400); smooth(); noStroke();void draw() background(0); / draw a star at the current mouse position fill(216, 61, 4); drawStar(mouseX, mouseY, 100); void drawStar(int xPos, int y
17、Pos, 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();2021/6/42021/6/4范乐明范乐明上海大学
18、上海大学composite expressions 复合表达式数字运算numerical operators 10 + 500 变量variables a + width - 10 函数functions random() + myAngle() 数学运算mathematical operators (which are also functions) log(500) + b 2021/6/42021/6/4范乐明范乐明上海大学上海大学常用函数round()abs()ceil()floor()random()sqrt()2021/6/42021/6/4范乐明范乐明上海大学上海大学int mi
19、nSize = 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) / draw the outer square first fill(254, 255, 0); stroke(255, 1
20、66, 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);2021/6/42021/6/4范乐明范乐明上海大学上海大学一些短的操作符a += b; is equivalent to a = a+b; a
21、 -= 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; 2021/6/42021/6/4范乐明范乐明上海大学上海大学实际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 += 25;: add
22、s 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 2021/6/42021/6/4范乐明范乐明上海大学上海大学operator precedence 操作符的优先级int a = 10;int b = 5;int c = 12;int d = 2;and evaluate the following expressions: a + b
23、* c / d10 + 5 * 12 / 210 + 60 / 210 + 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 352021/6/42021/6/4范乐明范乐明上海大学上海大学datatype conversion 数据类型转换有时候会出错加 int运算符2021/6/42021/6/4范乐明范乐明上海大学上海大学原来程序加入 abs() 跟踪鼠标速度2021/6/42021/6/4范乐明范乐明上海
24、大学上海大学void setup() size(400, 400); smooth(); noStroke();void draw() background(0); / 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(i
25、nt 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();2021/6/42021
26、/6/4color 色彩范乐明范乐明上海大学上海大学默认的色彩空间是RGB/255。RGB三通道0-255的值color(red, green, blue) 函数color(val) 函数灰度值 0-255大于255，作为RGB值也可以用16进制hexadecimal 2021/6/42021/6/4范乐明范乐明上海大学上海大学2021/6/42021/6/4范乐明范乐明上海大学上海大学色彩模式转化colorMode(mode)(RGB or HSB)colorMode(mode, range) 指定色彩范围2021/6/42021/6/4范乐明范乐明上海大学上海大学transparency
27、透明度 色彩带透明度属性，Alpha通道color(), fill(), and stroke(), but NOT background(). / draw a red circlefill(1.0, 0, 0, 0.5);ellipse(125, 125, 100, 100);/ draw a green circlefill(0, 1.0, 0, 0.5);ellipse(150, 175, 100, 100);/ draw a blue circlefill(0, 0, 1.0, 0.5);ellipse(175, 125, 100, 100);2021/6/42021/6/4范乐明范
28、乐明上海大学上海大学运动模糊效果 motion blur effect. 把 background() 用 半透明的rect() 覆盖整个画面2021/6/42021/6/4范乐明范乐明上海大学上海大学练习一个脸脸必须要有眼，鼻子和嘴巴The face must have eyes, a nose, and a mouth. 必须在画布上任何地方都可以画出脸You should be able to draw the face anywhere on the canvas. 可以用任何尺寸画脸；所有特征都可以缩放You should be able to draw the face at an
29、y size; all features should resize themselves accordingly. 程序用drawSmiley() ， drawHead(), drawEyes(), drawNose(), drawMouth(),等. The applet should be built such that you call a function drawSmiley() which takes parameters for the position and dimensions of the face. This function should in turn call
30、the functions drawHead(), drawEyes(), drawNose(), drawMouth(), etc. to draw the different parts of the face. drawSmiley()函数传递所有的参数给子函数The drawSmiley() function should pass down the parameters to all the other functions in order to make all the features draw themselves in the right place and at the right size. 2021/6/42021/6/4范乐明范乐明上海大学上海大学2021/6/42021/6/4部分资料从网络收集整理而来，供大家参考，感谢您的关注！
