Hi everybody!

In this news feed I've told you a few times about a project I named Péguy. Well today I dedicate a complete article to it to present it to you in more detail but also to show you the new features I brought to it at the beginning of the winter.
It's not the priority project (right now it's TGCM Comics) but I needed a little break during the holidays and coding vector graphics and 3D, it's a little bit addictive like playing Lego. x)

Let's go then!

Péguy, what is it?

It is a procedural generator of patterns, graphic effects and other scenery elements to speed up the realization of my drawings for my comics.
Basically, I enter a few parameters, click on a button, and my program generates a more or less regular pattern on its own.
The first lines of code were written in 2018 and since then, this tool has been constantly being enriched and helping me to work faster on my comics. :D

This project is coded with web languages and generates vector patterns in the format SVG.

In the beginning it was just small scripts that had to be modified directly to change the parameters and run individually for each effect or pattern generated.

Not very user friendly, is it? :’D

This first version was used on episode 2 of Dragon Cat's Galaxia 1/2.

During 2019 I thought it would be more practical to gather all these scripts and integrate them into a graphical user interface. Since then, I have enriched it with new features and improved its ergonomics to save more and more time.

Here is a small sample of what can be produced with Péguy currently.

Graphic effects typical of manga and paving patterns in perspective or plated on a cylinder.
All these features were used on Tarkhan and Gonakin.

I plan to put this project online, but in order for it to be usable by others than me, I still need to fix a few ergonomy issues.
For the moment, to recover the rendering, you still need to open the browser debugger to find and copy the HTML node that contains the SVG.
In other words, if you don't know the HTML structure by heart, it's not practical. 8D

A 3D module!

The 2020 new feature is that I started to develop a 3D module. The idea, in the long run, is to be able to build my comics backgrounds, at least the architectural ones, a bit like a Lego game.

The interface is really still under development, a lot of things are missing, but basically it's going to look like this.

So there's no shortage of 3D modeling software, so why am I making one? What will make my project stand out from what already exists?

First, navigation around the 3D workspace. In short, the movement of the camera.
Well please excuse me, but in Blender, Maya, Sketchup and so on, to be able to frame according to your needs to get a rendering, it's just a pain in the ass!
So I developed a more practical camera navigation system depending on whether you're modeling an object or placing it in a map. The idea is to take inspiration from the map editors in some video games (like Age of Empire).

Secondly, I'm going to propose a small innovation. When you model an object in Blender or something else, it will always be frozen and if you use it several times in an environment, it will be strictly identical, which can be annoying for natural elements like trees for example. So I'm going to develop a kind of little "language" that will allow you to make an object customizable and incorporate random components. Thus, with a single definition for an object, we can obtain an infinite number of different instances, with random components for natural elements and variables such as the number of floors for a building.

I had already developed a prototype of this system many years ago in Java. I'm going to retrieve it and adapt it to Javascript.

And the last peculiarity will be in the proposed renderings. As this is about making comics (especially in black and white in my case), I'm developing a whole bunch of shaders to generate lines, screentones and other hatchings automatically with the possibility to use patterns generated in the existing vector module as textures! :D

What are shaders?

Well, you see the principle of post-production in cinema... (Editing, sound effects, various corrections, special effects... all the finishing work after shooting).
Well, shaders are about the same principle. They are programs executed just after the calculation of the 3D object as it should appear on the screen. They allow to apply patches, deformations, effects, filters... As long as you are not angry with mathematics, there is only limit to your imagination! :D

When you enter a normal vector in a color variable it gives funny results.

Yes! It's really with math that you can display all these things. :D
Now when you hear a smart guy tell you that math is cold, it's the opposite of art or incompatible with art... it's dry toast, you'll know it's ignorance. :p
Math is a tool just like the brush, it's all about knowing how to use it. :D

In truth, science is a representation of reality in the same way as a painting. It is photorealistic in the extreme, but it is nevertheless a human construction used to describe nature.
It remains an approximation of reality that continually escapes us and we try to fill in the margins of error over the centuries... Just like classical painting did.
But by the way? Aren't there a bunch of great painters who were also scholars, mathematicians? Yes, there are! Look hard! The Renaissance is a good breeding ground. x)

In short! Physics is a painting and mathematics is its brush.

But in painting, we don't only do figurative, not only realism, we can give free rein to our inspiration to stylize our representation of the world or make it abstract.
Well like any good brush, mathematics allows the same fantasy! All it takes is a little imagination for that.

Hold, for example, the good old Spirograph from our childhood. We all had one! Well, these pretty patterns drawn with the bic are nothing else than... parametric equations that make the students of math sup/math spe suffer. 8D
Even the famous celtic triskelion can be calculated from parametric equations.

Well, I digress, I digress, but let's get back to our shaders.
Since you can do whatever you want with it, I worked on typical manga effects. By combining the Dot Pattern Generator and the Hatch Generator but display them in white, I was able to simulate a scratch effect on screentones.

In the traditional way it is an effect that is obtained by scraping the screentones with a cutter or similar tool.

Péguy will therefore be able to calculate this effect alone on a 3D scene. :D

I extended this effect with a pattern calculated in SVG. So it will be possible to use the patterns created in the vector module as textures for the 3D module!
Here it is a pattern of dots distributed according to a Fibonacci spiral (I used a similar pattern in Tarkhan to make stone textures, very commonly used in manga).

Bump mapping

So this is where things get really interesting. We stay in the shaders but we're going to give an extra dimension to our rendering.
Basically, bump mapping consists in creating a bas-relief effect from a high map. And it gives this kind of result.

The defined object is always a simple cylinder (with 2 radii). It is the shaders that apply the pixel shift and recalculate the lighting thanks to the high map that looks like this.

This texture has also been calculated automatically in SVG. Thus we can dynamically set the number of bricks.

Well, this bas-relief story is very nice, but here we have a relatively realistic lighting, and we would like it to look like a drawing.
So by applying a threshold to have an area lit in white, a second threshold to have shadow areas in black, by applying the screentone pattern to the rest and by adding the hatching that simulates the scraped screentone, here is the result!

It's like a manga from the 80's! :D

I tested this rendering with other screentone patterns: Fibonnacci spiral dots, parallel lines or lines that follow the shape of the object.

Now we know what Péguy can do.
I think I can enrich this rendering a bit more with the shaders but the next time I work on this project the biggest part of the job will be to create what we call primitives, basic geometric objects.
After that I can start assembling them.

The concept of drawing while coding is so much fun that I'm starting to think about trying to make complete illustrations like this or making the backgrounds for some comic book projects only with Péguy just for the artistic process.
Finding tricks to generate organic objects, especially plants should be fun too.

That's all for today.

Next time we'll talk about drawing!
Have a nice week-end and see you soon! :D

Suisei