fragment-tools 0.1.13 → 0.1.15

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (184) hide show
  1. package/.prettierignore +1 -2
  2. package/.prettierrc +23 -7
  3. package/README.md +28 -9
  4. package/bin/index.js +70 -10
  5. package/package.json +14 -6
  6. package/src/cli/build.js +125 -0
  7. package/src/cli/create.js +238 -0
  8. package/src/cli/createConfig.js +82 -0
  9. package/src/cli/createFragmentFile.js +70 -0
  10. package/src/cli/getEntries.js +85 -0
  11. package/src/cli/log.js +36 -24
  12. package/src/cli/plugins/check-dependencies.js +88 -42
  13. package/src/cli/plugins/hot-shader-replacement.js +408 -0
  14. package/src/cli/plugins/hot-sketch-reload.js +21 -25
  15. package/src/cli/plugins/save.js +101 -0
  16. package/src/cli/preview.js +55 -0
  17. package/src/cli/prompts.js +260 -0
  18. package/src/cli/run.js +131 -0
  19. package/src/cli/templates/blank/index.js +33 -0
  20. package/src/cli/templates/blank/meta.json +4 -0
  21. package/src/cli/templates/default/index.js +39 -0
  22. package/src/cli/templates/default/meta.json +5 -0
  23. package/src/cli/templates/fragment-gl/index.js +37 -0
  24. package/src/cli/templates/fragment-gl/meta.json +4 -0
  25. package/src/cli/templates/p5/index.js +32 -0
  26. package/src/cli/templates/p5/meta.json +5 -0
  27. package/src/cli/templates/p5-webgl/fragment.fs +14 -0
  28. package/src/cli/templates/p5-webgl/index.js +67 -0
  29. package/src/cli/templates/p5-webgl/meta.json +5 -0
  30. package/src/cli/templates/three-fragment/fragment.fs +10 -0
  31. package/src/cli/templates/three-fragment/index.js +95 -0
  32. package/src/cli/templates/three-fragment/meta.json +5 -0
  33. package/src/cli/templates/three-orthographic/index.js +55 -0
  34. package/src/cli/templates/three-orthographic/meta.json +5 -0
  35. package/src/cli/templates/three-perspective/index.js +52 -0
  36. package/src/cli/templates/three-perspective/meta.json +5 -0
  37. package/src/cli/utils.js +70 -0
  38. package/src/cli/ws.js +87 -78
  39. package/src/client/app/App.svelte +3 -3
  40. package/src/client/app/client.js +55 -39
  41. package/src/client/app/components/IconCross.svelte +18 -18
  42. package/src/client/app/components/Init.svelte +40 -8
  43. package/src/client/app/components/KeyBinding.svelte +22 -22
  44. package/src/client/app/helpers.js +42 -0
  45. package/src/client/app/hooks.js +20 -0
  46. package/src/client/app/inputs/Input.js +9 -9
  47. package/src/client/app/inputs/Keyboard.js +13 -15
  48. package/src/client/app/inputs/MIDI.js +14 -15
  49. package/src/client/app/inputs/Mouse.js +1 -1
  50. package/src/client/app/inputs/Webcam.js +89 -88
  51. package/src/client/app/lib/canvas-recorder/CanvasRecorder.js +41 -21
  52. package/src/client/app/lib/canvas-recorder/FrameRecorder.js +7 -6
  53. package/src/client/app/lib/canvas-recorder/H264Recorder.js +45 -0
  54. package/src/client/app/lib/canvas-recorder/MP4Recorder.js +7 -9
  55. package/src/client/app/lib/canvas-recorder/WebMRecorder.js +3 -4
  56. package/src/client/app/lib/canvas-recorder/mp4.js +1649 -15
  57. package/src/client/app/lib/canvas-recorder/utils.js +33 -17
  58. package/src/client/app/lib/gl/Geometry.js +11 -8
  59. package/src/client/app/lib/gl/Program.js +38 -19
  60. package/src/client/app/lib/gl/Renderer.js +163 -156
  61. package/src/client/app/lib/gl/Texture.js +113 -85
  62. package/src/client/app/lib/gl/index.js +12 -12
  63. package/src/client/app/lib/gl/utils.js +1 -3
  64. package/src/client/app/lib/helpers/frameDebounce.js +30 -30
  65. package/src/client/app/lib/loader/index.js +10 -10
  66. package/src/client/app/lib/loader/loadImage.js +15 -15
  67. package/src/client/app/lib/loader/loadScript.js +1 -1
  68. package/src/client/app/lib/paper-sizes.js +75 -76
  69. package/src/client/app/lib/presets.js +25 -5
  70. package/src/client/app/lib/tempo/Analyser.js +18 -17
  71. package/src/client/app/lib/tempo/Range.js +15 -12
  72. package/src/client/app/lib/tempo/index.js +34 -27
  73. package/src/client/app/modules/AudioAnalyser/Range.svelte +69 -72
  74. package/src/client/app/modules/AudioAnalyser/Spectrum.svelte +20 -19
  75. package/src/client/app/modules/AudioAnalyser.svelte +52 -35
  76. package/src/client/app/modules/Console/ConsoleLine.svelte +193 -172
  77. package/src/client/app/modules/Console.svelte +76 -74
  78. package/src/client/app/modules/Exports.svelte +62 -43
  79. package/src/client/app/modules/MidiPanel.svelte +100 -101
  80. package/src/client/app/modules/Monitor.svelte +57 -57
  81. package/src/client/app/modules/Params.svelte +128 -103
  82. package/src/client/app/renderers/2DRenderer.js +3 -3
  83. package/src/client/app/renderers/FragmentRenderer.js +30 -23
  84. package/src/client/app/renderers/P5GLRenderer.js +144 -0
  85. package/src/client/app/renderers/P5Renderer.js +10 -7
  86. package/src/client/app/renderers/THREERenderer.js +136 -94
  87. package/src/client/app/stores/audioAnalysis.js +3 -4
  88. package/src/client/app/stores/console.js +9 -10
  89. package/src/client/app/stores/errors.js +1 -1
  90. package/src/client/app/stores/exports.js +36 -20
  91. package/src/client/app/stores/index.js +2 -2
  92. package/src/client/app/stores/layout.js +143 -138
  93. package/src/client/app/stores/multisampling.js +4 -4
  94. package/src/client/app/stores/props.js +76 -13
  95. package/src/client/app/stores/renderers.js +26 -15
  96. package/src/client/app/stores/rendering.js +108 -89
  97. package/src/client/app/stores/sketches.js +7 -9
  98. package/src/client/app/stores/time.js +18 -18
  99. package/src/client/app/stores/utils.js +95 -38
  100. package/src/client/app/transitions/fade.js +3 -3
  101. package/src/client/app/transitions/index.js +6 -7
  102. package/src/client/app/transitions/splitX.js +2 -2
  103. package/src/client/app/transitions/splitY.js +2 -2
  104. package/src/client/app/triggers/Keyboard.js +88 -79
  105. package/src/client/app/triggers/MIDI.js +110 -84
  106. package/src/client/app/triggers/Mouse.js +73 -65
  107. package/src/client/app/triggers/Trigger.js +59 -58
  108. package/src/client/app/triggers/index.js +7 -7
  109. package/src/client/app/triggers/shared.js +5 -5
  110. package/src/client/app/ui/Build.svelte +70 -71
  111. package/src/client/app/ui/ErrorOverlay.svelte +118 -104
  112. package/src/client/app/ui/Field.svelte +393 -258
  113. package/src/client/app/ui/FieldGroup.svelte +106 -94
  114. package/src/client/app/ui/FieldSection.svelte +127 -116
  115. package/src/client/app/ui/FieldSpace.svelte +29 -30
  116. package/src/client/app/ui/FieldTrigger.svelte +256 -244
  117. package/src/client/app/ui/FieldTriggers.svelte +46 -46
  118. package/src/client/app/ui/FloatingParams.svelte +29 -30
  119. package/src/client/app/ui/Layout.svelte +31 -32
  120. package/src/client/app/ui/LayoutColumn.svelte +4 -4
  121. package/src/client/app/ui/LayoutComponent.svelte +239 -225
  122. package/src/client/app/ui/LayoutResizer.svelte +195 -176
  123. package/src/client/app/ui/LayoutRoot.svelte +6 -6
  124. package/src/client/app/ui/LayoutRow.svelte +4 -4
  125. package/src/client/app/ui/LayoutToolbar.svelte +191 -194
  126. package/src/client/app/ui/Module.svelte +134 -135
  127. package/src/client/app/ui/ModuleHeaderAction.svelte +81 -78
  128. package/src/client/app/ui/ModuleHeaderButton.svelte +12 -12
  129. package/src/client/app/ui/ModuleHeaderSelect.svelte +47 -37
  130. package/src/client/app/ui/ModuleRenderer.svelte +26 -27
  131. package/src/client/app/ui/OutputRenderer.svelte +112 -105
  132. package/src/client/app/ui/ParamsMultisampling.svelte +96 -95
  133. package/src/client/app/ui/ParamsOutput.svelte +130 -113
  134. package/src/client/app/ui/Preview.svelte +7 -8
  135. package/src/client/app/ui/SelectChevrons.svelte +27 -15
  136. package/src/client/app/ui/SketchRenderer.svelte +780 -667
  137. package/src/client/app/ui/SketchSelect.svelte +50 -44
  138. package/src/client/app/ui/fields/ButtonInput.svelte +61 -48
  139. package/src/client/app/ui/fields/CheckboxInput.svelte +67 -61
  140. package/src/client/app/ui/fields/ColorInput.svelte +294 -238
  141. package/src/client/app/ui/fields/FieldInputRow.svelte +8 -8
  142. package/src/client/app/ui/fields/ImageInput.svelte +123 -121
  143. package/src/client/app/ui/fields/Input.svelte +100 -111
  144. package/src/client/app/ui/fields/IntervalInput.svelte +268 -0
  145. package/src/client/app/ui/fields/ListInput.svelte +96 -96
  146. package/src/client/app/ui/fields/NumberInput.svelte +120 -116
  147. package/src/client/app/ui/fields/ProgressInput.svelte +99 -73
  148. package/src/client/app/ui/fields/Select.svelte +137 -124
  149. package/src/client/app/ui/fields/TextInput.svelte +10 -11
  150. package/src/client/app/ui/fields/VectorInput.svelte +86 -82
  151. package/src/client/app/utils/canvas.utils.js +189 -208
  152. package/src/client/app/utils/color.utils.js +138 -101
  153. package/src/client/app/utils/fields.utils.js +131 -0
  154. package/src/client/app/utils/file.utils.js +209 -37
  155. package/src/client/app/utils/glsl.utils.js +2 -2
  156. package/src/client/app/utils/glslErrors.js +49 -31
  157. package/src/client/app/utils/index.js +32 -29
  158. package/src/client/app/utils/math.utils.js +14 -10
  159. package/src/client/index.html +16 -16
  160. package/src/client/main.js +4 -4
  161. package/src/client/public/css/global.css +26 -16
  162. package/src/cli/db.js +0 -17
  163. package/src/cli/index.js +0 -198
  164. package/src/cli/plugins/db.js +0 -12
  165. package/src/cli/plugins/hot-shader-reload.js +0 -86
  166. package/src/cli/plugins/screenshot.js +0 -46
  167. package/src/cli/server.js +0 -153
  168. package/src/cli/templates/2d.js +0 -15
  169. package/src/cli/templates/blank.js +0 -13
  170. package/src/cli/templates/fragment.js +0 -18
  171. package/src/cli/templates/index.js +0 -27
  172. package/src/cli/templates/p5.js +0 -13
  173. package/src/cli/templates/three-fragment.js +0 -53
  174. package/src/cli/templates/three-orthographic.js +0 -23
  175. package/src/cli/templates/three-perspective.js +0 -20
  176. package/src/client/app/lib/canvas-recorder/FFMPEGRecorder.js +0 -56
  177. package/src/client/app/utils/props.utils.js +0 -51
  178. package/src/client/public/fonts/Inter-Bold.woff2 +0 -0
  179. package/src/client/public/fonts/Inter-Italic.woff2 +0 -0
  180. package/src/client/public/fonts/Inter-Regular.woff2 +0 -0
  181. package/src/client/public/fonts/Inter-SemiBold.woff2 +0 -0
  182. package/src/client/public/js/ffmpeg.min.js +0 -2
  183. package/src/client/public/js/ffmpeg.min.js.map +0 -1
  184. /package/src/cli/templates/{fragment.fs → fragment-gl/fragment.fs} +0 -0
package/src/client/app/ui/FloatingParams.svelte CHANGED
@@ -1,49 +1,48 @@
1
1
  <script>
2
- import KeyBinding from "../components/KeyBinding.svelte";
3
- import Params from "../modules/Params.svelte";
2
+ import KeyBinding from '../components/KeyBinding.svelte';
3
+ import Params from '../modules/Params.svelte';
4
4
 
5
- export let size = 0.3;
6
- export let align = "right";
7
- export let output = false;
8
- export let hidden = false;
9
-
10
- $: visible = !hidden;
11
- $: width = typeof size === "number" ? `${size * 100}%` : size;
5
+ export let size = 0.3;
6
+ export let align = 'right';
7
+ export let output = false;
8
+ export let hidden = false;
12
9
 
10
+ $: visible = !hidden;
11
+ $: width = typeof size === 'number' ? `${size * 100}%` : size;
13
12
  </script>
14
13
 
15
14
  <div
16
15
  class="container"
17
16
  class:hidden={!visible}
18
- class:align-left={align === "left"}
19
- class:align-right={align === "right"}
17
+ class:align-left={align === 'left'}
18
+ class:align-right={align === 'right'}
20
19
  style={`width: ${width};`}
21
20
  >
22
- <Params {output}/>
21
+ <Params {output} />
23
22
  </div>
24
- <KeyBinding key="h" on:trigger={() => visible = !visible} />
23
+ <KeyBinding key="h" on:trigger={() => (visible = !visible)} />
25
24
 
26
25
  <style>
27
- .container {
28
- --padding: 16px;
29
- position: absolute;
30
- top: var(--padding);
26
+ .container {
27
+ --padding: 16px;
28
+ position: absolute;
29
+ top: var(--padding);
31
30
 
32
- height: auto;
31
+ height: auto;
33
32
 
34
- border-radius: calc(var(--border-radius-input) * 2);
35
- overflow: hidden;
36
- }
33
+ border-radius: calc(var(--border-radius-input) * 2);
34
+ overflow: hidden;
35
+ }
37
36
 
38
- .container.hidden {
39
- display: none;
40
- }
37
+ .container.hidden {
38
+ display: none;
39
+ }
41
40
 
42
- .container.align-left {
43
- left: var(--padding);
44
- }
41
+ .container.align-left {
42
+ left: var(--padding);
43
+ }
45
44
 
46
- .container.align-right {
47
- right: var(--padding);
48
- }
45
+ .container.align-right {
46
+ right: var(--padding);
47
+ }
49
48
  </style>
package/src/client/app/ui/Layout.svelte CHANGED
@@ -1,44 +1,43 @@
1
1
  <script>
2
- import Root from "./LayoutRoot.svelte";
3
- import Column from "./LayoutColumn.svelte";
4
- import Build from "./Build.svelte";
5
- import Row from "./LayoutRow.svelte";
6
- import ModuleRenderer from "./ModuleRenderer.svelte";
7
- import { layout } from "../stores/layout.js";
8
- import KeyBinding from "../components/KeyBinding.svelte";
9
- import { monitors, preview } from "../stores/rendering";
2
+ import Root from './LayoutRoot.svelte';
3
+ import Column from './LayoutColumn.svelte';
4
+ import Build from './Build.svelte';
5
+ import Row from './LayoutRow.svelte';
6
+ import ModuleRenderer from './ModuleRenderer.svelte';
7
+ import { layout } from '../stores/layout.js';
8
+ import KeyBinding from '../components/KeyBinding.svelte';
9
+ import { monitors, preview } from '../stores/rendering';
10
10
 
11
- function toggleEdition() {
12
- $layout.editing = !$layout.editing;
13
- }
14
-
15
- function togglePreview() {
16
- if ($monitors.length === 1 && !$layout.previewing) {
17
- $preview = $monitors[0].selected;
11
+ function toggleEdition() {
12
+ $layout.editing = !$layout.editing;
18
13
  }
19
-
20
- $layout.previewing = !$layout.previewing;
21
- }
22
14
 
15
+ function togglePreview() {
16
+ if ($monitors.length === 1 && !$layout.previewing) {
17
+ $preview = $monitors[0].selected;
18
+ }
19
+
20
+ $layout.previewing = !$layout.previewing;
21
+ }
23
22
  </script>
24
23
 
25
24
  <Root>
26
- {#if __BUILD__ || $layout.previewing }
25
+ {#if __BUILD__ || $layout.previewing}
27
26
  <Build />
28
27
  {:else}
29
- <Row size={1}>
30
- <Column size={0.65}>
31
- <ModuleRenderer name="monitor" />
32
- </Column>
33
- <Column size={0.35}>
34
- <Row size={1}>
35
- <ModuleRenderer name="exports" />
36
- </Row>
37
- <Row size={1}>
38
- <ModuleRenderer name="params" />
39
- </Row>
40
- </Column>
41
- </Row>
28
+ <Row size={1}>
29
+ <Column size={0.65}>
30
+ <ModuleRenderer name="monitor" />
31
+ </Column>
32
+ <Column size={0.35}>
33
+ <Row size={1}>
34
+ <ModuleRenderer name="exports" />
35
+ </Row>
36
+ <Row size={1}>
37
+ <ModuleRenderer name="params" />
38
+ </Row>
39
+ </Column>
40
+ </Row>
42
41
  {/if}
43
42
  </Root>
44
43
  {#if !__BUILD__}
package/src/client/app/ui/LayoutColumn.svelte CHANGED
@@ -1,9 +1,9 @@
1
1
  <script>
2
- import LayoutComponent from "./LayoutComponent.svelte";
2
+ import LayoutComponent from './LayoutComponent.svelte';
3
3
 
4
- export let size = 1;
4
+ export let size = 1;
5
5
  </script>
6
6
 
7
- <LayoutComponent size={size} type="column">
8
- <slot></slot>
7
+ <LayoutComponent {size} type="column">
8
+ <slot />
9
9
  </LayoutComponent>