let mappedX;

​

​

let TSPREAD = 'This is some text i would love to display spread out over the arc'

let TREVEAL = 'This is some text that i would love to reveal as the arc is revealed'

​

​

function setup() {

  createCanvas(400, 400);

}

​

function drawMousePointer() {

​

  push()

  fill('red')

  circle(mouseX, mouseY, 5)

  pop()

}

​

function drawLine(){

  // top line to map to arc

  push();

  strokeWeight(8)

  stroke('yellow')

  line(50, 50, width-50, 50)

  strokeWeight(5)

  stroke('rgb(6,255,6)')

  line(50, 50, max(50,min(mouseX, width-50)), 50)

  strokeWeight(1)

  line(mouseX, mouseY, max(50,min(mouseX, width-50)), 50)

  pop()

}

​

function drawArc() {

  const [px, py] = drawPointOnArc()

  push()

  fill('pink')

  arc(width/2, height/2, 200, 200, t+radians(180), t+-mappedX, PIE)

  stroke('purple')

  line(px, py, max(50,min(mouseX, width-50)), 50)

  pop()

}

​

function calcPointOnArc() {

  const px  =  width/2+100 *  cos(-mappedX +t)

  const py  =  height/2 + 100 *  sin(-mappedX +t)

  return [px, py]

}

​

function drawPointOnArc(){

  const [px, py] = calcPointOnArc()

  push()

  circle(px, py, 5)

  pop()

  return [px, py]

}

​

function mouseInScreen() {

  return (

  mouseX > 0 && mouseX < width && mouseY < height && mouseY > 0

  )

}

​

function revealTextOnArc(start, arcradians) {

  // Calculate how much of the text to show based on mouse position relative to the arc length

  const percentRevealed = map(clampedX, 50, width - 50, 0, 1);

  const textToDisplay = TREVEAL

  // Define the starting angle for the text

  const startAngle = start; // Arc starts at 180 degrees (left side of the canvas)

​

  const maxwidth = textWidth(textToDisplay)

​

  push();

  translate(width / 2, height / 2); // Move origin to center of arc

  textAlign(CENTER, CENTER); // Center text alignment for characters

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

    const char = textToDisplay.charAt(i)

    const widthAtChar = textWidth(textToDisplay.slice(0,i)) 

    if (widthAtChar >= maxwidth-10) print("'yoloswag'");

​

    const angle = startAngle + map(widthAtChar, 0, maxwidth, 0, arcradians) ; // Calculate angle for each character based on its position in the string

    // Ensure characters are placed only within the revealed portion of the arc

    if (i/textToDisplay.length  < percentRevealed) {

      const x = -110 * cos(angle); // Calculate x position on the arc

      const y = -110 * sin(angle); // Calculate y position on the arc

​

      push();

      translate(x,y)

      rotate(angle + radians(-90)); // Rotate text to be tangent and readable along the arc

      text(char,0,0)

      pop();

    }

  }

  pop();

}

​

t = 0

dt = 0.005

​

function draw() {

  clampedX =max(50, min(mouseX, width-50))

  mappedX = map (

    clampedX,

    50, width-50, 

    PI-.0001, 0

    )

  background(220);

  drawLine()

  drawArc()

  drawMousePointer()

  revealTextOnArc(t, radians(180)); // Add this line to call your new function

​

​

  t += dt ;

}