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
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
}
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!!!
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
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
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
@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.
//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
@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.
//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
}
//
