commit 8472ef84246940edc3d8696d30a2d41d257846a8
parent 4b416023af95fa7bb2eedc4fd26243fbae884b51
Author: massi <mdsiboldi@gmail.com>
Date: Fri, 19 Jul 2024 05:02:02 -0700
renaming and naming
Diffstat:
15 files changed, 67 insertions(+), 112 deletions(-)
diff --git a/src/lib/ConstUnit.svelte b/src/lib/ConstUnit.svelte
@@ -1,22 +0,0 @@
-<script lang="ts">
- import { default as _UnitControl } from '$lib/UnitControl.svelte';
- import type { UnitId } from '$lib/types';
-
- export let id: UnitId;
-
- const kind = 'const';
- const UnitControl = _UnitControl<typeof kind>;
-
- $: common = { kind, id } as const;
-</script>
-
-<div>
- <h1>const</h1>
- <UnitControl {...common} controlName="value" />
-</div>
-
-<style>
- h1 {
- color: blue;
- }
-</style>
diff --git a/src/lib/ImgUnit.svelte b/src/lib/ImgUnit.svelte
@@ -11,12 +11,5 @@
</script>
<div>
- <h1>image of a turtle</h1>
<UnitControl {...common} controlName="speed" />
</div>
-
-<style>
- h1 {
- color: blue;
- }
-</style>
diff --git a/src/lib/LagUnit.svelte b/src/lib/LagUnit.svelte
@@ -11,16 +11,6 @@
</script>
<div>
- <h1>lag</h1>
<UnitControl {...common} controlName="signal" />
<UnitControl {...common} controlName="amount" />
</div>
-
-<style>
- h1 {
- padding: 0;
- font-size: 24px;
- margin: 0;
- color: pink;
- }
-</style>
diff --git a/src/lib/MathUnit.svelte b/src/lib/MathUnit.svelte
@@ -11,17 +11,7 @@
</script>
<div>
- <h1>math</h1>
<UnitControl {...common} controlName="a" />
<UnitControl {...common} controlName="op" />
<UnitControl {...common} controlName="b" />
</div>
-
-<style>
- h1 {
- padding: 0;
- font-size: 24px;
- margin: 0;
- color: grey;
- }
-</style>
diff --git a/src/lib/MathUnit.ts b/src/lib/MathUnit.ts
@@ -1,22 +0,0 @@
-<script lang="ts">
- import { default as _UnitControl } from '$lib/UnitControl.svelte';
- import type { UnitId } from '$lib/types';
-
- export let id: UnitId;
-
- const kind = 'const';
- const UnitControl = _UnitControl<typeof kind>;
-
- $: common = { kind, id } as const;
-</script>
-
-<div>
- <h1>const</h1>
- <UnitControl {...common} controlName="value" />
-</div>
-
-<style>
- h1 {
- color: blue;
- }
-</style>
diff --git a/src/lib/NoiseUnit.svelte b/src/lib/NoiseUnit.svelte
@@ -11,12 +11,5 @@
</script>
<div>
- <h1>noiseyboi</h1>
<UnitControl {...common} controlName="amount" />
</div>
-
-<style>
- h1 {
- color: green;
- }
-</style>
diff --git a/src/lib/NumberUnit.svelte b/src/lib/NumberUnit.svelte
@@ -0,0 +1,15 @@
+<script lang="ts">
+ import { default as _UnitControl } from '$lib/UnitControl.svelte';
+ import type { UnitId } from '$lib/types';
+
+ export let id: UnitId;
+
+ const kind = 'number';
+ const UnitControl = _UnitControl<typeof kind>;
+
+ $: common = { kind, id } as const;
+</script>
+
+<div>
+ <UnitControl {...common} controlName="value" />
+</div>
diff --git a/src/lib/OscUnit.svelte b/src/lib/OscUnit.svelte
@@ -11,16 +11,9 @@
</script>
<div>
- <h1>os-kill-8r</h1>
<UnitControl {...common} controlName="coarse" />
<UnitControl {...common} controlName="fine" />
<UnitControl {...common} controlName="superfine" />
<UnitControl {...common} controlName="amount" />
<UnitControl {...common} controlName="waveshape" />
</div>
-
-<style>
- h1 {
- color: red;
- }
-</style>
diff --git a/src/lib/Sink.svelte b/src/lib/Sink.svelte
@@ -12,6 +12,12 @@
$: classes = ['connect', _onSinkConnect && 'hl', connected && 'connected']
.filter(Boolean)
.join(' ');
+
+ const NAMES = {
+ l: 'lightness',
+ c: 'chroma',
+ h: 'hue'
+ };
</script>
<div class="sink" data-sink-ch={channel}>
@@ -19,7 +25,7 @@
<div class={classes} on:mouseup={_onSinkConnect} />
{/if}
<button class={Boolean(_onSinkConnect) ? 'hl' : ''}>
- {channel}: {Array.isArray(input) ? input.map((o) => o.id.substring(0, 5)).join(' + ') : 'none'}
+ {NAMES[channel]}
<Control {input} controlRange={RANGE.signal} {setInput} />
</button>
</div>
@@ -54,6 +60,6 @@
height: 40px;
padding: 10px 15px;
font-size: 16px;
- border-radius: 50%;
+ border-radius: 10%;
}
</style>
diff --git a/src/lib/SmoothUnit.svelte b/src/lib/SmoothUnit.svelte
@@ -11,13 +11,6 @@
</script>
<div>
- <h1>smoother</h1>
<UnitControl {...common} controlName="signal" />
<UnitControl {...common} controlName="frames" />
</div>
-
-<style>
- h1 {
- color: salmon;
- }
-</style>
diff --git a/src/lib/UnitMap.ts b/src/lib/UnitMap.ts
diff --git a/src/lib/engine.worker.ts b/src/lib/engine.worker.ts
@@ -130,7 +130,7 @@ function vUnit(x: { id: UnitId }): number {
const waveAmp = oscShapes[shapeIdx](position);
return wrangle(waveAmp * scalar, RANGE.pmone, RANGE.signal);
}
- case 'const': {
+ case 'number': {
return v(unit.controls.value);
}
case 'noise': {
diff --git a/src/lib/stores.ts b/src/lib/stores.ts
@@ -18,7 +18,7 @@ import { v4 as uuidv4 } from 'uuid';
import { writable } from 'svelte/store';
-const randConst = () => {
+const randNum = () => {
const sliderVal = Math.round(rescale(Math.random(), { min: 0, max: 1 }, RANGE.slider));
return rescale(sliderVal, RANGE.slider, RANGE.signal);
};
@@ -55,8 +55,8 @@ const mkUnitStore = () => {
addUnit<K extends UnitKind>(kind: K): UnitId {
let unit: Unit;
switch (kind) {
- case 'const': {
- unit = { kind: 'const', controls: { value: mkInput(0) }, pos: { x: 0, y: 0 } };
+ case 'number': {
+ unit = { kind: 'number', controls: { value: mkInput(0) }, pos: { x: 0, y: 0 } };
break;
}
case 'osc': {
diff --git a/src/lib/types.ts b/src/lib/types.ts
@@ -37,13 +37,13 @@ export type Pos = {
y: number;
};
-export const unitKinds = ['const', 'osc', 'noise', 'smooth', 'math', 'lag', 'img'] as const;
+export const unitKinds = ['number', 'osc', 'noise', 'smooth', 'math', 'lag', 'img'] as const;
export type UnitKind = (typeof unitKinds)[number];
type Corr<X, K extends keyof X> = { [P in K]: X[P] }[K];
export type Unit<K extends UnitKind = UnitKind> = Corr<UnitMap, K>;
type UnitMap = {
- const: ConstUnit;
+ number: NumberUnit;
osc: OscUnit;
noise: NoiseUnit;
smooth: SmoothUnit;
@@ -56,7 +56,7 @@ type UnitMap = {
const controlNames = {
osc: ['coarse', 'fine', 'superfine', 'amount', 'waveshape'] as const,
noise: ['amount'] as const,
- const: ['value'] as const,
+ number: ['value'] as const,
smooth: ['signal', 'frames'] as const,
math: ['a', 'op', 'b'] as const,
lag: ['signal', 'amount'] as const,
@@ -73,7 +73,7 @@ export type GenericUnit<K extends UnitKind> = {
pos: Pos;
controls: Controls<K>;
};
-export type ConstUnit = GenericUnit<'const'>;
+export type NumberUnit = GenericUnit<'number'>;
export type OscUnit = GenericUnit<'osc'>;
export type NoiseUnit = GenericUnit<'noise'>;
export type SmoothUnit = GenericUnit<'smooth'>;
@@ -167,7 +167,7 @@ export const unitRange: {
max: Object.keys(oscShapes).length - 1
}
},
- const: {
+ number: {
value: {
min: -5_000_000,
max: 5_000_000
@@ -206,6 +206,16 @@ export const unitRange: {
}
} as const;
+export const UNIT_NAMES: { [k in UnitKind]: string } = {
+ number: 'signal',
+ osc: 'oscillator',
+ noise: 'noise',
+ smooth: 'blur',
+ math: 'math',
+ lag: 'lag',
+ img: 'image oscillator'
+};
+
export function clamp(n: number, range: NumberRange) {
return Math.max(range.min, Math.min(range.max, n));
}
@@ -238,7 +248,7 @@ const isUnit =
export const is = {
unit: {
- const: isUnit('const'),
+ number: isUnit('number'),
osc: isUnit('osc'),
noise: isUnit('noise'),
smooth: isUnit('smooth'),
@@ -259,7 +269,7 @@ const ensureUnit = <K extends UnitKind>(k: K) => {
};
export const ensure = {
unit: {
- const: ensureUnit('const'),
+ number: ensureUnit('number'),
osc: ensureUnit('osc'),
noise: ensureUnit('noise'),
smooth: ensureUnit('smooth'),
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
@@ -3,13 +3,23 @@
import { onMount } from 'svelte';
import { debounce } from 'lodash';
import Sink from '$lib/Sink.svelte';
- import { COLS, ROWS, inp, rescale, RANGE, is, getUnit as _getUnit, unitKinds } from '$lib/types';
+ import {
+ COLS,
+ ROWS,
+ inp,
+ rescale,
+ RANGE,
+ is,
+ getUnit as _getUnit,
+ unitKinds,
+ UNIT_NAMES
+ } from '$lib/types';
import type {
Output,
Input,
Unit,
UnitId,
- ConstUnit,
+ NumberUnit,
Units,
Sinks,
UnitKind,
@@ -17,7 +27,7 @@
} from '$lib/types';
import OscUnitComponent from '$lib/OscUnit.svelte';
import NoiseUnitComponent from '$lib/NoiseUnit.svelte';
- import ConstUnitComponent from '$lib/ConstUnit.svelte';
+ import NumberUnitComponent from '$lib/NumberUnit.svelte';
import SmoothUnitComponent from '$lib/SmoothUnit.svelte';
import MathUnitComponent from '$lib/MathUnit.svelte';
import LagUnitComponent from '$lib/LagUnit.svelte';
@@ -25,6 +35,8 @@
import UnitDrag from '$lib/UnitDrag.svelte';
import Wires from '$lib/Wires.svelte';
+ const debug = false;
+
let cvs: HTMLCanvasElement | undefined;
// initialize worker
@@ -187,7 +199,9 @@
<div id="buttons">
{#each unitKinds as kind}
- <button on:click={() => unitStore.addUnit(kind)}>add {kind}</button>
+ {#if kind !== 'lag'}
+ <button on:click={() => unitStore.addUnit(kind)}>add {UNIT_NAMES[kind]}</button>
+ {/if}
{/each}
<button on:click={updateUrl}>save</button>
</div>
@@ -209,7 +223,9 @@
<div class="unit" style={`top: ${pos.y}px; left: ${pos.x}px`}>
<div data-unit-id={id}>
<UnitDrag {id}>
- <h2>{id.substring(0, 5)}-{unit.kind}</h2>
+ <h2>
+ {#if debug}{id.substring(0, 5)}-{/if}{UNIT_NAMES[unit.kind]}
+ </h2>
</UnitDrag>
<div
class="output-dragger"
@@ -218,8 +234,8 @@
handleSignalStart({ id });
}}
/>
- {#if unit.kind === 'const'}
- <ConstUnitComponent {id} />
+ {#if unit.kind === 'number'}
+ <NumberUnitComponent {id} />
{:else if unit.kind === 'osc'}
<OscUnitComponent {id} />
{:else if unit.kind === 'noise'}
