fragment-tools 0.2.7 → 0.2.9

package/src/cli/templates/default/index.js

@@ -1,4 +1,4 @@
-export let props = {};
+export const props = {};
 
 /**
  * @param {object} params
@@ -8,7 +8,7 @@ export let props = {};
  * @param {number} params.height
  * @param {number} params.pixelRatio
  */
-export let init = ({ canvas, context, width, height }) => {};
+export const init = ({ canvas, context, width, height }) => {};
 
 /**
  * @param {object} params
@@ -23,8 +23,9 @@ export let init = ({ canvas, context, width, height }) => {};
  * @param {number} params.playhead
  * @param {number} params.playcount
  */
-export let update = ({ context, width, height, pixelRatio }) => {
-	context.clearRect(0, 0, width * pixelRatio, height * pixelRatio);
+export const update = ({ context, width, height, pixelRatio }) => {
+	context.fillStyle = 'rgb(0, 255, 0)';
+	context.fillRect(0, 0, width * pixelRatio, height * pixelRatio);
 };
 
 /**
@@ -34,6 +35,6 @@ export let update = ({ context, width, height, pixelRatio }) => {
  * @param {number} params.height
  * @param {number} params.pixelRatio
  */
-export let resize = ({ width, height }) => {};
+export const resize = ({ width, height }) => {};
 
-export let rendering = '2d';
+export const rendering = '2d';

package/src/cli/templates/default/index.ts

@@ -0,0 +1,20 @@
+import { Init, Rendering, Resize, Update } from '@fragment/types';
+import { defineProps } from '@fragment/types/utils';
+
+export const props = defineProps({});
+
+export const init: Init<'2d'> = ({}) => {};
+
+export const update: Update<'2d'> = ({
+	context,
+	width,
+	height,
+	pixelRatio,
+}) => {
+	context.fillStyle = 'rgb(0, 255, 0)';
+	context.fillRect(0, 0, width * pixelRatio, height * pixelRatio);
+};
+
+export const resize: Resize<'2d'> = ({}) => {};
+
+export const rendering: Rendering = '2d';

package/src/cli/templates/fragment-gl/fragment.fs

@@ -6,5 +6,5 @@ uniform vec2 uResolution;
 varying vec2 vUv;
 
 void main() {
-    gl_FragColor = vec4(1., 0., 0., 1.);
+    gl_FragColor = vec4(0., 1., 0., 1.);
 }

package/src/cli/templates/fragment-gl/index.js

@@ -11,7 +11,7 @@ let uniforms = {
  * @param {number} params.height
  * @param {number} params.pixelRatio
  */
-export let init = ({ frag }) => {
+export const init = ({ frag }) => {
 	frag.uniforms = uniforms;
 	frag.shader = fragmentShader;
 };
@@ -28,10 +28,10 @@ export let init = ({ frag }) => {
  * @param {number} params.playhead
  * @param {number} params.playcount
  */
-export let update = ({ frag, deltaTime }) => {
+export const update = ({ frag, deltaTime }) => {
 	uniforms.uTime.value += deltaTime;
 
 	frag.render();
 };
 
-export let rendering = 'fragment';
+export const rendering = 'fragment';

package/src/cli/templates/fragment-gl/index.ts

@@ -0,0 +1,20 @@
+import { Init, Rendering, Update } from '@fragment/types';
+
+import fragmentShader from './fragment.fs';
+
+const uniforms = {
+	uTime: { value: 0, type: 'float' }
+};
+
+export const init: Init<'fragment'> = ({ frag }) => {
+	frag.uniforms = uniforms;
+	frag.shader = fragmentShader;
+};
+
+export const update: Update<'fragment'> = ({ frag, deltaTime }) => {
+	uniforms.uTime.value += deltaTime;
+
+	frag.render();
+};
+
+export const rendering: Rendering = 'fragment';

package/src/cli/templates/p5/index.js

@@ -1,6 +1,6 @@
 import p5 from 'p5';
 
-export let props = {};
+export const props = {};
 
 /**
  * @param {object} params
@@ -10,7 +10,7 @@ export let props = {};
  * @param {number} params.height
  * @param {number} params.pixelRatio
  */
-export function setup({ p, width, height }) {}
+export const setup = ({ p, width, height }) => {};
 
 /**
  * @param {object} params
@@ -25,8 +25,8 @@ export function setup({ p, width, height }) {}
  * @param {number} params.playhead
  * @param {number} params.playcount
  */
-export function draw({ p }) {
-	p.background(255, 0, 0);
-}
+export const draw = ({ p }) => {
+	p.background(0, 255, 0);
+};
 
-export let rendering = 'p5';
+export const rendering = 'p5';

package/src/cli/templates/p5/index.ts

@@ -0,0 +1,14 @@
+import p5 from 'p5';
+
+import { Init, Rendering, Update } from '@fragment/types';
+import { defineProps } from '@fragment/types/utils';
+
+export const props = defineProps({});
+
+export const setup: Init<'p5'> = ({}) => {};
+
+export const draw: Update<'p5'> = ({ p }) => {
+	p.background(0, 255, 0);
+};
+
+export const rendering: Rendering = 'p5';

package/src/cli/templates/p5-webgl/fragment.fs

@@ -1,14 +1,12 @@
 precision mediump float;
 
-#define PI 3.141592653589793
-
 uniform float uTime;
 
 varying vec2 vUv;
 
 void main() {
     vec2 uv = vUv;
-	vec3 color = vec3(sin(uv.x * PI * 10. + uTime * 10.));
-    
+	vec3 color = vec3(0., 1., 0.);
+
     gl_FragColor = vec4(color, 1.0);
 }

package/src/cli/templates/p5-webgl/index.js

@@ -1,11 +1,8 @@
 import p5 from 'p5';
+
 import fragmentShader from './fragment.fs';
 
-export let props = {
-	backgroundColor: {
-		value: 'rgb(255, 0, 0)',
-	},
-};
+export let props = {};
 
 let shader;
 
@@ -17,7 +14,7 @@ let shader;
  * @param {number} params.height
  * @param {number} params.pixelRatio
  */
-export function setup({ p, width, height }) {
+export const setup = ({ p, width, height }) => {
 	shader = p.createShader(
 		/* glsl */ `
 attribute vec3 aPosition;
@@ -31,15 +28,14 @@ varying vec2 vUv;
 void main() {
     vUv = aTexCoord;
 
-	vec3 transformed = aPosition;
-    transformed.xy = transformed.xy - 1.;
-    
+	vec3 transformed = (aPosition - 0.5) * 2.;
+
     gl_Position = vec4(transformed, 1.);
 }
 `,
 		fragmentShader,
 	);
-}
+};
 
 /**
  * @param {object} params
@@ -54,14 +50,12 @@ void main() {
  * @param {number} params.playhead
  * @param {number} params.playcount
  */
-export function draw({ p, width, height, time }) {
-	p.background(props.backgroundColor.value);
-
+export const draw = ({ p, width, height, time }) => {
 	p.shader(shader);
 
 	shader.setUniform('uTime', time / 1000);
 
 	p.rect(0, 0, width, height);
-}
+};
 
-export let rendering = 'p5-webgl';
+export const rendering = 'p5-webgl';

package/src/cli/templates/p5-webgl/index.ts

@@ -0,0 +1,43 @@
+import p5, { type Shader } from 'p5';
+
+import { Init, Rendering, Update } from '@fragment/types';
+import { defineProps } from '@fragment/types/utils';
+
+import fragmentShader from './fragment.fs';
+
+export const props = defineProps({});
+
+let shader: Shader;
+
+export const setup: Init<'p5-webgl'> = ({ p }) => {
+	shader = p.createShader(
+		/* glsl */ `
+attribute vec3 aPosition;
+attribute vec2 aTexCoord;
+
+uniform mat4 uProjectionMatrix;
+uniform mat4 uModelViewMatrix;
+
+varying vec2 vUv;
+
+void main() {
+    vUv = aTexCoord;
+
+	vec3 transformed = (aPosition - 0.5) * 2.;
+
+    gl_Position = vec4(transformed, 1.);
+}
+`,
+		fragmentShader,
+	);
+};
+
+export const draw: Update<'p5-webgl'> = ({ p, width, height, time }) => {
+	p.shader(shader);
+
+	shader.setUniform('uTime', time / 1000);
+
+	p.rect(0, 0, width, height);
+};
+
+export const rendering: Rendering = 'p5-webgl';

package/src/cli/templates/three-fragment/fragment.fs

@@ -6,5 +6,5 @@ uniform vec2 uResolution;
 varying vec2 vUv;
 
 void main() {
-    gl_FragColor = vec4(1., 0., 0., 1.);
+    gl_FragColor = vec4(0., 1., 0., 1.);
 }

package/src/cli/templates/three-fragment/index.js

@@ -1,7 +1,12 @@
 import * as THREE from 'three';
+
 import fragmentShader from './fragment.fs';
 
+/** @type {THREE.Scene} */
+let scene;
+/** @type {THREE.OrthographicCamera} */
 let camera;
+
 let uniforms = {
 	uResolution: { value: new THREE.Vector2() },
 	uTime: { value: 0 },
@@ -16,7 +21,8 @@ let uniforms = {
  * @param {number} params.height
  * @param {number} params.pixelRatio
  */
-export let init = ({ scene, width, height }) => {
+export const init = ({ width, height }) => {
+	scene = new THREE.Scene();
 	camera = new THREE.OrthographicCamera(1, 1, 1, 1, 1, 1000);
 
 	let geometry = new THREE.BufferGeometry();
@@ -65,7 +71,7 @@ export let init = ({ scene, width, height }) => {
  * @param {number} params.playhead
  * @param {number} params.playcount
  */
-export let update = ({ renderer, scene, time, deltaTime }) => {
+export const update = ({ renderer, time, deltaTime }) => {
 	uniforms.uTime.value = time;
 
 	renderer.render(scene, camera);
@@ -80,7 +86,7 @@ export let update = ({ renderer, scene, time, deltaTime }) => {
  * @param {number} params.height
  * @param {number} params.pixelRatio
  */
-export let resize = ({ width, height, pixelRatio }) => {
+export const resize = ({ width, height, pixelRatio }) => {
 	uniforms.uResolution.value.x = width * pixelRatio;
 	uniforms.uResolution.value.y = height * pixelRatio;
 
@@ -92,4 +98,4 @@ export let resize = ({ width, height, pixelRatio }) => {
 	camera.updateProjectionMatrix();
 };
 
-export let rendering = 'three';
+export const rendering = 'three';

package/src/cli/templates/three-fragment/index.ts

@@ -0,0 +1,68 @@
+import * as THREE from 'three';
+
+import { Init, Rendering, Resize, Update } from '@fragment/types';
+
+import fragmentShader from './fragment.fs';
+
+let scene: THREE.Scene;
+let camera: THREE.OrthographicCamera;
+let uniforms = {
+	uResolution: { value: new THREE.Vector2() },
+	uTime: { value: 0 },
+};
+
+export const init: Init<'three'> = () => {
+	scene = new THREE.Scene();
+	camera = new THREE.OrthographicCamera(1, 1, 1, 1, 1, 1000);
+
+	const geometry = new THREE.BufferGeometry();
+	geometry.setAttribute(
+		'position',
+		new THREE.Float32BufferAttribute([-1, 3, 0, -1, -1, 0, 3, -1, 0], 3),
+	);
+	geometry.setAttribute(
+		'uv',
+		new THREE.Float32BufferAttribute([0, 2, 0, 0, 2, 0], 2),
+	);
+
+	const mesh = new THREE.Mesh(
+		geometry,
+		new THREE.RawShaderMaterial({
+			vertexShader: `
+        attribute vec3 position;
+        attribute vec2 uv;
+
+        varying vec2 vUv;
+
+        void main() {
+            vUv = uv;
+            gl_Position = vec4(position, 1.);
+        }
+        `,
+			fragmentShader,
+			uniforms,
+		}),
+	);
+
+	scene.add(mesh);
+};
+
+export const update: Update<'three'> = ({ renderer, time }) => {
+	uniforms.uTime.value = time;
+
+	renderer.render(scene, camera);
+};
+
+export const resize: Resize<'three'> = ({ width, height, pixelRatio }) => {
+	uniforms.uResolution.value.x = width * pixelRatio;
+	uniforms.uResolution.value.y = height * pixelRatio;
+
+	camera.left = -width * 0.5;
+	camera.right = width * 0.5;
+	camera.top = height * 0.5;
+	camera.bottom = -height * 0.5;
+
+	camera.updateProjectionMatrix();
+};
+
+export const rendering: Rendering = 'three';

package/src/cli/templates/three-orthographic/index.js

@@ -1,5 +1,8 @@
 import * as THREE from 'three';
 
+/** @type {THREE.Scene} */
+let scene;
+/** @type {THREE.OrthographicCamera} */
 let camera;
 
 /**
@@ -11,7 +14,10 @@ let camera;
  * @param {number} params.height
  * @param {number} params.pixelRatio
  */
-export let init = ({ scene, width, height }) => {
+export const init = ({ width, height }) => {
+	scene = new THREE.Scene();
+	scene.background = new THREE.Color(0x00ff00);
+
 	camera = new THREE.OrthographicCamera(1, 1, 1, 1, 1, 1000);
 	camera.position.z = 1;
 };
@@ -30,7 +36,7 @@ export let init = ({ scene, width, height }) => {
  * @param {number} params.playhead
  * @param {number} params.playcount
  */
-export let update = ({ renderer, scene, time, deltaTime }) => {
+export const update = ({ renderer, time, deltaTime }) => {
 	renderer.render(scene, camera);
 };
 
@@ -43,7 +49,7 @@ export let update = ({ renderer, scene, time, deltaTime }) => {
  * @param {number} params.height
  * @param {number} params.pixelRatio
  */
-export let resize = ({ width, height }) => {
+export const resize = ({ width, height }) => {
 	camera.left = -width * 0.5;
 	camera.right = width * 0.5;
 	camera.top = height * 0.5;
@@ -52,4 +58,4 @@ export let resize = ({ width, height }) => {
 	camera.updateProjectionMatrix();
 };
 
-export let rendering = 'three';
+export const rendering = 'three';

package/src/cli/templates/three-orthographic/index.ts

@@ -0,0 +1,29 @@
+import * as THREE from 'three';
+
+import { Init, Rendering, Resize, Update } from '@fragment/types';
+
+let scene: THREE.Scene;
+let camera: THREE.OrthographicCamera;
+
+export const init: Init<'three'> = ({}) => {
+	scene = new THREE.Scene();
+	scene.background = new THREE.Color(0x00ff00);
+
+	camera = new THREE.OrthographicCamera(1, 1, 1, 1, 1, 1000);
+	camera.position.z = 1;
+};
+
+export const update: Update<'three'> = ({ renderer }) => {
+	renderer.render(scene, camera);
+};
+
+export const resize: Resize<'three'> = ({ width, height }) => {
+	camera.left = -width * 0.5;
+	camera.right = width * 0.5;
+	camera.top = height * 0.5;
+	camera.bottom = -height * 0.5;
+
+	camera.updateProjectionMatrix();
+};
+
+export const rendering: Rendering = 'three';

package/src/cli/templates/three-perspective/index.js

@@ -1,5 +1,8 @@
 import * as THREE from 'three';
 
+/** @type {THREE.Scene} */
+let scene;
+/** @type {THREE.OrthographicCamera} */
 let camera;
 
 /**
@@ -11,7 +14,10 @@ let camera;
  * @param {number} params.height
  * @param {number} params.pixelRatio
  */
-export let init = ({ scene, width, height }) => {
+export const init = ({ width, height }) => {
+	scene = new THREE.Scene();
+	scene.background = new THREE.Color(0x00ff00);
+
 	camera = new THREE.PerspectiveCamera(45, 1, 0.1, 100);
 	camera.position.z = 10;
 	camera.lookAt(new THREE.Vector3());
@@ -31,7 +37,7 @@ export let init = ({ scene, width, height }) => {
  * @param {number} params.playhead
  * @param {number} params.playcount
  */
-export let update = ({ renderer, scene, time, deltaTime }) => {
+export const update = ({ renderer, time, deltaTime }) => {
 	renderer.render(scene, camera);
 };
 
@@ -44,9 +50,9 @@ export let update = ({ renderer, scene, time, deltaTime }) => {
  * @param {number} params.height
  * @param {number} params.pixelRatio
  */
-export let resize = ({ width, height }) => {
+export const resize = ({ width, height }) => {
 	camera.aspect = width / height;
 	camera.updateProjectionMatrix();
 };
 
-export let rendering = 'three';
+export const rendering = 'three';

package/src/cli/templates/three-perspective/index.ts

@@ -0,0 +1,26 @@
+import * as THREE from 'three';
+
+import { Init, Rendering, Resize, Update } from '@fragment/types';
+
+let scene: THREE.Scene;
+let camera: THREE.PerspectiveCamera;
+
+export const init: Init<'three'> = ({}) => {
+	scene = new THREE.Scene();
+	scene.background = new THREE.Color(0x00ff00);
+
+	camera = new THREE.PerspectiveCamera(45, 1, 0.1, 100);
+	camera.position.z = 10;
+	camera.lookAt(new THREE.Vector3());
+};
+
+export const update: Update<'three'> = ({ renderer }) => {
+	renderer.render(scene, camera);
+};
+
+export const resize: Resize<'three'> = ({ width, height }) => {
+	camera.aspect = width / height;
+	camera.updateProjectionMatrix();
+};
+
+export const rendering: Rendering = 'three';

package/src/cli/utils.js

@@ -7,6 +7,9 @@ import { log } from './log.js';
 /** @type {string} */
 export const packageManager = getPackageManager() || 'npm';
 
+/** @type {string} */
+export const __dirname = file('../..');
+
 /**
  * From https://github.com/sveltejs/kit/blob/main/packages/create-svelte/utils.js#L56
  */

package/src/client/app/components/HintRecord.svelte

@@ -25,10 +25,10 @@
 		height: 16px;
 		padding: 0 2px;
 
-		color: var(--color-red);
+		color: var(--fragment-color-red);
 		font-size: 10px;
 
-		border: 1px solid var(--color-red);
+		border: 1px solid var(--fragment-color-red);
 		border-radius: 2px;
 	}
 
@@ -40,7 +40,7 @@
 		height: var(--size);
 		margin: 0 3px 0 1px;
 
-		background-color: var(--color-red);
+		background-color: var(--fragment-color-red);
 		border-radius: 50%;
 
 		animation: fade 1s ease-in-out infinite;

package/src/client/app/hooks.js

@@ -2,19 +2,19 @@ import { rendering } from './state/rendering.svelte';
 import { sketchesManager } from './state/sketches.svelte';
 import { getContext } from './triggers/shared';
 
-export let onBeforeCapture = (listener, context = getContext()) => {
+export const onBeforeCapture = (listener, context = getContext()) => {
 	sketchesManager.sketches[context]?.onBeforeCapture(listener);
 };
 
-export let onAfterCapture = (listener, context = getContext()) => {
+export const onAfterCapture = (listener, context = getContext()) => {
 	sketchesManager.sketches[context]?.onAfterCapture(listener);
 };
 
-export let onBeforeRecord = (listener, context = getContext()) => {
+export const onBeforeRecord = (listener, context = getContext()) => {
 	sketchesManager.sketches[context]?.onBeforeRecord(listener);
 };
 
-export let onAfterRecord = (listener, context = getContext()) => {
+export const onAfterRecord = (listener, context = getContext()) => {
 	sketchesManager.sketches[context]?.onAfterRecord(listener);
 };
 
@@ -23,7 +23,7 @@ export let onAfterRecord = (listener, context = getContext()) => {
  * @param {object} options
  * @param {string} [options.filename]
  * @param {function} [options.pattern]
- * @param {exportDir} [options.pattern ]
+ * @param {exportDir} [options.pattern]
  */
 export async function screenshot({ filename, pattern, exportDir } = {}) {
 	const context = getContext();

package/src/client/app/lib/gl/Renderer.js

@@ -8,7 +8,7 @@ class Renderer {
 		premultipliedAlpha = false,
 		pixelRatio = window.devicePixelRatio,
 		webgl = 2,
-	}) {
+	} = {}) {
 		let gl;
 		let attributes = {
 			depth,

package/src/client/app/lib/gl/Texture.js

@@ -8,7 +8,7 @@ class Texture {
 	constructor(
 		gl,
 		{
-			image,
+			image = null,
 			name = '',
 			target = gl.TEXTURE_2D,
 			type = gl.UNSIGNED_BYTE,

package/src/client/app/lib/gl/index.js

@@ -9,7 +9,7 @@ export function fragment({
 	canvas = document.createElement('canvas'),
 	shader = defaultFragment,
 	uniforms = {},
-}) {
+} = {}) {
 	let _fragmentShader = shader;
 	let _vertexShader = defaultVertex;
 	let _uniforms = uniforms;
@@ -30,7 +30,7 @@ export function fragment({
 
 	let w, h, pr;
 
-	function resize({ width = w, height = h, pixelRatio = pr }) {
+	function resize({ width = w, height = h, pixelRatio = pr } = {}) {
 		renderer.setPixelRatio(pixelRatio);
 		renderer.setSize({ width, height });
 

package/src/client/app/modules/AudioAnalyser/Range.svelte

@@ -64,7 +64,7 @@
 		bottom: 0;
 		width: 1px;
 
-		background-color: var(--color-border-input);
+		background-color: var(--fragment-input-border-color);
 	}
 
 	.row {
@@ -83,7 +83,7 @@
 		width: 100%;
 		height: 100%;
 
-		background-color: var(--color-active);
+		background-color: var(--fragment-accent-color);
 		opacity: var(--opacity, 0);
 		border-radius: 2px;
 	}

package/src/client/app/modules/AudioAnalyser/Spectrum.svelte

@@ -25,8 +25,8 @@
 		grid-template-columns: repeat(10, 1fr);
 		padding: 0 3px;
 
-		border-radius: var(--border-radius-input);
-		background-color: var(--color-background-input);
-		box-shadow: inset 0 0 0 1px var(--color-border-input);
+		border-radius: var(--fragment-input-border-radius);
+		background-color: var(--fragment-input-background-color);
+		box-shadow: inset 0 0 0 1px var(--fragment-input-border-color);
 	}
 </style>