fragment-tools 0.2.13 → 0.2.15

package/README.md

@@ -1,19 +1,26 @@
 <h1 align="center">Fragment</h1>
-<div align="center">A web development environment for creative coding</div>
+<div align="center">A modern toolkit for creative coding</div>
 <br/>
 
-![Screen capture of Fragment, splitted in two columns, the left one has a centered canvas displaying squares arranged in a grid, the right column contains various controls for colors, variables and exports](https://github.com/raphaelameaume/fragment/raw/main/screenshot.png 'Screen Capture of Fragment')
+![Screen capture of Fragment, splitted in two columns, the left one has a canvas displaying circles arranged in a grid layout with chromatic aberration, grain and blur effects. The right column contains various controls for colors, circle and grid parameters and an export module with video capabilities](https://github.com/raphaelameaume/fragment/blob/dev/screenshot.jpg?raw=true 'Screen Capture of Fragment')
 
-`fragment` provides a simple API to work with `<canvas>`.
+Fragment lets you sketch, render, and export canvas-based graphics with ease, from quick experiments to production-ready visuals.
 
 ## Features
 
-- Multiple rendering modes: [Canvas 2D](https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API), [p5.js](https://github.com/processing/p5.js/), [three.js](https://github.com/mrdoob/three.js/), [WebGL fragment shaders](https://developer.mozilla.org/en-US/docs/Web/API/WebGLShader)
-- Built-in GUI from sketch files
-- Export `<canvas>` to images (.png, .webm, .jpg) or videos (.mp4, .webm, .gif) on the fly
-- Hot shader reloading & [glslify](https://github.com/glslify/glslify) support
-- Interactive sketches using _triggers_
-- Static build for production deployment
+- Start instantly using built-in templates for [Canvas 2D](https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API), [p5.js](https://github.com/processing/p5.js/), and [three.js](https://github.com/mrdoob/three.js/)
+- Generate live GUI controls directly from your sketch parameters
+- Reload GLSL shaders on the fly
+- Attach mouse, keyboard, and MIDI inputs directly from the interface or your code
+- Organize your creative workspace with flexible window layouts
+- Export your sketches as images or videos in standard formats
+- Build static bundles ready for production deployment
+
+## Specifications
+
+- Fast development and production builds powered by [Vite](https://vite.dev/)
+- Interactive command-line interface on top of [sade](https://github.com/lukeed/sade) and [clack](https://www.clack.cc/)
+- Video encoding in the browser with [Mediabunny](https://mediabunny.dev/)
 - TypeScript support
 
 ## Installation
@@ -33,14 +40,13 @@ npm install fragment-tools --global
 You should now be able to run `fragment` from your command line.
 
 ```bash
-fragment sketch.js --new
+fragment -v
 ```
 
 ### Installing locally
 
 ```bash
 npm install fragment-tools
-npx fragment sketch.js --new
 ```
 
 ## Usage
@@ -53,10 +59,13 @@ mkdir sketches
 cd sketches
 
 # Create a sketch from a template
-npx fragment ./sketch.js --new --template=2d
+npx fragment sketch.js --new --template=2d
 
 # or with TypeScript
-npx fragment ./sketch.ts --new --template=2d --typescript
+npx fragment sketch.ts --new --template=2d --typescript
+
+## Run an existing sketch
+npx fragment sketch.js
 ```
 
 Learn more about the available flag options in the [CLI docs](./docs/api/CLI.md).
@@ -67,37 +76,66 @@ This is an example of a sketch drawing a blue circle on a black background with
 
 ```js
 export let props = {
-  radius: {
-    value: 10,
-    params: {
-      min: 4,
-      max: 30,
-    },
-  },
+	background: {
+		value: '#0057B8', // create a color input GUI
+	},
+	fill: {
+		value: 'rgba(255, 215, 0, 1)', // create a color input GUI
+	},
+	size: {
+		value: 256, // create a number input GUI
+		params: {
+			min: 64, // add a range slider
+			max: 512,
+		},
+	},
+	shape: {
+		value: 'circle', // create a string input
+		params: {
+			options: ['circle', 'square'], // turns the input into a select with different options
+		},
+	},
 };
 
-export let update = ({ context, width, height }) => {
-  // draw background
-  context.fillStyle = '#000000';
-  context.fillRect(0, 0, width, height);
+export let update = ({ context, width, height, pixelRatio }) => {
+	// draw background
+	context.fillStyle = props.background.value;
+
+	const w = width * pixelRatio;
+	const h = height * pixelRatio;
 
-  // draw circle
-  const radius = props.radius.value;
+	context.fillRect(0, 0, w, h);
+
+	// draw circle
+	const shape = props.shape.value;
+	const size = props.size.value * pixelRatio;
+
+	context.fillStyle = props.fill.value;
+
+	if (shape === 'circle') {
+		context.beginPath();
+		context.arc(w * 0.5, h * 0.5, size, 0, 2 * Math.PI, false);
+		context.fill();
+	} else if (shape === 'square') {
+		context.fillRect(w * 0.5 - size, h * 0.5 - size, size * 2, size * 2);
+	}
+};
 
-  context.fillStyle = '#0000ff';
-  context.beginPath();
-  context.arc(width * 0.5, height * 0.5, radius, 0, 2 * Math.PI, false);
-  context.fill();
+export let rendering = '2d';
+export let fps = 0;
+export let name = 'Canvas2D Shape Example';
+export let buildConfig = {
+	resizing: 'window',
 };
 ```
 
-Learn how to write your own sketch by following the [Getting started](./docs/introduction/getting-started.md) guide, reading the [API docs](./docs/api/sketch.md) or the [examples](./examples/).
+Learn how to write your own sketch by following the [Getting started](./docs/introduction/getting-started.md) guide, reading the [API docs](./docs/api/sketch.md) or the other [examples](./examples/).
 
 ## Contributing
 
 If you find issues, please [file one](https://github.com/raphaelameaume/fragment/issues) with details on how to reproduce it.
 
-Feel free to reach out on [Twitter](https://twitter.com/raphaelameaume) if you want to discuss the project.
+Feel free to reach out on [Bluesky](https://bsky.app/profile/raphaelameaume.com) if you want to discuss the project.
 
 ## Running it locally
 

package/package.json

@@ -1,16 +1,13 @@
 {
   "name": "fragment-tools",
-  "version": "0.2.13",
+  "version": "0.2.15",
   "description": "A web development environment for creative coding",
   "main": "./src/index.js",
   "bin": {
     "fragment": "bin/index.js"
   },
   "scripts": {
-    "format": "prettier . --write",
-    "changeset:add": "changeset add",
-    "changeset:version": "changeset version",
-    "changeset:publish": "changeset publish"
+    "format": "prettier . --write"
   },
   "type": "module",
   "repository": {
@@ -36,11 +33,10 @@
     "milliparsec": "^5.1.0",
     "sade": "^1.8.1",
     "svelte": "^5.55.9",
-    "vite": "^8.0.14",
-    "ws": "^8.20.1"
+    "vite": "^8.1.0",
+    "ws": "^8.21.0"
   },
   "devDependencies": {
-    "@changesets/cli": "^2.29.7",
     "@svitejs/changesets-changelog-github-compact": "^1.2.0",
     "@types/node": "^25.9.1",
     "@types/p5": "^1.7.6",

package/src/cli/createConfig.js

@@ -129,7 +129,12 @@ export async function createConfig(
 				__DEV__: !build,
 			},
 			optimizeDeps: {
-				include: ['convert-length', 'changedpi'],
+				include: [
+					'convert-length',
+					'changedpi',
+					'gifenc',
+					'mediabunny',
+				],
 			},
 		}),
 		config.vite ?? {},

package/src/client/app/modules/Params.svelte

@@ -131,38 +131,40 @@
 		{/if}
 		{#if typeof sketchProps === 'object'}
 			{#snippet sketchField(index, key, prop)}
-				{@const {
-					hidden,
-					displayName,
-					value,
-					type,
-					disabled,
-					__initialValue: initialValue,
-				} = prop}
-				{#if !hidden}
-					<Field
-						context={sketch.key}
-						{key}
-						{displayName}
-						{value}
-						{initialValue}
-						{type}
-						{index}
-						{disabled}
-						bind:params={sketchProps[key].params}
-						bind:triggers={prop.triggers}
-						trackChanges
-						onclick={(event) => {
-							sketch.version++;
-							// value(event, sketch.params);
-						}}
-						onchange={(v) => {
-							if (v?.currentTarget && v?.type === 'change') {
-								v = v.currentTarget.value;
-							}
-							sketch.updateProp(key, v);
-						}}
-					/>
+				{#if prop}
+					{@const {
+						hidden,
+						displayName,
+						value,
+						type,
+						disabled,
+						__initialValue: initialValue,
+					} = prop}
+					{#if !hidden}
+						<Field
+							context={sketch.key}
+							{key}
+							{displayName}
+							{value}
+							{initialValue}
+							{type}
+							{index}
+							{disabled}
+							bind:params={sketchProps[key].params}
+							bind:triggers={prop.triggers}
+							trackChanges
+							onclick={(event) => {
+								sketch.version++;
+								// value(event, sketch.params);
+							}}
+							onchange={(v) => {
+								if (v?.currentTarget && v?.type === 'change') {
+									v = v.currentTarget.value;
+								}
+								sketch.updateProp(key, v);
+							}}
+						/>
+					{/if}
 				{/if}
 			{/snippet}
 			{#snippet sketchPropItem(index, item)}

package/src/client/app/renderers/FragmentRenderer.js

@@ -1,5 +1,5 @@
 import { fragment } from '../lib/gl';
-import { client } from '@fragment/client';
+import { client } from '../client';
 import { getShaderPath } from '../utils/glsl.utils';
 import { clearError } from '../state/errors.svelte';
 

package/src/client/app/renderers/P5GLRenderer.js

@@ -1,5 +1,5 @@
 import p5 from 'p5';
-import { client } from '@fragment/client';
+import { client } from '../client';
 import { getShaderPath } from '../utils/glsl.utils';
 import { clearError } from '../state/errors.svelte';
 
@@ -38,9 +38,15 @@ export let onMountPreview = ({
 	pixelRatio,
 }) => {
 	const p = new p5((sketch) => {
-		sketch.pixelDensity(pixelRatio);
 		sketch.setup = () => {
-			sketch.createCanvas(width, height, 'webgl', canvas);
+			const dpr = window.devicePixelRatio;
+			sketch.pixelDensity(pixelRatio);
+			sketch.createCanvas(
+				(width / dpr) * pixelRatio,
+				(height / dpr) * pixelRatio,
+				'webgl',
+				canvas,
+			);
 		};
 	}, container);
 

package/src/client/app/renderers/P5Renderer.js

@@ -34,9 +34,14 @@ export let onMountPreview = ({
 	pixelRatio,
 }) => {
 	const p = new p5((sketch) => {
-		sketch.pixelDensity(pixelRatio);
 		sketch.setup = () => {
-			sketch.createCanvas(width, height, canvas);
+			const dpr = window.devicePixelRatio;
+			sketch.pixelDensity(pixelRatio);
+			sketch.createCanvas(
+				(width / dpr) * pixelRatio,
+				(height / dpr) * pixelRatio,
+				canvas,
+			);
 		};
 	}, container);
 
@@ -52,10 +57,7 @@ export let onMountPreview = ({
 };
 
 /**
- * @param {MountParamsP5Renderer} params
- * @param {number} params.id
- * @param {HTMLCanvasElement} params.canvas
- * @param {HTMLDivElement} params.container
+ * @param {MountParamsP5Renderer & PreviewP5Renderer} params
  */
 export let onBeforeUpdatePreview = ({ id }) => {
 	const preview = previews.find((p) => p.id === id);

package/src/client/app/renderers/THREERenderer.js

@@ -1,5 +1,5 @@
 import { WebGLRenderer, Scene } from 'three';
-import { client } from '@fragment/client';
+import { client } from '../client';
 import { getShaderPath } from '../utils/glsl.utils';
 import { clearError } from '../state/errors.svelte';
 

package/src/client/app/state/Sketch.svelte.js

@@ -409,7 +409,13 @@ class Sketch {
 					collection.push(fieldgroup);
 				}
 
-				if (fieldgroup && isCurrent) {
+				if (
+					fieldgroup &&
+					isCurrent &&
+					!fieldgroup.children.some(
+						(c) => c.type === 'field' && c.key === key,
+					)
+				) {
 					fieldgroup.children.push({
 						type: 'field',
 						key,

package/src/client/app/triggers/shared.js

@@ -1,37 +1,47 @@
+import { getFileExtension, getFilename } from '../utils/file.utils';
+
 export const wildcard = '*';
+/** @type string[] */
 export let sketchFiles = [];
 
+/**
+ * @param {string[]} files
+ */
 export function assignSketchFiles(files) {
 	sketchFiles.push(...files);
 }
 
+/**
+ * Retrieves sketch key based on error stack traces
+ * @returns {string}
+ */
 export function getContext() {
-	let context;
+	let context = wildcard;
 
 	const { stack } = new Error();
 	const { url } = import.meta;
 
-	const callstack = stack.split('\n');
-	const index = callstack.findIndex((call) => call.includes(url));
+	if (stack) {
+		const callstack = stack.split('\n');
+		const index = callstack.findIndex((call) => call.includes(url));
 
-	if (index >= 0) {
-		callstack.splice(0, index + 1);
-	}
+		if (index >= 0) {
+			callstack.splice(0, index + 1);
+		}
 
-	for (let i = 0; i < callstack.length; i++) {
-		for (let j = 0; j < sketchFiles.length; j++) {
-			const sketchFile = sketchFiles[j];
+		for (let i = 0; i < callstack.length; i++) {
+			for (let j = 0; j < sketchFiles.length; j++) {
+				const sketchFile = getFilename(sketchFiles[j]);
+				const extension = getFileExtension(sketchFile);
+				const filename = sketchFile.split(`.${extension}`)[0];
 
-			if (callstack[i].includes(sketchFile)) {
-				context = sketchFile;
-				break;
+				if (callstack[i].includes(filename)) {
+					context = sketchFile;
+					break;
+				}
 			}
 		}
 	}
 
-	if (!context) {
-		context = wildcard;
-	}
-
 	return context;
 }