# How do you add text that wraps a circle?

**URL:** <https://discourse.processing.org/t/how-do-you-add-text-that-wraps-a-circle/27789>\
**Category:** Coding Questions\
**Created:** [February 13, 2021, 12:26pm UTC](https://discourse.processing.org/t/how-do-you-add-text-that-wraps-a-circle/27789 "2021-02-13T12:26:14Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![Potato3218](https://avatars.discourse-cdn.com/v4/letter/p/ecc23a/32.png) [@Potato3218](https://discourse.processing.org/u/Potato3218)\
**Post date:** [February 13, 2021, 12:26pm UTC](https://discourse.processing.org/t/how-do-you-add-text-that-wraps-a-circle/27789/1 "2021-02-13T12:26:14Z")

</div>

I have made a code something like this:

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

---

<div class="post-metadata">

**Author:** ![javagar](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/javagar/32/11434_2.png) [@javagar](https://discourse.processing.org/u/javagar)\
**Post date:** [February 13, 2021, 12:44pm UTC](https://discourse.processing.org/t/how-do-you-add-text-that-wraps-a-circle/27789/2 "2021-02-13T12:44:06Z")

</div>

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.

```auto
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](https://p5js.org/reference/) for additional guidance regarding p5.js functions that you may find helpful.

---

<div class="post-metadata">

**Author:** ![javagar](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/javagar/32/11434_2.png) [@javagar](https://discourse.processing.org/u/javagar)\
**Post date:** [February 14, 2021, 12:56am UTC](https://discourse.processing.org/t/how-do-you-add-text-that-wraps-a-circle/27789/3 "2021-02-14T00:56:12Z")

</div>

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

![top notch 1](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/f/fe72feabe62da22a3750b14eab1b353b95630fff.png)

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

![top notch 2](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/f/fa9341dfef30f06a9f8e2421eda78b5804f08abc.png)

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

---

<div class="post-metadata">

**Author:** ![Potato3218](https://avatars.discourse-cdn.com/v4/letter/p/ecc23a/32.png) [@Potato3218](https://discourse.processing.org/u/Potato3218)\
**Post date:** [February 14, 2021, 1:20pm UTC](https://discourse.processing.org/t/how-do-you-add-text-that-wraps-a-circle/27789/4 "2021-02-14T13:20:53Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![javagar](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/javagar/32/11434_2.png) [@javagar](https://discourse.processing.org/u/javagar)\
**Post date:** [February 14, 2021, 2:04pm UTC](https://discourse.processing.org/t/how-do-you-add-text-that-wraps-a-circle/27789/5 "2021-02-14T14:04:50Z")

</div>

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?