diff --git a/posts/2023/06/flam3/0-canvas.tsx b/posts/2023/06/flam3/0-canvas.tsx index 63c354c..2893375 100644 --- a/posts/2023/06/flam3/0-canvas.tsx +++ b/posts/2023/06/flam3/0-canvas.tsx @@ -1,57 +1,105 @@ -import React, { useEffect, useRef } from "react"; -import { Renderer } from "./0-utility"; +import React, { useEffect, useRef, useState } from "react"; +import { DEFAULT_SIZE, RenderParams, Renderer } from "./0-utility.js"; +import { paramsGasket } from "./1-gasket.js"; +import { paramsBaseline } from "./2a-baseline.js"; +import { paramsPost } from "./2b-post.js"; +import { paramsFinal } from "./2c-final.js"; +import { paramsBinary } from "./3a-binary.js"; +import { paramsLinear } from "./3b-linear.js"; +import { paramsLogarithmic } from "./3c-logarithmic.js"; +import { paramsColor } from "./4-color.js"; +import { paramsGasketFlame } from "./5a-gasket.js"; +import { paramsSolo1, paramsSolo2, paramsSolo3 } from "./5b-solo.js"; -export type CanvasParams = { - defaultUrl: string; - size: number; - qualityMax: number; - qualityStep: number; - renderer: (size: number) => Renderer; -}; +import urlGasket from "./images/1-gasket.png"; +import urlBaseline from "./images/2a-baseline.png"; +import urlPost from "./images/2b-post.png"; +import urlFinal from "./images/2c-final.png"; +import urlBinary from "./images/3a-binary.png"; +import urlLinear from "./images/3b-linear.png"; +import urlLogarithmic from "./images/3c-logarithmic.png"; +import urlColor from "./images/4-color.png"; +import urlGasketFlame from "./images/5a-gasket.png"; +import urlSolo1 from "./images/5b-solo1.png"; +import urlSolo2 from "./images/5b-solo2.png"; +import urlSolo3 from "./images/5b-solo3.png"; -export const CanvasRenderer: React.FC<{ params: CanvasParams }> = ({ - params, -}) => { +export const DEFAULT_STEP: number = 0.1; + +export type CanvasParams = RenderParams & { url: string }; + +export const CanvasRenderer: React.FC = (params) => { const canvasRef = useRef(null); + const [useUrl, setUseUrl] = useState(true); var qualityCurrent: number = 0; - var rendererCurrent: Renderer = params.renderer(params.size); + var rendererCurrent: Renderer = params.renderer(DEFAULT_SIZE); const animate = () => { const ctx = canvasRef.current?.getContext("2d"); if (!ctx) { + console.log("Ref not ready"); + requestAnimationFrame(animate); return; } - const image = ctx.createImageData(params.size, params.size); - rendererCurrent.run(params.qualityStep); + const image = ctx.createImageData(DEFAULT_SIZE, DEFAULT_SIZE); + rendererCurrent.run(DEFAULT_STEP); rendererCurrent.render(image); ctx.putImageData(image, 0, 0); - if (qualityCurrent < params.qualityMax) { - qualityCurrent += params.qualityStep; + if (qualityCurrent < params.quality) { + qualityCurrent += DEFAULT_STEP; requestAnimationFrame(animate); } }; + const useCanvas = () => { + setUseUrl(false); + requestAnimationFrame(animate); + }; + const reset = () => { qualityCurrent = 0; - rendererCurrent = params.renderer(params.size); + rendererCurrent = params.renderer(DEFAULT_SIZE); requestAnimationFrame(animate); }; - useEffect(() => { - if (canvasRef.current) { - requestAnimationFrame(animate); - } - }, []); - return ( - + <> + +