diff --git a/webapp/app/plot.tsx b/webapp/app/plot.tsx index 3fabbc2..9aba520 100644 --- a/webapp/app/plot.tsx +++ b/webapp/app/plot.tsx @@ -1,6 +1,7 @@ +// A record of a individual plot. export default interface Plot { readonly CreatedAt: string; readonly UpdatedAt: string; readonly ID: number; readonly Filename: string; -} \ No newline at end of file +}; \ No newline at end of file diff --git a/webapp/app/plotParams.tsx b/webapp/app/plotParams.tsx new file mode 100644 index 0000000..6742a5d --- /dev/null +++ b/webapp/app/plotParams.tsx @@ -0,0 +1,12 @@ +import Region from "./region"; +import Stop from "./stop"; + +// Parameters used to plot the 'brot. +export default interface PlotParams { + readonly sampleSize: number, + readonly maxIterations: number, + readonly region: Region, + readonly width: number, + readonly height: number, + readonly gradient: Stop[] +}; \ No newline at end of file diff --git a/webapp/app/plotform.tsx b/webapp/app/plotform.tsx index 3e6e914..a60d9eb 100644 --- a/webapp/app/plotform.tsx +++ b/webapp/app/plotform.tsx @@ -1,37 +1,27 @@ 'use client' -import { APIURL, PLOTROUTE } from "./apiRoutes" +import { useState } from "react"; +import { APIURL, PLOTROUTE } from "./apiRoutes"; +import PlotParams from "./plotParams"; export default function PlotForm() { - // Plot area of the complex plane. - interface Region { - readonly minReal: number, - readonly maxReal: number, - readonly minImag: number, - readonly maxImag: number - }; - - // A hex color and its position in a gradient. - interface Stop { - readonly color: string, - readonly position: number - } - - // Parameters used to plot the 'brot. - interface PlotParams { - readonly sampleSize: number, - readonly maxIterations: number, - readonly region: Region, - readonly width: number, - readonly height: number, - readonly gradient: Stop[] - }; - // Data returned by the plot request. interface PlotResponse { readonly id: number } + const MinReal = -2, + MaxReal = 1.6, + MinImag = -2, + MaxImag = 2; + + const [minReal, setMinReal] = useState(MinReal); + const [maxReal, setMaxReal] = useState(MaxReal); + const [minImag, setMinImag] = useState(MinImag); + const [maxImag, setMaxImag] = useState(MaxImag); + const [width, setWidth] = useState(512); + const [height, setHeight] = useState(512); + async function plot(formData: FormData) { // Copy the plot parameters from the submitted form. const plotParams: PlotParams = { @@ -72,24 +62,50 @@ export default function PlotForm() { .then(body => body as PlotResponse) .catch(console.error); - // TODO:: Redirect to... something? + // TODO:: Add a message indicating the plot was submitted successfully. console.log(plotResponse); } + function random(min: number, max: number): number { + return Math.random() * (max - min) + min; + } + + function randomizeRegion() { + // Get two points on the real axis. + const reals = [ random(MinReal, MaxReal), random(MinReal, MaxReal)]; + const minR = Math.min(...reals), + maxR = Math.max(...reals); + + // Figure out the imaginary height while maintaining the image aspect ratio. + const aspectRatio = height / width; + const widthR = maxR - minR; + const heightI = widthR * aspectRatio; + console.debug(`Aspect ratio: ${aspectRatio} Real width: ${widthR} Imaginary height: ${heightI}`); + + // Get a minimum imaginary number, and offset the maximum from it. + const minI = random(MinImag, MaxImag - heightI); + const maxI = minI + heightI; + + setMinReal(Number(minR.toFixed(3))); + setMaxReal(Number(maxR.toFixed(3))); + setMinImag(Number(minI.toFixed(3))); + setMaxImag(Number(maxI.toFixed(3))); + } + return ( -
+
- setWidth(Number(e.target.value))} className="appearance-none block w-full bg-gray-200 text-gray-700 border border-gray-200 rounded py-3 px-4 leading-tight focus:outline-none focus:bg-white focus:border-gray-500" />
- setHeight(Number(e.target.value))} className="appearance-none block w-full bg-gray-200 text-gray-700 border border-gray-200 rounded py-3 px-4 leading-tight focus:outline-none focus:bg-white focus:border-gray-500" />
@@ -113,32 +129,33 @@ export default function PlotForm() { -
-
-
-
+
); diff --git a/webapp/app/plotsummarylist.tsx b/webapp/app/plotsummarylist.tsx index bcc58f8..8422abc 100644 --- a/webapp/app/plotsummarylist.tsx +++ b/webapp/app/plotsummarylist.tsx @@ -14,7 +14,6 @@ export default function PlotSummaryList() { .then(response => response.json()) .then(body => { setPlots(body); - console.debug("Plot summary list updated."); }) .catch(console.error); }; @@ -29,7 +28,7 @@ export default function PlotSummaryList() { }, []); return ( -
+
Plot History diff --git a/webapp/app/region.tsx b/webapp/app/region.tsx new file mode 100644 index 0000000..8e64141 --- /dev/null +++ b/webapp/app/region.tsx @@ -0,0 +1,7 @@ +// Plot area of the complex plane. +export default interface Region { + readonly minReal: number, + readonly maxReal: number, + readonly minImag: number, + readonly maxImag: number +}; \ No newline at end of file diff --git a/webapp/app/stop.tsx b/webapp/app/stop.tsx new file mode 100644 index 0000000..414d083 --- /dev/null +++ b/webapp/app/stop.tsx @@ -0,0 +1,5 @@ + // A hex color and its position in a gradient. + export default interface Stop { + readonly color: string, + readonly position: number + }; \ No newline at end of file