DrawBot is a powerful, free application for MacOSX that invites you to write simple Python scripts to generate two-dimensional graphics.” drawbot.com
In Spring 2020, I took Ben Kiel’s Programming Design class and finally explored the intersections of coding and design. I’m a Computer Science minor, and since taking CSE 131 (Intro to CS), I’ve been linking for ways to make fun stuff with code. I’ve found DrawBot to be the perfect tool. I made a bunch of explorations and had a lot of fun, and a lot of help from Ben Kiel and my friends Grace Park and Jefferson Duan. I was really glad I minored in Computer Science, because a ton of concepts I learned in CSE 131 (Intro to CS) came in handy. Since I learned Java in that class, transitioning to Python was more or less seamless.
The following is a series of projects I made in Programming Design. I’ve included a snippet of each project’s code, but I’ll warn you that it’s not the most clean or efficient code out there. Still works, though!
Pattern
I used DrawBot to create patterns via iterating through the canvas’ width and height. In line with my obsession with honeycomb configurations, many of these patterns create hexagons in one way or another. One version allows the user to pick the colors of the different shapes that make up the pattern. January 2020

def pattern():
    for i, x in enumerate(width):
        for y in height:
            if i%2 == 0: #if even
                y = y+(module)/2
            image = module - padding
            diff = padding/2
            blendMode(“multiply”)
            fill(0, 0, 0, 1)
            drawHex1(x+diff+9, y-diff*2, image, image)
            fill(random(), random(), 0.7, 0.9)
            drawHex2(x+diff+9, y-diff*2, image, image)
            fill(random(), random(), 0.7, 0.9)
            drawHex3(x+diff+9, y-diff*2, image, image)
            strokeWidth(1)
            stroke(0, 0, 0, 1)

pattern()
Other explorations involved heavy use of the random() function (Math.random() in Java) to generate random RGB values. DrawBot is also great for making GIFs! What’s not to love?
Sonic Poster
I made this poster in collaboration with Grace Park, Jefferson Duan, and Joseph Wang. The code iterates through a list of the letters “Alone on a Friday night? God, you’re pathetic” (we are funny. Or cringey). Each letter takes its color from the corresponding pixel at that location, using DrawBot’s imagePixelColor() method. We were fortunate to print this on WashU’s new risograph printers! February 2020

theLine = ["A","L","O","N","E","O","N","A","F","R","I","D","A","Y","N","I","G","H","T","?","G","O","D","Y","O","U","R","E","P","A","T","H","E","T","I","C"]
i = 0
# loop over the width of the image
for y in range(0, height, s):
    # loop of the height of the image
    for x in range(0, width, s):
        color = imagePixelColor(path, (x, y))
        if color:
            r, g, b, a = color
            # set the color
            fill(r, g, b, a)
            # draw some text
            text(theLine[i], (x, y))
        i += 1
        if (i >= len(theLine)):
            i = 0
Thumbnail Frame Helper
When asked “what can you make to help your design community?” I considered making a tool that could generate random color palettes, generate font pairings, or generate thumbnail frames. I explored the color palette generator, but ultimately developed a thumbnail frame generator. Countless times I’ve needed boxes with precise dimensions for thumbnailing, but my options have been drawing them by hand (inaccurate), drawing them with a ruler (slow), or making rows of frames with Illustrator (requires brain power, repetitive motions, and printing). Hence, I wanted to streamline the process.
The code takes inputs for paper size, thumbnail size, and number of rows and columns. It iterates through the specified number of rows and columns, then draws the frames. In the future I’d like this tool to utilize DrawBot’s user interface and be available to people who need a quick way to generate thumbnail frames. February 2020

w = 11
h = 8.5
row = 4
col = 8
ratio = width()/row
rw = (ratio)
rc = ((rw * h)/w)
def pattern():
    for x in range(row):
        for y in range(col):
            rect(rw*x+padding/2, 
            rc*y+padding/2, 
            rw-padding, rc-padding)
            strokeWidth(1)
            stroke(0, 0, 0, 1) 
pattern()
Halloween Candy Tournament
This takes data (in a .CSV) from FiveThirtyEight’s Ultimate Halloween Candy Power Ranking. I wanted to mimic the tournament sorter they used to collect preferences from thousands of individuals. The colors are 100% randomly generated using the random() method to determine each RGB value. Cool, right? Most of them don’t look half bad!
I love Kit Kats and I’m mad they didn’t win FiveThirtyEight’s tournament (they came in third place). And Haribo Gold Bears should’ve been ranked way higher! What are your favorite Halloween candies? Let me know in an email!
The code for this is uh… long, so here’s the part where it parses the .CSV file. It then takes this data, picks two candies, and shows each candy’s stats on their respective sides. April 2020

candies = {}
with open("candy-data.csv", newline='', encoding="utf-8") as csvfile:
    reader = csv.DictReader(csvfile)
    for row in reader:
        candies[row["competitorname"]] = (row["winpercent"], row["chocolate"], row["fruity"], row["rank"], row["peanutyalmondy"], row["money"], row["crispedricewafer"], row["hard"])
Want to see more? I’ve used DrawBot for other projects, too! Take a look.
Attribution
Mentorship provided by Ben Kiel
Inspiration from Andy Clymer and Agyei Archer
Data provided by FiveThirtyEight
Hatch designed by Mark Caneso from ps Type. I love how funky its shapes are!
IBM Plex Mono designed by Mike Abbink, IBM BX&D, in collaboration with Bold Monday. I love that a monospace typeface has so many weights. I’ve developed a deep appreciation not only for Plex’s letterforms but also that IBM very intentionally made Plex open source! Do I use IBM Plex Mono too much? Let me know in an email!

More Play

Back to Top