let currentScale;

let myScaledCanvas;

let canvas;

​

function setup() {

  canvas = createCanvas(800, 800);

  myScaledCanvas = createGraphics(800, 800);

  currentScale = 1; 

}

​

function draw() {

  myScaledCanvas.clear();

  myScaledCanvas.push();

  myScaledCanvas.scale(currentScale);

  drawMyDesign();

  myScaledCanvas.pop();

  image(myScaledCanvas, 0, 0); // Show on the main canvas

  noLoop();

}

​

function exportHighResolution() {

  currentScale = outputScale; // High-Res Export

  myScaledCanvas = createGraphics(currentScale * 800, currentScale * 800);

  draw();

  save(myScaledCanvas, "highResImage", 'png');

  currentScale = 1; // Reset to default scale 1:1

  myScaledCanvas = createGraphics(800, 800);

  draw();

}

​

function keyReleased() { if (key == 'e') exportHighResolution(); }

function mousePressed() { loop(); }

​

function drawMyDesign() {

​

let circleArray = [];

  myScaledCanvas.colorMode(HSB,360,100,100,1);

  myScaledCanvas.background(7, 76, 82, 0.6);

  packCircles();

  //after this line we can expect that circleArray has the circles we want

  for(var j = 0; j < circleArray.length; j++){

    let currentCircle = circleArray[j];

    motif(currentCircle[0], currentCircle[1], currentCircle[2] * 2);

  }

  // for (var a =0; a<width; a+=12) {

  //     for(var b=0; b<height; b+=12){

  //     myScaledCanvas.noFill();

  //     myScaledCanvas.strokeWeight(0.35);

  //     myScaledCanvas.stroke(240);

  //     myScaledCanvas.ellipse(a, b, random(5,12), random(5,12));

  //     }

  // }

​

​

function motif(x, y, r1) {

  var r1Scale = r1 / 2;

​

  myScaledCanvas.strokeWeight(0.5);

  myScaledCanvas.stroke(240);

  angleMode(DEGREES);

  myScaledCanvas.colorMode(HSB,360,100,100,1);

  myScaledCanvas.fill(7, 76, 82, 0.6);

  if (random(0, 1) < 0.7) {

    myScaledCanvas.fill(54, 80, 96, 0.6)

  }

    myScaledCanvas.circle(x, y, r1);

  // myScaledCanvas.fill(7, 76, 82, 0.6);

  // if (random(0, 1) < 0.7) {

  //   myScaledCanvas.fill(205, 55, 42, 0.6)

  // }

  // myScaledCanvas.circle(x, y, r1);

  myScaledCanvas.fill(7, 76, 82, 0.8);

  if (random(0, 1) < 0.7) {

    myScaledCanvas.fill(205, 55, 42, 0.8)

  }

    myScaledCanvas.circle(x, y, r1 * 0.7);

  myScaledCanvas.fill(7, 76, 82, 0.8);

  if (random(0, 1) < 0.4) {

    myScaledCanvas.fill(54, 80, 96, 0.8)

  }

  myScaledCanvas.circle(x, y, r1 * 0.5);

  myScaledCanvas.circle(x, y, r1 * 0.3);

  for (let angle = 0; angle < 360; angle += 22.5) {

    rX1 = (cos(angle) * r1Scale);

    rY1 = (sin(angle) * r1Scale);

    rX2 = (cos(angle) * r1Scale);

    rY2 = (sin(angle) * r1Scale);

    myScaledCanvas.line(x + rX1, y + rY1, x , y );

  }

}

​

//circle are defined as

//[x postion, y position, radius]

function packCircles(){

  // randRadius = random(5,100);

  for(var i = 0; i < 300000; i++){

    let newcircle = [random(0, width), random(0, height), random(5,100)]

    // if (randRadius%6==0){

    //     let newcircle = [random(0, width), random(0, height), randRadius]

    //     }

    //let newcircle = [random(0, width), random(0, height), random(5, 100)]

    let doesIntersect = false;

    for(var j = 0; j < circleArray.length; j++){

      if(doesCircleIntersect(newcircle, circleArray[j])){

        doesIntersect = true;

      }

    }

    if(!doesIntersect){

      circleArray.push(newcircle);

    }

  }

}

​

function doesCircleIntersect(c1, c2){

  let c1xpos = c1[0];

  let c1ypos = c1[1];

  let c1radius = c1[2];

  let c2xpos = c2[0];

  let c2ypos = c2[1];

  let c2radius = c2[2];

  let distanceBetweenCenters = sqrt(pow(c2ypos - c1ypos, 2) + pow(c2xpos - c1xpos, 2))

  return (distanceBetweenCenters < (c1radius + c2radius))

}

}