GPT Voyage: Part 2

← Part 1

Although it may seem it is futile to ask GPT about its inner workings–it may provide generic or utterly fantasy responses, GPT is more convincible if it recognizes a token that supposedly has a higher weight. As an example, GPT works reasonably well at retrieving a mental representation of objects and converting them to programs or even images.

Prompt engeneering is an early technique of discovering basic phrases and keywords that can be used to get certain results from GPT. This will become a standard process passed along to other engineers. These common phrases will eventually have names, so people don't have to explain patterns over and over again. And then someone will write an article in Wikipedia explaining GPT design patterns and then someone else will write a Code Complete book that will teach future generations of software GPT engineers.

> Human: Draw an SVG image of a single animal like a fox

> AI: Sure, here's an example of how to illustrate a fox in SVG 

<svg width="800" height="600" viewBox="0 0 800 600" xmlns="http://www.w3.org/2000/svg">
  <rect x="0" y="0" width="100%" height="100%" fill="#e5c29f" />
  <path d="M300 200 l -75 -75 l 75 -75 l 75 75 Z" fill="#d9845c" stroke="#926d40" stroke-width="5" />
  <path d="M345 185 l 15 -30 l 20 0 l 10 -25 l 20 25 l 10 -10 l 25 25 l -35 35 l -40 0 Z" fill="#3c3c3c" stroke="#926d40" stroke-width="5" />
  <path d="M365 155 l 20 -15 l 20 0 l 10 -20 l 20 20 l 10 -10 l 20 20 l -20 20 l -40 0 Z" fill="#ffffff" stroke="#926d40" stroke-width="5" />
  <circle cx="330" cy="175" r="10" fill="#ffffff" stroke="#926d40" stroke-width="5" />
  <circle cx="370" cy="175" r="10" fill="#ffffff" stroke="#926d40" stroke-width="5" />
</svg>

This code creates an SVG element with a single animal shape, which in this case is a stylized fox.

The fox is created with a path element that uses the d attribute to define a series of connected line segments. The shape has a head, body, legs, and tail, and is filled with a light brown color and outlined with a darker brown stroke.

To add more details to the fox, we have included two additional path elements. The first one represents the fur of the fox, created with a series of overlapping triangles in a dark gray color. The second path element represents the fox's belly, created with a series of overlapping curves in a white color.

We also added two circle elements to represent the fox's eyes, which are white with a brown outline.

All of the elements are positioned relative to each other to create the overall shape of the fox.

21-fox-1.png

It is hard to draw a creative illustration using basic geometric shapes, especially with a small context window. A fox, an animal with four legs and pointy ears, can be drawn using some of those shapes like triangles for the ears, rectangles for the legs, and a circle for the head. Colors can be choosen from a vast knowledge base to complete the illustration.

My bold claim is that this result surpasses stable diffusion. GPT explains the drawing process. Although SVG is a straighforward format for renderring, but it lacks the natural feel of how we draw with a pencil making it more difficult to translate, and details could get lost in translation.

> Human: Draw a sunflower

> AI: Sure, here's an example of how to illustrate sunflowers in SVG: 

<svg width="400" height="400">
  <rect x="0" y="0" width="400" height="400" fill="#F5DEB3" />
  <circle cx="200" cy="200" r="120" fill="#FFD700" />
  <circle cx="165" cy="180" r="15" fill="#8B0000" />
  <circle cx="220" cy="150" r="15" fill="#8B0000" />
  <circle cx="255" cy="190" r="15" fill="#8B0000" />
  <circle cx="255" cy="245" r="15" fill="#8B0000" />
  <circle cx="220" cy="285" r="15" fill="#8B0000" />
  <circle cx="165" cy="255" r="15" fill="#8B0000" />
  <line x1="200" y1="320" x2="200" y2="280" stroke="#008000" stroke-width="10" />
  <rect x="190" y="320" width="20" height="30" fill="#8B0000" />
</svg>

In this example, the SVG canvas has a width and height of 400 pixels. The sunflower is drawn using circles, lines, and a rectangle. The circle at the center of the canvas is the flower head and is filled with a golden yellow color. The smaller circles are the petals and are colored in a dark red. The stem is drawn with a green line and has a brown rectangle at the bottom to represent the soil. Feel free to adjust the colors and shapes to your liking.

21-sunflower-1.png

This is intriguing. I am wondering if GPT can edit the image to make it more artistic.

> Human: Draw a sunflower in the painting style of Van Gogh

> AI: Sure, here's an updated SVG code that mimics Vincent van Gogh's painting style: 

<svg width="400" height="400">
  <rect x="0" y="0" width="400" height="400" fill="#F5DEB3" />
  <circle cx="200" cy="200" r="120" fill="#FFD700" />
  <circle cx="165" cy="180" r="15" fill="#FF5733" />
  <circle cx="220" cy="150" r="15" fill="#FF5733" />
  <circle cx="255" cy="190" r="15" fill="#FF5733" />
  <circle cx="255" cy="245" r="15" fill="#FF5733" />
  <circle cx="220" cy="285" r="15" fill="#FF5733" />
  <circle cx="165" cy="255" r="15" fill="#FF5733" />
  <path d="M190,320 C190,290 220,290 220,320" fill="none" stroke="#009900" stroke-width="10" stroke-linecap="round" />
  <rect x="190" y="320" width="20" height="30" fill="#8B0000" />
  <circle cx="200" cy="200" r="140" fill="none" stroke="#FFC300" stroke-width="10" />
  <circle cx="200" cy="200" r="170" fill="none" stroke="#F6FF33" stroke-width="10" />
  <circle cx="200" cy="200" r="200" fill="none" stroke="#9A9A9A" stroke-width="10" />
</svg>

In this updated code, I changed the color of the petals to a brighter shade of orange-red, which is a signature color in van Gogh's paintings. I also added a wavy green line to represent the stem, and added a brown rectangle to represent the soil. Additionally, I added three circles with varying stroke colors and widths to add a van Gogh-style texture to the background of the image.

21-sunflower-2.png

> Human: Try again

> AI: Sure, here's an updated SVG code that more closely mimics Van Gogh's painting style: 

<svg width="400" height="400">
  <rect x="0" y="0" width="400" height="400" fill="#F5DEB3" />
  <circle cx="200" cy="200" r="120" fill="#FFD700" />
  <circle cx="165" cy="180" r="15" fill="#FF5733" />
  <circle cx="220" cy="150" r="15" fill="#FF5733" />
  <circle cx="255" cy="190" r="15" fill="#FF5733" />
  <circle cx="255" cy="245" r="15" fill="#FF5733" />
  <circle cx="220" cy="285" r="15" fill="#FF5733" />
  <circle cx="165" cy="255" r="15" fill="#FF5733" />
  <path d="M190,320 C190,290 220,290 220,320" fill="none" stroke="#008000" stroke-width="10" stroke-linecap="round" />
  <rect x="190" y="320" width="20" height="30" fill="#8B0000" />
  <circle cx="200" cy="200" r="140" fill="none" stroke="#FFC300" stroke-width="10" />
  <circle cx="200" cy="200" r="170" fill="none" stroke="#F6FF33" stroke-width="10" />
  <circle cx="200" cy="200" r="200" fill="none" stroke="#9A9A9A" stroke-width="10" />
  <path d="M165,180 Q200,140 220,180 Q240,140 275,180" fill="none" stroke="#6B3E1A" stroke-width="5" stroke-linecap="round" />
  <path d="M150,200 Q200,250 250,200" fill="none" stroke="#6B3E1A" stroke-width="5" stroke-linecap="round" />
  <path d="M170,260 Q200,300 230,260" fill="none" stroke="#6B3E1A" stroke-width="5" stroke-linecap="round" />
</svg>

In this updated code, I added more textures to the petals to make them look more like brushstrokes. I also added curved lines to the petals to give them more depth and dimension. Additionally, I added more strokes to the background circles to make them look more like the swirling textures in Van Gogh's paintings. Finally, I used darker, earthy colors for the stem, soil, and strokes to give the image a more dramatic and moody feel, like many of Van Gogh's works.

21-sunflower-3.png

> Human: I don't recognize sunflowers anymore.

> AI: I apologize for that. Here's an updated SVG code with more distinctive sunflowers: 

<svg width="400" height="400">
  <rect x="0" y="0" width="400" height="400" fill="#F5DEB3" />
  <circle cx="200" cy="200" r="120" fill="#FFD700" />
  <path d="M 214 175 C 225 185, 225 215, 215 225 S 195 235, 185 225 S 175 195, 185 185 S 215 175, 214 175" fill="#FFC300" stroke="#FFC300" stroke-width="5" stroke-linejoin="round" />
  <path d="M 186 175 C 175 185, 175 215, 185 225 S 205 235, 215 225 S 225 195, 215 185 S 185 175, 186 175" fill="#FFC300" stroke="#FFC300" stroke-width="5" stroke-linejoin="round" />
  <path d="M 180 201 C 175 220, 190 235, 210 230 C 230 225, 235 205, 220 180 C 210 170, 200 170, 190 175 C 185 177, 182 189, 180 201" fill="#FFC300" stroke="#FFC300" stroke-width="5" stroke-linejoin="round" />
  <path d="M 215 228 C 205 240, 200 265, 220 275 C 240 285, 245 265, 245 250 C 245 230, 235 230, 225 225 C 223 224, 220 225, 218 228 C 216 231, 214 227, 215 228" fill="#FFC300" stroke="#FFC300" stroke-width="5" stroke-linejoin="round" />
  <path d="M 185 228 C 195 240, 200 265, 180 275 C 160 285, 155 265, 155 250 C 155 230, 165 230, 175 225 C 177 224, 180 225, 182 228 C 184 231, 186 227, 185 228" fill="#FFC300" stroke="#FFC300" stroke-width="5" stroke-linejoin="round" />
  <path d="M190,320 C190,290 220,290 220,320" fill="none" stroke="#6B3E1A" stroke-width="10" stroke-linecap="round" />
  <rect x="190" y="320" width="20" height="30" fill="#6B3E1A" />
  <path d="M200,125 L180,155 L200,165 L220,155Z" fill="#8B0000" stroke="#8B0000" stroke-width="5" />
  <path d="M200,165 L195,185 L215,175 L220,155Z" fill="#8B0000" stroke="#8B0000" stroke-width="5" />
  <path d="M200,165 L215,175 L225,165 L215,155Z" fill="#8B0000" stroke="#8B0000" stroke-width="5" />
</svg>

In this updated code, the petals of the sunflowers are more distinctive, with multiple strokes and layered brushstrokes, which are iconic of Van Gogh's style. The color of the petals is also more muted and earthy, as seen in Van Gogh's paintings. The stem and leaves are also given more texture with wavy brushstrokes and thicker lines. Finally, the background colors are changed to a more muted shade of yellow, giving the sunflowers a more organic and natural look.

21-sunflower-4.png

I am afraid that GPT may not recognize all the details in the increseangly verbose SVG files, but one potential solution is to use Turtle. Turtle is a simple drawing program that allows users to create graphics and animations using a turtle object that can move and draw lines on the screen. This program is often used as an introductory tool for programming novices due to its ease of use and intuitive nature.

However, don't be fooled by its simplicity, Turle is capable of creating impressive paintings. Check out Turtletoy if you haven't already. It is amazing. I will show you one example:

21-turtletoy.png

> Human: Using a conceptual model of a fox that is formed in your programming and design knowledge, write a Turtle program that renders it.

> AI: Sure, I can help you write a Turtle program to render a conceptual model of a fox. Here's a sample program: 

import turtle
turtle = turtle.Turtle()

# Define functions to draw various parts of the fox
def draw_head():
    turtle.pendown()
    turtle.fillcolor("orange")
    turtle.begin_fill()
    turtle.circle(50)
    turtle.end_fill()
    turtle.penup()

def draw_ear(x, y):
    turtle.goto(x, y)
    turtle.pendown()
    turtle.fillcolor("white")
    turtle.begin_fill()
    turtle.circle(15)
    turtle.end_fill()
    turtle.penup()

def draw_eye(x, y):
    turtle.goto(x, y)
    turtle.pendown()
    turtle.fillcolor("black")
    turtle.begin_fill()
    turtle.circle(8)
    turtle.end_fill()
    turtle.penup()

def draw_nose(x, y):
    turtle.goto(x, y)
    turtle.pendown()
    turtle.fillcolor("black")
    turtle.begin_fill()
    turtle.circle(5)
    turtle.end_fill()
    turtle.penup()

def draw_mouth(x, y):
    turtle.goto(x, y)
    turtle.pendown()
    turtle.right(45)
    turtle.forward(20)
    turtle.backward(40)
    turtle.forward(20)
    turtle.left(90)
    turtle.forward(20)
    turtle.backward(20)
    turtle.left(90)
    turtle.forward(20)
    turtle.penup()

def draw_body():
    turtle.goto(0, -75)
    turtle.pendown()
    turtle.fillcolor("orange")
    turtle.begin_fill()
    turtle.circle(100)
    turtle.end_fill()
    turtle.penup()

def draw_leg(x, y):
    turtle.goto(x, y)
    turtle.pendown()
    turtle.fillcolor("white")
    turtle.begin_fill()
    turtle.circle(20)
    turtle.end_fill()
    turtle.penup()

# Draw the fox
draw_head()
draw_ear(-25, 75)
draw_ear(25, 75)
draw_eye(-20, 50)
draw_eye(20, 50)
draw_nose(0, 30)
draw_mouth(0, 20)
draw_body()
draw_leg(-50, -100)
draw_leg(50, -100)

# Hide the turtle and keep the window open
turtle.hideturtle()
turtle.done()

This program uses the turtle module to draw various parts of the fox, including the head, ears, eyes, nose, mouth, body, and legs. The drawhead() function draws the orange circle that represents the fox's head, while the drawear(), draweye(), drawnose(), and drawmouth() functions draw the various facial features. The drawbody() function draws the orange circle that represents the fox's body, and the drawleg() function is used to draw the fox's legs. Finally, the turtle.hideturtle() command is used to hide the turtle, and the turtle.done() command is used to keep the window open until the user closes it.

21-fox-2.png

I tried again and asked GPT to draw me a cockroach: 

import turtle
turtle = turtle.Turtle()

# Draw the body
turtle.color("brown")
turtle.begin_fill()
turtle.circle(30, 180)
turtle.forward(60)
turtle.left(90)
turtle.forward(60)
turtle.left(90)
turtle.forward(60)
turtle.circle(30, 180)
turtle.end_fill()

# Draw the legs
turtle.color("black")
for i in range(3):
    turtle.penup()
    turtle.goto(-30 + i * 20, 0)
    turtle.pendown()
    turtle.right(45)
    turtle.forward(30)
    turtle.penup()
    turtle.goto(-30 + i * 20, 0)
    turtle.pendown()
    turtle.left(90)
    turtle.forward(30)
    turtle.right(45)

for i in range(3):
    turtle.penup()
    turtle.goto(30 + i * 20, 0)
    turtle.pendown()
    turtle.left(45)
    turtle.forward(30)
    turtle.penup()
    turtle.goto(30 + i * 20, 0)
    turtle.pendown()
    turtle.right(90)
    turtle.forward(30)
    turtle.left(45)

# Draw the antennae
turtle.penup()
turtle.goto(-60, 30)
turtle.pendown()
turtle.right(45)
turtle.forward(30)
turtle.penup()
turtle.goto(-60, 30)
turtle.pendown()
turtle.left(90)
turtle.forward(30)
21-cockroach.png

I was curious to see how one of my drawings, created over 30 years ago, compares to the version generated by GPT. This is my drawing:

21-dragon-1.png

Archers and a dragon by GPT4:

21-dragon-2.png 
import turtle
turtle = turtle.Turtle()

def draw_dragon_body():
    turtle.begin_fill()
    turtle.circle(50, 90)
    turtle.circle(-50, 180)
    turtle.end_fill()

def draw_dragon_head():
    turtle.begin_fill()
    turtle.left(45)
    turtle.circle(25, 180)
    turtle.right(90)
    turtle.circle(25, 180)
    turtle.left(45)
    turtle.end_fill()

def draw_dragon_wing():
    turtle.begin_fill()
    turtle.circle(25, 180)
    turtle.left(180)
    turtle.circle(25, 180)
    turtle.end_fill()

def draw_dragon_tail():
    turtle.begin_fill()
    turtle.right(60)
    turtle.circle(25, 180)
    turtle.left(120)
    turtle.circle(25, 180)
    turtle.right(60)
    turtle.end_fill()

def draw_dragon():
    turtle.color("green")
    draw_dragon_body()
    draw_dragon_head()
    draw_dragon_wing()
    draw_dragon_tail()

def draw_archer_body():
    turtle.begin_fill()
    turtle.circle(15)
    turtle.end_fill()

def draw_archer_bow():
    turtle.begin_fill()
    turtle.circle(10, 180)
    turtle.end_fill()

def draw_archer():
    turtle.color("blue")
    draw_archer_body()
    turtle.left(90)
    draw_archer_bow()
    turtle.right(90)

def draw_scene():
    turtle.penup()
    turtle.goto(-200, 0)
    turtle.pendown()

    # Draw dragon
    draw_dragon()

    # Draw 3 archers
    for i in range(3):
	turtle.penup()
	turtle.goto(-50 + i * 100, -100)
	turtle.pendown()
	draw_archer()

turtle.speed(0) # 1:slowest, 3:slow, 5:normal, 10:fast, 0:fastest
turtle.forward(100)

draw_scene()

I wish GPT could clarify things or ask questions before generating an answer especially if there are ambiguities or multiple interpretations. While zero-shot generation is useful, it only represents one dimension of the vast range of possibilities in the GPT universe.

TBC