Lines (#7)

satelllte · Nov 11, 2023 · de74765 · de74765
1 parent abd1e0c
commit de74765
Show file tree

Hide file tree

Showing 5 changed files with 143 additions and 7 deletions.
diff --git a/src/components/pages/Generator/CanvasSection/CanvasSection.tsx b/src/components/pages/Generator/CanvasSection/CanvasSection.tsx
@@ -53,6 +53,10 @@ export function CanvasSection() {
       rowsScale,
       rowsAmount,
       rowsGap,
+      linesEnabled,
+      linesBrightness,
+      linesAlpha,
+      linesWidth,
     } = useStore.getState();
 
     draw({
@@ -83,6 +87,10 @@ export function CanvasSection() {
         rowsScale,
         rowsAmount,
         rowsGap,
+        linesEnabled,
+        linesBrightness,
+        linesAlpha,
+        linesWidth,
       },
       onEnd(renderTimeMs) {
         // Set minumum "visible" render time to prevent very fast component updates (i.e., flickering)

diff --git a/src/components/pages/Generator/CanvasSection/utils/draw.ts b/src/components/pages/Generator/CanvasSection/utils/draw.ts
@@ -1,7 +1,7 @@
 import {type NumberDual} from '@/types';
 import {animateWithSubIterations} from '@/utils/animationFrame';
 import {xxx, xxxa} from '@/utils/colors';
-import {randomInteger} from '@/utils/random';
+import {randomBoolean, randomInteger} from '@/utils/random';
 import {getCanvasDimensions} from './getCanvasDimensions';
 import {clearCanvas} from './clearCanvas';
 
@@ -34,6 +34,10 @@ export const draw = ({
     rowsScale,
     rowsAmount,
     rowsGap,
+    linesEnabled,
+    linesBrightness,
+    linesAlpha,
+    linesWidth,
   },
 }: {
   ctx2d: CanvasRenderingContext2D;
@@ -64,6 +68,10 @@ export const draw = ({
     rowsScale: number;
     rowsAmount: NumberDual;
     rowsGap: number;
+    linesEnabled: boolean;
+    linesBrightness: NumberDual;
+    linesAlpha: NumberDual;
+    linesWidth: NumberDual;
   };
 }): void => {
   const renderStartTimeMs = performance.now();
@@ -77,7 +85,7 @@ export const draw = ({
     iterations,
     iterationsPerFrame: 50,
     callback() {
-      switch (randomInteger(0, 3)) {
+      switch (randomInteger(0, 4)) {
         case 0:
           if (!rectEnabled) break;
           drawRect({
@@ -120,6 +128,15 @@ export const draw = ({
             rowsGap,
           });
           break;
+        case 4:
+          if (!linesEnabled) break;
+          drawLines({
+            ctx2d,
+            linesBrightness,
+            linesAlpha,
+            linesWidth,
+          });
+          break;
         default:
           break;
       }
@@ -289,6 +306,37 @@ const drawRows = ({
   }
 };
 
+const drawLines = ({
+  ctx2d,
+  linesBrightness,
+  linesAlpha,
+  linesWidth,
+}: {
+  ctx2d: CanvasRenderingContext2D;
+  linesBrightness: NumberDual;
+  linesAlpha: NumberDual;
+  linesWidth: NumberDual;
+}): void => {
+  const {w, h} = getCanvasDimensions(ctx2d);
+
+  ctx2d.fillStyle = xxxa({
+    x: randomInteger(...linesBrightness),
+    a: randomInteger(...linesAlpha),
+  });
+
+  if (randomBoolean()) {
+    // Horizontal
+    const y = randomInteger(Math.round(-h / 16), Math.round(h));
+    const thickness = Math.round(randomInteger(...linesWidth) * (h / 2500));
+    ctx2d.fillRect(0, y, w, thickness);
+  } else {
+    // Vertical
+    const x = randomInteger(Math.round(-w / 16), Math.round(w));
+    const thickness = Math.round(randomInteger(...linesWidth) * (w / 2500));
+    ctx2d.fillRect(x, 0, thickness, h);
+  }
+};
+
 /**
  * Draws the normal map.
  * - "ctx2d" is the canvas context to read from.

diff --git a/src/components/pages/Generator/SettingsSection/SettingsSection.tsx b/src/components/pages/Generator/SettingsSection/SettingsSection.tsx
@@ -25,6 +25,9 @@ import {
   rowsScale as rowsScaleConst,
   rowsAmount as rowsAmountConst,
   rowsGap as rowsGapConst,
+  linesBrightness as linesBrightnessConst,
+  linesAlpha as linesAlphaConst,
+  linesWidth as linesWidthConst,
   type SettingConstant,
   type SettingDualConstant,
 } from '../constants';
@@ -60,6 +63,11 @@ export function SettingsSection() {
   const rowsAmount = useStore((state) => state.rowsAmount);
   const rowsGap = useStore((state) => state.rowsGap);
 
+  const linesEnabled = useStore((state) => state.linesEnabled);
+  const linesBrightness = useStore((state) => state.linesBrightness);
+  const linesAlpha = useStore((state) => state.linesAlpha);
+  const linesWidth = useStore((state) => state.linesWidth);
+
   const setIterations = useStore((state) => state.setIterations);
   const setBackgroundBrightness = useStore(
     (state) => state.setBackgroundBrightness,
@@ -91,6 +99,11 @@ export function SettingsSection() {
   const setRowsAmount = useStore((state) => state.setRowsAmount);
   const setRowsGap = useStore((state) => state.setRowsGap);
 
+  const setLinesEnabled = useStore((state) => state.setLinesEnabled);
+  const setLinesBrightness = useStore((state) => state.setLinesBrightness);
+  const setLinesAlpha = useStore((state) => state.setLinesAlpha);
+  const setLinesWidth = useStore((state) => state.setLinesWidth);
+
   const randomize = useStore((state) => state.randomize);
 
   return (
@@ -247,6 +260,31 @@ export function SettingsSection() {
             constant={rowsGapConst}
           />
         </Group>
+        <Group
+          withSwitch
+          title='Lines'
+          enabled={linesEnabled}
+          setEnabled={setLinesEnabled}
+        >
+          <SliderDualWrapper
+            label='Brightness'
+            values={linesBrightness}
+            setValues={setLinesBrightness}
+            constant={linesBrightnessConst}
+          />
+          <SliderDualWrapper
+            label='Alpha'
+            values={linesAlpha}
+            setValues={setLinesAlpha}
+            constant={linesAlphaConst}
+          />
+          <SliderDualWrapper
+            label='Width'
+            values={linesWidth}
+            setValues={setLinesWidth}
+            constant={linesWidthConst}
+          />
+        </Group>
       </div>
       <div className='pt-2'>
         <Button onClick={randomize}>Randomize</Button>

diff --git a/src/components/pages/Generator/constants.ts b/src/components/pages/Generator/constants.ts
@@ -106,3 +106,13 @@ export const rowsAlpha: SettingDualConstant = _alpha80to100;
 export const rowsScale: SettingConstant = _scale20to200;
 export const rowsAmount: SettingDualConstant = _amount2to10;
 export const rowsGap: SettingConstant = _gap;
+
+export const linesEnabled: SettingBooleanConstant = _booleanTrue;
+export const linesBrightness: SettingDualConstant = _brightnessRange;
+export const linesAlpha: SettingDualConstant = _alpha80to100;
+export const linesWidth: SettingDualConstant = {
+  min: 1,
+  max: 50,
+  default: [5, 10],
+  step: 1,
+};
diff --git a/src/components/pages/Generator/store.ts b/src/components/pages/Generator/store.ts
@@ -24,6 +24,10 @@ import {
   rowsScale,
   rowsAmount,
   rowsGap,
+  linesEnabled,
+  linesBrightness,
+  linesAlpha,
+  linesWidth,
   type SettingConstant,
   type SettingDualConstant,
 } from './constants';
@@ -55,6 +59,10 @@ type Values = {
   rowsScale: number;
   rowsAmount: NumberDual;
   rowsGap: number;
+  linesEnabled: boolean;
+  linesBrightness: NumberDual;
+  linesAlpha: NumberDual;
+  linesWidth: NumberDual;
 };
 
 type Actions = {
@@ -84,6 +92,10 @@ type Actions = {
   setRowsScale: (rowsScale: Values['rowsScale']) => void;
   setRowsAmount: (rowsAmount: Values['rowsAmount']) => void;
   setRowsGap: (rowsGap: Values['rowsGap']) => void;
+  setLinesEnabled: (linesEnabled: Values['linesEnabled']) => void;
+  setLinesBrightness: (linesBrightness: Values['linesBrightness']) => void;
+  setLinesAlpha: (linesAlpha: Values['linesAlpha']) => void;
+  setLinesWidth: (linesWidth: Values['linesWidth']) => void;
   randomize: () => void;
 };
 
@@ -112,6 +124,10 @@ export const useStore = create<Values & Actions>((set) => ({
   rowsScale: rowsScale.default,
   rowsAmount: rowsAmount.default,
   rowsGap: rowsGap.default,
+  linesEnabled: linesEnabled.default,
+  linesBrightness: linesBrightness.default,
+  linesAlpha: linesAlpha.default,
+  linesWidth: linesWidth.default,
   setIterations(iterations: Values['iterations']) {
     set(() => ({iterations}));
   },
@@ -186,6 +202,18 @@ export const useStore = create<Values & Actions>((set) => ({
   setRowsGap(rowsGap: Values['rowsGap']) {
     set(() => ({rowsGap}));
   },
+  setLinesEnabled(linesEnabled: Values['linesEnabled']) {
+    set(() => ({linesEnabled}));
+  },
+  setLinesBrightness(linesBrightness: Values['linesBrightness']) {
+    set(() => ({linesBrightness}));
+  },
+  setLinesAlpha(linesAlpha: Values['linesAlpha']) {
+    set(() => ({linesAlpha}));
+  },
+  setLinesWidth(linesWidth: Values['linesWidth']) {
+    set(() => ({linesWidth}));
+  },
   randomize() {
     set(() => ({
       iterations: randSetting(iterations),
@@ -207,11 +235,15 @@ export const useStore = create<Values & Actions>((set) => ({
       colsAmount: randDualSetting(colsAmount),
       colsGap: randSetting(colsGap),
       rowsEnabled: randomBoolean(),
-      rowsBrightness: randDualSetting(colsBrightness),
-      rowsAlpha: randDualSetting(colsAlpha),
-      rowsScale: randSetting(colsScale),
-      rowsAmount: randDualSetting(colsAmount),
-      rowsGap: randSetting(colsGap),
+      rowsBrightness: randDualSetting(rowsBrightness),
+      rowsAlpha: randDualSetting(rowsAlpha),
+      rowsScale: randSetting(rowsScale),
+      rowsAmount: randDualSetting(rowsAmount),
+      rowsGap: randSetting(rowsGap),
+      linesEnabled: randomBoolean(),
+      linesBrightness: randDualSetting(linesBrightness),
+      linesAlpha: randDualSetting(linesAlpha),
+      linesWidth: randDualSetting(linesWidth),
     }));
   },
 }));