Dieter dots

I wish I knew the name of this design treatment, but I don’t. All I know is that it’s featured in Dieter Rams’ designs and the Ten Principles for Good Design book cover. I always liked the composition, so I decided to make a little tool to generate it programmatically.

Instructions

This script is intended to run within Figma through its plugin API. The fastest way to run this script is by copy-pasting within Scripter.

                
// The number of rings
const RINGS = 30
// The base number of dots in the inner ring and the number each following ring increases in number
const SEED = 6
// The size of each dot and the spacing between each dot
const GRID_SIZE = 30;
// How bigger/smaller each dot is from its base size
const DOT_SCALE = 1;
// The containing frame's padding
const PADDING = 100;

// The background of the containing frame
const FRAME_FILL = [{
  type: "SOLID",
  visible: true,
  opacity: 1,
  blendMode: "NORMAL",
  color: {
    r: .05,
    g: .05,
    b: .05
  },
  boundVariables: {}
}]

// The background for each dot
const DOT_FILL = [{
  type: "SOLID",
  visible: true,
  opacity: 1,
  blendMode: "NORMAL",
  color: {
    r: .3,
    g: .3,
    b: .3
  },
  boundVariables: {}
}]


let frame: FrameNode = figma.createFrame();
frame.name = 'Dots';
frame.fills = FRAME_FILL;

let dots = new Array()

var drawDot = function(x, y, size, fill) {
  var c = figma.createEllipse()
  c.resize(size, size)
  c.x = x - size / 2
  c.y = y - size / 2
  c.fills = fill

  return c
}


for (let i = 0; i < RINGS; i++) {

  const numDots = SEED * i

  const circumference = numDots * 2 * GRID_SIZE / 2;
  const radius = circumference / (2 * Math.PI);
  const angleIncrement = (2 * Math.PI) / numDots;
  for (let j = 0; j < numDots; j++) {

    const angle = j * angleIncrement;
    const x = radius * Math.cos(angle);
    const y = radius * Math.sin(angle);


    let c = drawDot(x, y, GRID_SIZE / 2 * DOT_SCALE, DOT_FILL)
    figma.currentPage.appendChild(c)
    dots.push(c)
  }
}

let c = drawDot(0, 0, GRID_SIZE / 2 * DOT_SCALE, DOT_FILL)
figma.currentPage.appendChild(c)
dots.push(c)


let group = figma.group(dots, frame)
frame.resize(group.width + PADDING * 2, group.height + PADDING * 2)
group.x = PADDING
group.y = PADDING

figma.ungroup(group)