2024-12-08 19:53:06 -05:00
|
|
|
import {useEffect, useState, useContext, useRef} from "react";
|
2024-11-29 23:08:47 -05:00
|
|
|
import {PainterContext} from "../src/Canvas";
|
2024-12-01 21:57:10 -05:00
|
|
|
import {chaosGameWeighted} from "./chaosGameWeighted";
|
2024-11-24 22:37:53 -05:00
|
|
|
import TeX from '@matejmazur/react-katex';
|
|
|
|
|
2024-11-29 19:25:29 -05:00
|
|
|
import styles from "../src/css/styles.module.css"
|
2024-11-24 22:37:53 -05:00
|
|
|
|
2024-11-29 19:25:29 -05:00
|
|
|
type Transform = (x: number, y: number) => [number, number];
|
2024-11-24 22:37:53 -05:00
|
|
|
|
|
|
|
export default function GasketWeighted() {
|
|
|
|
const [f0Weight, setF0Weight] = useState<number>(1);
|
|
|
|
const [f1Weight, setF1Weight] = useState<number>(1);
|
|
|
|
const [f2Weight, setF2Weight] = useState<number>(1);
|
|
|
|
|
|
|
|
const f0: Transform = (x, y) => [x / 2, y / 2];
|
|
|
|
const f1: Transform = (x, y) => [(x + 1) / 2, y / 2];
|
|
|
|
const f2: Transform = (x, y) => [x / 2, (y + 1) / 2];
|
|
|
|
|
2024-12-01 21:57:10 -05:00
|
|
|
const {width, height, setPainter} = useContext(PainterContext);
|
2024-11-29 23:08:47 -05:00
|
|
|
|
2024-11-24 22:37:53 -05:00
|
|
|
useEffect(() => {
|
2024-12-01 21:57:10 -05:00
|
|
|
const transforms: [number, Transform][] = [
|
2024-11-29 23:08:47 -05:00
|
|
|
[f0Weight, f0],
|
|
|
|
[f1Weight, f1],
|
|
|
|
[f2Weight, f2]
|
2024-12-01 21:57:10 -05:00
|
|
|
];
|
|
|
|
setPainter(chaosGameWeighted({width, height, transforms}));
|
2024-11-24 22:37:53 -05:00
|
|
|
}, [f0Weight, f1Weight, f2Weight]);
|
|
|
|
|
2024-11-29 19:25:29 -05:00
|
|
|
const weightInput = (title, weight, setWeight) => (
|
|
|
|
<>
|
2024-11-30 17:35:42 -05:00
|
|
|
<div className={styles.inputElement}>
|
2024-12-08 19:53:06 -05:00
|
|
|
<p><TeX>{title}</TeX>: {weight}</p>
|
2024-12-11 19:56:39 -05:00
|
|
|
<input type={'range'} min={0} max={1} step={.01} style={{width: '100%', background: 'transparent'}} value={weight}
|
2024-11-29 19:25:29 -05:00
|
|
|
onInput={e => setWeight(Number(e.currentTarget.value))}/>
|
|
|
|
</div>
|
|
|
|
</>
|
|
|
|
)
|
|
|
|
|
2024-11-24 22:37:53 -05:00
|
|
|
return (
|
|
|
|
<>
|
2024-12-08 19:53:06 -05:00
|
|
|
<div className={styles.inputGroup} style={{display: 'grid', gridTemplateColumns: '1fr 1fr 1fr'}}>
|
2024-11-29 19:25:29 -05:00
|
|
|
{weightInput("F_0", f0Weight, setF0Weight)}
|
|
|
|
{weightInput("F_1", f1Weight, setF1Weight)}
|
|
|
|
{weightInput("F_2", f2Weight, setF2Weight)}
|
2024-11-24 22:37:53 -05:00
|
|
|
</div>
|
|
|
|
</>
|
|
|
|
)
|
|
|
|
}
|