2021-03-27 11:39:21 +00:00
|
|
|
import React, { useRef, useState } from "react";
|
2021-03-26 22:07:01 +00:00
|
|
|
import { AutoSizingSvg } from "../auto-sizing-svg";
|
|
|
|
import { getBoundingBoxCenter } from "../bounding-box";
|
2021-03-27 11:39:21 +00:00
|
|
|
import { ColorWidget } from "../color-widget";
|
|
|
|
import { DEFAULT_BG_COLOR } from "../colors";
|
2021-03-29 11:22:09 +00:00
|
|
|
import { ExportWidget } from "../export-svg";
|
2021-03-26 22:07:01 +00:00
|
|
|
import { HoverDebugHelper } from "../hover-debug-helper";
|
2021-03-27 11:39:21 +00:00
|
|
|
import { NumericSlider } from "../numeric-slider";
|
2021-03-26 22:07:01 +00:00
|
|
|
import {
|
|
|
|
createSvgSymbolContext,
|
2021-03-29 12:23:53 +00:00
|
|
|
noFillIfShowingSpecs,
|
2021-03-28 11:24:16 +00:00
|
|
|
safeGetAttachmentPoint,
|
2021-03-26 22:07:01 +00:00
|
|
|
SvgSymbolContent,
|
|
|
|
SvgSymbolContext,
|
|
|
|
SvgSymbolData,
|
2021-03-28 12:27:57 +00:00
|
|
|
swapColors,
|
2021-03-26 22:07:01 +00:00
|
|
|
} from "../svg-symbol";
|
2021-03-27 12:29:42 +00:00
|
|
|
import { VocabularyWidget } from "../vocabulary-widget";
|
2021-03-26 22:07:01 +00:00
|
|
|
import {
|
|
|
|
svgRotate,
|
|
|
|
svgScale,
|
2021-03-28 10:39:06 +00:00
|
|
|
SvgTransform,
|
2021-03-26 22:07:01 +00:00
|
|
|
svgTranslate,
|
|
|
|
} from "../svg-transform";
|
2021-03-27 12:29:42 +00:00
|
|
|
import { SvgVocabulary } from "../svg-vocabulary";
|
2021-03-26 22:07:01 +00:00
|
|
|
import { SymbolContextWidget } from "../symbol-context-widget";
|
2021-03-27 19:19:36 +00:00
|
|
|
import { NumericRange, range } from "../util";
|
|
|
|
import { Random } from "../random";
|
2021-03-28 11:24:16 +00:00
|
|
|
import { PointWithNormal } from "../specs";
|
|
|
|
import { getAttachmentTransforms } from "../attach";
|
2021-03-28 12:27:57 +00:00
|
|
|
import { Checkbox } from "../checkbox";
|
2021-03-31 00:59:45 +00:00
|
|
|
import { createRandomColorPalette } from "../random-colors";
|
2021-03-26 22:07:01 +00:00
|
|
|
|
2021-03-28 13:14:54 +00:00
|
|
|
type ExtendedMandalaCircleParams = MandalaCircleParams & {
|
|
|
|
scaling: number;
|
|
|
|
rotation: number;
|
2021-03-28 20:22:36 +00:00
|
|
|
symbolScaling: number;
|
|
|
|
symbolRotation: number;
|
2021-03-28 13:14:54 +00:00
|
|
|
};
|
|
|
|
|
|
|
|
const CIRCLE_1_DEFAULTS: ExtendedMandalaCircleParams = {
|
2021-03-29 10:54:36 +00:00
|
|
|
data: SvgVocabulary.get("eye"),
|
|
|
|
radius: 300,
|
|
|
|
numSymbols: 5,
|
2021-03-28 13:14:54 +00:00
|
|
|
scaling: 1,
|
|
|
|
rotation: 0,
|
2021-03-28 20:22:36 +00:00
|
|
|
symbolScaling: 1,
|
|
|
|
symbolRotation: 0,
|
2021-03-29 19:23:37 +00:00
|
|
|
invertEveryOtherSymbol: false,
|
2021-03-28 12:27:57 +00:00
|
|
|
};
|
|
|
|
|
2021-03-28 13:14:54 +00:00
|
|
|
const CIRCLE_2_DEFAULTS: ExtendedMandalaCircleParams = {
|
2021-03-28 12:27:57 +00:00
|
|
|
data: SvgVocabulary.get("leg"),
|
|
|
|
radius: 0,
|
|
|
|
numSymbols: 3,
|
2021-03-28 13:14:54 +00:00
|
|
|
scaling: 0.5,
|
|
|
|
rotation: 0,
|
2021-03-28 20:22:36 +00:00
|
|
|
symbolScaling: 1,
|
|
|
|
symbolRotation: 0,
|
2021-03-29 19:23:37 +00:00
|
|
|
invertEveryOtherSymbol: false,
|
2021-03-28 12:27:57 +00:00
|
|
|
};
|
|
|
|
|
|
|
|
const RADIUS: NumericRange = {
|
2021-03-28 13:14:54 +00:00
|
|
|
min: -500,
|
|
|
|
max: 500,
|
2021-03-28 12:27:57 +00:00
|
|
|
step: 1,
|
|
|
|
};
|
|
|
|
|
|
|
|
const NUM_SYMBOLS: NumericRange = {
|
|
|
|
min: 1,
|
|
|
|
max: 30,
|
|
|
|
step: 1,
|
|
|
|
};
|
|
|
|
|
2021-03-28 13:14:54 +00:00
|
|
|
const SCALING: NumericRange = {
|
2021-03-28 12:27:57 +00:00
|
|
|
min: 0.1,
|
2021-03-28 13:14:54 +00:00
|
|
|
max: 1,
|
|
|
|
step: 0.05,
|
|
|
|
};
|
|
|
|
|
|
|
|
const ROTATION: NumericRange = {
|
|
|
|
min: 0,
|
|
|
|
max: 359,
|
|
|
|
step: 1,
|
2021-03-28 12:27:57 +00:00
|
|
|
};
|
2021-03-28 11:24:16 +00:00
|
|
|
|
|
|
|
/**
|
|
|
|
* Returns the anchor point of the given symbol; if it doesn't have
|
|
|
|
* an anchor point, return a reasonable default one by taking the
|
2021-03-28 12:48:36 +00:00
|
|
|
* center of the symbol and having the normal point along the negative
|
|
|
|
* y-axis (i.e., up).
|
2021-03-28 11:24:16 +00:00
|
|
|
*/
|
|
|
|
function getAnchorOrCenter(symbol: SvgSymbolData): PointWithNormal {
|
|
|
|
return (
|
|
|
|
safeGetAttachmentPoint(symbol, "anchor") || {
|
|
|
|
point: getBoundingBoxCenter(symbol.bbox),
|
2021-03-28 12:48:36 +00:00
|
|
|
normal: { x: 0, y: -1 },
|
2021-03-28 11:24:16 +00:00
|
|
|
}
|
|
|
|
);
|
|
|
|
}
|
2021-03-26 22:07:01 +00:00
|
|
|
|
2021-03-28 12:27:57 +00:00
|
|
|
type MandalaCircleParams = {
|
|
|
|
data: SvgSymbolData;
|
|
|
|
radius: number;
|
|
|
|
numSymbols: number;
|
2021-03-28 20:22:36 +00:00
|
|
|
symbolTransforms?: SvgTransform[];
|
2021-03-29 19:23:37 +00:00
|
|
|
invertEveryOtherSymbol: boolean;
|
2021-03-28 12:27:57 +00:00
|
|
|
};
|
|
|
|
|
2021-03-28 20:22:36 +00:00
|
|
|
type MandalaCircleProps = MandalaCircleParams & SvgSymbolContext;
|
|
|
|
|
2021-03-29 19:23:37 +00:00
|
|
|
function isEvenNumber(value: number) {
|
|
|
|
return value % 2 === 0;
|
|
|
|
}
|
|
|
|
|
2021-03-28 20:22:36 +00:00
|
|
|
const MandalaCircle: React.FC<MandalaCircleProps> = (props) => {
|
2021-03-26 22:07:01 +00:00
|
|
|
const degreesPerItem = 360 / props.numSymbols;
|
2021-03-28 11:24:16 +00:00
|
|
|
const { translation, rotation } = getAttachmentTransforms(
|
|
|
|
{
|
|
|
|
point: { x: 0, y: 0 },
|
2021-03-28 12:48:36 +00:00
|
|
|
normal: { x: 0, y: -1 },
|
2021-03-28 11:24:16 +00:00
|
|
|
},
|
|
|
|
getAnchorOrCenter(props.data)
|
|
|
|
);
|
2021-03-29 19:23:37 +00:00
|
|
|
const transform: SvgTransform[] = [
|
|
|
|
// Remember that transforms are applied in reverse order,
|
|
|
|
// so read the following from the end first!
|
2021-03-28 11:24:16 +00:00
|
|
|
|
2021-03-29 19:23:37 +00:00
|
|
|
// Finally, move the symbol out along the radius of the circle.
|
|
|
|
svgTranslate({ x: 0, y: -props.radius }),
|
|
|
|
|
|
|
|
// Then apply any individual symbol transformations.
|
|
|
|
...(props.symbolTransforms || []),
|
|
|
|
|
|
|
|
// First, re-orient the symbol so its anchor point is at
|
|
|
|
// the origin and facing the proper direction.
|
|
|
|
svgRotate(rotation),
|
|
|
|
svgTranslate(translation),
|
|
|
|
];
|
|
|
|
|
|
|
|
const invertEveryOtherSymbol =
|
|
|
|
isEvenNumber(props.numSymbols) && props.invertEveryOtherSymbol;
|
2021-03-26 22:07:01 +00:00
|
|
|
|
2021-03-28 12:50:04 +00:00
|
|
|
const symbols = range(props.numSymbols)
|
|
|
|
.reverse()
|
|
|
|
.map((i) => (
|
|
|
|
<SvgTransform
|
|
|
|
key={i}
|
2021-03-29 19:23:37 +00:00
|
|
|
transform={[svgRotate(degreesPerItem * i), ...transform]}
|
|
|
|
>
|
|
|
|
{invertEveryOtherSymbol && isEvenNumber(i) ? (
|
|
|
|
<SvgSymbolContent {...swapColors(props)} />
|
|
|
|
) : (
|
|
|
|
<SvgSymbolContent {...props} />
|
|
|
|
)}
|
|
|
|
</SvgTransform>
|
2021-03-28 12:50:04 +00:00
|
|
|
));
|
2021-03-26 22:07:01 +00:00
|
|
|
|
|
|
|
return <>{symbols}</>;
|
|
|
|
};
|
|
|
|
|
2021-03-28 13:14:54 +00:00
|
|
|
const ExtendedMandalaCircle: React.FC<
|
|
|
|
ExtendedMandalaCircleParams & SvgSymbolContext
|
2021-03-28 20:22:36 +00:00
|
|
|
> = ({ scaling, rotation, symbolScaling, symbolRotation, ...props }) => {
|
|
|
|
props = {
|
|
|
|
...props,
|
|
|
|
symbolTransforms: [svgScale(symbolScaling), svgRotate(symbolRotation)],
|
|
|
|
};
|
|
|
|
|
|
|
|
return (
|
|
|
|
<SvgTransform transform={[svgScale(scaling), svgRotate(rotation)]}>
|
|
|
|
<MandalaCircle {...props} />
|
|
|
|
</SvgTransform>
|
|
|
|
);
|
|
|
|
};
|
2021-03-28 13:14:54 +00:00
|
|
|
|
|
|
|
const ExtendedMandalaCircleParamsWidget: React.FC<{
|
2021-03-28 12:27:57 +00:00
|
|
|
idPrefix: string;
|
2021-03-28 13:14:54 +00:00
|
|
|
value: ExtendedMandalaCircleParams;
|
|
|
|
onChange: (value: ExtendedMandalaCircleParams) => void;
|
2021-03-28 12:27:57 +00:00
|
|
|
}> = ({ 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}
|
|
|
|
/>
|
2021-03-28 13:14:54 +00:00
|
|
|
<NumericSlider
|
|
|
|
id={`${idPrefix}scaling`}
|
|
|
|
label="Scaling"
|
|
|
|
value={value.scaling}
|
|
|
|
onChange={(scaling) => onChange({ ...value, scaling })}
|
|
|
|
{...SCALING}
|
|
|
|
/>
|
|
|
|
<NumericSlider
|
|
|
|
id={`${idPrefix}rotation`}
|
|
|
|
label="Rotation"
|
|
|
|
value={value.rotation}
|
|
|
|
onChange={(rotation) => onChange({ ...value, rotation })}
|
|
|
|
{...ROTATION}
|
|
|
|
/>
|
2021-03-28 20:22:36 +00:00
|
|
|
<NumericSlider
|
|
|
|
id={`${idPrefix}symbolScaling`}
|
|
|
|
label="Symbol scaling"
|
|
|
|
value={value.symbolScaling}
|
|
|
|
onChange={(symbolScaling) => onChange({ ...value, symbolScaling })}
|
|
|
|
{...SCALING}
|
|
|
|
/>
|
|
|
|
<NumericSlider
|
|
|
|
id={`${idPrefix}symbolRotation`}
|
|
|
|
label="Symbol rotation"
|
|
|
|
value={value.symbolRotation}
|
|
|
|
onChange={(symbolRotation) => onChange({ ...value, symbolRotation })}
|
|
|
|
{...ROTATION}
|
|
|
|
/>
|
2021-03-29 19:23:37 +00:00
|
|
|
<Checkbox
|
|
|
|
label="Invert every other symbol (applies only to circles with an even number of symbols)"
|
|
|
|
value={value.invertEveryOtherSymbol}
|
|
|
|
onChange={(invertEveryOtherSymbol) =>
|
|
|
|
onChange({ ...value, invertEveryOtherSymbol })
|
|
|
|
}
|
|
|
|
/>
|
2021-03-28 12:27:57 +00:00
|
|
|
</div>
|
|
|
|
);
|
2021-03-27 19:19:36 +00:00
|
|
|
};
|
|
|
|
|
2021-03-28 12:27:57 +00:00
|
|
|
function getRandomCircleParams(rng: Random): MandalaCircleParams {
|
|
|
|
return {
|
|
|
|
data: rng.choice(SvgVocabulary.items),
|
|
|
|
radius: rng.inRange(RADIUS),
|
|
|
|
numSymbols: rng.inRange(NUM_SYMBOLS),
|
2021-03-29 19:23:37 +00:00
|
|
|
invertEveryOtherSymbol: rng.bool(),
|
2021-03-28 12:27:57 +00:00
|
|
|
};
|
|
|
|
}
|
2021-03-27 19:19:36 +00:00
|
|
|
|
2021-03-26 22:07:01 +00:00
|
|
|
export const MandalaPage: React.FC<{}> = () => {
|
2021-03-27 11:39:21 +00:00
|
|
|
const svgRef = useRef<SVGSVGElement>(null);
|
|
|
|
const [bgColor, setBgColor] = useState(DEFAULT_BG_COLOR);
|
2021-03-28 13:14:54 +00:00
|
|
|
const [circle1, setCircle1] = useState(CIRCLE_1_DEFAULTS);
|
|
|
|
const [circle2, setCircle2] = useState(CIRCLE_2_DEFAULTS);
|
2021-03-29 12:23:53 +00:00
|
|
|
const [baseSymbolCtx, setBaseSymbolCtx] = useState(createSvgSymbolContext());
|
2021-03-28 12:27:57 +00:00
|
|
|
const [useTwoCircles, setUseTwoCircles] = useState(false);
|
|
|
|
const [invertCircle2, setInvertCircle2] = useState(true);
|
2021-03-28 20:49:38 +00:00
|
|
|
const [firstBehindSecond, setFirstBehindSecond] = useState(false);
|
2021-03-27 19:19:36 +00:00
|
|
|
const randomize = () => {
|
|
|
|
const rng = new Random(Date.now());
|
2021-03-28 13:14:54 +00:00
|
|
|
setCircle1({ ...circle1, ...getRandomCircleParams(rng) });
|
|
|
|
setCircle2({ ...circle2, ...getRandomCircleParams(rng) });
|
2021-03-27 19:19:36 +00:00
|
|
|
};
|
2021-03-26 22:07:01 +00:00
|
|
|
|
2021-03-29 12:23:53 +00:00
|
|
|
const symbolCtx = noFillIfShowingSpecs(baseSymbolCtx);
|
|
|
|
|
2021-03-28 12:27:57 +00:00
|
|
|
const circle2SymbolCtx = invertCircle2 ? swapColors(symbolCtx) : symbolCtx;
|
|
|
|
|
2021-03-31 00:59:45 +00:00
|
|
|
const randomizeColors = () => {
|
|
|
|
const [bgColor, stroke, fill] = createRandomColorPalette(3);
|
|
|
|
setBgColor(bgColor);
|
|
|
|
setBaseSymbolCtx({ ...baseSymbolCtx, stroke, fill });
|
|
|
|
};
|
|
|
|
|
2021-03-28 20:49:38 +00:00
|
|
|
const circles = [
|
|
|
|
<ExtendedMandalaCircle key="first" {...circle1} {...symbolCtx} />,
|
|
|
|
];
|
|
|
|
|
|
|
|
if (useTwoCircles) {
|
|
|
|
circles.push(
|
|
|
|
<ExtendedMandalaCircle key="second" {...circle2} {...circle2SymbolCtx} />
|
|
|
|
);
|
|
|
|
if (firstBehindSecond) {
|
|
|
|
circles.reverse();
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2021-03-26 22:07:01 +00:00
|
|
|
return (
|
|
|
|
<>
|
|
|
|
<h1>Mandala!</h1>
|
2021-03-29 17:03:54 +00:00
|
|
|
<div className="mandala-container" style={{ backgroundColor: bgColor }}>
|
|
|
|
<div className="sidebar">
|
|
|
|
<SymbolContextWidget ctx={baseSymbolCtx} onChange={setBaseSymbolCtx}>
|
|
|
|
<ColorWidget
|
|
|
|
label="Background"
|
|
|
|
value={bgColor}
|
|
|
|
onChange={setBgColor}
|
|
|
|
/>{" "}
|
|
|
|
</SymbolContextWidget>
|
2021-03-31 00:59:45 +00:00
|
|
|
<div className="thingy">
|
|
|
|
<button accessKey="c" onClick={randomizeColors}>
|
|
|
|
Randomize <u>c</u>olors!
|
|
|
|
</button>
|
|
|
|
</div>
|
2021-03-29 17:03:54 +00:00
|
|
|
<fieldset>
|
|
|
|
<legend>First circle</legend>
|
|
|
|
<ExtendedMandalaCircleParamsWidget
|
|
|
|
idPrefix="c1"
|
|
|
|
value={circle1}
|
|
|
|
onChange={setCircle1}
|
|
|
|
/>
|
|
|
|
</fieldset>
|
|
|
|
<div className="thingy">
|
|
|
|
<Checkbox
|
|
|
|
label="Add a second circle"
|
|
|
|
value={useTwoCircles}
|
|
|
|
onChange={setUseTwoCircles}
|
|
|
|
/>
|
|
|
|
</div>
|
|
|
|
{useTwoCircles && (
|
|
|
|
<fieldset>
|
|
|
|
<legend>Second circle</legend>
|
|
|
|
<ExtendedMandalaCircleParamsWidget
|
|
|
|
idPrefix="c2"
|
|
|
|
value={circle2}
|
|
|
|
onChange={setCircle2}
|
|
|
|
/>
|
|
|
|
<Checkbox
|
|
|
|
label="Invert colors"
|
|
|
|
value={invertCircle2}
|
|
|
|
onChange={setInvertCircle2}
|
|
|
|
/>{" "}
|
|
|
|
<Checkbox
|
|
|
|
label="Place behind first circle"
|
|
|
|
value={firstBehindSecond}
|
|
|
|
onChange={setFirstBehindSecond}
|
|
|
|
/>
|
|
|
|
</fieldset>
|
|
|
|
)}
|
|
|
|
<div className="thingy">
|
|
|
|
<button accessKey="r" onClick={randomize}>
|
|
|
|
<u>R</u>andomize!
|
|
|
|
</button>{" "}
|
|
|
|
<ExportWidget basename="mandala" svgRef={svgRef} />
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div className="canvas">
|
|
|
|
<HoverDebugHelper>
|
|
|
|
<AutoSizingSvg padding={20} ref={svgRef} bgColor={bgColor}>
|
|
|
|
<SvgTransform transform={svgScale(0.5)}>{circles}</SvgTransform>
|
|
|
|
</AutoSizingSvg>
|
|
|
|
</HoverDebugHelper>
|
|
|
|
</div>
|
2021-03-27 12:34:22 +00:00
|
|
|
</div>
|
2021-03-26 22:07:01 +00:00
|
|
|
</>
|
|
|
|
);
|
|
|
|
};
|