Art from code (2024)

Note: this writing has not been finished yet, and will be updated in the next week

'Art From Code' demonstrates how art can emerge from code by drawing the actual source code on the screen as a starting point for a visual evolving artwork. You can watch this experience in your web browser, for example on this link. The code that will appear on the screen is the code that is executed by your browser to generate the artwork.

There is a lot to talk about, so this writing contains the following chapters:

• What is in the art?
• What is in the code?
• Long form generative art
• Display notes
• Render options
• Release details

Each image on this page will have a link underneath it where that image can be re generated from the code. A frame number between brackets will indicate the moment in the animation where the screenshot is taken. For example, the image on top of this page is from mint #10 (210). These links use url parameters to enforce a specific canvas dimension, which will be explained in more detail later.

What is in the art?

Before discussing the technicalities of the code, let's start with describing the visuals that appear on the screen.

Drawing the code

The code will always fill the entire screen, regardless of the screen dimensions. When the number of rows and columns are calculated, additional empty space is added, just to make sure the latest line of code reaches the end of the bottom row. This is done to prevent the bottom row from being almost empty.

This means that the aspect ratio has a lot of influence on this piece as it determines how many text characters can fit on a single line.

After the code is printed on the screen, each font character gets a background color and an optional cell outline color (which is a border around the font character). Depending on the color choices, this coloring can already produce visually pleasing artwork that just displays the code on a digitally painted canvas.

The aspect ratio can influence the amount of spaces to be added (to fill the bottom row), which means there can be a different amount of text characters on different aspect ratios. You can check that the color assignment is equal in all scenarios, except that in some cases, there are more cells at the bottom of the canvas compared to another one.

Reflection

The main operation in 'art from code' is reflection over a straight line. This means that an (invisible) line will be determined, and one side of the canvas will be reflected over that line, and override the part it covers on the other side.

The figure above demonstrates the concept of reflecting over a line. When a line is determined, one side of the line will be chosen to stay unchanged, and the other side of the line will get a reflected image from the other side of the line. Note that in some cases, the reflected part will not entirely cover the other side. So it appears as a layer on top of the original image.

This operation is repeated many times in this artwork. The image below (mint 20 paused at frame 206) shows an example after several reflections. Some text is still readable, some text is mirrored and upside down, and some text is already obfuscated and hard to read.

You can also see how some parts of the image overlay a previous part. Several states remain visible, as a reflection does not erase parts of the canvas it does not cover.

A reflection line is generated in one of three different ways:

1. A random line from any point to a random point on the opposite side of the canvas
2. A line from a random point on a canvas side, passing through the center of the canvas.
3. A straight line, either horizontally or vertically

These operations are executed in batches of different length. So you could get 10 random reflections, followed by 18 circular reflections, followed by 8 repetitive reflections. By doing so in increasing steps, the operation described under 2) will generate a circular motion. And the operation described under 3) will generate a repetition in straight lines, going horizontally or vertically across the screen.

With every reflection, symmetry appears. Reflection of shapes on the screen can be a metaphor for reflecting on the use of computers or code for art. Can the code be the art? Can the code be part of the art? Is the code actually looking at itself in the mirror, and reflects on itself?

Repetition

Repetition represents one of the most powerful concepts of computing: using iteration to get things done that are tedious without a computer.

Emergence

A lot of different patterns can emerge from these reflection operations. These include circular mandelas, a face, and even scenes that look like bacteriae under a microscope.

Glitches

In any algorithmic system, the artist can change code or parameters in non-sensible ways, just to see what happens. For 'Art from code', I allowed a 'Glitch' variation on purpose to demonstrate this. Instead of reflecting the canvas over a line correctly, a 'mistake' is introduced on purpose. Just to show what else code can do. The glitch variation differs a single value from the regular version. A single x value will be swapped with a single y value in the code that calculates the reflection.

Another curiosity that might look like a glitch, is the thin line that sometimes remains after a reflection. This could have been solved (erased) by adjusting the code that handles the reflection (and the pixel values close to or at the reflection line). But it has been left in on purpose, as the line can introduce some interesting patterns, especially after a few more reflections.

What is in the code?

'Art from code' is not a showcase of beautifully written code. Indentation and newlines have been removed to let the code fill all parts of the screen equally. The code was also uploaded to the ethereum blockchain, which is expensive, which is also a reason to make the code as small as possible. I made it less than 10kb (uploaded in this transaction). The minification has been done manually and several parts have been kept descriptive on purpose. Viewers who look at the code can still find parts that make sense like save(), embed(), getCode(), nextFrame, MARGIN and BG_COLOR. It is also worth noting that when I make art in the web browser on a single page document, I am not necessarily following the web's best practices.

That said, there are several interesting and unique things happening in the code:

• A custom font that can draw all the needed text characters on the screen.
• The algorithm that modifies the canvas, which can theoretically go on for ever
• When saving the image as a png, the source code will also be embedded inside the image data. So the code can be retrieved from the image alone!
• Cellular Automata Rule 30 has been used as the 'pseudo random number generator', seeded by the token hash (which is the source of randomness).
• As a bonus, hitting 'r' in the live view, will show rule 30

These features are described in more detail in the sections below.

Custom Font

To draw the code on the screen I chose to use a custom font. This means I need to map every possible character to a set of paths. The letter 'l' could be a single line from one vertex to a second vertex. But other characters can consist of several paths. A percentage '%' has three paths, and two of them have to represent a circular shape, which can be approximated by 6 vertices.

I used a font that was designed by Greweb, I already liked the look of it, as it is just a minimal font, a bit raw. Just enough to communicate each character. I made a few adjustments, and added a bunch of letters myself (mostly the capital letters and characters like curly braces '{}').

On this link, you can see how he made it during a livestream.

I decided to make the data that holds the character info even smaller. Instead of using the digits 0-9 to represent places in the grid, I used more characters, so that each vertex coordinate, can be represented with a single character. In fact, I defined a specific set of 94 characters in the ASCII table, and encoded those with those same 94 characters. So in a sense, it is a self referential font.

One curiosity is that I needed two characters that I could not use to encode the font. This means that two data points in the font diagram could not be used in any letter. This is because I need two characters to split the encoded font string. One is to split each letter (this could be a comma, which would make sense for human readers), and within each letter, it should be clear how to determine one or more paths.

Long form generative art

'Art from code' is a long form generative art collection, which means that many different artworks can be generated from the same code. The source code includes an algorithm which is a set of instructions responsible for modifying the canvas and chosing the colors. The link above shows just one iteration from a collection that could theoretically exist of thousands of different artworks.

'Art from code' can generate a lot of unique variations in different ways. This will be explained in more detail below, but in short:

• a unique and different artwork will emerge from every unique starting seed (the token hash)
• when using a fixed starting seed, a different artwork can be rendered on every different screen aspect ratio (square, landscape, portrait and everything in between)
• The display notes describe an additional scenario where the work could render differently (depending on browser plugins and iframes)

Art from code does not have a single representation. It represents the sheer amount of variations an artist has to deal with when exploring algorithms. There is hardly ever a fixed and static end point, as there are so many parameters and color choices that can be tweaked endlessly.

And all of this starts with the code.

Release details

'Art from code' released on Art Blocks studio as an open edition for 0.015 eth per mint. Art from code is a long form collection, released on Art Blocks. An edition size of 10000 is chosen to make it an open edition. Minting an edition from 'Art from code' is without any pressure or time limit, and available for every one who finds it worth 0.015 eth. (~50 usd) The collection will be closed at some point in the future.

Render details

Render options (url parameters)

When downloading all frames, add ?saveAll=true&delay=500 to the url. You can choose a lower delay value (in milli seconds), but in some br frameCount=1 for fast font ?W=1080&H=720

Display notes

Different on every screen ratio.

The code that will be drawn on the screen can be different in certain circumstances. For example: certain browser plugins may inject some code on a web page before loading the html. In that case, that code is in fact visible in the artwork, and the artwork will render differently because there are more text characters on the screen.

---

Related links

• Project page on ArtBlocks where a unique mint can be made for 0.015 eth.