rough fonts wip

package.json

@@ -7,16 +7,20 @@
     "build": "next build",
     "start": "npx serve@latest out",
     "lint": "eslint --ext .js,.jsx,.ts,.tsx --ignore-path .gitignore .",
-    "lint:fix": "eslint --ext .js,.jsx,.ts,.tsx --ignore-path .gitignore . --fix"
+    "lint:fix": "eslint --ext .js,.jsx,.ts,.tsx --ignore-path .gitignore . --fix",
+    "process-font": "tsx ./scripts/fontToOpenType.ts"
   },
   "dependencies": {
     "next": "14.2.4",
+    "opentype.js": "1.3.4",
     "react": "^18",
     "react-dom": "^18",
-    "rough-react-wrapper": "1.0.2"
+    "rough-react-wrapper": "1.0.2",
+    "roughjs": "4.6.6"
   },
   "devDependencies": {
     "@types/node": "^20",
+    "@types/opentype.js": "1.3.8",
     "@types/react": "^18",
     "@types/react-dom": "^18",
     "@typescript-eslint/eslint-plugin": "7.15.0",
@@ -28,6 +32,7 @@
     "eslint-plugin-react": "7.34.3",
     "eslint-plugin-react-hooks": "4.6.2",
     "prettier": "3.3.2",
+    "tsx": "4.19.1",
     "typescript": "^5"
   }
 }

scripts/fontToOpenType.ts

@@ -0,0 +1,22 @@
+import fs from 'fs';
+
+import opentype from 'opentype.js';
+import path from 'path';
+
+const main = async () => {
+  const buffer = fs.readFileSync(
+    path.join(__dirname, 'LibreFranklin-Italic-VariableFont_wght.ttf')
+  );
+
+  const font = opentype.parse(buffer.buffer);
+
+  console.log(font);
+
+  const x = font.toArrayBuffer();
+
+  const typed = new Uint8Array(x);
+
+  fs.writeFileSync('ital.otf', typed, 'utf-8');
+};
+
+main();

src/components/Hex/Hex.tsx

@@ -1,6 +1,9 @@
+import opentype from 'opentype.js';
+
 import { Hexagram, Line } from '@utils/utils';
 import { HexLine } from '../HexLine/HexLine';
 import styles from './Hex.module.css';
+import { RoughText } from '../RoughText/RoughText';
 
 interface Props {
   hexagram: Hexagram;
@@ -15,6 +18,9 @@ export const Hex = ({ hexagram }: Props) => {
       <h1
         className={styles.title}
       >{`${hexagram.hexagramNumber}: ${hexagram.hexagramName}`}</h1>
+      <RoughText
+        text={`${hexagram.hexagramNumber}: ${hexagram.hexagramName}`}
+      />
 
       {hexagram.getLinesDescending().map((line: Line, i: number) => (
         <HexLine

src/components/IChingPage/IChingPage.tsx

@@ -1,11 +1,12 @@
 'use client';
-
+import opentype, { Font } from 'opentype.js';
 import styles from './IChingPage.module.css';
 
 import { Hexagram } from '@utils/utils';
 import { Hex } from '@components/Hex/Hex';
 import ReactRough, { Rectangle } from 'rough-react-wrapper';
 import { useViewport } from '../../hooks/useViewport';
+import { useEffect, useState } from 'react';
 
 // Fix types for wrapper to accept children
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -18,6 +19,22 @@ const changingHex = hexagram.getChangingHex();
 const IChingPage = () => {
   const { height, width } = useViewport();
 
+  const [font, setFont] = useState<Font>();
+
+  useEffect(() => {
+    const getFont = async () => {
+      const foo = await opentype.load('./ital.otf');
+      console.log({ font: foo });
+      setFont(foo);
+    };
+
+    getFont();
+  }, []);
+
+  if (!font) {
+    return;
+  }
+
   return (
     <main className={styles.iChingPageWrapper}>
       {height && width && (

src/components/RoughText/RoughText.tsx

@@ -0,0 +1,79 @@
+import React, { useEffect, useRef } from 'react';
+import opentype, { Font } from 'opentype.js';
+import rough from 'roughjs';
+
+interface Props {
+  text: string;
+}
+
+export const RoughText = ({ text }: Props) => {
+  const svgRef = useRef<SVGSVGElement>(null);
+
+  useEffect(() => {
+    const getOpenSans = async () => {
+      const foo = await opentype.load('./ital.otf');
+      return foo;
+    };
+
+    const getSVG = async () => {
+      const font = await getOpenSans();
+
+      const wordPath = font.getPath(text, 0, 0, 100);
+
+      const padding = 0;
+
+      const { x1, y1, x2, y2 } = wordPath.getBoundingBox();
+      const viewBox = [
+        x1 - padding,
+        y1 - padding,
+        x2 - x1 + padding * 2,
+        y2 - y1 + padding * 2,
+      ];
+
+      const d = wordPath.toPathData(2); //.replace(/(.{70,100}) /g, '$1\n')
+      const style = `height: auto; width: 100%; padding: 1em; box-sizing: border-box;`;
+      const svg = svgRef.current!;
+      svg.setAttributeNS(null, 'width', `${viewBox[2]}`);
+      svg.setAttributeNS(null, 'height', `${viewBox[3]}`);
+      svg.setAttributeNS(null, 'style', style);
+      svg.setAttributeNS(
+        null,
+        'viewBox',
+        viewBox.map(n => n.toFixed(0)).join(' ')
+      );
+
+      const rc = rough.svg(svg);
+
+      // roughOptions = {
+      //   maxRandomnessOffset: 2,
+      //   roughness: roughness,
+      //   bowing: 1,
+      //   stroke: strokeColor,
+      //   strokeWidth: strokeWidth,
+      //   curveTightness: 0,
+      //   curveFitting: 0.95,
+      //   curveStepCount: 10,
+      //   fillStyle: 'zigzag',
+      //   fillWeight: fillWeight,
+      //   fill: fillColor,
+      //   hachureAngle: hachureAngle,
+      //   hachureGap: hachureGap,
+      //   dashOffset: 0,
+      //   dashGap: 0,
+      //   zigzagOffset: 0,
+      //   seed: 0,
+      //   // combineNestedSvgPaths: false,
+      //   // disableMultiStroke: false,
+      //   // disableMultiStrokeFill: false
+      // };
+
+      svg.appendChild(rc.path(wordPath.toPathData(2)));
+
+      return svg;
+    };
+
+    getSVG();
+  }, []);
+
+  return <svg ref={svgRef}></svg>;
+};