From 00b9a7cefda7c2513a5ce76f1e8dfce1332d544b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E2=80=94?= <drcmda@gmail.com>
Date: Wed, 1 Nov 2023 00:23:10 +0100
Subject: [PATCH] fix: expose ascii font

---
 src/effects/ASCII.tsx | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/src/effects/ASCII.tsx b/src/effects/ASCII.tsx
index d0b7260e..0cf22f9e 100644
--- a/src/effects/ASCII.tsx
+++ b/src/effects/ASCII.tsx
@@ -47,6 +47,7 @@ void mainImage(const in vec4 inputColor, const in vec2 uv, out vec4 outputColor)
 `
 
 interface IASCIIEffectProps {
+  font?: string
   characters?: string
   fontSize?: number
   cellSize?: number
@@ -56,6 +57,7 @@ interface IASCIIEffectProps {
 
 class ASCIIEffect extends Effect {
   constructor({
+    font = 'arial',
     characters = ` .:,'-^=*+?!|0#X%WM@`,
     fontSize = 54,
     cellSize = 16,
@@ -75,12 +77,12 @@ class ASCIIEffect extends Effect {
     const charactersTextureUniform = this.uniforms.get('uCharacters')
 
     if (charactersTextureUniform) {
-      charactersTextureUniform.value = this.createCharactersTexture(characters, fontSize)
+      charactersTextureUniform.value = this.createCharactersTexture(characters, font, fontSize)
     }
   }
 
   /** Draws the characters on a Canvas and returns a texture */
-  public createCharactersTexture(characters: string, fontSize: number): THREE.Texture {
+  public createCharactersTexture(characters: string, font: string, fontSize: number): THREE.Texture {
     const canvas = document.createElement('canvas')
     const SIZE = 1024
     const MAX_PER_ROW = 16
@@ -95,7 +97,7 @@ class ASCIIEffect extends Effect {
     }
 
     context.clearRect(0, 0, SIZE, SIZE)
-    context.font = `${fontSize}px arial`
+    context.font = `${fontSize}px ${font}`
     context.textAlign = 'center'
     context.textBaseline = 'middle'
     context.fillStyle = '#fff'