Several questions about studying fonts

beginners
#1

hi. I’m during studying about fonts. but lot of problems :sob:
It could be a basic problem, no matter how hard I try, I’m not sure.

1)

10
10778×896 3.54 KB

-I wanted to do something similar to the picture above.(that is working with p5js) so I think it similar with -> https://openframeworks.cc/documentation/graphics/ofTrueTypeFont/#show_getStringAsPoints, but I’m not satisfied with the result.(The circles are not evenly distributed and for some reason, the resolution seems to be a bit low. Like the picture below.)

08
08828×500 7.28 KB

**So can you share or give me a hint if you have a code that is similar to the result I want?** :disappointed_relieved:

2)

#include “ofApp.h”

//--------------------------------------------------------------
void ofApp::setup(){
ofBackground(0);

ofTrueTypeFont::setGlobalDpi(72);


myFont.load("LibreBaskerville-Bold.ttf", 90, false, false, true);
myFont.setLineHeight(18.0f);
myFont.setLetterSpacing(0.5);

}

//--------------------------------------------------------------
void ofApp::update(){

}

//--------------------------------------------------------------
void ofApp::draw(){

ofTranslate(ofGetWidth()/2, ofGetHeight()/2);


vector<ofPath> path = myFont.getStringAsPoints("hello", true, false);


for(int i = 0; i < path.size(); i++) {
    
    vector<ofPolyline> polylines = path[i].getOutline();
    
    for(int i = 0; i < path.size(); i++) {

        cout << polylines.size() << endl;

       for (int j = 0; j < polylines.size(); j++){
            for (int k = 0; k < polylines[j].size(); k+=5){
                ofSetColor(255);
                ofDrawCircle( polylines[j][k], 3);
            }
        }
    }

}

}

That’s the code I worked on. Another question is, I wanted to print out the ‘path[I].getOutLine()’ in the process of writing the code (through the cout) but it keeps getting error. Isn’t there a way to print out your own values and check them out?

Thank you for reading it. Please help me. :face_with_head_bandage:

#2

And I forgot one. What’s ‘ofTTFCharacter’? I found it while looking for codes related to the font, and when I try to implement the code, I get an error in the part.

#3

I think what’s happening is you are getting polylines that have some segments that are straight lines for some distance, and you’re only drawing circles on the end points? And, you’re skipping 4 out of every 5 points by incrementing the last loop by 5.

#4

thanks for reply. but I have already like that, but result is same. :thinking:

       for (int j = 0; j < polylines.size(); j++){
            for (int k = 0; k < polylines[j].size(); k++){
                ofSetColor(255);
                ofDrawCircle( polylines[j][k], 3);
            }
        }

What else did I make a mistake here?

#5

Drawing every point instead of every fifth point is only part of the issue. It does make a difference, if you compare closely.

The other issue though (I THINK) is that you are only drawing dots, so you get “connect the dots”, and there would be straight lines connecting some of those dots.

1 Like
#6

i.e. I think you may need to draw dotted lines between some of those points to get the effect you want. Maybe there’s a way to get it to give you that data that way, but I think that’s what’s going on there.

#7

I’ll give it a try. Thanks for your opinion! :muscle:

#8

You are right, when you have a straight line you will only get two points, begin and end.

But you can get a polyline with the points spaced N pixels, thats what you want.

https://openframeworks.cc/documentation/graphics/ofPolyline/#show_getResampledBySpacing

#9

@eyd you are drawing only the control points that the character is made of, you would need to draw dots along the contour path instead. as others have pointed out, the path is the connecting lines between the corner points,

I made an example to extract paths and points from typefaces here - it may be useful - , also check out the examples in the oF install…

1 Like
#10

this examples draws the points and also the contours - randomising the start and end points of the contour lines.

1 Like
#11

Thank you. I’ll check.

#12

Oh, I think your answer can solve the problem. Thank you for your answer. I will also refer to the code.