{"id":689,"date":"2009-11-13T15:45:24","date_gmt":"2009-11-13T07:45:24","guid":{"rendered":"http:\/\/test999.eblhost.com\/blog\/?p=689"},"modified":"2009-11-13T17:22:15","modified_gmt":"2009-11-13T09:22:15","slug":"processing-js%e6%b5%8b%e8%af%95","status":"publish","type":"post","link":"https:\/\/learn.travelchinawith.me\/?p=689","title":{"rendered":"Processing.js\u6d4b\u8bd5"},"content":{"rendered":"<p><script type=\"application\/processing\">\nint xspacing = 8;   \/\/ How far apart should each horizontal location be spaced\nint w;              \/\/ Width of entire wave\nint maxwaves = 4;   \/\/ total # of waves to add together\nfloat theta = 0.0f;\nfloat[] amplitude = new float[maxwaves];   \/\/ Height of wave\nfloat[] dx = new float[maxwaves];          \/\/ Value for incrementing X, to be calculated as a function of period and xspacing\nfloat[] yvalues;                           \/\/ Using an array to store height values for the wave (not entirely necessary)\nvoid setup() {\n  size(200,200);\n  frameRate(30);\n  colorMode(RGB,255,255,255,100);\n  smooth();\n  w = width+16;\nfor (int i = 0; i < maxwaves; i++) {\n    amplitude[i] = random(10,30);\n    float period = random(100,300); \/\/ How many pixels before the wave repeats\n    dx[i] = (TWO_PI \/ period) * xspacing;\n  }\nyvalues = new float[w\/xspacing];\n}\nvoid draw() {\n  background(0);\n  calcWave();\n  renderWave();\n}\nvoid calcWave() {\n  \/\/ Increment theta (try different values for 'angular velocity' here\n  theta += 0.02;\n\/\/ Set all height values to zero\n  for (int i = 0; i < yvalues.length; i++) {\n    yvalues[i] = 0.0f;\n  }\n\/\/ Accumulate wave height values\n  for (int j = 0; j < maxwaves; j++) {\n    float x = theta;\n    for (int i = 0; i < yvalues.length; i++) {\n      \/\/ Every other wave is cosine instead of sine\n      if (j % 2 == 0)  yvalues[i] += sin(x)*amplitude[j];\n      else yvalues[i] += cos(x)*amplitude[j];\n      x+=dx[j];\n    }\n  }\n}\nvoid renderWave() {\n  \/\/ A simple way to draw the wave with an ellipse at each location\n  noStroke();\n  fill(255,50);\n  ellipseMode(CENTER);\n  for (int x = 0; x < yvalues.length; x++) {\n    ellipse(x*xspacing,width\/2+yvalues[x],16,16);\n  }\n}\n<\/script><canvas width=\"200\" height=\"200\"><\/canvas><\/p>\n<p><dirtycode>\/\/ Written by Casey Reas and Ben Fry.<\/p>\n<p>int xspacing = 8;   \/\/ How far apart should each horizontal location be spaced<br \/>\nint w;              \/\/ Width of entire wave<br \/>\nint maxwaves = 4;   \/\/ total # of waves to add together<\/p>\n<p>float theta = 0.0f;<br \/>\nfloat[] amplitude = new float[maxwaves];   \/\/ Height of wave<br \/>\nfloat[] dx = new float[maxwaves];          \/\/ Value for incrementing X, to be calculated as a function of period and xspacing<br \/>\nfloat[] yvalues;                           \/\/ Using an array to store height values for the wave (not entirely necessary)<\/p>\n<p>void setup() {<br \/>\n  size(200,200);<br \/>\n  frameRate(30);<br \/>\n  colorMode(RGB,255,255,255,100);<br \/>\n  smooth();<br \/>\n  w = width+16;<\/p>\n<p>  for (int i = 0; i < maxwaves; i++) {\n    amplitude[i] = random(10,30);\n    float period = random(100,300); \/\/ How many pixels before the wave repeats\n    dx[i] = (TWO_PI \/ period) * xspacing;\n  }\n\n  yvalues = new float[w\/xspacing];\n}\n\nvoid draw() {\n  background(0);\n  calcWave();\n  renderWave();\n}\n\nvoid calcWave() {\n  \/\/ Increment theta (try different values for 'angular velocity' here\n  theta += 0.02;\n\n  \/\/ Set all height values to zero\n  for (int i = 0; i < yvalues.length; i++) {\n    yvalues[i] = 0.0f;\n  }\n \n  \/\/ Accumulate wave height values\n  for (int j = 0; j < maxwaves; j++) {\n    float x = theta;\n    for (int i = 0; i < yvalues.length; i++) {\n      \/\/ Every other wave is cosine instead of sine\n      if (j % 2 == 0)  yvalues[i] += sin(x)*amplitude[j];\n      else yvalues[i] += cos(x)*amplitude[j];\n      x+=dx[j];\n    }\n  }\n}\n\nvoid renderWave() {\n  \/\/ A simple way to draw the wave with an ellipse at each location\n  noStroke();\n  fill(255,50);\n  ellipseMode(CENTER);\n  for (int x = 0; x < yvalues.length; x++) {\n    ellipse(x*xspacing,width\/2+yvalues[x],16,16);\n  }\n}\n<\/dirtycode><\/p>\n<p><strong>NOTE:<\/strong> Processing.js runs in FireFox, Safari, Opera, Chrome and will also work with Internet Explorer, using <a href=\"http:\/\/excanvas.sourceforge.net\/\">Explorer Canvas<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>\/\/ Written by Casey Reas and Ben Fry. int xspacing = 8; \/\/ How far apart should each horizontal location be spaced int w; \/\/ Width of entire wave int maxwaves = 4; \/\/ total # of waves to add together float theta = 0.0f; float[] amplitude = new float[maxwaves]; \/\/ Height of wave float[] [&hellip;]<\/p>\n","protected":false},"author":4,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[57],"tags":[62],"class_list":["post-689","post","type-post","status-publish","format-standard","hentry","category-processing","tag-processing-diy"],"blocksy_meta":[],"_links":{"self":[{"href":"https:\/\/learn.travelchinawith.me\/index.php?rest_route=\/wp\/v2\/posts\/689","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/learn.travelchinawith.me\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/learn.travelchinawith.me\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/learn.travelchinawith.me\/index.php?rest_route=\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/learn.travelchinawith.me\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=689"}],"version-history":[{"count":17,"href":"https:\/\/learn.travelchinawith.me\/index.php?rest_route=\/wp\/v2\/posts\/689\/revisions"}],"predecessor-version":[{"id":706,"href":"https:\/\/learn.travelchinawith.me\/index.php?rest_route=\/wp\/v2\/posts\/689\/revisions\/706"}],"wp:attachment":[{"href":"https:\/\/learn.travelchinawith.me\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=689"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/learn.travelchinawith.me\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=689"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/learn.travelchinawith.me\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=689"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}