## Aaron’s Art Corner

##### August 21, 2019

### “I like art—but I can’t draw”

Ever since I can remember, I’ve loved the arts. However, although I’ve been playing music all my life, I always thought I didn’t have much of a knack for visual art. I’d have what I thought were interesting ideas, but my craftsmanship was poor. Worse, I never practiced to make it better. Simply put, I’m one of those people who says, “I can’t draw to save my life.”

## Enter: The Computer

Fortunately, I’ve also always loved math, and more importantly, I practiced it all the time. Later in life, when I learned computer programming, I came at it from the perspective of, “What kinds of interesting audio or visual pieces can I make with a computer?” Programming is a craft, but one that is very different from drawing or painting. In fact, mathematical thinking often plays a critical role in computer arts. As a result, I still can’t draw to save my life, but by using mathematical thinking with a computer, I’ve made lots of interesting visual art pieces!

Since the idea of computer art might be new to many of you, I’d like to share a simple sketch I designed as a teaching example for this article, together with my thoughts about how it came together. The programming language I used to generate the visuals is called p5.js, if you’d like to give it a go yourself.

## Aesthetics

When you’re setting out to sketch something with pencil and paper, you often have an idea in mind. Maybe you’re going to sketch a landscape, or a portrait, or a still life. It’s still possible to make this sort of art on a computer, but it doesn’t play to the computer’s strengths. Computers are better at drawing simple mathematical shapes, like lines, points, polygons, etc. As a result, a lot of computer art is more **abstract**—in other words, it’s not trying to represent anything in the natural world directly.

Designing abstract art is challenging because it’s so open-ended. Fortunately, there is a very useful way around this obstacle. One of the most powerful creative ideas you can play with is specifically choosing **constraints**. It’s a little counter-intuitive, but by specifically constraining yourself, you free yourself from the overwhelming nature of considering the vast space of possibilities.

To that end, for this sketch, I’m going to impose two simple constraints:

- I can only use
**circles.** - I can only use
**grayscale.**

These constraints might seem severe, but let’s see what we can do with them!

## The Sketch

My first thought is to draw the circles themselves in a circle. I’ll start with 10 gray circles, and position their centers equally spaced around a big ring. Here’s what that looks like:

Okay, it’s not that exciting, but now we have something to work with. I’m noticing now that the radii of the smaller circles is pretty small compared to the radius of the big ring they’re arranged in. For instance, we could have drawn a picture where the individual circles have larger radii:

Or, alternatively, we could have drawn a picture where the radius of the big ring they’re arranged in is smaller:

I’m not sure what the best radius for either of these quantities is yet. For now, since it’s complicated to think about changing two things at the same time, I’m going to fix the radius of the individual circles, but let myself give the radius of the big ring a flexible value. We can think of the radius of the ring as a **parameter** that we can **vary**. The idea of varying a parameter is extremely powerful both in math and in art! One of the simplest ways to experiment is to control a parameter interactively.

Move your mouse horizontally on this interactive.

Hey, when I make the radius of the outer ring small, it looks interesting when the circles overlap like that! Kind of like Venn’s worst nightmare of a diagram. Let’s keep that idea in our back pocket for now. It’s useful to play around a bit before diving deep into one idea.

As I was playing around with the interaction, I was also drawn to the **dynamic** quality it gave to the piece. Instead of just trying to come up with a compelling still image, we can try to incorporate animation into the piece. This allows us to think conceptually in terms of **time** as well as space.

As a first idea, I’ll try to **animate **the position of the individual circles over time. Instead of arranging them in equal spacing around the outer ring, I’ll choose a different random spray around the ring at each frame to create the effect that the circles look like they’re jumping around.

This is interesting, but it’s a little too spastic for my taste.

What if I go back to the previous idea of overlapping circles, but add a little randomness to their positions? Instead of arranging them around the circumference of a ring, I’ll just choose their centers randomly.

I think the irregularity here is compelling, but the scene is too minimalistic for my taste. Maybe we need more than 10 circles? Let’s try 50:

Aha! It’s more congested, but I think it has more potential to grow than the previous image. Using more circles gave the randomness more room to express itself. This is also where the computer shines—drawing 50 circles is a cinch for a computer, but petty tedious without one.

Now, the circles are a bit bunched up, and I’m remembering from before that I liked controlling the “bunchiness” interactively. Let’s set that back up. Now that we’ve explored the parameter space of varying the outer “ring,” I’d also like to control the radius of each individual circle. We’ll control that using the vertical mouse position.

I’m really liking that! It’s fun to be able to control both the bunchiness of the circles as well as the size of the circles. To give the whole thing a little more flow, let’s slowly **rotate** the whole picture over time.

Looking good! Finally, I’m noticing that the most interesting tension in this sketch comes from the contrast when the circles are very clustered to when the circles are spread out. To enhance this contrast, let’s use even more circles: how about 1000?

Oooh, fancy! I’m going to call that done. There’s a lot of room to explore interactively. Here are a few still frames I discovered while exploring that I liked:

It’s neat how the same code can generate a variety of images with a different feel to them.

## Further Explorations

Although I’m declaring the sketch “done,” we only scratched the surface of possibilities. Here are some other ideas we could have explored within our constraints:

- Having different circles have different radii
- Changing the number of circles over time
- Introducing collisions between circles

I’m sure you have some interesting ideas yourself. Go ahead and give it a try! Or if you’re feeling ambitious, try making your own computer art from scratch.

Share your art with us by tagging #ArtofProblemSolving in a post on Instagram!