Thursday, September 6, 2018

adobe illustrator - 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?



Answer



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 http://graphicdesign.stackexchange.com/q/56200/21332
"""

# 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

dwg.save()

# Print SVG source to console
print(dwg.tostring())

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 dwg.save(). 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


No comments:

Post a Comment

technique - How credible is wikipedia?

I understand that this question relates more to wikipedia than it does writing but... If I was going to use wikipedia for a source for a res...