From 342e4ee6cf4b0392dd0bbc698108b69d13e6d94f Mon Sep 17 00:00:00 2001 From: Bradlee Speice Date: Sat, 22 Jul 2023 03:26:54 +0000 Subject: [PATCH] Implement offline rendering, default to pre-render --- posts/2023/06/flam3/0-canvas.tsx | 108 ++- posts/2023/06/flam3/0-utility.ts | 7 +- posts/2023/06/flam3/1-gasket.ts | 11 +- .../{2a-variations.ts => 2a-baseline.ts} | 10 +- posts/2023/06/flam3/2b-post.ts | 11 +- posts/2023/06/flam3/2c-final.ts | 38 +- posts/2023/06/flam3/3a-binary.ts | 25 +- posts/2023/06/flam3/3b-linear.ts | 21 +- posts/2023/06/flam3/3c-logarithmic.ts | 21 +- posts/2023/06/flam3/4-color.ts | 39 +- posts/2023/06/flam3/5a-gasket.ts | 11 +- posts/2023/06/flam3/5b-solo.ts | 32 +- posts/2023/06/flam3/baseline.bak | 230 ------ posts/2023/06/flam3/baseline.flame | 230 ------ posts/2023/06/flam3/gasket.bak | 41 -- posts/2023/06/flam3/images/1-gasket.png | Bin 0 -> 6586 bytes posts/2023/06/flam3/images/2a-baseline.png | Bin 0 -> 31048 bytes posts/2023/06/flam3/images/2b-post.png | Bin 0 -> 30671 bytes posts/2023/06/flam3/images/2c-final.png | Bin 0 -> 29128 bytes posts/2023/06/flam3/images/3a-binary.png | Bin 0 -> 29090 bytes posts/2023/06/flam3/images/3b-linear.png | Bin 0 -> 74838 bytes posts/2023/06/flam3/images/3c-logarithmic.png | Bin 0 -> 118934 bytes posts/2023/06/flam3/images/4-color.png | Bin 0 -> 278437 bytes posts/2023/06/flam3/images/5a-gasket.png | Bin 0 -> 1607 bytes posts/2023/06/flam3/images/5b-solo1.png | Bin 0 -> 90109 bytes posts/2023/06/flam3/images/5b-solo2.png | Bin 0 -> 6182 bytes posts/2023/06/flam3/images/5b-solo3.png | Bin 0 -> 48262 bytes posts/2023/06/flam3/index.tsx | 113 +-- posts/2023/06/flam3/offline.ts | 45 ++ posts/2023/06/flam3/package-lock.json | 659 ++++++++++++++++++ posts/2023/06/flam3/package.json | 17 + posts/2023/06/flam3/tsconfig.json | 14 + posts/2023/06/flam3/variations.bak | 120 ---- 33 files changed, 943 insertions(+), 860 deletions(-) rename posts/2023/06/flam3/{2a-variations.ts => 2a-baseline.ts} (96%) delete mode 100644 posts/2023/06/flam3/baseline.bak delete mode 100644 posts/2023/06/flam3/baseline.flame delete mode 100644 posts/2023/06/flam3/gasket.bak create mode 100644 posts/2023/06/flam3/images/1-gasket.png create mode 100644 posts/2023/06/flam3/images/2a-baseline.png create mode 100644 posts/2023/06/flam3/images/2b-post.png create mode 100644 posts/2023/06/flam3/images/2c-final.png create mode 100644 posts/2023/06/flam3/images/3a-binary.png create mode 100644 posts/2023/06/flam3/images/3b-linear.png create mode 100644 posts/2023/06/flam3/images/3c-logarithmic.png create mode 100644 posts/2023/06/flam3/images/4-color.png create mode 100644 posts/2023/06/flam3/images/5a-gasket.png create mode 100644 posts/2023/06/flam3/images/5b-solo1.png create mode 100644 posts/2023/06/flam3/images/5b-solo2.png create mode 100644 posts/2023/06/flam3/images/5b-solo3.png create mode 100644 posts/2023/06/flam3/offline.ts create mode 100644 posts/2023/06/flam3/package-lock.json create mode 100644 posts/2023/06/flam3/package.json create mode 100644 posts/2023/06/flam3/tsconfig.json delete mode 100644 posts/2023/06/flam3/variations.bak 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 ( - + <> + +