Using AI to create watch dials.

[AndyHull]

 

This started as a "Bored on a Sunday afternoon, I wonder if that might work..." task, in the thread "Revisiting an old Hobby" here

I've decided to create a thread just for this topic as I can see there is interest in this subject.

My initial attempt used ChatGPT to create an SVG (Scaleable vector graphic) using the popular scripting language "Python" to produce the SVG programmatically. 

The resultant SVG could then be used to create a watch dial.

The advantage of doing this using software is that you get very precise results.

One of the issues however is that AI can't "see" the results, and it has no ability to check any code it generates to ensure that it is sane.

Generating images with computer code is obviously nothing new, so why use AI and why use SVG and why Python?

I used AI and particularly ChatGPT because one of the tasks it is fairly proficient at is writing computer code. I'm also reasonably good at this task, which is probably just as well, since I do it for a living.

I decided to use SVG for a couple of reason. Firstly because it is suited to this kind of image, and secondly because an SVG file is actually a text file, which you can examine with a text editor, and create fairly easily with a computer program.

Python seemed a good choice, not only because we use it at work, but also because it produces relatively clean, readable code, and has a whole bunch of libraries to simplify the tasks needed to create images.

It was quite rewarding to find that ChatGPT's coding abilities seem to have improved somewhat since I first "played" with it when it hit the headlines a couple of years ago, and as a result of these improvements, I managed to get a simple, working python watch dial creating script with relative ease. 

If you want to cut through all of the static and just run some scripts, I have created a git repo for that -> https://github.com/pingumacpenguin/ChatGPT-WatchDialCoding

Feel free to provide any examples and scripts of your own and I can add them, or add you as a contributor to the git project and you can make your own changes.

Edited March 25 by AndyHull

[eccentric59]

Question: Do you want to discuss this on a technical level or a philosophical one?

From a technical perspective, I'm sure AI will provide accurate results given that the instructions are sufficiently specific. For example, I just told ChatGPT to "create art for a 30mm watch dial with arabic numerals at the 12:00, 3:00, 6:00 and 9:00 positions." and this is what I got ...

While I'm sure it's improving daily, if it can create an image like this, I'd be suspicious of any code it would create.

 

Philosphically, I have had quite a few discussions about the ethics and consequences of AI in creative circles.  It's just a tool. Wielded by a professional, it can improve workflows and produce impressive results in very little time. Amateurs and enthusiasts certainly can grasp the technology and use it to their advantage. Those who don't understand what it is will instinctively dismiss, distrust or even fear AI. It's been that way since our ancestors first stuck a stick in the ground and realized you could mark the passage of time with the shadows.

[AndyHull]

AI can create very interesting graphical images too as you have shown.

As to the code ChatGPT produces, if you look at the examples you can see they meet the brief of the "customer" i.e. me. but it takes a lot of prompting to get things right. For example it decided that a for loop from 1 to 61 and from 1 to 13 would produce the correct number of minute and hour markers. While this did actually work, since hour 1 landed on the same location as hour 61, you are correct in your assessment that it produces results that need to be carefully examined. 

It also tried to add "symmetrical" hour markers to another version of the code, resulting in a very weird (but quite eye catching) dial with a bunch of markers in a curve in the top left of the dial.

Because it is producing Python code, we can simply modify that code to produce something more akin to what we want.

 

import svgwrite
import math

def generate_watch_dial():
    # Create a new SVG drawing
    drawing = svgwrite.Drawing('bauhaus_watch_dial.svg', size=(30, 30), profile='full')

    # Define styles
    hour_marker_style = {"stroke": "#333333", "stroke-width": "0.05mm", "fill": "none", "stroke-linecap": "round"}  # Dark grey color for hour markers
    minute_marker_style = {"stroke": "#CCCCCC", "stroke-width": "0.03mm", "fill": "none", "stroke-linecap": "round"}  # Light grey color for minute markers
    center_circle_style = {"stroke": "#000000", "stroke-width": "0.1mm", "fill": "#FFFFFF"}  # White color for center circle

    # Draw outer circle
    # drawing.add(drawing.circle(center=(15, 15), r=14.5, **{"stroke": "#000000", "stroke-width": "0.1mm", "fill": "#000000"}))  # Black background
    drawing.add(drawing.circle(center=(15, 15), r=14.5, **{"stroke": "#000000", "stroke-width": "0.1mm", "fill": "#101329"}))  # Navy Blue`ZZ background

    # Draw hour markers
    hour_marker_length = 14
    minute_marker_length = hour_marker_length * 0.592  # Adjusted length for minute markers
    for marker in range(0, 360, 30):
        angle = math.radians(marker)
        x1 = 15 + hour_marker_length * math.cos(angle)
        y1 = 15 + hour_marker_length * math.sin(angle)
        x2 = 15 + minute_marker_length * math.cos(angle)
        y2 = 15 + minute_marker_length * math.sin(angle)
        drawing.add(drawing.line(start=(x1, y1), end=(x2, y2), **hour_marker_style))
#        drawing.add(drawing.line(start=(15 - x1, 15 - y1), end=(15 - x2, 15 - y2), **hour_marker_style))  # Add marker on the opposite side for symmetry

    # Draw minute markers
    minute_marker_length = 14
    for marker in range(0, 360, 6):
        angle = math.radians(marker)
        x1 = 15 + minute_marker_length * math.cos(angle)
        y1 = 15 + minute_marker_length * math.sin(angle)
        x2 = 15 + (minute_marker_length - 0.3) * math.cos(angle)  # Adjusted length for minute markers
        y2 = 15 + (minute_marker_length - 0.3) * math.sin(angle)  # Adjusted length for minute markers
        drawing.add(drawing.line(start=(x1, y1), end=(x2, y2), **minute_marker_style))
#        drawing.add(drawing.line(start=(15 - x1, 15 - y1), end=(15 - x2, 15 - y2), **minute_marker_style))  # Add marker on the opposite side for symmetry

    # Draw center circle
    drawing.add(drawing.circle(center=(15, 15), r=0.5, **center_circle_style))

    # Save the drawing to a file
    drawing.save()

# Generate the watch dial
generate_watch_dial()

By commenting out the two spurious "Add marker...."  lines that produce the garbage in the top left corner and then  changing the background to navy blue, we get the blue dial above. This might actually make quite an eye catching dial if suitably printed and applied to a dial disk.

Like any computer system, if you put garbage in, you certainly get garbage out.

If your definition of the problem is sufficiently ambiguous then it may produce something somewhat different from what you intend.

That is however also true of human coders. 

Edited March 25 by AndyHull

[AndyHull]

The BBC just aired an interesting programme on the subject of AI - search for...

The Artificial Human - Should AI Make My Decisions?  on BBC Sounds, iPlayer, or using whatever local method allows you to access BBC content.

[RichardHarris123]

AI spotted cancerous cells in breast tissue which the doctors missed. Very interesting subject. 

[AndyHull]

1 hour ago, RichardHarris123 said:

AI spotted cancerous cells in breast tissue which the doctors missed. Very interesting subject. 

I suspect this is the sort of thing that AI will be very good at. AI algorithms are able to process large data sets, don't get tired, lazy or bored, and can improve their accuracy based on their previous successes. 

They are less well suited to abstract concepts like "draw me the perfect watch dial in blue" because they don't really have any emotional buy in or need to understand subjective concepts like "perfect" or "beautiful". They can examine a huge data set of things that are described by humans as beautiful, and based on this, can munge together a mash-up of all of the features of what might loosely be considered beauty.

The results therefore tend to be slightly trippy, rounded, averaged images with wildly obscure elements, which do often fire the imagination. By the same token they can equally easily be disturbing trips in to uncanny valley.

Edited March 25 by AndyHull

[RichardHarris123]

Haha, I'm a  gamer, know all about uncanny Valley. 

[AndyHull]

Google AI - Currently known as "Gemini" can also write python code.
I gave it broadly the same brief as I gave ChatGPT.

Quote

Can you write a python script to generate svg code to draw a white circular watch dial with a diameter of 30mm and dark blue minutes and hour markers. Add a 2mm black circle in the center of the dial. Make the hour and minutes markers look bauhaus

Here is the result of its first attempt.

As you can see, it too has made some rather odd assumptions about how to complete the task.

 

import math

# Define dial properties
dial_diameter = 30
dial_radius = dial_diameter / 2
center_x = dial_radius
center_y = dial_radius
marker_radius = dial_radius - 3  # Increased radius to position markers further out

# Define color constants
dial_color = "grey"  # Set dial color to grey
marker_color = "darkblue"
center_color = "black"

# Define marker width and offset
marker_width = 2
marker_offset = marker_radius - marker_width / 2


def generate_svg_code():
  """Generates SVG code for the watch dial"""
  svg_code = f'<svg width="{dial_diameter}" height="{dial_diameter}" xmlns="http://www.w3.org/2000/svg">'

  # Draw the watch dial
  svg_code += f'<circle cx="{center_x}" cy="{center_y}" r="{dial_radius}" fill="{dial_color}" />'

  # Draw the center circle
  svg_code += f'<circle cx="{center_x}" cy="{center_y}" r="1" fill="{center_color}" />'

  # Generate markers for each hour
  for hour in range(1, 13):
    angle = math.pi * (hour - 3) / 6  # Convert hour to angle (hour 3 is at 12 o'clock)
    marker_x = center_x + marker_radius * math.cos(angle)
    marker_y = center_y - marker_radius * math.sin(angle)

    # Draw the Bauhaus marker path
    marker_path = f"""
      M {marker_x + marker_offset}, {marker_y}
      h {marker_width}
      a {marker_width / 2}, {marker_width / 2} 0 0 1 {marker_width}, 0
      l {marker_width * -0.7}, {marker_width * 0.7}
      l {marker_width * -0.3}, {marker_width * -0.7}
      z
    """
    svg_code += f'<path fill="{marker_color}" d="{marker_path}" />'

  svg_code += "</svg>"
  return svg_code

# Print the generated SVG code
svg_code = generate_svg_code()
print(svg_code)

 

Interestingly it used the same mistaken assumption that it needed to break the dial down into 13 segments in order to produce 12 hour makers. I'm not sure why the two seemingly unrelated algorithms followed the same path.

It has taken a slightly different approach when it comes to creating the image, but this includes missing out the bounding circle at the outer edge of the dial, which leaves you effectively with a white dial on a white background, with no clear idea of where things are in relation to the dial disk.

Its a workable base to start from, but as you can see, ChatGPT and Gemini AI both have a far less clear understanding of what the human in the loop is trying to achieve than another human would have.

Both AI's seem to lack the ability to ask pertinent questions when, as is the case here,  the definition of the problem is incomplete or unclear.

I suspect this 'ask the right questions' problem is actually quite a difficult nut for AI to crack, since it doesn't really have a clear view of the world or the real world experience that a human coder would have. How would it know what questions to ask, if it has never actually picked up and examined and used a wrist watch for example?

A human being would be interested in things like the legibility of the dial, the relative sizes of the dial features and so on, but the AI's "experience" information is much more limited.  It can trawl through every watch dial image on the internet, and make statistical assumptions about what a watch dial is, but as you saw in the previous art examples, it puts multiple meaningless dial numerals in to the picture, as it doesn't understand the fundamental concept of that their purpose is.

Edited April 1 by AndyHull

[RichardHarris123]

What would happen if you inputted an photo of what you wanted and asked it to produce a graphical representation? 

[AndyHull]

I'm not sure if ChatGPT or Gemini are able to do that. I may give it a try.

 

[askme]

FYI, One of our client's is using this Use Case commercially.  From ideation, through design, into engineering and production.