feat(examples): add rdom-canvas-basics demo

thi-ng · Apr 3, 2023 · e33c4ed · e33c4ed
1 parent fdd1ad2
commit e33c4ed
Show file tree

Hide file tree

Showing 8 changed files with 121 additions and 0 deletions.
diff --git a/assets/examples/rdom-canvas-basics.png b/assets/examples/rdom-canvas-basics.png
diff --git a/examples/rdom-canvas-basics/README.md b/examples/rdom-canvas-basics/README.md
@@ -0,0 +1,15 @@
+# rdom-canvas-basics
+
+![screenshot](https://raw.githubusercontent.com/thi-ng/umbrella/develop/assets/examples/rdom-canvas-basics.png)
+
+[Live demo](http://demo.thi.ng/umbrella/rdom-canvas-basics/)
+
+Please refer to the [example build instructions](https://github.com/thi-ng/umbrella/wiki/Example-build-instructions) on the wiki.
+
+## Authors
+
+- Karsten Schmidt
+
+## License
+
+&copy; 2023 Karsten Schmidt // Apache Software License 2.0
diff --git a/examples/rdom-canvas-basics/index.html b/examples/rdom-canvas-basics/index.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<link
+		rel="icon"
+		href='data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><text y=".9em" font-size="90">⛱️</text></svg>'
+    />
+	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1.0">
+	<meta http-equiv="X-UA-Compatible" content="ie=edge">
+	<title>rdom-canvas-basics · @thi.ng/umbrella</title>
+	<link href="https://unpkg.com/tachyons@4/css/tachyons.min.css" rel="stylesheet">
+	<style>
+	</style>
+</head>
+<body class="sans-serif">
+	<div id="app"></div>
+	<div><a class="link" href="https://github.com/thi-ng/umbrella/tree/develop/examples/rdom-canvas-basics">Source code</a></div>
+	<script type="module" src="/src/index.ts"></script>
+</body>
+</html>
diff --git a/examples/rdom-canvas-basics/package.json b/examples/rdom-canvas-basics/package.json
@@ -0,0 +1,31 @@
+{
+	"name": "@example/rdom-canvas-basics",
+	"version": "0.0.1",
+	"private": true,
+	"description": "Minimal rdom-canvas animation",
+	"repository": "https://github.com/thi-ng/umbrella",
+	"author": "Karsten Schmidt <k+npm@thi.ng>",
+	"license": "Apache-2.0",
+	"scripts": {
+		"start": "vite --open",
+		"build": "tsc && vite build --base='./'",
+		"preview": "vite preview --host --open"
+	},
+	"devDependencies": {
+		"typescript": "^5.0.2",
+		"vite": "^4.2.1"
+	},
+	"dependencies": {
+		"@thi.ng/geom": "workspace:^",
+		"@thi.ng/rdom": "workspace:^",
+		"@thi.ng/rdom-canvas": "workspace:^",
+		"@thi.ng/transducers": "workspace:^"
+	},
+	"browser": {
+		"process": false
+	},
+	"thi.ng": {
+		"readme": true,
+		"screenshot": "examples/rdom-canvas-basics.png"
+	}
+}
diff --git a/examples/rdom-canvas-basics/src/index.ts b/examples/rdom-canvas-basics/src/index.ts
@@ -0,0 +1,34 @@
+import { circle, group } from "@thi.ng/geom";
+import { $canvas } from "@thi.ng/rdom-canvas";
+import { fromRAF } from "@thi.ng/rstream";
+import { repeatedly } from "@thi.ng/transducers";
+
+// create geometry stream/subscription
+const geo = fromRAF().map((t) =>
+	// shape group w/ attribs
+	group(
+		{
+			// fill canvas w/ background color (see readme)
+			__background: "#0ff",
+		},
+		[
+			// create 10 circles
+			...repeatedly(
+				(i) =>
+					circle(
+						[
+							Math.sin(t * 0.01 + i * 0.5) * 150 + 300,
+							Math.sin(t * 0.03 + i * 0.5) * 150 + 300,
+						],
+						50,
+						// colors can be given as RGBA vectors or CSS
+						{ fill: [i * 0.1, 0, i * 0.05] }
+					),
+				10
+			),
+		]
+	)
+);
+
+// create & mount canvas component (w/ fixed size)
+$canvas(geo, [600, 600]).mount(document.getElementById("app")!);
diff --git a/examples/rdom-canvas-basics/src/vite-env.d.ts b/examples/rdom-canvas-basics/src/vite-env.d.ts
@@ -0,0 +1 @@
+/// <reference types="vite/client" />
diff --git a/examples/rdom-canvas-basics/tsconfig.json b/examples/rdom-canvas-basics/tsconfig.json
@@ -0,0 +1,6 @@
+{
+	"extends": "../tsconfig.json",
+	"include": ["src/**/*"],
+	"compilerOptions": {
+	}
+}
diff --git a/yarn.lock b/yarn.lock
@@ -1204,6 +1204,19 @@ __metadata:
   languageName: unknown
   linkType: soft
 
+"@example/rdom-canvas-basics@workspace:examples/rdom-canvas-basics":
+  version: 0.0.0-use.local
+  resolution: "@example/rdom-canvas-basics@workspace:examples/rdom-canvas-basics"
+  dependencies:
+    "@thi.ng/geom": "workspace:^"
+    "@thi.ng/rdom": "workspace:^"
+    "@thi.ng/rdom-canvas": "workspace:^"
+    "@thi.ng/transducers": "workspace:^"
+    typescript: ^5.0.2
+    vite: ^4.2.1
+  languageName: unknown
+  linkType: soft
+
 "@example/rdom-delayed-update@workspace:examples/rdom-delayed-update":
   version: 0.0.0-use.local
   resolution: "@example/rdom-delayed-update@workspace:examples/rdom-delayed-update"