How do you add text that wraps a circle?

I have made a code something like this:

  createCanvas(800, 800);
}

function draw() {
  background("lightblue");
  noStroke();
  fill("green")
  ellipse(width/2,height/2,0.8*width);
  fill("white")
  ellipse(width/2,height/2,0.6*width);
} 

How do you make it such that the text is around the white circle(something like a school logo)?

Hello, @Potato3218, and welcome to the Processing Forum!

Following is a modified version of your code that can be adapted to your needs. You will need to make adjustments to get the text precisely where you want it.

function setup() {
  createCanvas(800, 800);
  noLoop();
}

function draw() {
  let mySchool = "Top Notch State College";
  background("lightblue");
  noStroke();
  fill("green")
  ellipse(width/2,height/2,0.8*width);
  fill("white")
  ellipse(width/2,height/2,0.6*width);
  translate(width / 2, height / 2);
  fill(0);
  textSize(24);
  for (let i = 0; i < mySchool.length; i++) {
    text(mySchool.charAt(i), 0, -height / 2 + 200);
    rotate(PI / 20);
  }
} 

Edited on February 13, 2021 to make a revision to the example code and to provide the following:

See p5.js: Reference for additional guidance regarding p5.js functions that you may find helpful.

1 Like

@Potato3218, is this a homework assignment, and are you attempting to do something like this?

top notch 1

Alternatively, perhaps the following is what you are trying to do.

top notch 2

Please let us know, and provide us with updates of your efforts, along with questions that you may have, so that we can help.

The first one which you put in the answer is what I wanted. Thanks!

1 Like

Hi @Potato3218 ,

Have you been able to get your code to produce that answer you wanted, or do you still need to perform additional work on it?