Rotating text "|" vs rotating line

[Erif]

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

[Chrisir]

@Erif

I’ve tried creating a line by using x, y, radius, sin, cos, theta etc

this sounds interesting, can you post it

[glv]

Hello @Erif ,

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

Unexpected Character Movement

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

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!

:)

[Erif]

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

[Chrisir]

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

[Chrisir]

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

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

[Erif]

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:

[Erif]

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

[glv]

@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

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:

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

:)

[Erif]

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.

[Erif]

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!