From de74765caa13f868a4b0623cb93e17722293aaa4 Mon Sep 17 00:00:00 2001 From: Yehor Date: Sat, 11 Nov 2023 21:20:44 +0200 Subject: [PATCH] Lines (#7) --- .../Generator/CanvasSection/CanvasSection.tsx | 8 +++ .../Generator/CanvasSection/utils/draw.ts | 52 ++++++++++++++++++- .../SettingsSection/SettingsSection.tsx | 38 ++++++++++++++ src/components/pages/Generator/constants.ts | 10 ++++ src/components/pages/Generator/store.ts | 42 +++++++++++++-- 5 files changed, 143 insertions(+), 7 deletions(-) diff --git a/src/components/pages/Generator/CanvasSection/CanvasSection.tsx b/src/components/pages/Generator/CanvasSection/CanvasSection.tsx index 963568c..627842f 100644 --- 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 index 8b5cef3..dabd753 100644 --- 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 index 5aa60f0..d6de726 100644 --- 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} /> + + + + +
diff --git a/src/components/pages/Generator/constants.ts b/src/components/pages/Generator/constants.ts index d732047..9949ba1 100644 --- 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 index a475692..bc415a4 100644 --- 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((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((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((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), })); }, }));