P5js implementation of the "Twubblesome Twelve Circle Packing Puzzle Problem" designed by Bill Gosper

bill_gospers_troublesome12.js

// Can be run online at https://p5js.org/ or alpha.editor.p5js.org/full/SykVmQWVG
const SCREEN = {
  width:  800,
  height: 600 }
const T12 = { 
  radii: [5.943, 7.290, 8.365, 11.315, 12.576, 14.497, 13.067, 12.151, 8.788, 7.941, 6.383, 5.495],
  cavity: 38.149 }
const FACTOR = 4

var myCircles
var cavity
var selectedCircle
var debugToggleButton
 
function setup() {
  createCanvas(SCREEN.width, SCREEN.height)
  myCircles = new Group()

  debugToggleButton = createSprite(32, 32, 24, 24)
  debugToggleButton.shapeColor = color(20,200,20)
  
  cavity = createSprite(SCREEN.width/2, SCREEN.height/2, T12.cavity*2 * FACTOR, T12.cavity*2 * FACTOR)
  cavity.draw = function() { 
      fill(32, 64, 100)
      ellipse(0, 0, T12.cavity*2 * FACTOR, T12.cavity*2 * FACTOR) 
      
  }
  
  constructCircles(T12.radii)
  
  debugToggleButton.onMousePressed = function() {
    for (let i = 0; i < myCircles.length; i++) {
      let currCircle = myCircles.get(i)
      currCircle.debug = !currCircle.debug
    }
  }
}

function draw() {
  background(100, 110, 120)
  myCircles.displace(myCircles)
  drawSprites()
}

function drag(spr, handle) {
    spr.position.x = mouseX + handle.x
    spr.position.y = mouseY + handle.y
}

function constructCircles(radii) {
  let center = createVector(SCREEN.width/2, SCREEN.height/2)
  var newCircle
  for (let i = 0; i < radii.length; i++) {
    let angleIncr = TAU / (radii.length + 1)
    
    let diameter = radii[i] * 2 * FACTOR
    let radius   = radii[i] * FACTOR
    let startingPos = createVector(FACTOR*(sin(angleIncr * i)*56), FACTOR * (cos(angleIncr * i)*56))
    newCircle = createSprite(center.x + startingPos.x, center.y + startingPos.y, diameter, diameter)
    newCircle.draw = function() { 
      fill(255, 200, 100)
      ellipse(0, 0, diameter, diameter)
    } 
    newCircle.debug = true
    newCircle.mouseActive = true
    newCircle.setCollider('circle', 0, 0, radius)
    newCircle.handle = createVector(0, 0)
    
    newCircle.addToGroup(myCircles)
  }
}

function mousePressed() {
    for (let i = 0; i < myCircles.length; i++) {
      let currCircle = myCircles.get(i)
      if (currCircle.mouseIsOver) { 
          currCircle.handle.x = currCircle.position.x - mouseX
          currCircle.handle.y = currCircle.position.y - mouseY
          selectedCircle = currCircle
        }
    }
}

function mouseReleased() {
    selectedCircle = null
}

function mouseDragged() {
  if (selectedCircle) drag(selectedCircle, selectedCircle.handle)
}