This plot is a physical counterpart that was shipped to a collector.

Mountain Moons #254

Mountain Moons #510

Ricochets #22

This plot is the physical counterpart that was gifted to a collector.
<video loop autoplay controls src="/images/plots/553video.mp4" width="100%"></video>

Field #198

This plot reveals a new generator called &quot;Thousands&quot;. This prototype was made to stress test the paper and guarantee extreme outputs can be plotted correctly.
<img src="/images/plots/552z1.jpg" width="100%"/>
<img src="/images/plots/552z2.jpg" width="100%"/>
<img src="/images/plots/552z3.jpg" width="100%"/>
<img src="/images/plots/552z4.jpg" width="100%"/>

As always, it&#39;s by making a lot of prototypes that we can verify plotting constraints. I take this opportunity to share a series of reveals that will show main features of &quot;Plottable Thousands&quot; – my next plottable generative art on <a href="https://fxhash.xyz/u/greweb">fx(hash) platform</a>.

Thousands (Prototype 2)

This plot reveals a new generator called &quot;Thousands&quot;. This prototype was made to stress test the paper and guarantee extreme outputs can be plotted correctly.
<img src="/images/plots/551z1.jpg" width="100%"/>
<img src="/images/plots/551z2.jpg" width="100%"/>

As always, it&#39;s by making a lot of prototypes that we can verify plotting constraints. I take this opportunity to share a series of reveals that will show main features of &quot;Plottable Thousands&quot; – my next plottable generative art on <a href="https://fxhash.xyz/u/greweb">fx(hash) platform</a>.

Thousands (Prototype 1)

This plot is the physical counterpart that was collected via <a href="/plots/nft">/plots/nft</a>.
A quick recap of the whole process:
<ul>
<li>Last week was released &#39;Plottable Circleception&#39; generator on <a href="https://www.fxhash.xyz/generative/slug/plottable-circleception-(8-frames)">fxhash.xyz</a></li>
<li>It generates digital NFT of an animation. Each outcome is the recipe of the plot that also can be physically produced.</li>
<li>Each owner of such recipe can request me a plot via <a href="https://greweb.me/plots/nft">https://greweb.me/plots/nft</a> which can then produces a physical output (with fountain pens, ink and paper)</li>
<li>The physical output is shipped to the collector</li>
<li>At the same time, I also produce back a digital stop-motion animation. This physical art digitalized back into a loop is itself unique in analog details.</li>
<li>It is immortalized back into an NFT and gifted to the collector as well. Such &quot;physical plot loop&quot; NFT can have its own life aside of the initial recipe. Interestingly, the recipe is digital-only VS the physical plot loop will have the physical medium speaking.</li>
</ul>

Circleception #20

<video loop autoplay controls src="/images/plots/549vid.mp4" width="100%"></video>
Lines are getting plotted with fountain pen on watercolor paper. The yellow is overlapping on top of the red color, I wanted to see if the ink would actually &quot;bleed&quot; and fade from the red to yellow but it didn&#39;t happen, however we have interesting effect at the &quot;end&quot; of the lines (plotting from left to right) because the ink accumulates more on ends. I wanted to see how the medium expresses in a very minimalistic plot. Lines are drawn each 0.3 millimeters and the fountain pen stroke width is approximatively of 0.35 millimeters.
<img src="/images/plots/549z.jpg" width="100%"/>

<img src="/images/plots/549z2.jpg" width="100%"/>

Rougejaune

This plot is the physical counterpart that was collected via <a href="/plots/nft">/plots/nft</a>.
<img src="/images/plots/548photo.jpg" width="100%"/>

Wireframe #135

This plot is the physical counterpart that was collected via <a href="/plots/nft">/plots/nft</a>.
<video loop autoplay controls src="/images/plots/547plot.mp4" width="100%"></video>
<img src="/images/plots/547photo.jpg" width="100%"/>

A quick recap of the whole process:
<ul>
<li>Last week was released &#39;Plottable Circleception&#39; generator on <a href="https://www.fxhash.xyz/generative/slug/plottable-circleception-(8-frames)">fxhash.xyz</a></li>
<li>It generates digital NFT of an animation. Each outcome is the recipe of the plot that also can be physically produced.</li>
<li>Each owner of such recipe can request me a plot via <a href="https://greweb.me/plots/nft">https://greweb.me/plots/nft</a> which can then produces a physical output (with fountain pens, ink and paper)</li>
<li>The physical output is shipped to the collector</li>
<li>At the same time, I also produce back a digital stop-motion animation. This physical art digitalized back into a loop is itself unique in analog details.</li>
<li>It is immortalized back into an NFT and gifted to the collector as well. Such &quot;physical plot loop&quot; NFT can have its own life aside of the initial recipe. Interestingly, the recipe is digital-only VS the physical plot loop will have the physical medium speaking.</li>
</ul>

Circleception #63

Circleception #66

🤯🤩 This plot is the physical counterpart that was collected by <a href="https://twitter.com/zancan">@zancan</a>. A custom ink was requested (green instead of red, I used Diamine Evergreen).
A quick recap of the whole process:
<ul>
<li>Last week was released &#39;Plottable Circleception&#39; generator on <a href="https://www.fxhash.xyz/generative/slug/plottable-circleception-(8-frames)">fxhash.xyz</a></li>
<li>It generates digital NFT of an animation. Each outcome is the recipe of the plot that also can be physically produced.</li>
<li>Each owner of such recipe can request me a plot via <a href="https://greweb.me/plots/nft">https://greweb.me/plots/nft</a> which can then produces a physical output (with fountain pens, ink and paper)</li>
<li>The physical output is shipped to the collector</li>
<li>At the same time, I also produce back a digital stop-motion animation. This physical art digitalized back into a loop is itself unique in analog details.</li>
<li>It is immortalized back into an NFT and gifted to the collector as well. Such &quot;physical plot loop&quot; NFT can have its own life aside of the initial recipe. Interestingly, the recipe is digital-only VS the physical plot loop will have the physical medium speaking.</li>
</ul>

Circleception #4

This plot shows the physical counterpart of the cover a new generator called &quot;Circleception&quot;. The physical is a grid of 4x2 frames that can be used to produce a 8 frames loop video.
<blockquote>
&#39;Circleception&#39; explores fractal-like zoom loops (the art infinitely reproduces inside itself), packing circles, filled with various techniques.
</blockquote>
For more information, see the README within the sourcecode at <a href="https://github.com/gre/gre/tree/master/doodles/plottable-loop-circleception">https://github.com/gre/gre/tree/master/doodles/plottable-loop-circleception</a>

Plottable Circleception (Cover)

This plot reveals a new generator called &quot;Circleception&quot; that I started developing on Twitch and later finalized into a fx(hash) generator. The physical is a grid of 4x2 frames that can be used to produce a 8 frames loop video.
<blockquote>
&#39;Circleception&#39; explores fractal-like zoom loops (the art infinitely reproduces inside itself), packing circles, filled with various techniques.
</blockquote>
For more information, see the README within the sourcecode at <a href="https://github.com/gre/gre/tree/master/doodles/plottable-loop-circleception">https://github.com/gre/gre/tree/master/doodles/plottable-loop-circleception</a>

Plot reveal for 'Circleception' plot loop

Plottable Circleception (Prototype)

Saturn Experiment 2

Saturn Experiment 1

Disformed Gre

<video
loop
autoPlay
muted
src="/images/plots/538timelapse.mp4"
width="100%"></video>
Pixel Art plotting fan art made for <a href="https://store.steampowered.com/app/1909420/Ti">Tinyfolks</a>, a game developed by <a href="https://www.twitch.tv/pyairvander">@pyairvander</a>, released today Jun 1th, 2022.
<img src="/images/plots/538w.gif" width="50%"/><img src="/images/plots/538b.gif" width="50%"/>
<a href="https://www.twitch.tv/pyairvander">@pyairvander</a> is streaming all is game development on Twitch and I was given a gif of one of the character of the game on which I played trying to plot it with fountain pen.
The code is pretty straightforward. There are 2 techniques at stake here: <a href="https://en.wikipedia.org/wiki/Marching_squares">Marching squares</a> which do the contouring around the pixels and then a simple spiral that lift the pen up when we don&#39;t want to put ink.
It was done on <a href="https://twitch.tv/greweb">https://twitch.tv/greweb</a>

Pixel Art plotting fan art made for Tinyfolks, a game developed by @pyairvander, released today Jun 1th, 2022.

TinyFolks fan art

This plot reveals a new generator called &quot;Field&quot;. This is the last plot of the reveal series and it was selected as the cover edition used to present the whole generator.
The physical is a grid of 4x2 frames that can be used to produce a 8 frames loop video.
As always, it&#39;s by making a lot of prototypes that we can verify plotting constraints. I take this opportunity to share a series of reveals that will show main features of &quot;Plottable Field (8 frames)&quot; – my next plottable generative art on <a href="https://fxhash.xyz/u/greweb">fx(hash) platform</a>.

Field (Reveal 22)

This plot reveals a new generator called &quot;Field&quot;. The primitive presented here is the &quot;Gold Spiral Circle&quot;.
The physical is a grid of 4x2 frames that can be used to produce a 8 frames loop video.
As always, it&#39;s by making a lot of prototypes that we can verify plotting constraints. I take this opportunity to share a series of reveals that will show main features of &quot;Plottable Field (8 frames)&quot; – my next plottable generative art on <a href="https://fxhash.xyz/u/greweb">fx(hash) platform</a>.

Field (Reveal 21)

This plot reveals a new generator called &quot;Field&quot;. The primitive presented here is the union of two circles packings. Interesting intersection.
The physical is a grid of 4x2 frames that can be used to produce a 8 frames loop video.
As always, it&#39;s by making a lot of prototypes that we can verify plotting constraints. I take this opportunity to share a series of reveals that will show main features of &quot;Plottable Field (8 frames)&quot; – my next plottable generative art on <a href="https://fxhash.xyz/u/greweb">fx(hash) platform</a>.

Field (Reveal 20)

This plot reveals a new generator called &quot;Field&quot;. The primitive presented here is the union of two circles packings.
The physical is a grid of 4x2 frames that can be used to produce a 8 frames loop video.
As always, it&#39;s by making a lot of prototypes that we can verify plotting constraints. I take this opportunity to share a series of reveals that will show main features of &quot;Plottable Field (8 frames)&quot; – my next plottable generative art on <a href="https://fxhash.xyz/u/greweb">fx(hash) platform</a>.

Field (Reveal 19)

This plot reveals a new generator called &quot;Field&quot;. The primitive presented here is the Y lines.
The physical is a grid of 4x2 frames that can be used to produce a 8 frames loop video.
As always, it&#39;s by making a lot of prototypes that we can verify plotting constraints. I take this opportunity to share a series of reveals that will show main features of &quot;Plottable Field (8 frames)&quot; – my next plottable generative art on <a href="https://fxhash.xyz/u/greweb">fx(hash) platform</a>.

Field (Reveal 18)

This plot reveals a new generator called &quot;Field&quot;. The primitive presented here is the X lines.
The physical is a grid of 4x2 frames that can be used to produce a 8 frames loop video.
As always, it&#39;s by making a lot of prototypes that we can verify plotting constraints. I take this opportunity to share a series of reveals that will show main features of &quot;Plottable Field (8 frames)&quot; – my next plottable generative art on <a href="https://fxhash.xyz/u/greweb">fx(hash) platform</a>.

Field (Reveal 17)

This plot reveals a new generator called &quot;Field&quot;. The primitive presented here is the grid.
The physical is a grid of 4x2 frames that can be used to produce a 8 frames loop video.
As always, it&#39;s by making a lot of prototypes that we can verify plotting constraints. I take this opportunity to share a series of reveals that will show main features of &quot;Plottable Field (8 frames)&quot; – my next plottable generative art on <a href="https://fxhash.xyz/u/greweb">fx(hash) platform</a>.

Field (Reveal 16)

This plot reveals a new generator called &quot;Field&quot;. The primitive presented here is the nested circles distribution. There is also a color alternance which makes everything blink.
The physical is a grid of 4x2 frames that can be used to produce a 8 frames loop video.
As always, it&#39;s by making a lot of prototypes that we can verify plotting constraints. I take this opportunity to share a series of reveals that will show main features of &quot;Plottable Field (8 frames)&quot; – my next plottable generative art on <a href="https://fxhash.xyz/u/greweb">fx(hash) platform</a>.

Field (Reveal 15)

This plot reveals a new generator called &quot;Field&quot;. The primitive presented here is the &quot;Partial Noise&quot; that creates different areas of noise in the piece. We can also see different groups of colored circles.
The physical is a grid of 4x2 frames that can be used to produce a 8 frames loop video.
As always, it&#39;s by making a lot of prototypes that we can verify plotting constraints. I take this opportunity to share a series of reveals that will show main features of &quot;Plottable Field (8 frames)&quot; – my next plottable generative art on <a href="https://fxhash.xyz/u/greweb">fx(hash) platform</a>.

Field (Reveal 14)

This plot reveals a new generator called &quot;Field&quot;. The primitive presented here is the nested triangles.
The physical is a grid of 4x2 frames that can be used to produce a 8 frames loop video.
As always, it&#39;s by making a lot of prototypes that we can verify plotting constraints. I take this opportunity to share a series of reveals that will show main features of &quot;Plottable Field (8 frames)&quot; – my next plottable generative art on <a href="https://fxhash.xyz/u/greweb">fx(hash) platform</a>.

Field (Reveal 13)

This plot reveals a new generator called &quot;Field&quot;. The primitive presented here is the circles filled shape combined with a centered attraction that creates some spiral shapes. We also see noise distortion at stake.
The physical is a grid of 4x2 frames that can be used to produce a 8 frames loop video.
As always, it&#39;s by making a lot of prototypes that we can verify plotting constraints. I take this opportunity to share a series of reveals that will show main features of &quot;Plottable Field (8 frames)&quot; – my next plottable generative art on <a href="https://fxhash.xyz/u/greweb">fx(hash) platform</a>.

Field (Reveal 12)

This plot reveals a new generator called &quot;Field&quot;. The primitive presented here is the circles filled shape. Interesting repetitive effect on this noise.
The physical is a grid of 4x2 frames that can be used to produce a 8 frames loop video.
As always, it&#39;s by making a lot of prototypes that we can verify plotting constraints. I take this opportunity to share a series of reveals that will show main features of &quot;Plottable Field (8 frames)&quot; – my next plottable generative art on <a href="https://fxhash.xyz/u/greweb">fx(hash) platform</a>.

Field (Reveal 11)

This plot reveals a new generator called &quot;Field&quot;. The primitive presented here is the use of a spiral from which lines are thrown on a noise field. This plot had a glitch where some frames miss some lines which created the interesting and unplanned disappearing effect.
The physical is a grid of 4x2 frames that can be used to produce a 8 frames loop video.
As always, it&#39;s by making a lot of prototypes that we can verify plotting constraints. I take this opportunity to share a series of reveals that will show main features of &quot;Plottable Field (8 frames)&quot; – my next plottable generative art on <a href="https://fxhash.xyz/u/greweb">fx(hash) platform</a>.

Field (Reveal 10)

This plot reveals a new generator called &quot;Field&quot;. The primitive presented here circles packing combined with a strong noise field.
The physical is a grid of 4x2 frames that can be used to produce a 8 frames loop video.
As always, it&#39;s by making a lot of prototypes that we can verify plotting constraints. I take this opportunity to share a series of reveals that will show main features of &quot;Plottable Field (8 frames)&quot; – my next plottable generative art on <a href="https://fxhash.xyz/u/greweb">fx(hash) platform</a>.

Field (Reveal 9)

This plot reveals a new generator called &quot;Field&quot;. The primitive presented here is the nesting of squares without rotation but with a strong attraction of lines to the center of the piece.
The physical is a grid of 4x2 frames that can be used to produce a 8 frames loop video.
As always, it&#39;s by making a lot of prototypes that we can verify plotting constraints. I take this opportunity to share a series of reveals that will show main features of &quot;Plottable Field (8 frames)&quot; – my next plottable generative art on <a href="https://fxhash.xyz/u/greweb">fx(hash) platform</a>.

Field (Reveal 8)

This plot reveals a new generator called &quot;Field&quot;. The primitive presented here is voronoi, polygons from which lines are thrown in a light noise.
The physical is a grid of 4x2 frames that can be used to produce a 8 frames loop video.
As always, it&#39;s by making a lot of prototypes that we can verify plotting constraints. I take this opportunity to share a series of reveals that will show main features of &quot;Plottable Field (8 frames)&quot; – my next plottable generative art on <a href="https://fxhash.xyz/u/greweb">fx(hash) platform</a>.

Field (Reveal 7)

This plot reveals a new generator called &quot;Field&quot;. The primitive presented here is the nesting of squares rotated into each other.
The physical is a grid of 4x2 frames that can be used to produce a 8 frames loop video.
As always, it&#39;s by making a lot of prototypes that we can verify plotting constraints. I take this opportunity to share a series of reveals that will show main features of &quot;Plottable Field (8 frames)&quot; – my next plottable generative art on <a href="https://fxhash.xyz/u/greweb">fx(hash) platform</a>.

Field (Reveal 6)

This plot reveals a new generator called &quot;Field&quot;. The primitive presented here is a simple square from which lines are thrown following the noise. A grid is also used to create more geometrical shapes.
The physical is a grid of 4x2 frames that can be used to produce a 8 frames loop video.
As always, it&#39;s by making a lot of prototypes that we can verify plotting constraints. I take this opportunity to share a series of reveals that will show main features of &quot;Plottable Field (8 frames)&quot; – my next plottable generative art on <a href="https://fxhash.xyz/u/greweb">fx(hash) platform</a>.

Field (Reveal 5)

This plot reveals a new generator called &quot;Field&quot;. The whole area is used with lines following a strong field formed with repetitives abstract shapes. Some circles are used to color differently the area.
The physical is a grid of 4x2 frames that can be used to produce a 8 frames loop video.
As always, it&#39;s by making a lot of prototypes that we can verify plotting constraints. I take this opportunity to share a series of reveals that will show main features of &quot;Plottable Field (8 frames)&quot; – my next plottable generative art on <a href="https://fxhash.xyz/u/greweb">fx(hash) platform</a>.

Field (Reveal 4)

This plot reveals a new generator called &quot;Field&quot;. The primitive presented here is the usage of a parametric curve. 2 inks are used.
The physical is a grid of 4x2 frames that can be used to produce a 8 frames loop video.
As always, it&#39;s by making a lot of prototypes that we can verify plotting constraints. I take this opportunity to share a series of reveals that will show main features of &quot;Plottable Field (8 frames)&quot; – my next plottable generative art on <a href="https://fxhash.xyz/u/greweb">fx(hash) platform</a>.

Field (Reveal 3)

This plot reveals a new generator called &quot;Field&quot;. The primitive presented here is the combination of circle packing with a light noise that form interesting cylinder shapes.
The physical is a grid of 4x2 frames that can be used to produce a 8 frames loop video.
<img src="/images/plots/517photo.jpg" width="100%"/>

As always, it&#39;s by making a lot of prototypes that we can verify plotting constraints. I take this opportunity to share a series of reveals that will show main features of &quot;Plottable Field (8 frames)&quot; – my next plottable generative art on <a href="https://fxhash.xyz/u/greweb">fx(hash) platform</a>.

Field (Reveal 2)

This plot reveals a new generator called &quot;Field&quot;. Here is one possible field generation, that &quot;round&quot; the angle. The generator can sometimes produce such repetitive patterns, but it&#39;s not always the case.
The physical is a grid of 4x2 frames that can be used to produce a 8 frames loop video.
<img src="/images/plots/516photo.jpg" width="100%"/>

As always, it&#39;s by making a lot of prototypes that we can verify plotting constraints. I take this opportunity to share a series of reveals that will show main features of &quot;Plottable Field (8 frames)&quot; – my next plottable generative art on <a href="https://fxhash.xyz/u/greweb">fx(hash) platform</a>.

Field (Reveal 1)

This last plot reveals the use of anaglyph in wireframe. It is one of the rare feature that the generator can displays. There are many other rare features to discover!
<img src="/images/plots/515z.jpg" width="100%"/>

As always, it&#39;s by making a lot of prototypes that we can verify plotting constraints. I take this opportunity to share a series of 7 &quot;reveals&quot; that will show main features of &quot;Plottable Wireframe (8 frames)&quot; – my next plottable generative art on <a href="https://fxhash.xyz/u/greweb">fx(hash) platform</a>.
<img src="/images/plots/515prototypes.jpg" width="100%"/>

This plot is the second of a series of 7 plots that reveal 'Plottable Wireframe (8 frames)' – my next plottable generative art on fxhash

Wireframe (Reveal 7 / 7)

This sixth plot reveals the alternance of color between frames that can happen. It also shows more kind of shapes.
<img src="/images/plots/514z.jpg" width="100%"/>

As always, it&#39;s by making a lot of prototypes that we can verify plotting constraints. I take this opportunity to share a series of 7 &quot;reveals&quot; that will show main features of &quot;Plottable Wireframe (8 frames)&quot; – my next plottable generative art on <a href="https://fxhash.xyz/u/greweb">fx(hash) platform</a>.

This plot is the sixth of a series of 7 plots that reveal 'Plottable Wireframe (8 frames)' – my next plottable generative art on fxhash

Wireframe (Reveal 6 / 7)

This fifth plot reveals the concept of &quot;columns&quot; that make the wireframe elevated with lines as well as the concept of color stripes in the wireframe.
<img src="/images/plots/513z.jpg" width="100%"/>

As always, it&#39;s by making a lot of prototypes that we can verify plotting constraints. I take this opportunity to share a series of 7 &quot;reveals&quot; that will show main features of &quot;Plottable Wireframe (8 frames)&quot; – my next plottable generative art on <a href="https://fxhash.xyz/u/greweb">fx(hash) platform</a>.

This plot is the fifth of a series of 7 plots that reveal 'Plottable Wireframe (8 frames)' – my next plottable generative art on fxhash

Wireframe (Reveal 5 / 7)

This fourth plot reveals one kind of symmetry that can happen in wireframe. There are a few different kind of symmetry to discover.
<img src="/images/plots/512z.jpg" width="100%"/>

As always, it&#39;s by making a lot of prototypes that we can verify plotting constraints. I take this opportunity to share a series of 7 &quot;reveals&quot; that will show main features of &quot;Plottable Wireframe (8 frames)&quot; – my next plottable generative art on <a href="https://fxhash.xyz/u/greweb">fx(hash) platform</a>.

This plot is the fourth of a series of 7 plots that reveal 'Plottable Wireframe (8 frames)' – my next plottable generative art on fxhash

Wireframe (Reveal 4 / 7)

This third plot reveals the random placement of extra shapes around the wireframe!. There are 6 kind of shapes.
<img src="/images/plots/511z.jpg" width="100%"/>

As always, it&#39;s by making a lot of prototypes that we can verify plotting constraints. I take this opportunity to share a series of 7 &quot;reveals&quot; that will show main features of &quot;Plottable Wireframe (8 frames)&quot; – my next plottable generative art on <a href="https://fxhash.xyz/u/greweb">fx(hash) platform</a>.

This plot is the third of a series of 7 plots that reveal 'Plottable Wireframe (8 frames)' – my next plottable generative art on fxhash

Wireframe (Reveal 3 / 7)

This second plot reveals the concept of &quot;holes&quot; in the wireframe that can sometimes occur. We can also see a different frequency of looping into the &quot;cylinder&quot; as we can see more than 1 wave at a given time (unlike <a href="/plots/509">plots/509</a>).
<img src="/images/plots/510z.jpg" width="100%"/>

As always, it&#39;s by making a lot of prototypes that we can verify plotting constraints. I take this opportunity to share a series of 7 &quot;reveals&quot; that will show main features of &quot;Plottable Wireframe (8 frames)&quot; – my next plottable generative art on <a href="https://fxhash.xyz/u/greweb">fx(hash) platform</a>.

Wireframe (Reveal 2 / 7)

As always, it&#39;s by making a lot of prototypes that we can verify plotting constraints. I take this opportunity to share a series of 7 &quot;reveals&quot; that will show main features of &quot;Plottable Wireframe (8 frames)&quot; – my next plottable generative art on <a href="https://fxhash.xyz/u/greweb">fx(hash) platform</a>.
<blockquote>
This will be the first generative plot loop on a generative art marketplace! The concept is that a physical plot of 8 frames on a A4 paper can be animated back into an animation. The digital preview will be nice as well.
</blockquote>
This first plot reveals the concept of looping into 3D noise and also show you &quot;flat&quot; areas in that noise, this is a reboot of <a href="/plots/448">plots/448</a> with a better loop animation: the trick was to slide on a cylinder in Perlin 3D (see <a href="https://twitter.com/greweb/status/1524490017531432961">Twitter thead</a>).
<img src="/images/plots/cylinder-loop.jpg" width="100%"/>

The plot looks like this:
<img src="/images/plots/509photo.jpg" width="100%"/>

<img src="/images/plots/509author.jpg" width="100%"/>

<img src="/images/plots/509z.jpg" width="100%"/>

To make it convenient, I&#39;ve developed my own script and my own tooling to easily make these plot loop for the future!
<img src="/images/plots/509-ui.gif" width="100%"/>

This plot is the first of a series of 7 plots that reveal 'Plottable Wireframe (8 frames)' – my next plottable generative art on fxhash

Wireframe (Reveal 1 / 7)

Continuation of Polar Mountains explorations.
Ink is Diamine Aurora Borealis.

Polar Mountains (proto 14)

Continuation of Polar Mountains explorations.
Ink is Diamine Hope Pink.

Polar Mountains (proto 13)

Continuation of Polar Mountains explorations.
Ink is Diamine Amber.

Polar Mountains (proto 12)

Same generator as in <a href="/plots/504">plots/504</a> but using Diamine Aurora Borealis and Rober Oster Rubine on A3 watercolor paper. The plot took more than 12 hours to do.
(seed 299)
<img src="/images/plots/505z.jpg" width="100%"/>
<img src="/images/plots/505z2.jpg" width="100%"/>
<img src="/images/plots/505z3.jpg" width="100%"/>
<img src="/images/plots/505z4.jpg" width="100%"/>
<img src="/images/plots/505z5.jpg" width="100%"/>
<img src="/images/plots/505z6.jpg" width="100%"/>
<img src="/images/plots/505z7.jpg" width="100%"/>

Square storms of fire

Continuation of Square Storms exploration using Diamine inks &quot;Sherwood Green&quot; and &quot;Evergreen&quot; on A3 watercolor paper.
<img src="/images/plots/504z.jpg" width="100%"/>
<img src="/images/plots/504z2.jpg" width="100%"/>
<img src="/images/plots/504z3.jpg" width="100%"/>
<img src="/images/plots/504z4.jpg" width="100%"/>

Square storms of evergreen

Same generator as in <a href="/plots/502">plots/502</a> but using Diamine inks &quot;Bloody Brexit&quot; and &quot;Aurora Borealis&quot; on A3 watercolor paper.
(seed 56)
<img src="/images/plots/503z.jpg" width="100%"/>
<img src="/images/plots/503z2.jpg" width="100%"/>
<img src="/images/plots/503z3.jpg" width="100%"/>
<img src="/images/plots/503z4.jpg" width="100%"/>
<img src="/images/plots/503z5.jpg" width="100%"/>
<img src="/images/plots/503z6.jpg" width="100%"/>

Square storms of ice

This is a continuation of ideas explored at <a href="/plots/464">plots/464</a> but with a complete rework of the way the &quot;grid&quot; if affecting the storm, making &quot;squares&quot; shapes more present on top of the organic feel of &quot;Storm&quot;. The plot were made in about 7 hours and using Diamine inks &quot;Pink&quot; and &quot;Amber&quot; on A3 watercolor paper.

Square storms of flowers

Using one A3 plot, we make a stop motion strips of 8 frames, and animate back into a video. This is the <a href="/2021/05/plot-loops">&quot;plot loop&quot;</a> technique. This is a continuation of the heads of <a href="/plots/478">plots/478</a> with a better implementation of a noise loop: rotating various layers of perlin noises. This piece was made for #OBJKT4OBJKT celebration.
<img width="100%" src="/images/plots/501planche.jpg"/>

Inks: Robert Oster Rubine and Fire &amp; Ice.
(seed 15)

Using one A3 plot, we make a stop motion strips of 8 frames, and animate back into a video. This is the 'plot loop' technique. This is a continuation of the heads of plots/478 with a better implementation of a noise loop: rotating various layers of perlin noises. This piece was made for #OBJKT4OBJKT celebration.

Amber Morphing Head (8 frames)

Using one A3 plot, we make a stop motion strips of 8 frames, and animate back into a video. This is the <a href="/2021/05/plot-loops">&quot;plot loop&quot;</a> technique. This is a continuation of the heads of <a href="/plots/478">plots/478</a> with a better implementation of a noise loop: rotating various layers of perlin noises. This piece was made for #OBJKT4OBJKT celebration.
<img width="100%" src="/images/plots/500planche.jpg"/>

Inks: Diamine Evergreen and Diamine Aurora Borealis.
(seed 52)

Green Morphing Head (8 frames)

Using one A3 plot, we make a stop motion strips of 8 frames, and animate back into a video. This is the <a href="/2021/05/plot-loops">&quot;plot loop&quot;</a> technique. This is a continuation of the heads of <a href="/plots/478">plots/478</a> with a better implementation of a noise loop: rotating various layers of perlin noises. This piece was made for #OBJKT4OBJKT celebration.
<img width="100%" src="/images/plots/499planche.jpg"/>

Inks: Diamine Pink and Diamine Soft Mint.
(seed 114)

Pink Mint Morphing Head (8 frames)

Using one A3 plot, we make a stop motion strips of 8 frames, and animate back into a video. This is the <a href="/2021/05/plot-loops">&quot;plot loop&quot;</a> technique. This is a continuation of the heads of <a href="/plots/478">plots/478</a> with a better implementation of a noise loop: rotating various layers of perlin noises. This piece was made for #OBJKT4OBJKT celebration.
<img width="100%" src="/images/plots/498planche.jpg"/>

Inks: Robert Oster Rubine and Fire &amp; Ice.
(seed 15)

Fire Ice Morphing Head (8 frames)

Continuation of Polar Mountains explorations.
Ink is Diamine Bloody Brexit.
<img src="/images/plots/497z.jpg" width="100%"/>

(seed 91)

Polar Mountains (proto 11)

Continuation of Polar Mountains explorations.
Black Ink.
(seed 252)

Polar Mountains (proto 10)

Continuation of Polar Mountains explorations.
Ink is Rubine.
<img src="/images/plots/495z.jpg" width="100%"/>

(seed 453)

Polar Mountains (proto 9)

Continuation of Polar Mountains explorations.
Ink is Fire and Ice.
<img src="/images/plots/494z.jpg" width="100%"/>

(seed 70)

Polar Mountains (proto 8)

Continuation of Polar Mountains explorations.
Ink is Diamine Bloody Brexit.
<img src="/images/plots/493z.jpg" width="100%"/>

(seed 286)

Polar Mountains (proto 7)

Continuation of Polar Mountains explorations.
Ink is Diamine Earl Grey.
<img src="/images/plots/492z.jpg" width="100%"/>

(seed 61)

Polar Mountains (proto 6)

<blockquote>
This artwork is born from a collaboration with <a href="https://twitter.com/Lelapinmignon">@LeLapinMignon</a>. The generative piece is plotted with a fountain pen robot drawing a 73 meter-long curve on a watercolor gradient and then digitally enhanced. Curious exploration of different mediums, from physical to digital.
</blockquote>
Beginning April 2022, I was at <a href="https://twitter.com/greweb/status/1512811231677145091">NFC Lisbon conference</a> and met with <a href="https://twitter.com/Lelapinmignon">@LeLapinMignon</a>, a French artist who is making &quot;Augmented Watercolour&quot; art work. She gaves me a watercolor gradient base that I could use and experiment using pen plotting techniques.
On Tuesday, April 26th, 2022, a live stream on Twitch happened, where I coded a generative program, curated one result out of many possibilites, and then used the AxiDraw plotter to plot it with a fountain pen filled with <a href="https://mountainofink.com/blog/diamine-aurora-borealis">Diamine Aurora Borealis</a> ink.
<video loop autoplay controls src="/images/plots/491-timelapse.mp4" width="100%"></video>
This was a cool experience, interactive with the chat too, and the plotter slowly revealed the creation, tracing one 73-meters-long curve for an hour!
Later on, <a href="https://twitter.com/Lelapinmignon">@LeLapinMignon</a> finalized the work with her Augmented Watercolor magic and produced this mesmerizing result. This was such a cool experiment, I am thrilled by this collaboration and the possibilites of mixing digital and physical art.

This artwork is born from a collaboration with @LeLapinMignon. The generative piece is plotted with a fountain pen robot drawing a 73 meter-long curve on a watercolor gradient and then digitally enhanced. Curious exploration of different mediums, from physical to digital.

Experimenting the idea of &quot;Mountains&quot; with its domain warping using a polar projection. Fire &amp; Ice ink.
Glitching the algorithm by using a variable length depending on the radius but with a constants array to look up in the &quot;height map&quot;.

Experimenting the idea of 'Mountains' with its domain warping using a polar projection.

Polar Mountains (proto 5)

Experimenting the idea of &quot;Mountains&quot; with its domain warping using a polar projection. Black ink.
Glitching the algorithm by using a variable length depending on the radius but with a constants array to look up in the &quot;height map&quot;.

Polar Mountains (proto 4)

Experimenting the idea of &quot;Mountains&quot; with its domain warping using a polar projection. Diamine Bloody Brexit ink.
Done during a live stream on <a href="https://instagram.com/greweb">https://instagram.com/greweb</a>

Polar Mountains (proto 3)

Experimenting the idea of &quot;Mountains&quot; with its domain warping using a polar projection. Diamine Pink.
Done during a live stream on <a href="https://instagram.com/greweb">https://instagram.com/greweb</a>

Polar Mountains (proto 2)

Experimenting the idea of &quot;Mountains&quot; with its domain warping using a polar projection. Black ink.
Done during a live stream on <a href="https://instagram.com/greweb">https://instagram.com/greweb</a>

Polar Mountains (proto 1)

Physical version of #17 mint of Plottable Fibers.
<img src="/images/plots/485z.jpg" width="100%"/>

Offered randomly from the tweets of last week sharing a collected plottable.
Done during a live stream on <a href="https://twitch.tv/greweb">https://twitch.tv/greweb</a>

Physical version of #17 mint of Plottable Fibers.

Plottable Fibers #17

Physical version of #81 mint of Plottable Fibers.
<img src="/images/plots/484z.jpg" width="100%"/>

Offered randomly from the tweets of last week sharing a collected plottable.
Done during a live stream on <a href="https://twitch.tv/greweb">https://twitch.tv/greweb</a>

Physical version of #81 mint of Plottable Fibers.

Plottable Fibers #81

Developed and plotted during a live stream on <a href="https://twitch.tv/greweb">https://twitch.tv/greweb</a>

Cordons rouges et bleus

Offered randomly from the tweets of last week sharing a collected plottable.
Plotted during a live stream on <a href="https://twitch.tv/greweb">https://twitch.tv/greweb</a>

Mountain Moons #286

Mountain Moons #563

Code developed during a live stream on <a href="https://twitch.tv/greweb">https://twitch.tv/greweb</a>
This is the first prototype of a possible series of similar plots, this is exploring the &quot;cordon&quot; (= cords/rope in French) primitive that was developped on <a href="https://greweb.me/plots/478">https://greweb.me/plots/478</a>

This is the first prototype of a possible series of similar plots, this is exploring the 'cordon' (= cords/rope in French) primitive that was developed on https://greweb.me/plots/478

Cordons (Prototype 1)

Physical version of #11 mint of Plottable Fibers.
<img src="/images/plots/479z.jpg" width="100%"/>

Offered randomly from the tweets of last week sharing a collected plottable.
Done during a live stream on <a href="https://twitch.tv/greweb">https://twitch.tv/greweb</a>

Physical version of #11 mint of Plottable Fibers.

Plottable Fibers #11

<img src="/images/plots/478-frames.gif" width="100%" />

<blockquote>
NB: This article is in French because it was made in context of a French contest. I deeply explain (in French) all the concepts at stake.
</blockquote>
<h2 id="le-résultat">Le résultat</h2>
&#39;Transhumanist singularity&#39; est une boucle animée de 4 plots A3 présentant une version transhumanisme de l&#39;Homme de Vitruve qui nage dans un réseau de cerveaux en symbiose.
J&#39;ai voulu explorer l&#39;idée que le transhumanisme, bien que souvent présenté comme une dérive individualiste, peut tourner vers une forme de singularité. L&#39;oeuvre est suffisemment abstraite et minimaliste pour laisser place à plus d&#39;interprétations. L&#39;idée de cerveaux conservés sans leur corps s&#39;inspire d&#39;une des nouvelles de L&#39;arbre des possibles (Bernard Werber).
zooms animés sur le centre:
<img src="/images/plots/478-z3.gif" width="100%" />

<hr>
Une création &quot;digital&quot;...
Cette création a été entièrement développée sur Twitch. L&#39;oeuvre &quot;digital&quot; est en réalité un générateur de SVG (au sens <a href="https://en.wikipedia.org/wiki/Generative_art">art génératif</a> du terme) qui pour une graine (seed) donnée génère 4 fichier SVGs.
Même si des croquis ont été dessinés pour travailler sur l&#39;idée, la réalisation finale est en essence un programme, entièrement développé avec du code créatif, qui a la capacité de générer une infinité de variantes (c&#39;est un générateur de SVG, au sens <a href="https://en.wikipedia.org/wiki/Generative_art">art génératif</a> du terme qui pour une graine donnée donne un résultat différent). Il s&#39;agit de composer un ensemble d&#39;algorithmes et de diverses techniques au service de l&#39;idée.
...qui est aussi une création physique...
Il faudra ensuite compter environ 20 heures de plus pour la réalisation physique. Comme une grande partie de mes créations (<a href="/plots">https://greweb.me/plots</a>), un robot traceur (plus généralement appelé &quot;plotter&quot; en anglais) est utilisé pour dessiner tous les traits du SVG au stylo plume sur papier aquarelle A3. Chaque frame utilise 3 encres, calques dessinés l&#39;un après l&#39;autre: Diamine Amber (yellow), Diamine Pumpkin (orange) and Diamine Bloody Brexit (dark blue).
<iframe width="100%" height="380" src="https://www.youtube.com/embed/AzGMNyjaRts?rel=0" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

...qui redevient digitale, sous forme d&#39;animation!
en dessinant 4 frames proches les unes des autres, nous pouvons recréer un dessin animé pour produire le résultat partagé plus haut.
C&#39;est la technique que j&#39;appelle &quot;plot loop&quot;, explorée l&#39;an dernier – autres créations de ce type: <a href="https://greweb.me/plots/tags/plotloop">https://greweb.me/plots/tags/plotloop</a> – le format A3 est néanmoins une première.
<img src="/images/plots/478-artist.gif" width="50%"/><img src="/images/plots/478-z4.gif" width="50%" />
<h3 id="quelques-statistiques">Quelques statistiques</h3>
<ul>
<li>20 heures de conception (streamés)</li>
<li>environ 24 heures de temps de tracage (plotting)</li>
<li>Chaque frame A3 est composée de près de 35 000 traits, tracés en 5 heures, parcourant ainsi près de 300 mètres.</li>
<li>Les 4 frames ont donc été tracées en plus de 20 heures et pour un total d&#39;environ 1&#39;200 mètres d&#39;encre!</li>
</ul>
<blockquote>
Pour donner une idée de la quantité d&#39;encre utilisé: les 4 heures et 200 mètres d&#39;encre de jaune correspondent à cette quantité vidée après utilisation:
<img src="/images/plots/478_ink.jpg" width="50%"/>
</blockquote>
<hr>
<h2 id="le-contexte">Le contexte</h2>
Cette semaine de mi Avril a eu lieu le concours <a href="https://www.weekandart.com/">&quot;Week and Art&quot; (WAT)</a> qui a réuni des centaines de streamers (habitués à la catégorie Art de Twitch) et participants non-streamers également. Vous savez peut-être que certaines de mes créations depuis 2021 sont partagés sur <a href="https://twitch.tv/greweb">https://twitch.tv/greweb</a>. Le concours était très intéressant pour continuer de démocratiser l&#39;expension de l&#39;art sur Twitch et de créer des liens entre artistes aux styles très variés.
J&#39;ai streamé plusieurs journées sur <a href="https://twitch.tv/greweb">twitch.tv/greweb</a> pour avancer doucement sur plusieurs idées en développant mon <a href="https://en.wikipedia.org/wiki/Generative_art">générateur d&#39;art génératif</a> tout en l&#39;éprouvant les traits en utilisant ma machine de dessin <a href="https://www.axidraw.com/">AxiDraw A3</a> qui est en réalité un robot sur lequel je met des stylos plumes. Cette technique appelé &quot;plotting&quot; est utilisé par de nombreux artistes, qui partagent quotidiennement leur créations sur <a href="https://twitter.com/search?q=%23plottertwitter">#plottertwitter</a>.
<video controls src="/images/plots/478-plotlive.mp4" width="100%"></video>
Le thème de cette année était le Transhumanisme ce qui épousait particulièrement bien le genre de technique que j&#39;utilise ici: le <a href="https://en.wikipedia.org/wiki/Creative_coding">code créatif</a> et le <a href="/plots">&quot;plotting&quot;</a>.
J&#39;avais pour but de participer à la catégorie Digital Art du concours, l&#39;art génératif étant une branche de l&#39;<a href="https://en.wikipedia.org/wiki/Digital_art">art digital</a>. C&#39;était clairement un peu audacieux et expérimental du fait de la technique et des outils utilisés pour ce concours. Etant le seul à utiliser ce genre de technique, l&#39;organisation a, au cours du concours, jugé que je ne rentrais pas dans la catégorie. Le règlement a été précisé sur le fait qu&#39;il faut une &quot;base de dessin&quot; dans la création afin que le jury puisse juger de résultats &quot;similaires&quot; ce qui est louable.
Il est difficile de catégoriser le monde de l&#39;art. L&#39;art a toujours été &quot;disruptif&quot; et je l&#39;ai été cette fois ci. L&#39;art génératif est encore à ses tout débuts comme le montre aussi la surprise de la communauté, je remercie tout les viewers qui sont arrivés sur mon stream et les nouvelles connaissances que j&#39;ai pu faire. Je remercie également l&#39;organisation qui m&#39;a bien accompagné.
L&#39;art génératif est partout, c&#39;était une opportunité de le montrer en écrivant du code, mais en réalité nous utilisons tous du génératif sans le savoir. Le logiciel de dessin que vous utilisez (par exemple un pinceau), les textures que vous pouvez trouver sur Blender (notamment la génération de textures procédurales),... C&#39;est un outil à la disposition de l&#39;art numérique.
Les contraintes que je me suis imposé n&#39;ont pas facilité le processus de création, et mon oeuvre reste très modeste (minimaliste et psychédélique). Créer dans un contexte stressant comme dans une conférence (comme j&#39;ai pu avoir l&#39;opportunité de le faire début Avril <a href="http://greweb.me/plots/448">http://greweb.me/plots/448</a>) et ici sur Twitch apporte aussi sa complexité. C&#39;était en tout cas un plaisir de passer plus de temps à expliquer ces méthodes que peu de viewers connaissaient.
<video loop autoplay controls src="/images/plots/478-cameras.mp4" width="100%"></video>
Il n&#39;ai pas aisé de maitriser le résultat d&#39;un générateur, on utilise des algorithmes, mais dans le cas du plotting, on doit penser aux contraintes du robot, des encres, du stylo et du papier.
<h2 id="le-processus-de-création">Le processus de création</h2>
J&#39;ai l&#39;habitude de faire des motifs abstraits, des formes un peu fractales, qui tendent de se rapprocher de la nature avec des nuages de bruits, en jouant avec la symétrie pour recréer aléatoirement des formes reconnaissables,...
<img width="50%" src="/images/2021/08/artist-1.jpg" /><img width="50%" src="/images/2021/08/artist-2.jpg" />
Le plus gros challenge pour moi dans le contexte de ce concours était d&#39;aller vers un travail de composition avec des formes un peu plus &quot;dessinés&quot; et organiques. Il est aisé d&#39;appliquer un algorithme pour dupliquer plein de fois une primitive, il est moins aisé d&#39;avoir une composition bien équilibrée. Le résultat final aurait peut-être mérité un peu plus de travail à jouer avec le chaos pour composer la scène finale.
<h3 id="tout-commence-avec-des-croquis">Tout commence avec des croquis</h3>
On a une idée, on la couche déjà sur papier. Cela permet d&#39;avoir un but, et on peut commencer à réfléchir quelle technique on utilisera pour chaque élément de la scène.
Ensuite, le gros du travail est itératif et a eu lieu plusieurs jours pour tenter différentes approches et confronter le but théorique à la réalité technique.
Un exemple trivial était de mesurer les proportions de l&#39;Homme de Vitruve et de les implanter dans le code.
<img width="100%" src="/images/plots/478-mesure.jpg" />

<h3 id="lart-génératif-choisir-lélu-parmi-des-variantes-aléatoires">L&#39;art génératif, choisir l&#39;élu parmi des variantes aléatoires</h3>
L&#39;art génératif permet, avec un même générateur, de générer une infinité de variantes en changeant la &quot;seed&quot; en entrée de l&#39;algorithme utilisé.
J&#39;ai par exemple, passé du temps pour manuellement sélectionner la tête principale que je voulais parmis une centaines de variantes aléatoires.
<video loop autoplay controls src="/images/plots/478-generations.mp4" width="100%"></video>
Il est intéressant de voir que des variations de la tête principale vont se retrouver dans le fond de la pièce complète.
L&#39;art génératif ne consiste pas à juste écrire des algorithmes. Il y a en réalité beaucoup de tests à faire et il faut ajuster beaucoup de paramètres pour choisir la zone de variations qui nous intéresse d&#39;explorer. On itère beaucoup de fois jusqu&#39;à en être satisfait.
La totalité du code que j&#39;ai créé est originale, certaines techniques comme <a href="https://en.wikipedia.org/wiki/Travelling_salesman_problem">TSP</a> utilisent des bibliothèques Rust, language de programmation utilisé.
<h3 id="le-code-est-ma-plume">Le code est ma plume</h3>
Ce code créatif a consisté à développer un ensemble de primitives, élément &quot;atomique&quot; de la création, pour ensuite les utiliser tous ensemble pour former l&#39;oeuvre complète.
Une primitive peut être par exemple une texture de &quot;brush&quot; qu&#39;un logiciel de dessin va proposer pour dessiner. Elle peut aussi consister à offrir une technique de &quot;placement&quot; que l&#39;on peut composer avec d&#39;autres primitives, récursivement.
Pour réaliser ma création, mon parti pris est de ne jamais dessiner &quot;moi-même&quot; mais d&#39;utiliser du code pour le faire. Cela complique certaines choses et en simplifie d&#39;autres: il est facile d&#39;avoir quelque de mathématique, géométrique et ordonné mais plus difficile d&#39;avoir quelque chose de chaotique et organique.
Au final, j&#39;ai revisité mon baggage de techniques explorées ces précédentes années. Certaines techniques ont été étendues, de nouvelles primitives ont été développés,... Voici quelques primitives notables que l&#39;on peut retrouver:
<ul>
<li>Les particules de &quot;Storm&quot; (<a href="/plots/394">/plots/394</a>, <a href="/plots/312">/plots/312</a>).</li>
</ul>
<img width="50%" src="/images/plots/394-thumbnail.jpg" /><img width="50%" src="/images/plots/312-thumbnail.jpg" />
<ul>
<li>Les &quot;têtes&quot; comme la vidéo précédente l&#39;a montré. Elles sont basés sur des explorations similaires (néanmoins différentes) comme &quot;Evolving Bug&quot; (<a href="/plots/311">/plots/311</a>, <a href="/plots/324">/plots/324</a>)</li>
</ul>
<img width="50%" src="/images/plots/311-thumbnail.jpg" /><img width="50%" src="/images/plots/324-thumbnail.jpg" />
<ul>
<li>La technique du &quot;circle packing&quot; et &quot;TSP&quot; comme exploré dans &quot;Yellow yarn balls&quot; (<a href="/plots/381">/plots/381</a>, <a href="/plots/371">/plots/371</a>)</li>
</ul>
<img width="50%" src="/images/plots/381-thumbnail.jpg" /><img width="50%" src="/images/plots/371-thumbnail.jpg" />
<ul>
<li>Les &quot;cordons&quot; fût la principale innovation de cette création. J&#39;ai écris de bout en bout un algorithme qui permet à des lignes de &quot;tourner&quot; et d&#39;osciller autour d&#39;un chemin, ce qui a été la base pour fabriquer: les connections entre les cerveaux, le cadre, le cercle, le carré,...</li>
</ul>
<video loop autoplay controls src="/images/plots/478-algo-lines.mp4" width="100%"></video>
...mais aussi les bras et jambes de l&#39;homme central.
<video loop autoplay controls src="/images/plots/478-human-step1.mp4" width="100%"></video>
Il était ensuite intéressant de rajouter encore plus de lignes et d&#39;aléatoire pour avoir des formes moins géométriques et un peu plus chaotique:
<video loop autoplay controls src="/images/plots/478-human-step2.mp4" width="100%"></video>
Résultat physique avec l&#39;encre aux reflets rouges:
<img src="/images/plots/478-bodyzoom.jpg" width="100%"/>

<h3 id="prototype-robotique-dans-le-monde-physique">Prototype robotique dans le monde physique</h3>
Le médium utilisé (les différentes encres, stylo plumes sur un papier aquarelle) est passionnant mais aussi assez contraignant. Il faut à plusieurs reprises adapter le nombre de traits pour ne pas &quot;traverser&quot; la feuille. C&#39;est pour cette raison que j&#39;ai réalisé plusieurs prototypes intermédiaires:
<a href="/plots/474"><img src="/images/plots/474-thumbnail.jpg" width="50%"/></a><a href="/plots/475"><img src="/images/plots/475-thumbnail.jpg" width="50%"/></a><a href="/plots/476"><img src="/images/plots/476-thumbnail.jpg" width="59%"/></a><a href="/plots/477"><img src="/images/plots/477-square-thumbnail.jpg" width="41%" /></a>
<h3 id="fabrication-dune-animation-retour-dans-le-monde-digital-plot-loop">Fabrication d&#39;une animation, retour dans le monde digital (&quot;Plot Loop&quot;)</h3>
Réaliser une animation en art génératif est assez simple: cela consiste à faire légèrement varier un paramètre d&#39;une frame à l&#39;autre (= au cours du temps). En revanche, réaliser une boucle est plus compliqué car il faut que la dernière image soit proche de la première pour ne pas &quot;sauter&quot; dans le temps. Une façon de résoudre ce problème est de faire un mouvement de va-et-vient, mais ce mouvement n&#39;est pas souvent intéressant ni voulu.
Pour faire une boucle, il faut repartir des bases: faire varier un ou plusieurs paramètres en suivant un cercle: tourner autour d&#39;un cercle permet précisement de revenir à son point de départ. Ainsi, nous pouvons utiliser une projection polaire, par exemple pour tourner dans un bruit de Perlin:
<img src="/images/noiseloop.png" width="50%"/>

Pendant une nuit, mon ordinateur a calculé des centaines de résultats et j&#39;ai choisi, parmi ces animations théoriques celui qui me semblait le plus intéressant.
<img src="/images/plots/478-choices.jpg" width="100%"/>

Une fois l&#39;animation choisie, il a fallu la réaliser pendant une vingtaines d&#39;heures avec le robot, les feuilles de papier, les stylos plumes et les encres. Les photos, une fois normalisées, peuvent enfin former le dessin animé.
Il est aussi possible de montrer des versions localisés:
PLUSIEURS ANIMATIONS
<h2 id="en-conclusion">En conclusion</h2>
Par le passé, j&#39;ai participé à plusieurs game jams (18 jeux développés et publiés sur <a href="https://greweb.itch.io/">https://greweb.itch.io/</a>), évènements de démoscènes, et récemment <a href="https://greweb.me/plots/tags/plotparty">#plotparty</a> et <a href="https://genuary.art/prompts">genuart</a>.
WeekandArt fût une expérience sociale très enrichissante, j&#39;ai eu plusieurs occasions de rencontrer et discuter avec d&#39;autres artistes sur Twitch et Discord. C&#39;était très intéressant d&#39;aller voir les autres participants avancer sur leur projets respectifs notamment <a href="https://www.twitch.tv/Adma357">Adma357</a>, <a href="https://www.twitch.tv/LouisGrievesArt">LouisGrievesArt</a>, <a href="https://www.twitch.tv/space_thomalice">space_thomalice</a>, <a href="https://www.twitch.tv/animanaute">animanaute</a>, <a href="https://www.twitch.tv/supertouffe">supertouffe</a>, <a href="https://www.twitch.tv/i2g3z">i2g3z</a>, et beaucoup d&#39;autres.
Je n&#39;ai jamais ressenti une telle dimension sociale dans la participation d&#39;une gamejam/contest que permet en réalité le streaming. Cela m&#39;a redonné le goût de participer à des game jams comme <a href="https://ldjam.com/">ludumdare</a>, et il est possible que je commencer bientôt à streamer le développement de jeux sur Twitch.
C&#39;était si intéressant pour moi de partager sur Twitch des techniques méconnus avec des artistes traditionnels. Merci à tous!
J&#39;y fus!
<img src="/images/plots/478-z1.jpg" width="100%"/><img src="/images/plots/478-z1.gif" width="50%" /><img src="/images/plots/478-z2.gif" width="50%" />

'Transhumanist singularity' est une boucle animée de 4 plots A3 présentant une version transhumanisme de l'Homme de Vitruve qui nage dans un réseau de cerveaux en symbiose.

Transhumanist singularity (4 frames)

Plotted during a live stream on <a href="https://twitch.tv/greweb">https://twitch.tv/greweb</a>
in context of Week and Art contest 2022. See the final result at <a href="/plots/478">/plots/478</a>.

Prototype 4 of 'Transhumanism'

Prototype 3 of 'Transhumanism'

Prototype 2 of 'Transhumanism'

Plotted during a live stream on <a href="https://twitch.tv/greweb">https://twitch.tv/greweb</a>
in context of Week and Art contest 2022. See the final result at <a href="/plots/478">/plots/478</a>.
<img src="/images/plots/474z.jpg" width="100%"/>

Prototype 1 of 'Transhumanism'

<img src="/images/plots/473z.jpg" width="100%"/>

Spring season is here! Plottable Fibers explore the beauty of Perlin noise simulating the behaviour of sprouting in Nature. There are many combination of parameters at stake: different intensity of noises, different width and elevation, different inks,... The digital NFTs can be used to perform a physical action: @greweb plotting on demand a fountain pen plot for those who also want physical originals.
Request for plot with the NFT: <a href="https://greweb.me/plots/nft">https://greweb.me/plots/nft</a>

Spring season is here! Plottable Fibers explore the beauty of Perlin noise simulating the behaviour of sprouting in Nature. There are many combination of parameters at stake: different intensity of noises, different width and elevation, different inks,... The digital NFTs can be used to perform a physical action: @greweb plotting on demand a fountain pen plot for those who also want physical originals.

Plottable Fibers (Prototype 8)

<img src="/images/plots/472z.jpg" width="100%"/>

Spring season is here! Plottable Fibers explore the beauty of Perlin noise simulating the behaviour of sprouting in Nature. There are many combination of parameters at stake: different intensity of noises, different width and elevation, different inks,... The digital NFTs can be used to perform a physical action: @greweb plotting on demand a fountain pen plot for those who also want physical originals.
Request for plot with the NFT: <a href="https://greweb.me/plots/nft">https://greweb.me/plots/nft</a>

Plottable Fibers (Prototype 7)

Spring season is here! Plottable Fibers explore the beauty of Perlin noise simulating the behaviour of sprouting in Nature. There are many combination of parameters at stake: different intensity of noises, different width and elevation, different inks,... The digital NFTs can be used to perform a physical action: @greweb plotting on demand a fountain pen plot for those who also want physical originals.
Request for plot with the NFT: <a href="https://greweb.me/plots/nft">https://greweb.me/plots/nft</a>

Plottable Fibers (Prototype 6)

Plottable Fibers (Prototype 5)

Plottable Fibers (Prototype 4)

Plottable Fibers (Prototype 3)

Plottable Fibers (Prototype 2)

Plottable Fibers (Prototype 1)

Plottable Fibers (OG plot)

Distorted ground

Distorted Pink

Fox head

Mountains 8

Mountains 7

Mountains 6

Mountains 5

Mountains 4

<img width="50%" src="/images/2022/shattered/thumbnail.jpg" style="float: right">

"Shattered" is a new generative and plottable art that will be released the February 23rd, 2022 (6PM Paris time) on the emerging platform https://plottables.io/.

> Shattered [adj] – broken into many small pieces.
>
> This plottable NFT generator visualizes the explosion of polygons (e.g. squares) into pieces then rendered using different filling techniques and suggested inks. There are various rare cases to discovery, like the shape, filling method, alignments,...
>
> The plots are designed to be plotted with fountain pens and on A4 paper, but the plotter artist is free to do any interpretation they want, chose different colors, different paper techniques, the possibilities are endless! Depending on your configuration, the plot can take between 15 minutes to a few hours to execute.
>
> @greweb can ship plotted editions to NFT owners with a small extra cost via https://greweb.me/plots/nft 




## Physically plottable?

<img width="100%" src="/images/2022/shattered/video.gif">


Like in [my previous article](https://greweb.me/2021/11/plottable-storm), the generator produces "Plottable NFTs".

A Plottable NFT is, like regular art NFT, a token to a digital artwork that can be sold and resold on a second market – blockchain guarantees its unicity.

The **Plottable** NFT also gives a privilege to its owner: making or requesting a physical plot (with an artistic fee to cover costs, [see /plots/nft](https://greweb.me/plots/nft)). As a physical work can be executed multiple times, every physical piece remain unique: plotting is an analog process that will inevitably yield different results.

<img width="100%" src="/images/2021/11/plottablestorm/schema.png">

[https://greweb.me/plots/nft](https://greweb.me/plots/nft) sets my own "plotting services" terms but any other plotter artist is welcome to collaborate and contribute to offering to the community their own services under their terms and interpretation of the art – I would just ask to verify that the requester owns the NFT.

<img width="100%" src="/images/plots-promo/letters.jpeg">

> You can also be your own artist, buy a plotter, try it out! This is all designed to be open-source friendly and you can download the SVG yourself!

### Prototype, prototype, prototype

Many prototypes have been physically plotted in order to guarantee the viability of results: plottable often is a challenge when it comes to pen and paper. The density is very challenging to adjust: not enough lines and you miss the opportunity for great ink effects and saturation. Try with too much lines and your paper is melting.

<img width="100%" src="/images/2022/shattered/prototypes.jpg">

These prototypes helped to adjust the density and tweak the algorithms over the weeks of development.

<img width="100%" src="/images/2022/shattered/prototype1.jpg">
<img width="100%" src="/images/2022/shattered/prototype3.jpg">
<img width="50%" src="/images/2022/shattered/prototype2.jpg"><img width="50%" src="/images/2022/shattered/prototype5.jpg">
<img width="100%" src="/images/2022/shattered/prototype4.jpg">


## How does the generator work

The generator works in a few steps:
- Step 1 implements **the shattering** and outputs polygons.
- Step 2 implements **the filling**: the polygons are filled with various techniques and colors.
- Step 3 implements **post-processing effects**. Not only a SVG is generated, but it is also used in a WebGL shaders texture to simulate ink and paper effects.

## Step 1: the shattering

The "shattering" is implemented with a recursive function that, given a polygon, randomly cut it in half and apply the same recursion on each part. The cut happens in many different ways. For instance, there is a chance for the "cut" to be aligned with the polygon. The recursion can also randomly stop, which can sometimes keep great parts intact. There is even a very small chance (~0.3%) to not obtain a cut at all and have the original polygon preserved. Parts are usually split near their center and the 2 parts that result from the cut can diverge from each other – this simulates some kind of "pushback" resulting of the shattering.

### 'Shape' feature

The main polygon used before the shattering occurs can vary from a square to a circle, with rare cases of triangles, hexagons,...

Square remains the most common shape to have.

<img width="50%" src="/images/2022/shattered/examples/shape-square.jpg"><img width="50%" src="/images/2022/shattered/examples/shape-circle.jpg"><img width="50%" src="/images/2022/shattered/examples/shape-hexagon.jpg"><img width="50%" src="/images/2022/shattered/examples/shape-pentagon.jpg">

### 'Parts' feature

This feature categorizes the number of polygon parts that result from the shattering. It can vary from one to thousands.

<img width="100%" src="/images/2022/shattered/examples/variety3.jpg">


### 'Pushback' feature

This feature expresses how intense the Pushback is for a given piece – effect that shifts parts away from each other. 

<img width="100%" src="/images/2022/shattered/examples/pushback-high.jpg">

It can sometimes not exist at all which make the polygon preserving its general shape and only showing subdivisions:

<img width="100%" src="/images/2022/shattered/examples/pushback-none.jpg">

### 'Alignment' feature

The alignment represents how perpendicular the parts are organized altogether.

This has no alignment:

<img width="50%" src="/images/2022/shattered/examples/alignment-none.jpg">

These have the max alignment:

<img width="50%" src="/images/2022/shattered/examples/alignment-max.jpg"><img width="50%" src="/images/2022/shattered/examples/alignment-max-2.jpg">

### 'Destructed' feature

'Destructed' is a rare feature that expresses that part of the polygons has been destructed. This sometimes happens when the shattered parts are pushbacked out of boundaries.

<img width="50%" src="/images/2022/shattered/examples/destructed-1.jpg"><img width="50%" src="/images/2022/shattered/examples/destructed-2.jpg"><img width="50%" src="/images/2022/shattered/examples/destructed-3.jpg"><img width="50%" src="/images/2022/shattered/examples/destructed-4.jpg">

### 'Distribution' feature

'Distribution' feature expresses the area balance between parts. Here are some examples:

**"One Major"** (2 examples side by side)

<img width="50%" src="/images/2022/shattered/examples/distribution-onemajor-2.jpg"><img width="50%" src="/images/2022/shattered/examples/distribution-onemajor.jpg">

**"Two Main"** (2 examples side by side)

<img width="50%" src="/images/2022/shattered/examples/distribution-twomainparts-2.jpg"><img width="50%" src="/images/2022/shattered/examples/distribution-twomainparts.jpg">

**"Small Parts"** (2 examples side by side)

<img width="50%" src="/images/2022/shattered/examples/distribution-small-parts-2.jpg"><img width="50%" src="/images/2022/shattered/examples/distribution-small-parts-3.jpg">

## Step 2: the filling

each polygon resulting from the shattering is individually filled with various techniques. That said, the shattering algorithm has already decided how each polygon is colored and filled. There is a higher chance that related parts have same fill and color, but it can still happen that one has many different filling techniques on the same piece:

<img width="50%" src="/images/2022/shattered/examples/variety.jpg"><img width="50%" src="/images/2022/shattered/examples/variety2.jpg">

These are statistically the TOP 10 filling technique combination to most likely occur:

```
Statistics of feature 'Fill':
 Web, Spiral: 6.0%
 Web: 5.7%
 Web, Ping Pong: 3.3%
 Spiral, Web: 3.3%
 Ping Pong: 3.1%
 Scratches: 2.8%
 Hatch: 2.5%
 Ping Pong, Scratches: 2.3%
 Stippling: 2.3%
 Web, Spiral, Empty: 2.2%
```

The 66% remaining is going to many different combinations of one of the 8 different filling technique that can occur: **Empty, Spiral, Web, Ping Pong, Scratches, Hatch, Stippling, Zigzag** which I'm going to detail now:

### Fill = Empty

There is a first, rare filling technique that consists of NOT filling! but simply stroking the polygon. It is mostly used on small polygons and used in combination with another filling technique.

<img width="100%" src="/images/2022/shattered/examples/fill-empty.jpg">


### Fill = Spiral

Spiral is the most complex algorithm of the generator and can take up to a few seconds to run in JavaScript. It works by connecting randomly sampled dots by rotating the lines, each iteration scans for a point making the smallest angle turn, this creates a spiral that statistically converge to the center.

<img width="50%" src="/images/2022/shattered/examples/fill-spiral.jpg"><img width="50%" src="/images/2022/shattered/examples/fill-spiral-3.jpg">

Due to the complexity of the algorithm, I have chosen to bail out some cases to fallback to "Web" filling technique which is why you most likely never get a "Spiral only" filling (it can still happen ~0.4%). 


### Fill = Web

The web is, after spiral, the second most popular filling technique to happen but is the most likely technique to happen as "standalone" (without combination with another filling technique)

<img width="50%" src="/images/2022/shattered/examples/fill-web.jpg"><img width="50%" src="/images/2022/shattered/examples/fill-web-3.jpg">

One of the easter eggs of this Fill technique is that it will sometimes also have circles hole that the algorithm will try to avoid:

<img width="100%" src="/images/2022/shattered/examples/fill-web-2.jpg">

The algorithm samples a bunch of points along the polygon edge and connects dots randomly. The dots are connected with lines that maximize avoiding the circles and "traversing" the polygon rather than connecting lines that would be along an edge. Points are also samples randomly away from the polygon edge in order to avoid too much paper density problem – it creates an interesting border width effect.

### Fill = Ping Pong

Ping Pong filling is the idea to throw a ray that bounces on the polygon edge.

<img width="100%" src="/images/2022/shattered/examples/fill-pingpong.jpg">


The basic idea is to sample points along the polygon perimeter and then to do a permutation of indexes that can for instance looks like this: **0, 100, 200, 1, 101, 201, 2, 102, 202,...***.

Many optimizations were done on this to make the plot viable. Each line is traced by counting how much lines traversed at a given position and will stop as soon as it's too "crowded".

We can notice the algorithm at work on the previous example as we see some "gaps" near the intersection of some lines, but in practice, a plot will be generally fine as the ink will "bleed" a bit and fill these gaps.


### Fill = Hatch

the hatching technique traces parallel lines with a varying distance to produces a fabric pattern. The lines are chosen in a way that they are aligned to the longest segment that can exists inside the polygon.

<img width="50%" src="/images/2022/shattered/examples/fill-hatch.jpg"><img width="50%" src="/images/2022/shattered/examples/fill-hatching-3.jpg">


### Fill = Stippling

the stippling technique is implemented with many samples points from which a small line stroke is done. The line stroke segment, which is one millimeter long, is oriented following a simple field determined with the center of the polygon: `atan2(cx - p[0], cy - p[1])`

<img width="50%" src="/images/2022/shattered/examples/fill-stippling.jpg"><img width="50%" src="/images/2022/shattered/examples/fill-stippling-2.jpg">


### Fill = Scratches

<img width="100%" src="/images/2022/shattered/examples/fill-scratches.jpg">

Scratches are sorting randomly samples points on two perpendicular axis that follow the general polygon direction.

### Fill = Zigzag

<img width="50%" src="/images/2022/shattered/examples/fill-zigzag.jpg"><img width="50%" src="/images/2022/shattered/examples/fill-zigzag-2.jpg">

Zigzag has a similar idea as in Scratches except it only traces line on one axis and will only sample points on the edge.

## Step 3: post-processed effects

To give more life to the digital shape, I have added some paper grain effects as well as a lighting effect that grows from the center.

It is important to note that I actually generate 2 SVGs:
- one dedicated for the WebGL shaders where I use #0FF, #F0F, #FF0 colors and addition mode to be able to tell what even ink there is at a position. It allows me to implement some sort of ink simulation (those which remains minimal, but using opacity to express the saturation of an ink and each color defines 2 colors on each it derives too – for instance the yellow of Diamine Amber is diverging to orange tones)
- a second SVG is the downloadable SVG that tries to approach as much as possible the ink color and have layers ready for the plotter. Note that you can directly drag&drop (or right-click) from the digital canvas itself (thanks to a hidden `<img>` in the DOM)

## Palette

The art pieces are picking colors among a palette of 9 curated inks from Diamine that looks like this:

<img width="100%" src="/images/2022/shattered/inks.jpg">

They are sorted from common to relatively rarer cases.

- Black
- Poppy Red
- Turquoise
- Amazing Amethyst
- Indigo
- Hope Pink
- Amber
- Pumpkin
- Aurora Borealis

The most common case is to obtain a plot that will only have one ink chosen, but the plot can go up to having 3 different colors. They are split into different layers.

<img width="50%" src="/images/2022/shattered/examples/colors-2.jpg"><img width="50%" src="/images/2022/shattered/examples/colors-3.jpg">


## Artistic challenges and choices

To wrap up, it took me quite a lot of iterations to reach decision on many aspects and tweak what would be my final pieces. In generative art and especially when you reach a high variety of results it is really hard to guarantee one given output is satisfying. This is especially true in my case that involve many level of recursion which makes it very hard to control the outcome. The wider your generation is, more likely you will get non interesting results or edge cases you do not prefer to happen. The boundaries of the generation have to be well controlled in order to avoid the "bad cases".

**Total rewrite of my tech stack**. Technically speaking, this generator was a total rework of my stack, which is in Rust, back into pure JavaScript. As the code is on-chain, it needs to be very well optimized in term of bytes and I used many techniques from back of my JS1K / JS13K days! I compressed my GLSL shader code as well as the JavaScript code, I use only tuples (arrays) to represent my data so they do not have the verbosity of JS objects, etc...

**curating away the bad cases**. The way I generally approached the curation in my generator is to curate away the cases I didn't want rather than explicitly curating the cases I want! Typically, one algorithm will control the quality of the output and will be retrying the result until it satisfies the criterias. One example is I have to exclude any "empty result" to happen. I also explicitely wanted to bail out a result containing only one cut (2 polygons).


**Brace for impact**. embracing collisions and allowing some shapes to intersect was part of the "glitch" I wanted to keep. It can be interesting to have a mix of inks that occur on these intersections. This is a rare effect.

**recursion depth**. It took me quite a lot of shattering iteration to decide on the maximum number of recursion I would do as well as it's rarity. At the end, I've chose to make the "low number of parts" rarer than having a very exploded shattered case, because it emphasis on what the piece is about. Pieces that are intacted or only cut in a few parts are still very interesting to have and should actually be quite scarced.

**shapes rarity & filling consistency**. The way the shape are filled are not always decided randomly and many logic bail out from cases I didn't want.


<img width="100%" src="/images/2022/shattered/thumbnail.jpg">

Shattered is a NFT plottable generator that visualizes the explosion of polygons (usually squares) into parts that are rendered with different filling techniques and suggested inks. There are various rarity elements, like the shape, filling method, inks...

Shattered, a plottable generator on plottables.io

This fourth article (in a series of 7 articles) reveals the technique used to render the Nano swivel.

<video muted loop autoplay controls src="/images/2022/gnsp/361.mp4" width="50%" style="float:left; margin-right: 40px; margin-bottom:20px"></video>

**Timeline:**

- [article 1: GNSP – the concept](/2021/12/gnsp)
- [article 2: the 3D distance to a Nano S+](/2021/12/gnsp-raymarching)
- [article 3: the nano screen](/2022/02/gnsp-nanoscreen)
- [**article 4: the swivel**](/2022/02/gnsp-swivel)
- article 5: the background
- article 6: the video generation
- article 7: the final drop
- (?March) public mint

**The collection is browsable on https://greweb.me/gnsp**

**OpenSea: https://opensea.io/collection/gnsp**

 

This is very similar to the "nano screen" in that we will use a Canvas 2D as a texture to the GLSL shader and it will be projected on the swivel surface.

## The Canvas 2D generative swivel code

A canvas 2D of 1200 x 400 pixels is used to draw the swivel engraved texture. We use it to possibly display a text and draw some "plotted lines".

```js
async function metal(word, swivelPlotted) {
 const w = 1200;
 const h = 400;
 const canvas = document.createElement("canvas");
 canvas.width = w;
 canvas.height = h;
 const ctx = canvas.getContext("2d");
 ctx.fillStyle = "#000";
 ctx.fillRect(0, 0, w, h);
 ctx.fillStyle = "#fff";
 let font = "Arial";
 // ...plot things...
 // ...draw text...
 return canvas;
}
```

Here is what the texture of #472 looks like:

<img src="/images/2022/gnsp/472-texture.png" width="100%" />

and here is the final result in the raymarched object:

<video muted loop autoplay controls src="/images/2022/gnsp/472.mp4" width="100%"></video>


### "plotted" lines

<video muted loop autoplay controls src="/images/2022/gnsp/461.mp4" width="100%"></video>

The swivel can sometimes be "laser plotted" which is a reference to the "plotting" work I've been doing last year. This "plotting" is a simple stacking of lines which create some mountains effect.

In the following code, `swivelPlotted` is defined when plotting is active and is an array of random values.

```js
if (swivelPlotted) {
 ctx.strokeStyle = "#fff";
 ctx.lineWidth = 3;
 const octaveCount = Math.floor(3 + 6 * swivelPlotted[4]);
 const perlin = generatePerlinNoise(w, h, {
 octaveCount,
 amplitude: swivelPlotted[3],
 persistence: 0.2,
 });
 let pad = [50, 20];
 let amp = 120 * mix(swivelPlotted[0], swivelPlotted[1], swivelPlotted[2]);
 let incr = Math.floor(3 + 50 * swivelPlotted[1]);
 if (incr < 15 || (octaveCount < 4 && amp > 40)) {
 ctx.fillStyle = "#000";
 font = "Arial Black";
 }
 let heights = Array(w).fill(h);
 for (let y = h - pad[1]; y > pad[1] + amp; y -= incr) {
 ctx.beginPath();
 let up = true;
 for (let x = pad[0]; x < w - pad[0]; x++) {
 let dy = amp * perlin[y * w + x];
 let yy = y - dy;
 let m = heights[x];
 if (yy > m) {
 up = true;
 continue;
 }
 heights[x] = yy;
 if (up) {
 ctx.moveTo(x, yy);
 up = false;
 } else {
 ctx.lineTo(x, yy);
 }
 }
 ctx.stroke();
 }
}
```


### text

As shown at the beginning, we can also simply have a text on the swivel. Sometimes it is combined with the plotting effect.

<video muted loop autoplay controls src="/images/2022/gnsp/322.mp4" width="100%"></video>

```js
if (word) {
 ctx.textAlign = "center";
 ctx.textBaseline = "middle";
 const lines = word.split("\n");
 const sz = Math.floor(
 20 + 1200 / (3 + Math.max(...lines.map((l) => l.length)))
 );
 ctx.font = sz + "px " + font;
 lines.forEach((line, i) => // multi line
 ctx.fillText(
 line,
 w / 2,
 Math.round(h / 2 + 1.2 * sz * (i + 0.5 - lines.length / 2))
 )
 );
}
```


### sticker text

We can also use emoji instead of text.

<video muted loop autoplay controls src="/images/2022/gnsp/365.mp4" width="100%"></video>

## Raymarching shader integration

The swivel metal texture is rendered using a brownian noise. (like explained in https://thebookofshaders.com/13/)

Contextually to the raymarching, we have the local coordinate of the swivel (including its rotation), which allows us to do a texture lookup on the swivel text texture. All of this information (noise and texture) is encoded in the material value (a float). It is possible to encode it on one value like this because it's a grayscale value.

```glsl
noiseMetal = fbm(vec2(40.0, 1000.) * p.xy);
vec2 coord = fract(vec2(1.0, -3.0) * p.xy + vec2(0.5));
vec4 mt = texture2D(metalText, coord);
float t = mix(0., grayscale(mt.rgb),mt.a * step(p.z, 0.) * step(p.x, -0.5) * step(abs(p.y), 0.16));
float swivelM = 2.2 + t;
s = opU(s, HIT(swivel, swivelM));
```

## sticker emoji

<video muted loop autoplay controls src="/images/2022/gnsp/321.mp4" width="100%"></video>

For the sticker that appear on the swivel, we add to the distance a disc and we use a side effect `vec3 sticker_color` variable that is later used in the `shade` function. The position of the sticker is randomly placed.

```glsl
${
 !opts.sticker
 ? ""
 : `
vec2 q = p.xy + vec2(${opts.stickerPosX.toFixed(2)}, ${opts.stickerPosY.toFixed(2)});
float sticker_size = 0.15;
float sticker_border = 0.01;
coord = fract(vec2(.5,-.5) * q / sticker_size - 0.5);
vec4 v = texture2D(stickerText, coord);
sticker_color = mix(vec3(1.), v.rgb, v.a);
float l = length(q.xy)-sticker_size;
s = opU(s, HIT(max(
 abs(p.z + 0.13)-0.005,
 l-sticker_border
), 4.2 - step(0.0, l)));
`
}
```

This fourth article reveals the technique used to render the Nano swivel.

GNSP – the swivel rendering

This third article (in a series of 7 articles) reveals the technique used to render the screen display itself.

<video muted loop autoplay controls src="/images/2021/12/gnsp/419.mp4" width="50%" style="float:left; margin-right: 40px; margin-bottom:20px"></video>

**Timeline:**

- [article 1: GNSP – the concept](/2021/12/gnsp)
- [article 2: the 3D distance to a Nano S+](/2021/12/gnsp-raymarching)
- [**article 3: the nano screen**](/2022/02/gnsp-nanoscreen)
- [article 4: the swivel](/2022/02/gnsp-swivel)
- article 5: the background
- article 6: the video generation
- article 7: the final drop
- (?March) public mint

**The collection is browsable on https://greweb.me/gnsp**

**OpenSea: https://opensea.io/collection/gnsp**

 

The screen, displays the unique BIP39 word and can sometimes have an effect or an animation. In the NFT metadata, they are expressed on the "Screen" feature, and here is the distribution:

```
 <not defined>: 1527 = 74.6%
 scrolling: 251 = 12.3%
 blinking: 136 = 6.6%
 negative: 81 = 4.0%
 complex: 25 = 1.2%
 negative and scrolling: 11 = 0.5%
 half-negative: 8 = 0.4%
 negative and blinking: 7 = 0.3%
 half-negative and blinking: 2 = 0.1%
```

This means 75% of the time you will only get the text displayed statically but in other case you have various effects implemented.

## Step 1: a Canvas2D texture is used for the word text

a 128 by 64 Canvas 2D texture is generated – this is the actual resolution in pixels on the actual device.

```js
function screen(word) {
 const w = 128; const h = 64;
 const canvas = document.createElement("canvas");
 canvas.width = w; canvas.height = h;
 const ctx = canvas.getContext("2d");
 ctx.fillStyle = "#fff";
 ctx.fillRect(0, 0, w, h);
 ctx.textAlign = "center";
 ctx.textBaseline = "middle";
 ctx.font =
 (navigator.userAgent.includes("Mac OS")
 ? "" : "bold ") + "22px Arial";
 ctx.fillStyle = "#000";
 ctx.fillText(word, w / 2, h / 2);
 return canvas;
}
```

> Ok, there is a funny trick here on an annoying fact: depending on your OS you will have a different font weight, as Mac devices tend to have bolder font, I only used non bold in other cases. 




Apart this trick, there are nothing fancy here: we are just writing the word in the Canvas. So there are actually no animation logic at all here: the animations (text motion / balls motion in negative) are all implemented in the GLSL shader.


## Step 2: the text texture is processed in GLSL

I'm using `regl` library helper and I need to inject the text canvas as a `uniform sampler2D text` parameter:

```js
uniforms: {
 text: regl.texture({ data: screenCanvas, flipY: true }),
```

After this, the main trick is to project the 2D Texture of the word onto the 3D raymarched object, and in my case, I simply project it along the Z-axis, globally. Indeed it would need to be applied "locally" if the Nano was actually moving or rotating but I didn't need that so we can simply stick to a global mapping.

So basically:

```glsl
vec2 coord = someOffset + someMultiplier * p.xy;
float m = step(texture2D(text, coord).x, 0.5);
```

makes `m` being a value of either 0.0 or 1.0 based on if the pixel is on or off.

Now, it also need to be pixelated, so we need to round the coordinate:

```glsl
vec2 coord = someOffset + someMultiplier * p.xy;
vec2 a = coord * vec2(128.,64.);
coord = floor(a) / vec2(128.,64.);
float m = step(texture2D(text, coord).x, 0.5);
```

Then we add a `edge` effect. This `edge` represents the distance to the edge of a pixel.

```glsl
vec2 coord = someOffset + someMultiplier * p.xy;
vec2 a = coord * vec2(128.,64.);
float edge = min(fract(a.x), fract(a.y));
coord = floor(a) / vec2(128.,64.);
float m = step(texture2D(text, coord).x, 0.5)
 * (1.0 - 0.5 * step(edge, 0.25)); // changes the pixel color
```

This will accentuate even more the pixel effect as we can see in this zoom:

<img src="/images/2022/gnsp/pixel.png" width="100%"/>

Ok, to precise exactly what `coord` is, here is the actual code:

```glsl
vec2 coord = fract(fract(vec2(-0.2, 0.5) + vec2(3.6) * p.xy / vec2(-2.25, 1.0)) + ${
 opts.scrollingScreen ? "vec2(0.5+floor(time*15.0)/15.0, 0.)" : "0.0"
});
```

You can note that:
- multiply by `vec2(-2.25, 1.0)` to stretch a bit the font.
- in case of `scrollingScreen` an offset by `time` is applied on x coordinate, and using some floor function so it does it by "increments" (pixel scroll)
- we apply a whole `fract` function (which is a `% 1.0`) to keep the coord in a 0.0 - 1.0 range and actually make it repeat.

Now, to create the negative effect, what we simply need to do is to either chose `m` or `1.0 - m` as a pixel value. 


This is implementing the simple idea to have half of the screen cut into two negative parts:

```glsl
${opts.halfnegativeScreen ? "m=mix(m,1.-m,step(coord.y, 0.5));" : ""}
```

And this implements the possibly blinking effect:

```glsl
${opts.blinkingScreen ? "m*=step(fract(2.*time),0.5);" : ""}
```

Now for the more complex animation, the effect varies at a given position on x,y, so we will give it to a function to determine if we need to swap the color. The animation we can see in the video above is a reference to one of my last year creation: [/shaderday/65](/shaderday/65).

```glsl
${
 !opts.screenAnimation
 ? ""
 : `
 float sz = ${(
 1 -
 opts.screenAnimation[3] * opts.screenAnimation[3]
 ).toFixed(2)};
 coord -= 0.5;
 coord *= vec2(2.,1.) * ${(
 1 -
 opts.screenAnimation[3] * opts.screenAnimation[3]
 ).toFixed(2)};
 coord += 0.5;
 ${
 opts.screenAnimation[1] < 0.2
 ? `coord.y${opts.screenAnimation[1] < 0.1 ? "+" : "-"}=time;`
 : ""
 }
 ${opts.screenAnimation[2] < 0.2 ? `coord.x-=time;` : ""}
 coord=fract(coord);
 m=mix(m,1.-m,step(shape(coord,2.*PI*time), 0.5));
 `
}
```


`screenAnimation` is a array of random values and with that, we can yield variation of the initial `shape` animation which is implemented relatively like in my [/shaderday/65](/shaderday/65):

```glsl
float shape (vec2 p, float t) {
 float smoothing = 0.15;
 p -= 0.5;
 vec2 q = p;
 pR(p, t + cos(${Math.round(5 * opts.screenAnimation[0] - 2)}. * t));
 vec2 dist = vec2(0.0);
 float crop = 99.0;
 float s = 99.0;;
 s = fOpUnionRound(q.y, s, smoothing);
dist = vec2(0.31, 0.0);
float radius = 0.11;
s = fOpUnionRound(s, length(p + dist) - radius, smoothing);
crop = fOpUnionRound(crop, length(p - dist) - radius, smoothing);
 s = fOpDifferenceRound(s, crop, smoothing);
 return smoothstep(0.0, 1.0 / min(resolution.x, resolution.y), s);
}
```

Finally, we map the "m" value to actual colors, and in our case it's basically black and white. Note the usage of `negativeScreen` flag:

```glsl
mix(
 vec3(0.01),
 vec3(1.0),
 ${opts.negativeScreen ? "1.-" : ""}m
)
```

> This GLSL code is templated in JavaScript as you may notice, it's a trick to make the GLSL compile even faster to avoid having runtime ifs.

**That's it folks! There are nothing more to say about the screen rendering of GNSP.**

This third article reveals the technique used to render the screen display itself.

Explore plots collection

Highlighted Shader

Recent blog posts