# Rotating text "|" vs rotating line

**URL:** <https://discourse.processing.org/t/rotating-text-vs-rotating-line/37762>\
**Category:** Coding Questions\
**Tags:** homework\
**Created:** [June 29, 2022, 7:50pm UTC](https://discourse.processing.org/t/rotating-text-vs-rotating-line/37762 "2022-06-29T19:50:32Z")\
**Posts on this page:** 11\
**Page:** 1

<div class="post-metadata">

**Author:** ![Erif](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/erif/32/15932_2.png) [@Erif](https://discourse.processing.org/u/Erif)\
**Post date:** [June 29, 2022, 7:50pm UTC](https://discourse.processing.org/t/rotating-text-vs-rotating-line/37762/1 "2022-06-29T19:50:33Z")

</div>

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?

```auto
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++) {
   rotate(radians(20));
   fill(c);
   textSize(3.75*i); //what would be this if using a line?
   text("|",0,0);
  }
}

```

---

<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:** [June 29, 2022, 7:56pm UTC](https://discourse.processing.org/t/rotating-text-vs-rotating-line/37762/2 "2022-06-29T19:56:13Z")

</div>

> [@Erif](#):
>
> I’ve tried creating a line by using x, y, radius, sin, cos, theta etc

this sounds interesting, can you post it

---

<div class="post-metadata">

**Author:** ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)\
**Post date:** [June 29, 2022, 8:06pm UTC](https://discourse.processing.org/t/rotating-text-vs-rotating-line/37762/3 "2022-06-29T20:06:52Z")

</div>

Hello @Erif ,

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

> [@Unexpected Character Movement](https://discourse.processing.org/t/unexpected-character-movement/16716):
>
> I am developing a sketch to graphically display GPS data coming from an Arduino. The sketch paints the background and “gauge” bezel and then calls various functions to fill in the face with appropriate data, . The compass function paint dots for 5 degree gradations in a circle inside the bezel. Following the dots the directional characters are displayed in a circle around the dots. Finally a pointer is painted. The first time through the function, all is well. The second time through the fun…

There is a trigonometry tutorial here:

[https://processing.org/tutorials/trig](https://processing.org/tutorials/trig)

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:

 ![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/d/1/d126ad7b2131df6dbca7bafb11f3091a9c4e55fc.png)

Should be:

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

Have fun!

`:)`

---

<div class="post-metadata">

**Author:** ![Erif](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/erif/32/15932_2.png) [@Erif](https://discourse.processing.org/u/Erif)\
**Post date:** [June 29, 2022, 8:07pm UTC](https://discourse.processing.org/t/rotating-text-vs-rotating-line/37762/4 "2022-06-29T20:07:07Z")

</div>

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?

```auto
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);
  
  rotate(radians(angle));
  angle+= 5;
  stroke(250,130,0);
  line(0-r/2, 0, x1-r/2, y1);
}

```

---

<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:** [June 29, 2022, 8:09pm UTC](https://discourse.processing.org/t/rotating-text-vs-rotating-line/37762/5 "2022-06-29T20:09:15Z")

</div>

```auto

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);
    rotate(radians(4*i));
    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();
  }
}

```

---

<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:** [June 29, 2022, 8:12pm UTC](https://discourse.processing.org/t/rotating-text-vs-rotating-line/37762/6 "2022-06-29T20:12:57Z")

</div>

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

```auto

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

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

```

---

<div class="post-metadata">

**Author:** ![Erif](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/erif/32/15932_2.png) [@Erif](https://discourse.processing.org/u/Erif)\
**Post date:** [June 29, 2022, 8:27pm UTC](https://discourse.processing.org/t/rotating-text-vs-rotating-line/37762/7 "2022-06-29T20:27:49Z")

</div>

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:  
 ![output](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/f/b/fb142367bfbe206e739bcef05d67f4264c56436f.png)

This with the line:

 ![output1](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/f/3/f3bda46fd6d261f3322978dd55e169284c28a7d9.png)

---

<div class="post-metadata">

**Author:** ![Erif](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/erif/32/15932_2.png) [@Erif](https://discourse.processing.org/u/Erif)\
**Post date:** [June 29, 2022, 8:30pm UTC](https://discourse.processing.org/t/rotating-text-vs-rotating-line/37762/8 "2022-06-29T20:30:53Z")

</div>

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 🙂

---

<div class="post-metadata">

**Author:** ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)\
**Post date:** [June 29, 2022, 9:01pm UTC](https://discourse.processing.org/t/rotating-text-vs-rotating-line/37762/9 "2022-06-29T21:01:53Z")

</div>

> [@Erif](#):
>
> 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!

See:

> [@Blurry Text Solution](https://discourse.processing.org/t/blurry-text-solution/11293):
>
> I was using different text sizes in a recent project and was getting blurry fonts. I solve this issue by setting the largest text size in setup() and problem solved! Here is the code I used to test this: /\* Project: Blurry Text Author: GLV Date: 2019-05-15 Version: 01 \*/ void settings() { size(1024, 768, P3D); } void setup() { textSize(128); // Set to largest text size used to prevent blurring of text } void draw() { background(0); text24(); t…

It’s a cool effect but not always intentional.

Before:  
 ![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/a/6/a66f5367083c989697f6290eaf5e83adb5e8c5a5.png)

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

![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/4/1/41bffc3346b822bf17842713ca9566c8b7c6bc52.png)

`:)`

---

<div class="post-metadata">

**Author:** ![Erif](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/erif/32/15932_2.png) [@Erif](https://discourse.processing.org/u/Erif)\
**Post date:** [June 30, 2022, 1:21pm UTC](https://discourse.processing.org/t/rotating-text-vs-rotating-line/37762/10 "2022-06-30T13:21:20Z")

</div>

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](https://forum.processing.org/two/discussion/3053/how-to-stretch-processing-sketch-window-resolution-whilst-maintaining-same-number-pixels-in-window) to stretch the sketch window but doesn’t work, that’s why trying with rotating a line that emulates the “|” bar.

---

<div class="post-metadata">

**Author:** ![Erif](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/erif/32/15932_2.png) [@Erif](https://discourse.processing.org/u/Erif)\
**Post date:** [June 30, 2022, 9:02pm UTC](https://discourse.processing.org/t/rotating-text-vs-rotating-line/37762/11 "2022-06-30T21:02:40Z")

</div>

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