Add an optional second mandala circle (#24).
Atul Varma
rodzic
c76bcc2d5a
commit
d742f4156a
|
|
@ -12,6 +12,7 @@ import {
|
|||
SvgSymbolContent,
|
||||
SvgSymbolContext,
|
||||
SvgSymbolData,
|
||||
swapColors,
|
||||
} from "../svg-symbol";
|
||||
import { VocabularyWidget } from "../vocabulary-widget";
|
||||
import {
|
||||
|
|
@ -26,8 +27,39 @@ import { NumericRange, range } from "../util";
|
|||
import { Random } from "../random";
|
||||
import { PointWithNormal } from "../specs";
|
||||
import { getAttachmentTransforms } from "../attach";
|
||||
import { Checkbox } from "../checkbox";
|
||||
|
||||
const EYE = SvgVocabulary.get("eye_vertical");
|
||||
const CIRCLE_1_DEFAULTS: MandalaCircleParams = {
|
||||
data: SvgVocabulary.get("eye_vertical"),
|
||||
radius: 50,
|
||||
numSymbols: 6,
|
||||
};
|
||||
|
||||
const CIRCLE_2_DEFAULTS: MandalaCircleParams = {
|
||||
data: SvgVocabulary.get("leg"),
|
||||
radius: 0,
|
||||
numSymbols: 3,
|
||||
};
|
||||
|
||||
const CIRCLE_2_DEFAULT_SCALE = 0.5;
|
||||
|
||||
const RADIUS: NumericRange = {
|
||||
min: 0,
|
||||
max: 1000,
|
||||
step: 1,
|
||||
};
|
||||
|
||||
const NUM_SYMBOLS: NumericRange = {
|
||||
min: 1,
|
||||
max: 30,
|
||||
step: 1,
|
||||
};
|
||||
|
||||
const SCALE: NumericRange = {
|
||||
min: 0.1,
|
||||
max: 2,
|
||||
step: 0.1,
|
||||
};
|
||||
|
||||
/**
|
||||
* Returns the anchor point of the given symbol; if it doesn't have
|
||||
|
|
@ -44,13 +76,15 @@ function getAnchorOrCenter(symbol: SvgSymbolData): PointWithNormal {
|
|||
);
|
||||
}
|
||||
|
||||
const MandalaCircle: React.FC<
|
||||
{
|
||||
data: SvgSymbolData;
|
||||
radius: number;
|
||||
numSymbols: number;
|
||||
} & SvgSymbolContext
|
||||
> = (props) => {
|
||||
type MandalaCircleParams = {
|
||||
data: SvgSymbolData;
|
||||
radius: number;
|
||||
numSymbols: number;
|
||||
};
|
||||
|
||||
const MandalaCircle: React.FC<MandalaCircleParams & SvgSymbolContext> = (
|
||||
props
|
||||
) => {
|
||||
const degreesPerItem = 360 / props.numSymbols;
|
||||
const { translation, rotation } = getAttachmentTransforms(
|
||||
{
|
||||
|
|
@ -83,62 +117,110 @@ const MandalaCircle: React.FC<
|
|||
return <>{symbols}</>;
|
||||
};
|
||||
|
||||
type NumericParams = NumericRange & { default: number };
|
||||
|
||||
const RADIUS: NumericParams = {
|
||||
min: 0,
|
||||
max: 1000,
|
||||
step: 1,
|
||||
default: 50,
|
||||
const MandalaCircleParamsWidget: React.FC<{
|
||||
idPrefix: string;
|
||||
value: MandalaCircleParams;
|
||||
onChange: (value: MandalaCircleParams) => void;
|
||||
}> = ({ idPrefix, value, onChange }) => {
|
||||
return (
|
||||
<div className="thingy">
|
||||
<VocabularyWidget
|
||||
id={`${idPrefix}symbol`}
|
||||
label="Symbol"
|
||||
value={value.data}
|
||||
onChange={(data) => onChange({ ...value, data })}
|
||||
choices={SvgVocabulary}
|
||||
/>
|
||||
<NumericSlider
|
||||
id={`${idPrefix}radius`}
|
||||
label="Radius"
|
||||
value={value.radius}
|
||||
onChange={(radius) => onChange({ ...value, radius })}
|
||||
{...RADIUS}
|
||||
/>
|
||||
<NumericSlider
|
||||
id={`${idPrefix}numSymbols`}
|
||||
label="Number of symbols"
|
||||
value={value.numSymbols}
|
||||
onChange={(numSymbols) => onChange({ ...value, numSymbols })}
|
||||
{...NUM_SYMBOLS}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const NUM_SYMBOLS: NumericParams = {
|
||||
min: 1,
|
||||
max: 30,
|
||||
step: 1,
|
||||
default: 6,
|
||||
};
|
||||
function getRandomCircleParams(rng: Random): MandalaCircleParams {
|
||||
return {
|
||||
data: rng.choice(SvgVocabulary.items),
|
||||
radius: rng.inRange(RADIUS),
|
||||
numSymbols: rng.inRange(NUM_SYMBOLS),
|
||||
};
|
||||
}
|
||||
|
||||
export const MandalaPage: React.FC<{}> = () => {
|
||||
const svgRef = useRef<SVGSVGElement>(null);
|
||||
const [bgColor, setBgColor] = useState(DEFAULT_BG_COLOR);
|
||||
const [symbol, setSymbol] = useState(EYE);
|
||||
const [circle1, setCircle1] = useState<MandalaCircleParams>(
|
||||
CIRCLE_1_DEFAULTS
|
||||
);
|
||||
const [circle2, setCircle2] = useState<MandalaCircleParams>(
|
||||
CIRCLE_2_DEFAULTS
|
||||
);
|
||||
const [symbolCtx, setSymbolCtx] = useState(createSvgSymbolContext());
|
||||
const [radius, setRadius] = useState(RADIUS.default);
|
||||
const [numSymbols, setNumSymbols] = useState(NUM_SYMBOLS.default);
|
||||
const [useTwoCircles, setUseTwoCircles] = useState(false);
|
||||
const [invertCircle2, setInvertCircle2] = useState(true);
|
||||
const [circle2Scale, setCircle2Scale] = useState(CIRCLE_2_DEFAULT_SCALE);
|
||||
const randomize = () => {
|
||||
const rng = new Random(Date.now());
|
||||
setRadius(rng.inRange(RADIUS));
|
||||
setNumSymbols(rng.inRange(NUM_SYMBOLS));
|
||||
setSymbol(rng.choice(SvgVocabulary.items));
|
||||
setCircle1(getRandomCircleParams(rng));
|
||||
setCircle2(getRandomCircleParams(rng));
|
||||
setCircle2Scale(rng.inRange(SCALE));
|
||||
};
|
||||
|
||||
const circle2SymbolCtx = invertCircle2 ? swapColors(symbolCtx) : symbolCtx;
|
||||
|
||||
return (
|
||||
<>
|
||||
<h1>Mandala!</h1>
|
||||
<SymbolContextWidget ctx={symbolCtx} onChange={setSymbolCtx}>
|
||||
<ColorWidget label="Background" value={bgColor} onChange={setBgColor} />{" "}
|
||||
</SymbolContextWidget>
|
||||
<fieldset>
|
||||
<legend>First circle</legend>
|
||||
<MandalaCircleParamsWidget
|
||||
idPrefix="c1"
|
||||
value={circle1}
|
||||
onChange={setCircle1}
|
||||
/>
|
||||
</fieldset>
|
||||
<div className="thingy">
|
||||
<VocabularyWidget
|
||||
label="Symbol"
|
||||
value={symbol}
|
||||
onChange={setSymbol}
|
||||
choices={SvgVocabulary}
|
||||
/>
|
||||
<NumericSlider
|
||||
label="Radius"
|
||||
value={radius}
|
||||
onChange={setRadius}
|
||||
{...RADIUS}
|
||||
/>
|
||||
<NumericSlider
|
||||
label="Numer of symbols"
|
||||
value={numSymbols}
|
||||
onChange={setNumSymbols}
|
||||
{...NUM_SYMBOLS}
|
||||
<Checkbox
|
||||
label="Add a second circle"
|
||||
value={useTwoCircles}
|
||||
onChange={setUseTwoCircles}
|
||||
/>
|
||||
</div>
|
||||
{useTwoCircles && (
|
||||
<fieldset>
|
||||
<legend>Second circle</legend>
|
||||
<MandalaCircleParamsWidget
|
||||
idPrefix="c2"
|
||||
value={circle2}
|
||||
onChange={setCircle2}
|
||||
/>
|
||||
<NumericSlider
|
||||
label="Scale"
|
||||
value={circle2Scale}
|
||||
onChange={setCircle2Scale}
|
||||
{...SCALE}
|
||||
/>
|
||||
<Checkbox
|
||||
label="Invert colors"
|
||||
value={invertCircle2}
|
||||
onChange={setInvertCircle2}
|
||||
/>
|
||||
</fieldset>
|
||||
)}
|
||||
<div className="thingy">
|
||||
<button accessKey="r" onClick={randomize}>
|
||||
<u>R</u>andomize!
|
||||
|
|
@ -148,12 +230,12 @@ export const MandalaPage: React.FC<{}> = () => {
|
|||
<HoverDebugHelper>
|
||||
<AutoSizingSvg padding={20} ref={svgRef} bgColor={bgColor}>
|
||||
<SvgTransform transform={svgScale(0.5)}>
|
||||
<MandalaCircle
|
||||
data={symbol}
|
||||
radius={radius}
|
||||
numSymbols={numSymbols}
|
||||
{...symbolCtx}
|
||||
/>
|
||||
<MandalaCircle {...circle1} {...symbolCtx} />
|
||||
{useTwoCircles && (
|
||||
<SvgTransform transform={svgScale(circle2Scale)}>
|
||||
<MandalaCircle {...circle2} {...circle2SymbolCtx} />
|
||||
</SvgTransform>
|
||||
)}
|
||||
</SvgTransform>
|
||||
</AutoSizingSvg>
|
||||
</HoverDebugHelper>
|
||||
|
|
|
|||
Ładowanie…
Reference in New Issue