let isDragging = false; // Track if the user is dragging the mouse

let easeInCubicFactor = 30000; // Number of background dots

​

function setup() {

  createCanvas(600, 600);

  drawBackground(); // Create the initial background

  stroke(255, 150); // Light stroke color for the lines

  // Create multiple shapes with varying complexity

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

    let newShape = new GeometricShape(width / 2, height / 2, random(10, 20), random(50, 150));

    shapes.push(newShape); // Add new shape to the array

  }

  // Draw each shape

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

    shapes[i].drawShape();

  }

}

​

function drawBackground() {

  background(0);

  fill(0, 0, 0, 20); // Set a dark fill with transparency

​

  // Generate the easeInCubic background effect

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

    let x = map(random(), 0, 1, -20, width + 20); // Random x value

    let y = easeInCubic(random()) * height; // Skewed y value towards the top

    let size = map(random(), 0, 1, 5, 30); // Random size for the rectangles

    rect(x, y, size, size); // Draw the rectangle at the calculated position

  }

}

​

// Ease in cubic function for the background

function easeInCubic(x) {

  return x * x * x; // Cubic easing function

}

​

class GeometricShape {

  constructor(centerX, centerY, numPoints, radius) {

    this.centerX = centerX;

    this.centerY = centerY;

    this.numPoints = numPoints; // Number of points in the shape

    this.radius = radius; // Radius of the shape

    this.points = []; // Array to store the points of the shape

    // Generate points for the shape

    for (let i = 0; i < this.numPoints; i++) {

      let angle = map(i, 0, this.numPoints, 0, TWO_PI); // Evenly space the points

      let x = this.centerX + cos(angle) * this.radius * random(0.5, 1.5);

      let y = this.centerY + sin(angle) * this.radius * random(0.5, 1.5);

      this.points.push(createVector(x, y)); // Store each point

    }

  }

​

  drawShape() {

    // Connect each point to every other point

    stroke(random(150, 255), random(100, 255), random(100, 255), 150);

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

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

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

      }

    }

  }

​

  // Move the shape based on mouse dragging

  moveShape(xOffset, yOffset) {

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

      this.points[i].x += xOffset;

      this.points[i].y += yOffset;

    }

  }

}

​

function draw() {

  // Only redraw if dragging is active

  if (isDragging) {

    drawBackground(); // Redraw the background

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

      shapes[i].drawShape(); // Redraw all shapes

    }

  }

}

​

function mousePressed() {

  // Activate dragging when mouse is pressed

  isDragging = true;

}

​

function mouseDragged() {

  // Move all shapes based on mouse dragging

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

    shapes[i].moveShape(mouseX - pmouseX, mouseY - pmouseY);

  }

}

​

function mouseReleased() {

  isDragging = false; // Stop dragging when the mouse is released

}

​