How do you add text that wraps a circle?

p5.js Coding Questions
1

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)?

2

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
3

@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.

4

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

1 Like
5

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?