<p><strong>Marching squares on cosinus 😂</strong></p>
<img src="/images/plots/166zoom.jpg" width="100%">


Bubbles

<p>square marching the distance to centers produced this interesting illusion. Combined with a bit of smoothing to make close center a bit more blobby.</p>


square marching the distance to centers produced this interesting illusion. Combined with a bit of smoothing to make close center a bit more blobby.

centers of illusion

<p><strong>Every NFT sold allows acquiring a plotted frame. (code in the unlockable content)</strong></p>
<p><nft-card contractAddress="0x495f947276749ce646f68ac8c248420045cb7b5e" tokenId="47428341271170390733253974222101382154768714392453356712130950043610789183496"> </nft-card> <script src="https://unpkg.com/embeddable-nfts/dist/nft-card.min.js"></script></p>
<p><video loop autoplay controls src="/images/plots/164-showcase.mp4" width="100%"></video></p>
<p>My 7th <a href="/plots/tags/plotloop">plotloop</a> is a very special one, inspired from the mother of all of my plot loops: <a href="/plots/108">plot#108</a> which wasn&#39;t planned to be animated but a way to visualize randomness and chose one frame! This is still what gave me the idea to do these plot loops.</p>
<blockquote>
<p>The concept of Plot Loop, as described in <a href="https://greweb.me/2021/05/plot-loops">https://greweb.me/2021/05/plot-loops</a> article, is an hybrid concept between a digital video art and physical plot that produces topology of the same art.</p>
</blockquote>
<p>The main digital art is a 1920p video loop of 8 frames available as NFT on Opensea.io sold by <a href="https://twitter.com/achetezdelart">@achetezdelart</a> famous Paris&#39; art gallery. I am so thrilled to work for the first time with an art gallery and looking forward to do more collaboration in the future! The physical art is the 8 frames, plotted with 3 fountain pens on Bristol A4 paper (250g), and offered when buying the NFT.</p>
<h2 id="24-hours-of-near-non-stop-plotting">24+ hours of near non-stop plotting!</h2>
<p>Once the coding was done, the hard part was the precision work of plotting 8 frames, each taking 2 hours to achieve. With all the fail and retry there were, it took me more than a day to finish it all. The sun strokes takes about 10 minutes but the rest takes around 100 minutes.</p>
<p><video loop autoplay controls src="/images/plots/164-plotting-speed-x200.mp4" width="100%"></video></p>
<h2 id="zoom-photos">Zoom photos</h2>
<img src="/images/plots/164zoom.jpg" width="100%" />

<h2 id="proof-of-plot-a-very-time-consuming-creation-process">&quot;Proof of Plot&quot;, a very time-consuming creation process</h2>
<p>The creation process of this plot loop was one of the most challenging one, among all of the other plots I have done so far. The fact each frame takes about 2 hours to plot with 2 manual actions (changing the fountain pens) makes any mistake very punishing! You can&#39;t faster the 2 hours much without risking the paper to suffer faced to the number of stroke of the fountain pen!</p>
<h3 id="fail-and-retry">Fail and retry</h3>
<p>Yet, plotting is a fail and retry process, so I like to show you 2 failures first among 4 of my first prototype fails:</p>
<p><img width="50%" src="/images/plots/164-fail1.jpg"><img width="50%" src="/images/plots/164-fail2.jpg"></p>
<p>For anyone familiar with plot and fountain pens this is indeed one of the worse nightmare to deal with: too much stroke-crowded area is going to badly end up with literally digging through the paper.</p>
<h3 id="quick-technique-to-solve-this-problem">Quick technique to solve this problem</h3>
<p>A very simple technique I call the &quot;passage counter&quot; technique. It&#39;s simply the use of a 2D Grid where each cell have a counter that you increment when a line goes through it, when it reaches 3 (or more) that&#39;s where you start raising the pen in these crowded area.</p>
<img width="300px" src="/images/plots/164-grid.png">

<p>It works great with the limitation that too much up and down of your pen is both time consuming but also can be hurting the paper too, there there is a tradeoff to find.</p>
<h3 id="some-interesting-creative-coding-techniques-used">Some interesting creative coding techniques used</h3>
<h4 id="sun-rays-projection">sun rays projection</h4>
<p>For the sun rays, I&#39;ve used a simple radial projection that collides with the mountain lines.
I had to make lines randomly starting at different places to avoid the effect to be too condensed at the beginning (problem of radial projection is your lines get more and more distanced). I wanted it to not be that &quot;random&quot; so i&#39;ve used a simple prime number formula: distance to center of sun is added of an extra <code>8. + ((i * 29) % 121) as f64</code> where <code>i</code> is the ray index.</p>
<h4 id="sun-oscillation">sun oscillation</h4>
<p>I didn&#39;t wanted to make the sun motion too realistic but I wanted a visible motion that would fit with the mountains and project rays from different positions. It also had to be looping (which a sunset/sunrise wouldn&#39;t allow)</p>
<p>Therefore, I went with a simple trigonometry formula:</p>
<pre><code class="language-rust">let sunp = (
  w / 2. + 75. * (2. * PI * sunphase).cos(),
  50. - 30. * (2. * PI * sunphase).sin().abs()
);
</code></pre>
<h4 id="mountain-oscillation-and-noise-shape">mountain oscillation and noise shape</h4>
<p>The noise algorithm I used was much more accomplished than in <a href="/plots/108">plot#108</a> even though that historical plot one is interesting too.</p>
<p>I learned recently the power of &#39;domain warping&#39; on applied on noise and I applied it here, at least mainly on the 1D of the wave. It creates more &quot;local minima&quot; on the shape and creates a more interesting animation.</p>
<p>It&#39;s important to also note that noise/perlin noise, is quite challenging to &quot;loop&quot; and the way I did this is interpolation between 3 states. I have simply done this:</p>
<pre><code class="language-rust">let n1 = perlin.get([ a, b, opts.seed + i as f64 * divergence + 200.2 ]);
let n2 = perlin.get([ a, b, opts.seed + i as f64 * divergence + 300.514 ]);
let n3 = perlin.get([ a, b, opts.seed + i as f64 * divergence + 400.31 ]);
let n = 0.8 *
    (
        n1 * (2. * PI * p).cos() +
        n2 * (2. * PI * (p + 0.33)).cos() +
        n3 * (2. * PI * (p + 0.66)).cos()
    ) +
    // global disp
    0.2 * perlin.get([
        freq * xp,
        freq * y,
        opts.seed
    ]);
</code></pre>
<p>where <strong>a</strong> and <strong>b</strong> are noise themselves to apply the &quot;domain warping&quot; magic.</p>
