add animatable modulo to lsm binary

blechdom · Aug 16, 2023 · adf325b · adf325b
1 parent 61dfa95
commit adf325b
Show file tree

Hide file tree

Showing 4 changed files with 75 additions and 31 deletions.
diff --git a/src/components/FractalPlayer.tsx b/src/components/FractalPlayer.tsx
@@ -61,7 +61,8 @@ const FractalPlayer: React.FC<FractalPlayerProps> = ({
  const [rawFractalData, setRawFractalData] = useState<number[][]>([]);
  const [audioFractalData, setAudioFractalData] = useState<number[][]>([]);
  const [playheadFractalData, setPlayheadFractalData] = useState<number[][]>([]);
- const [currentFractalRow, setCurrentFractalRow] = useState<number[]>(Array(size).fill(0));
+ const [numShades, setNumShades] = useState<number>(2)
+ const [shadeOffset, setShadeOffset] = useState<number>(0)
 
  const [fractalSpeed, setFractalSpeed] = useState<number>(50);
  const [playing, setPlaying] = useState<boolean>(false);
@@ -99,7 +100,7 @@ const FractalPlayer: React.FC<FractalPlayerProps> = ({
 
  useEffect(() => {
  getFractal();
- }, [cx, cy, size, fractalWindow, program]);
+ }, [cx, cy, size, numShades, shadeOffset, fractalWindow, program]);
 
  useEffect(() => {
  if (fractalTransport === 'play') {
@@ -132,6 +133,8 @@ const FractalPlayer: React.FC<FractalPlayerProps> = ({
  size,
  program,
  maxIterations,
+ numShades,
+ shadeOffset,
  lsmThreshold, // or demThreshold
  cx,
  cy
@@ -147,9 +150,7 @@ const FractalPlayer: React.FC<FractalPlayerProps> = ({
  await clearTimeout(timeoutId);
  });
  setRowIndex(-1);
- //setCurrentFractalRow(Array(size).fill(0));
  if (fractalPlayheadCanvasRef.current) clearCanvas(fractalPlayheadCanvasRef.current);
- //setFractalPauseTimeElapsed(0);
  }
 
  const pauseFractal = () => {
@@ -258,9 +259,13 @@ const FractalPlayer: React.FC<FractalPlayerProps> = ({
  fractal={fractal}
  cx={cx}
  cy={cy}
+ numShades={numShades}
+ shadeOffset={shadeOffset}
  speed={fractalSpeed}
  setCx={setCx}
  setCy={setCy}
+ setNumShades={setNumShades}
+ setShadeOffset={setShadeOffset}
  setSpeed={setFractalSpeed}
  setAudioParams={setAudioParams}
  />

diff --git a/src/components/PlayheadAudioControls.tsx b/src/components/PlayheadAudioControls.tsx
@@ -6,22 +6,30 @@ import {AudioParamsType, KnobRow} from "@/components/FractalPlayer";
 type PlayheadAudioControlsProps = {
  fractal: string;
  speed: number;
+ numShades: number;
+ shadeOffset: number;
  cx?: number;
  cy?: number;
  setCx?: (cx: number) => void;
  setCy?: (cy: number) => void;
+ setNumShades: (numShades: number) => void;
+ setShadeOffset: (shadeOffset: number) => void;
  setSpeed: (speed: number) => void;
  setAudioParams: (params: AudioParamsType) => void;
 }
 
 const PlayheadAudioControls: React.FC<PlayheadAudioControlsProps> = (
  {
  fractal,
+ numShades,
+ shadeOffset,
  speed,
  cx,
  cy,
  setCx,
  setCy,
+ setNumShades,
+ setShadeOffset,
  setSpeed,
  setAudioParams
  }) => {
@@ -107,33 +115,57 @@ const PlayheadAudioControls: React.FC<PlayheadAudioControlsProps> = (
  onKnobInput={setSmoothing}
  />
  </ControlKnob>
+ <ControlKnob>
+ <Knob
+ id={`${fractal}-numShades`}
+ label={"# Shades"}
+ knobValue={numShades}
+ step={1}
+ min={2}
+ max={32}
+ onKnobInput={setNumShades}
+ />
+ </ControlKnob>
+ <ControlKnob>
+ <Knob
+ id={`${fractal}-shadeOffset`}
+ label={"shadeOffset"}
+ knobValue={shadeOffset}
+ step={1}
+ min={0}
+ max={30}
+ onKnobInput={setShadeOffset}
+ />
+ </ControlKnob>
+ </KnobRow>
  {fractal === 'julia' &&
  <>
- <ControlKnob>
- <Knob
- id={`${fractal}-cx`}
- label={"Complex X"}
- knobValue={cx}
- step={0.00001}
- min={-2}
- max={2}
- onKnobInput={setCx}
- />
- </ControlKnob>
- <ControlKnob>
- <Knob
- id={`${fractal}-cy`}
- label={"Complex Y"}
- knobValue={cy}
- step={0.00001}
- min={-2}
- max={2}
- onKnobInput={setCy}
- />
- </ControlKnob>
+ <KnobRow>
+ <ControlKnob>
+ <Knob
+ id={`${fractal}-cx`}
+ label={"Complex X"}
+ knobValue={cx}
+ step={0.00001}
+ min={-2}
+ max={2}
+ onKnobInput={setCx}
+ />
+ </ControlKnob>
+ <ControlKnob>
+ <Knob
+ id={`${fractal}-cy`}
+ label={"Complex Y"}
+ knobValue={cy}
+ step={0.00001}
+ min={-2}
+ max={2}
+ onKnobInput={setCy}
+ />
+ </ControlKnob>
+ </KnobRow>
  </>
  }
- </KnobRow>
  </>
  );
 };

diff --git a/src/utils/fractalGenerator.ts b/src/utils/fractalGenerator.ts
@@ -108,6 +108,8 @@ function computePointJuliaDem(point: Point, cx: number, cy: number, maxIteration
 
 function drawLSMBinary(
  iterations: number,
+ numShades: number,
+ shadeOffset: number,
  maxIterations: number,
  ctx: CanvasRenderingContext2D,
 ): number {
@@ -116,8 +118,9 @@ function drawLSMBinary(
  a = 0;
  ctx.fillStyle = "#000"
  } else {
- a = iterations % 2;
- ctx.fillStyle = a === 0 ? "#000" : "#FFF";
+ a = (iterations + shadeOffset) % numShades;
+ let shade = (a / (numShades - 1)) * 255;
+ ctx.fillStyle = `rgb(${shade}, ${shade}, ${shade})`;
  }
  return a;
 }
@@ -204,6 +207,8 @@ export function generateFractal(
  size: number,
  program: string,
  maxIterations: number,
+ numShades: number,
+ shadeOffset: number,
  threshold: number,
  cx: number,
  cy: number,
@@ -234,7 +239,7 @@ export function generateFractal(
  if (program === 'lsm-raw') {
  a = parseFloat(String((drawLSMRaw(i, maxIterations, ctx) + 0.001)).toString());
  } else if (program === 'lsm-binary') {
- a = drawLSMBinary(i, maxIterations, ctx);
+ a = drawLSMBinary(i, numShades, shadeOffset, maxIterations, ctx);
  } else if (program === 'lsm-outline') {
  a = generateLSMBinary(i, maxIterations);
  } else if (program === 'lsm-difference') {

diff --git a/src/utils/playheadFractals.ts b/src/utils/playheadFractals.ts
@@ -427,4 +427,6 @@ export function scaleFractal(fractalArray: number[][], min: number, max: number)
  return (value - min) / (max - min);
  })
  });
-}
+}
+
+