您好,欢迎访问三七文档
当前位置:首页 > 商业/管理/HR > 质量控制/管理 > 详细的processing学习笔记
processing学习第一天笔记ProcessingMonth第一天连接点第一部分这篇文章中,我们来看一下如何计算一个圆周上的点的坐标,并将他们连接起来。我们将用灵活的方式来实现基于6个点和18个点的图像计算要计算这些点的坐标,必须知道圆上的点数量和圆的半径。本例中,我们将画12个点。intnumPoint=12;floatradius=150;下一步,我们来算一下每个点之间的角度。众所周知一个整圆的角度是360度或2π弧度,所以用360度除以圆上的点数,就得到两点之间的角度。例子中使用了弧度而不是角度,是因为cos()和sin()函数的形参是弧度数,不是角度数。Processing中有一些关于圆和半圆的常量,TWO_PI就代表了常量PI*2。(这里的PVector其实是类型,代表这一个点)floatangle=TWO_PI/numPoint;for(inti=0;inumberPoints;i++){floatx=cos(angle*i)*radius;floaty=sin(angle*i)*radius;point[i]=newPVector(x,y);}我把计算的部分放在了setup()里面,把结果存在了PVector数组里,这样我们就不用在draw函数里一遍又一遍的计算点的x、y坐标。我还用了一个for循环,用来计算每个点的坐标,**angle*i**会在每个循环中计算出一个点的坐标。绘制接下来我们说一下,如何将圆上的点两两连线,我们需要用一个嵌套for循环,来遍历数组中的每一个点。if语句用来比较i和j的数字,如果他们不相等,电脑就在这两个点之间画一条线。如果i和j相等,说明是同一个点,那么就不用画线了。for(inti=0;inumPoints;i++){for(intj=0;jnumPoints;j++){if(j!=i){line(pointsi.x,pointsi.y,points[j].x,points[j].y);}}}源码:折叠Java代码复制内容到剪贴板1.intnumPoints=10;2.PVector[]points=newPVector[numPoints];3.floatradius=150;4.voidsetup()5.{6.size(450,400);7.8.floatangle=TWO_PI/numPoints;9.for(inti=0;inumPoints;i++)10.{11.floatx=cos(angle*i)*radius;12.floaty=sin(angle*i)*radius;13.points[i]=newPVector(x,y);14.}15.noLoop();16.}17.18.voiddraw()19.{20.smooth();21.22.PImageimg;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(inti=0;inumPoints;i++){32.for(intj=0;jnumPoints;j++)33.{34.if(j!=i){35.//line(pointsi.x,pointsi.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,我们就在这两点之间连线。floatdst=dist(pointsi.x,pointsi.y,points[j].x,points[j].y);if(dst255){stroke(255,255-dst);line(pointsi.x,pointsi.y,points[j].x,points[j].y);}画完这些细线之后,我们稍微放大点的体量,这样会让图像更好看。以下这些代码将加入到第一个for-loop循环的结尾、内部循环之后。stroke(255);strokeWeight(4);point(pointsi.x,pointsi.y);源码:折叠Java代码复制内容到剪贴板1.intnumPoints=10;2.PVector[]points=newPVector[numPoints];voidsetup()3.{4.size(450,400);5.for(inti=0;inumPoints;i++)6.{7.points[i]=newPVector(random(width),random(height));8.}9.noLoop();10.}voiddraw()11.{12.smooth();13.background(0);14.noFill();15.for(inti=0;inumPoints;i++){16.for(intj=0;jnumPoints;j++)17.{18.strokeWeight(1);19.if(j!=i){20.floatdst=dist(points[i].x,points[j].y,points[j].x,points[j].y);21.if(dst255){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()函数,而是画点和线,我们会限制线条,只绘制基于规则三角形的网格。为了使它更有趣,稍后我们会加入一些动画效果。图画的起始点位于窗口中央,因为我们要使线条动起来,所以我们需要跟踪当前点和前一个点的位置,把它们用线连接起来。我们还需要一个半径来计算新的点。我们最好在程序的开头就定义好这些变量。floatradius=20;floatx,y;floatprevX,prevY;下一步我们需要给这些变量赋值。起始点设在窗口的中心,所以我们将width和height除以2,然后分别赋值给x和y。width和height是内置系统变量,可以通过size()来赋值,并可以随时调用。x=width/2;y=height/2;prevX=x;prevY=y;接着,我们该编写draw()函数了。计算下一个点我们要用到cos()和sin(),它俩是我们在第一天用过的功能。因为我们要做的三角形是规则的,所以线条只需要在六个特定的方向移动,算法很简单。1.三个角的度数之和是180度或者说是PI2.我们做的是等边三角形,所以每个角是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()功能,它会达到取整的效果。floatangle=(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);//updateprevXandprevYwiththenewvaluesprevX=x;prevY=y;如果你运行程序会发现线条不断往窗口外扩散回不来了。我们需要在确定x和y值之后实现一个算法来确保线条留在屏幕内。我们要检查新的x是不是小于0或者超出了宽度范围。如果是这样,我们要把x和y值还原成之前的值,这样线条就不会超出窗口范围了,y值也做相同处理。if(x0||xwidth){x=prevX;y=prevY;}if(y0||yheight){x=prevX;y=prevY;}为了使我们的图画更有趣,我们给背景加一个淡出效果,这样那些线会像蛇一样移动。加入一个开关功能使用键盘按键来控制这个效果。为了达到这样的目的,我们需要在程序前加一个boolean变量。Booleanfade=true;下面的代码应当放在draw()函数的最前面,我们要先判断fade值是不是为真。如果为真,if语句中的代码会在最上层画一个透明的长方形。if(fade){noStroke();fill(0,4);rect(0,0,width,height);}想要关闭淡出效果,我们要用到keyPressed()这个方法,它会在每次键盘有按键动作时被调用。如果用户按了**f**键,系统就切换一次fade的真假值。voidkeyPressed(){if(key=='f'){fade=!fade;}}运行程序后你就能看到之前的线条都慢慢淡出背景,试一下f键关闭或启用淡出效果。源码:折叠Java代码复制内容到剪贴板1.floatradius=40;2.floatx,y;3.floatprevX,prevY;4.Booleanfade=true;5.BooleansaveOne=false;6.voidsetup(){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.voiddraw(){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.floatangle=(TWO_PI/6)*floor(random(6));28.x+=cos(angle)*radius;29.y+=sin(angle)*radius;30.31.if(x0||xwidth){32.x=prevX;33.y=prevY;34.}35.36.if(y0||yheight)
本文标题:详细的processing学习笔记
链接地址:https://www.777doc.com/doc-4368775 .html