{"id":304,"date":"2019-04-17T12:53:26","date_gmt":"2019-04-17T12:53:26","guid":{"rendered":"http:\/\/alexandrix.com\/blog\/?p=304"},"modified":"2019-04-17T12:59:38","modified_gmt":"2019-04-17T12:59:38","slug":"painting-water-with-pseudo-brownian-modes","status":"publish","type":"post","link":"https:\/\/alexandrix.com\/blog\/painting-water-with-pseudo-brownian-modes\/","title":{"rendered":"Painting water with pseudo-Brownian modes"},"content":{"rendered":"\n<p>For my last painting <a rel=\"noreferrer noopener\" aria-label=\" (opens in a new tab)\" href=\"https:\/\/alexandrix.com\/blog\/fun-in-djerba\/\" target=\"_blank\">Fun in Djerba<\/a>, I needed a <strong>background with water<\/strong><\/p>\n\n\n\n<p>Making <em>Fun in Djerba<\/em> had me experiment a few techniques though, that I thought might be interesting to share.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Pseudo-brownian motion<\/h3>\n\n\n\n<p>During my recent collaboration, <em>Portraits n\u00b01<\/em> with physicist Ludovic Bellon (read full article <a rel=\"noreferrer noopener\" aria-label=\"here (opens in a new tab)\" href=\"https:\/\/alexandrix.com\/blog\/portraits-n1\/\" target=\"_blank\">here<\/a>), I came up with a way to energize particles into a Brownian motion. As I don&#8217;t exactly follow the strict theoretical rules by considering that my particles can have an acceleration, I was free to define my own version of <strong>a noisy force that ends up moving particles in random directions<\/strong>.<\/p>\n\n\n<span class=\"wp-katex-eq\" data-display=\"false\"> \\vec{acc} = amp \\cdot \\vec{dir} \\newline \\vec{speed} \\hspace{2 mm} += \\hspace{1 mm} \\vec{acc} \\newline \\vec{speed} \\hspace{2 mm} *= \\hspace{1 mm} viscosity \\newline \\vec{x} \\hspace{2 mm} += frameDelta \\cdot \\vec{speed} <\/span>\n\n\n\n<p>where the <strong>acceleration direction is a random value<\/strong> between 0 and 2 \u03c0 , the acceleration amplitude is also randomly chosen within a certain range, and viscosity is my simplified version of it, adjusted between 0 and 1.<\/p>\n\n\n\n<p>With this pseudo-Brownian equation that has a random amplitude and direction, the overall result can be quite <strong>organic<\/strong>, once you add a blurring layer. Here below is a photoshopped image that shows the raw version of a pseudo-brownian particle background, and a transition to a blurred effect. Surprisingly simple though!<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"724\" height=\"1024\" src=\"https:\/\/alexandrix.com\/blog\/wp-content\/uploads\/2019\/04\/Brownian-Gradient-724x1024.jpg\" alt=\"\" class=\"wp-image-318\" srcset=\"https:\/\/alexandrix.com\/blog\/wp-content\/uploads\/2019\/04\/Brownian-Gradient-724x1024.jpg 724w, https:\/\/alexandrix.com\/blog\/wp-content\/uploads\/2019\/04\/Brownian-Gradient-212x300.jpg 212w, https:\/\/alexandrix.com\/blog\/wp-content\/uploads\/2019\/04\/Brownian-Gradient-768x1086.jpg 768w, https:\/\/alexandrix.com\/blog\/wp-content\/uploads\/2019\/04\/Brownian-Gradient.jpg 1986w\" sizes=\"(max-width: 724px) 100vw, 724px\" \/><figcaption>Pseudo-Brownian spring attractor organic gradient<\/figcaption><\/figure>\n\n\n\n<p>The truth is for this image above I tied a new particle to our moving pseudo-Brownian attractor with a spring force, what we see is the trajectories of such particles, hence the seemingly smooth and circular overall motion.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Modes, size and opacity<\/h3>\n\n\n\n<p>Based on those findings, I kept exploring.<\/p>\n\n\n\n<p>Even after adding more particles, with different sizes and colors, I could not quite converge on anything satisfactory. Dang.<\/p>\n\n\n\n<p>Taking a break on the balcony, looking a the water surface of the vibrant blue swimming pool without really paying attention\u2026<\/p>\n\n\n\n<p>Bam!<br><strong>Modes<\/strong>.<br>There is a spatial pattern in those wavelets, a characteristic dimension. It&#8217;s not a mess, like a white noise, there is some <em>inner order<\/em>.<\/p>\n\n\n\n<p>So I tried to apply a random mode between 1 and 10 to each particle, and based on their mode I acted on their drawn properties:<\/p>\n\n\n\n<ul><li><strong>size<\/strong>: the higher the mode, the bigger the dot<\/li><li><strong>opacity<\/strong>: the higher the mode, the lower the opacity<\/li><\/ul>\n\n\n\n<p>This means tiny dots are drawn with a sharp opaque brush &#8211; relatively opaque, we&#8217;re talking 5% maximum because we use many particles &#8211; and bigger dots are more blurry.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>let a1 = 0.04, a2 = 0.001, \/\/ The smaller the neater\n    m1 = 1, m2 = this.maxMode\n\na = a1 + (a2 - a1) * (particle.mode - m1) \/ (m2 - m1)<\/code><\/pre>\n\n\n\n<p> The equation above (code language ES6) is just a decreasing linear function where <strong>A<\/strong> is the alpha channel in HSLA color space &#8211; a variable for opacity\/transparency &#8211; and <strong>m<\/strong> stands for mode.<\/p>\n\n\n\n<p>You instantly get a <strong>feeling of depth<\/strong>, like the focus of a camera. At first it felt like the closest particles were rain droplets painted on a window with heavier rain in the background!<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"724\" height=\"1024\" src=\"https:\/\/alexandrix.com\/blog\/wp-content\/uploads\/2019\/04\/crying-in-djerba-1986-2808-1551794389842-724x1024.jpg\" alt=\"\" class=\"wp-image-319\" srcset=\"https:\/\/alexandrix.com\/blog\/wp-content\/uploads\/2019\/04\/crying-in-djerba-1986-2808-1551794389842-724x1024.jpg 724w, https:\/\/alexandrix.com\/blog\/wp-content\/uploads\/2019\/04\/crying-in-djerba-1986-2808-1551794389842-212x300.jpg 212w, https:\/\/alexandrix.com\/blog\/wp-content\/uploads\/2019\/04\/crying-in-djerba-1986-2808-1551794389842-768x1086.jpg 768w, https:\/\/alexandrix.com\/blog\/wp-content\/uploads\/2019\/04\/crying-in-djerba-1986-2808-1551794389842.jpg 795w\" sizes=\"(max-width: 724px) 100vw, 724px\" \/><figcaption>Iteration &#8220;fun&#8221;-in-djerba-1986-2808-1551794389842<\/figcaption><\/figure>\n\n\n\n<p>This was because between mode 1 and mode 2 the radius was doubled (I had other values of a1 and a2 than those written in the previous code), and only a few particles had mode 1, so the &#8216;mode 1 layer&#8217; was overly predominant.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"724\" height=\"1024\" src=\"https:\/\/alexandrix.com\/blog\/wp-content\/uploads\/2019\/04\/crying-in-djerba-1986-2808-1551799476233-724x1024.jpg\" alt=\"\" class=\"wp-image-320\" srcset=\"https:\/\/alexandrix.com\/blog\/wp-content\/uploads\/2019\/04\/crying-in-djerba-1986-2808-1551799476233-724x1024.jpg 724w, https:\/\/alexandrix.com\/blog\/wp-content\/uploads\/2019\/04\/crying-in-djerba-1986-2808-1551799476233-212x300.jpg 212w, https:\/\/alexandrix.com\/blog\/wp-content\/uploads\/2019\/04\/crying-in-djerba-1986-2808-1551799476233-768x1086.jpg 768w, https:\/\/alexandrix.com\/blog\/wp-content\/uploads\/2019\/04\/crying-in-djerba-1986-2808-1551799476233.jpg 795w\" sizes=\"(max-width: 724px) 100vw, 724px\" \/><figcaption> Iteration &#8220;fun&#8221;-in-djerba-1986-2808-1551799476233<\/figcaption><\/figure>\n\n\n\n<p>By changing the law to something still linear but less violent in terms of scale, it looked nicer.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>r = 1.5 * (1 + p.mode\/2) * this.dataToImageRatio<\/code><\/pre>\n\n\n\n<p>Also, I arranged that <em>50% of all particles have mode 1<\/em>.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>let mode = Math.random() > 0.5 ? 1 : 1 + Math.ceil((this.maxMode - 1) * Math.random())<\/code><\/pre>\n\n\n\n<p>Last but not least, in my previous definition of the pseudo-Brownian noise, I chose a random module for the acceleration vector.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>let brownianAngle = 2 * Math.PI * Math.random()\nlet brownianModule = 10 * p.mode * Math.random()\nlet xAcc = brownianModule * Math.cos(brownianAngle)\nlet yAcc = brownianModule * Math.sin(brownianAngle)<\/code><\/pre>\n\n\n\n<p>This means all the values between 0 and the maximum can be set. Removing the random factor <em>cleared all the background from small-scale displacements of bigger particles<\/em>. As a consequence, nice organic patterns emerged after only a few computational steps!<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"724\" height=\"1024\" src=\"https:\/\/alexandrix.com\/blog\/wp-content\/uploads\/2019\/04\/crying-in-djerba-1986-2808-1551800465930-724x1024.jpg\" alt=\"\" class=\"wp-image-322\" srcset=\"https:\/\/alexandrix.com\/blog\/wp-content\/uploads\/2019\/04\/crying-in-djerba-1986-2808-1551800465930-724x1024.jpg 724w, https:\/\/alexandrix.com\/blog\/wp-content\/uploads\/2019\/04\/crying-in-djerba-1986-2808-1551800465930-212x300.jpg 212w, https:\/\/alexandrix.com\/blog\/wp-content\/uploads\/2019\/04\/crying-in-djerba-1986-2808-1551800465930-768x1086.jpg 768w, https:\/\/alexandrix.com\/blog\/wp-content\/uploads\/2019\/04\/crying-in-djerba-1986-2808-1551800465930.jpg 795w\" sizes=\"(max-width: 724px) 100vw, 724px\" \/><figcaption>Iteration &#8220;fun&#8221;-in-djerba-1986-2808-1551800465930<\/figcaption><\/figure>\n\n\n\n<p><br>Applying some Speed Light Factor (<a rel=\"noreferrer noopener\" aria-label=\"article (opens in a new tab)\" href=\"https:\/\/alexandrix.com\/blog\/djerba-sunset-phoenix\/\" target=\"_blank\">article<\/a>), gives the water a subtle motion effect in a certain direction.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><em>To the final artwork<\/em><\/h3>\n\n\n\n<p>You might have noticed the black hole on the artwork.<br>This was done with <strong>superimposition of two canvases<\/strong>, the one with the water background, and the one with the hole.<\/p>\n\n\n\n<p>The hole is made of <em>dots with radially decreasing sizes<\/em>.<br>To get control over the hole dimension and its sharpness, I used the very handy following function for transitions:<\/p>\n\n\n<span class=\"wp-katex-eq\" data-display=\"false\"> r_{dot} = r_{max} \\cdot  \\frac { e^{ - \\frac{r - r_0}{spread} } } { 1+e^{- \\frac{r - r_0}{spread}} }  <\/span>\n\n\n\n<p><br>With the final water background and hole, I could piece the final piece.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"724\" height=\"1024\" src=\"https:\/\/alexandrix.com\/blog\/wp-content\/uploads\/2019\/03\/Fun-in-Djerba-10-724x1024.jpg\" alt=\"\" class=\"wp-image-298\" srcset=\"https:\/\/alexandrix.com\/blog\/wp-content\/uploads\/2019\/03\/Fun-in-Djerba-10-724x1024.jpg 724w, https:\/\/alexandrix.com\/blog\/wp-content\/uploads\/2019\/03\/Fun-in-Djerba-10-212x300.jpg 212w, https:\/\/alexandrix.com\/blog\/wp-content\/uploads\/2019\/03\/Fun-in-Djerba-10-768x1086.jpg 768w, https:\/\/alexandrix.com\/blog\/wp-content\/uploads\/2019\/03\/Fun-in-Djerba-10.jpg 894w\" sizes=\"(max-width: 724px) 100vw, 724px\" \/><figcaption>Fun in Djerba<\/figcaption><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Conclude-sion<\/h3>\n\n\n\n<p>Despite this article being a bit less detailed than my <a rel=\"noreferrer noopener\" href=\"https:\/\/alexandrix.com\/blog\/djerba-sunset-phoenix\/\" target=\"_blank\">previous article on a creative process<\/a> that led me to <em>Djerba Sunset Phoenix,<\/em> I have explained how I came to play with pseudo-Brownian modes with a goal: <strong>painting water with particles<\/strong>.<\/p>\n\n\n\n<p>This was a first adventure with water and there is much room for improvement. With this new recipe for organic patterns with particles, I have been able to work on richer background gradients, or re-draw pictures with force field information and particles Browian-wandering around.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"724\" height=\"1024\" src=\"https:\/\/alexandrix.com\/blog\/wp-content\/uploads\/2019\/04\/dame-recherche-wip-overview-724x1024.jpg\" alt=\"\" class=\"wp-image-323\" srcset=\"https:\/\/alexandrix.com\/blog\/wp-content\/uploads\/2019\/04\/dame-recherche-wip-overview-724x1024.jpg 724w, https:\/\/alexandrix.com\/blog\/wp-content\/uploads\/2019\/04\/dame-recherche-wip-overview-212x300.jpg 212w, https:\/\/alexandrix.com\/blog\/wp-content\/uploads\/2019\/04\/dame-recherche-wip-overview-768x1086.jpg 768w, https:\/\/alexandrix.com\/blog\/wp-content\/uploads\/2019\/04\/dame-recherche-wip-overview.jpg 894w\" sizes=\"(max-width: 724px) 100vw, 724px\" \/><figcaption>Work in progress dame-recherche-2979-4212-1552572038408<\/figcaption><\/figure>\n\n\n\n<p><br>Alright folks thanks a lot for reading!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>I came up with a way to energize particles into a Brownian motion. As I don&#8217;t exactly follow the strict theoretical rules by considering that my particles can have an acceleration, I am free to define my own version of a noisy force that ends up moving particles in random directions.<\/p>\n","protected":false},"author":1,"featured_media":342,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[5],"tags":[],"_links":{"self":[{"href":"https:\/\/alexandrix.com\/blog\/wp-json\/wp\/v2\/posts\/304"}],"collection":[{"href":"https:\/\/alexandrix.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/alexandrix.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/alexandrix.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/alexandrix.com\/blog\/wp-json\/wp\/v2\/comments?post=304"}],"version-history":[{"count":25,"href":"https:\/\/alexandrix.com\/blog\/wp-json\/wp\/v2\/posts\/304\/revisions"}],"predecessor-version":[{"id":341,"href":"https:\/\/alexandrix.com\/blog\/wp-json\/wp\/v2\/posts\/304\/revisions\/341"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/alexandrix.com\/blog\/wp-json\/wp\/v2\/media\/342"}],"wp:attachment":[{"href":"https:\/\/alexandrix.com\/blog\/wp-json\/wp\/v2\/media?parent=304"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/alexandrix.com\/blog\/wp-json\/wp\/v2\/categories?post=304"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/alexandrix.com\/blog\/wp-json\/wp\/v2\/tags?post=304"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}