naively draw letters with atlas

example-atlas/src/ofApp.cpp

@@ -1,13 +1,26 @@
 #include "ofApp.h"
+#include "conversion.h"
+#include "import-font.h"
+#include "ofAppRunner.h"
 #include "ofGraphicsBaseTypes.h"
 #include "ofUtils.h"
 
 //--------------------------------------------------------------
 void ofApp::setup(){
-    string fontName = "RobotoFlex.ttf";
+    //string fontName = "RobotoFlex.ttf";
-    string fontPath = "data/fonts/" + fontName;
+    //string fontPath = "data/fonts/" + fontName;
-    atlas.setup(fontPath);
+    //string fontPath = "data/celines-fonts/testing2VF.ttf";
+    string fontPath = "data/celines-fonts/Cottagecore.ttf";
+    ofxMsdfgen::AtlasSettings settings;
+    //settings.characters = "ABCDEFGHIJKL";
+    atlas.setup(fontPath, settings);
     atlasImage = atlas.getAtlasImage();
+    glyphGeometries = atlas.getGlyphGeometries();
+    #ifdef TARGET_EMSCRIPTEN
+        shader.load("ofxMsdfgen/shaders/simple/ES3/shader");
+    #else
+        shader.load("ofxMsdfgen/shaders/simple/GL3/shader");
+    #endif
 }
 
 //--------------------------------------------------------------
@@ -17,7 +30,7 @@ void ofApp::update(){
 
 //--------------------------------------------------------------
 void ofApp::draw(){
-    ofBackground(ofColor::black);
+    ofBackground(ofColor::lightBlue);
     ofPushMatrix();
     ofTranslate(
         ofMap(sin(ofGetElapsedTimeMillis() * 0.0001), -1, 1, 0, ofGetWidth() - atlasImage.getWidth()),
@@ -25,11 +38,64 @@ void ofApp::draw(){
         0);
     atlasImage.draw(0, 0);
     ofPopMatrix();
+
+    shader.begin();
+    shader.setUniformTexture("msdf", atlasImage.getTexture(), 0);
+    shader.setUniform4f("fontColor", ofFloatColor::white);
+
+    ofPushMatrix();
+    ofTranslate(40, 40, 0);
+    //ofScale(4, 4, 4);
+    string word = "";
+    float tx = 0;
+    float ty = 0;
+    //for(int c = 0; c < word.length(); c++){
+    //unicode_t character = word[c];
+    //const ofxMsdfgen::GlyphGeometry & glyphGeometry = glyphGeometries[0];
+    float pxRange = 2.0;
+    for(const auto & glyphGeometry : glyphGeometries){
+        //if(glyphGeometry.getCodepoint() == character){
+        word += glyphGeometry.getCodepoint();
+        float x = 0;
+        float y = 0;
+        float w = glyphGeometry.getBoxRect().w;
+        float h = glyphGeometry.getBoxRect().h;
+        glm::vec2 unitRange = glm::vec2(pxRange) / glm::vec2(w, h);
+        shader.setUniform2f("unitRange", unitRange);
+        float sx = glyphGeometry.getBoxRect().x;
+        float sy = glyphGeometry.getBoxRect().y;
+        float sw = glyphGeometry.getBoxRect().w;
+        float sh = glyphGeometry.getBoxRect().h;
+        if(tx + w > ofGetWidth()){
+            ty += 100;
+            tx = 0;
+        }
+        ofPushMatrix();
+        //ofTranslate(tx, ty, 0);
+        atlasImage.drawSubsection(x, y, w, h, sx, sy, sw, sh);
+        ofPopMatrix();
+        //ofTranslate(glyphGeometry.getAdvance() * atlas.settings.scale, 0, 0);
+        ofTranslate(atlas.settings.scale, 0, 0);
+        tx += glyphGeometry.getAdvance() * atlas.settings.scale;
+        //}
+    }
+    //}
+    ofPopMatrix();
+
+    shader.end();
+    ofPushStyle();
+    ofSetColor(ofColor::purple);
+    ofDrawBitmapString("pxRange: " + ofToString(pxRange) + "\n"
+                       + "glyph amount: " + ofToString(glyphGeometries.size()) + "\n"
+                       + "word: " + word + "\n"
+                       + "fps: " + ofToString(ofGetFrameRate()), 20, 20);
+    ofPopStyle();
 }
 
 //--------------------------------------------------------------
 void ofApp::keyPressed(int key){
     if(key == 's'){
+        atlasImage.save("web_atlasImage.png");
     }
 }
 

example-atlas/src/ofApp.h

@@ -1,6 +1,7 @@
 #pragma once
 
 #include "Atlas.h"
+#include "conversion.h"
 #include "ofMain.h"
 #include "ofxMsdfgen.h"
 
@@ -27,4 +28,6 @@ class ofApp : public ofBaseApp {
 
         ofxMsdfgen::Atlas atlas;
         ofImage atlasImage;
+        vector <ofxMsdfgen::GlyphGeometry> glyphGeometries;
+        ofShader shader;
 };