mirror-github-bspeice/speice.io
1
0
Fork 0
mirror of https://github.com/bspeice/speice.io synced 2025-12-14 17:17:28 -05:00
Code Issues Releases Wiki Activity

Rewrite canvas to use React state management properly

Browse Source
This commit is contained in:
Bradlee Speice
2024-11-29 23:08:47 -05:00
parent ce5a28b7bd
commit 112470ce5a
9 changed files with 190 additions and 118 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
blog/2024-11-15-playing-with-fire/1-introduction/GasketWeighted.tsx
View File

@ -1,6 +1,6 @@
import {useEffect, useState} from "react";
import Canvas from "../src/Canvas";
import { Params, chaosGameWeighted } from "./chaosGameWeighted";
import {useEffect, useState, useContext} from "react";
import {PainterContext} from "../src/Canvas";
import {chaosGameWeighted } from "./chaosGameWeighted";
import TeX from '@matejmazur/react-katex';
import styles from "../src/css/styles.module.css"
@ -8,10 +8,6 @@ import styles from "../src/css/styles.module.css"
type Transform = (x: number, y: number) => [number, number];
export default function GasketWeighted() {
const image = new ImageData(600, 600);
const iterations = 100_000;
const step = 1000;
const [f0Weight, setF0Weight] = useState<number>(1);
const [f1Weight, setF1Weight] = useState<number>(1);
const [f2Weight, setF2Weight] = useState<number>(1);
@ -20,19 +16,14 @@ export default function GasketWeighted() {
const f1: Transform = (x, y) => [(x + 1) / 2, y / 2];
const f2: Transform = (x, y) => [x / 2, (y + 1) / 2];
const [game, setGame] = useState<Generator<ImageData>>(null);
const {setPainter} = useContext(PainterContext);
useEffect(() => {
const params: Params = {
transforms: [
[f0Weight, f0],
[f1Weight, f1],
[f2Weight, f2]
],
image,
iterations,
step
}
setGame(chaosGameWeighted(params))
setPainter(chaosGameWeighted([
[f0Weight, f0],
[f1Weight, f1],
[f2Weight, f2]
]));
}, [f0Weight, f1Weight, f2Weight]);
const weightInput = (title, weight, setWeight) => (
@ -47,7 +38,6 @@ export default function GasketWeighted() {
return (
<>
<Canvas width={image.width} height={image.height} painter={game}/>
<div style={{paddingTop: '1em', display: 'grid', gridTemplateColumns: 'auto auto auto'}}>
{weightInput("F_0", f0Weight, setF0Weight)}
{weightInput("F_1", f1Weight, setF1Weight)}