# Wrapping a sentence, around a circle, letter by letter

**URL:** https://discourse.processing.org/t/wrapping-a-sentence-around-a-circle-letter-by-letter/9056
**Category:** Coding Questions
**Tags:** homework
**Created:** [March 7, 2019, 2:06am UTC](https://discourse.processing.org/t/wrapping-a-sentence-around-a-circle-letter-by-letter/9056 "2019-03-07T02:06:21Z")
**Posts on this page:** 20
**Page:** 1

<div class="post-metadata">

### Author: ![DM\_Slippin](https://avatars.discourse-cdn.com/v4/letter/d/a8b319/32.png) [@DM\_Slippin](https://discourse.processing.org/u/DM_Slippin)
#### Post date: [March 7, 2019, 2:06am UTC](https://discourse.processing.org/t/wrapping-a-sentence-around-a-circle-letter-by-letter/9056/1 "2019-03-07T02:06:21Z")

</div>

Hi there!

To cut to the chase, today I’ve signed up and submitted my code to hopefully have some answers pertaining to a project I’ve been working on. For a rundown of what I was trying for, I wanted to take a quote and wrap it around a circle, letter by letter. Much like on a bike tire with spokes, each letter (spoke) would be spaced evenly apart around the whole circle (tire). I’ve been trying again and again, but I simply cannot create what I’m trying for. I’ve cleaned up my code in case someone wanted to actually type out the proper functioning code, but I feel as if I’m completely in the dark with this. Any help is appreciated 🙂

```auto
String quote =( "Hoping is a waking dream. - Aristotle" ); //Quote around the circle

float delta = TWO_PI / 37; //Spacing around the circle
int radius = 37*10; //Radius of the circle

void setup() { //Start up
 size(600,600);  
 smooth(); 
 textSize(30); 
}

void draw() { 
 background(0); 
 fill(255); //Start of mess

 for(int i = 0; i<37; i++) { 

   float xPos = width/2+radius * cos(i* delta); 
   float yPos = height/2+radius * sin(i* delta);
     for (int index = 0; index < quote.length();index++) {
     char aChar = charAt(index);}
  
   pushMatrix();
       translate(xPos, yPos);
       text(quote[i], 0, 0); 
   popMatrix();    
 } //End of mess
}

```

Here is an image showing what I’m attempting to make

 ![A3Q1PrintInCircle_SampleVideo](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/6/6728f97c4d05741fbba17b71d763427e5294c046.gif)

---

<div class="post-metadata">

### Author: ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)
#### Post date: [March 7, 2019, 7:29am UTC](https://discourse.processing.org/t/wrapping-a-sentence-around-a-circle-letter-by-letter/9056/2 "2019-03-07T07:29:59Z")

</div>

Almost there

You only need one for loop

with i

---

<div class="post-metadata">

### Author: ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)
#### Post date: [March 7, 2019, 7:34am UTC](https://discourse.processing.org/t/wrapping-a-sentence-around-a-circle-letter-by-letter/9056/3 "2019-03-07T07:34:14Z")

</div>

> [@DM\_Slippin](#):
>
> char aChar = charAt(index);}

Should be

char aChar = quote.charAt(index);

---

<div class="post-metadata">

### Author: ![DM\_Slippin](https://avatars.discourse-cdn.com/v4/letter/d/a8b319/32.png) [@DM\_Slippin](https://discourse.processing.org/u/DM_Slippin)
#### Post date: [March 7, 2019, 3:36pm UTC](https://discourse.processing.org/t/wrapping-a-sentence-around-a-circle-letter-by-letter/9056/4 "2019-03-07T15:36:35Z")

</div>

Hey, thank you for the feedback! I followed as you suggested, but I am having a problem with the text currently. I’ll print my code down, but the ‘text’ syntax is underlined and reads the error “The method text(char[], int, int, float, float) in the type PApplet is not applicable for the arguments (char, int, int, float, float)”. I won’t lie, this confused me a lot. I am tinkering with it, but haven’t had much luck. Here’s my code again;

```auto
String quote =( "Hoping is a waking dream. - Aristotle" ); //Quote around the circle
int N = quote.length();

float delta = TWO_PI / N; //Spacing around the circle
int radius = N*5; //Radius of the circle

void setup() { //Start up
 size(600,600);  
 smooth(); 
 textSize(30); 
}

void draw() { 
 background(0); 
 fill(255); //Start of mess
 for (int index = 0; index < quote.length();index++) {
     char aChar = quote.charAt(index);
     for(int i = 0; i<N; i++) { 
   float xPos = width/2+radius * cos(i* delta); 
   float yPos = height/2+radius * sin(i* delta);
     
   pushMatrix();
       translate(xPos, yPos);
       text(aChar,0,i,xPos,yPos); 
   popMatrix();  
     }
 } //End of mess
}

```

---

<div class="post-metadata">

### Author: ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)
#### Post date: [March 7, 2019, 4:10pm UTC](https://discourse.processing.org/t/wrapping-a-sentence-around-a-circle-letter-by-letter/9056/5 "2019-03-07T16:10:51Z")

</div>

Almost there

Go for

text(aChar+““, …

---

<div class="post-metadata">

### Author: ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)
#### Post date: [March 7, 2019, 4:15pm UTC](https://discourse.processing.org/t/wrapping-a-sentence-around-a-circle-letter-by-letter/9056/6 "2019-03-07T16:15:22Z")

</div>

And get rid of one for loop- you only need one

Let’s say you get rid of this

for (int index = 0; index \< quote.length();index++) {

Move the line char aChar…  
behind the remaining for loop and replace index with i obviously

---

<div class="post-metadata">

### Author: ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)
#### Post date: [March 7, 2019, 4:18pm UTC](https://discourse.processing.org/t/wrapping-a-sentence-around-a-circle-letter-by-letter/9056/7 "2019-03-07T16:18:40Z")

</div>

> [@DM\_Slippin](#):
>
> text(aChar,0,i,xPos,yPos);

No.

You want:

`text(aChar+““,0,0);`

Remember you can hit **ctrl-t** in processing and thus get auto-format

Don’t try to guess. Make a plan and stick to it. E.g. you made your `text(...` line worse…

Change the plan only when necessary; don’t guess…

Chrisir

---

<div class="post-metadata">

### Author: ![DM\_Slippin](https://avatars.discourse-cdn.com/v4/letter/d/a8b319/32.png) [@DM\_Slippin](https://discourse.processing.org/u/DM_Slippin)
#### Post date: [March 7, 2019, 7:20pm UTC](https://discourse.processing.org/t/wrapping-a-sentence-around-a-circle-letter-by-letter/9056/8 "2019-03-07T19:20:46Z")

</div>

Wow man, you were right. Thank you so much! Program runs like I want and thank you for that auto-format tip, I never knew that honestly! I’ll be expanding my project but for now I’m on track, thanks again!!!

---

<div class="post-metadata">

### Author: ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)
#### Post date: [March 7, 2019, 9:03pm UTC](https://discourse.processing.org/t/wrapping-a-sentence-around-a-circle-letter-by-letter/9056/9 "2019-03-07T21:03:26Z")

</div>

Good good good!!!

Good!

Well done

---

<div class="post-metadata">

### Author: ![DM\_Slippin](https://avatars.discourse-cdn.com/v4/letter/d/a8b319/32.png) [@DM\_Slippin](https://discourse.processing.org/u/DM_Slippin)
#### Post date: [March 8, 2019, 2:22am UTC](https://discourse.processing.org/t/wrapping-a-sentence-around-a-circle-letter-by-letter/9056/10 "2019-03-08T02:22:39Z")

</div>

Well, unfortunately I am back again…

I’ve been taking what I made with your help and attempting to turn it into a spiral, such as that the quote would look as if it were a spiral with the last character of the quote being printed first in the center, and moving outward until the first character of the quote is the final character printed, to give the effect of it shrinking. The only issue is that every idea I’ve thought of to master this design has failed. I cannot get it to print the last letter first (Update: I figured it out now!) and move back and I’ve failed miserably at having it shrink correctly at the correct rate. I’m hoping you might have an idea of how to create such a design to hopefully get my head back on track because I have come up blank so far 😕

 ![A3Q2SpiralOut_SampleVideo](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/7/7e9e153f13401fc71fa16ab7eeca3120875f0095.gif)

This is again, an example of what I’m trying for now. Suggestions are wanted! Here is my code;

```auto
String quote =( "Keeping in touch with the people that matter is important - G-EAZY" ); //Quote around the circle
int N = quote.length(); //Determines the quote length

float delta = TWO_PI / N; //Spacing around the circle
float radius = N; //Radius of the circle

void setup() { //Start up
  size(600, 600); //Screen size
  smooth(); //Smooth letters
  textSize(30); //Font size
}

void draw() { 
  background(0); //Black screen
  fill(255); //White letters
    for (int i = 0; i<N; i++) { //Position change for the quote
      float xPos = width/2+(radius) * cos(i* delta); //Calc the X position for each letter
      float yPos = height/2+(radius) * sin(i* delta); //Calc the Y position for each letter
      char aChar = quote.charAt(65-i); //Chooses which letter to draw
      radius = aChar;

      pushMatrix(); //Saves new coordinate system
      translate(xPos, yPos); //Moves the X and Y position for each letter
      text(aChar+"", 0, 0); //Provides the text
      popMatrix(); //Restores prior coordinate system
    } //End of for
  } //End of draw

```

---

<div class="post-metadata">

### Author: ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)
#### Post date: [March 8, 2019, 12:28pm UTC](https://discourse.processing.org/t/wrapping-a-sentence-around-a-circle-letter-by-letter/9056/11 "2019-03-08T12:28:09Z")

</div>

You solved it?

What’s your problem now?

Movement ?

---

<div class="post-metadata">

### Author: ![DM\_Slippin](https://avatars.discourse-cdn.com/v4/letter/d/a8b319/32.png) [@DM\_Slippin](https://discourse.processing.org/u/DM_Slippin)
#### Post date: [March 8, 2019, 3:34pm UTC](https://discourse.processing.org/t/wrapping-a-sentence-around-a-circle-letter-by-letter/9056/12 "2019-03-08T15:34:23Z")

</div>

My problem is with shaping it mostly. I’m good with creating a circle, but a spiral seems to elude me. I’ll post my code, but I’m lost on where to start with this spiral. I also want it so that in the first frame, it will draw 1 character, the second frame 2 characters, third frame is 3 characters, until its reached the end of the quote. These two final additions to the code have been a struggle. Here is my code;

```auto
String quote =( "Keeping in touch with the people that matter is important - G-EAZY" ); //Quote around the circle
int N = quote.length(); //Determines the quote length

float delta = TWO_PI / (N/5); //Spacing around the circle
float radius = N; //Radius of the circle

void setup() { //Start up
  size(800, 800); //Screen size
  smooth(); //Smooth letters
  textSize(30); //Font size
}

void draw() { 
  background(0); //Black screen
  fill(255); //White letters
  for (int i = 0; i<N; i++) { //Position change for the quote
    float xPos = width/2+(radius) * cos(i* delta); //Calc the X position for each letter
    float yPos = height/2+(radius) * sin(i* delta); //Calc the Y position for each letter
    char aChar = quote.charAt(65-i); //Chooses which letter to draw
    radius = aChar*2; //<----- This was an idea I had to create a spiral, as you can see it doesn't quite 
                                             work out....

    pushMatrix(); //Saves new coordinate system
    translate(xPos, yPos); //Moves the X and Y position for each letter
    text(aChar+"", 0, 0); //Provides the text
    popMatrix(); //Restores prior coordinate system
  } //End of for
} //End of draw

```

---

<div class="post-metadata">

### Author: ![monkstone](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/monkstone/32/64_2.png) [@monkstone](https://discourse.processing.org/u/monkstone)
#### Post date: [March 8, 2019, 4:03pm UTC](https://discourse.processing.org/t/wrapping-a-sentence-around-a-circle-letter-by-letter/9056/13 "2019-03-08T16:03:28Z")

</div>

You might be interested in Ricard Marxer fantasic [geomerative](http://www.ricardmarxer.com/geomerative/) library to create more elegant results. See my [JRubyArt example](http://ruby-processing.github.io/geomerativegem/geomerativegem/update/2016/07/06/dymo.html)

---

<div class="post-metadata">

### Author: ![DM\_Slippin](https://avatars.discourse-cdn.com/v4/letter/d/a8b319/32.png) [@DM\_Slippin](https://discourse.processing.org/u/DM_Slippin)
#### Post date: [March 8, 2019, 5:25pm UTC](https://discourse.processing.org/t/wrapping-a-sentence-around-a-circle-letter-by-letter/9056/14 "2019-03-08T17:25:27Z")

</div>

@monkstone I took a look at your link there, but I’m confused on how this helps me. Btw, your design is very nice I must say!

Update: I have downloaded Geomerative yet I’m having trouble opening any of the processing files in it, such as importing it. Some clarification on how to use it would be greatly appreciated. Also, which tutorial should I review to help gain a sense of my issue on my own program?

---

<div class="post-metadata">

### Author: ![monkstone](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/monkstone/32/64_2.png) [@monkstone](https://discourse.processing.org/u/monkstone)
#### Post date: [March 8, 2019, 7:22pm UTC](https://discourse.processing.org/t/wrapping-a-sentence-around-a-circle-letter-by-letter/9056/15 "2019-03-08T19:22:31Z")

</div>

Here is the [vanilla processing version](http://louisc.co.uk/?p=2686) that is well annotated. I was being lazy before just pointing you to my JRubyArt version. PS: I think you should be able install geomerative library from processing ide.

---

<div class="post-metadata">

### Author: ![DM\_Slippin](https://avatars.discourse-cdn.com/v4/letter/d/a8b319/32.png) [@DM\_Slippin](https://discourse.processing.org/u/DM_Slippin)
#### Post date: [March 8, 2019, 9:27pm UTC](https://discourse.processing.org/t/wrapping-a-sentence-around-a-circle-letter-by-letter/9056/16 "2019-03-08T21:27:57Z")

</div>

I’ve successfully installed Geomerative and have it functioning now. However, my assignment is required to be submitted in 1 hour and I don’t believe i’ll be meeting the deadline unfortunately. I will try using Geomerative to finish this up, that is if I can figure out how to use it, thanks for the effort anyway. Both of you have been a big help.

---

<div class="post-metadata">

### Author: ![monkstone](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/monkstone/32/64_2.png) [@monkstone](https://discourse.processing.org/u/monkstone)
#### Post date: [March 9, 2019, 6:18am UTC](https://discourse.processing.org/t/wrapping-a-sentence-around-a-circle-letter-by-letter/9056/17 "2019-03-09T06:18:02Z")

</div>

[https://forum.processing.org/one/topic/drawing-smooth-spiral.html](https://forum.processing.org/one/topic/drawing-smooth-spiral.html)

---

<div class="post-metadata">

### Author: ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)
#### Post date: [March 9, 2019, 2:08pm UTC](https://discourse.processing.org/t/wrapping-a-sentence-around-a-circle-letter-by-letter/9056/18 "2019-03-09T14:08:44Z")

</div>

still going backwards

```auto
//Quote around the circle
String quote = "Keeping in touch with the people that matter is important - G-EAZY";

int N = quote.length(); //Determines the quote length

float delta = TWO_PI / (N/5); //Spacing around the circle

float radius = N; //Radius of the circle

// in the first frame, it will draw 1 character, the second frame 2 characters, third frame is 3 characters, until its reached the end of the quote.
int upperBound=0; 

void setup() { //Start up
  size(800, 800); //Screen size
  smooth(); //Smooth letters
  textSize(30); //Font size
  frameRate(3);
  println(N);
}

void draw() {
  background(0); //Black screen
  fill(255); //White letters

  radius = 60;

  for (int i = 0; i<upperBound; i++) { //Position change for the quote
         
    float xPos = width/2+(radius) * cos(i* delta); //Calc the X position for each letter
    float yPos = height/2+(radius) * sin(i* delta); //Calc the Y position for each letter
    char aChar = quote.charAt(65-i); //Chooses which letter to draw
        
    pushMatrix(); //Saves current coordinate system

    translate(xPos, yPos); //Moves the X and Y position for each letter

    text(aChar+"", 0, 0); //Provides the text

    popMatrix(); //Restores prior coordinate system

    radius+=4.7;
  } //End of for

  if (upperBound<N)
    upperBound++;
  //
} //End of draw

```

---

<div class="post-metadata">

### Author: ![DM\_Slippin](https://avatars.discourse-cdn.com/v4/letter/d/a8b319/32.png) [@DM\_Slippin](https://discourse.processing.org/u/DM_Slippin)
#### Post date: [March 10, 2019, 4:54pm UTC](https://discourse.processing.org/t/wrapping-a-sentence-around-a-circle-letter-by-letter/9056/19 "2019-03-10T16:54:27Z")

</div>

@monkstone That link I found actually very helpful. I appreciate the reply and help, to bad it wasn’t sooner for me to finish my deadline. Thanks again 🙂

@Chrisir That actually worked beautifully! You nailed exactly what I wanted, thanks so much. I see the changes you made and how you figured it all out, so I’m happy to know what is required for next time. Thanks again so much for your help though, you’re very skilled in this art.

---

<div class="post-metadata">

### Author: ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)
#### Post date: [March 10, 2019, 5:45pm UTC](https://discourse.processing.org/t/wrapping-a-sentence-around-a-circle-letter-by-letter/9056/20 "2019-03-10T17:45:10Z")

</div>

new version 😉

```auto

//Quote around the circle
String quote = "Keeping in touch with the people that matter is important - G-EAZY";

int N = quote.length(); //Determines the quote length

float delta = TWO_PI / (N/5); //Spacing around the circle

float radius; //Radius of the circle

// in the first frame, it will draw 1 character, the second frame 2 characters, third frame is 3 characters, until its reached the end of the quote.// how many letters do we show? 
int upperBound=0; 

// angle 
float offset=0;

void setup() { //Start up
  size(800, 800); //Screen size
  smooth(); //Smooth letters
  textSize(30); //Font size
  frameRate(3);
  println(N);
}

void draw() {
  background(0); //Black screen
  fill(255); //White letters

  radius = 60;

  for (int i = 0; i<upperBound; i++) { //Position change for the quote

    float xPos = width/2+(radius) * cos(offset+i* delta); //Calc the X position for each letter
    float yPos = height/2+(radius) * sin(offset+i* delta); //Calc the Y position for each letter
    char aChar = quote.charAt(i); // quote.charAt(65-i); //Chooses which letter to draw

    textOneLetter(aChar, xPos, yPos); 

    radius+=4.9;
  } //End of for

  // how many letters do we show? 
  if (upperBound<N) {
    upperBound++; // increase
  }

  // angle offset 
  offset+=.1; 
  //
} //End of draw

void textOneLetter(char localChar, float x, float y) {
  pushMatrix(); //Saves new coordinate system
  translate(x, y); //Moves the X and Y position for each letter
  text(localChar, 0, 0); //Provides the text
  popMatrix(); //Restores prior coordinate system
}
//

```

[Next page](https://discourse.processing.org/t/wrapping-a-sentence-around-a-circle-letter-by-letter/9056.md?page=2)