詳細(xì)的processing學(xué)習(xí)筆記

1、processing 學(xué)習(xí)第一天筆記Processing Month第一天 連接點(diǎn) 第一部分這篇文章中，我們來(lái)看一下如何計(jì)算一個(gè)圓周上的點(diǎn)的坐標(biāo)，并將他們連接起來(lái)。我們將用靈活的方式來(lái)實(shí)現(xiàn)基于6個(gè)點(diǎn)和18個(gè)點(diǎn)的圖像計(jì)算要計(jì)算這些點(diǎn)的坐標(biāo)，必須知道圓上的點(diǎn)數(shù)量和圓的半徑。本例中，我們將畫(huà)12個(gè)點(diǎn)。int numPoint = 12;float radius = 150;下一步，我們來(lái)算一下每個(gè)點(diǎn)之間的角度。眾所周知一個(gè)整圓的角度是360度或2弧度，所以用360度除以圓上的點(diǎn)數(shù)，就得到兩點(diǎn)之間的角度。例子中使

2、用了弧度而不是角度，是因?yàn)?#160;cos() 和 sin() 函數(shù)的形參是弧度數(shù)，不是角度數(shù)。Processing中有一些關(guān)于圓和半圓的常量， TWO_PI 就代表了常量PI*2。（這里的PVector其實(shí)是類(lèi)型，代表這一個(gè)點(diǎn)）float   angle = TWO_PI / numPoint;for(int i=0  i<numberPoints;i+)    float x 

3、;= cos(angle * i ) * radius;    float y = sin(angle * i ) * radius;    pointi = new PVector(x,y );我把計(jì)算的部分放在了setup()里面，把結(jié)果存在了PVector數(shù)組里，這樣我們就不用在draw函數(shù)里一遍又一遍的計(jì)算點(diǎn)的x、y坐標(biāo)。我還用了

4、一個(gè)for循環(huán)，用來(lái)計(jì)算每個(gè)點(diǎn)的坐標(biāo)，*angle*i* 會(huì)在每個(gè)循環(huán)中計(jì)算出一個(gè)點(diǎn)的坐標(biāo)。繪制接下來(lái)我們說(shuō)一下，如何將圓上的點(diǎn)兩兩連線，我們需要用一個(gè)嵌套for循環(huán)，來(lái)遍歷數(shù)組中的每一個(gè)點(diǎn)。if語(yǔ)句用來(lái)比較i和j的數(shù)字，如果他們不相等，電腦就在這兩個(gè)點(diǎn)之間畫(huà)一條線。如果i和j相等，說(shuō)明是同一個(gè)點(diǎn)，那么就不用畫(huà)線了。for (int i = 0; i < numPoints; i+)     for (int j =&#

5、160;0; j < numPoints; j+)         if ( j != i )             line( points<i>.x, points<i>.y,pointsj.x,pointsj.y );&#

6、160;                    源碼：折疊展開(kāi)Java 代碼復(fù)制內(nèi)容到剪貼板1. int numPoints = 10;  2.  PVector points = new PVectornumPoints;  3.  float radius

7、 =150;  4. void  setup()  5.   6.   size(450,400);  7.   8.   float angle = TWO_PI/numPoints;  9.   for(int i=0;i<numPoints;i+)  10.     11. &

8、#160;   float x = cos(angle * i ) * radius;  12.     float y = sin(angle * i ) * radius;  13.     pointsi = new PVector(x,y); 

9、; 14.     15.   noLoop();  16.   17.   18. void draw()  19.   20.    smooth();  21.   22.  PImage img;  23. img = loadImage("images/laDefens

10、e.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);&#

11、160; 30.    translate(width/2,height/2);  31.    for(int i=0;i<numPoints;i+)  32.       for(int j=0;j<numPoints;j+)  33.           34. 

12、0;         if(j!=i)   35.            /  line( points<i>.x, points<i>.y,pointsj.x,pointsj.y );  36.       

13、60;  line( pointsi.x, pointsi.y,pointsj.x,pointsj.y );     37.             38.           39.      40. saveFrame(&qu

14、ot;images/circle-connection-"+numPoints+".png");  41.   成果：processing 學(xué)習(xí)第二天筆記第二天 連接點(diǎn)第二部分今天的例子和昨天的類(lèi)似，只不過(guò)我們將使用隨機(jī)點(diǎn)代替固定點(diǎn)，連接點(diǎn)的時(shí)候也將采用不同的方式。如果兩點(diǎn)之間的距離小于某一個(gè)我們定義的數(shù)，我們就把這兩個(gè)點(diǎn)連接起來(lái)。并且將連線的透明度與兩點(diǎn)距離相關(guān)聯(lián)，距離越大，連線就越透明。我們用 dist()函數(shù)來(lái)計(jì)算兩個(gè)點(diǎn)之間的距離。前兩個(gè)參數(shù)是第一個(gè)點(diǎn)的x坐標(biāo)和y坐標(biāo)。第三，第四個(gè)參數(shù)是另外一個(gè)點(diǎn)的

15、x坐標(biāo)和y坐標(biāo)。返回值為一個(gè)float類(lèi)型的數(shù)值，代表兩點(diǎn)之間的距離。如果距離小于255，我們就在這兩點(diǎn)之間連線。float dst = dist( points<i>.x, points<i>.y, pointsj.x,pointsj.y );if ( dst < 255 )     stroke( 255, 255 - dst ); 

16、   line( points<i>.x, points<i>.y, pointsj.x, pointsj.y );畫(huà)完這些細(xì)線之后，我們稍微放大點(diǎn)的體量，這樣會(huì)讓圖像更好看。以下這些代碼將加入到第一個(gè)for-loop循環(huán)的結(jié)尾、內(nèi)部循環(huán)之后。stroke( 255 );strokeWeight(4);point( points<i>.x, points<i>.y );源碼：折疊展開(kāi)Java 代碼復(fù)制內(nèi)容到剪貼板1.

17、int numPoints = 10;  2. PVector  points = new PVectornumPoints;void setup()  3.    4.   size(450,400);  5.  for(int i=0;i<numPoints;i+)  6.    7.   poin

18、tsi=new PVector(random(width),random(height);  8.    9.   noLoop();  10. void draw()  11.   12.   smooth();  13.   background(0);  14.   noFill();  15.   f

19、or(int i=0;i<numPoints;i+)  16.     for(int j=0;j<numPoints;j+)  17.         18.         strokeWeight(1);  19.        &

20、#160;if(j!=i)    20.             float dst = dist(pointsi.x,pointsj.y,pointsj.x,pointsj.y);  21.             if(dst<255)  

21、   22.                stroke(255,255-dst);  23.                line(pointsi.x,pointsi.y,pointsj.x,pointsj.y);  24.

22、                    25.             26.          27.     stroke(255); 

23、 28.     strokeWeight(4);  29.     point(pointsi.x,pointsi.y);  /節(jié)點(diǎn)畫(huà)點(diǎn)  30.     31.   saveFrame("images/random-connections-"+numPoints+".png");  32.   成果

24、60; processing第三天學(xué)習(xí)筆記第三天是關(guān)于繪制三角形的，但我們并不是直接使用 triangle()函數(shù)，而是畫(huà)點(diǎn)和線，我們會(huì)限制線條，只繪制基于規(guī)則三角形的網(wǎng)格。為了使它更有趣，稍后我們會(huì)加入一些動(dòng)畫(huà)效果。圖畫(huà)的起始點(diǎn)位于窗口中央，因?yàn)槲覀円咕€條動(dòng)起來(lái)，所以我們需要跟蹤當(dāng)前點(diǎn)和前一個(gè)點(diǎn)的位置，把它們用線連接起來(lái)。我們還需要一個(gè)半徑來(lái)計(jì)算新的點(diǎn)。我們最好在程序的開(kāi)頭就定義好這些變量。float radius = 20;float x, y;float prevX, prevY;下一步我們需要給

25、這些變量賦值。起始點(diǎn)設(shè)在窗口的中心，所以我們將 width和 height除以2，然后分別賦值給x和y。width和height是內(nèi)置系統(tǒng)變量，可以通過(guò)size()來(lái)賦值，并可以隨時(shí)調(diào)用。x = width / 2;y = height / 2;    prevX = x;prevY = y;接著，我們?cè)摼帉?xiě) draw()函數(shù)了。計(jì)算下一個(gè)點(diǎn)我們要用到 cos()和 sin()，它倆是我

26、們?cè)诘谝惶煊眠^(guò)的功能。因?yàn)槲覀円龅娜切问且?guī)則的，所以線條只需要在六個(gè)特定的方向移動(dòng)，算法很簡(jiǎn)單。1.三個(gè)角的度數(shù)之和是180度或者說(shuō)是PI2.我們做的是等邊三角形，所以每個(gè)角是180/3=60度3.一個(gè)圓是360度或者TWO_PI，如果我們用60去除，得到6個(gè)方向的線4.這些線的角度分別是0,60,120,180,240和300我想讓電腦去決定畫(huà)哪個(gè)方向，所以我用隨機(jī)數(shù)來(lái)計(jì)算方向。但是，random()功能所產(chǎn)生的結(jié)果是float值，而我想要的結(jié)果是0,1,2,3,4,5之間的整數(shù)，所以我加了一個(gè) floor()功能，它會(huì)達(dá)到取整的效果。float angle 

27、;= (TWO_PI / 6) * floor( random( 6 );x += cos( angle ) * radius;y += sin( angle ) * radius;這樣每次 draw()函數(shù)每調(diào)用一次點(diǎn)就會(huì)移動(dòng)到網(wǎng)格上的新位置。下一步我們需要在當(dāng)前點(diǎn)和前一個(gè)點(diǎn)之間畫(huà)線。我們還需要在 draw()的末尾將前一點(diǎn)替換為當(dāng)前點(diǎn)，否則在第一幀之后就不會(huì)有動(dòng)態(tài)了。str

28、oke( 255, 64 );strokeWeight( 1 );line( x, y, prevX, prevY );strokeWeight( 3 );point( x, y );/ update prevX and prevY with the new valuesprevX = x;prevY = y;如果你運(yùn)行程序會(huì)發(fā)

29、現(xiàn)線條不斷往窗口外擴(kuò)散回不來(lái)了。我們需要在確定x和y值之后實(shí)現(xiàn)一個(gè)算法來(lái)確保線條留在屏幕內(nèi)。我們要檢查新的x是不是小于0或者超出了寬度范圍。如果是這樣，我們要把x和y值還原成之前的值，這樣線條就不會(huì)超出窗口范圍了，y值也做相同處理。if ( x < 0 | x > width ) x = prevX;y = prevY;if ( y < 0 | y > 

30、height) x = prevX;y = prevY;為了使我們的圖畫(huà)更有趣，我們給背景加一個(gè)淡出效果，這樣那些線會(huì)像蛇一樣移動(dòng)。加入一個(gè)開(kāi)關(guān)功能使用鍵盤(pán)按鍵來(lái)控制這個(gè)效果。為了達(dá)到這樣的目的，我們需要在程序前加一個(gè)boolean變量。Boolean fade = true;下面的代碼應(yīng)當(dāng)放在 draw()函數(shù)的最前面，我們要先判斷fade值是不是為真。如果為真，if語(yǔ)句中的代碼會(huì)在最上層畫(huà)一個(gè)透明的長(zhǎng)方形。if (fade) noStroke();fill( 0,

31、0;4 );rect( 0, 0, width, height );想要關(guān)閉淡出效果，我們要用到keyPressed()這個(gè)方法，它會(huì)在每次鍵盤(pán)有按鍵動(dòng)作時(shí)被調(diào)用。如果用戶(hù)按了*f* 鍵，系統(tǒng)就切換一次fade的真假值。void keyPressed()if (key = 'f')     fade = !fade;運(yùn)行程序后你就能看到之前的線條都慢慢淡出背景，試一下f鍵關(guān)閉或啟用淡出效果。 

32、;源碼: 折疊展開(kāi)Java 代碼復(fù)制內(nèi)容到剪貼板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,4

33、00);  8.  background(0);  9.  stroke(255);  10.  x = width/2;  11.  y = height/2;  12.  prevX = x;  13.  prevY = y;  14.  stroke(255);  15.  

34、;strokeWeight(2);  16.  point(x,y);  17.    18.   19. void draw()  20.    21.  if(fade)  22.    noStroke();  23.    fill(0,4);  24.   / fill

35、(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&#

36、160;+= sin(angle) * radius;  30.    31.  if(x<0|x>width)  32.     x= prevX;  33.     y= prevY;  34.    35.    36.  if(y<0|y>heig

37、ht)  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)

38、;  44.  strokeWeight(3);  45.  point(x,y);  46.  prevX = x;  47.  prevY = y;  48.  if(saveOne)  49.  saveFrame("image/triangle-grid-" + second() + ".png&qu

39、ot;);  50.  saveOne = false;  51.    52.  delay(50);  53.    54. void keyPressed()  55.    if(key='f')  56.      fade =!fade;   

40、;  57.      58.      59.    if(key='s')  60.     saveOne = true;  61.      62.   效果顯示      floor(x)函數(shù):

41、計(jì)算最接近的小于或等于X的整數(shù)值Namefloor()Examplesfloat x = 2.88; int a = floor(x); / Sets 'a' to 2 DescriptionCalculates the closest int value that is less than or equal to the 

42、;value of the parameter. Syntax     floor(n)Parameters  n   float: number to round down Returns      int ceil(x)函數(shù):計(jì)算最接近的大于或等于X的整數(shù)值Name  ceil()Examplesfloat

43、0;x = 8.22; int a = floor(x); / Sets 'a' to 9DescriptionCalculates the closest int value that is greater than or equal to the value of the parameter. Fo

44、r example, ceil(9.03)returns the value 10. Syntax   floor(n)Parameters  n       float: number to round down Returns      intprocessing 第四天學(xué)習(xí)筆記今天我們來(lái)看一下如何使用p

45、rocessing繪制更復(fù)雜的圖形。我們會(huì)用到 beginShape(), endShape()和 vertex()這三個(gè)函數(shù)在屏幕上畫(huà)一個(gè)星星。最開(kāi)始我們聲明一些變量，用來(lái)計(jì)算星星的點(diǎn)：內(nèi)半徑，外半徑，尖角的個(gè)數(shù)和一個(gè)用來(lái)保存點(diǎn)坐標(biāo)的數(shù)組。需要注意的是，這個(gè)數(shù)組的元素個(gè)數(shù)是 2*numSpikes（尖角數(shù)量的兩倍），因?yàn)槠渲屑扔袃?nèi)半徑上的點(diǎn)又有外半徑上的點(diǎn)。float innerRadius = 70; float outerRadius = 180; int numSpikes&#

46、160;= 5; PVector points = new PVector numSpikes * 2  接下來(lái)的事情是計(jì)算繪制星星所需的所有點(diǎn)。我們需要確保這些點(diǎn)的順序，偶數(shù)點(diǎn)分布在外圈，奇數(shù)點(diǎn)在內(nèi)圈。要做到這個(gè)奇偶分布，我們需要使用取模運(yùn)算符。如果i%2的余數(shù)是0，那么這個(gè)點(diǎn)就是偶數(shù)點(diǎn)，分布在外圈。float angle = TWO_PI / points.length; for ( int i = 0

47、; i < points.length; i+ )      float x, y;     if ( i % 2 = 0 )          x = cos( angle * i ) * o

48、uterRadius;         y = sin( angle * i ) * outerRadius;      else          x = cos( angle * i ) * innerRadius;

49、         y = sin( angle * i ) * innerRadius;              points<i> = new PVector( x, y ); 想把星星繪制到屏幕上，我們使用 beginShape()

50、和 endShape()函數(shù)，利用我們計(jì)算的點(diǎn)來(lái)繪制。 我們?cè)谶@兩個(gè)函數(shù)中間，利用一個(gè)for循環(huán)來(lái)遍歷所有的數(shù)組，給每個(gè)點(diǎn)生成一個(gè)對(duì)應(yīng)的Vertex。確保你調(diào)用 endShape()函數(shù)時(shí)，參數(shù)為 CLOSE，否則的話，圖形就不會(huì)封閉。translate( width/2, height/2 ); beginShape(); for (int i = 0; i < points.length; i+)  vertex( 

51、points<i>.x, points<i>.y ); endShape(CLOSE); 源碼：折疊展開(kāi)Java 代碼復(fù)制內(nèi)容到剪貼板1. float innerRadius = 70;  2. float outerRadius = 180;  3. int numSpikes = 5;  4. PVector  points = new PVecto

52、rnumSpikes *2   5. void setup()  6.   size(450,400);  7.   float angle = TWO_PI /points.length;  8.   for(int i= 0;i<points.length;i+)  9.    float x,y;

53、  10.    if(i%2=0)  11.       x = cos(angle * i) * outerRadius;  12.       y = sin(angle * i) * outerRadius;  13.   

54、;   14.    else   15.        x = cos(angle * i ) * innerRadius;  16.        y = sin(angle * i ) * innerRa

55、dius;  17.      18.    pointsi = new PVector(x,y);  19.     20.   21. void draw()  22. background(0,0,32);  23. translate(width/2,height/2); /轉(zhuǎn)換width/2,height/2 

56、;中心點(diǎn)作為繪圖坐標(biāo)(0,0)  24. smooth();  25. fill(255,128,0);  26. noStroke();  27. beginShape();  28. for(int i =0 i< points.length;i+)  29.   vertex(pointsi.x,pointsi.y);  30.   31. endShape(CLO

57、SE);  32. saveFrame("images/star-" + numSpikes +".png");  33. /stroke(255);  34. /strokeWeight(1);  35. /color c = color(20,80,0);  36. /fill(c);  37. /beginShape(LINES);  38. /rec

58、t(30, 20,85, 80);  39. /ellipse(30, 20,85, 20);  40. /vertex(30, 20);  41. /vertex(85, 20);  42. /vertex(85, 75);  43. /vertex(30, 75);  44. /endShape();  45.   46. void mouse

59、Pressed()  47.   if(mouseButton = LEFT)  48.   numSpikes += 1; /增加一個(gè)角  49.   outerRadius -= 10;  50. PVector  points1 = new PVectornumSpikes *2  /改變星星的角數(shù)*2

60、  51. points = points1;  52.     53.   if(mouseButton = RIGHT)  54.   innerRadius += 10;  55.      56. setup();  57. redraw();  58.    成果： processing 第五天學(xué)習(xí)筆記 今天我們要學(xué)習(xí)一下如何通過(guò)疊加多個(gè)矩形來(lái)繪制一朵花。您將會(huì)用到 translate()和 rotate（）這兩個(gè)新的方法。第一步，使用 rectMode(CENTER)來(lái)使你的矩形以中心點(diǎn)方法繪制。 rect()函數(shù)的默認(rèn)方法是從矩形左上角的角點(diǎn)開(kāi)始繪