{"id":236,"date":"2012-02-25T17:06:48","date_gmt":"2012-02-25T15:06:48","guid":{"rendered":"https:\/\/esimov.com\/blog\/?p=236"},"modified":"2019-04-29T13:50:39","modified_gmt":"2019-04-29T11:50:39","slug":"organic-turing-pattern","status":"publish","type":"post","link":"https:\/\/esimov.com\/blog\/2012\/02\/25\/organic-turing-pattern\/","title":{"rendered":"Organic Turing Pattern"},"content":{"rendered":"<p>In this post i will present an experiment which i did a few months earlier, but because lately i was pretty occupied with various job related activities and with setting up this new blog (transferring the old content to the new host &#8211; plus a lot of other stuff), i have no time to publish this new experiment. More about below, but until then a few words about the background, inspiration and some of the key challenge i have faced during this process.<\/p>\n<p><a href=\"https:\/\/esimov.com\/experiments\/AS3\/turing-pattern.html\"><img decoding=\"async\" class=\"aligncenter size-full wp-image-253\" title=\"Turing pattern\" alt=\"\" src=\"https:\/\/esimov.com\/blog\/wp-content\/uploads\/2012\/02\/turing-pattern-600x600.png\" \/><\/a><\/p>\n<p>This is an experiment inspired by a thoroughly explained <a href=\"http:\/\/softologyblog.wordpress.com\/2011\/07\/05\/multi-scale-turing-patterns\/\">article <\/a>about the concept behind what is generally known as Turing Pattern. The Turing Patterns has become a key attraction in fact thanks to Jonathan McCabe popular paper <a href=\"http:\/\/www.jonathanmccabe.com\/Cyclic_Symmetric_Multi-Scale_Turing_Patterns.pdf\">Cyclic Symmetric Mutli-Scale Turing Patterns<\/a> in which he explains the process behind the image generation algorithm like that one below, about what Frederik Vanhoutte know as <a href=\"http:\/\/www.wblut.com\">W:blut<\/a> wrote on his <a href=\"http:\/\/www.wblut.com\/2011\/07\/13\/mccabeism-turning-noise-into-a-thing-of-beauty\/\">post<\/a>:<\/p>\n<blockquote>\n<p><img decoding=\"async\" src=\"\/assets\/images\/quote-left.png\" width=30 class=\"quote-left\" alt=\"Quote left\">If you\u2019ve seen any real\u00adity zoo\/wild-life pro\u00adgram you\u2019ll rec\u00adog\u00adnize this. Five min\u00adutes into the show you\u2019re con\u00adfronted with a wounded, mag\u00adnif\u00adi\u00adcent ani\u00admal, held in cap\u00adtiv\u00adity so its care\u00adtak\u00aders can nur\u00adture and feed it. And inevitably, after three com\u00admer\u00adcial breaks, they release it, teary-eyed, back into the wild. It\u2019s a piv\u00adotal moment that turns their leop\u00adard into anyone\u2019s\/no one\u2019s leop\u00adard.<img decoding=\"async\" src=\"\/assets\/images\/quote-right.png\"  width=30 class=\"quote-right\" alt=\"Quote right\"><\/p>\n<\/blockquote>\n<div class=\"wp-image-253\" style=\"text-align:center\"><iframe loading=\"lazy\" scrolling=\"no\" src=\"https:\/\/esimov.com\/experiments\/AS3\/turing-pattern.html\" width=\"600\" height=\"600\" style=\"border:1px black solid; width: 600px; margin: 0px;\"><\/iframe><\/div>\n<p>That&#8217;s the feeling which emanates when you first see the organic like, somehow obscure (some may go even further and say: macabre or creepy) thing which is known as a Turing pattern. At first moment when you are confronted with it, some kind of emotion (be that fear or amazement or just a sight) is resurfaced. Definitely won&#8217;t let you neutral.<\/p>\n<p>This is the emotion which pushed me to try to implement it in Actionscript. (In parentheses be said this is not the best platform for computation intensive experiments.) <a href=\"https:\/\/twitter.com\/#!\/Flexi23\">Felix Woitzel<\/a> did an amazing <del datetime=\"2012-02-24T11:39:36+00:00\">remake<\/del> <a href=\"http:\/\/cake23.de\/traveling-wavefronts-lit-up.html\">adaptation <\/a>of the original pattern in WebGL. The performance with a good GPU is quite impressive. Maybe in the future i will try to port in WebGL. Anyway, there is another nice <a href=\"http:\/\/softologyblog.wordpress.com\/2011\/07\/05\/multi-scale-turing-patterns\/\">article <\/a>by Jason Rampe, where he explains the algorithm of the Turing Pattern.<\/p>\n<p>So let&#8217;s face directly and dissect the core components of the algorithm.<\/p>\n<h2>The basic concept<\/h2>\n<p>The process is based on a series of different &#8220;turing&#8221; scales. Each scale has different values for activator, inhibitor, radius, amount and levels. We use a two dimensional grid which will be the basic container for activator, inhibitor and variations, all of them going to be of typed arrays (in our case <code>Vectors.&lt;&gt;<\/code>). At the first phase we will initialize the grid with random points between -1 and 1. In the next step we have to determine the shape of the pattern. For this case w&#8217;ll use a formula defined by the following method:<\/p>\n<pre class=\" language-javascript\"><code class=\" language-javascript\"><span class=\"token keyword\">for<\/span> <span class=\"token punctuation\">(<\/span><span class=\"token keyword\">var<\/span> i<span class=\"token punctuation\">:<\/span>int <span class=\"token operator\">=<\/span> <span class=\"token number\">0<\/span><span class=\"token punctuation\">;<\/span> i <span class=\"token operator\">&lt;<\/span> levels<span class=\"token punctuation\">;<\/span> i<span class=\"token operator\">++<\/span><span class=\"token punctuation\">)<\/span>\r\n<span class=\"token punctuation\">{<\/span>\r\n\t<span class=\"token keyword\">var<\/span> radius<span class=\"token punctuation\">:<\/span>int <span class=\"token operator\">=<\/span> int<span class=\"token punctuation\">(<\/span>Math<span class=\"token punctuation\">.<\/span>pow<span class=\"token punctuation\">(<\/span>base<span class=\"token punctuation\">,<\/span> i<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\r\n\t_radii<span class=\"token punctuation\">[<\/span>i<span class=\"token punctuation\">]<\/span> <span class=\"token operator\">=<\/span> radius<span class=\"token punctuation\">;<\/span>\r\n\t_stepSizes<span class=\"token punctuation\">[<\/span>i<span class=\"token punctuation\">]<\/span> <span class=\"token operator\">=<\/span> Math<span class=\"token punctuation\">.<\/span>log<span class=\"token punctuation\">(<\/span>radius<span class=\"token punctuation\">)<\/span> <span class=\"token operator\">*<\/span> stepScale <span class=\"token operator\">+<\/span> stepOffset<span class=\"token punctuation\">;<\/span>\r\n<span class=\"token punctuation\">}<\/span><\/code><\/pre>\n<p>During each step of simulation we have to execute the following methods:<\/p>\n<ol>\n<li>Populate the grid with pixels at random locations. I&#8217;m gonna use a linked list to store the pixels properties: positions and colors. We will loop through all the pixels, the number of pixels will be defined by the grid with <code>x<\/code> height dimension.<\/li>\n<li>Average each grid cell location over a circular radius specified by <code>activator<\/code>, then store the results in the activator array, multiplied by the weight.<\/li>\n<li>Average each grid cell location over a circular radius specified by <code>inhibitor<\/code>, then store the results in the activator array, multiplied by the weight.<\/li>\n<li>In the next step we need to calculate the absolute difference between the activator and inhibitor using the the following formula: <code>variations = variations + abs(activator[x,y] - inhibitor[x,y])<\/code><\/li>\n<\/ol>\n<p>Once we have all the activator, inhibitor and variations values calculated for each grid cells we proceed with updating the grids as follows:<\/p>\n<ol>\n<li>Find which grid cell has the lowest variation value<\/li>\n<li>Once we found the lowest variation value we update the grid by the following formula:<\/li>\n<\/ol>\n<pre class=\" language-javascript\"><code class=\" language-javascript\"><span class=\"token keyword\">for<\/span> <span class=\"token punctuation\">(<\/span><span class=\"token keyword\">var<\/span> l<span class=\"token punctuation\">:<\/span>Number <span class=\"token operator\">=<\/span> <span class=\"token number\">0<\/span><span class=\"token punctuation\">;<\/span> l <span class=\"token operator\">&lt;<\/span> levels <span class=\"token operator\">-<\/span> <span class=\"token number\">1<\/span><span class=\"token punctuation\">;<\/span> l<span class=\"token operator\">++<\/span><span class=\"token punctuation\">)<\/span>\r\n<span class=\"token punctuation\">{<\/span>\r\n\t<span class=\"token keyword\">var<\/span> radius<span class=\"token punctuation\">:<\/span>int <span class=\"token operator\">=<\/span> int<span class=\"token punctuation\">(<\/span>_radii<span class=\"token punctuation\">[<\/span>l<span class=\"token punctuation\">]<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\r\n\tfastBlur<span class=\"token punctuation\">(<\/span>activator<span class=\"token punctuation\">,<\/span> inhibitor<span class=\"token punctuation\">,<\/span> _blurBuffer<span class=\"token punctuation\">,<\/span> WIDTH<span class=\"token punctuation\">,<\/span> HEIGHT<span class=\"token punctuation\">,<\/span> radius<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\r\n\r\n\t<span spellcheck=\"true\" class=\"token comment\">\/\/calculates the absolute difference between activator and inhibitor\r\n<\/span>\r\n\t<span class=\"token keyword\">for<\/span> <span class=\"token punctuation\">(<\/span><span class=\"token keyword\">var<\/span> i<span class=\"token punctuation\">:<\/span>int <span class=\"token operator\">=<\/span> <span class=\"token number\">0<\/span><span class=\"token punctuation\">;<\/span> i <span class=\"token operator\">&lt;<\/span> n<span class=\"token punctuation\">;<\/span> i<span class=\"token operator\">++<\/span><span class=\"token punctuation\">)<\/span>\r\n\t<span class=\"token punctuation\">{<\/span>\r\n\t\t_variations<span class=\"token punctuation\">[<\/span>i<span class=\"token punctuation\">]<\/span> <span class=\"token operator\">=<\/span> activator<span class=\"token punctuation\">[<\/span>i<span class=\"token punctuation\">]<\/span> <span class=\"token operator\">-<\/span> inhibitor<span class=\"token punctuation\">[<\/span>i<span class=\"token punctuation\">]<\/span><span class=\"token punctuation\">;<\/span>\r\n\t\t<span class=\"token keyword\">if<\/span> <span class=\"token punctuation\">(<\/span>_variations<span class=\"token punctuation\">[<\/span>i<span class=\"token punctuation\">]<\/span> <span class=\"token operator\">&lt;<\/span> <span class=\"token number\">0<\/span><span class=\"token punctuation\">)<\/span>\r\n\t\t<span class=\"token punctuation\">{<\/span>\r\n\t\t\t_variations<span class=\"token punctuation\">[<\/span>i<span class=\"token punctuation\">]<\/span> <span class=\"token operator\">=<\/span> <span class=\"token operator\">-<\/span>_variations<span class=\"token punctuation\">[<\/span>i<span class=\"token punctuation\">]<\/span><span class=\"token punctuation\">;<\/span>\r\n\t\t<span class=\"token punctuation\">}<\/span>\r\n\t<span class=\"token punctuation\">}<\/span>\r\n\r\n\t<span spellcheck=\"true\" class=\"token comment\">\/\/if first level then set some initial values for bestLevel and bestVariation \r\n<\/span>\t<span class=\"token keyword\">if<\/span> <span class=\"token punctuation\">(<\/span>l <span class=\"token operator\">==<\/span> <span class=\"token number\">0<\/span><span class=\"token punctuation\">)<\/span>\r\n\t<span class=\"token punctuation\">{<\/span>\r\n\t\t<span class=\"token keyword\">for<\/span> <span class=\"token punctuation\">(<\/span>i <span class=\"token operator\">=<\/span> <span class=\"token number\">0<\/span><span class=\"token punctuation\">;<\/span> i <span class=\"token operator\">&lt;<\/span> n<span class=\"token punctuation\">;<\/span> i<span class=\"token operator\">++<\/span><span class=\"token punctuation\">)<\/span>\r\n\t\t<span class=\"token punctuation\">{<\/span>\r\n\t\t\t_bestVariation<span class=\"token punctuation\">[<\/span>i<span class=\"token punctuation\">]<\/span> <span class=\"token operator\">=<\/span> _variations<span class=\"token punctuation\">[<\/span>i<span class=\"token punctuation\">]<\/span><span class=\"token punctuation\">;<\/span>\r\n\t\t\t_bestLevel<span class=\"token punctuation\">[<\/span>i<span class=\"token punctuation\">]<\/span> <span class=\"token operator\">=<\/span> l<span class=\"token punctuation\">;<\/span>\r\n\t\t\t_directions<span class=\"token punctuation\">[<\/span>i<span class=\"token punctuation\">]<\/span> <span class=\"token operator\">=<\/span> activator<span class=\"token punctuation\">[<\/span>i<span class=\"token punctuation\">]<\/span> <span class=\"token operator\">&gt;<\/span> inhibitor<span class=\"token punctuation\">[<\/span>i<span class=\"token punctuation\">]<\/span><span class=\"token punctuation\">;<\/span>\r\n\t\t<span class=\"token punctuation\">}<\/span>\r\n\t\tactivator <span class=\"token operator\">=<\/span> _diffRight<span class=\"token punctuation\">;<\/span>\r\n\t\tinhibitor <span class=\"token operator\">=<\/span> _diffLeft<span class=\"token punctuation\">;<\/span>\r\n\t<span class=\"token punctuation\">}<\/span>\r\n\t<span class=\"token keyword\">else<\/span>\r\n\t<span class=\"token punctuation\">{<\/span>\r\n\t\t<span class=\"token keyword\">for<\/span> <span class=\"token punctuation\">(<\/span>i <span class=\"token operator\">=<\/span> <span class=\"token number\">0<\/span><span class=\"token punctuation\">;<\/span> i <span class=\"token operator\">&lt;<\/span> n<span class=\"token punctuation\">;<\/span> i<span class=\"token operator\">++<\/span><span class=\"token punctuation\">)<\/span>\r\n\t\t<span class=\"token punctuation\">{<\/span>\r\n\t\t\t<span class=\"token keyword\">if<\/span> <span class=\"token punctuation\">(<\/span>_variations<span class=\"token punctuation\">[<\/span>i<span class=\"token punctuation\">]<\/span> <span class=\"token operator\">&lt;<\/span> _bestVariation<span class=\"token punctuation\">[<\/span>i<span class=\"token punctuation\">]<\/span><span class=\"token punctuation\">)<\/span>\r\n\t\t\t<span class=\"token punctuation\">{<\/span>\r\n\t\t\t\t_bestVariation<span class=\"token punctuation\">[<\/span>i<span class=\"token punctuation\">]<\/span> <span class=\"token operator\">=<\/span> _variations<span class=\"token punctuation\">[<\/span>i<span class=\"token punctuation\">]<\/span><span class=\"token punctuation\">;<\/span>\r\n\t\t\t\t_bestLevel<span class=\"token punctuation\">[<\/span>i<span class=\"token punctuation\">]<\/span> <span class=\"token operator\">=<\/span> l<span class=\"token punctuation\">;<\/span>\r\n\t\t\t\t_directions<span class=\"token punctuation\">[<\/span>i<span class=\"token punctuation\">]<\/span> <span class=\"token operator\">=<\/span> activator<span class=\"token punctuation\">[<\/span>i<span class=\"token punctuation\">]<\/span> <span class=\"token operator\">&gt;<\/span> inhibitor<span class=\"token punctuation\">[<\/span>i<span class=\"token punctuation\">]<\/span><span class=\"token punctuation\">;<\/span>\r\n\r\n\t\t\t<span class=\"token punctuation\">}<\/span>\r\n\t\t<span class=\"token punctuation\">}<\/span>\r\n\t\t<span class=\"token keyword\">var<\/span> swap<span class=\"token punctuation\">:<\/span>Vector<span class=\"token punctuation\">.<\/span> <span class=\"token operator\">=<\/span> activator<span class=\"token punctuation\">;<\/span>\r\n\t\tactivator <span class=\"token operator\">=<\/span> inhibitor<span class=\"token punctuation\">;<\/span>\r\n\t\tinhibitor <span class=\"token operator\">=<\/span> swap<span class=\"token punctuation\">;<\/span>\r\n\t<span class=\"token punctuation\">}<\/span>\r\n<span class=\"token punctuation\">}<\/span><\/code><\/pre>\n<p>As a last step we should average the gap between the levels by performing a blur technique for a nicer transition. We blur the image sequentially in two steps: first we blur the image vertically then horizontally.<\/p>\n<h2>The challenge<\/h2>\n<p>The most challenging part was related to the unknown factor about how well gonna handle the AVM2 the intensive CPU calculation. Well as you may have guessed not too well, especially with very large bitmap dimension and a lot of pixels needed to be manipulated, plus the extra performance loss &#8220;gained&#8221; after the bluring operation.<\/p>\n<p>For some kind of compensation benefits (in terms of performance) i decided to populate the BitmapData with a chained loop using single linked list, plus typed arrays as generally known the <kbd>Vector.&lt;&gt;<\/kbd> arrays are much faster compared to the traditional array stacks. After a not too impressive performance, i wondered how can i even more optimize the code for a better overcome. I decided to give it a try to Alchemy, and Joa Ebert&#8217;s TDSI, a Java based Actionscript compiler, as by that time was commonly known a better choice over AVM. Unfortunately i didn&#8217;t get too many support and helpful articles about the implementation and as a consequence my attempt was a failure, which resulted in a quite buggy and ugly output. After too many attempts without the wishful result, i gave up.<\/p>\n<p>That&#8217;s all in big steps. You can grab the source code from <a href=\"https:\/\/www.esimov.com\/experiments\/source\/TuringPattern.zip\" target=\"_blank\">here<\/a>. Feel free to post your remarks.<\/p>\n<p>ps: Be prepared this experiment will burn your CPU. \ud83d\ude42<\/p>\n","protected":false},"excerpt":{"rendered":"<p>This Flash experiment was inspired by a thoroughly explained article about what has been generally known as Turing Pattern.<\/p>\n","protected":false},"author":1,"featured_media":176,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3,47,7,31,41,25,21],"tags":[30,29,26,28,27],"class_list":["post-236","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-actionscript-3","category-blog","category-experiments","category-generative","category-programming","category-codes","category-tutorials","tag-automata","tag-cellular","tag-pattern","tag-sem","tag-turing"],"_links":{"self":[{"href":"https:\/\/esimov.com\/blog\/wp-json\/wp\/v2\/posts\/236","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/esimov.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/esimov.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/esimov.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/esimov.com\/blog\/wp-json\/wp\/v2\/comments?post=236"}],"version-history":[{"count":2,"href":"https:\/\/esimov.com\/blog\/wp-json\/wp\/v2\/posts\/236\/revisions"}],"predecessor-version":[{"id":1205,"href":"https:\/\/esimov.com\/blog\/wp-json\/wp\/v2\/posts\/236\/revisions\/1205"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/esimov.com\/blog\/wp-json\/wp\/v2\/media\/176"}],"wp:attachment":[{"href":"https:\/\/esimov.com\/blog\/wp-json\/wp\/v2\/media?parent=236"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/esimov.com\/blog\/wp-json\/wp\/v2\/categories?post=236"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/esimov.com\/blog\/wp-json\/wp\/v2\/tags?post=236"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}