let gridSize = 3;

let minCircleSize = 63;

let maxCircleSize = 127;

let noiseScale = 0.01;

let connectionThreshold = 127;

let currentSketch = 1;

​

function setup() {

  createCanvas(400, 400);

  background(0);

  initializeCircles();

}

​

function draw() {

  if (currentSketch === 1) {

    background(255, 5);  // Light background for Sketch 1

    sketch1();

  } else if (currentSketch === 2) {

    background(0, 14);  // Dark background with transparency for Sketch 2

    sketch2();

  } else if (currentSketch === 3) {

    background(255, 15);  // Light background for Sketch 3

    sketch3();

  }

}

​

function keyPressed() {

  if (key === '1') {

    currentSketch = 1;

    initializeCircles();

  } else if (key === '2') {

    currentSketch = 2;

    initializeCircles();

  } else if (key === '3') {

    currentSketch = 3;

    initializeCircles();

  }

}

​

function initializeCircles() {

  circles = [];

  let spacingX = width / gridSize;

  let spacingY = height / gridSize;

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

    for (let j = 0; j < gridSize; j++) {

      let x = spacingX * (i + 0.5);

      let y = spacingY * (j + 0.5);

      circles.push(new OrganicCircle(x, y, minCircleSize));

    }

  }

}

​

// Breath (21, 44)

function sketch1() {

  stroke(255, 44);

  strokeWeight(21);

  // Increase noise scale for more variation and randomize speed

  for (let c of circles) {

    c.noiseScale = random(0.01, 0,02); // Increase noise scale for more noise

    c.speed = random(0.1, 0.2); // Randomize speed

  }

  for (let i = 0; i < circles.length; i++) {

    for (let j = i + 1; j < circles.length; j++) {

      let distBetween = dist(circles[i].x, circles[i].y, circles[j].x, circles[j].y);

      if (distBetween < connectionThreshold) {

        line(circles[i].x, circles[i].y, circles[j].x, circles[j].y);

      }

    }

  }

  for (let c of circles) {

    c.move();

    c.growAndShrink();

    c.display();

  }

}

// Blink (34, 70)

function sketch2() {

  stroke(255, 70);

  strokeWeight(10);

  for (let i = 0; i < circles.length; i++) {

    for (let j = i + 1; j < circles.length; j++) {

      let distBetween = dist(circles[i].x, circles[i].y, circles[j].x, circles[j].y);

      if (distBetween < connectionThreshold) {

        line(circles[i].x, circles[i].y, circles[j].x, circles[j].y);

      }

    }

  }

  for (let c of circles) {

    c.move();

    c.growAndShrink();

    c.display();

  }

}

​

// Pulse (63,127)

function sketch3() {

  stroke(0, 127);

  strokeWeight(10);

  for (let i = 0; i < circles.length; i++) {

    for (let j = i + 1; j < circles.length; j++) {

      let distBetween = dist(circles[i].x, circles[i].y, circles[j].x, circles[j].y);

      if (distBetween < connectionThreshold) {

        line(circles[i].x, circles[i].y, circles[j].x, circles[j].y);

      }

    }

  }

  for (let c of circles) {

    c.move();

    c.growAndShrink();

    c.display();

  }

}

​

class OrganicCircle {

  constructor(x, y, size) {

    this.baseX = x;

    this.baseY = y;

    this.size = size;

    this.noiseOffsetX = random(1000);

    this.noiseOffsetY = random(1000);

    this.angle = random(TWO_PI);

    this.sizeVariationSpeed = random(0.01, 0.03);

    this.noiseScale = 0.01; // Default noise scale

    this.speed = 1; // Default speed

  }

  move() {

    // Organic movement using Perlin noise with increased noise scale

    let noiseX = noise(this.noiseOffsetX) * 160 - 14;

    let noiseY = noise(this.noiseOffsetY) * 63 - 25;

    this.x = this.baseX + noiseX * this.speed;

    this.y = this.baseY + noiseY * this.speed;

    this.noiseOffsetX += this.noiseScale;

    this.noiseOffsetY += this.noiseScale;

  }

  growAndShrink() {

    let sizeOffset = sin(this.angle) * (maxCircleSize - minCircleSize) / 2;

    this.size = minCircleSize + (maxCircleSize - minCircleSize) / 2 + sizeOffset;

    this.angle += this.sizeVariationSpeed;

  }

  display() {

    fill(0, 120);

    noStroke();

    ellipse(this.x, this.y, this.size);

  }

}

​