详细的processing学习笔记.docx
- 文档编号:25064197
- 上传时间:2023-06-04
- 格式:DOCX
- 页数:42
- 大小:1.20MB
详细的processing学习笔记.docx
《详细的processing学习笔记.docx》由会员分享,可在线阅读,更多相关《详细的processing学习笔记.docx(42页珍藏版)》请在冰豆网上搜索。
详细的processing学习笔记
processing学习第一天笔记
Processing Month第一天 连接点 第一部分
这篇文章中,我们来看一下如何计算一个圆周上的点的坐标,并将他们连接起来。
我们将用灵活的方式来实现基于6个点和18个点的图像
计算
要计算这些点的坐标,必须知道圆上的点数量和圆的半径。
本例中,我们将画12个点。
int numPoint = 12;
float radius = 150;
下一步,我们来算一下每个点之间的角度。
众所周知一个整圆的角度是360度或2π弧度,所以用360度除以圆上的点数,就得到两点之间的角度。
例子中使用了弧度而不是角度,是因为 cos() 和 sin() 函数的形参是弧度数,不是角度数。
Processing中有一些关于圆和半圆的常量, TWO_PI 就代表了常量PI*2。
(这里的PVector其实是类型,代表这一个点)
float angle = TWO_PI / numPoint;
for(int i=0 ; i float x = cos(angle * i ) * radius; float y = sin(angle * i ) * radius; point[i] = new PVector(x,y ); } 我把计算的部分放在了setup()里面,把结果存在了PVector数组里,这样我们就不用在draw函数里一遍又一遍的计算点的x、y坐标。 我还用了一个for循环,用来计算每个点的坐标,**angle*i** 会在每个循环中计算出一个点的坐标。 绘制 接下来我们说一下,如何将圆上的点两两连线,我们需要用一个嵌套for循环,来遍历数组中的每一个点。 if语句用来比较i和j的数字,如果他们不相等,电脑就在这两个点之间画一条线。 如果i和j相等,说明是同一个点,那么就不用画线了。 for (int i = 0; i < numPoints; i++) { for (int j = 0; j < numPoints; j++) { if ( j ! = i ) { line( points.x, points.y,points[j].x,points[j].y ); } } } 源码: 折叠展开Java代码复制内容到剪贴板 1.int numPoints = 10; 2. PVector[] points = new PVector[numPoints]; 3. float radius =150; 4.void setup() 5.{ 6. size(450,400); 7. 8. float angle = TWO_PI/numPoints; 9. for(int i=0;i 10. { 11. float x = cos(angle * i ) * radius; 12. float y = sin(angle * i ) * radius; 13. points[i] = new PVector(x,y); 14. } 15. noLoop(); 16.} 17. 18.void draw() 19.{ 20. smooth(); 21. 22. PImage img; 23.img = loadImage("images/laDefense.jpg"); 24.background(img); 25. // background(0); //background(0,0,255); 26. 27. //fill(0,0,255); 28. // fill(255,102,255); 29. stroke(0,0,255,60); 30. translate(width/2,height/2); 31. for(int i=0;i 32. for(int j=0;j 33. { 34. if(j! =i) { 35. // line( points.x, points.y,points[j].x,points[j].y ); 36. line( points[i].x, points[i].y,points[j].x,points[j].y ); 37. } 38. } 39. } 40.saveFrame("images/circle-connection-"+numPoints+".png"); 41.} 成果: processing学习第二天笔记 第二天 连接点第二部分 今天的例子和昨天的类似,只不过我们将使用随机点代替固定点,连接点的时候也将采用不同的方式。 如果两点之间的距离小于某一个我们定义的数,我们就把这两个点连接起来。 并且将连线的透明度与两点距离相关联,距离越大,连线就越透明。 我们用 dist()函数来计算两个点之间的距离。 前两个参数是第一个点的x坐标和y坐标。 第三,第四个参数是另外一个点的x坐标和y坐标。 返回值为一个float类型的数值,代表两点之间的距离。 如果距离小于255,我们就在这两点之间连线。 float dst = dist( points.x, points.y, points[j].x,points[j].y ); if ( dst < 255 ) { stroke( 255, 255 - dst ); line( points.x, points.y, points[j].x, points[j].y ); } 画完这些细线之后,我们稍微放大点的体量,这样会让图像更好看。 以下这些代码将加入到第一个for-loop循环的结尾、内部循环之后。 stroke( 255 ); strokeWeight(4); point( points.x, points.y ); 源码: 折叠展开Java代码复制内容到剪贴板 1.int numPoints = 10; 2.PVector [] points = new PVector[numPoints];void setup() 3. { 4. size(450,400); 5. for(int i=0;i 6. { 7. points[i]=new PVector(random(width),random(height)); 8. } 9. noLoop(); 10.}void draw() 11.{ 12. smooth(); 13. background(0); 14. noFill(); 15. for(int i=0;i 16. for(int j=0;j 17. { 18. strokeWeight (1); 19. if(j! =i) { 20. float dst = dist(points[i].x,points[j].y,points[j].x,points[j].y); 21. if(dst<255) { 22. stroke(255,255-dst); 23. line(points[i].x,points[i].y,points[j].x,points[j].y); 24. } 25. } 26. } 27. stroke(255); 28. strokeWeight(4); 29. point(points[i].x,points[i].y); //节点画点 30. } 31. saveFrame("images/random-connections-"+numPoints+".png"); 32.} 成果 processing第三天学习笔记 第三天是关于绘制三角形的,但我们并不是直接使用 triangle()函数,而是画点和线,我们会限制线条,只绘制基于规则三角形的网格。 为了使它更有趣,稍后我们会加入一些动画效果。 图画的起始点位于窗口中央,因为我们要使线条动起来,所以我们需要跟踪当前点和前一个点的位置,把它们用线连接起来。 我们还需要一个半径来计算新的点。 我们最好在程序的开头就定义好这些变量。 float radius = 20; float x, y; float prevX, prevY; 下一步我们需要给这些变量赋值。 起始点设在窗口的中心,所以我们将 width和 height除以2,然后分别赋值给x和y。 width和height是内置系统变量,可以通过size()来赋值,并可以随时调用。 x = width / 2; y = height / 2; prevX = x; prevY = y; 接着,我们该编写 draw()函数了。 计算下一个点我们要用到 cos()和 sin(),它俩是我们在第一天用过的功能。 因为我们要做的三角形是规则的,所以线条只需要在六个特定的方向移动,算法很简单。 1.三个角的度数之和是180度或者说是PI 2.我们做的是等边三角形,所以每个角是180/3=60度 3.一个圆是360度或者TWO_PI,如果我们用60去除,得到6个方向的线 4.这些线的角度分别是0,60,120,180,240和300 我想让电脑去决定画哪个方向,所以我用随机数来计算方向。 但是,random()功能所产生的结果是float值,而我想要的结果是0,1,2,3,4,5之间的整数,所以我加了一个 floor()功能,它会达到取整的效果。 float angle = (TWO_PI / 6) * floor( random( 6 )); x += cos( angle ) * radius; y += sin( angle ) * radius; 这样每次 draw()函数每调用一次点就会移动到网格上的新位置。 下一步我们需要在当前点和前一个点之间画线。 我们还需要在 draw()的末尾将前一点替换为当前点,否则在第一帧之后就不会有动态了。 stroke( 255, 64 ); strokeWeight( 1 ); line( x, y, prevX, prevY ); strokeWeight( 3 ); point( x, y ); // update prevX and prevY with the new values prevX = x; prevY = y; 如果你运行程序会发现线条不断往窗口外扩散回不来了。 我们需要在确定x和y值之后实现一个算法来确保线条留在屏幕内。 我们要检查新的x是不是小于0或者超出了宽度范围。 如果是这样,我们要把x和y值还原成之前的值,这样线条就不会超出窗口范围了,y值也做相同处理。 if ( x < 0 || x > width ) { x = prevX; y = prevY; } if ( y < 0 || y > height) { x = prevX; y = prevY; } 为了使我们的图画更有趣,我们给背景加一个淡出效果,这样那些线会像蛇一样移动。 加入一个开关功能使用键盘按键来控制这个效果。 为了达到这样的目的,我们需要在程序前加一个boolean变量。 Boolean fade = true; 下面的代码应当放在 draw()函数的最前面,我们要先判断fade值是不是为真。 如果为真,if语句中的代码会在最上层画一个透明的长方形。 if (fade) { noStroke(); fill( 0, 4 ); rect( 0, 0, width, height ); } 想要关闭淡出效果,我们要用到keyPressed()这个方法,它会在每次键盘有按键动作时被调用。 如果用户按了**f** 键,系统就切换一次fade的真假值。 void keyPressed(){ if (key == 'f') { fade = ! fade; } } 运行程序后你就能看到之前的线条都慢慢淡出背景,试一下f键关闭或启用淡出效果。 源码: 折叠展开Java代码复制内容到剪贴板 1.float radius = 40; 2.float x,y; 3.float prevX,prevY; 4.Boolean fade = true; 5.Boolean saveOne = false; 6.void setup(){ 7. size(450,400); 8. background(0); 9. stroke(255); 10. x = width/2; 11. y = height/2; 12. prevX = x; 13. prevY = y; 14. stroke(255); 15. strokeWeight (2); 16. point(x,y); 17. 18.} 19.void draw(){ 20. 21. if(fade){ 22. noStroke(); 23. fill(0,4); 24. // fill(random(204),random(100),random(20),4); 25. rect(0,0,width,height); 26. } 27. float angle = (TWO_PI/6) * floor(random(6)); 28. x += cos(angle) * radius; 29. y += sin(angle) * radius; 30. 31. if(x<0||x>width){ 32. x= prevX; 33. y= prevY; 34. } 35. 36. if(y<0||y>height){ 37. x = prevX; 38. y = prevY; 39. } 40. // stroke(255,64); 41. stroke(255,0,0,100); 42. strokeWeight (1); 43. line(x,y,prevX,prevY); 44. strokeWeight(3); 45. point(x,y); 46. prevX = x; 47. prevY = y; 48. if(saveOne){ 49. saveFrame("image/triangle-grid-" + second() + ".png"); 50. saveOne = false; 51. } 52. delay(50); 53. } 54.void keyPressed(){ 55. if(key=='f'){ 56. fade =! fade; 57. } 58. 59. if(key=='s'){ 60. saveOne = true; 61. } 62.} 效果显示 floor(x)函数: 计算最接近的小于或等于X的整数值 Namefloor() Examples float x = 2.88; int a = floor(x); // Sets 'a' to 2 DescriptionCalculates the closest int value that is less than or equal to the value of the parameter. Syntax floor(n) Parameters n float: number to round down Returns int ceil(x)函数: 计算最接近的大于或等于X的整数值 Name ceil() Examples float x = 8.22; int a = floor(x); // Sets 'a' to 9 DescriptionCalculates the closest int value that is greater than or equal to the value of the parameter. For example, ceil(9.03)returns the value 10. Syntax floor(n) Parameters n float: number to round down Returns int processing第四天学习笔记 今天我们来看一下如何使用processing绘制更复杂的图形。 我们会用到 beginShape(), endShape()和 vertex()这三个函数在屏幕上画一个星星。 最开始我们声明一些变量,用来计算星星的点: 内半径,外半径,尖角的个数和一个用来保存点坐标的数组。 需要注意的是,这个数组的元素个数是 2*numSpikes(尖角数量的两倍),因为其中既有内半径上的点又有外半径上的点。 float innerRadius = 70;float outerRadius = 180;int numSpikes = 5;PVector[] points = new PVector[ numSpikes * 2 ]; 接下来的事情是计算绘制星星所需的所有点。 我们需要确保这些点的顺序,偶数点分布在外圈,奇数点在内圈。 要做到这个奇偶分布,我们需要使用取模运算符。 如果i%2的余数是0,那么这个点就是偶数点,分布在外圈。 float angle = TWO_PI / points.length;for ( int i = 0; i < points.length; i++ ) { float x, y; if ( i % 2 == 0 ) { x = cos( angle * i ) * outerRadius; y = sin( angle * i ) * outerRadius; } else { x = cos( angle * i ) * innerRadius; y = sin( angle * i ) * innerRadius; } points = new PVector( x, y );} 想把星星绘制到屏幕上,我们使用 beginShape()和 endShape()函数,利用我们计算的点来绘制。 我们在这两个函数中间,利用一个for循环来遍历所有的数组,给每个点生成一个对应的Vertex。 确保你调用 endShape()函数时,参数为 CLOSE,否则的话,图形就不会封闭。 translate( width/2, height/2 );beginShape();for (int i = 0; i < points.length; i++) {vertex( points.x, points.y ); } endShape(CLOSE); 源码: 折叠展开Java代码复制内容到剪贴板 1.float innerRadius = 70; 2.float outerRadius = 180; 3.int numSpikes = 5; 4.PVector [] points = new PVector[numSpikes *2 ]; 5.void setup(){ 6. size(450,400); 7. float angle = TWO_PI /points.length; 8. for(int i= 0;i 9. float x,y; 10. if(i%2==0){ 11. x = cos(angle * i) * outerRadius; 12. y = sin(angle * i) * outerRadius; 13. } 14. else { 15. x = cos(angle * i ) * innerRadius; 16. y = sin(angle * i ) * innerRadius; 17. } 18. points[i] = new PVector(x,y); 19. } 20.} 21.void draw(){ 22.background(0,0,32); 23.translate(width/2,height/2); //转换width/2,height/2 中心点作为绘图坐标(0,0) 24.smooth(); 25.fill(255,128,0); 26.noStroke(); 27.beginShape(); 28.for(int i =0 ;i< points.length;i++){ 29. vertex(points[i].x,points[i].y); 30.} 31.endShape(CLOSE); 32.saveFrame("images/star-" + numSpikes +".png"); 33.//stroke(255); 34.//strokeWeight (1); 35.//color c = color(20,80,0); 36.//fill(c); 37.//beginShape(L
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 详细 processing 学习 笔记