Hi guys,
I’m a noob and I’ve made a sketch where by clicking you can shuffle through an alphabet’s glyphs and they get vertically and horizontally centered according to their size and the size of the sketch. I was stuck for a bit but I stumbled along untill I found some logic that works.
The sketch has an array that stores the different glyphs and I shuffle through them. Since I wanted to vertically center the glyphs and type glyphs have different heights, I figured I would need some code that could determine the height of each glyph. So I searched online and used some of the last code shared in this thread: https://forum.processing.org/two/discussion/19869/is-it-really-not-possible-to-determine-the-precise-height-of-a-text
With the height and width data being determined for each different glyph I then “position their midpoints” on the sketch’s midpoints by doing some simple math. Arriving at this solution took me a while. I worked casually on this over the weekend as an exercise.
Now I’m curious if there are better and simpler ways to making this work because along the way I got lost/confused and was missing some important info about the nuts and bolts of how the type glyphs and Processing work.
Could anyone share any other approaches?
Thanks
int i = 0; //change value to start at a different letter
char [] alphabet = {
'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm',
'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z'
};
void setup(){
size(600,600);
}
void draw(){
int xPos = width/2; //horizontal position where you want the glyphs to be centered
int yPos = height/2; //vertical position where you want the glyphs to be centered
int textSize = 400;
PFont typeface;
typeface = createFont("Arial",textSize);
PFont.Glyph glyph = typeface.getGlyph(alphabet[i]);
int t = glyph.topExtent;
int h = glyph.height;
int l = glyph.leftExtent;
int w = glyph.width;
int yMove = height/2-((yPos-t)+h/2);
int xMove = width/2-((xPos+l)+w/2);
background(255);
fill(0);
textFont(typeface);
textSize(textSize);
textLeading(0);
text(alphabet[i], width/2+xMove, height/2+yMove);
////////////////// lines for showing top limit and bottom limit of glyph
stroke(255,0,0);
line(0,(yPos-t)+yMove,width,(yPos-t)+yMove); //red line top of glyph
strokeWeight(5);
point((xPos+l)+xMove, (yPos-t)+yMove);
strokeWeight(1);
stroke(0,255,0);
line(0,((yPos-t)+h+yMove),width,((yPos-t)+h)+yMove); //green line height of glyph
//light blue line middle of glyph (helped during coding) comment out blue line (below) to see this one
stroke(0,255,255);
line(0,(((yPos-t)+h/2))+yMove,width,((yPos-t)+h/2)+yMove);
//////////////// line and point for showing center of "canvas"
strokeWeight(1);
stroke(0,0,255);
line(0,yPos,width,yPos); //blue line at vertical midpoint of canvas
strokeWeight(5);
point(width/2, height/2);
strokeWeight(1);
//////////////// glyph bounding box
noFill();
stroke(0,255,0);
rect((xPos+l)+xMove, (yPos-t)+yMove, w, h);
println(alphabet[i]+" "+"t:"+t+" "+" "+"h:"+h+" "+" "+"mouseY:"+mouseY);
println("yMove:"+yMove);
}
void mousePressed() {
////////////////// shuffle through glyphs in array
if(mouseX > width/2){
i = i+1;
} else {
i = i-1;
}
//////////////// ifs for controlling end behaviors when stepping through array
if(i == 26){
i = 0;
}
if(i < 0){
i = 25;
}
}
