This plot is not yet released. It will appear in a few days!

Coming soon! (Anomalie carrée 4)

Coming soon! (Anomalie carrée 3)

Coming soon! (Anomalie carrée 2)

Coming soon! (Anomalie carrée 1)

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

Bubbles

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

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

Every NFT sold allows acquiring a plotted frame. (code in the unlockable content)
<nft-card contractAddress="0x495f947276749ce646f68ac8c248420045cb7b5e" tokenId="47428341271170390733253974222101382154768714392453356712130950043610789183496"> </nft-card> <script src="https://unpkg.com/embeddable-nfts/dist/nft-card.min.js"></script>
<video loop autoplay controls src="/images/plots/164-showcase.mp4" width="100%"></video>
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.
<blockquote>
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.
</blockquote>
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.
<h2 id="24-hours-of-near-non-stop-plotting">24+ hours of near non-stop plotting!</h2>
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.
<video loop autoplay controls src="/images/plots/164-plotting-speed-x200.mp4" width="100%"></video>
<h2 id="zoom-photos">Zoom photos</h2>
(coming soon!)
<h2 id="proof-of-plot-a-very-time-consuming-creation-process">&quot;Proof of Plot&quot;, a very time-consuming creation process</h2>
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!
<h3 id="fail-and-retry">Fail and retry</h3>
Yet, plotting is a fail and retry process, so I like to show you 2 failures first among 4 of my first prototype fails:
<img width="50%" src="/images/plots/164-fail1.jpg"><img width="50%" src="/images/plots/164-fail2.jpg">
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.
<h3 id="quick-technique-to-solve-this-problem">Quick technique to solve this problem</h3>
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.
<img width="300px" src="/images/plots/164-grid.png">

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.
<h3 id="some-interesting-creative-coding-techniques-used">Some interesting creative coding techniques used</h3>
<h4 id="sun-rays-projection">sun rays projection</h4>
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.
<h4 id="sun-oscillation">sun oscillation</h4>
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)
Therefore, I went with a simple trigonometry formula:
<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>
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.
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.
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:
<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>
where a and b are noise themselves to apply the &quot;domain warping&quot; magic.

Montagne muable (8 frames)

Revisit of <a href="/plots/060">plot#060</a> &#39;Jumping man&#39; using two fountain pen inks and a spiral fill technique with slight noise.
Zoom:
<img src="/images/plots/163zoom.jpg" width="100%">

Revisit of plot#060 'Jumping man' using two fountain pen inks and a spiral fill technique with slight noise.

Jumping man spiral

Squares warping implements marching squares (contouring algorithm) on square distance and apply domain warping noise displacement onto it. There is a variety of different unique results and i&#39;ve plotted 4 of them.
<img src="/images/plots/162b.jpg" width="100%">
<img src="/images/plots/162c.jpg" width="100%">
<img src="/images/plots/162d.jpg" width="100%">

Squares warping implements marching squares (contouring algorithm) on square distance and apply domain warping noise displacement onto it. There is a variety of different unique results and i've plotted 4 of them.

squares warping

Perlin noise and domain warping. Fountain pen &#39;Aurora Borealis&#39; ink from Diamine on Bristol card.

Perlin noise and domain warping. Fountain pen 'Aurora Borealis' ink from Diamine on Bristol card.

Elevation 02

Apophenia – the tendency to perceive meaningful connections between unrelated things.

the tendency to perceive meaningful connections between unrelated things

Apophenia

A simple idea with bricks and slight variation of width/height of each brick.

A simple idea with bricks and slight variation of width/height of each brick.

Bricks

Did you find the alien head? You may also find a bird! But it&#39;s up to your imagination. Marching squares of perlin noise domain warping.

Did you find the alien head? You may also find a bird! But it's up to your imagination. Marching squares of perlin noise domain warping.

Here is &quot;Spring&quot;, my 6th <a href="/plots/tags/plotloop">plot loop</a> <a href="https://greweb.me/2021/05/plot-loops">(see article)</a>. The main digital art is a 1920p video loop of 8 frames available as a <a href="https://www.hicetnunc.xyz/objkt/117072">Tezos hicetnunc NFT</a>. The physical art are the 8 frames, plotted with 2 fountain pens on Bristol A4 paper (250g), and offered when <a href="https://www.hicetnunc.xyz/objkt/117072">buying the NFT</a>.
There are 8 plots available for sale and there will be no other editions of these plot loop frames. They all have the same inital price and the physical piece is selected in order of buy as each frame is relatively similar!
<h3 id="closer-look">Closer look</h3>
The ink &quot;Bloody Brexit&quot; from Diamine have particularity to have coppery color reflections.
<img src="/images/plots/157zoom1.jpg" width="100%">
<img src="/images/plots/157zoom2.jpg" width="100%">
<img src="/images/plots/157zoom3.jpg" width="100%">

<h2 id="making-off">Making off</h2>
Here is a video of the plot, accelerated 5x.
<iframe width="100%" height="400" src="https://www.youtube.com/embed/UBzsr0CcrSk" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

Before that result, I had many iterations and 3 prototypes where I adjusted many parameters each time:
<img src="/images/plots/157proto1.jpg" width="100%">
<img src="/images/plots/157proto2.jpg" width="100%">
<img src="/images/plots/157proto3.jpg" width="100%">

I also had this failure: (forgot to attach the paper!)
<img src="/images/plots/157fail.jpg" width="100%">

8 frames plotted making an animated loop. A 1920p video and A4 physical art is available as an NFT.

Spring (8 frames)

First experiment of Molotow pen on Bristol paper.
Using perlin noise and domain warping, we can make very interesting shapes that we can pipe into marching squares contour algorithm.
In this code, i&#39;ve also made 2 lines close to each other instead of a linear distribution. This is relatively simple to implement:
<pre><code class="language-rust">let pattern = (2., 3.); // 2 lines 3 blanks
let thresholds: Vec&lt;f64&gt; = // in [0..1] range
 (0..samples)
 .map(|i|
 (i as f64 + pattern.1 * (i as f64 / pattern.0).floor())
 / (samples as f64 * (pattern.0 + pattern.1) / pattern.0).floor())
 .collect();
</code></pre>
Here is the formula: (that i&#39;m not sure is correctly normalized by the way)
<a href="https://www.desmos.com/calculator/mlngfvssv0">https://www.desmos.com/calculator/mlngfvssv0</a>
(yeah I also use my fountain pen to do (simple) math =D)
<img src="/images/plots/156math.jpg" width="100%">

First experiment of Molotow pen on Bristol paper.

Elevation 01

Using distance functions primitives with marching squares and noise displacement to produce another planet hole.

Using distance functions primitives with marching squares and noise displacement to produce another planet hole.

Corridor planet

Definitely overkill, but this is implemented with &#39;box&#39; distance function of a square and marching squaring it with noise displacement.

Definitely overkill, but this is implemented with 'box' distance function of a square and marching squaring it with noise displacement.

Rounded squares

Continuation of previous <a href="/plots/152">plot#152</a> using two different inks: Diamine Pumpkin and Diamine Turquoise. Reveals an overall green tone. Using similar noise domain warping with glitches technique.
<img src="/images/plots/153zoom.jpg" width="100%">

Continuation of plot#152 using two different inks: Diamine Pumpkin and Diamine Turquoise. Reveals an overall green tone. Using similar noise domain warping with glitches technique.

Warp Glitch 02

This is a fresh experimentation of noise domain warping with glitches. As many of my previous plots, this is a 2-pass spiral parametric function, displaced with perlin noise warpped into each other (see &quot;domain warping&quot;). The spiral ends up being unstable and &quot;breaks apart&quot; with intentional glitches: the line is stopped as soon as two datapoints are to far from each other, as a spiral get bigger and bigger it inevitably ending up breaking apart completely in various places which combined with the parametric function makes some sort of humanoïd shape!
I sent some video while it was getting plotted. It started from the middle and the beginning is quite interesting and could itself be made a standalone. All of these are very exploratory and may be revisited later!

This is a fresh experimentation of noise domain warping with glitches

Warp Glitch 01

This is a continuation of yesterday&#39;s plot loop to try to reuse similar noises on a more arbitrary structure. This is a crossfade of two fountain pen inks: Red Dragon and Turquoise.

This is a continuation of yesterday's plot loop to try to reuse similar noises on a more arbitrary structure. This is a crossfade of two fountain pen inks: Red Dragon and Turquoise.

Caves 01

Here is &quot;Dancing Planet&quot;, my 5th <a href="/plots/tags/plotloop">plot loop</a> <a href="https://greweb.me/2021/05/plot-loops">(see article)</a>. The main digital art is a 1920p video loop of 8 frames available as a <a href="https://www.hicetnunc.xyz/objkt/105425">Tezos hicetnunc NFT</a>. The physical art are the 8 frames, plotted with 2 fountain pens on Bristol A4 paper (250g), and offered when <a href="https://www.hicetnunc.xyz/objkt/105425">buying the NFT</a>.
There are 8 plots available for sale and there will be no other editions of these plot loop frames. They all have the same inital price and the physical piece is selected in order of buy as each frame is relatively similar!
<img src="/images/plots/150-plots.jpg" width="100%">

This is a reboot of <a href="/plots/148">plot#148</a> but with a big rework of the noise technique using domain warping as well as combination with this famous &#39;rotating dancer&#39; GIF.
It is plotted with two phases, a first pass without a lot of noise and a second pass with more noise divergence:
<img src="/images/plots/150-phases.gif" width="100%">

<img src="/images/plots/150-zoom1.jpg" width="100%">
<img src="/images/plots/150-zoom2.jpg" width="100%">
<img src="/images/plots/150-zoom3.jpg" width="100%">

<h2 id="early-prototype-in-pursuit-of-the-good-ink-and-paper">Early prototype, in pursuit of the good ink and paper...</h2>
I started with this first prototype of the concept:
<img src="/images/plots/150-proto1.jpg" width="100%">

It allowed me to see what I could adjust, for instance: adding more noise, more lines and scaling a bit the dancer.
I used ink &#39;Quink&#39; by Parker plotted with a fountain pen on a Canson Bristol 250g paper (A4 format).
Here is another prototype I tried: it uses a mix of two colors (dragon red and turquoise). I ended up preferring minimalism: black on white. At the end I stayed on my first ink choice but I will revisit this idea.
<img src="/images/plots/150-proto2.jpg" width="57%"><img src="/images/plots/150-proto2-zoom.jpg" width="42.8%">
<h2 id="process-to-find-the-final-plot">Process to find the final plot</h2>
To search for the good parameters I&#39;ve used a generator script with bash for loops. It kinda looked like this:
<pre><code class="language-sh">for a in 0.5 1 2 4; do
for b in 0.5 1 2 4; do
for c in 0.5 1 2 4; do
for d in 0.5 1 2 4; do
 sh $P/gen.sh --a $a --b $b --c $c --d $d
 cp ./results/out.gif out/${a}_${b}_${c}_${d}.gif
done
done
done
done
</code></pre>
Then I kept refining my &quot;range&quot; by fail and retry. It is quite slow to generate them so it&#39;s a long process.
When I was satisfied by the parameters, I then switch to a second selection: the selection of the seed! because my noise have seed and can generate very different kind of noises, I put it against my &quot;elector&quot; homemade tool as explained on <a href="/plots/143">plot#143</a>.
<img src="/images/plots/150-selection.png" width="100%">

<h2 id="some-highlight-of-the-rustlang-code">Some highlight of the Rustlang code</h2>
There is nothing really &quot;new&quot; from my previous plots, especially all the parametric plot when I started this &quot;growing parametric&quot; exploration between <a href="/plots/114">plot#114</a> and <a href="/plots/148">plot#148</a>.
What is new here however is the use of a GIF as an input. It&#39;s very easy to do: my script takes basically an loop percentage which I can transpose to looking up a frame in the rotating dancer loop. I can then use this function I&#39;ve just added to my utilities:
<pre><code class="language-rust">use image::AnimationDecoder;
use image::RgbaImage;
use image::gif::GifDecoder;
use image::io::Reader as ImageReader;

pub fn image_gif_get_color(
 path: &amp;str,
 index: usize
) -&gt; Result&lt;
 impl Fn((f64, f64)) -&gt; (f64, f64, f64),
 image::ImageError,
&gt; {
 let file_in = File::open(path)?;
 let decoder = GifDecoder::new(file_in).unwrap();
 let frames = decoder.into_frames();
 let frames = frames.collect_frames()?;
 let img = frames.get(index % frames.len()).unwrap();
 let buffer = img.buffer();
 return Ok(dynamic_image_get_color(buffer.clone()));
}

pub fn dynamic_image_get_color(
 img: RgbaImage
) -&gt; impl Fn((f64, f64)) -&gt; (f64, f64, f64) {
 let (width, height) = img.dimensions();
 return move |(x, y): (f64, f64)| {
 let xi = (x.max(0.0).min(1.0)
 * ((width - 1) as f64)) as u32;
 let yi = (y.max(0.0).min(1.0)
 * ((height - 1) as f64))
 as u32;
 let pixel = img.get_pixel(xi, yi);
 let r = (pixel[0] as f64) / 255.0;
 let g = (pixel[1] as f64) / 255.0;
 let b = (pixel[2] as f64) / 255.0;
 return (r, g, b);
 };
}
</code></pre>
Rust really shines in having great library, this is just the classical &quot;image&quot; package here.
Apart from this, the Rust code (you can see main.rs link on top of this page) is pretty straightforward. There is just a lot of work in the parametric function which starts to be quite big:
<pre><code class="language-rust">let parametric = |p: f64| {
 let p1 = (splits * p).floor();
 let p2 = splits * p - p1;
 let t = (p1 + split_threshold * p2) / splits;
 let mut t2 = (p1
 + split_threshold * p2.powf(pow))
 / splits;
 let initial = 1. / spins;
 t2 =
 (t2 - initial).max(0.) / (1. - initial);
 let scale = 1.0
 - t2 * (1.0
 - i as f64 * opts.size_diff / size);
 let s = spins;
 let mut p = (
 scale
 * amp1
 * ((s * 2. * PI * t).sin()
 + amp2
 * mix(
 (s * f1.1 * PI * t).sin(),
 (s * f2.1 * PI * t).sin(),
 t,
 )),
 0.07
 - scale
 * amp1
 * ((s * 2. * PI * t).cos()
 + amp2
 * mix(
 (s * f1.0 * PI * t).cos(),
 (s * f2.0 * PI * t).cos(),
 t,
 )),
 );
 let noise_angle = p.1.atan2(p.0);
 let noise_amp = 0.003 * perlin.get([
 opts.a * (progress * PI).sin() +
 4.8 * p.0 + perlin.get([
 7.8 * p.0,
 4.2 * p.1 + opts.b * (progress * PI).sin(),
 40. + opts.seed
 ]),
 4.8 * p.1 + 0.8 * perlin.get([
 4.5 * p.0 + opts.c * ((1. - progress) * PI).sin(),
 6.8 * p.1 + perlin.get([
 20.5 * p.0 + opts.d * (2. * PI * progress).cos(),
 20.8 * p.1,
 200. + opts.seed,
 ]),
 20. + opts.seed,
 ]),
 100. + opts.seed + i as f64 * opts.seed_diff,
 ]) +
 0.03 * (1. - t) * perlin.get([
 0.7 * p.0 + perlin.get([
 2.9 * p.0 + opts.e * (2. * PI * progress).cos(),
 1.7 * p.1,
 2000.0
 ]),
 0.7 * p.1 + perlin.get([
 3.1 * p.0,
 2.5 * p.1 + opts.e * (2. * PI * progress).sin(),
 2100.0
 ]),
 1000.,
 ]);

 p.0 += noise_amp * noise_angle.cos();
 p.1 += noise_amp * noise_angle.sin();
 p
};
</code></pre>

Dancing Planet

A chaotic experiment of parametric function meeting perlin noise. Brush pen with &#39;Bloody Brexit&#39; ink on Bristol paper.

A chaotic experiment of parametric function meeting perlin noise. Brush pen with 'Bloody Brexit' ink on Bristol paper.

Chaotic Inner

Orange

Drawing a lot of diamond in pink and blue with dimensions varying based on perlin noise.

Drawing a lot of diamond in pink and blue with dimensions varying based on perlin noise.

Diamond noise

A simple idea applying sine waves to rectangular shapes. Keeping some glitches in!

A simple idea applying sine waves to rectangular shapes. Keeping some glitches in!

rect waves

A similar flower as in <a href="/plots/123">plot#123</a> but with 2 steps themself split into 2 steps and different spiral amplitude. Sakura pens on Black card.

A similar flower as in plot#123 but with 2 steps themself split into 2 steps and different spiral amplitude. Sakura pens on Black card.

2-step flowers

A variation of <a href="/plots/108">plot#108</a> with more &quot;tensed&quot; lines. The distribution creates an interesting visual illusion that edges are &quot;blurred&quot;.

A variation of plot#108 with more 'tensed' lines. The distribution creates an interesting visual illusion that edges are 'blurred'.

tensed mountains

Here is &quot;Rainbow Roots&quot;, my 4th <a href="https://greweb.me/2021/05/plot-loops">plot loop (see article)</a>. The main digital art is a 1920p video loop of 8 frames available as a <a href="https://www.hicetnunc.xyz/objkt/98062">Tezos hicetnunc NFT</a>. The physical art are the 8 frames, plotted with 2 fountain pens on Bristol A4 paper (250g), and offered when <a href="https://www.hicetnunc.xyz/objkt/98062">buying the NFT</a>.
There are 8 plots available for sale and there will be no other editions of these plot loop frames. You can chose which frame you buy as the NFT editions are segmented into different prices. 20.1 tez for the first frame, 20.2 for the second and so on up to 20.8.
<img src="/images/plots/143-plots.jpg" width="100%">

This is a reboot of <a href="/plots/091">plot#091</a> with more lines and better noise technique using domain warping.
<h3 id="coloring">Coloring</h3>
Each plotted frame is made with 2 fountain pens, one primary and one secondary ink. The primary color is interleaved with the second with a ratio of 2/3 for primary and 1/3 for secondary.
I used 8 different inks, all by &quot;Diamine&quot; brand: Turquoise, Aurora Borealis, Bloody Brexit, Imperial Purple, Writer&#39;s Blood, Red Dragon, Pumpkin, Sepia.
<img src="/images/plots/143-inks.jpg" width="100%">

I had a last minute changes after the photo was taken: I replaced Spring Green by another color because it would have been too &quot;light&quot; for a plot. I actually tried to do one with Sepia and it was also too &quot;light&quot;, I decided to go black! I definitely have betterplans for &#39;Spring Green&#39;.
<h3 id="paper">Paper</h3>
I use a Canson Bristol 250g paper which works great with fountain pen. Format A4.
<img src="/images/plots/143-zoom1.jpg" width="50%"><img src="/images/plots/143-zoom2.jpg" width="50%">
<h2 id="creation-process">Creation process</h2>
The creation process is made of many steps, which are entirely created by me and all these steps are fully published and open sourced.
<ul>
<li>art generator: I write a Rustlang program that generate SVG files. (see main.rs)</li>
<li>GIF preview: I use a script to make a digital and theorical video of the animation. Very important for me to have an idea of the animation (even tho only plotting time will have the final surprise).</li>
<li>plot first prototypes: I do some prototype plots to make sure the plot is good, specifically that the density chosen (number of lines) is well adjusted (too much and your paper starts to be comprised, not enough and you have too much gaps).</li>
<li>I polish a lot the generator. Specifically on the different noise harmonies, frequencies and amplitudes.</li>
<li>Once it&#39;s ready, i&#39;ll run a super script that loops over the &quot;video preview&quot; generation. It&#39;s time consuming as I will often stop and polish again the generator. This time it took me probably ten times to iterate like this. Literally the whole day.</li>
<li>When I&#39;m confident, I&#39;ll generate a lot of video previews. This time I have generated 500 GIFs. It was very tricky to decide and to actually elect the final plot, I developed my own tool (see section below)</li>
<li>Finally, I can plot them all, it takes a lot of caution on manipulating paper and fountain pens and a lot of manual actions. It is very time consuming but very rewarding. Each frame took more than an hour to plot with an AxiDraw robot.</li>
</ul>
<h3 id="preview">Preview</h3>
This is what the theorical art was going to be, this is a digital preview before doing the plot so indeed it only simulate what the actual ink was going to do. The physical art is better looking with the imperfections of the medium.
<img src="/images/plots/143-theorical.gif" width="100%">

<h3 id="process-to-find-the-final-plot">Process to find the final plot</h3>
As I&#39;m working with a generator, it can generate infinite variants of plot loops. I have generated 500 GIFs (virtual plot loops)
It ended up being very tedious to try to find a good animation by manually going through the files so I literally developped an app to solve my problem and provide a voting system so I can compare in parallel different results and chose among them. It could be reused and improved in future, it&#39;s not yet &quot;generic&quot; but if there is a need for it, I would make it generic and open source it as a standalone tool.
<img src="/images/plots/143-elector.jpg" width="100%">

<h3 id="early-prototype-and-special-editions">Early prototype and Special Editions</h3>
This prototype was done to adjust some plotting parameters, specifically the number of lines.
<img src="/images/plots/143-prototype.jpg" width="100%">

I&#39;ve also made these 2 special editions one to offer a friend and one gift to buyer of one of my previous plot loop. Each of them have very specific variations of parameters (they are written on the back of the plot and i don&#39;t keep them in memory, basically they are technically not easy to reproduce identically!)
<img src="/images/plots/143-special1.jpg" width="100%">
<img src="/images/plots/143-special2.jpg" width="100%">

Rainbow Roots

A reboot of the &#39;wool ball&#39; done with 2 pen brushes.
Also had another try:
<img src="/images/plots/142bis.jpg" width="100%">

A reboot of the 'wool ball' done with 2 pen brushes.

brushed ball

Drop inks on simple robotic motions and let the medium speak.
I&#39;ve used two different inks: Pink and Turquoise. The Pink ink ended up turning orange when it met a bit of the Turquoise&#39;s ink because chemistry!
<img width="100%" src="/images/plots/141inks.jpg"/>

These are some other interesting plots with similar roboting actions.
<img width="100%" src="/images/plots/141b.jpg"/>
<img width="100%" src="/images/plots/141c.jpg"/>
<img width="100%" src="/images/plots/141d.jpg"/>

Drop inks on simple robotic motions and let the medium speak.

Ink fabrics

Plotter&#39;s journey is made of simple plots like these. The robot had one job: plot a lot of plus. The result has been pretty unexpected.
First of all, I had issue on offset of my second color which make the plus literally colliding, secondly the center area had the paper waving and raising a bit which made brush paint more color. Finally, the way the plus are no longer plus is interesting, it almost looks like some sort of plants or snail shapes, depending on your imagination!
<img width="100%" src="/images/plots/140zoom.jpg"/>

Before that plot, I had a first try with bigger and more distanced plus, but it was too simple to me:
<img width="100%" src="/images/plots/140bis.jpg"/>

Plotter's journey is made of simple plots like these. The robot had one job: plot a lot of plus.

many plus

I used a dropper to drop some ink on a canvas while the plotter was running.
It it the best opportunity to use the glitter ink which have great effect:
<img width="100%" src="/images/plots/139.gif">

This is really hard to master and very unpredictable. I tried many different ideas:
<img width="100%" src="/images/plots/139b.jpg">
<img width="100%" src="/images/plots/139c.jpg">
<img width="100%" src="/images/plots/139d.jpg">
<img width="100%" src="/images/plots/139e.jpg">
<img width="100%" src="/images/plots/139f.jpg">
<img width="100%" src="/images/plots/139g.jpg">

I used a dropper to drop some ink on a canvas while the plotter was running.

ink drops in square spiral

transition of two parametric spirals. I called it &#39;parametric oddity&#39; because one of the parametric frequency is literally an &#39;odd number&#39; which makes it having this mesh effect. Fountain pen with &#39;Red Dragon&#39; on white bristol A4.
basically it&#39;s a transition between <code>(10πt,41πt)</code> and <code>(8πt,8πt)</code> with radius that varies all along to make it a spiral. 41 is the oddity here!
The parametric is repeated twice with a slightly different perlin noise displacement to add some moiré effect on top of this.
<img src="/images/plots/138zoom1.jpg" width="100%">

<img src="/images/plots/138zoom2.jpg" width="100%">

transition of two parametric spirals. I called it 'parametric oddity' because one of the parametric frequency is literally an 'odd number' which makes it having this mesh effect. Fountain pen with 'Red Dragon' on white bristol A4.

parametric oddity

transition of two parametric spirals repeated twice with different displacement. Fountain pen with &#39;Aurora Borealis&#39; on white bristol A4. The beginning of the spiral is not yet changing in radius to make a bolder border, this is a subtle but important aspect.
<img src="/images/plots/137zoom1.jpg" width="100%">

The zoom is quite interesting here. let&#39;s also zoom at the center too:
<img src="/images/plots/137zoom2.jpg" width="100%">

transition of two parametric spirals repeated twice with different displacement. Fountain pen with 'Aurora Borealis' on white bristol A4.

Alien planet

Here is &quot;White Protozoa&quot; my third <a href="https://greweb.me/2021/05/plot-loops">&quot;plot loop&quot; (see article)</a>. The main digital art is a 1920p video loop of 8 frames available as a <a href="https://www.hicetnunc.xyz/objkt/82974">Tezos hicetnunc NFT</a>. The physical art is 8 frames of A4 size, plotted with white Sakura gen pen on black card paper (210g), and offered when <a href="https://www.hicetnunc.xyz/objkt/71006">buying the NFT</a> (8 editions, assigned in buy order).
<img width="100%" src="/images/plots/136zoom.jpg" />

like in <a href="/plots/135">plot#135</a>, this is an exploration of domain warping and marching squares algorithms.
<img width="100%" src="/images/plots/136full.jpg" />

The ending of #1 being plotted, speed x5:
<img width="100%" src="/images/plots/136plot.gif" />

If you like bonus, I had considered many different animations, and they are viewable as GIF (digital black on white) on <a href="https://github.com/gre/gre/tree/master/plots/examples/136">https://github.com/gre/gre/tree/master/plots/examples/136</a>
You can also find the full source code, open sourced as 99% of my work. I essentially have a generator of plot loops and I ran it to generate 500 gif and chose among them! It was very hard to decide!
Enjoy!

White Protozoa (8 frames)

Domain warping meets marching squares algorithms. Fountain pen on A4 canson.
I have many other candidates. I also tried this one:
<img width="100%" src="/images/plots/135bis.jpg"/>

Domain warping meets marching squares algorithms

topographic warp

A simple experiment with randomly connected curves.

A simple experiment with randomly connected curves.

wool ball

A simple experiment with crosses and sine waves. Fountain Pens with Pink and Turquoise ink on Bristol A4.
also tried with brush pens to try what happens with a 45° slope &amp; unpredactibility:
<img src="/images/plots/133bis.jpg" width="100%"/>

A simple experiment with crosses and sine waves. Fountain Pens with Pink and Turquoise ink on Bristol A4.

Cross sines

A stable parametric spiral transition. Fountain Pen and Turquoise ink on Bristol A4.

A stable parametric spiral transition. Fountain Pen and Turquoise ink on Bristol A4.

Turquoise trispiral

Yet another spiral transitioning between two parametric functions. &#39;Bloody Brexit&#39; ink from Diamine with brush pens on A4 Bristol.
<img width="100%" src="/images/plots/131.gif" />

Yet another spiral transitioning between two parametric functions. 'Bloody Brexit' ink from Diamine with brush pens on A4 Bristol.

hexa flower noise

Exploring a spiral transitioning between two parametric functions to create an hexagonal fold effect. Addition of perlin noise to offset a bit two similar spirals. Fountain pen on A4 Bristol.
<img width="100%" src="/images/plots/130_zoom.jpg"/>

Exploring a spiral transitioning between two parametric functions to create an hexagonal fold effect. Addition of perlin noise to offset a bit two similar spirals. Fountain pen on A4 Bristol.

hexafold planet

Here is &quot;Jumping blob&quot; my second <a href="https://greweb.me/2021/05/plot-loops">&quot;plot loop&quot; (see article)</a>. The main digital art is a 1920p video loop of 8 frames available as a <a href="https://www.hicetnunc.xyz/objkt/71006">Tezos hicetnunc NFT</a>. The physical art is 8 frames of A5 size, the square of the drawing is 12cm by 12cm and they are offered when <a href="https://www.hicetnunc.xyz/objkt/71006">buying the NFT</a> (8 editions, assigned in buy order).
There are 8 frames plotted recreating the &quot;jumping blob&quot; animation (shader implemented in <a href="https://greweb.me/shaderday/67">https://greweb.me/shaderday/67</a>). Each frame is plotted with two fountain pens (Diamine inks: Pink and Turquoise) on Canson Bristal (A5 format), and takes about an hour to plot.
<img width="100%" src="/images/plots/129_all.jpg" />

Each frame revisit a specific technique that I explored in the past months:
<ul>
<li>Frame 1: Voronoi distribution + samples spiral</li>
<li>Frame 2: Voronoi distribution + samples sorted</li>
<li>Frame 3: Voronoi polygons</li>
<li>Frame 4: Voronoi distribtion + TSP</li>
<li>Frame 5: sampling points and starting lines with vector field (low frequency)</li>
<li>Frame 6: sampling points and starting lines with vector field (aligned horizontally)</li>
<li>Frame 7: sampling points and starting lines with vector field (more curvy)</li>
<li>Frame 8: circles plotting</li>
</ul>
<img width="50%" src="/images/plots/129_zoom1.jpg" /><img width="50%" src="/images/plots/129_zoom2.jpg" />
The generator was completely reimplemented, including the &quot;scene&quot; itself which is a port of the GLSL code into Rustlang with some adjustments (two different colors are spread on different areas):
<pre><code class="language-rust">fn jumping_blob(f: f64, o: (f64, f64)) -&gt; Vec&lt;f64&gt; {
 let mut p = o;
 let bezier = Bezier::new(0.0, 0.1, 1.0, 0.9);
 let x = bezier.calculate(f as f32) as f64;
 let t = x * 2. * PI;
 let radius = 0.18;
 let smoothing = 0.15;
 let dist = 0.2;
 p.0 -= 0.5;
 p.1 -= 0.5;
 p.1 *= -1.0;
 p = p_r(p, PI / 2.0);
 let q = p;
 p = p_r(p, -t);
 let s = f_op_difference_round(
 f_op_union_round(
 q.0.max(0.1 + q.0),
 length((p.0 + dist, p.1)) - radius,
 smoothing,
 ),
 length((p.0 - dist, p.1)) - radius,
 smoothing,
 );
 let v = smoothstep(-0.6, 0.0, s).powf(2.0)
 * (if s &lt; 0.0 { 1.0 } else { 0.0 });
 vec![
 v * (0.001 + smoothstep(-0.5, 1.5, p.0)),
 v * (0.001 + smoothstep(1.5, -0.5, p.0)),
 ]
}
fn p_r(p: (f64, f64), a: f64) -&gt; (f64, f64) {
 (
 a.cos() * p.0 + a.sin() * p.1,
 a.cos() * p.1 - a.sin() * p.0,
 )
}
fn length(l: (f64, f64)) -&gt; f64 {
 (l.0 * l.0 + l.1 * l.1).sqrt()
}
fn f_op_union_round(a: f64, b: f64, r: f64) -&gt; f64 {
 r.max(a.min(b))
 - length(((r - a).max(0.), (r - b).max(0.)))
}
fn f_op_intersection_round(a: f64, b: f64, r: f64) -&gt; f64 {
 (-r).min(a.max(b))
 + length(((r + a).max(0.), (r + b).max(0.)))
}
fn f_op_difference_round(a: f64, b: f64, r: f64) -&gt; f64 {
 f_op_intersection_round(a, -b, r)
}
</code></pre>
<img width="100%" src="/images/plots/129_zoom3.jpg" />

It&#39;s one of the first time I try to work on the &quot;scene composition&quot; and I&#39;ve also used a pattern filled with &quot;+&quot; for the background. I want to explore more of these in the future.

8 frames plotted making an animated loop of a jumping blob. A 1920p video and 12cm square physical art is available as an NFT.

Jumping blob (8 frames)

Parametric flower plotted with two brush pens. It is challenging to get the correct pen height when working with brush pens. I used two parametric functions with a slight displacement to reveal some moiré patterns created by the divergence.

Parametric flower plotted with two brush pens.

Pentaflower

another parametric plotted with a brush pen and &#39;Bloody Brexit&#39; ink by Diamine.

another parametric plotted with a brush pen and 'Bloody Brexit' ink by Diamine.

Parametric brush

yet another parametric spiral perturbated by perlin noise!

yet another parametric spiral perturbated by perlin noise!

Parametric shield

parametric function and perlin noise. Brush pen with Bloody Brexit ink on A4 bristol.

parametric function and perlin noise. Brush pen with Bloody Brexit ink on A4 bristol.

Parametric spiral on fire

Revisiting my classical &quot;Jumping man&quot; <a href="/plots/060">plots#060</a> with combination of Fibers exploration (<a href="/plots/112">plots#112</a>). It uses an image as a lookup for noise amplitude and reveals the shape of the Jumping man. Fountain pens. A4 on Bristol.

Noisy fibers

Sakura Gelly Roll on dark red A4 card.

Flower parametric stack

stacking multiple parametric functions with 3 stops. playing with moiré effects. STA pigment liner on A4 bristol.
<pre><code class="language-rust">let size = 90.;
let f1 = (8., 8.);
let f2 = (5., 40.);
let amp1 = 1.0;
let amp2 = 0.05;
let samples = 100000;
let spins = 200.0;
let splits = 4.0;

let parametric = |p: f64| {
 let p1 = (splits * p).floor();
 let p2 = splits * p - p1;
 let t = (p1 + 0.8 * p2) / splits;
 let scale = 1.0 - t;
 let mut p = (
 scale
 * amp1
 * ((spins * 2. * PI * t).cos()
 + amp2
 * mix(
 (spins * f1.0 * PI * t).cos(),
 (spins * f2.0 * PI * t).cos(),
 t,
 )),
 scale
 * amp1
 * ((spins * 2. * PI * t).sin()
 + amp2
 * mix(
 (spins * f1.1 * PI * t).sin(),
 (spins * f2.1 * PI * t).sin(),
 t,
 )),
 );
 let noise_angle = 2.
 * PI
 * perlin.get([
 0.02 * p.0,
 0.02 * p.1,
 100.0 + opts.seed,
 ]);
 let noise_amp = 0.1
 * perlin.get([
 0.01 * p.0,
 0.01 * p.1,
 opts.seed,
 ]);
 p.0 += noise_amp * noise_angle.cos();
 p.1 += noise_amp * noise_angle.sin();
 p
};
</code></pre>

stacking multiple parametric functions with 3 stops. playing with moiré effects. STA pigment liner on A4 bristol.

Growing parametric splitted

<a href="/2021/05/plot-loops">✍️ See also: Plot loops article</a>.
This first plot loop is called &quot;Triplanet&quot;. It&#39;s a transition of two parametric functions with many perlin noise displacements. This is a continuation of <a href="/plots/100">&quot;Planet Holes&quot;</a> series as well as recent <a href="/plots/111">&quot;Parametric stack&quot;</a> explorations.
Every frame is generated with a Rust script I wrote.
16 frames has been plotted with fountain pen on bristol paper (ink: Red Dragon by Diamine). With a back and forth effect, this produces a 30 frames animation loop.
<img width="100%" src="/images/plots/121_walled.jpg"/>

The animation is released as a NFT video on <a href="https://www.hicetnunc.xyz/">hicetnunc</a>. There are 16 editions, as many as there were frames plotted. The NFT video is an art in itself.
By buying a frame (by order of buy), the first buyer also chose what happens to the physical plot: either I keep it OR you can claim it (contact me on Twitter) and have me sending it anywhere in the world!
<img width="100%" src="/images/plots/121_zoom.jpg"/>

Plotting with fountain pen is challenging as it requires many search on the ink, paper and many fail and retry. Plotting all these frames took an afternoon.
<img width="100%" src="/images/plots/121_plot.jpg"/>

Triplanet is my first plot loop, physical animation of 16 plotted frames. transition between parametric functions and perlin noise.

Triplanet (16 frames)

This is a pretty simple technique, which is almost like a spiral filling, except it&#39;s a parametric (a simple one that is close to a spiral). The idea to render something monochrome with a parametric is interesting, I would like to dig more in future. I also tried it on typography (for a family gift).
This plot is done with fountain pen and ink &quot;Amber&quot; by Diamine, which I really like.
When you look closer, there are high frequency noise used to make it more fuzzy.
<img width="100%" src="/images/plots/120_zoom.jpg">

a parametric spiral, similar to recent exploration, allows to fill the color of the Bitcoin logo

Bitcoin

This is, like <a href="/plots/114">plot#114</a>, yet another parametric &quot;stack&quot; (using parametric at different scales).
This time, the parametric is very noisy. There is a desired effect to make a blur illusion. It&#39;s very fuzzy. I have some glitches on the signature but it&#39;s part of the art now!

Yet another parametric stack, noisy one this time! white uniball on black A4.

Blurry waves

Continuation of <a href="/plots/113">plot#113</a> with different parametric functions.
<ul>
<li>Sakura Gelly Roll white on black. (clairefontaine 210g)</li>
<li>STA pigment liner 0.05mm on white. (canson bristol A4)</li>
</ul>
The black plot have an interesting precision which makes it smooth from a far look but the details of this plot are interesting as well. I&#39;m not yet sure what creates the vertical line glitch we see on both plots, is it the paper? is it my robot? It is part of the art now.

concentric parametric flowers

Another exploration of <a href="/plots/112">plots#112</a>, more delicate than <a href="/plots/115">plots#115</a>, with a centered noise of fibers. It uses two fountain pen inks for different color tones (Aurora Borealis and Writer&#39;s Blood from Diamine). I could try with even more lines in future but these are already almost 2 hours of plotting time! A4 on Bristol.

Exploration of fibers with a centered noise. two color tones.

Exploration of perlin noise triangle planets. various fountain pen on A4 bristol.
These are taking almost one hour to plot, with 2 passes of 2 different spirals. Each spiral varies a bit with different offset and displacement noise which creates a desired effect of bolder areas, caveats and craters.
The displacement noise is a simple perlin noise, only one harmony is used but the noise is split into two 2 different perlin noises: the angle noise (like a vector field, different angle of displacement) and the amplitude noise (how much does the displacement move the point).
The triangle is made with a parametric function, reusing technique explored on <a href="/plots/114">plot#114</a>.
There is an important effort on finding a good balance between noise and distribution of lines (it&#39;s not linear, it&#39;s closer on edges).

Exploration of perlin noise triangle planets. various fountain pen on A4 bristol.

Triangle planet

This is a continuation of exploration started at <a href="/plots/112">plot#112</a>.
Had a great try of ink &quot;Amber&quot; by Diamine. Fountain pens on A4 bristol card.

Yellow fibers

Another parametric functions. Inspired from <a href="/plots/111">plot#111</a> idea: stacking multiple parametric functions. The parametric used is
<pre><code class="language-rust">let parametric = |t, p| {
 (
 (0.2 + 0.7 * p) * (2. * PI * t).sin()
 + 0.1 * (14. * PI * t).sin(),
 (0.2 + 0.8 * p) * (2. * PI * t).cos()
 + 0.2 * (20. * PI * t).cos(),
 )
};
</code></pre>
Sakura Gelly Roll on black A4, revealing artifacts of the paper.

stacking multiple parametric functions. Sakura Gelly Roll on black A4, revealing artifacts of the paper.

Growing parametric 14-20

Another parametric functions. Inspired from <a href="/plots/111">plot#111</a> idea: stacking multiple parametric functions. The formula is <code>(0.3+0.7p)f(2πt)+0.05f(8πt)</code> where p is the growing factor, t is the parametric value and f is a cos for x and sin for y. Sakura Gelly Roll on black A4, revealing artifacts of the paper.

Growing 8πt

This is a continuation of exploration started at <a href="/plots/109">plot#109</a>.
There is an increase amount of perlin noise and a subtle use of two different ink tones: &quot;Pink Glitz&quot; and &quot;Red Dragoon&quot; by Diamine. Fountain pens on A4 bristol card.

Pink fibers

Parametric functions are classical entities that i&#39;ve explored many times (from first day!)...
<ul>
<li>...in classical forms: <a href="/plots/001">plot#001</a>, <a href="/plots/003">plot#003</a>, <a href="/plots/007">plot#007</a>, <a href="/plots/013">plot#013</a>, <a href="/plots/038">plot#038</a>, <a href="/plots/096">plot#096</a>, <a href="/plots/096">plot#096</a>,...</li>
<li>... in more funky forms: <a href="/plots/071">plot#071</a>, <a href="/plots/073">plot#073</a>, <a href="/plots/080">plot#080</a>, <a href="/plots/082">plot#082</a>, <a href="/plots/084">plot#084</a>, <a href="/plots/087">plot#087</a>, <a href="/plots/095">plot#095</a>, <a href="/plots/090">plot#090</a>, <a href="/plots/097">plot#097</a>,...</li>
</ul>
This is however the first time I think about stacking parametic functions: It might not be very perceptible but it is basically 150 parametric functions projected on different scales. The idea comes a bit from the &quot;Planet holes&quot; idea (<a href="/plots/100">plot#100</a>), circles with different radius.
I might not have taken the best parametric for this plot but it&#39;s still fun. Indeed, the pen digged a bit too much in the paper and I might try again with other parametric functions in future.
The ink used is &quot;Bloody Brexit&quot; by Diamine, like on <a href="/plots/109">plot#109</a>, which produces interesting reflection in combination with a good paper (A4 Canson 250g/mm Bristol) and lamp.
<img src="/images/plots/bloodybrexit.jpg" width="100%" />

stacking multiple parametric functions, fountain pen with 'Bloody Brexit' ink which produces an interesting reflection. A4 bristol.

Growing parametric

This is a continuation of <a href="/plots/107">plot#107</a>, but this time it projects it with polar coordinate, essentially making it a disc.
Still using fountain pen, main ink is &quot;Amber&quot; by Diamine. It has interesting properties.

Gold disc

This is a continuation of exploration started at <a href="/plots/107">plot#107</a>, but this time alternating between horizontal and vertical lines. As before, it uses a tiny bit of perlin noise to diverge a bit the lines. The randomness distribution has been customized to approach more the edges.
I switched to fountain pen for better precision. Only using one ink... But what an ink! &quot;Bloody Brexit&quot; by Diamine.
<img src="/images/plots/bloodybrexit.jpg" width="100%" />

Clothes

<img width="100%" src="/images/plots/108.gif" />

It took me 107 previous days of plotting to come up with an elegant idea: searching the best plot among many different variants can easily be done by working instead on a video of that plot! Then you can chose a frame to plot, it is both practical as well as you get a nice animation for free!
Some code snippet for video generation.
<pre><code class="language-bash"># generate all .svg in results, then:
cd results
mkdir pngs
for f in *.svg; do convert $f pngs/${f%.*}.png; done
ffmpeg -r 24 -i pngs/%d.png -pix_fmt yuv420p -vf &quot;pad=ceil(iw/2)*2:ceil(ih/2)*2&quot; out.mp4
</code></pre>

Perlin mountains

Inspiration came from work from <a href="https://twitter.com/mellogood">@mellogood</a> who made these: <a href="https://twitter.com/mellogood/status/1376565566283120645">https://twitter.com/mellogood/status/1376565566283120645</a>.
I&#39;m starting from this idea here and trying to add some Perlin noise displacement on the polar coordinate.

Planet Holes #1

Experimentation of vector fields with a sinusoïdal distribution of lines.
It was made in 4 editions, one for each season.
<img src="/images/plots/091winter.jpg" width="100%">
<img src="/images/plots/091spring.jpg" width="100%">
<img src="/images/plots/091summer.jpg" width="100%">
<img src="/images/plots/091fall.jpg" width="100%">

Experimentation of vector fields with a sinusoïdal distribution of lines.

seasonal roots

interleaving curves following a parametric function. 2 fountain pens on Bristol.

interleaving curves following a parametric function. 2 fountain pens on Bristol.

Anneaux musclés

<img width="400" src="/images/2021/05/relics.gif" />

# Releasing **Relics**, my first curated NFT collectible series, on Tezos blockchain and platform [_hicetnunc.xyz_](https://hic.link/greweb).

**Collection:** There are 28 curated visual loops that will be shared on the 7 days of this week. 4 NFT a day. I will use French day names as well as French seasons to name them all.

**Technical:** Relics collection are unique animation made with Perlin noise, cellular automaton and GLSL. The generator is fully open source and available on my website here: https://greweb.me/shaderday/63 as I strongly believe in open sourcing literally everything I do even as an artist. That said, I curated carefully the 28 unique NFTs myself and it's the only official collection of that generator.

> Contact me if you are the buyer to obtain the parameters of your NFT. Unfortunately it's not possible yet to "unlock" content as part of buying a NFT but I would be glad to give you the parameters of your NFT! I can also generate high resolution versions on demand (but also, the open sourced code allows it, once you have these parameters!).

_Lundi d'hiver, Lundi de printemps, Lundi d'été, Lundi d'automne._

<a href="https://www.hicetnunc.xyz/objkt/61391"><img src="https://cloudflare-ipfs.com/ipfs/QmSbZ7iK1S2aDKtTM4HLkzjZrMCwgyDhNbqum8kQTfF44N" width="25%"/></a><a href="https://www.hicetnunc.xyz/objkt/61403"><img src="https://cloudflare-ipfs.com/ipfs/QmbGrg2mckEbz5u6ShuQi5SbRcUKkEiY9S8irExUiJLizS" width="25%"/></a><a href="https://www.hicetnunc.xyz/objkt/61410"><img src="https://cloudflare-ipfs.com/ipfs/QmZSQduPnXvmWvFo8JdC3WrxjzU9MbaKGD2JtywtWRq6C8" width="25%"/></a><a href="https://www.hicetnunc.xyz/objkt/61413"><img src="https://cloudflare-ipfs.com/ipfs/Qmb2qS5Vp7YPfW5KqqgEm4aFqeTaGv2RXb81j1mG9dcLqL" width="25%"/></a>

_Mardi d'hiver, Mardi de printemps, Mardi d'été, Mardi d'automne._

<a href="https://www.hicetnunc.xyz/objkt/63131"><img src="https://cloudflare-ipfs.com/ipfs/QmQHcBZ18wYDMq2B2i7AfQFC1e5CJytgsYxYzuanJ8Zxuy" width="25%"/></a><a href="https://www.hicetnunc.xyz/objkt/63126"><img src="https://cloudflare-ipfs.com/ipfs/QmZRfP9fNKWRizNzHEiB4yHFPTSAuij53XJzXdeqz2qqNu" width="25%"/></a><a href="https://www.hicetnunc.xyz/objkt/62848"><img src="https://cloudflare-ipfs.com/ipfs/QmT4xPg39PyVDEYGSi1BRce62jJnt2w8SmCDxEYJaZ47cQ" width="25%"/></a><a href="https://www.hicetnunc.xyz/objkt/62839"><img src="https://cloudflare-ipfs.com/ipfs/QmXrWE4csSkPXYRg3BqhFmKVCzbXGDtNLRkku6Gc2PCY2Y" width="25%"/></a>

_Mercredi d'hiver, Mercredi de printemps, Mercredi d'été, Mercredi d'automne._

<a href="https://www.hicetnunc.xyz/objkt/64885"><img src="https://cloudflare-ipfs.com/ipfs/QmcwpMrbg3n3iNo1TgQUS5LarKwFwz6kK9wexkc38ybRgT" width="25%"/></a><a href="https://www.hicetnunc.xyz/objkt/64874"><img src="https://cloudflare-ipfs.com/ipfs/QmeDzVu5G1wLJxEsDXJXtdiJpMWAiRDfJnRgx16VmGH96X" width="25%"/></a><a href="https://www.hicetnunc.xyz/objkt/64863"><img src="https://cloudflare-ipfs.com/ipfs/QmZuJcvNG2T7sCn959CWEuHZxi1C2Nr5H5JzbV6Sp5Pz3p" width="25%"/></a><a href="https://www.hicetnunc.xyz/objkt/64852"><img src="https://cloudflare-ipfs.com/ipfs/Qmcomh1sD8L6wewENSWnqLT4akpRwrDpgABy8viu68b9Ua" width="25%"/></a>

_Jeudi d'hiver, Jeudi de printemps, Jeudi d'été, Jeudi d'automne._

<a href="https://www.hicetnunc.xyz/objkt/66703"><img src="https://cloudflare-ipfs.com/ipfs/QmRe8RwPjLhatKbSMV5YGf3TDBKdB8W7xVnM8zQzNqe3dM" width="25%"/></a><a href="https://www.hicetnunc.xyz/objkt/66686"><img src="https://cloudflare-ipfs.com/ipfs/QmNpPhofb4eJJq7YCDpjba8t3fNFQkY8W9ryM2iSreWkwB" width="25%"/></a><a href="https://www.hicetnunc.xyz/objkt/66683"><img src="https://cloudflare-ipfs.com/ipfs/QmRN9L8PhKmfb4uM2LsFb2C2Gxa3YHZ7KQFZsSbSAUAMZ6" width="25%"/></a><a href="https://www.hicetnunc.xyz/objkt/66674"><img src="https://cloudflare-ipfs.com/ipfs/QmXh2RAdgP841oJWdyMtBSQ78XnYQwHzEkTF8qze6hnbCn" width="25%"/></a>

_Vendredi d'hiver, Vendredi de printemps, Vendredi d'été, Vendredi d'automne._

<a href="https://www.hicetnunc.xyz/objkt/68578"><img src="https://cloudflare-ipfs.com/ipfs/QmTXdtycdrp4v6UWymCeDJCamxHqUdHdy99XfK7vmVqqtx" width="25%"/></a><a href="https://www.hicetnunc.xyz/objkt/68575"><img src="https://cloudflare-ipfs.com/ipfs/QmVyxcykCS8f1vpriReyedAfdP1M9wHq8pwyKtWtoUgXRb" width="25%"/></a><a href="https://www.hicetnunc.xyz/objkt/68572"><img src="https://cloudflare-ipfs.com/ipfs/QmY1HcgrX7S5wxaYxRoFuxUWEdG6W6gAApDpzc1oYHSUDt" width="25%"/></a><a href="https://www.hicetnunc.xyz/objkt/68522"><img src="https://cloudflare-ipfs.com/ipfs/QmSc8Q5ozk8nhLvzF6jry613WDhvFX6PjbqnKbyb97smhy" width="25%"/></a>

_Samedi d'hiver, Samedi de printemps, Samedi d'été, Samedi d'automne._

<a href="https://www.hicetnunc.xyz/objkt/69282"><img src="https://cloudflare-ipfs.com/ipfs/QmasrfTskgzSj48gG62xFyWvXrJXWznyPakMB7GtYwgcY3" width="25%"/></a><a href="https://www.hicetnunc.xyz/objkt/69280"><img src="https://cloudflare-ipfs.com/ipfs/QmdvFEWzkbK2yPNSNURPNNJTkGf55MoDfboXboCvYwVUob" width="25%"/></a><a href="https://www.hicetnunc.xyz/objkt/69276"><img src="https://cloudflare-ipfs.com/ipfs/QmZhD4pwmRB43CN7hXKouGHMgCdwuFfnBweJfNBeSJeTBt" width="25%"/></a><a href="https://www.hicetnunc.xyz/objkt/69275"><img src="https://cloudflare-ipfs.com/ipfs/QmdgVW9CnMY1P6o41EEaiwsJMDQdgxhPzo4xmrV8YLLJ66" width="25%"/></a>

_Dimanche d'hiver, Dimanche de printemps, Dimanche d'été, Dimanche d'automne._

<a href="https://www.hicetnunc.xyz/objkt/70994"><img src="https://cloudflare-ipfs.com/ipfs/QmbTE4QGptyHGYsyemttEXSDoydapMuBiT94kooD3zLHc9" width="25%"/></a><a href="https://www.hicetnunc.xyz/objkt/70991"><img src="https://cloudflare-ipfs.com/ipfs/QmXMUCZmptV4MyXJ8zUMM9ZoAfmWMLCTr5toPH99YLo6LY" width="25%"/></a><a href="https://www.hicetnunc.xyz/objkt/70973"><img src="https://cloudflare-ipfs.com/ipfs/QmfVNN6bfzhsEK5fx45DwQTQ6hMrbASxgGzQnSgTwJEbJd" width="25%"/></a><a href="https://www.hicetnunc.xyz/objkt/70967"><img src="https://cloudflare-ipfs.com/ipfs/QmU1VEYV7zyyN3LhES4mgAm8qdgjgvDERDRqu7GJnKtVQL" width="25%"/></a>

_published on [hic.link/greweb](https://hic.link/greweb)_

Relics collection are unique animation made with Perlin noise, cellular automaton and GLSL.

Relics NFT collection

I am thrilled to release my first **"plot loop"** and plan to release one every week. Let me explain simply the idea:

- an animation is generated with code, (SVG plottable files)
- Each frame of this animation is plotted physically,
- photographed back into a digital picture,
- and post-processed back into a video that makes it an artistic creation by itself as well as each physical plot being one "edition" of that plot loop series.

> **You can see all my plot loops made so far at [https://greweb.me/plots/tags/plotloop](https://greweb.me/plots/tags/plotloop)**

**So there are two creations:**

- the animation is itself digital art => it is released as an NFT, with as many editions as there are frames.
- each individual frame is physical art => it can be shipped to first buyer.

### Plots and NFT ?!

**Plot loop animations will be released as [Non Fungible Token (NFT)](https://www.youtube.com/watch?v=Y-i9Jsm95ro)** on [hicetnunc](https://www.hicetnunc.xyz/). It allows anyone with Tezos crypto currency to acquire this video on Tezos blockchain. Digital collectors are collecting one edition of this NFT which adds to their collection: **The NFT video is an art in itself**. On top of this, physical collectors can also claim the shipping of the physical art of the frame corresponding to the collected NFT edition (there is as many editions as there are frames plotted).

**This is a hybrid concept between physical and digital art.** By buying a frame (by order of buy), the first buyer has the possibility to chose what happens to the physical art: either you allow me to keep it OR you can claim it (contact me on Twitter) and have me sending it anywhere in the world!

> I'm writing a bigger article about my recent NFT exploration and my art in general. I've been exploring so many ideas recently. I already sold some plots via NFTs, I am very honored to have found some buyers 😍. They can still be found at [hic.link/greweb](https://hic.link/greweb). I'm currently burning them one after the other to expire the possibility to buy them as I will focus on these new projects.

## First release, the triplanet loop

**hicetnunc NFT: [OBJKT#57902](https://www.hicetnunc.xyz/objkt/57902)**

<a href="/plots/121"><img width="50% " src="/images/plots/121.gif"/></a>

My first plot loop is called "Triplanet". It's a transition of two parametric functions with many perlin noise displacements. This is a continuation of ["Planet Holes"](/plots/100) series as well as recent ["Parametric stack"](/plots/111) explorations.
Every frame is generated with a Rust script I wrote.

**Triplanet was released in [plots#121](/plots/121).** 16 frames have been plotted with fountain pen on bristol paper (ink: Red Dragon by Diamine).

<img width="100%" src="/images/plots/121_walled.jpg"/>
<img width="50%" src="/images/plots/121_zoom.jpg"/><img width="50%" src="/images/plots/121_plot.jpg"/>

**Plotting with fountain pen is challenging** as it requires many search on the ink, paper and many fail and retry. Plotting all these frames took an afternoon.

## What's next?

I plan to release a _plot loop_ every week.

It's taking a lot of time to plot all frames so there are great challenges: first of all is to reduce the number of frames, secondly is to make them worth it, to make them really good: I want every frame to be unique, to include some specific elements, easter eggs, that make it recognizable out of the other frames.

---

# Please also check out other great artists

I believe a lot of this hybrid idea of mixing plot, animation, and NFTs. It was very funny for me to see all coïncidence and convergence of ideas on this topic. It's one of these moments when we have the same ideas at the same time. I'm not the only one exploring this and I want to do a big kudos to these great artists.

### Marion [@atelier_marion](https://twitter.com/atelier_marion/status/1388071908575490048)

who recently released a very similar idea! <del>She has 2 more frames yet to be taken!</del> Not anymore!

<a href="https://www.hicetnunc.xyz/objkt/42546"><img src="https://cloudflare-ipfs.com/ipfs/QmXcAWQTaGHQp4BGy1krER284PoaPCNhKYzDrxp86MaM7b" style="max-width: 300px"></a>

She is also creating impressive drawing work as seen on her website: https://www.marionguy.com/shop

### Maks Surguy [@msurguy](https://twitter.com/msurguy)

who is behind [plotterfiles.com](https://plotterfiles.com/) platform. He also does a lot of great plotting art and thought about similar concept recently! [Checkout this article about his work.](https://medium.com/poptwig/artist-in-focus-maks-surguy-26277c95b197)

### Thomas Lin Pedersen [@thomasp85](https://twitter.com/thomasp85)

who is doing a [stuning work](https://www.hicetnunc.xyz/tz/tz2Pkj2xWJovKKCsABjnr3NbyMVJTMBkpTvb) and very impressive landscapes. Also selling NFT for shipping physical print.

He recently did a very cool NFT in collaboration with **Lionel Radisson** [@MAKIO135](https://twitter.com/MAKIO135):

<a href="https://www.hicetnunc.xyz/objkt/53662"><video style="max-width: 300px" controls autoplay loop src="https://ipfs.io/ipfs/QmaGfhSgWX1UTq6jPX11mfHDxccK5eXGYqi6u71zNLaBhY"/></a>

### ...so many other artists!

Let's chat! You can join us on [hicetnunc's discord](https://discord.gg/jKNy6PynPK) on channel #phygital-objkts which explore very similar idea and where other artists will be active!

I'm also available for collaboration.

Releasing my first 'plot loop', generative animation plotted and published as an NFT.

'Plot loops' concept

[main]: /2021/04/cryptoaliens

> See also [CryptoAliens: Genesis][main] main article.

This article explains how [CryptoAliens: Genesis (ethblock.art)][main] works in technical depth.

<img src="/images/posts/cryptoaliens/032_px.png" width="50%" /><img src="/images/posts/cryptoaliens/036_px.png" width="50%" />

First of all, I would like to point out the [source code is available here on Github](https://github.com/gre/gre/tree/master/blockarts/CryptoAliens).

This whole idea was kicked off on [Twitch](https://twitch.tv/greweb). A recording is [available on Youtube](https://www.youtube.com/watch?v=WUzOlLq0IAo). Apart from the many glitches this 3 hours session had remained to be solved, the main part of this was implemented that night. Indeed I had to work countlessly on polishing the shaders, lighting and post-processing. I also spent a lot of time using the block data in a meaningful way because it's what [EthBlock.art](https://ethblock.art) really is about.

## EthBlock.art revolutionary idea

Before going further into the technical details of CryptoAliens, I would like to point out how revolutionary this EthBlock.art idea is.

The project aims to create a virtuous ecosystem of "deterministic art", code visualization of Ethereum blocks. Everything is data: from the ethereum block of transactions, to the code that visualize it, and to the NFTs minted/traded using Ethereum transactions (that themselves are into Ethereum blocks).

**This is a virtuous ecosystem, similar to [Supply Chain Transformation concepts](https://en.wikipedia.org/wiki/Value_chain): each actor in this ecosystem add value and get retributed for it, as I tried to explain in this schema:**

![](/images/posts/cryptoaliens/ethblockart.png)

`CryptoAliens: Genesis` is one possible BlockStyle that I've designed, as a creative coder. It tries to visualize what happened in the Ethereum Block and will take mods into account to try to be as good as possible to deliver interesting possibilities to BlockArt minters.

## Ok, so how is it implemented technically?

Indeed WebGL.

More precisely, it is implemented with [`gl-react`](https://github.com/gre/gl-react) which is convenient to write and compose [_GLSL Fragment Shaders_](https://www.khronos.org/opengl/wiki/Fragment_Shader).

**here is the big picture of the pipeline:**

![](/images/posts/cryptoaliens/graph.gif)

There are 2 main shaders: Mandelglitch (for skin texturing) and Scene (the main raymarching shader). Each of them take a bunch of parameters. `mod1..4` are values from the creator. The rest are inferred from the Block information, they are split into multiple parameters for convenience.

The parameters `s1..9` are coming directly from `mersenne-twister` library, a [PRNG](https://en.wikipedia.org/wiki/Pseudorandom_number_generator) used to get a wide and deterministic variety of shapes, initialized with the block hash. That said, as pointed in the previous section, the main features of the shape are determined by Ethereum block information itself (number of transactions, timestamp, transfers, gas used,...).

On top of these, some other parameters are controling key elements they come from more block information (heavy, head, bonesK, arms info,...).

The technique implemented on the main Scene shader is [raymarching distance functions](https://www.iquilezles.org/www/articles/raymarchingdf/raymarchingdf.htm). The shapes at stake are mostly segments that are merged with a smooth union. There are many loops involved which made it challenging to optimize.
There may be issues on some mobile phone even tho it works on mine thanks to a "pixelated" version. (downscaling the pixels helped)

Because of an heavy usage of this technique, the main scene was really challenging to optimize, it actually runs something like 5 FPS. My choice was to not animate it directly (you can see on the rendering graph that actually the buffer don't need to refresh, except when a "mod" is changed). However, thanks to intermediary framebuffers we can do 60 FPS animation at the postprocessing level. This is what the final user will get as the mods are static.

### Canvas 2D to draw texts

A Canvas 2D element is used to draw the text that will appear on top of everything.

```js
/// canvas used to draw in postprocessing ///
function FrameText({ blockNumber, dateText, width, height, kg, bones }) {
 const onCanvasRef = (canvas) => {
 if (!canvas) return;
 const ctx = canvas.getContext("2d");
 const w = ctx.canvas.width;
 const h = ctx.canvas.height;
 const pad = Math.round(w * 0.01);
 const padX = Math.round(w * 0.02);
 const fontS = Math.floor(0.19 * w) / 10;
 const fontSize = `${fontS}px`;
 ctx.save();
 ctx.fillStyle = "#000";
 ctx.fillRect(0, 0, w, h);
 ctx.font = "bold " + fontSize + " monospace";
 ctx.textBaseline = "top";
 ctx.fillStyle = "#fff";
 ctx.fillText(`CryptoAliens specimen #${blockNumber}`, padX, pad);
 ctx.textBaseline = "bottom";
 ctx.textAlign = "right";
 ctx.font = fontSize + " monospace";
 ctx.fillText(
 `born ${dateText}, ${kg} kg, ${bones} bones`,
 w - padX,
 h - pad
 );
 ctx.restore();
 };
 return (
 <canvas
 ref={onCanvasRef}
 width={String(width * 2)}
 height={String(height * 2)}
 />
 );
}
const FrameTextCached = React.memo(FrameText);
```

### How is Mandelglitch used?

As said, [Mandelglitch BlockStyle](https://ethblock.art/create/17) is re-used in this CryptoAliens BlockStyle. This really is the power of gl-react: it makes such composability really easy to do, the same way you can compose React components.

You can see in the [Youtube recording](https://www.youtube.com/watch?v=WUzOlLq0IAo) the way I have implemented it initially: it is just a simple import of Mandelglitch.js (literally the BlockStyle as-is) that I can just send as a uniform sampler2D.

```
<Node
 shader={sceneShaders.scene}
 uniforms={{
 t: <Mandelglitch block={block} mod1={mod1} mod2={mod2} mod3={mod3} />,
 ...
```

after that, it was simpler to embed Mandelglitch in the BlockStyle.

The way Mandelglitch texturing is used however is that I will only use the "red" component and remap it to CryptoAliens' own palette, in order to have a better control of the coloring.

### Code organisation

React and Gl-React allows to organize the code relatively easily. First of all each pass in the rendering scene is a component, then shaders are organized in the `Shaders.create` usage. I've tried to collocate them (still in same one big file to simplify the upload to EthBlock.art).

I find it pretty convenient to externalize piece of the logic into "hooks" function. Example:

```js
const CustomStyle = (props) => {
 // prettier-ignore
 const { block, attributesRef, mod1, mod2, mod3, mod4, highQuality, width, height } = props;
 // prettier-ignore
 const { kg, bones, theme, background, s1, s2, s3, s4, s5, s6, s7, s8, heavy, head, bonesK, armsLen, armsSpread, armsCenter, armsEndW, dateText, blockNumber } =
 useBlockDerivedData(block, mod1, mod2, mod3, mod4);

 useAttributesSync(attributesRef, kg, bones, theme);

 return (
 <LiveTV
 text={
 <FrameTextCached ... />
 }
 ...
 >
 <NearestCopy width={w} height={h}>
 <Scene
 t={<MandelglitchCached ... />}
 ...
 />
 </NearestCopy>
 </LiveTV>
 );
};
```

`useBlockDerivedData` internally uses `useMemo` in order to cache the computation of block data interpretation.

In order to make **only** one part of the tree to actively re-render, i've used a local `useTime` that would re-render only that part (the LiveTV final shader). It's implementation is trivial:

```js
function useTime() {
 const [time, setTime] = useState(0);
 useEffect(() => {
 let startT;
 let h;
 function loop(t) {
 h = requestAnimationFrame(loop);
 if (!startT) startT = t;
 setTime((t - startT) / 1000);
 }
 h = requestAnimationFrame(loop);
 return () => cancelAnimationFrame(h);
 }, []);
 return time;
}
```

## Arms joints rotation, GLSL random and determinism

Ok, this is a hard topic. But it's extremely important that every BlockArt reliably produce the same result with the same block data, regardless of the computer used.

That last "regardless of computer used" part has challenged me at the last minute! JavaScript doesn't have this problem because it's stable between implementations (computers, engines). However, **this is not the case with OpenGL / GLSL**: every computer, every hardware (GPU) or possibly the "backend" implementation for WebGL ([ANGLE](https://github.com/google/angle) have different backends) can differ when it comes to float precision and primitive results.

In my shader, I was using the classical `random` function that is documented at https://thebookofshaders.com/10/

```cpp
float random (vec2 st) {
 return fract(sin(dot(st.xy, vec2(12.9898,78.233))) * 43758.5453123);
}
```

It works very well when you need a nice 2D distributed noise for basic effects **but it is very bad if you strongly rely on a stable & consistent noise to generate different shapes**.

Empirically, I can observe that `sin()` yields different results on different computers.

This was impacting me badly because I was able to see very various shapes:

<img src="/images/posts/cryptoaliens/rand1.png" width="33%"/><img src="/images/posts/cryptoaliens/rand2.png" width="33%"/><img src="/images/posts/cryptoaliens/rand3.png" width="33%"/>

What I need to varies a bit here is just the angle at each joint of the arms. This is very important for the uniqueness of the creature. The problem is that if each value changes a tiny bit, the whole thing diverge VERY QUICKLY, as the rotation angle will accumulate.

Worse than that, I had a bad pattern to accumulate randomness like this:

```cpp
float ss1 = s1;
for (int i = 0; i < armsLen; i++) {
 ss1 = random(ss1);
 ...
}
```

Actually I don't need that, first of all it's probably not good for performance, secondly I can just afford taking the fractional part of a simple polynomial:

```cpp
float arm (inout vec3 p, float index, float w, float h) {
 float s = sdSegment(p, h, w);
 float base1 = 305.53 * s1 + 77.21 * index;
 float base2 = 403.53 * s2 + 69.71 * index;
 for (int i = 0; i < armsLen; i++) {
 float fi = float(i);
 float ss1 = fract(base1 + 9.412 * fi);
 float ss2 = fract(base2 + 8.823 * fi);
 pR(p.xy, 8. * s4 * (ss2-.5));
 pR(p.xz, 6. * s5 * (ss1-.5));
 s = fOpUnionSoft(bonesK, s, sdSegment(p, h, w));
 h *= .9;
 w *= .9;
 p.y -= 1.2 * h;
 }
 s = fOpUnionSoft(bonesK + 0.2 * s5, s, length(p) - armsEndW);
 return s;
}
```

Note that here it's very arbitrary numbers, the point is to obtain variety and unpredictability in the results. `fract` is a very simple operation (take the fractional part of the number). Indeed i'm still prone to approximation, but the risk is limited by the fact i don't go too high in values here. Worse case scenario is it varies a bit the rotation but it should be so tiny that it won't be visible.

As said before and as seen in this code, the number will be used to do rotations (that `pR` is transforming `p` with some rotations). I use `s4` and `s5` values to give the magnitude of rotations.

**Let's look at a few cases:**

If both s4 and s5 are very near 0.0, it will be straight arms (it's a rare case therefore).

<img src="/images/posts/cryptoaliens/042_px.png" width="50%"/><img src="/images/posts/cryptoaliens/033_px.png" width="50%"/>

If one of the s4 or s5 are 0.0, it will be only happening on one "plan", or slightly diverging spirals, which I assume also to be rare cases:

<img src="/images/posts/cryptoaliens/017_px.png" width="50%"/><img src="/images/posts/cryptoaliens/020_px.png" width="50%"/>

Otherwise, most of the times, it will be relatively random:

<img src="/images/posts/cryptoaliens/029_px.png" width="50%"/><img src="/images/posts/cryptoaliens/032_px.png" width="50%"/>
<img src="/images/posts/cryptoaliens/028_px.png" width="50%"/><img src="/images/posts/cryptoaliens/026_px.png" width="50%"/>

## going 128px. Last minute decision, hard tradeoff

Due to concerns on the "deterministic rendering" from Ethblock.art folks, I had to make a choice regarding the fact it was too slow on mobile... I've decided to switch to 128x128 rendering for ALL platforms so it's consistent.

All the images on that article were done on 1024x1024 which is slow on computer and not even working on my mobile phone. (OnePlus)

It's hard to have efficient raymarching today when you have many items.

**Ultimately, I like how it finally looks, there were some minimalism / cell shaded styles,.. now it embraces Pixel Art even more!**

<img src="/images/posts/cryptoaliens/r02.png" width="50%" /><img src="/images/posts/cryptoaliens/r01.png" width="50%" />

It's also always possible to make higher quality version of these rendering and I'm excited to experiment more of these in future.

---

My name is Gaëtan Renaudeau, and I'm a noise explorer. **feel free to ping me on Twitter [@greweb](https://twitter.com/greweb)**

Technical aspects of CryptoAliens digital creatures generated with Ethereum blockchain blocks. They can be minted on ethblock.at by anyone, which establishes a limited set of CryptoAliens species.

CryptoAliens: Genesis, a technical look

[create]: https://ethblock.art/create/24
[opensea]: https://opensea.io
[tech]: /2021/04/cryptoaliens-tech

> See also [CryptoAliens: Genesis, a technical look][tech].

<img src="/images/posts/cryptoaliens/021_px.png" width="50%" /><img src="/images/posts/cryptoaliens/001_px.png" width="50%" />

> CryptoAliens: Genesis establishes the first embryonic species. Which CryptoAliens are you going to chose? Each creature gets born on an Ethereum block that nourishes its shape: transactions, ETH value transferred, gas,... their unique skin comes from Mandelglitch's BlockStyle with the same rarity scheme.

## What are CryptoAliens?

CryptoAliens are digital creatures generated from Ethereum blockchain blocks. They can be minted on [ethblock.art][create] by anyone, to establishes a limited set of CryptoAliens species in a decentralized matter. Each block produced on Ethereum have unique elements that can be visualized in creative ways.

<img src="/images/posts/cryptoaliens/014_px.png" width="50%" /><img src="/images/posts/cryptoaliens/017_px.png" width="50%" />

> **CryptoAliens are born and nourished from transactions, transactions are bones, ETH is flesh,... and many other aspects that this article will explain!**

<img src="/images/posts/cryptoaliens/032_px.png" width="50%" /><img src="/images/posts/cryptoaliens/013_px.png" width="50%" />

### So I decide which ones are the CryptoAliens?

**Yes! As a NFT minter, you are the creator and you contribute at establishing the first 'Genesis' series of CryptoAliens.** You decide which creature deserve to live. You are the curator and it is your responsible to do a lot of research and find the most adorable (or the creepiest?) creature!

<img src="/images/posts/cryptoaliens/036_px.png" width="50%" /><img src="/images/posts/cryptoaliens/004_px.png" width="50%" />

### How many CryptoAliens are there?

Every single CryptoAliens species is unique and there are currently 12 millions because that's as many blocks there are today (April 2021). Every 15 seconds, a new block is minted on Ethereum blockchain (with usually hundreds of transactions in it) making a new CryptoAliens possibility.
The block is the DNA, but the creature only starts existing when minted!

**TLDR. CryptoAliens only comes to life when someone mint it as an NFT on the [ethblock.art][create] contract.** They can then be sold and traded on [opensea.io][opensea]. There is **a limited amount of CryptoAliens possible to mint** so be wise at your choice. In this 'Genesis' series, the current supply is set to 100!

<img src="/images/posts/cryptoaliens/002_px.png" width="50%" /><img src="/images/posts/cryptoaliens/003_px.png" width="50%" />

### What is 'Genesis' series about?

The idea of 'Genesis' is that we are collectively going to create the initial species of this universe (with the NFT we chose to mint).

Minting a _CryptoAliens: Genesis_ specimen is giving birth to the creature, therefore the current NFT is visualized on [ethblock.art][create] as a video tape recording of that time of birth (with the block number, time, weight and number of bones). These data are included in the NFT itself and could be reused in future!

## What determines how a CryptoAliens specimen looks like?

There are many information contains in Ethereum blocks that will get used to determine the general shape and gives its rarity.

### Block's timestamp

<img src="/images/posts/cryptoaliens/040_px.png" width="50%" /><img src="/images/posts/cryptoaliens/041_px.png" width="50%" />

When the block happened during UTC night, the visual will be in dark mode.

### Block's transactions amount

<img src="/images/posts/cryptoaliens/007_px.png" width="50%" /><img src="/images/posts/cryptoaliens/008_px.png" width="50%" />

When a block contains a lot of transactions it will impact its general weight. It will be highlighted by this very heavy blobs shapes. That said, the weight can be more or less dense based on amount of bones and also unique for each CryptoAliens specimen.

### Block's heavy transfers in ETH

<img src="/images/posts/cryptoaliens/035_px.png" width="50%" /><img src="/images/posts/cryptoaliens/020_px.png" width="50%" />

As said in the introduction, "ETH is flesh". Even tho most of the time it will impact the general weight of the creature, when a block contains an expectionally high transfer of Ethereum value, it will be highlighted by a big "head" on the creature. ("head" in doublequote because none of our scientist really figured what is this)

### Block's exceptionally low amount of ETH transferred

<img src="/images/posts/cryptoaliens/005_px.png" width="50%" /><img src="/images/posts/cryptoaliens/006_px.png" width="50%" />

On the contrary, when a block contains almost no ETH transfers, the arms will be very thin. Clearly ETH traders didn't nourish enough this poor creature.

### Block's important ratio of gas used (vs ETH value transfer)

<img src="/images/posts/cryptoaliens/023_px.png" width="50%" /><img src="/images/posts/cryptoaliens/016_px.png" width="50%" />

It often appears in combination with the previous criteria, if the ratio `total gas / total eth transfers` is high, meaning that a lot of the ETH is into gas, there will be some blobs at the end of the arms.

### ...and more block rare features

There are a lot of special cases are rare conditions that can happen. I will not disclose and I will let you discover. Some are really rare and some will be discovered in the future (even the author of blockstyle won't be aware of all cases!).

### Block's hash

Finally, the block hash gives variety in the results. It's necessary in order to have truly unique 12 millions species. But it's only complementary to the various other criteria. There are many features that are getting impacted by it, including the skin texturing (see _Mandelglitch BlockStyle_ section).

<img src="/images/posts/cryptoaliens/043_px.png" width="50%" /><img src="/images/posts/cryptoaliens/042_px.png" width="50%" />
<img src="/images/posts/cryptoaliens/012_px.png" width="50%" /><img src="/images/posts/cryptoaliens/038_px.png" width="50%" />

### What controls does the creator have?

At creation time, the minter also have the ability to move a bit the specimen:

- `mod1` is a simple rotation around it.
- `mod2` is a simple climbing and zooming.
- `mod3` will flex a bit the shape to make it torn & twist a bit.
- `mod4` have an impact on the color palette scaling.

**On top of this, mods have the ability to transform the skin texturing** which is actually based on [Mandelglitch BlockStyle](https://ethblock.art/create/17)! That means the rarity elements of Mandelglitch are shared in this new BlockStyle.

### mmh, Mandelglitch BlockStyle?

<a href="https://ethblock.art/create/17"><img src="/images/posts/cryptoaliens/mandelglitch.png" width="10%" /></a> **[Mandelglitch](https://ethblock.art/create/17) is a BlockStyle on [ethblock.art](https://ethblock.art/create/17), derived from Mandelbrot fractal.**

The visibility of Mandelglitch on the skin has been intentionally contained, but sometimes it is more visible. Here are two examples:

<img src="/images/posts/cryptoaliens/031_px.png" width="50%" /><img src="/images/posts/cryptoaliens/022_px.png" width="50%" />

## ...and, What's next?

Who knows what's next! As everything is available on the blockchain, what you mint is saved immutably and forever. Me or other artists could fork the code ([available on Github](https://github.com/gre/gre/tree/master/blockarts/CryptoAliens)) to make animated version of the CryptoAliens that were chosen (as this code is open source). Also we can imagine doing crossover between species or doing "evolution" of these species over time. Everything is possible!

---

See also [CryptoAliens: Genesis, a technical look][tech].

My name is Gaëtan Renaudeau, and I'm a noise explorer. **feel free to ping me on Twitter [@greweb](https://twitter.com/greweb)**

CryptoAliens are digital creatures generated from Ethereum blockchain blocks. They can be minted on ethblock.at by anyone, which establishes a limited set of CryptoAliens species. Each block produced on Ethereum have unique elements that can be visualized in creative ways.

CryptoAliens: Genesis [ethblock.art]

[cookbook]: https://gl-react-cookbook.surge.sh
[github]: https://github.com/gre/gl-react
[jest]: https://github.com/facebook/jest
[headless-gl]: https://github.com/stackgl/headless-gl
[bus]: https://gl-react-cookbook.surge.sh/api#bus

# Happy to release **[https://gl-react-cookbook.surge.sh][cookbook]** containing 43 unique examples and API documentation!

[![](/images/2016/12/gl-react-v3.gif)][cookbook]

> If you don't want to be "spoiled" by this article, go through [the cookbook examples][cookbook]. This article will explore some of them.



## gl-react has been rewritten from scratch

**gl-react v3 is a complete rewrite of the v2 implementation for better performance and compatibility with React paradigm.**

This is not yet published on NPM as it's [still in development][github] (the Web version is pretty ready, React Native version is not implemented).

Most features provided by gl-react v2 are preserved (API haven't changed, [see how similar is the HelloGL example](https://gl-react-cookbook.surge.sh/hellogl)), but v3 fixes most Github issues accumulated for a year.

### The biggest mistake of the previous implementation

If there is one lesson learned from previous gl-react implementation: **"unfolding" / consuming the `children` prop by yourself is (probably) wrong, let React solve this job!** Using React, you can benefit [React reconciliation and diff algorithm](https://facebook.github.io/react/docs/reconciliation.html).
In other words, always prefer to keep users' VDOM tree rather than consuming it with `React.Children.*` functions.

I feel dumb not having discovered this before, but if you are not actually rendering DOM it's an easy path for a library to just map, traverse, consume the children tree and just render what you needs (like just a `<canvas/>`). But this is probably a mistake! First, this makes it impossible to use React Devtools and see the original tree, but more importantly, it breaks interoperability with other libraries (e.g. don't forbid someone to use [react-motion](https://github.com/chenglou/react-motion) or [React Router](https://github.com/ReactTraining/react-router) in the middle of your components!).

A better idea is to preserve the user `children`. Keep your logic in each Component and use the React lifecycle to create and destroy things, and **use [React context](https://facebook.github.io/react/docs/context.html) to connect children to parent**.

> You should better keep user `children`, even if it means rendering it in an empty ``, _current workaround of `gl-react`, looking forward to hearing from you, idea inspired from the great [react-music](https://github.com/FormidableLabs/react-music)_

### What it means for gl-react

The gl-react v3 implementation truly uses React lifecycle: **a React Component update triggers a GL redraw**. That way, `shouldComponentUpdate` allows to do partial GL re-rendering. Each Node holds a [framebuffer object](https://www.opengl.org/wiki/Framebuffer_Object) (created on mount, destroyed on unmount) that only get redrawn when component updates and schedules a Surface reflow.

`<Node>` receives the `gl: WebGLRenderingContext` from the ancestor `<Surface>` thanks to [React context](https://facebook.github.io/react/docs/context.html). There is also a `glParent` context (a Surface or another Node) that is used to make GL components discoverable each other so we can build a dependency graph. This dependency graph allows to implement the correct `draw` pipeline (and it's pretty trivial, see [_Section "under the hood of Surface and Node redraw"_](#under_the_hook_redraw)).

## `<Bus>`, a better way to share computation

[gl-react used to automatically factorize the duplicates elements of the GL tree](http://greweb.me/2016/06/glreactconf/) but **it has been decided to remove this feature**: _This was actually a complex mechanism (a bit too "magic"), hard to implement and a premature optimization that can have slower performance._

The new gl-react embraces the React paradigm: The new way to express a Graph (and share computation) is **using a [`<Bus>`][bus]**...

### The `` `()=>ref` `` pattern

The problem we want to solve is to **express a graph with React**, which, at first glance, only allow to represent trees, not graphs!

The way we can solve this is by using refs and a "ref getter function":

1. **a Bus with a ref:** `<Bus ref="myBus">{content to inject}</Bus>`.
2. **pass a function that resolves the ref** to pipe Bus into another Node. e.g: `()=>this.refs.myBus`.

[blurmapdyn example ![](/images/2016/12/blurmapdyn.gif)](https://gl-react-cookbook.surge.sh/blurmapdyn)
a single ConicalGradient should be used for all blur pass:
![](/images/2016/12/blurmapdynschema.png)

There are a few other good examples of ref usages:

- [blurmapmouse](https://gl-react-cookbook.surge.sh/blurmapmouse)
- [blurimgtitle](https://gl-react-cookbook.surge.sh/blurimgtitle) (same example that was features in 2016 React conf!)
- [behindasteroids](https://gl-react-cookbook.surge.sh/behindasteroids), crazy port of a game I made for js13k.

> The `()=>ref` pattern works only if you call the function after component did update (refs are set at this time).

## The good ol' children function

There is another pattern for more specific needs: instead of composing by giving an element, you can also compose by giving a **Function that returns an element**. Why that? Because, it's a way to nicely give you the redraw function: `redraw => <Video onFrame={redraw} />`:

[Checkout video example ![](/images/2016/12/videoredraw.png)](https://gl-react-cookbook.surge.sh/video?menu=true)

> We really just want to redraw if there is a new video frame.

We have merged the 2 patterns into one: if you provide a function, it's just called with `redraw`, and the returned value is used as a texture. We have a few cases to detect what kind of texture it is (and also an [extensible mechanism](https://gl-react-cookbook.surge.sh/api#textureloaders) used by implementations to load platform specific objects).
[(checkout this if you want to see the code)](https://github.com/gre/gl-react/blob/a33e6aa685479d588646b20dd62e1e25a64a5a47/packages/gl-react/src/Node.js#L704-L783)

## Node backbuffering & Backbuffer symbol

A new feature allows to inject the previous Node state as a texture. This is called backbuffering. One simple usecase is to implement Motion Blur persistence (like the GIF on top of this article).

We can also accumulate a state, for instance, to implement Game of Life!

[Game of life glider example ![](/images/2016/12/gol.gif)](https://gl-react-cookbook.surge.sh/golglider)

And the whole idea of gl-react (and React) is about composition. For instance, doing a rotating effect of that Game of Life is basically just `<Rotate> <GameOfLife /> </Rotate>`.

An interesting part is that you can update the GameOfLife at a rate that is independent from the **Rotate** rendering: just by making GameOfLife a pure component that receives a tick, or implementing shouldComponentUpdate update (you have as many choices as React have to [shortcut the rendering](https://facebook.github.io/react/docs/react-api.html#react.purecomponent)).

[golrotscu example![](/images/2016/12/golrot.gif)](https://gl-react-cookbook.surge.sh/golrotscu)

> See the counters that indicate the number of redraw. (the capture preview in the Box only get snapshot each 100ms, but in the real canvas, it runs at 60 FPS)

Finally, please checkout [ibex example](https://gl-react-cookbook.surge.sh/ibex) (extracted from another JS13K game! xD).

> You can't leave this article before seeing [ibex example](https://gl-react-cookbook.surge.sh/ibex)! I'm serious, this is probably the most accomplished code I ever wrote! xD

## <a name="under_the_hook_redraw"></a> under the hood of Surface and Node redraw

In order to make redraw efficient, `gl-react` have 2 phases: the `redraw()` phase and the `flush()` phase (reflecting the respective methods available both on `Surface` and `Node`). This is a bit like a rendering engine:

- **`redraw()` phase** sets a dirty flag to a Node and all its "dependents" (other nodes, buses, surface). _redraws happen generally bottom-up to the Surface._
- **`flush()` phase** draws all nodes that have the redraw flag. _draws happens top-down from the Surface._

`redraw()` is directly hooked to React update lifecycle (re-rendering a Node will calls `redraw()` for you).
To make this system efficient, **the flush() is by default asynchronous**, i.e. `redraw()` means scheduling a new gl draw.
Surface have a main loop that runs at 60 fps and call `flush()`. This is very efficient because if Surface does not have the redraw flag, `flush()` does nothing.

> In gl-react inspector, clicking on the redraw count will call `redraw()` on the node / bus. We can illustrate that only "dependents" get redrawn using the advanced [blurimgtitle example](https://gl-react-cookbook.surge.sh/blurimgtitle):

[only "dependents" get redrawn ![](/images/2016/12/blurimgtitle-redraw.gif)](https://gl-react-cookbook.surge.sh/blurimgtitle)

This redraw/flush phases allow to prevent and skip rendering multiple times a Node. In some cases, we still want to redraw synchronously: with `<Node/>` `sync` prop. For instance, in Game of Life, we don't want to skip an update (the initial update set the initial GoL state, if it was async it might get skipped).

## Bonus

### Flow types

Flow types has been used for more robust code and better user experience. BTW, [WebGLRenderingContext will soon be released in flow](https://github.com/facebook/flow/pull/2764).

### Atom highlighting

If you are using Atom Editor, you can have JS inlined GLSL syntax highlighted.

![](https://cloud.githubusercontent.com/assets/211411/20623048/0527cce2-b306-11e6-85ee-5020be994c10.png)

_To configure this:_

- add `language-babel` package.
- Configure `language-babel` to add `GLSL:source.glsl` in settings "_JavaScript Tagged Template Literal Grammar Extensions_".
- (Bonus) Add this CSS to your _Atom > Stylesheet_:

```css
/* language-babel blocks */
atom-text-editor::shadow .line .ttl-grammar {
 /* NB: designed for dark theme. can be customized */
 background-color: rgba(0, 0, 0, 0.3);
}
atom-text-editor::shadow .line .ttl-grammar:first-child:last-child {
 display: block; /* force background to take full width only if ttl-grammar is alone in the line. */
}
```

### Tests: almost 100% coverage!

The library is tested directly on the command line, thanks to [Jest][jest] and [headless-gl][headless-gl] _(Big up to [mikolalysenko](https://github.com/mikolalysenko) for [headless-gl][headless-gl]!)_.
**gl-react have 2000 line of tests, involving a lot of gl calls, and readPixels, and it runs... in a few seconds!** _(to Jest devs: you are wizards!)_

```

 PASS ./all.test.js
 ✓ renders a red shader (75ms)
 ✓ renders HelloGL (15ms)
 ✓ ndarray texture (27ms)
 ✓ renders a color uniform (18ms)
 ✓ composes color uniform with LinearCopy (21ms)
 ✓ no needs to flush if use of sync (24ms)
 ✓ Node can have a different size and be scaled up (18ms)
 ✓ Surface can be resized (32ms)
 ✓ bus uniform code style (17ms)
 ✓ bus example 1 (17ms)
 ✓ bus example 2 (18ms)
 ✓ bus example 3 (17ms)
 ✓ bus example 4 (22ms)
 ✓ bus example 5 (14ms)
 ✓ bus example 6 (24ms)
 ✓ bus: same texture used in multiple sampler2D is fine (14ms)
 ✓ a surface can be captured and resized (16ms)
 ✓ a node can be captured and resized (17ms)
 ✓ Uniform children redraw=>el function (22ms)
 ✓ Bus redraw=>el function (16ms)
 ✓ many Surface updates don't result of many redraws (18ms)
 ✓ many Surface flush() don't result of extra redraws (10ms)
 ✓ GL Components that implement shouldComponentUpdate shortcut Surface redraws (27ms)
 ✓ nested GL Component update will re-draw the Surface (24ms)
 ✓ Node `clear` and discard; (24ms)
 ✓ Node `backbuffering` (32ms)
 ✓ Node `backbuffering` in `sync` (36ms)
 ✓ texture can be null (12ms)
 ✓ array of textures (22ms)
 ✓ Node uniformsOptions texture interpolation (17ms)
 ✓ can be extended with addTextureLoaderClass (70ms)
 ✓ Surface `preload` prevent to draw anything (59ms)
 ✓ Surface `preload` that fails will trigger onLoadError (59ms)
 ✓ renders a shader inline in the Node (15ms)
 ✓ testing connectSize() feature (17ms)
 ✓ handle context lost nicely (43ms)
 ✓ Bus#uniform and Bus#index (25ms)
 ✓ VisitorLogger + bunch of funky extreme tests (140ms)

-------------------------------|----------|----------|----------|----------|----------------|
File | % Stmts | % Branch | % Funcs | % Lines |Uncovered Lines |
-------------------------------|----------|----------|----------|----------|----------------|
All files | 97.85 | 88.8 | 95.96 | 99.35 | |
 src | 97.82 | 88.95 | 95.9 | 99.35 | |
 Backbuffer.js | 100 | 100 | 100 | 100 | |
 Bus.js | 96.15 | 74.29 | 100 | 100 | |
 GLSL.js | 100 | 50 | 100 | 100 | |
 LinearCopy.js | 100 | 100 | 100 | 100 | |
 NearestCopy.js | 100 | 100 | 100 | 100 | |
 Node.js | 97.65 | 92.71 | 97.01 | 99.01 | 214,216,358 |
 Shaders.js | 100 | 76.92 | 100 | 100 | |
 Texture2DLoader.js | 100 | 100 | 100 | 100 | |
 TextureLoader.js | 100 | 100 | 100 | 100 | |
 TextureLoaderNDArray.js | 100 | 100 | 100 | 100 | |
 TextureLoaders.js | 100 | 100 | 100 | 100 | |
 Visitor.js | 100 | 100 | 75 | 100 | |
 VisitorLogger.js | 100 | 92.59 | 100 | 100 | |
 Visitors.js | 100 | 100 | 100 | 100 | |
 connectSize.js | 100 | 85.71 | 100 | 100 | |
 copyShader.js | 100 | 100 | 100 | 100 | |
 createSurface.js | 97.09 | 83.61 | 94.55 | 99.32 | 361 |
 genId.js | 100 | 100 | 100 | 100 | |
 index.js | 100 | 100 | 100 | 100 | |
 src/helpers | 100 | 75 | 100 | 100 | |
 disposable.js | 100 | 50 | 100 | 100 | |
 invariantNoDependentsLoop.js | 100 | 100 | 100 | 100 | |
-------------------------------|----------|----------|----------|----------|----------------|
Test Suites: 1 passed, 1 total
Tests: 38 passed, 38 total
Snapshots: 4 passed, 4 total
Time: 2.655s
Ran all test suites.
```

One limitation is that all tests need to be in a single file. [I created an issue here](https://github.com/facebook/jest/issues/2029). I think it's either an issue in [Jest][jest] or in [headless-gl][headless-gl].

## Tradeoffs and remaining work

The library tradeoffs are written in [TRADEOFFS.md](https://github.com/gre/gl-react/blob/master/TRADEOFFS.md). We might cover some unexplored direction in a near future and solve some of them.

v3 is still in development, the main unfinished part is the React Native implementation which is now the main priority of the library.
It will probably rely on an awesome initiative: a React Native WebGL implementation started in Exponent by [@nikki](https://github.com/nikki93)!

For more information, see [v3 alpha: development in progress](https://github.com/gre/gl-react#v3-alpha-development-in-progress).

gl-react has been reimplemented from scratch, feedback from previous mistake and overview of new features.

gl-react v3

[Relay]: https://github.com/facebook/relay
[Relay-spec]: https://facebook.github.io/relay/docs/graphql-relay-specification.html#content


[Relay][Relay] doesn't solve for you how you should render your components. Relay is "universal" and doesn't even assume it will be running in a browser context. It focuses only on providing an abstraction to work with GraphQL – the same way React focuses only on rendering. Each library solves one single problem at a time *(and hell, both are complex enough problem to solve already)*.

Because these libraries are very generic, it's now up to the community to solve the "more specific" parts. Just search on NPM and you can find tons of React libraries already, some might help you to solve part of the problem you want to solve.

This article demonstrates one use-case: **implementing a component handling the scroll of a list to pull more data** of a GraphQL connection with Relay.



## Usage

In React you should think in term of components that subdivide individual task to solve. To solve scrolling a connection you should just need this:

```js
<InfiniteScrollable relay={relay}>
 ...
</InfiniteScrollable>
```

Here is a real use-case we have at [projectseptember](https://projectseptember.com).


```js
import React, {
 Component,
 PropTypes,
} from "react";
import Relay from "react-relay";
import List from "material-ui/List";
import Content from "./Content";

class ContentStream extends Component {
 static propTypes = {
 relay: PropTypes.object.isRequired,
 user: PropTypes.object,
 };
 render () {
 const { user, relay } = this.props;
 return (
 <InfiniteScrollable relay={relay}>
 <List>
 {user.stream.edges.map(e =>
 <Content content={e.node} key={e.cursor} />
 )}
 </List>
 </InfiniteScrollable>
 );
 }
}

export default Relay.createContainer(ContentStream, {
 initialVariables: {
 first: 50,
 },
 fragments: {
 user: () => Relay.QL`
fragment on User {
 stream (first:$first) {
 edges {
 cursor
 node {
 ${Content.getFragment("content")}
 }
 }
 }
}
 `
 }
});
```

We don't have to express how to "pull for more data" in that code. In fact, this is delegated to `InfiniteScrollable` and we never have to think again about it.


## InfiniteScrollable implementation

Relay enforces to implement [a subset of GraphQL spec](https://facebook.github.io/relay/docs/graphql-relay-specification.html#content), like the Connection API. It's a good thing because we can also rely on this fact, and what we only need is the `relay` object to implement a generic pull-on-scroll.


```js
import {
 Component,
 PropTypes,
} from "react";
import {findDOMNode} from "react-dom";

const regex = /(auto|scroll)/;

const style = (node, prop) =>
 getComputedStyle(node, null).getPropertyValue(prop);

const scroll = (node) =>
 regex.test(
 style(node, "overflow") +
 style(node, "overflow-y") +
 style(node, "overflow-x"));

const scrollparent = (node) =>
 !node || node===document.body
 ? document.body
 : scroll(node)
 ? node
 : scrollparent(node.parentNode);

const resizeEventOn = n => n===document.body ? window : n;

export default class InfiniteScrollable extends Component {
 static propTypes = {
 children: PropTypes.any.isRequired,
 relay: PropTypes.object,
 style: PropTypes.object,
 loadPixelsInAdvance: PropTypes.number,
 relayVariable: PropTypes.string,
 chunkSize: PropTypes.number,
 // loadMore could even be generalize, this component works if you provide loadMore instead of relay
 loadMore: PropTypes.func, // (can) returns a promise
 };
 static defaultProps = {
 loadPixelsInAdvance: 1000,
 relayVariable: "first",
 chunkSize: 50,
 };

 state = { loading: false };

 resizeBoundOnDom = null;

 componentDidMount () {
 this.syncScrollBodyListener(this.props);
 this.checkScroll();
 }

 componentWillUnmount () {
 this.unbindResizeEvent();
 }

 componentDidUpdate () {
 this.syncScrollBodyListener();
 }

 unbindResizeEvent () {
 if (this.resizeBoundOnDom) {
 this.resizeBoundOnDom.removeEventListener("scroll", this.checkScroll);
 this.resizeBoundOnDom = null;
 }
 }

 getScrollParent () {
 return scrollparent(findDOMNode(this));
 }

 syncScrollBodyListener = () => {
 const resizeBoundOnDom = resizeEventOn(this.getScrollParent());
 if (resizeBoundOnDom !== this.resizeBoundOnDom) {
 this.unbindResizeEvent();
 resizeBoundOnDom.addEventListener("scroll", this.checkScroll);
 }
 };

 loadMoreUsingRelay = () => {
 const { relay, relayVariable, chunkSize } = this.props;
 return new Promise((resolve, reject) =>
 relay.setVariables({
 [relayVariable]: relay.variables[relayVariable] + chunkSize
 }, readyState => {
 if (readyState.error) reject(readyState.error);
 if (readyState.done) resolve();
 }));
 };

 checkScroll = () => {
 if (this.state.loading) return;
 const container = this.getScrollParent();
 if (!container) return;
 const { height } = container.getBoundingClientRect();
 const { scrollHeight, scrollTop } = container;
 const bottom = scrollTop + height;
 const { loadPixelsInAdvance } = this.props;
 const advance = bottom - scrollHeight + loadPixelsInAdvance;
 if (advance > 0) {
 this.setState({ loading: true }, () =>
 Promise.resolve({ advance, bottom, scrollHeight, height, scrollTop, loadPixelsInAdvance })
 .then(this.props.loadMore || this.loadMoreUsingRelay)
 .then(
 () => this.setState({ loading: false }), // technically could recall checkScroll here. in second callback of setState. fork it, try it, adapt it !
 e => (console.warn(e), this.setState({ loading: false }))
 ));
 }
 };

 render () {
 // you might want to render a spinner?
 // children might be a function?
 // etc..
 // these are some variations we could have from this starting point
 return this.props.children;
 }
}
```


This is a **possible implementation** of this problem. You might want to add more things based on your needs. For instance you could automatically render a loading spinner... or a million other things! Please try it, fork it, give feedback :)

It is also possible to implement it as a High Order Component (HOC): [https://github.com/facebook/relay/issues/1377](https://github.com/facebook/relay/issues/1377).

implement a component handling the scroll of a list to pull more data of a Graphql Connection with Relay

Relay, scrolling connections

[twitter]: https://twitter.com/ProjSeptEng
[website]: https://projectseptember.com
[RN]: http://facebook.github.io/react-native/
[graphql]: http://graphql.org/
[scala]: http://scala-lang.org/
[glreactconf]: /2016/06/glreactconf
[glreact]: https://github.com/ProjectSeptemberInc/gl-react
[glreactdom]: https://github.com/ProjectSeptemberInc/gl-react-dom
[glreactnative]: https://github.com/ProjectSeptemberInc/gl-react-native
[RNAnimation]: https://facebook.github.io/react-native/docs/animations.html

 🎉 Hooray! [We][twitter] recently released an iOS app called [Project September][website].

This application is built with nice tech stack including [React Native][RN] and [GraphQL][graphql]. The backend is powered by [Scala][scala], a robust functional language, and we use many other [cool techs][twitter].

This fashion app needed some fancy features: one was demo-ed at last [React.js conference][glreactconf] with the ability to do localized blur on text over images.

We have developed **[`gl-react`][glreact]** to abstract GL in React paradigm – with two companion libraries [`gl-react-dom`][glreactdom] and [`gl-react-native`][glreactnative] that glues React Native with OpenGL.

Let's first see 2 demos of OpenGL usage in our app, and then we'll write a bit about how it's hard to get animations right.



## The Text Over Image blur

### The goal

<img width="50%" src="/images/2016/07/current-1.png" /><img width="50%" src="/images/2016/07/current-2.png" />

### How it works

<img src="/images/2016/07/initial.png" />

**+** ***(layer)***

<img src="/images/2016/07/layer.png" />

**=**

<img src="/images/2016/07/result.png" />


### Under the hood

- The shadow intensity, size, position, is procedurally generated, we can adjust that. The shadow color is the blurry image color
- The text color is determined by the color picked in blurred image at the shadow middle position. **If the `monochrome` value of that color is lower than 60%**, text will be white, otherwise text will be black.

Here is more detail on how the shadow is generated:


<img src="/images/2016/07/under-1.png" />


**\* (multiply alpha)**

<img src="/images/2016/07/under-2.png" />

**=**

<img src="/images/2016/07/under-3.png" />

**+ (layer)**

<img src="/images/2016/07/under-4.png" />

**=**

<img src="/images/2016/07/layer.png" />

### Fragment shader

```glsl
precision highp float;
varying vec2 uv;

uniform sampler2D img;
uniform sampler2D imgBlurred;
uniform sampler2D txt;

const vec2 shadowCenter = vec2(0.5, 0.9);
const vec2 shadowSize = vec2(0.6, 0.2);
float shadow () {
 return 0.8 * smoothstep(1.0, 0.2, distance(uv / shadowSize, shadowCenter / shadowSize));
}
float monochrome (vec3 c) {
 return 0.2125 * c.r + 0.7154 * c.g + 0.0721 * c.b;
}
vec3 textColor (vec3 bg) {
 return vec3(step(monochrome(bg), 0.6));
}

void main () {
 vec4 bg = mix(texture2D(img, uv), texture2D(imgBlurred, uv), shadow());
 vec4 fg = vec4(textColor(texture2D(imgBlurred, shadowCenter).rgb), 1.0);
 float fgFactor = 1.0 - texture2D(txt, uv).r;
 gl_FragColor = mix(bg, fg, fgFactor);
}
```

### Integration

```html
<GL.Node shader={shaders.textOverImage}>
 <GL.Uniform name="img">
 {img}
 </GL.Uniform>
 <GL.Uniform name="imgBlurred">
 <Blur factor={20} passes={6} width={width} height={height}>
 {img}
 </Blur>
 </GL.Uniform>
 <GL.Uniform name="txt">
 <Text style={titleStyle}>{title}</Text>
 </GL.Uniform>
</GL.Node>
```

## Uploading Thumbnail

This is a video record of our app:

![](/images/2016/07/upload.gif)

The uploading spinner effect is implemented with an OpenGL shader. This was not easy to avoid all the blinks we used to have. We have different components to render each step (uploading animation / uploaded final image) and the uploaded image needs to be downloaded again to not render as white. One solution could be to use a monolithic "thumbnail" component that do everything. We wanted to keep independent components.
Hopefully, everything now works seamlessly with some "double buffering"/swapping mechanism we will explained at the end of this article.

## Animate all the things

### Designing animations

> Fluid, meaningful animations are essential to the mobile user experience.
**[— React Native Animations documentation][RNAnimation]**

It's not easy to design how an application should animate, to define transitions between all the different possible single state and edge-cases of your app. Designing animations, as part of UX design, is a time consuming work but it tends to be underestimated while being essential for moving from a *good app* to a *very good app*. That tends to be the last 20% remaining missing parts of your app that are the hardest but that makes the 80% of a great UX.

### Implementing animations

Not only it's hard to have figured out the animations (to find the optimal UX) but it can also be quite challenging to implement them in a maintainable and robust way. Turns out most of the times, your code is not ready for it and it implies big refactoring.

#### in React Native

React Native [Animations API][RNAnimation] makes it easier: you just have to switch to one of the `Animated.*` component. In `gl-react` we even support Animated values to flow into the shaders uniforms so it's very convenient to animate a GL effect.

That said, React Native Animations is not the ultimate silver bullet. There are things Animations won't solve for you. React Native Animated is still a low level API, it's also imperative and not opinionated on how you should turn it into descriptive paradigm.

I guess what's generally hard with animations in React functional/descriptive paradigm ("always `render()`ing Virtual DOM again" idea) is to figure out **how to not "break" your animations**. For instance, ugly animation interruption could happen if you `render()` a different component: because it forces the component to unmount. If you have an animation happening, you might not want it to stop, or at least you might want to smoothly customize the transition to the new state.

That's something CSS transitions might help solving, but in React Native we don't have them, so it's not so trivial.

##### our current solution

We have built our own abstraction to solve this problem: a Component decorator manages to kill a lot of flashes and blinks cases (e.g. images not ready yet, animation getting interrupted).

> What the decoration solves: when moving from A to B, you want B to be ready (e.g. images are loaded), you also want A to have finish its (animated) work.

**A component can express it needs some time to mount *(e.g. an image to load!)* OR that it needs some time to unmount *(e.g. an "animating out")*. This will basically hold the rendering to happen:**

The decoration can implement "double buffering" on a Component: `render()` function keeps rendering Component with the previous "stable props" but will also render in background another instance of Component with the next props. When that next props Component is ready and loaded, we can successful swap it to be the new "stable props".

You have the basic idea, the decorator is not so trivial to implement as it also needs to handle some edge-cases, for instance if the decorator receives new props during the transition. We also have a minimal way to express "styles transitions" similarly to how CSS Transitions works.

🎉 There are some OpenGL in the Project September fashion app!

Universal GL Effects for Web and Native

<img src="/images/2015/10/gl-react.png" alt="" class="thumbnail-left" /> Last Thursday, my talk at [React Paris Meetup](http://www.meetup.com/ReactJS-Paris/events/226103821/) was about using **the functional rendering** paradigm of **WebGL** in **React**. The library [`gl-react`](https://github.com/ProjectSeptemberInc/gl-react) wraps WebGL in React paradigm with a focus for developing 2D effects, that we need in my current startup, [Project September](https://twitter.com/ProjSeptEng), where I have the chance to develop it.

## [Slides](http://greweb.me/reactmeetup7)

<iframe src="http://greweb.me/reactmeetup7" width="600" height="400" frameborder="0"></iframe>



## Abstract

We can write effects without having to learn the complex and imperative low-level WebGL API but instead composing React components, as simple as functional composition, using VDOM descriptive paradigm.

[gl-react](https://github.com/ProjectSeptemberInc/gl-react) brings WebGL bindings for react to implement complex effects over content.

[gl-react-native](https://github.com/ProjectSeptemberInc/gl-react-native) is the React Native implementation,
therefore allows universal effects to be written both for web and native.

These libraries totally hides for you the complexity of using the OpenGL/WebGL API but takes the best part of it: GLSL, which is a "functional rendering" language that runs on GPU.

This presentation is an introduction to WebGL in React and functional programming concept and showcases made with gl-react and gl-react-native

Introducing gl-react

*^ Sorry guys, you may have notice the blog post date is wrong. I won't change the URL, but thanks to how time works, this will be fixed in one month anyway :-D*

[ReactEurope](https://twitter.com/chantastic/status/616608931037646850) conference
was to me incredibly [inspiring](https://twitter.com/chantastic/status/616670658911715328) and [promising](https://twitter.com/chantastic/status/616995607043903488).
Yersterday got tons of news and tweets from JavaScript community.

One tweet and blog post by the great [@aerotwist](https://twitter.com/aerotwist) got my attention.

<blockquote class="twitter-tweet" data-cards="hidden" lang="fr">I often hear claims that “the DOM is slow!” and “React is fast!”, so I decided to put that to the test:&#10;&#10;<a href="https://t.co/M1RZZiyVT2">https://t.co/M1RZZiyVT2</a>&#10;&#10;🐢vs🐇&mdash; Paul Lewis (@aerotwist) <a href="https://twitter.com/aerotwist/status/616934953679458304">3 Juillet 2015</a></blockquote>

I would like to express here my opinion and feedback on using React.

I've been using React for almost 2 years now, and always in performance intensive use-cases, from Games to WebGL.

<a href="http://diaporama.glsl.io/" target="_blank">
<img src="/images/2015/07/diaporama_3.jpg" alt="" class="thumbnail-left" />
</a>

I've created [glsl.io](http://glsl.io/) and I'm working on [Diaporama Maker](https://github.com/gre/diaporama-maker).
Both applications are built with React and combined use of HTML, SVG, WebGL.

Diaporama Maker is probably the most ambitious piece of software I've ever personally done.

 

> In short, [Diaporama Maker](https://github.com/gre/diaporama-maker) it is a WYSIWYG editor for web slideshow (mainly photo slideshows). It is a bit like iMovie with the web as first target. [The project is entirely open-sourced.](https://github.com/gre/diaporama-maker)

Currently, I am able to render the whole application at 60 FPS and this is still unexpected and surprising to me
(press Space to run the diaporama on [diaporama.glsl.io demo](http://diaporama.glsl.io/)).
Well, more exactly, this would not have been possible without some optimizations
that I'm going to detail a bit at the end of this article.



## The point is productivity

I don't think Virtual DOM claims to be faster than doing Vanilla DOM, and that's not really the point. **The point is productivity.**
You can write very well optimized code in Vanilla DOM but this might require **a lot of expertise**
and a lot of time even for an experienced team *(time that should be spent focusing on making your product)*.

When it comes to adding new features and refactoring old ones, this goes worse.
Without a well constrained framework or paradigm, things does not scale far, are time consuming and introduce bugs,...
Especially in a team where multiple developers have to work with each other.

> **See Also:** [Why does React scale?](https://www.youtube.com/watch?v=D-ioDiacTm8) by [@vjeux](https://twitter.com/Vjeux).

## What matters to me

There is a lot of advantages of using Virtual DOM approach before talking about React performances.

Of course, this always depends on what you are building, but I would claim that
**there is a long way to go using React before experiencing performance issues**,
and in the worse cases: **you can almost always find easy solutions to optimize these performance issues**.

### DX

React has an incredible Developer eXperience (that people seem to call DX nowadays!) that can [help you improving UX](https://twitter.com/greweb/status/617258379183005696) and the ability to [measure Performances](https://facebook.github.io/react/docs/perf.html) and [optimize them](https://facebook.github.io/react/docs/component-specs.html#updating-shouldcomponentupdate) when you reach bottlenecks.

You can easily figure out which component is a bottleneck in the Component tree as shown in following screenshot.

> ![](/images/2015/07/diaporama-perfs.png)
With printWasted() you can see how much time React has wasted to `render()` something that didn't change and how much instances has been created. (there is also printInclusive and printExclusive)

This is a bit equivalent of the Web Console Profiler except it emphasis on your application components which is a very relevant approach.

### React data flow

> I can't imagine re-writing Diaporama Maker in Vanilla DOM.

In Diaporama Maker, I have a lot of cross dependencies between components,
for instance the current `time` is shared and used everywhere in the application.
As a matter of fact, dependencies grow when adding more and more features.

> ![](/images/2015/07/diaporama_configure_kenburns.gif)
usages of time in 3 independent components.

**The descriptive Virtual DOM approach very simply solves this problem**.
You just have to pass props in to share data between components:
there is one source of trust that climb down your component tree via "props".

![](/images/2015/07/diaporama-maker-time-props.jpg)

With Virtual DOM approach, the cost to add one new dependency to a shared data is small and **does not become more complex as the application grows**.

> ![](/images/2015/07/diaporama_slide_content.gif)
another more complex showcase of shared states.

Using an Event System like you would do in standard Backbone approach tends to lead to imperative style and spaghetti codes (and when using global events, components are not really reusable).

Moreover, I think that `Views<->Models` Event System approach, if not carefully used, tends to converge to an unmaintainable and laggy applications.

### React is a Component library

React truly offers **component as first-class citizen**.
This means it allows component reusability. I've tried alternative like virtual-dom and I don't think it emphasizes enough on this benefit.

There are [important good practices](https://twitter.com/chantastic/status/616997918155759616) when using React like minimizing states and props and I'm not going to expand more on this subject. Most of these best practices are not exclusive to React but come from common sense and software architecture in general.
One of the important point for performance is to **choose a good granularity of your component tree**.
It is generally a good idea to split up a component into pieces as small as possible
because it allows to separate concerns, minimize props and consequently optimize rendering diff.

#### Diaporama Maker architecture

You would be surprised to know that Diaporama Maker does not even use **Flux** (that might be reconsidered soon for collaborative features). I've just taken the old "callback as props" approach all the way down the component tree. That easily makes all components purely modular and re-usable (no dependencies on some Stores).
I've also taken the [inline style approach]() without actually using any framework (this is just about props-passing `style` objects).

As a consequence, I've been able to externalize a lot of tiny components that are part of my application
so I can share them across apps and also in order to people to re-use them.

What is important about externalizing components is also the ability to test and optimize them independently (the whole idea of modularity).

Here are all the standalone UI components used by Diaporama Maker:

- [bezier-easing-editor](https://github.com/gre/bezier-easing-editor)
- [bezier-easing-picker](https://github.com/gre/bezier-easing-picker)
- [diaporama-react](https://github.com/glslio/diaporama-react)
- [glsl-transition-vignette](https://github.com/glslio/glsl-transition-vignette)
- [glsl-transition-vignette-grid](https://github.com/glslio/glsl-transition-vignette-grid)
- [glsl-uniforms-editor](https://github.com/gre/glsl-uniforms-editor)
- [kenburns-editor](https://github.com/gre/kenburns-editor)

(each one have standalone demos)


## Optimizing performances

<blockquote class="twitter-tweet" lang="fr">I&#39;ve been working on crazy projects using React (like <a href="http://t.co/U2oETh5lhZ">http://t.co/U2oETh5lhZ</a> ). most performance issues i&#39;ve met was not because of React&mdash; Gaëtan Renaudeau (@greweb) <a href="https://twitter.com/greweb/status/617210444839809024">4 Juillet 2015</a></blockquote>
<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>

Here are 2 examples of optimizations I had to do in Diaporama Maker that are not because of React:

- It is easy to write not very optimized WebGL, so I work a lot to optimize the pipeline of [Diaporama engine](https://github.com/gre/diaporama)
- CSS transforms defined on Library images was for a time very intensive for the browser to render so I am now using server-resized "thumbnails" instead of the full-size images. Asking the browser to recompute the `transform: scale(...)` of 50 high resolution images can be super costy. (without this optimization, the resize of the application was running at like 2-3 FPS because the library thumbnails need to recompute their scale and crop).

But what if you still have performance issue due by React? Yes this can happens.

### Timeline Grid example

In Diaporama Maker, I have a Component that generates a lot of elements (like 1300 elements for a 2 minutes slideshow) and my first naive implementation was very slow. This component is [TimelineGrid](https://github.com/gre/diaporama-maker/blob/b0c6447b127785bea3c2487b0c77037418298b8c/client/ui/TimelineGrid/index.js) which renders the timescale in the timeline. It is implemented with SVG and a lot of `<text>` and `<line>`.

The performance issue was noticeable when drag and dropping items across the application. React was forced to render() and compare the whole timescale grid every time. But the timescale does not change! it just have 3 props:

```xml
<TimelineGrid timeScale={timeScale} width={gridWidth} height={gridHeight} />
```

**So it was very easy to optimize it just by using the `PureRenderMixin` to say to react that all my props are immutable.**
(I could have implemented `shouldComponentUpdate` too).

After this step, and for this precise example, I don't think a Vanilla DOM implementation can reach better performance:

- when one of the grid parameter change, **EVERYTHING** need to be recomputed because all scales are changing.
- React is doing even smarter thing that I would not manually do? Like reusing elements instead of destroying/creating them.

There might still be ways to go more far in optimizing this example. For instance I could chunk my grid into pieces
and only render the pieces that are visible, like in an infinite scroll system *(I could use something like [sliding-window](https://github.com/gre/sliding-window) for this)*.
That would probably be premature optimization for this example.

## Wrap Up

To my mind, generic benchmarks always tends to be biased and does not represent use-cases reality unless you are really covering your application itself.

The TimelineGrid component optimization explained in this article is a very specific and well chosen example,
but it is one counter-example for such a benchmark.

Each application has its own needs and constraints and we can't really generalize one way to go.
Also Performance should not be the main concern to choose a technology.


It is easy to make Virtual DOM library benchmarks,
comparing the performance of rendering and Array diffing,
but does that covers 80% of use-cases?
Is performance really the point?
What tradeoff do you accept to make between Performance and Productivity?

Tell me what you think.

In the meantime, I think we can all continue getting applications done
and [developing amazing DX](https://github.com/gaearon/react-hot-loader).

I would like to express here my opinion and feedback on using React and performance optimization you can do.

Making performant React applications

A talk I did at webglparis to present GLSL.io and GLSL Transitions initiative.