{"id":588,"date":"2014-08-29T08:45:51","date_gmt":"2014-08-29T15:45:51","guid":{"rendered":"http:\/\/www.imaginary-institute.com\/blog\/?p=588"},"modified":"2014-08-29T08:45:51","modified_gmt":"2014-08-29T15:45:51","slug":"noise-blending-implementation","status":"publish","type":"post","link":"https:\/\/www.imaginary-institute.com\/blog\/2014\/08\/29\/noise-blending-implementation\/","title":{"rendered":"Noise Blending Implementation"},"content":{"rendered":"

\"colornoise\"Some people have asked for an implementation of the noise blending technique in my previous post. Here’s the Processing code for the core idea. Keep in mind that this is just about making a smoothly changing noise field; what you do with that noise is up to you!<\/p>\n

The best way to implement this (and the way I did it!) is to use my AU library. Then you can save 2D arrays of floats in AUField<\/code> objects, which are easy to make and manipulate. But that library hasn’t been released yet (I just added another function this morning!), so this listing is just pure out-of-the-box Processing.<\/p>\n

\"noiseLoop\"<\/a>The only weirdness is the variable ListOfNoiseArrays<\/code>, which is of type float[][][]<\/code>. If you haven’t seen this kind of thing before, don’t worry: it’s just a 3D array. Think of it as a stack of slices. The first index tells you which slice to use, and the second and third indices tell you the row and column of the pixel you want on that slice.<\/p>\n

Conveniently, the value of ListOfNoiseArrays.length <\/code>returns the length of the first index. That is, it’s the number of slices that the array holds. So this gives us an easy way to find out how many noise fields we’re blending through without needing to keep a separate global variable. This image shows the output as an animated gif; if it’s not animating, click it to see it in motion.<\/p>\n

\/\/ A little sketch to demonstrate the multiple noise field interpolation technique.\r\n\/\/ No guarantee or warranty of any kind. You may use and distribute this freely.\r\n\/\/ Andrew Glassner, August 28, 2014\r\n\r\nfloat[][][] ListOfNoiseArrays; \/\/ global to hold list of noise fields\r\n\r\nvoid setup() {\r\n  size(500, 500);\r\n  int numFields = 4; \/\/ how many fields you want to use. Must be > 0\r\n  ListOfNoiseArrays = new float[numFields][height][width]; \/\/ create the array\r\n  for (int n=0; n<ListOfNoiseArrays.length; n++) { \/\/ for each field n,\r\n    for (int y=0; y<height; y++) { \/\/ look at all the pixels\r\n      for (int x=0; x<width; x++) {\r\n        float noiseX = (x*.02) + (n*width); \/\/ .02 was chosen by eye; it's\r\n        float noiseY = (y*.02) + (n*height); \/\/ not too simple or busy\r\n        ListOfNoiseArrays[n][y][x] = noise(noiseY, noiseX); \/\/ save this value\r\n      }\r\n    }\r\n  }\r\n}\r\n\r\nvoid draw() {\r\n  int cycleLength = 25; \/\/ number of frames to get from one field to another\r\n  \/\/ Find n, the index of the first field in the set of 4 we're going to blend\r\n  int n = (int)((frameCount*1.\/cycleLength) % ListOfNoiseArrays.length);\r\n  \/\/ Find alfa, a value from 0 to 1 telling us where we are in this blend\r\n  float alfa = ((frameCount - (n*cycleLength))\/(1.*cycleLength)) % 1.0;\r\n  \/\/ Now build up the noise field for every pixel. I'll draw it, but typically\r\n  \/\/ we'd save this in an array and use it to generate our graphics.\r\n  loadPixels();\r\n  for (int y=0; y<height; y++) {\r\n    for (int x=0; x<width; x++) {\r\n      \/\/ Find the four values of n that are the fields we're going to interpolate\r\n      int n0 = n;\r\n      int n1 = (n0+1)%ListOfNoiseArrays.length;\r\n      int n2 = (n1+1)%ListOfNoiseArrays.length;\r\n      int n3 = (n2+1)%ListOfNoiseArrays.length;\r\n      \/\/ Evaulate a Catmull-Rom curve through the values for this pixel\r\n      float v = curvePoint(ListOfNoiseArrays[n0][y][x], ListOfNoiseArrays[n1][y][x],\r\n                           ListOfNoiseArrays[n2][y][x], ListOfNoiseArrays[n3][y][x], alfa);\r\n      pixels[(y*width)+x] = color(255 * v); \/\/ save noise value as a shade of gray\r\n    }\r\n  }\r\n  updatePixels();\r\n}\r\n<\/pre>\n","protected":false},"excerpt":{"rendered":"
Some people have asked for an implementation of the noise blending technique in my previous post. Here’s the Processing code for the core idea. Keep in mind that this is just about making a smoothly changing noise field; what you do with that noise is up to you!<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[1],"tags":[],"class_list":["post-588","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"jetpack_sharing_enabled":true,"jetpack_featured_media_url":"","_links":{"self":[{"href":"https:\/\/www.imaginary-institute.com\/blog\/wp-json\/wp\/v2\/posts\/588","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.imaginary-institute.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.imaginary-institute.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.imaginary-institute.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.imaginary-institute.com\/blog\/wp-json\/wp\/v2\/comments?post=588"}],"version-history":[{"count":21,"href":"https:\/\/www.imaginary-institute.com\/blog\/wp-json\/wp\/v2\/posts\/588\/revisions"}],"predecessor-version":[{"id":611,"href":"https:\/\/www.imaginary-institute.com\/blog\/wp-json\/wp\/v2\/posts\/588\/revisions\/611"}],"wp:attachment":[{"href":"https:\/\/www.imaginary-institute.com\/blog\/wp-json\/wp\/v2\/media?parent=588"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.imaginary-institute.com\/blog\/wp-json\/wp\/v2\/categories?post=588"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.imaginary-institute.com\/blog\/wp-json\/wp\/v2\/tags?post=588"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}