draw curve from radio button

Author: dagda1

apps/website/src/components/Polar/Polar.tsx

@@ -1,5 +1,5 @@
 import { assert } from '@cutting/assert';
-import { Box } from '@cutting/component-library';
+import { Box, RadioGroup } from '@cutting/component-library';
 import { ResponsiveSVG } from '@cutting/svg';
 import { useParentSize } from '@cutting/use-get-parent-size';
 import { MathJax } from '@cutting/use-mathjax';
@@ -9,11 +9,12 @@ import { scaleLinear } from '@visx/scale';
 import { LinePath } from '@visx/shape';
 import { extent } from 'd3-array';
 import { parse } from 'mathjs';
-import { useLayoutEffect, useMemo, useReducer, useRef } from 'react';
+import { useLayoutEffect, useMemo, useReducer, useRef, useState } from 'react';
 
 import { ApplicationLayout } from '~/layouts/ApplicationLayout';
 
 import * as styles from './Polar.css';
+import type { PolarEffect } from './reducer';
 import { initialState, reducer } from './reducer';
 
 export function Polar(): JSX.Element {
@@ -23,6 +24,7 @@ export function Polar(): JSX.Element {
     initialValues: { width: 0, height: 0 },
   });
   const tickFrame = useRef<number>(undefined);
+  const [polarEffect, setPolarEffect] = useState<PolarEffect>('butterfly');
 
   const [state, dispatch] = useReducer(reducer, initialState);
 
@@ -49,8 +51,9 @@ export function Polar(): JSX.Element {
   }, [state.bucket, width, height]);
 
   useLayoutEffect(() => {
-    dispatch({ type: 'SET_EXPRESSION', payload: { expression: state.expression } });
-  }, [state.expression]);
+    dispatch({ type: 'SET_POLAR_EFFECT', payload: { polarEffect } });
+  }, [polarEffect, state.expression]);
+
   useLayoutEffect(() => {
     if (state.time === 0) {
       return;
@@ -75,9 +78,31 @@ export function Polar(): JSX.Element {
   }
 
   return (
-    <ApplicationLayout heading="The Polar Express!" showFooter={false}>
+    <ApplicationLayout heading="The Polar Express" showFooter={false}>
       <section ref={containerRef} className={styles.container}>
-        <Box display="flex" justifyContent="center">
+        <Box display="flex" justifyContent={{ mobile: 'flexStart', tablet: 'spaceBetween' }}>
+          <RadioGroup<PolarEffect>
+            legend="Trigonometric Function"
+            legendMode="screen-reader-only"
+            name="theme"
+            checkableLayout="inline"
+            checkableSize={'large'}
+            onChange={(o) => {
+              setPolarEffect(o.target.value as PolarEffect);
+            }}
+            options={[
+              {
+                value: 'butterfly',
+                content: 'Butterfly',
+                checked: polarEffect === 'butterfly',
+              },
+              {
+                value: 'rose',
+                content: 'Rose',
+                checked: polarEffect === 'rose',
+              },
+            ]}
+          />
           <MathJax className={styles.expression}>{`$ r = ${parse(state.expression).toTex()}$`}</MathJax>
         </Box>
         <ResponsiveSVG width={width} height={height} overflow="hidden" className="polar-svg">

apps/website/src/components/Polar/reducer.ts

@@ -4,19 +4,27 @@ import { parse } from 'mathjs';
 import type { Reducer } from 'react';
 import { match } from 'ts-pattern';
 
+const polarEffects = {
+  ['butterfly']: 'e^(sin(x)) - 2 * cos(4x) + (sin((2x - pi) / 24))^5',
+  ['rose']: 'sin(4x)',
+} as const;
+
+export type PolarEffect = keyof typeof polarEffects;
+
 type State = {
   expression: string;
   points: Point[];
   current: Point[];
   bucket: Point[];
   time: number;
+  polarEffect: PolarEffect;
 };
 
 type PolarActions =
   | {
-      type: 'SET_EXPRESSION';
+      type: 'SET_POLAR_EFFECT';
       payload: {
-        expression: string;
+        polarEffect: PolarEffect;
       };
     }
   | {
@@ -45,9 +53,6 @@ function getPolarCurvePointsFromParsed(
   return points;
 }
 
-// butterfly curve  e^(sin(x)) - 2 * cos(4x) + (sin((2x - pi) / 24))^5
-// rose curve sin(4x)
-
 export const initialState: State = {
   expression: 'e^(sin(x)) - 2 * cos(4x) + (sin((2x - pi) / 24))^5',
   points: [],
@@ -58,15 +63,16 @@ export const initialState: State = {
 
 export const reducer: Reducer<State, PolarActions> = produce((state, action) => {
   return match(action)
-    .with({ type: 'SET_EXPRESSION' }, ({ payload }) => {
-      const node = parse(payload.expression);
+    .with({ type: 'SET_POLAR_EFFECT' }, ({ payload }) => {
+      const expression = polarEffects[payload.polarEffect];
+      const node = parse(expression);
       const compiledFn = node.compile();
       state.current = [];
       const points = getPolarCurvePointsFromParsed(compiledFn, 0, 2 * Math.PI, 100);
 
       state.bucket = points;
       state.points = [...points];
-      state.expression = payload.expression;
+      state.expression = expression;
       state.time = 1;
     })
     .with({ type: 'TICK' }, () => {