let points = []; // The current points forming the text

let bounds;

let extraDots = [];

let numExtraDots = 1000;

let noiseOffsets = [];

let extraNoiseOffsets = [];

let currentColor = [255, 255, 255]; // Default color for the dots (white)

let currentTarget = []; // Target shape (the starfish)

let colorBoxes = []; // Store the color buttons

let textPoints = []; // Dots for the text

​

function preload() {

  font = loadFont('Mukta-SemiBold.ttf');

}

​

function setup() {

  createCanvas(500, 500);

  textSize(128);

​

  // Initialize color boxes

  setupColorBoxes();

​

  // Generate dots for the text "STAR"

  generateTextDots();

​

  // Define target shape as the starfish (simplified)

  currentTarget = generateStarfishShape();

​

  // Scatter dots randomly across the canvas

  scatterDots();

}

​

function draw() {

  background(135, 206, 250); // Light blue background

​

  // Draw extra dots (scattered outside of text)

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

    extraDots[i].step();

    extraDots[i].display();

  }

​

  // Draw the dots for the text

  drawTextDots();

​

  // Draw color selection buttons

  drawColorBoxes();

}

​

// Generate dots for the text "STAR" out of points

function generateTextDots() {

  points = font.textToPoints('STAR', 50, 250, 192, {

    sampleFactor: 0.2, // Adjust for more/less points

    simplifyThreshold: 0

  });

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

    let pt = points[i];

    textPoints.push(new Walker(pt.x, pt.y));

  }

}

​

// Draw the dots forming the text

function drawTextDots() {

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

    textPoints[i].step();

    textPoints[i].display();

  }

}

​

// Scatter the extra dots randomly across the canvas

function scatterDots() {

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

    let x = random(width);

    let y = random(height);

    extraDots.push(new Walker(x, y)); // Create a new walker for each dot

  }

}

​

// Define buttons for colors

function setupColorBoxes() {

  let boxW = 120;

  let boxH = 40;

​

  // Create color boxes for Red, Pink, Green, Blue

  colorBoxes.push({ label: "Red", color: [255, 0, 0], x: 20, y: 50, w: boxW, h: boxH });

  colorBoxes.push({ label: "Pink", color: [255, 105, 180], x: 20, y: 100, w: boxW, h: boxH });

  colorBoxes.push({ label: "Green", color: [0, 255, 0], x: 350, y: 50, w: boxW, h: boxH });

  colorBoxes.push({ label: "Blue", color: [0, 0, 255], x: 350, y: 100, w: boxW, h: boxH });

}

​

// Draw color selection buttons

function drawColorBoxes() {

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

    let box = colorBoxes[i];

    fill(box.color);

    rect(box.x, box.y, box.w, box.h);

    fill(0);

    textSize(12);

    textAlign(CENTER, CENTER);

    text(box.label, box.x + box.w / 2, box.y + box.h / 2);

  }

}

​

// Check if a button was clicked and set the corresponding color and shape

function mousePressed() {

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

    let box = colorBoxes[i];

    if (isInside(mouseX, mouseY, box)) {

      currentColor = box.color; // Change the color of the dots

      transformDotsToShape(currentTarget); // Transform dots to starfish

    }

  }

}

​

// Helper function to check if the mouse is inside a box

function isInside(mx, my, box) {

  return mx > box.x && mx < box.x + box.w && my > box.y && my < box.h + box.h;

}

​

// Transform dots to target shape (starfish)

function transformDotsToShape(targetShape) {

  for (let i = 0; i < targetShape.length && i < textPoints.length; i++) {

    textPoints[i].setTarget(targetShape[i].x, targetShape[i].y); // Move dots to target shape points

  }

}

​

// Starfish shape generator (placeholder for now)

function generateStarfishShape() {

  let shape = [];

  let centerX = width / 2;

  let centerY = height / 2;

  let radius = 100;

​

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

    let angle = map(i, 0, 5, 0, TWO_PI); // Five points for starfish arms

    let x = centerX + radius * cos(angle);

    let y = centerY + radius * sin(angle);

    shape.push({ x: x, y: y });

  }

  return shape;

}

​

​