color-synth

commit 43d0c885326b39c79356904c7cfd99cb247d1889
parent d4d0b07d36ff84f18c293756d37fb87788a36af9
Author: massi <mdsiboldi@gmail.com>
Date:   Thu, 22 Jun 2023 23:18:53 -0700

better defaults

Diffstat:
M
src/routes/+page.svelte
 | 
31
++++++++++++++++---------------

1 file changed, 16 insertions(+), 15 deletions(-)
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
@@ -273,20 +273,18 @@
 		  mk.osc(mk.add(10, mk.osc()), INPUT_RANGE / 2) //
 		)
 	);
-  const green = mk.re_color(mk.osc());
-	const blue = mk.re_color();
-	//const green = mk.re_color(
-	//	mk.add(
-	//		mk.c(100), //
-	//		mk.osc(mk.add(mk.osc(0, 1), mk.osc(0, 1)), 10) //
-	//	)
-	//);
-	//const blue = mk.re_color(
-	//	mk.add(
-	//		mk.c(100), //
-	//		mk.osc(mk.add(mk.osc(0, 1), mk.osc(0, 1)), 10) //
-	//	)
-	//);
+	const green = mk.re_color(
+		mk.add(
+			mk.c(100), //
+			mk.osc(mk.add(mk.osc(0, 1), mk.osc(0, 1)), 10) //
+		)
+	);
+	const blue = mk.re_color(
+		mk.add(
+			mk.c(100), //
+			mk.osc(mk.add(mk.osc(0, 1), mk.osc(0, 1)), 10) //
+		)
+	);
 	sinks = { red, green, blue };
 
 	function drawSquares(ctx: CanvasRenderingContext2D) {
@@ -340,6 +338,7 @@
 
 <div id="sliders">
 	{#each [...Object.entries(sinks)] as [label, unitId]}
+      <div>
       <h2>{label}</h2>
 		<Slider
           id={unitId}
@@ -347,13 +346,14 @@
           handleInput={updateUnit}
           handleChange={updateUrl}
         />
+      </div>
 	{/each}
 </div>
 <button on:click={run}>step </button>
 
 <style>
   h2 {
-    margin: 0;
+    margin: 0 5px;
     background: white;
   }
 	canvas {
@@ -365,5 +365,6 @@
 		position: absolute;
 		left: 10px;
 		top: 10px;
+        display: flex;
 	}
 </style>