Rename and refactor API

README.md

@@ -1,15 +1,25 @@
-# Charming Cell
+# Charming Terminal
 
-The P5 like JavaScript API for ASCII art.
+The terminal renderer for Charming.
 
 > [!NOTE]
 > The current next branch is implementing the new proposal API for production use. Please refer to the [python branch](https://github.com/charming-art/charming-cell/tree/python) for the released Python version.
 
+## Get started
 
-## Resources 📚
+```js
+import * as cm from "@charming-art/terminal";
 
-- Documentation - https://charmingjs.org/cell/
-- Examples - https://observablehq.com/d/18b3d6f3affff5bb
+const context = await new cm.Context().init({mode: "double", width: 520, height: 520});
+const I = Array.from({length: 240}, (_, i) => i);
+const A = I.map((i) => (i / 240) * 2 * Math.PI);
+const X = A.map((t) => context.cols() / 2 + 12 * Math.cos(t) * Math.cos(t * 3));
+const Y = A.map((t) => context.rows() / 2 + 12 * Math.sin(t) * Math.cos(t * 3));
+const S = I.map(() => cm.wide("🌟"));
+context.point(I, {x: X, y: Y, stroke: S});
+
+document.body.append(context.render());
+```
 
 ## License 📄
 

index.html

@@ -9,23 +9,15 @@
     <script src="./dist/charming-cell.umd.min.js" type="text/javascript"></script>
     <script>
       (async () => {
-        function Star(ctx) {
-          return {
-            mode: "double",
-            width: 520,
-            height: 520,
-            setup() {
-              for (let t = 0; t <= Math.PI * 2; t += Math.PI / 120) {
-                const x = ctx.cols() / 2 + 12 * Math.cos(t) * Math.cos(t * 3);
-                const y = ctx.rows() / 2 + 12 * Math.sin(t) * Math.cos(t * 3);
-                ctx.stroke(cm.wide("🌟"));
-                ctx.point(x, y);
-              }
-            },
-          };
-        }
+        const context = await new cm.Context().init({mode: "double", width: 520, height: 520});
+        const I = Array.from({length: 240}, (_, i) => i);
+        const A = I.map((i) => (i / 240) * 2 * Math.PI);
+        const X = A.map((t) => context.cols() / 2 + 12 * Math.cos(t) * Math.cos(t * 3));
+        const Y = A.map((t) => context.rows() / 2 + 12 * Math.sin(t) * Math.cos(t * 3));
+        const S = I.map(() => cm.wide("🌟"));
+        context.point(I, {x: X, y: Y, stroke: S});
 
-        document.body.append(await cm.cell(Star));
+        document.body.append(context.render());
       })();
     </script>
   </body>

package.json

@@ -1,6 +1,6 @@
 {
-  "name": "@charming-art/cell",
-  "description": "The creative coding language for ASCII Art.",
+  "name": "@charming-art/terminal",
+  "description": "The terminal renderer for Charming.",
   "version": "0.0.1",
   "author": {
     "name": "pearmini",

src/context/index.js

@@ -1,5 +1,5 @@
 import {context_init} from "./init.js";
-import {context_run} from "./run.js";
+import {context_render} from "./render.js";
 import {context_stroke} from "./stroke.js";
 import {context_point} from "./point.js";
 import {context_setup} from "./setup.js";
@@ -19,7 +19,7 @@ export function Context() {
 Object.defineProperties(Context.prototype, {
   setup: {value: context_setup, writable: true, configurable: true},
   init: {value: context_init, writable: true, configurable: true},
-  run: {value: context_run, writable: true, configurable: true},
+  render: {value: context_render, writable: true, configurable: true},
   stroke: {value: context_stroke, writable: true, configurable: true},
   point: {value: context_point, writable: true, configurable: true},
   rows: {value: context_rows, writable: true, configurable: true},

src/context/init.js

@@ -12,4 +12,5 @@ export async function context_init(options = {}) {
   this._terminal = terminal;
   this._renderer = renderer;
   this._terminal.background("#000");
+  return this;
 }

src/context/point.js

@@ -1,4 +1,7 @@
-export function context_point(x, y) {
-  this._renderer.point(x, y);
+export function context_point(I, {x: X, y: Y, stroke: S}) {
+  for (const i of I) {
+    this.stroke(S[i]);
+    this._renderer.point(X[i], Y[i]);
+  }
   return this;
 }

src/context/run.js → src/context/render.js

@@ -33,7 +33,7 @@ function draw() {
   }
 }
 
-export function context_run() {
+export function context_render() {
   this._setup?.(this);
   draw.call(this);
   return this._terminal.node();

src/index.js

@@ -1,2 +1,2 @@
-export {cell} from "./cell.js";
 export {wide} from "./wide.js";
+export {Context} from "./context/index.js";

test/apps/star.js

@@ -1,17 +1,12 @@
-import * as Cell from "@charming-art/cell";
+import * as cm from "@charming-art/terminal";
 
-export function Star(ctx) {
-  return {
-    mode: "double",
-    width: 520,
-    height: 520,
-    setup() {
-      for (let t = 0; t <= Math.PI * 2; t += Math.PI / 120) {
-        const x = ctx.cols() / 2 + 12 * Math.cos(t) * Math.cos(t * 3);
-        const y = ctx.rows() / 2 + 12 * Math.sin(t) * Math.cos(t * 3);
-        ctx.stroke(Cell.wide("🌟"));
-        ctx.point(x, y);
-      }
-    },
-  };
+export async function Star() {
+  const context = await new cm.Context().init({mode: "double", width: 520, height: 520});
+  const I = Array.from({length: 240}, (_, i) => i);
+  const A = I.map((i) => (i / 240) * 2 * Math.PI);
+  const X = A.map((t) => context.cols() / 2 + 12 * Math.cos(t) * Math.cos(t * 3));
+  const Y = A.map((t) => context.rows() / 2 + 12 * Math.sin(t) * Math.cos(t * 3));
+  const S = I.map(() => cm.wide("🌟"));
+  context.point(I, {x: X, y: Y, stroke: S});
+  return context.render();
 }

test/index.html

@@ -3,7 +3,6 @@
   <meta charset="utf-8" />
 </head>
 <script type="module">
-  import * as cm from "@charming-art/cell";
   import * as apps from "./apps/index.js";
 
   // UI
@@ -42,7 +41,7 @@
     if (typeof preClear === "function") preClear();
     if (isNode(preNode)) preNode.remove();
     const App = apps[select.value];
-    preNode = await cm.cell(App);
+    preNode = await App();
     if (isNode(preNode)) {
       document.body.appendChild(preNode);
     }

vite.config.js

@@ -9,7 +9,7 @@ export default defineConfig({
   },
   resolve: {
     alias: {
-      "@charming-art/cell": path.resolve("./src/index.js"),
+      "@charming-art/terminal": path.resolve("./src/index.js"),
       "../wasm/index_bg.wasm": "../wasm/index_bg.wasm?url",
     },
   },