​

function setup() {

  createCanvas(400, 400);

  angleMode(DEGREES);

  // Create a moving text ring

  rings.push(new RotatingTextRing(

    "This is a moving text ring",

    width / 2,

    height / 2,

    150,

    6,

    1,

    "pink",

    16,

    true

  ));

  rings.push(new RotatingTextRing(

    "This is another moving text ring",

    width / 2,

    height / 2,

    100,

    6,

    1,

    'orange',

    16,

    false

    ));

}

​

function draw() {

  background(50);

  for (const textRing of rings){ 

      textRing.update();

    textRing.display();

  }

​

}

​

class RotatingTextRing {

  constructor(s, cx, cy, r, spacing, speed, color, fontsize, bclockwise) {

    this.textString = s;

    this.centerX = cx;

    this.centerY = cy;

    this.radius = r;

    this.spacing = spacing;

    this.speed = speed;

    this.color = color;

    this.fontsize = fontsize;

    this.bclockwise = bclockwise;

    this.angleOffset = 0; // Initial angle offset for the moving text

  }

​

  update() {

    // Update the angle offset based on speed and direction

    if (this.bclockwise) {

      this.angleOffset -= this.speed;

    } else {

      this.angleOffset += this.speed;

    }

  }

​

  display() {

    push(); // Use a single push/pop for the entire ring

    fill(this.color);

    textSize(this.fontsize*3);

    translate(this.centerX, this.centerY); 

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

      let widthToChar = textWidth(this.textString.slice(0, i))

      let character = this.textString.charAt(i);

      let charSpacing = this.spacing * i + this.angleOffset;

      // flip characters because they're upside down otherwise

      let x = this.radius * cos(charSpacing - (this.bclockwise? 180 : 0)); 

      let y = this.radius * sin(charSpacing - (this.bclockwise? 180 : 0));

​

​

      let angle = this.bclockwise ? charSpacing - 90 : charSpacing + 90;

​

      push(); 

      translate(x, y);

      rotate(angle);

      text(character, 0, 0);

      pop();

    }

    pop();

  }

}

​