ertdfgcvb · ChiliJohnson · May 14, 2021 · May 14, 2021 · May 14, 2021 · May 14, 2021
diff --git a/README.md b/README.md
@@ -12,3 +12,42 @@ Embedding examples:
 
 Playground manual, API and resources:  
 [play.ertdfgcvb.xyz/abc.html](https://play.ertdfgcvb.xyz/abc.html)
+
+## Installation & usage
+
+To install this package:
+
+```shell
+npm install https://github.com/ertdfgcvb/play.core
+```
+
+To import and run one of the examples:
+
+```javascript
+import { run } from "play.core/src/run.js";
+import * as program from "play.core/src/programs/demos/spiral.js";
+
+const settings = {
+  fps: 60,
+  element: document.querySelector("pre"),
+};
+
+run(program, settings).catch(function(e) {
+  console.warn(e.message);
+  console.log(e.error);
+});
+```
+
+## Building for `<script>` tags
+
+If you want to build a minified JS module for inclusion in a site using a `<script>` tag, you can use the `build` script, included in the package:
+
+```shell
+# Install this package (including build dependencies)
+npm install
+
+# Run the build script
+npm run build
+```
+
+This will create a `run.min.js` file which you can include in your site.
diff --git a/package.json b/package.json
@@ -0,0 +1,14 @@
+{
+  "name": "play.core",
+  "version": "1.0.0",
+  "repository": "https://github.com/ertdfgcvb/play.core.git",
+  "author": "andreas@ertdfgcvb.xyz",
+  "license": "Apache-2.0",
+  "devDependencies": {
+    "rollup": "^2.47.0",
+    "terser": "^5.7.0"
+  },
+  "scripts": {
+    "build": "$(npm bin)/rollup -i src/run.js --format es --name play | $(npm bin)/terser --compress --mangle --toplevel --timings --ecma 2015 > run.min.js"
+  }
+}
diff --git a/src/modules/exportframe.js b/src/modules/exportframe.js
@@ -8,7 +8,7 @@ Expects the canvas renderer as the active renderer.
 Tested on Safari, FF, Chrome
 */
 
-import {saveBlobAsFile} from '/src/modules/filedownload.js'
+import {saveBlobAsFile} from './filedownload.js'
 
 export function exportFrame(context, filename, from=1, to=from) {
 

diff --git a/src/modules/vec2.js b/src/modules/vec2.js
@@ -9,7 +9,7 @@
   the functions (except vec2()).
 - All function can be exported individually or grouped via default export.
 - For the default export use:
-	import * as Vec2 from '/src/modules/vec2.js'
+	import * as Vec2 from 'play.core/src/modules/vec2.js'
 */
 
 // Creates a vector

diff --git a/src/modules/vec3.js b/src/modules/vec3.js
@@ -9,7 +9,7 @@
   the functions (except vec3()).
 - All function can be exported individually or grouped via default export.
 - For the default export use:
-	import * as Vec3 from '/src/modules/vec3.js'
+	import * as Vec3 from 'play.core/src/modules/vec3.js'
 */
 
 // Creates a vector

diff --git a/src/programs/basics/cursor.js b/src/programs/basics/cursor.js
@@ -17,7 +17,7 @@ export function main(coord, context, cursor, buffer) {
 	return (coord.x + coord.y) % 2 ? '·' : ' '
 }
 
-import { drawInfo } from '/src/modules/drawbox.js'
+import { drawInfo } from '../../modules/drawbox.js'
 export function post(context, cursor, buffer) {
 	drawInfo(context, cursor, buffer, {
 		color : 'white', backgroundColor : 'royalblue', shadowStyle : 'gray'

diff --git a/src/programs/basics/how_to_draw_a_circle.js b/src/programs/basics/how_to_draw_a_circle.js
@@ -5,7 +5,7 @@
 @desc   Use of context.metrics.aspect
 */
 
-import { length } from '/src/modules/vec2.js'
+import { length } from '../../modules/vec2.js'
 
 export function main(coord, context, cursor, buffer) {
 
@@ -28,7 +28,7 @@ export function main(coord, context, cursor, buffer) {
 }
 
 // Draw some info
-import { drawBox } from '/src/modules/drawbox.js'
+import { drawBox } from '../../modules/drawbox.js'
 export function post(context, cursor, buffer) {
 	// Apply some rounding to the aspect for better output
 	const ar = cursor.pressed ? 1 : (''+context.metrics.aspect).substr(0, 8)

diff --git a/src/programs/basics/how_to_draw_a_square.js b/src/programs/basics/how_to_draw_a_square.js
@@ -5,7 +5,7 @@
 @desc   Draw a square using a distance function
 */
 
-import { map } from '/src/modules/num.js'
+import { map } from '../../modules/num.js'
 
 // Set framerate to 60
 export const settings = { fps : 60 }
@@ -50,7 +50,7 @@ export function main(coord, context, cursor, buffer) {
 	// return d == 0 ? (coord.x % 2 == 0 ? '─' : '┼') : (''+d).charAt(2)
 }
 
-import { drawInfo } from '/src/modules/drawbox.js'
+import { drawInfo } from '../../modules/drawbox.js'
 export function post(context, cursor, buffer) {
 	drawInfo(context, cursor, buffer, {
 		color : 'white', backgroundColor : 'royalblue', shadowStyle : 'gray'

diff --git a/src/programs/basics/performance_test.js b/src/programs/basics/performance_test.js
@@ -5,7 +5,7 @@
 @desc   Vertical vs horizontal changes impact FPS
 */
 
-import { map } from '/src/modules/num.js'
+import { map } from '../../modules/num.js'
 
 export const settings = { fps : 60 }
 
@@ -38,7 +38,7 @@ export function main(coord, context, cursor, buffer) {
 	}
 }
 
-import { drawInfo } from '/src/modules/drawbox.js'
+import { drawInfo } from '../../modules/drawbox.js'
 export function post(context, cursor, buffer) {
 	drawInfo(context, cursor, buffer)
 }
diff --git a/src/programs/basics/sequence_export.js b/src/programs/basics/sequence_export.js
@@ -5,7 +5,7 @@
 @desc   Export 10 frames as images
 */
 
-import { exportFrame } from '/src/modules/exportframe.js'
+import { exportFrame } from '../../modules/exportframe.js'
 
 // Important: the frame exporter works only with the canvas renderer.
 // Optional: reset the frame count and time at each new run!
@@ -41,7 +41,7 @@ export function main(coord, context, cursor, buffer) {
 }
 
 // Display some info (will also be exported!)
-import { drawInfo } from '/src/modules/drawbox.js'
+import { drawInfo } from '../../modules/drawbox.js'
 export function post(context, cursor, buffer) {
 	drawInfo(context, cursor, buffer, {
 		color : 'white', backgroundColor : 'royalblue', shadowStyle : 'gray'

diff --git a/src/programs/basics/time_frames.js b/src/programs/basics/time_frames.js
@@ -25,7 +25,7 @@ export function main(coord, context, cursor, buffer) {
 }
 
 // Display some info
-import { drawInfo } from '/src/modules/drawbox.js'
+import { drawInfo } from '../../modules/drawbox.js'
 export function post(context, cursor, buffer) {
 	drawInfo(context, cursor, buffer, {
 		color : 'white', backgroundColor : 'royalblue', shadowStyle : 'gray'

diff --git a/src/programs/basics/time_milliseconds.js b/src/programs/basics/time_milliseconds.js
@@ -24,7 +24,7 @@ export function main(coord, context, cursor, buffer) {
 	}
 }
 
-import { drawInfo } from '/src/modules/drawbox.js'
+import { drawInfo } from '../../modules/drawbox.js'
 
 // This function is called after the main loop and is useful
 // to manipulate the buffer; in this case with a window overlay.

diff --git a/src/programs/camera/camera_double_res.js b/src/programs/camera/camera_double_res.js
@@ -5,9 +5,9 @@
 @desc   Doubled vertical resolution input from camera
 */
 
-import { CSS3 } from '/src/modules/color.js'
-import Camera from '/src/modules/camera.js'
-import Canvas from '/src/modules/canvas.js'
+import { CSS3 } from '../../modules/color.js'
+import Camera from '../../modules/camera.js'
+import Canvas from '../../modules/canvas.js'
 
 const cam = Camera.init()
 const can = new Canvas()
@@ -48,7 +48,7 @@ export function main(coord, context, cursor, buffer) {
 	}
 }
 
-import { drawInfo } from '/src/modules/drawbox.js'
+import { drawInfo } from '../../modules/drawbox.js'
 export function post(context, cursor, buffer) {
 	drawInfo(context, cursor, buffer)
 }

diff --git a/src/programs/camera/camera_gray.js b/src/programs/camera/camera_gray.js
@@ -5,9 +5,9 @@
 @desc   Grayscale input from camera
 */
 
-import { sort } from '/src/modules/sort.js'
-import Camera from '/src/modules/camera.js'
-import Canvas from '/src/modules/canvas.js'
+import { sort } from '../../modules/sort.js'
+import Camera from '../../modules/camera.js'
+import Canvas from '../../modules/canvas.js'
 
 const cam = Camera.init()
 const can = new Canvas()
@@ -36,7 +36,7 @@ export function main(coord, context, cursor, buffer) {
 	return density[index]
 }
 
-import { drawInfo } from '/src/modules/drawbox.js'
+import { drawInfo } from '../../modules/drawbox.js'
 export function post(context, cursor, buffer) {
 	drawInfo(context, cursor, buffer)
 }

diff --git a/src/programs/camera/camera_rgb.js b/src/programs/camera/camera_rgb.js
@@ -5,10 +5,10 @@
 @desc   Color input from camera (quantised)
 */
 
-import { map } from '/src/modules/num.js'
-import { rgb2hex, rgb}  from '/src/modules/color.js'
-import Camera from '/src/modules/camera.js'
-import Canvas from '/src/modules/canvas.js'
+import { map } from '../../modules/num.js'
+import { rgb2hex, rgb}  from '../../modules/color.js'
+import Camera from '../../modules/camera.js'
+import Canvas from '../../modules/canvas.js'
 
 const cam = Camera.init()
 const can = new Canvas()
@@ -53,7 +53,7 @@ export function main(coord, context, cursor, buffer) {
 	}
 }
 
-import { drawInfo } from '/src/modules/drawbox.js'
+import { drawInfo } from '../../modules/drawbox.js'
 export function post(context, cursor, buffer) {
 	drawInfo(context, cursor, buffer)
 }
diff --git a/src/programs/contributed/color_waves.js b/src/programs/contributed/color_waves.js
@@ -32,7 +32,7 @@ export function main(coord, context, cursor){
 	}
 }
 
-import { drawInfo } from '/src/modules/drawbox.js'
+import { drawInfo } from '../../modules/drawbox.js'
 export function post(context, cursor, buffer){
 	drawInfo(context, cursor, buffer)
 }
diff --git a/src/programs/contributed/equal_tea_talk.js b/src/programs/contributed/equal_tea_talk.js
@@ -6,8 +6,8 @@
 See: http://www.hammersleyfoundation.org/index.php/artwork/computer-drawings/184-computer-drawings/331-equal-tea-talk
 */
 
-import { map, step, mod } from '/src/modules/num.js'
-import { vec2, mul, fract as fract2 } from '/src/modules/vec2.js'
+import { map, step, mod } from '../../modules/num.js'
+import { vec2, mul, fract as fract2 } from '../../modules/vec2.js'
 
 const chars = '#BEFTI_'.split('')
 

diff --git a/src/programs/contributed/ernst.js b/src/programs/contributed/ernst.js
@@ -5,8 +5,8 @@
 @desc   Inspired by Ernst Jandl, 1964
 */
 
-import { dist, vec2, length, add, mulN } from '/src/modules/vec2.js'
-import { map, smoothstep } from '/src/modules/num.js';
+import { dist, vec2, length, add, mulN } from '../../modules/vec2.js'
+import { ma
10000
p, smoothstep } from '../../modules/num.js';
 
 const { PI, atan2, floor, cos, max } = Math;
 
@@ -55,7 +55,7 @@ export function main(coord, context, cursor, buffer){
 	}
 }
 
-import { drawInfo } from '/src/modules/drawbox.js'
+import { drawInfo } from '../../modules/drawbox.js'
 export function post(context, cursor, buffer){
 	drawInfo(context, cursor, buffer)
 }

diff --git a/src/programs/contributed/game_of_life.js b/src/programs/contributed/game_of_life.js
@@ -8,7 +8,7 @@ Each frame of the animation depends on the previous frame. Code in the `pre()`
 function saves the previous frame so it can be used in `main()`.
 */
 
-import { dist, sub } from '/src/modules/vec2.js'
+import { dist, sub } from '../../modules/vec2.js'
 
 let prevFrame;
 let width, height;

diff --git a/src/programs/contributed/pathfinder.js b/src/programs/contributed/pathfinder.js
@@ -5,8 +5,8 @@
 @desc   Click to spawn new path segments
 */
 
-import { dist, sub } from '/src/modules/vec2.js'
-import * as v2 from '/src/modules/vec2.js'
+import { dist, sub } from '../../modules/vec2.js'
+import * as v2 from '../../modules/vec2.js'
 
 const vec2 = v2.vec2
 

diff --git a/src/programs/contributed/sand_game.js b/src/programs/contributed/sand_game.js
@@ -5,7 +5,7 @@
 @desc   Click to drop sand
 */
 
-import { dist, sub } from '/src/modules/vec2.js'
+import { dist, sub } from '../../modules/vec2.js'
 
 let prevFrame;
 let width, height;

diff --git a/src/programs/contributed/slime_dish.js b/src/programs/contributed/slime_dish.js
@@ -13,8 +13,8 @@ With inspiration from:
 - http://www.tech-algorithm.com/articles/nearest-neighbor-image-scaling
 */
 
-import * as v2 from '/src/modules/vec2.js'
-import { map } from '/src/modules/num.js'
+import * as v2 from '../../modules/vec2.js'
+import { map } from '../../modules/num.js'
 
 // Environment
 const WIDTH = 400;
@@ -156,7 +156,7 @@ export function main(coord, context, cursor, buffer, data) {
 	return char;
 }
 
-// import { drawInfo } from '/src/modules/drawbox.js'
+// import { drawInfo } from '../../modules/drawbox.js'
 // export function post(context, cursor, buffer) {
 // 	drawInfo(context, cursor, buffer)
 // }

diff --git a/src/programs/demos/chromaspiral.js b/src/programs/demos/chromaspiral.js
@@ -7,9 +7,9 @@ Inspired by this shader by scry
 https://www.shadertoy.com/view/tdsyRf
 */
 
-import { map } from '/src/modules/num.js'
-import { sort } from '/src/modules/sort.js'
-import { vec2, rot, add, mulN, addN, subN, length } from '/src/modules/vec2.js'
+import { map } from '../../modules/num.js'
+import { sort } from '../../modules/sort.js'
+import { vec2, rot, add, mulN, addN, subN, length } from '../../modules/vec2.js'
 
 const { min, sin, cos, floor } = Math
 
@@ -60,7 +60,7 @@ export function main(coord, context, cursor, buffer) {
 	}
 }
 
-import { drawInfo } from '/src/modules/drawbox.js'
+import { drawInfo } from '../../modules/drawbox.js'
 export function post(context, cursor, buffer) {
 	drawInfo(context, cursor, buffer)
 }
diff --git a/src/programs/demos/donut.js b/src/programs/demos/donut.js
@@ -76,7 +76,7 @@ export function pre(context, cursor, buffer) {
 	}
 }
 
-import { drawInfo } from '/src/modules/drawbox.js'
+import { drawInfo } from '../../modules/drawbox.js'
 export function post(context, cursor, buffer) {
 	drawInfo(context, cursor, buffer, {
 		color : 'white', backgroundColor : 'royalblue', shadowStyle : 'gray'

diff --git a/src/programs/demos/doom_flame.js b/src/programs/demos/doom_flame.js
@@ -5,9 +5,9 @@
 @desc   Oldschool flame effect
 */
 
-import { clamp, map } from '/src/modules/num.js'
-import { CSS4 } from '/src/modules/color.js'
-import { mix, smoothstep } from '/src/modules/num.js'
+import { clamp, map } from '../../modules/num.js'
+import { CSS4 } from '../../modules/color.js'
+import { mix, smoothstep } from '../../modules/num.js'
 
 export const settings = { fps : 30, backgroundColor : 'black', color : 'white' }
 
@@ -124,7 +124,7 @@ function valueNoise() {
 	}
 }
 
-import { drawInfo } from '/src/modules/drawbox.js'
+import { drawInfo } from '../../modules/drawbox.js'
 export function post(context, cursor, buffer) {
 	drawInfo(context, cursor, buffer)
 }