feat(perturbation-theory): add deep zoom control to settings

JMaio · Feb 16, 2021 · c970135 · c970135
1 parent b1ddfce
commit c970135
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 16 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -1,4 +1,4 @@
-import { Grid, Switch, ThemeProvider } from '@material-ui/core';
+import { Grid, ThemeProvider } from '@material-ui/core';
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { useSpring } from 'react-spring';
 import './App.css';
@@ -142,8 +142,8 @@ function App(): JSX.Element {
   // <AnimatedTypography></AnimatedTypography>
   // const AnimatedGrid = animated(Grid);
 
-  const [showDeep, setDeep] = useState(false);
-  const toggleDeep = () => setDeep((p) => !p);
+  // const [showDeep, setDeep] = useState(false);
+  // const toggleDeep = () => setDeep((p) => !p);
 
   return (
     <ThemeProvider theme={theme}>
@@ -167,10 +167,6 @@ function App(): JSX.Element {
                     position: 'absolute',
                   }}
                 >
-                  <div style={{ position: 'absolute', zIndex: 10 }}>
-                    <Switch onChange={toggleDeep} />
-                  </div>
-
                   <CoordinateInterface
                     show={settings.showCoordinates}
                     mandelbrot={mandelbrotControls}
@@ -184,7 +180,7 @@ function App(): JSX.Element {
                       flexGrow: showMandelbrot ? 1 : 0, // percentFlex.m.interpolate((x) => x),
                     }}
                   >
-                    {showDeep ? (
+                    {settings.deepZoom ? (
                       <MandelbrotRendererDeep
                         controls={mandelbrotControls}
                         DPR={currentDPR}

diff --git a/src/common/settings.ts b/src/common/settings.ts
@@ -13,9 +13,10 @@ export type settingsDefinitionsType = {
   useDPR: boolean;
   useAA: boolean;
   colour: RgbColor;
+  deepZoom: boolean;
 };
 
-export const defaultSettings = {
+export const defaultSettings: settingsDefinitionsType = {
   showMinimap: true,
   showCrosshair: true,
   showCoordinates: false,
@@ -24,9 +25,10 @@ export const defaultSettings = {
   useDPR: false,
   useAA: false,
   colour: defaultShadingColour,
+  deepZoom: false,
 };
 
-export const defaultIterationLevels = [10, 250, 500, 750, 1000].map((i) => ({
+export const defaultIterationLevels = [16, 250, 500, 750, 1000].map((i) => ({
   value: i,
   label: i,
 }));
@@ -39,6 +41,7 @@ export const defaultIterationLevels = [10, 250, 500, 750, 1000].map((i) => ({
 // }
 // squares: 6^2, 20^2, 32^2...
 // bad iteration levels: 6, 7, 12, 13, 14, 15, 24, 26, 28, 30
+// 19 iteration levels:
 export const perturbationIterationLevels = [
   4,
   5,
@@ -59,9 +62,14 @@ export const perturbationIterationLevels = [
   29,
   31,
   32,
-].map((i) => ({
-  value: i * i,
-}));
+]
+  .map((l) => l * l)
+  .map((l, i) => ({
+    value: l,
+    // only show the labels of the higher levels
+    // i+n to ensure that 18 is mod n
+    label: (i + 2) % 4 ? null : l,
+  }));
 
 // export const perturbationIterationLevels = _.range(2, 33, 2)
 //   .map((i) => i * i)

diff --git a/src/components/settings/SettingsDefinitions.tsx b/src/components/settings/SettingsDefinitions.tsx
@@ -4,6 +4,7 @@ import PhotoIcon from '@material-ui/icons/Photo';
 import React from 'react';
 import { RgbColorPicker } from 'react-colorful';
 import {
+  defaultIterationLevels,
   perturbationIterationLevels,
   settingsDefinitionsType,
   settingsGroupType,
@@ -54,9 +55,10 @@ and allows warping to specific coordinates
         min={16}
         max={1024}
         // step={16}
-        step={null}
+        // increment by 16 if not in "deep mode"
+        step={settings.deepZoom ? null : 16}
+        marks={settings.deepZoom ? perturbationIterationLevels : defaultIterationLevels}
         valueLabelDisplay="auto"
-        marks={perturbationIterationLevels}
       />
     ),
     helptext: `
@@ -85,7 +87,7 @@ but **may reduce performance**.
   useAA: {
     label: `Anti-aliasing (slow)`,
     checked: settings.useAA,
-    control: <Switch />,
+    control: <Switch color="secondary" />,
     helptext: `
 Anti-aliasing provides a smoothing effect which increases the quality of the image, 
 but can **severely reduce performance and crash the application**.
@@ -131,6 +133,19 @@ The top picker changes *Saturation* (horizontally) and *Value* (vertically).
 The bottom picker changes *Hue*.
     `,
   },
+  deepZoom: {
+    label: `⚠️ Deep zoom`,
+    checked: settings.deepZoom,
+    control: <Switch color="secondary" />,
+    helptext: `
+(Mandelbrot viewer only)
+**This feature is experimental and could severely reduce performance, especially at high zoom levels.**
+Uses perturbation theory to provide deeper zoom capability.
+To obtain a usable result, move the "Iterations" slider so that it stops at a predefined level; changing the iteration count will slightly affect colouring.
+Zooming into some regions may give almost no improvement over the standard method.
+Regions closer to the origin will usually allow for deeper zoom without loss of quality.
+    `,
+  },
 });
 
 export const getSettingsWidgetsGrouping = (
@@ -155,6 +170,7 @@ export const getSettingsWidgetsGrouping = (
       useDPR: settingsWidgets.useDPR,
       useAA: settingsWidgets.useAA,
       showFPS: settingsWidgets.showFPS,
+      deepZoom: settingsWidgets.deepZoom,
     },
   },
 ];