let points = [];

let angle = 0;

let rSlider;

let dotSizeSlider;

let simplifyThresholdSlider; // Slider for simplify threshold

let colors = [];

let currentColors = []; // Array to hold current colors for each point

​

function preload() {

  font = loadFont("Fonts/PPNeueMachina-InktrapRegular.otf");

}

​

function setup() {

  createCanvas(1920, 1080);

​

  // Initialize the r slider

  rSlider = createSlider(0, 25, 25); // (min, max, start)

  rSlider.position(20, 600); // Adjusted position for left alignment

​

  // Initialize the dot size slider

  dotSizeSlider = createSlider(5, 80, 5); // (min, max, start)

  dotSizeSlider.position(20, 650); // Adjusted position for left alignment

​

  // Initialize the simplify threshold slider

  simplifyThresholdSlider = createSlider(0, 0.1, 0, 0.001); // (min, max, start, step)

  simplifyThresholdSlider.position(20, 700); // Adjusted position for left alignment

​

  // Define colors

  colors = [

    //color(160, 32, 240), 

    color(255, 154, 205),

    //color(160, 32, 240), 

    color(255, 154, 205)

    // Add more colors as needed

  ];

​

  // Call convertTextToPoints initially

  convertTextToPoints();

​

  // Initialize current colors array with random colors for each point

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

    currentColors[i] = random(colors);

  }

​

  angleMode(DEGREES);

}

​

function draw() {

  background(57, 47, 54);

​

  let r = rSlider.value();

  let dotSize = dotSizeSlider.value();

​

  // Draw the text with rotation

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

    // Smoothly transition to the next color for each point

    currentColors[i] = lerpColor(currentColors[i], random(colors), 0);

​

    fill(currentColors[i]); // Set the fill color

    noStroke(); // Remove the outline (stroke)

    ellipse(points[i].x + r * sin(angle + i * 5), points[i].y, dotSize, dotSize);

  }

​

  angle += 2; // Update the angle for rotation

}

​

function convertTextToPoints() {

  let simplifyThreshold = simplifyThresholdSlider.value();

  points = font.textToPoints("BLEND", 500, 450, 180, {

    sampleFactor: 0.2,

    simplifyThreshold: simplifyThreshold

  });

}

​

function mouseReleased() {

  convertTextToPoints();

}

​