Composition modes (v0.0.1-alpha.7) (#22)

package.json

@@ -1,6 +1,6 @@
 {
   "name": "displacementx",
-  "version": "0.0.1-alpha.6",
+  "version": "0.0.1-alpha.7",
   "scripts": {
     "dev": "next dev",
     "build": "next build",

src/components/pages/Generator/CanvasSection/CanvasSection.tsx

@@ -70,6 +70,7 @@ export function CanvasSection() {
       spritesEnabled,
       spritesRotationEnabled,
       getSprites,
+      compositionModes,
     } = useStore.getState();
 
     const sprites = getSprites();
@@ -108,6 +109,7 @@ export function CanvasSection() {
         spritesEnabled,
         spritesRotationEnabled,
         sprites,
+        compositionModes,
       },
       onEnd(renderTimeMs) {
         // Set minumum "visible" render time to prevent very fast component updates (i.e., flickering)

src/components/pages/Generator/CanvasSection/utils/draw.ts

@@ -2,9 +2,10 @@ import {type NumberDual} from '@/types';
 import {animateWithSubIterations} from '@/utils/animationFrame';
 import {degreesToRadians} from '@/utils/math';
 import {xxx, xxxa} from '@/utils/colors';
-import {randomBoolean, randomInteger} from '@/utils/random';
+import {randomBoolean, randomInteger, randomItem} from '@/utils/random';
 import {getCanvasDimensions} from './getCanvasDimensions';
 import {clearCanvas} from './clearCanvas';
+import {type CompositionMode} from '../../constants';
 
 export const draw = async ({
   ctx2d,
@@ -41,6 +42,7 @@ export const draw = async ({
     spritesEnabled,
     sprites: _sprites,
     spritesRotationEnabled,
+    compositionModes,
   },
 }: {
   ctx2d: CanvasRenderingContext2D;
@@ -77,6 +79,7 @@ export const draw = async ({
     spritesEnabled: boolean;
     sprites: HTMLImageElement[];
     spritesRotationEnabled: boolean;
+    compositionModes: CompositionMode[];
   };
 }): Promise<void> => {
   const renderStartTimeMs = performance.now();
@@ -85,12 +88,19 @@ export const draw = async ({
 
   drawBackground({ctx2d, backgroundBrightness});
 
+  const originalCompositeOperation = ctx2d.globalCompositeOperation;
+
   const sprites = spritesEnabled ? await loadSprites(_sprites) : [];
 
   animateWithSubIterations({
     iterations,
     iterationsPerFrame: 50,
     callback() {
+      const compositionMode = randomItem(compositionModes);
+      if (compositionMode) {
+        ctx2d.globalCompositeOperation = compositionMode;
+      }
+
       switch (randomInteger(0, 5)) {
         case 0:
           if (!rectEnabled) break;
@@ -156,6 +166,7 @@ export const draw = async ({
       }
     },
     onEnd() {
+      ctx2d.globalCompositeOperation = originalCompositeOperation;
       const renderTimeMs = performance.now() - renderStartTimeMs;
       onEnd(renderTimeMs);
     },
@@ -359,9 +370,8 @@ const drawSprite = ({
   sprites: HTMLImageElement[];
   spritesRotationEnabled: boolean;
 }): void => {
-  if (sprites.length <= 0) return;
-
-  const sprite = sprites[randomInteger(0, sprites.length - 1)];
+  const sprite = randomItem(sprites);
+  if (!sprite) return;
   if (!sprite.complete) return;
 
   const {w, h} = getCanvasDimensions(ctx2d);

src/components/pages/Generator/SettingsSection/Checkboxes/Checkboxes.tsx

@@ -0,0 +1,32 @@
+import {Checkbox} from '@/components/ui/Checkbox';
+
+type CheckboxesProps<T> = {
+  items: Array<{
+    label: string;
+    value: T;
+  }>;
+  values: T[];
+  setValues: (values: T[]) => void;
+};
+
+export const Checkboxes = <T extends string>({
+  items,
+  values,
+  setValues,
+}: CheckboxesProps<T>) => {
+  const setIsChecked = (item: T) => (value: boolean) => {
+    setValues([...values.filter((i) => i !== item), ...(value ? [item] : [])]);
+  };
+
+  return items.map(({label, value}) => (
+    <Checkbox
+      key={value}
+      label={label}
+      isChecked={isChecked(values, value)}
+      setIsChecked={setIsChecked(value)}
+    />
+  ));
+};
+
+const isChecked = <T,>(values: T[], value: T): boolean =>
+  values.includes(value);

src/components/pages/Generator/SettingsSection/Checkboxes/index.ts

@@ -0,0 +1 @@
+export {Checkboxes} from './Checkboxes';

src/components/pages/Generator/SettingsSection/CheckboxesGroup/CheckboxesGroup.tsx

@@ -0,0 +1,13 @@
+type CheckboxesGroupProps = {
+  readonly title: string;
+  readonly children: React.ReactNode;
+};
+
+export function CheckboxesGroup({title, children}: CheckboxesGroupProps) {
+  return (
+    <div>
+      <div className='pb-1 text-sm'>{`${title}:`}</div>
+      <div className='border-l border-l-white/80 pl-2'>{children}</div>
+    </div>
+  );
+}

src/components/pages/Generator/SettingsSection/CheckboxesGroup/index.ts

@@ -0,0 +1 @@
+export {CheckboxesGroup} from './CheckboxesGroup';