{"id":279,"date":"2011-11-17T23:52:15","date_gmt":"2011-11-18T07:52:15","guid":{"rendered":"http:\/\/new.joyofprocessing.com\/blog\/?p=279"},"modified":"2011-11-17T23:53:16","modified_gmt":"2011-11-18T07:53:16","slug":"oilspill","status":"publish","type":"post","link":"https:\/\/joyofprocessing.com\/blog\/2011\/11\/oilspill\/","title":{"rendered":"Oilspill"},"content":{"rendered":"<p>Like the New York Times crossword, I&#8217;m doing the easy stuff on Monday and the tricky stuff on Fridays.  Here&#8217;s a tricky one.<\/p>\n<p><script type=\"application\/processing\">\/\/ Oilspill 2.1 (Feb 15 '06)\n\/\/\n\/\/ original by Jim Bumgardner\n\/\/ Port by Ryan Govostes and Jim Bumgardner\n\nPVector noisePos = new PVector(0,0,0), curPos = new PVector(0,0,0);\nint  frameNbr = 0;\nint  startTime = millis();\nPImage offs;\n\nvoid setup() {\n  size(500,500);\n  colorMode(HSB, 2);\n  background(0);\n  noiseDetail(1);\n\n  offs = createImage(width\/2,  height\/2, ARGB);\n}\n\nvoid draw() {\n  float d, n;\n  curPos.set(noisePos.x,noisePos.y,noisePos.z);\n  int w2 = offs.width \/ 2;\n  int h2 = offs.height \/ 2;\n\n  offs.loadPixels();\n  \n  int offset = 0;\n  for (int y = 0; y < offs.height; y ++) {\n    curPos.x = noisePos.x;\n    for (int x = 0; x < offs.width; x ++) {\n        d = dist(x, y, w2, h2) * 0.03;\n\n        n = noise(curPos.x, curPos.y, noisePos.z)*0.5;\n        \n        \/\/ determine pixel color\n        offs.pixels[offset ++] = color(1 - sin(d + n * 3) % 2, \n                                       sin(d + n * 2) * .5 + 1, \n                                       sq(cos(d + n)) + 1);\n      \n      curPos.x += 0.0625; \/\/ = x\/16.0\n    }\n    curPos.y += 0.0625;\n  }\n  \n  \/\/ move through noise space -> animation\n  noisePos.add(0.13,0.007,0.01);\n  \n  offs.updatePixels();\n  image(offs,0,0,width,height);\n\n  \/******** I Used this to measure performance - it prints the average frame rate\n            every 100 frames\n  \n  ++frameNbr;\n  if (frameNbr >= 100) {\n      int endTime = millis();\n      int  elapsed = endTime - startTime;\n      float myFrameRateMS = 100 \/ (float) elapsed;\n      println(myFrameRateMS*1000 + \" fps\");\n      startTime = millis();\n      frameNbr = 0;\n  }\n******\/\n\n}\n\n\n<\/script><\/p>\n<div class=\"ps_cap\"><a href=\"\/showexample.php?ex=oilspill\">source<\/a><\/div>\n<p>The Tricky ones can be CPU hogs.  This sketch, based on one I did in C++ back in the 90s (before Processing) does a lot of expensive floating point calculations for each pixel, including the expensive dist(), noise(), sin(), cos() and sq().  If this were done for every single pixel shown here, it would poke along pretty slowly.<\/p>\n<p>To speed things up, I&#8217;m rendering to an offscreen bitmap that is 1\/2 the width and 1\/2 the height.  This is then doubled when it is copied onscreen.  If I didn&#8217;t tell you, you probably wouldn&#8217;t notice that the pixels are doubled.  A lot of websites that display large videos use the same trick; it provides a 4X speed improvement.  On my MacBook Pro this gets me to about 12 &#8211; 16 frames per second, using Processing.js.  In the Java version of Processing, I get about 38 fps.<\/p>\n<p>In a few years, Moore&#8217;s law will allow sketches like these to go much faster.  Also, this kind of sketch can blaze when accomplished using the pixel shader on your graphics card!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Like the New York Times crossword, I&#8217;m doing the easy stuff on Monday and the tricky stuff on Fridays. Here&#8217;s a tricky one. source The Tricky ones can be CPU hogs. This sketch, based on one I did in C++ back in the 90s (before Processing) does a lot of expensive floating point calculations for [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[21,11,23],"class_list":["post-279","post","type-post","status-publish","format-standard","hentry","category-uncategorized","tag-advanced","tag-animation","tag-noise"],"_links":{"self":[{"href":"https:\/\/joyofprocessing.com\/blog\/wp-json\/wp\/v2\/posts\/279","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/joyofprocessing.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/joyofprocessing.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/joyofprocessing.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/joyofprocessing.com\/blog\/wp-json\/wp\/v2\/comments?post=279"}],"version-history":[{"count":5,"href":"https:\/\/joyofprocessing.com\/blog\/wp-json\/wp\/v2\/posts\/279\/revisions"}],"predecessor-version":[{"id":284,"href":"https:\/\/joyofprocessing.com\/blog\/wp-json\/wp\/v2\/posts\/279\/revisions\/284"}],"wp:attachment":[{"href":"https:\/\/joyofprocessing.com\/blog\/wp-json\/wp\/v2\/media?parent=279"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/joyofprocessing.com\/blog\/wp-json\/wp\/v2\/categories?post=279"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/joyofprocessing.com\/blog\/wp-json\/wp\/v2\/tags?post=279"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}