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

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

``````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

1 Like

Almost there

You only need one for loop

with i

Should be

char aChar = quote.charAt(index);

1 Like

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;

``````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
}
``````

Almost there

Go for

text(aChar+““, …

1 Like

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

1 Like

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

1 Like

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!!!

Good good good!!!

Good!

Well done

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

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

``````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

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
``````
1 Like

You solved it?

What’s your problem now?

Movement ?

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;

``````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
``````

You might be interested in Ricard Marxer fantasic geomerative library to create more elegant results. See my JRubyArt example

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

Here is the vanilla processing version 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.

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.

still going backwards

``````//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

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

} //End of for

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

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

new version

``````
//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

// 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

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

} //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
}
//
``````
1 Like