Fix broken characters and add more comments

examples/shaders/resources/shaders/glsl100/ascii.fs

@@ -1,6 +1,6 @@
 #version 100
 
-precision mediump float;
+precision highp float;
 
 // Input from the vertex shader
 varying vec2 fragTexCoord;
@@ -10,21 +10,30 @@ varying vec4 finalColor;
 
 uniform sampler2D texture0;
 uniform vec2 resolution;
+
+// Fontsize less then 9 may be not complete
 uniform float fontSize;
 
-float greyScale(in vec3 col) {
+float greyScale(in vec3 col)
+{
     return dot(col, vec3(0.2126, 0.7152, 0.0722));
 }
 
 float character(float n, vec2 p)
 {
-	p = floor(p * vec2(4.0, -4.0) + 2.5);
+    p = floor(p*vec2(-4.0, 4.0) + 2.5);
 
-	// Check if the coordinate is inside the 5x5 grid (0 to 4).
-	if (clamp(p.x, 0.0, 4.0) == p.x && clamp(p.y, 0.0, 4.0) == p.y) {
+    // Check if the calculated coordinate is inside the 5x5 grid (from 0.0 to 4.0).
+    if (clamp(p.x, 0.0, 4.0) == p.x && clamp(p.y, 0.0, 4.0) == p.y)
+    {
+        float a = floor(p.x + 0.5) + 5.0*floor(p.y + 0.5);
 
-		if (int(mod(n / exp2(p.x + 5.0 * p.y), 2.0)) == 1) {
-            return 1.0; // The bit is on, so draw this part of the character.
+        // This checked if the 'a'-th bit of 'n' was set.
+        float shifted_n = floor(n/pow(2.0, a));
+
+        if (mod(shifted_n, 2.0) == 1.0)
+        {
+            return 1.0; // The bit is on.
         }
     }
 
@@ -34,34 +43,40 @@ float character(float n, vec2 p)
 // -----------------------------------------------------------------------------
 // Main shader logic
 // -----------------------------------------------------------------------------
+
 void main() 
 {
-    vec2 charPixelSize = vec2(fontSize, fontSize * 1.8);
+    vec2 charPixelSize = vec2(fontSize, fontSize);
     vec2 uvCellSize = charPixelSize / resolution;
 
-    vec2 cellUV = floor(fragTexCoord / uvCellSize) * uvCellSize;
+    // The cell size is based on the fontSize set by application
+    vec2 cellUV = floor(fragTexCoord / uvCellSize)*uvCellSize;
 
     vec3 cellColor = texture2D(texture0, cellUV).rgb;
+
+    // Gray is used to define what character will be selected to draw
     float gray = greyScale(cellColor);
 
-	float n =  4096;
+	float n =  4096.0;
     
-    // limited character set
+    // Character set from https://www.shadertoy.com/view/lssGDj
+    // Create new bitmaps https://thrill-project.com/archiv/coding/bitmap/
     if (gray > 0.2) n = 65600.0;    // :
-	if (gray > 0.3) n = 163153.0;   // *
+	if (gray > 0.3) n = 18725316.0; // v
 	if (gray > 0.4) n = 15255086.0; // o 
 	if (gray > 0.5) n = 13121101.0; // &
 	if (gray > 0.6) n = 15252014.0; // 8
 	if (gray > 0.7) n = 13195790.0; // @
 	if (gray > 0.8) n = 11512810.0; // #
 
-    vec2 localUV = (fragTexCoord - cellUV) / uvCellSize; // Range [0.0, 1.0]
+    vec2 localUV = (fragTexCoord - cellUV)/uvCellSize; // Range [0.0, 1.0]
 
-    vec2 p = localUV * 2.0 - 1.0;
+    vec2 p = localUV*2.0 - 1.0; // Range [-1.0, 1.0]
 
     float charShape = character(n, p);
 
-    vec3 final_col = cellColor * charShape;
+    // cellColor and charShape will define the color of the char
+    vec3 color = cellColor*charShape;
 
-    gl_FragColor = vec4(final_col, 1.0);
+    gl_FragColor = vec4(color, 1.0);
 }

examples/shaders/resources/shaders/glsl120/ascii.fs

@@ -8,21 +8,30 @@ varying vec4 finalColor;
 
 uniform sampler2D texture0;
 uniform vec2 resolution;
+
+// Fontsize less then 9 may be not complete
 uniform float fontSize;
 
-float greyScale(in vec3 col) {
+float greyScale(in vec3 col)
+{
     return dot(col, vec3(0.2126, 0.7152, 0.0722));
 }
 
 float character(float n, vec2 p)
 {
-	p = floor(p * vec2(4.0, -4.0) + 2.5);
+    p = floor(p*vec2(-4.0, 4.0) + 2.5);
 
-	// Check if the coordinate is inside the 5x5 grid (0 to 4).
-	if (clamp(p.x, 0.0, 4.0) == p.x && clamp(p.y, 0.0, 4.0) == p.y) {
+    // Check if the calculated coordinate is inside the 5x5 grid (from 0.0 to 4.0).
+    if (clamp(p.x, 0.0, 4.0) == p.x && clamp(p.y, 0.0, 4.0) == p.y)
+    {
+        float a = floor(p.x + 0.5) + 5.0*floor(p.y + 0.5);
 
-		if (int(mod(n / exp2(p.x + 5.0 * p.y), 2.0)) == 1) {
-            return 1.0; // The bit is on, so draw this part of the character.
+        // This checked if the 'a'-th bit of 'n' was set.
+        float shifted_n = floor(n/pow(2.0, a));
+
+        if (mod(shifted_n, 2.0) == 1.0)
+        {
+            return 1.0; // The bit is on.
         }
     }
 
@@ -32,34 +41,40 @@ float character(float n, vec2 p)
 // -----------------------------------------------------------------------------
 // Main shader logic
 // -----------------------------------------------------------------------------
+
 void main() 
 {
-    vec2 charPixelSize = vec2(fontSize, fontSize * 1.8);
+    vec2 charPixelSize = vec2(fontSize, fontSize);
     vec2 uvCellSize = charPixelSize / resolution;
 
-    vec2 cellUV = floor(fragTexCoord / uvCellSize) * uvCellSize;
+    // The cell size is based on the fontSize set by application
+    vec2 cellUV = floor(fragTexCoord / uvCellSize)*uvCellSize;
 
     vec3 cellColor = texture2D(texture0, cellUV).rgb;
+
+    // Gray is used to define what character will be selected to draw
     float gray = greyScale(cellColor);
 
-	float n =  4096;
+	float n =  4096.0;
     
-    // limited character set
+    // Character set from https://www.shadertoy.com/view/lssGDj
+    // Create new bitmaps https://thrill-project.com/archiv/coding/bitmap/
     if (gray > 0.2) n = 65600.0;    // :
-	if (gray > 0.3) n = 163153.0;   // *
+	if (gray > 0.3) n = 18725316.0; // v
 	if (gray > 0.4) n = 15255086.0; // o 
 	if (gray > 0.5) n = 13121101.0; // &
 	if (gray > 0.6) n = 15252014.0; // 8
 	if (gray > 0.7) n = 13195790.0; // @
 	if (gray > 0.8) n = 11512810.0; // #
 
-    vec2 localUV = (fragTexCoord - cellUV) / uvCellSize; // Range [0.0, 1.0]
+    vec2 localUV = (fragTexCoord - cellUV)/uvCellSize; // Range [0.0, 1.0]
 
-    vec2 p = localUV * 2.0 - 1.0;
+    vec2 p = localUV*2.0 - 1.0; // Range [-1.0, 1.0]
 
     float charShape = character(n, p);
 
-    vec3 final_col = cellColor * charShape;
+    // cellColor and charShape will define the color of the char
+    vec3 color = cellColor*charShape;
 
-    gl_FragColor = vec4(final_col, 1.0);
+    gl_FragColor = vec4(color, 1.0);
 }

examples/shaders/resources/shaders/glsl330/ascii.fs

@@ -8,22 +8,24 @@ out vec4 finalColor;
 
 uniform sampler2D texture0;
 uniform vec2 resolution;
+
+// Fontsize less then 9 may be not complete
 uniform float fontSize;
 
-float greyScale(in vec3 col) {
+float greyScale(in vec3 col)
+{
     return dot(col, vec3(0.2126, 0.7152, 0.0722));
 }
 
-float character(float n, vec2 p)
+float character(int n, vec2 p)
 {
-	p = floor(p * vec2(4.0, -4.0) + 2.5);
+	p = floor(p*vec2(-4.0, 4.0) + 2.5);
 	
 	// Check if the coordinate is inside the 5x5 grid (0 to 4).
-	if (clamp(p.x, 0.0, 4.0) == p.x && clamp(p.y, 0.0, 4.0) == p.y) {
-        
-		if (int(mod(n / exp2(p.x + 5.0 * p.y), 2.0)) == 1) {
-            return 1.0; // The bit is on, so draw this part of the character.
-        }
+	if (clamp(p.x, 0.0, 4.0) == p.x && clamp(p.y, 0.0, 4.0) == p.y)
+    {
+        int a = int(round(p.x) + 5.0 * round(p.y));
+        if (((n >> a) & 1) == 1) return 1.0;
     }
 
 	return 0.0; // The bit is off, or we are outside the grid.
@@ -35,32 +37,36 @@ float character(float n, vec2 p)
 
 void main() 
 {
-    vec2 charPixelSize = vec2(fontSize, fontSize * 1.8);
+    vec2 charPixelSize = vec2(fontSize, fontSize);
     vec2 uvCellSize = charPixelSize / resolution;
 
-    vec2 cellUV = floor(fragTexCoord / uvCellSize) * uvCellSize;
+    // The cell size is based on the fontSize set by application
+    vec2 cellUV = floor(fragTexCoord / uvCellSize)*uvCellSize;
 
     vec3 cellColor = texture(texture0, cellUV).rgb;
+
+    // Gray is used to define what character will be selected to draw
     float gray = greyScale(cellColor);
 
-	float n =  4096;
+	int n =  4096;
     
-    // limited character set
-    if (gray > 0.2) n = 65600.0;    // :
-	if (gray > 0.3) n = 163153.0;   // *
-	if (gray > 0.4) n = 15255086.0; // o 
-	if (gray > 0.5) n = 13121101.0; // &
-	if (gray > 0.6) n = 15252014.0; // 8
-	if (gray > 0.7) n = 13195790.0; // @
-	if (gray > 0.8) n = 11512810.0; // #
+    // Character set from https://www.shadertoy.com/view/lssGDj
+    // Create new bitmaps https://thrill-project.com/archiv/coding/bitmap/
+    if (gray > 0.2) n = 65600;    // :
+	if (gray > 0.3) n = 18725316; // v
+	if (gray > 0.4) n = 15255086; // o 
+	if (gray > 0.5) n = 13121101; // &
+	if (gray > 0.6) n = 15252014; // 8
+	if (gray > 0.7) n = 13195790; // @
+	if (gray > 0.8) n = 11512810; // #
 
-    vec2 localUV = (fragTexCoord - cellUV) / uvCellSize; // Range [0.0, 1.0]
+    vec2 localUV = (fragTexCoord - cellUV)/uvCellSize; // Range [0.0, 1.0]
 
-    vec2 p = localUV * 2.0 - 1.0;
+    vec2 p = localUV*2.0 - 1.0; // Range [-1.0, 1.0]
 
     float charShape = character(n, p);
 
-    vec3 final_col = cellColor * charShape;
+    vec3 color = cellColor*charShape;
 
-    finalColor = vec4(final_col, 1.0);
+    finalColor = vec4(color, 1.0);
 }

examples/shaders/shaders_ascii_effect.c

@@ -48,12 +48,12 @@ int main(void)
     int fontSizeLoc = GetShaderLocation(shader, "fontSize");
 
     // Set the character size for the ASCII effect
-    float fontSize = 4.0f;
+    // fontsize should be 9 or more
+    float fontSize = 9.0f;
 
     // Send the updated values to the shader
     float resolution[2] = { (float)screenWidth, (float)screenHeight };
     SetShaderValue(shader, resolutionLoc, resolution, SHADER_UNIFORM_VEC2);
-    SetShaderValue(shader, fontSizeLoc, &fontSize, SHADER_UNIFORM_FLOAT);
 
     Vector2 circlePos = (Vector2){40.0f, (float)screenHeight * 0.5f};
     float circleSpeed = 1.0f;
@@ -67,20 +67,36 @@ int main(void)
     // Main game loop
     while (!WindowShouldClose())    // Detect window close button or ESC key
     {
+    
         // Update
         //----------------------------------------------------------------------------------
+        if (IsKeyPressed(KEY_LEFT) && fontSize > 9.0)
+        {
+            fontSize -= 1;  // Reduce fontSize
+        }
+
+        if (IsKeyPressed(KEY_RIGHT) && fontSize < 15.0)
+        {
+            fontSize += 1;  // Increase fontSize
+        }
+
         if (circlePos.x > 200.0f || circlePos.x < 40.0f) {
             circleSpeed *= -1;
         }
+
         circlePos.x += circleSpeed;
 
+        // Set fontsize for the shader
+        SetShaderValue(shader, fontSizeLoc, &fontSize, SHADER_UNIFORM_FLOAT);
+
         // Draw
         //----------------------------------------------------------------------------------
 
         BeginTextureMode(target);
             ClearBackground(WHITE); // The background of the scene itself
 
-            DrawTexture(fudesumi, 500, -30, WHITE);    // Using custom shader
+            // Samples Using custom shader
+            DrawTexture(fudesumi, 500, -30, WHITE);
             DrawTextureV(raysan, circlePos, WHITE);
 
         EndTextureMode();
@@ -99,7 +115,7 @@ int main(void)
             EndShaderMode();
 
             DrawRectangle(0, 0, screenWidth, 40, BLACK);
-            DrawText("Ascii effect", 120, 10, 20, LIGHTGRAY);
+            DrawText(TextFormat("Ascii effect - FontSize:%2.0f - [Left] -1 [Right] +1 ", fontSize), 120, 10, 20, LIGHTGRAY);
             DrawFPS(10, 10);
 
         EndDrawing();