let s = "Circular stibro ";

​

// declare an array of Circle objects, called letters

// set it to be the same size as the length of the String

let letters = [];

​

function setup() {

  createCanvas(600,600);

  textFont("Courier New", 25);

​

  // radius of the  circle of letters

  let radius = 100;

​

  // start the words halfway around the circle

  // (left side. normally in processing circles, angles, and rotations

  // start on the right side)

  let angle = PI;

​

  // where is the center of the circle

  let circleCenterX = width / 2;

  let circleCenterY = height / 2;

​

  // loop through all the characters in the String

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

    // cosine of an angle equals adjacent/hypoteneuse

    // thus: cos(angle) = x/radius

    // and algebra: x = cos(angle)*radius

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

    // y is same but sine

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

​

    //make a new Circle object for each letter

    letters.push(new Letter(x, y, s.charAt(i)));

    // increase the angle based on the number of characters

    angle += TWO_PI / s.length

  }

}

​

function draw() {

  background(255);

  // loop through the letters array and call all needed functions

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

    letters[i].run();

  }

}

​

// when the mouse is pressed assign a random x & y speed

function mousePressed() {

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

    letters[i].seekHome = false;

    letters[i].xSpeed = random(-10, 10);

    letters[i].ySpeed = random(-10, 10);

  }

}

​

// press 'h' to mak the letters seek home

function keyPressed() {

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

    letters[i].seekHome = true;

  }

}

​

class Letter {

  constructor(x, y, c) {

    // we need to save the home location too

    this.homeX = x;

    this.homeY = y;

    this.x = x;

    this.y = y;

    this.xSpeed = this.ySpeed = 0;

    this.letter = c;

    // boolean to know when we should be trying to find our way home

    this.seekHome = false;

  }

​

  update() {

    // to find our way home we find the direction from

    // our current location (x, for example) to our home location (homeX)

    // this is done simply with subtraction

    // then we scale that down a certain degree,

    // and add that fraction of a direction to our current location

    if (this.seekHome) {

      this.x += (this.homeX - this.x) * 0.2;

      this.y += (this.homeY - this.y) * 0.2;

    } else {

      this.x += this.xSpeed;

      this.y += this.ySpeed;

      this.xSpeed *= 0.98;

      this.ySpeed *= 0.98;

    }

  }

​

  display() {

    fill(0);

    text(this.letter, this.x, this.y);

  }

​

  checkEdges() {

    if (this.y > height) {

      this.y = 0;

    }

    if (this.y < 0) {

      this.y = height;

    }

    if (this.x > width) {

      this.x = 0;

    }

    if (this.x < 0) {

      this.x = width;

    }

  }

​

  run() {

    this.update();

    this.display();

    this.checkEdges();

  }

}

​