Programmatically creating radiating rows of dots

I want to create a speaker hole pattern like this: enter image description here

But I’m not sure where to start. Can this be achieved without laborious positioning in Illustrator or similar software?


I’ll add my method, since it seems to me like it’s the simplest. Basically, you:

  1. Computationally generate the circles in Python
  2. Render them as a simple SVG file
  3. Open file in Illustrator

Here is the Python script (requires svgwrite and math):

This script has two purposes:

- Simple demonstration of using Python (specifically the svgwrite library) to create an SVG file
- Answer the question

# n[x] should give the number of circles at a distance of (x+1)*d from the center
d = 30
n = [8, 16, 20, 20, 20]

r = 7  # radius of each circle

# Calculate the center points of each circle
circles = [(0, 0)]  # There is always one circle in the middle

import math
for i in range(0, len(n)):
    m = n[i]  # m is the number of circle in this "row", i is the number of the row
    for j in range(0, m):  # for each circle...
        phi = 2*math.pi*j/m  # Calculate the angle at which the circle will be

        # Convert polar coordinates to cartesian
        x = d*(i+1)*math.cos(phi)
        y = d*(i+1)*math.sin(phi)

        circles.append((x, y))

# Write circles to SVG
import svgwrite

# Determine correct size of drawing
width = max([c[0] for c in circles])*2.2
height = max([c[1] for c in circles])*2.2

dwg = svgwrite.Drawing('demo.svg', size = (width, height))  # output will be in the same folder as this script

# offsets for shifting all circles so that the SVG can be easily viewed in browser
x_offset = min([c[0] for c in circles])*1.1
y_offset = min([c[1] for c in circles])*1.1

for c in circles:
    adjusted_x = c[0] - x_offset
    adjusted_y = c[1] - y_offset

    dwg.add(svgwrite.shapes.Circle((adjusted_x, adjusted_y), r))

# Save the file

# Print SVG source to console

It will create an SVG file in the directory it’s in. You can open this in a browser:

enter image description here

Or in Illustrator:

enter image description here

You should use a bigger Illustrator window than me, though, mine was a bit too small to work with comfortably…

If you can’t have Python scripts create files (maybe running this in an online Python interpreter) then simply comment out The last line prints the contents of the SVG to console, you can paste this into Notepad, then save as my file.svg.

I got carried away and added a few “neat” features, like:

  • Make sure the circles are properly centered, so that circles with negative coordinates don’t get clipped when viewing in your browser.
  • Resize the SVG canvas.

You could easily leave these out, since Illustrator doesn’t hide objects outside canvas bounds and allows you to resize the canvas manually:

enter image description here

Source : Link , Question Author : Tom , Answer Author : Superbest

Leave a Comment