# Rotating text "|" vs rotating line

Hi all,

I’ve been playing with rotating and looping the keyboard vertical bar, however when trying to replicate that by using a regular line I’m struggling with what it would be the equivalent to the textSize() function (length of the character). I’ve tried creating a line by using x, y, radius, sin, cos, theta etc but the ‘radius’ variable does not play the part of the textSize().

Any ideas?

``````color c = color(250,130,0);

void setup() {
size(800,800,P2D);
}

void draw() {
background(255);

translate(width/2,height/2);

for(int i = 1; i < 20; i++) {
fill(c);
textSize(3.75*i); //what would be this if using a line?
text("|",0,0);
}
}
``````

this sounds interesting, can you post it

Hello @Erif ,

This may give you some insight about aligning text and lines:

There is a trigonometry tutorial here:

It is not on main website but it is still available.

It is poorly formatted in places so keep an eye out for that!

For example:

Should be:

x = cosine(theta) * radius
y = sine(theta) * radius

Have fun!

`:)`

Sure! The idea is to create first a horizontal line positioned at the canvas’ center then rotate it from its center point and I guess later to increase it’s length as it rotates? kinda x1,y1 += 1 or something like that?

``````float r = 100;
float angle = 0;
float x1 = r * cos(angle);
float y1 = r * sin(angle);

void setup() {
size(800,800,P2D);
}

void draw() {
background(255);

translate(width/2,height/2);

angle+= 5;
stroke(250,130,0);
line(0-r/2, 0, x1-r/2, y1);
}
``````
``````

color c = color(250, 130, 0);

void setup() {
size(800, 800, P2D);
}

void draw() {
background(255);

float a=1;
for (int i = 1; i < 360/4; i++) {

pushMatrix();
translate(width/2, height/2);
fill(c);
// textSize(3.75*i); //what would be this if using a line?

translate(-a/2, 0);

//  text("|", 0, 0);
line(0, 0, a, 0);

a+=3.75;

popMatrix();
}
}
``````

thanks for that

• remember cos and sin require radians
• and cos and sin must be calculated in draw() - it’s not enough to place it before setup(), it will be executed once only and not throughout

my version

``````
float r = 100;
float angle = 0;
float x1 = r * cos(angle);
float y1 = r * sin(angle);

void setup() {
size(800, 800, P2D);
}

void draw() {
// background(255);

translate(width/2, height/2);

x1 = r * cos(radians(angle));
y1 = r * sin(radians(angle));

angle += 5;
stroke(250, 130, 0);
line(0-r/2, 0,
x1-r/2, y1);
}

``````

Yes you’re right! Thanks for that… I’ve been many hours in front of the computer trying stuff and might need some fresh eyes tomorrow lol

That was similar to what I had tried before however there’s some sort of ‘drag’ produced when rotating the keyboard bar (as it grows in size) that I don’t get with the line… will keep trying!

This is the text character rotating: This with the line:

Thanks @glv, yeah I’m kinda familiar with the Unit Circle functions and their relationships.
I’ll have a look tomorrow to the Character Movement example. Seems to need some proper time 1 Like

See:

It’s a cool effect but not always intentional.

Before: After… with `text(100)` in `setup()`: `:)`

Ah yeap kinda same problem here!

The issue with my output is that on a 800x800px size looks good, but I wanted to print that out to test definition and need at least a 6000x6000px, at which resolution I’m unable to replicate that figure I’ve tried to use the PGraphics solution mentioned here to stretch the sketch window but doesn’t work, that’s why trying with rotating a line that emulates the “|” bar.

Just for future reference, I’ve managed to get something similar by taking a different approach. The keyboard vertical bar can also be represented as a rectangle of w=1px and h=12px, which is the default font size. By rotating this you are in much more control of the parameters than using a keyboard symbol!
Thanks for the help! 1 Like