![Our first work produced with Text2Code](ipfs://QmPFNc4eUDnc2VLADRyxn6szx8u76q2cPC5gNcDsjEyU5v)

# Who is CoDexter?

CoDexter is the collaborative efforts of @tz1bafXvnKt87p1yXPV3vvVpe6gyD7BCdjyh& @BrainArtLabs using OpenAI's GPT-3 Codex model. The premise of CoDexter is to solely use AI written code to create generative artworks. These are made using a Text2Code workflow in which prompts are written in English and JavaScript code is generated from those prompts.

As shown above the first experiment ever involved a random amount of letters of various color spread across the page. The original prompt is lost however it was more than likely something along the lines of "place random letters of random colors randomly on the canvas."

::video[]{src="ipfs://QmXdZuH8jVGuVaWNRDrCoX4MtjEd2hpuby5X852TnpMgBG"}

John: I always love finding a way to make a game in a program. I wanted to see if I could get a little more fun out of the JavaScript code the AI was writing. The idea was to create a small automated game where a gray ball tries to push out all the colored squares from outside of the box. There would additionally be smaller green and blue circles.

John: If the gray ball collected a green circle it would speed up. I moved on before I made the blue balls do anything.

::video[]{src="ipfs://QmW2kSTXgPr66U1pn9dPaETqmJ1pevvnoBvaaN48kDrCpf"}

John: The race game was a follow up game test. In this game 2-16 racer squares would square off and race to the finish line. The first color that got there all the other racers would turn that color. I could not get racer names to work properly at the time but wanted a generated name to appear for the winner like "Chazz Won".

John: These games were fun to make and we may return back to them.

![](ipfs://QmXg6gWx3T4Ab3ZKU8kxGEWsumfkcuh8hibvcFq3Zufd95)

Returning back to the potentials of generative art this work was quickly drafted up using 1-3 prompts. Was a minimalist work that reminded us of some of the @tz1LBwyJMRkH4tcG19KwYzAW7fLYbjFmWdWymints. We can't find the code for it right now.

Next up a test with lines. The background is always black with loads and loads of white lines covering the canvas.

![](ipfs://QmVoNzP4QQb1LApU14dzpuzJSc8ab4wZTFNZyhNkzmFwpg)

Rectangles that had a 90% chance of being black were placed sparingly across the canvas. Sometimes small black dots would appear as well. The curved lines were a real focused point to look into as well.

![](ipfs://Qmdv23asKJByxyhGowxUP6AQBBTFexo4hGRzhL3YhVBKq2)

Occasionally there would be a colored rectangle that would show up. Sometimes the interiors of the squares would also have white lines inside of them. We couldn't always have the black lines curve so we added straight ones as well.

![](ipfs://QmVXJ8w3TskkAc7AU6XB2XZxDPXFddPLt1HkZpFssFJYME)

We considered minting this work and maybe we will in the future. We'd consider this one of the first real developed works.

Next was this colorful experiment that focused on transparency and gradients.

![](ipfs://QmS5AUkADLyYRv54zMiAiChGgiPiyaTTLWs98kxxs2NgSC)

Circles were uncommon on this piece. Messing around with transparency added a new level of depth to the work.

![](ipfs://QmPC16jVcbzKDBd93gcqhuPckiYk5cRsoWPTXPTpCd6hAx)

We also really found ourselves enjoying the purely random colorway provided by the AI. It was vivid and colorful with endless possiblity.

![](ipfs://QmXmdJK45QMvc3KXkpum2wySEeR6qzCyxijSgJQbnpZAxC)

If you ever end up experimenting with gpt3 to create generative art just take each prompt one step at a time to develop what you want OR be free with your words and let the generated code inspire you.

Now we head into the minted works.

# StarMap - AI Study I

::tezos-storage-pointer[]{contract="KT1U6EHmNxJTkvaWJ4ThczG4FSDaHC21ssvi" path="token_metadata::1046706"}

Time to breakdown the first ever official AI Study work "StarMap". We will be sharing some of the prompting behind this work as well. The first two prompts were as follows.

```js
/* Create a 600x600px canvas with a 2px black border */
var canvas = document.createElement('canvas');
canvas.width = 600;
canvas.height = 600;
canvas.style.border = '2px solid black';
canvas.style.margin = 'auto';
document.body.appendChild(canvas);

/* Create 2-30 squares of the same random color that are between 8px-32px in size and place them randomly on the canvas. */
var ctx = canvas.getContext('2d');
var numSquares = Math.floor(Math.random() * 29) + 2;
var squareSize = Math.floor(Math.random() * 24) + 8;
var squareColor = '#' + Math.floor(Math.random() * 16777215).toString(16);
for (var i = 0; i < numSquares; i++) {
  ctx.fillStyle = squareColor;
  ctx.fillRect(Math.floor(Math.random() * (canvas.width - squareSize)), Math.floor(Math.random() * (canvas.height - squareSize)), squareSize, squareSize);
}
```

![](ipfs://QmVG9xXTSvN6q2p8JT8pkopWk266CtVYXtNg9KKCemvHGv)

An excellent starting base. We get a random amount of squares between 2-30, that are a random size between 8-32 pixels, that are a completely random cover that are placed randomly on the canvas.

![](ipfs://QmaugYN8tLRwn9vSquvcyu3jPNPZUBh4dk27oB2CMpgFQq)

Already a large amount of possibilities each generation could create. However our goal was to learn and experiment with what codex could create. Next we wanted to add some lines to the work.

```js
/* create 1-100 random 1-3px lines that are the same color as the squares */
var numLines = Math.floor(Math.random() * 100) + 1;
var lineWidth = Math.floor(Math.random() * 2) + 1;
for (var i = 0; i < numLines; i++) {
  ctx.strokeStyle = squareColor;
  ctx.lineWidth = lineWidth;
  ctx.beginPath();
  ctx.moveTo(Math.floor(Math.random() * canvas.width), Math.floor(Math.random() * canvas.height));
  ctx.lineTo(Math.floor(Math.random() * canvas.width), Math.floor(Math.random() * canvas.height));
  ctx.stroke();
}
```

We also wanted to bring the curved lines back as they gave us some really enjoyable results

```js
/* create 1-100 random 1-3px lines that are the same color as the squares */
var numLines = Math.floor(Math.random() * 100) + 1;
var lineWidth = Math.floor(Math.random() * 2) + 1;
for (var i = 0; i < numLines; i++) {
  ctx.strokeStyle = squareColor;
  ctx.lineWidth = lineWidth;
  ctx.beginPath();
  ctx.moveTo(Math.floor(Math.random() * canvas.width), Math.floor(Math.random() * canvas.height));
  ctx.lineTo(Math.floor(Math.random() * canvas.width), Math.floor(Math.random() * canvas.height));
  ctx.stroke();
}
/* Create 2-20 curved lines the inverted color as the squares and place them randomly on the canvas */
var numCurves = Math.floor(Math.random() * 19) + 2;
var curveColor = '#' + (16777215 - parseInt(squareColor.substring(1), 16)).toString(16);
for (var i = 0; i < numCurves; i++) {
  ctx.strokeStyle = curveColor;
  ctx.lineWidth = lineWidth;
  ctx.beginPath();
  ctx.moveTo(Math.floor(Math.random() * canvas.width), Math.floor(Math.random() * canvas.height));
  ctx.bezierCurveTo(Math.floor(Math.random() * canvas.width), Math.floor(Math.random() * canvas.height), Math.floor(Math.random() * canvas.width), Math.floor(Math.random() * canvas.height), Math.floor(Math.random() * canvas.width), Math.floor(Math.random() * canvas.height));
  ctx.stroke();
}
```

![](ipfs://QmeiUwP6dmeswugARWbrBszBbuo3crDBKQJYwoEvrWYJit)

![](ipfs://QmcpuZ6yPrrxxQyyMEGesiFD7PgvsK1QiK9xD9mFedoxn7)

After that we wanted to add some more squares without fill.

![](ipfs://QmRwH9jmfX8DmZw361UsFHwPExRJyFgooGVu9yccA9CWLv)

We wanted to also have some more rarity and variety to do this we commanded GPT-3 to only do certain things only a certain % of the time.

```js
/* There is a 30% chance of 30-300 random dashed lines moving diagonally of a random color appearing randomly on the canvas. */
if (Math.random() < 0.3) {
  var numDashedLines = Math.floor(Math.random() * 271) + 30;
  var dashedLineColor = '#' + Math.floor(Math.random() * 16777215).toString(16);
  for (var i = 0; i < numDashedLines; i++) {
    ctx.strokeStyle = dashedLineColor;
    ctx.lineWidth = 1;
    ctx.setLineDash([Math.floor(Math.random() * 5) + 1, Math.floor(Math.random() * 5) + 1]);
    ctx.beginPath();
    ctx.moveTo(Math.floor(Math.random() * canvas.width), Math.floor(Math.random() * canvas.height));
    ctx.lineTo(Math.floor(Math.random() * canvas.width), Math.floor(Math.random() * canvas.height));
    ctx.stroke();
  }
}
```

![](ipfs://QmbnXNgYKNWzpgEwJWnZ1DotwPnZN5acxMA75scusWnpFa)

Another example of a rarity trait was

```js
/* There is a 15% chance that 1-10 long 16px-80px width Bold lines of a random color with a black outline are placed randomly parallel to each other on the canvas. */
if (Math.random() < 0.15) {
  var numBoldLines = Math.floor(Math.random() * 10) + 1;
  var boldLineColor = '#' + Math.floor(Math.random() * 16777215).toString(16);
  for (var i = 0; i < numBoldLines; i++) {
    ctx.strokeStyle = boldLineColor;
    ctx.lineWidth = Math.floor(Math.random() * 64) + 16;
    ctx.beginPath();
    ctx.moveTo(Math.floor(Math.random() * canvas.width), Math.floor(Math.random() * canvas.height));
    ctx.lineTo(Math.floor(Math.random() * canvas.width), Math.floor(Math.random() * canvas.height));
    ctx.stroke();
  }
}

```

![](ipfs://Qmcx9HCvNJjDVpEqLLBGvwF573GQ3ZA43YVrLf1gJS11rL)

There are 92 instances of Math.random() used in this work that were switched to fxrand() manually after. We think this work really puts together lots of the pieces learned from earlier experiments.

With this new workflow the stars are the limit. The Star Map is to represent the journey ahead to explore places thought impossible.

# City Pop - AI Study II

City Pop wanted to further explore shapes, colors, and other random stuff. The idea for City Pop came from stacked rectangles reminding us of a factory. We tried creating a factory landscape sort of scene with no real promise.

We opted going for a more minimal approach using clean and distinct shapes. Semi circles and shadows also entered the lab of experimentation.

::tezos-storage-pointer[]{contract="KT1U6EHmNxJTkvaWJ4ThczG4FSDaHC21ssvi" path="token_metadata::1134057"}

Transparency was brought back and we found ourselves enjoying some of the minimal renders just as much as the chaotic ones.

::tezos-storage-pointer[]{contract="KT1U6EHmNxJTkvaWJ4ThczG4FSDaHC21ssvi" path="token_metadata::1134044"}

What sort of city doesn't have birds? For fun we wanted to also add birds so we asked gpt3 to create birds of various color and transparency to be placed on the canvas. Abstract Line patterns would also sometimes appear.

::tezos-storage-pointer[]{contract="KT1U6EHmNxJTkvaWJ4ThczG4FSDaHC21ssvi" path="token_metadata::1134498"}

City Pop was an attempt at art that looks like it could be hung up on a wall. Bright artworks you would see in the city inside an apartment, at a pop up art fair or maybe even inside museum.

# Deep Space Grid - AI Study III

::tezos-storage-pointer[]{contract="KT1U6EHmNxJTkvaWJ4ThczG4FSDaHC21ssvi" path="token_metadata::1134005"}

First using gpt3 we created a border and background. After that a basic grid was created. Gpt3 was then asked to create an "abstract grid pattern around the border". The varying results gave a few different options (The same prompt can yield different results) but the curved corner grids gave it a sci-fi feel that we really enjoyed.&#x20;

We repeat this code twice to allow for up to two different sized and colored corner grids.

::tezos-storage-pointer[]{contract="KT1U6EHmNxJTkvaWJ4ThczG4FSDaHC21ssvi" path="token_metadata::1133719"}

Next we wanted to add some planets to the grid using circles, color gradients, and various transparency. Additionally smaller solid color circles would also be placed randomly on the canvas. A potential glowing feature was also added to give a little more intergalactic sparkle.

::tezos-storage-pointer[]{contract="KT1U6EHmNxJTkvaWJ4ThczG4FSDaHC21ssvi" path="token_metadata::1133943"}

::tezos-storage-pointer[]{contract="KT1U6EHmNxJTkvaWJ4ThczG4FSDaHC21ssvi" path="token_metadata::1133897"}

The chance for little triangular spaceships to appear was added as well. Additionally empty red, black, or white squares (can very rarely be multicolor) were placed randomly acting as points of interest on the fictitious map. There is also a rare chance for text to appear on the Deep Space Grid.

::tezos-storage-pointer[]{contract="KT1U6EHmNxJTkvaWJ4ThczG4FSDaHC21ssvi" path="token_metadata::1133934"}

There are two ultra rare traits which are a black hole and a RGB Mystery interference.

::tezos-storage-pointer[]{contract="KT1U6EHmNxJTkvaWJ4ThczG4FSDaHC21ssvi" path="token_metadata::1134843"}

::tezos-storage-pointer[]{contract="KT1U6EHmNxJTkvaWJ4ThczG4FSDaHC21ssvi" path="token_metadata::1133921"}

This work came out pretty high quality and we really enjoyed every new variation. Most of the working pieces only had chances of appearing which gave some people some minimal grids and others would feel cluttered in hyperspace.

Deep Space Grid is representative of actually finding a a target or a goal and looking closer at the details. Previously with Star Map we were looking up at the endless wonder and now after taking a breather it is time to set our mind and mission.

# Optical Line Grid - Ai Study IV

::tezos-storage-pointer[]{contract="KT1U6EHmNxJTkvaWJ4ThczG4FSDaHC21ssvi" path="token_metadata::1277689"}

The concept for Optical Line Grid was discovered after overlaying a decently large amount of lines of different colors and shades over the background. This would create a interesting effect on our eyes and it would make us start seeing things.

It should also be noted that this work scales to screensize and it is encouraged that you play around with your art.

::tezos-storage-pointer[]{contract="KT1U6EHmNxJTkvaWJ4ThczG4FSDaHC21ssvi" path="token_metadata::1269017"}

We brought back the signature gpt3 random rectangles to have a low chance of appearing. A tribute to our previous works and other AI FxHash works like "GPT-3 and me (free companion mint)" by @tz1hyNv7RBzNPGLpKfdwHRc6NhLW6VbzXP3N.

::tezos-storage-pointer[]{contract="KT1U6EHmNxJTkvaWJ4ThczG4FSDaHC21ssvi" path="token_metadata::1269014"}

Minimal mints such as "Optical Line Grid - Ai Study IV #1" we fell madly in love with. We do not call this a failed render by any means. It is just one of the infinite possibilities. Less can be more.

::tezos-storage-pointer[]{contract="KT1U6EHmNxJTkvaWJ4ThczG4FSDaHC21ssvi" path="token_metadata::1269127"}

All sorts of different lines moving and shifting in unison.

![Example of  "Optical Line Grid - Ai Study IV #6" in a landscape ratio.](ipfs://QmRoei4KYQNeU8nk5zupMmAHD8K9uobziSYF1GJ6QJ3FZz)

As you can see in a different screen size the piece holds the same parts but has been altered.

::tezos-storage-pointer[]{contract="KT1U6EHmNxJTkvaWJ4ThczG4FSDaHC21ssvi" path="token_metadata::1269023"}

![Unminted earlier example of a landscape version.](ipfs://QmQEDAnL6x2erFqAgZegpPEbbyn7pruuCw6tASQbRfPcQs)

Optical Line Grid is representative of now being on the front lines. It's easy to get distracted and blinded but you can't forget the path you have set out on.

***

# What's Next?

Thank you for reading this brief report and hopefully it is enjoyed and inspires new minds who want to create generative art or just play around with these tools. We will be releasing new works and may even release some of the pre AI Study works if people would want them.

We will continue to experiment and produce under CoDexter & GPThomas and wonder where the wave of AI generated creative code will push us.

***

# Bonus: GPThomas

We also have produced works under @tz1i8RMbcrfJop84HwyANvMHf2jJTqinut8vhowever the workflow is slightly different. Artworks under GPThomas were entirely designed by AI. The AI comes up with the concept, how to perform the concept, and then codes the concept using Text2Text and Text2Code prompts.

::tezos-storage-pointer[]{contract="KT1U6EHmNxJTkvaWJ4ThczG4FSDaHC21ssvi" path="token_metadata::1142907"}

In this work GPThomas wanted to create a minimal and beautiful starry night sky where the stars twinkle and everything is perfect. We find it hauntingly beautiful as we didn't create it but watched it be created.

If you want to learn more about GPThomas there is an [*ARTKL about it you can read here*](https://www.fxhash.xyz/article/%22beautiful-night-sky%22-by-gpthomas).

***

# Thanks for reading

You can follow our AI stuff over on [*Twitter @BrainArtLabs*](https://twitter.com/BrainArtLabs)


A short history of the AI Study works. These are works of generative art completely coded by AI using gpt3. These were created using a Text2Code technique of feeding English prompts to codex. The spawn of CoDexter.

CoDexter is a experimental generative art project by @JohnWowCool & @BrainArtLabs where the code for the generative art is created using AI. Using GPT-3, English word prompts are given to the AI that is then converted into JavaScript code.

A brief history of the AI Study series

Written by

Editions

Share

Details

stay ahead with our newsletter