How Generative Glasses were made

I divided the content into topics:

• The beginnings, how this project developed, what was my motivation
• What do I think about what makes such generative art good, or what basic requirements I wanted to meet
• About glasses as an object
• The framework, system environment, softwares
• How this project is structured in terms of layers
• Cameras, and camera moving
• Compositions and the animation
• How it works and the controller usage
• AR view
• Random parts
• Raffle

The beginnings, how this project developed, what was my motivation

In December 2021, we were in the City Park in Budapest with my friend. We make time every two weeks to discuss things with each other. It was at this time that I decided that I wanted to complete my artistic side in addition to programming. I always admired those artists who have "daily content", and I thought a lot about what I wanted to do. I knew it would be something that involved both coding and visual arts. At that time, generative art meant fractals to me, and I admit that I didn't really like this way. That's why I programmed paintings and artworks - not generatively, but on the contrary, each brush stroke separately and I processed my old oil paintings in pure css or individually coded 3D, but after these were completed, I didn't really feel like I had found the path I wanted to follow. There was nothing enjoyable about it, it was very didactic work, and the other reason was that there was no social environment where it would be appreciated. Most of my friends don't know how to code, so they saw a painting made in pure css as a slightly lame graphic rather than a work completed with a lot of work.

That evening, we talked about the fact that many of artist played a major role in the arts of the 1920s, who do not receive enough attention either in education or in art narratives in our environment, and how we like Constructivism and the Bauhaus movement. Encouraged by this, I began to process the works of the great constructivist predecessors: I created the works of Moholy, Van Doesburg, and Mondrian in 3D space. This system was the earlier version of my current system, it was able to generate unique compositions that resembled the works of the great predecessors. I found this path myself, I had never heard that this line of generative art existed before.

After that, in the summer of 2022, on another such creative evening, we came up with the idea to create an object with my experience of constructivist works. Sunglasses were chosen because this item is known to everyone on Earth, it is really popular. The other reason is that it is a wearable object, which has many advantages and possibilities. That's when I started making three unique pieces in my already existing system. This lasted until about November, when the 3 sunglasses were finished.

I met an other friend Cloudnoise around this time first. Not long before that he had a successful project on fxhash. When I found out what this platform was, I was very happy because I finally found a medium where my work is appreciated. In addition, I realized that I had a project almost ready to publishing on fxhash, that was my "constructivist artwork generating system", what I mentoined before. So I did not hesitate to release “The Constructions” series. I was very happy with the many positive responses and the fact that several artists I appreciated collected a piece. I knew even then that the glasses would one day become a generative series. After that, I started programming Generative Glasses in November 2022.

::tezos-storage-pointer[]{contract="KT1BJC12dG17CVvPKJ1VYaNnaT5mzfnUTwXv" path="ledger::20783" data_spec="FX-GEN-DATA-002"}

What do I think about what makes such generative art good, or what basic requirements I wanted to meet

I think the most important things that make such a series successful are the following:

• The most important thing is that it has a part generated by an algorithm that can be easily recognized by the eye, which the viewer can see, but cannot tell at first how it was made. More simply: it makes the viewer think, "How the hell did he do that?"
• The output should be of such quality that I also would display it on my wall
• It's a requirement for myself that I don't use image layers, only code. I am a programmer, this is my strength, so the minimum for me is to solve everything with program code
• In addition to the three important things, I also think that it should be somewhat artistic and abstract.
• Enjoy the process while creating
• Promotion

About glasses as an object

• Adapting to the proportions and dimensions of real glasses
• Adapting to the construction of the object so that it has all the elements that the glasses have

I searched the net for the parts and dimensions of the glasses. Then I measured my own glasses. Based on these, I have roughly developed the rules and proportions:

• Glasses have temples. The length of the temples is 130-140 mm
• The temples “tips” are at the end of the temples of the glasses
• The temples of the glasses are connected to the "End piece", this connects the lens and the temples,
• The width of the lenses is 45-55 mm
• The "bridge" is 15-20 mm between the two lenses
• Roughly, the width and depth of the glasses are 135x150mm
• Lenses can be framed or frameless
• Lenses have different thickness and dimension

I came up with three reference points. One is above the ear where the temples of the glasses touch the head. The other point is the end of the temple, from where the end piece starts. And the third is on the bridge of the nose where the glasses rests. The program draws these points based on the given scales and then connects these points with generative parts. (I will write more about random things later).

The framework, system environment, software

I mentioned above that I am building a system that is abstract enough to serve several of my art projects. I have a website (carco.hu) that displays them. This website is operating with NodeJs on the server side. Both on the server side and on the client side rendering with ReactJs. I use GraphQl for API and MongoDB for databases. Of course, most of the part of the art app only runs on the client.

The art app builds and displays the artwork from a json object. This json object is either saved in the database, or if it is not saved, the program generates such a data set. If there is a hash, then from it, if there is not, then simply with math random. This is how I can list and present my artworks on my site, whether generative or individually coded

I use ThreeJs for 3D and native Html5 Canvas for 2D. I used TensorFlow for the augmented reality view. I used TweenJs for the animation. The default font of the system is Roboto - Google font. I use two other fonts for the Callout notations of Generative Glasses: Permanent Marker, Kalam - Google fonts

The framework saves the animation on the server side with Puppeteer. The images are also saved with Puppeteer, but the image data from canvas is collected on the client side by the handless browser and then sent back to the Puppeteer api on the server, which saves the image. Better quality can be achieved this way. Unfortunately, there is still a 4k limit, that is what works safely. A larger size than this could only be saved if the canvas was cut into pieces.

How this project is structured in terms of layers

At the very bottom, there is a canvas tag on which I draw in 2D. There is an array in the json object that defines what drawing functions the program code should run and contains unique parameters for them. Iterates through the array and draws at every step on the same canvas. I draw like this the

• Background color,
• Then comes the canvas texture,
• The border
• The title box on product design view
• With all its contents, signature, date,
• And even the marker background

Above it is a 3D canvas, which includes all 3D elements. The position, size and rotation angle, materials and more properties (eg.: shadow) of the 3D elements are saved in the json object, the system reads it from here and builds the composition In this 3d space also there are editing lines and callout notations. These can be turned on and off separately for each camera, but the user can also disable them completely. (More about the controller below).

When saving the image, all the layers had to be merged and the blending options had to be written.

Cameras, and camera moving

There are a total of 4 camera views, which can be displayed side by side on a split screen. For this project, in the product design view, I use 2 other camera views in addition to the main camera, with the blending set to grayscale. Each camera view has its own background layer and its own effect layer. The position and many other parameters of these camera views can be adjusted on the json object. For example, the view of the camera or the marker background is also different.

These must be taken into account separately when saving and placed on the canvas as they are in the html content.

The main camera can be moved with the mouse or touch. It also moves during the animation. The other cameras follow according to the spherical parameters

Compositions and the animation

The json object can contain several compositions that can be completely different from each other. But if it has the same elements in consecutive compositions, it can animate from one to another. With this, I achieved the effect that from the "scattered" abstract view, the image is assembled into a pair of glasses during the animation. When switching between non-consecutive compositions, elements goes out of the view and new elements arrive.

So the system handles different compositions. First, I generate a basic composition, then I duplicate more from it and modify the duplicates. This is how the entire animation is created:

• There is an abstract view where the parts of the glasses are scattered
• There is a front-left view
• Front-right view
• Top view
• Product design view that converts to split screen
• Front view where the object falls apart and starts from the abstract view again

Each composition has its own camera position, target, and other parameters. When switching composition the program animates from one to the other. For this necessary animating the camera position the camera target and camera zoom.

How it works and the controller usage

A controller ui has been created for many user adjustable settings. With this, user can control with mouse or touch action every feature that other generative softwares usually operate just from the keyboard. It bothered me that I couldn't use these softwares properly on mobile, and I thought it was important to innovate within generative art if I had the opportunity.

First, one of the 6 compositions comes in and the animation starts. The system randomly determines which composition should be the first in the line. This will also be the saved image that the fxhash system creates.

If you don't click or touch anything, the animation will loop continuously. If you click into the area anywhere, the controller will appear and the animation will stop. Until you get to the next composition and the animation stops, the pause button flashes until now you can't press anything, all buttons are disabled. If the animation has stopped, the buttons are enabled again, and you can move the camera in 3D space by dragging. The controls have left and right arrows that can be used to step between compositions. The animation restarts with the play button.

There are also a few other buttons:

• There is a save button which is a floppy disk. A menu will then appear, offering to save images of different proportions, with the default aspect ratio generated by the program code at the top.
• There is a camera icon that restores the original camera view. It is worth pressing this before saving.

There are options that are not available for all configurations, they only appear if they are enabled in that composition:

• Switch split screen to main camera view, and back (4 squares icon)
• Shows and hide Editing lines (pair of compasses)
• Shows and hide Callout notations (pencil and ruler)
• Shows AR view and stop it (cube icon)

The keyboard controls also remained:

• Press “5” to save image to default aspect ratio
• Press “6” to save image to square aspect ratio
• Press “7” to save image to portrait aspect ratio
• Press “8” to save image to landscape aspect ratio
• Press “ArrowDown” for restores the original camera view
• Press “D” to switch to next composition
• Press “A” to switch to previous composition
• Press “S” to start animation
• Press “Spacebar” to switch to split screen (if it is available)
• Press “1” to hide/show Editing lines (if it is available)
• Press “2” to hide/show Callout notations (if it is available)
• Press “3” to hide/show AR view (if it is available)

AR view

If you have a camera on your device, you can try out how such glasses would suit you. This function is not available for all compositions, so if you cannot find the cube icon, tab to the next composition and click on the cube icon.

I created this function with the help of tensorflow face landmark detection software. It's not perfect, there are delays, but it's good enough to try out the glasses.

Random parts

First, I summarize these in points (the programming details in another article, if there is a need for it):

Generated parameters of the glasses:

• The reference points of the glasses and the main dimension based on them (1)
• Item type (sunglasses or glasses with transparent lens) (2)
• The thickness of the frame, and frame is translucent or not (3)
• The symmetry of the glasses (symmetrical or asymmetrical) (4)
• The material thickness of the glasses (5)
• Color scheme
• Temples height
• Geometry of the temples tips (6)
• Temples geometry (6)
• Geometry of the end pieces (6)
• Shape and transparency and the width, height and thickness of the lens (7)
• Bridge width and geometry of the bridge (6)

The rest are generative parts:

• The product no. based on the generated parameters of the glasses (8)
• Product created date: between November 2022 and March 2023 (9)
• Default aspect ratio for image saving
• Preview type - which composition should be first (Abstract view, Front-right, Front-left, Product design view)
• The color and transparency of the gray pixels of the canvas texture (10)
• "Carco" signature size, brush size, rotation angle (11)
• The brush size of the marker background, the size of the spaces of the strokes, curvature of brush strokes, the the amount of lead-in and lead-out, and the marker background should be horizontal or vertical (12)
• Abstract composition (the position and angle of rotation of the pieces of the disintegrated pair of glasses) (13)
• Length and transparency of editing lines (14)
• Callout notation arrows (arrow base, arrow head, twisting of line) (15)
• The font of the callout notation texts. (16)
• Element-by-element velocity in the animation.

Raffle

If you want to participate in the raffle, like and retweet my featured post on my twitter and leave a comment with your hash. If you take a screenshot or a video of yourself trying on a pair of glasses in the AR view, you'll have a better chance of winning! I look forward to the funny pictures to make my day! :)

The minting for Generative Glasses will open on April 4, 2023 at 4 p.m CET

::tezos-storage-pointer[]{contract="KT1BJC12dG17CVvPKJ1VYaNnaT5mzfnUTwXv" path="ledger::25990" data_spec="FX-GEN-DATA-002"}

Thank you for your attention! Thanks for the support! Thanks for the opportunity fxhash and genart community! I hope I was able to contribute to generative art with my work!

@tz1S2eKVPGDvA1rS2NCpor5mzbw3HDfvea3S - Carco - Károly Bori 2023. Budapest

carco.hu | twitter | instagram