From 78d71cbc7b20ad5da314b86713a8d9a91354e7f8 Mon Sep 17 00:00:00 2001 From: Bradlee Speice Date: Sun, 8 Dec 2024 16:17:21 -0500 Subject: [PATCH] View detection --- .../3-log-density/FlameColor.tsx | 2 +- .../3-log-density/FlameHistogram.tsx | 12 +++---- .../3-log-density/chaosGameColor.ts | 2 +- .../3-log-density/chaosGameHistogram.ts | 2 +- .../3-log-density/index.mdx | 4 +-- .../src/Canvas.tsx | 32 ++++++++++++++++--- package.json | 2 +- 7 files changed, 40 insertions(+), 16 deletions(-) diff --git a/blog/2024-11-15-playing-with-fire/3-log-density/FlameColor.tsx b/blog/2024-11-15-playing-with-fire/3-log-density/FlameColor.tsx index 22461b2..bf75f31 100644 --- a/blog/2024-11-15-playing-with-fire/3-log-density/FlameColor.tsx +++ b/blog/2024-11-15-playing-with-fire/3-log-density/FlameColor.tsx @@ -103,7 +103,7 @@ const ColorEditor: React.FC = ({title, palette, transformColor onInput={e => setTransformColor({...transformColor, color: Number(e.currentTarget.value)})}/>
-

Color speed: {transformColor.colorSpeed}

+

Speed: {transformColor.colorSpeed}

setTransformColor({...transformColor, colorSpeed: Number(e.currentTarget.value)})}/>
diff --git a/blog/2024-11-15-playing-with-fire/3-log-density/FlameHistogram.tsx b/blog/2024-11-15-playing-with-fire/3-log-density/FlameHistogram.tsx index 8db4119..d0b11de 100644 --- a/blog/2024-11-15-playing-with-fire/3-log-density/FlameHistogram.tsx +++ b/blog/2024-11-15-playing-with-fire/3-log-density/FlameHistogram.tsx @@ -1,24 +1,24 @@ import React, {useContext, useEffect} from "react"; -import * as params from "../src/params"; +import {xforms as transforms, xformFinal as final} from "../src/params"; import {PainterContext} from "../src/Canvas"; import {chaosGameHistogram} from "./chaosGameHistogram"; type Props = { quality?: number; - paintFn: (width: number, histogram: Uint32Array) => ImageData; + paint: (width: number, histogram: Uint32Array) => ImageData; children?: React.ReactElement; } -export default function FlameHistogram({quality, paintFn, children}: Props) { +export default function FlameHistogram({quality, paint, children}: Props) { const {width, height, setPainter} = useContext(PainterContext); useEffect(() => { const gameParams = { width, height, - transforms: params.xforms, - final: params.xformFinal, + transforms, + final, quality, - painter: paintFn + paint } setPainter(chaosGameHistogram(gameParams)); }, []); diff --git a/blog/2024-11-15-playing-with-fire/3-log-density/chaosGameColor.ts b/blog/2024-11-15-playing-with-fire/3-log-density/chaosGameColor.ts index dd3a1aa..71902e8 100644 --- a/blog/2024-11-15-playing-with-fire/3-log-density/chaosGameColor.ts +++ b/blog/2024-11-15-playing-with-fire/3-log-density/chaosGameColor.ts @@ -20,7 +20,7 @@ export type ChaosGameColorProps = ChaosGameFinalProps & { } export function* chaosGameColor({width, height, transforms, final, palette, colors, finalColor, quality, step}: ChaosGameColorProps) { let iterations = (quality ?? 1) * width * height; - step = step ?? 100_000; + step = step ?? 10_000; let currentColor = Math.random(); const red = Array(width * height).fill(0); diff --git a/blog/2024-11-15-playing-with-fire/3-log-density/chaosGameHistogram.ts b/blog/2024-11-15-playing-with-fire/3-log-density/chaosGameHistogram.ts index 76025ab..b35980d 100644 --- a/blog/2024-11-15-playing-with-fire/3-log-density/chaosGameHistogram.ts +++ b/blog/2024-11-15-playing-with-fire/3-log-density/chaosGameHistogram.ts @@ -9,7 +9,7 @@ export type ChaosGameHistogramProps = ChaosGameFinalProps & { } export function* chaosGameHistogram({width, height, transforms, final, quality, step, paint}: ChaosGameHistogramProps) { let iterations = (quality ?? 1) * width * height; - step = step ?? 100_000; + step = step ?? 10_000; const histogram = new Uint32Array(width * height); diff --git a/blog/2024-11-15-playing-with-fire/3-log-density/index.mdx b/blog/2024-11-15-playing-with-fire/3-log-density/index.mdx index 495d47c..515451f 100644 --- a/blog/2024-11-15-playing-with-fire/3-log-density/index.mdx +++ b/blog/2024-11-15-playing-with-fire/3-log-density/index.mdx @@ -32,7 +32,7 @@ import Canvas from "../src/Canvas"; import FlameHistogram from "./FlameHistogram"; import {paintLinear} from "./paintLinear"; - + ## Log display @@ -42,7 +42,7 @@ import paintLogarithmicSource from "!!raw-loader!./paintLogarithmic" import {paintLogarithmic} from './paintLogarithmic' - + ## Color diff --git a/blog/2024-11-15-playing-with-fire/src/Canvas.tsx b/blog/2024-11-15-playing-with-fire/src/Canvas.tsx index 41c851a..c6afae3 100644 --- a/blog/2024-11-15-playing-with-fire/src/Canvas.tsx +++ b/blog/2024-11-15-playing-with-fire/src/Canvas.tsx @@ -1,4 +1,4 @@ -import React, {useCallback, useEffect, useState, createContext} from "react"; +import React, {useCallback, useEffect, useState, createContext, useRef} from "react"; import {useColorMode} from "@docusaurus/theme-common"; import BrowserOnly from "@docusaurus/BrowserOnly"; @@ -100,10 +100,32 @@ interface CanvasProps { * a good way to make those generic. */ export default function Canvas({width, height, children}: CanvasProps) { + const viewportDetectionRef = useRef(null); + const [isVisible, setIsVisible] = useState(false); + useEffect(() => { + if (!viewportDetectionRef) { + return; + } + + const observer = new IntersectionObserver(([entry]) => { + if (entry.isIntersecting) { + setIsVisible(true); + } + }, {root: null, threshold: .1}); + observer.observe(viewportDetectionRef.current); + + return () => { + if (viewportDetectionRef.current) { + observer.unobserve(viewportDetectionRef.current); + } + } + }, [viewportDetectionRef]); + const [image, setImage] = useState<[ImageData]>(null); const [painterHolder, setPainterHolder] = useState<[Iterator]>(null); useEffect(() => { - if (!painterHolder) { + if (!isVisible || !painterHolder) { + console.log("Skipping, not visible"); return; } @@ -115,7 +137,7 @@ export default function Canvas({width, height, children}: CanvasProps) { } else { setPainterHolder(null); } - }, [painterHolder]); + }, [isVisible, painterHolder]); const [painter, setPainter] = useState>(null); useEffect(() => { @@ -129,7 +151,9 @@ export default function Canvas({width, height, children}: CanvasProps) { return ( <>
- +
+ +
{() => children} diff --git a/package.json b/package.json index 47f0fda..8a0c59f 100644 --- a/package.json +++ b/package.json @@ -4,7 +4,7 @@ "private": true, "scripts": { "docusaurus": "docusaurus", - "start": "docusaurus start", + "start": "docusaurus start --host 0.0.0.0", "build": "docusaurus build", "swizzle": "docusaurus swizzle", "deploy": "docusaurus deploy",