#22 Add workflow for running example programs

examples-config/color/color-grid.rollup.config.mjs

@@ -0,0 +1,79 @@
+/*
+ * Copyright (C) 2023 Brittni Watkins.
+ *
+ * This file is a part of brittni and the polar bear's Generative Art Project Template,
+ * which is released under the GNU Affero General Public License, Version 3.0.
+ * You may not use this file except in compliance with the license.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program. See LICENSE or go to
+ * https://www.gnu.org/licenses/agpl-3.0.en.html for full license details.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.
+ * See the GNU Affero General Public License for more details.
+ */
+
+import typescript from '@rollup/plugin-typescript';
+import commonjs from '@rollup/plugin-commonjs';
+import { nodeResolve } from '@rollup/plugin-node-resolve';
+import eslint from '@rollup/plugin-eslint';
+import terser from '@rollup/plugin-terser';
+import css from 'rollup-plugin-css-only';
+import html from '@rollup/plugin-html';
+import dev from 'rollup-plugin-dev';
+
+import { readFileSync } from 'node:fs';
+
+export default {
+    input: './examples/color/color-grid.ts',
+    output: {
+        dir: './dist',
+        format: 'umd',
+        name: 'Example:Color-Grid',
+        sourcemap: true,
+        preserveModules: false
+    },
+    plugins: [
+        typescript(),
+        commonjs(),
+        nodeResolve({
+            extensions: ['.ts']
+        }),
+        eslint({
+            include: [
+                './src/**/*.ts',
+                './*.ts'
+            ],
+            throwOnError: true,
+            throwOnWarning: true
+        }),
+        terser(),
+        exportFavicon(),
+        css({
+            output: 'bundle.css'
+        }),
+        html({
+            title: 'Example: Color Grid',
+            publicPath: './'
+        }),
+        dev({
+            dirs: ['./dist'],
+            host: '127.0.0.1',
+            spa: true
+        })
+    ]
+};
+
+function exportFavicon() {
+    return {
+        generateBundle() {
+            this.emitFile({
+                type: 'asset',
+                fileName: 'favicon.ico',
+                source: readFileSync('./assets/icon/favicon.ico')
+            });
+        }
+    };
+}

examples/color/color-grid.ts

@@ -0,0 +1,32 @@
+/*
+ * Copyright (C) 2023 Brittni Watkins.
+ *
+ * This file is a part of brittni and the polar bear's Generative Art Project Template,
+ * which is released under the GNU Affero General Public License, Version 3.0.
+ * You may not use this file except in compliance with the license.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program. See LICENSE or go to
+ * https://www.gnu.org/licenses/agpl-3.0.en.html for full license details.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.
+ * See the GNU Affero General Public License for more details.
+ */
+
+import { sketch } from "sketch";
+import { Color } from "common";
+
+sketch.draw = (): void => {
+    sketch.background(0, 255, 255);
+    sketch.rectMode(sketch.CENTER);
+
+    const colorA: Color = new Color(sketch, sketch.color(255));
+    sketch.fill(colorA.color);
+    sketch.rect(0, 0, 250, 250);
+
+    const colorB: Color = new Color(sketch);
+    sketch.fill(colorB.color);
+    sketch.rect(0, 0, 75, 75);
+}

package.json

@@ -1,29 +1,29 @@
 {
-  "name": "color-scheme-explorer",
-  "version": "0.0.0",
-  "description": "A project for creating and testing new color schemes for generative art projects.",
-  "main": "sketch.ts",
+  "name": "generative-art-project-template",
+  "version": "0.1.0",
+  "description": "A template for new brittni and the polar bear generative art projects using TypeScript with p5",
+  "main": "./src/sketch.ts",
   "scripts": {
-    "lint-tests": "npx eslint ./tests",
-
-    "build-and-test": "echo '(1/3): Removing old output'; rm -r ./dist ./zip ./tests-coverage; echo '(2/3): Building project'; rollup --config; echo '(3/3): Starting tests'; npx jest",
+    "test:lint": "npx eslint ./tests",
+    "test:build": "echo '(1/3): Removing old output'; rm -r ./dist ./zip ./tests-coverage; echo '(2/3): Building project'; rollup --config; echo '(3/3): Starting tests'; npx jest",
     "test": "echo '(1/1): Starting tests'; npx jest",
 
     "build": "echo '(1/2): Removing old output'; rm -r ./dist ./zip; echo '(2/2): Building project'; rollup --config",
 
-    "dev": "echo '(1/2): Removing old output'; rm -r ./dist ./zip; echo '(2/2): Building project and starting development server'; rollup --config --watch"
+    "start": "echo '(1/2): Removing old output'; rm -r ./dist ./zip; echo '(2/2): Building project and starting development server'; rollup --config --watch",
+
+    "example:color-grid:build": "sh ./scripts/color-grid.sh",
+    "example:color-grid:run": "sh ./scripts/color-grid.sh -d true"
   },
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/brittni-and-the-polar-bear/color-scheme-explorer.git"
+    "url": "git+https://github.com/brittni-and-the-polar-bear/generative-art-project-template.git"
   },
   "keywords": [
     "code art",
-    "color",
-    "color schemes",
-    "color palette",
     "generative art",
     "p5",
+    "template",
     "typescript"
   ],
   "author": {
@@ -44,7 +44,7 @@
   "bugs": {
     "url": "https://github.com/brittni-and-the-polar-bear/generative-art-project-template/issues"
   },
-  "homepage": "https://github.com/brittni-and-the-polar-bear/color-scheme-explorer#readme",
+  "homepage": "https://github.com/brittni-and-the-polar-bear/generative-art-project-template#readme",
   "dependencies": {
     "@types/p5": "^1.7.6",
     "p5": "^1.9.0",

rollup.config.mjs

@@ -16,13 +16,13 @@
  */
 
 import typescript from '@rollup/plugin-typescript';
-import commonjs from "@rollup/plugin-commonjs";
-import { nodeResolve } from "@rollup/plugin-node-resolve";
+import commonjs from '@rollup/plugin-commonjs';
+import { nodeResolve } from '@rollup/plugin-node-resolve';
 import eslint from '@rollup/plugin-eslint';
 import terser from '@rollup/plugin-terser';
 import css from 'rollup-plugin-css-only';
 import html from '@rollup/plugin-html';
-import analyzer from "rollup-plugin-analyzer";
+import analyzer from 'rollup-plugin-analyzer';
 import dev from 'rollup-plugin-dev';
 import zip from 'rollup-plugin-zip';
 
@@ -33,7 +33,7 @@ export default {
     output: {
         dir: './dist',
         format: 'umd',
-        name: 'ColorSchemeExplorer',
+        name: 'GenerativeArtTemplate',
         sourcemap: true,
         preserveModules: false
     },
@@ -54,7 +54,7 @@ export default {
             output: 'bundle.css'
         }),
         html({
-            title: 'Color Scheme Explorer',
+            title: 'Generative Art Template',
             publicPath: './'
         }),
         analyzer({

scripts/color-grid.sh

@@ -0,0 +1,39 @@
+#
+# Copyright (C) 2023 Brittni Watkins.
+#
+# This file is a part of brittni and the polar bear's Generative Art Project Template,
+# which is released under the GNU Affero General Public License, Version 3.0.
+# You may not use this file except in compliance with the license.
+#
+# You should have received a copy of the GNU Affero General Public License
+# along with this program. See LICENSE or go to
+# https://www.gnu.org/licenses/agpl-3.0.en.html for full license details.
+#
+# This program is distributed in the hope that it will be useful,
+# but WITHOUT ANY WARRANTY; without even the implied warranty of
+# MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.
+# See the GNU Affero General Public License for more details.
+#
+
+while getopts d: flag
+do
+  case "${flag}" in
+    d) dev=${OPTARG};;
+    *) dev="false";;
+  esac
+done
+
+echo 'Starting the /examples/color/color-grid.ts example.';
+
+echo '(1/2): Removing old output';
+
+rm -r ./dist ./zip;
+
+if [ "$dev" == "true" ]
+then
+  echo '(2/2): Building project and starting development server';
+  rollup --config ./examples-config/color/color-grid.rollup.config.mjs --watch;
+else
+  echo '(2/2): Building project';
+  rollup --config ./examples-config/color/color-grid.rollup.config.mjs;
+fi

src/sketch.ts

@@ -42,4 +42,6 @@ function sketch(p5: P5Lib): void {
     }
 }
 
-new P5Lib(sketch);
+const p5: P5Lib = new P5Lib(sketch);
+
+export { p5 as sketch };

tsconfig.json

@@ -3,18 +3,24 @@
     /* Language and Environment */
     "target": "es6",
     "paths": {
+      "assets": ["./assets"],
       "color": ["./src/common/color"],
       "color/factory": ["./src/common/color/factory"],
       "common": ["./src/common"],
       "p5-lib": ["./src/common/p5"],
       "random": ["./src/common/random"],
-      "range": ["./src/common/range"]
+      "range": ["./src/common/range"],
+      "sketch": ["./src/sketch"]
     },
 
     /* Modules */
     "module": "es6",
     "moduleResolution": "node",
-    "rootDirs": ["./src", "./tests"],
+    "rootDirs": [
+      "./src",
+      "./tests",
+      "./examples"
+    ],
 
     /* Emit */
     "outDir": "./dist",