tldraw
Version:
A tiny little drawing editor.
441 lines (440 loc) • 13.7 kB
JavaScript
import {
CubicBezier2d,
EASINGS,
HALF_PI,
PI,
PI2,
Vec,
centerOfCircleFromThreePoints,
getPointOnCircle,
getPointsOnArc,
perimeterOfEllipse,
rng,
toDomPrecision
} from "@tldraw/editor";
import { getStrokePoints } from "../shared/freehand/getStrokePoints.mjs";
import { getSvgPathFromStrokePoints } from "../shared/freehand/svg.mjs";
function getOvalPerimeter(h, w) {
if (h > w) return (PI * (w / 2) + (h - w)) * 2;
else return (PI * (h / 2) + (w - h)) * 2;
}
function getHeartPath(w, h) {
return getHeartParts(w, h).map((c, i) => c.getSvgPathData(i === 0)).join(" ") + " Z";
}
function getDrawHeartPath(w, h, sw, id) {
const o = w / 4;
const k = h / 4;
const random = rng(id);
const mutDistance = sw * 0.75;
const mut = (v) => v.addXY(random() * mutDistance, random() * mutDistance);
const A = new Vec(w / 2, h);
const B = new Vec(0, k * 1.2);
const C = new Vec(w / 2, k * 0.9);
const D = new Vec(w, k * 1.2);
const Am = mut(new Vec(w / 2, h));
const Bm = mut(new Vec(0, k * 1.2));
const Cm = mut(new Vec(w / 2, k * 0.9));
const Dm = mut(new Vec(w, k * 1.2));
const parts = [
new CubicBezier2d({
start: A,
cp1: new Vec(o * 1.5, k * 3),
cp2: new Vec(0, k * 2.5),
end: B
}),
new CubicBezier2d({
start: B,
cp1: new Vec(0, -k * 0.32),
cp2: new Vec(o * 1.85, -k * 0.32),
end: C
}),
new CubicBezier2d({
start: C,
cp1: new Vec(o * 2.15, -k * 0.32),
cp2: new Vec(w, -k * 0.32),
end: D
}),
new CubicBezier2d({
start: D,
cp1: new Vec(w, k * 2.5),
cp2: new Vec(o * 2.5, k * 3),
end: Am
}),
new CubicBezier2d({
start: Am,
cp1: new Vec(o * 1.5, k * 3),
cp2: new Vec(0, k * 2.5),
end: Bm
}),
new CubicBezier2d({
start: Bm,
cp1: new Vec(0, -k * 0.32),
cp2: new Vec(o * 1.85, -k * 0.32),
end: Cm
}),
new CubicBezier2d({
start: Cm,
cp1: new Vec(o * 2.15, -k * 0.32),
cp2: new Vec(w, -k * 0.32),
end: Dm
}),
new CubicBezier2d({
start: Dm,
cp1: new Vec(w, k * 2.5),
cp2: new Vec(o * 2.5, k * 3),
end: A
})
];
return parts.map((c, i) => c.getSvgPathData(i === 0)).join(" ") + " Z";
}
function getHeartPoints(w, h) {
const points = [];
const curves = getHeartParts(w, h);
for (let i = 0; i < curves.length; i++) {
for (let j = 0; j < 20; j++) {
points.push(CubicBezier2d.GetAtT(curves[i], j / 20));
}
if (i === curves.length - 1) {
points.push(CubicBezier2d.GetAtT(curves[i], 1));
}
}
}
function getHeartParts(w, h) {
const o = w / 4;
const k = h / 4;
return [
new CubicBezier2d({
start: new Vec(w / 2, h),
cp1: new Vec(o * 1.5, k * 3),
cp2: new Vec(0, k * 2.5),
end: new Vec(0, k * 1.2)
}),
new CubicBezier2d({
start: new Vec(0, k * 1.2),
cp1: new Vec(0, -k * 0.32),
cp2: new Vec(o * 1.85, -k * 0.32),
end: new Vec(w / 2, k * 0.9)
}),
new CubicBezier2d({
start: new Vec(w / 2, k * 0.9),
cp1: new Vec(o * 2.15, -k * 0.32),
cp2: new Vec(w, -k * 0.32),
end: new Vec(w, k * 1.2)
}),
new CubicBezier2d({
start: new Vec(w, k * 1.2),
cp1: new Vec(w, k * 2.5),
cp2: new Vec(o * 2.5, k * 3),
end: new Vec(w / 2, h)
})
];
}
function getEllipseStrokeOptions(strokeWidth) {
return {
size: 1 + strokeWidth,
thinning: 0.25,
end: { taper: strokeWidth },
start: { taper: strokeWidth },
streamline: 0,
smoothing: 1,
simulatePressure: false
};
}
function getEllipseStrokePoints(id, width, height, strokeWidth) {
const getRandom = rng(id);
const rx = width / 2;
const ry = height / 2;
const perimeter = perimeterOfEllipse(rx, ry);
const points = [];
const start = PI2 * getRandom();
const length = PI2 + HALF_PI / 2 + Math.abs(getRandom()) * HALF_PI;
const count = Math.max(16, perimeter / 10);
for (let i = 0; i < count; i++) {
const t = i / (count - 1);
const r = start + t * length;
const c = Math.cos(r);
const s = Math.sin(r);
points.push(
new Vec(
rx * c + width * 0.5 + 0.05 * getRandom(),
ry * s + height / 2 + 0.05 * getRandom(),
Math.min(
1,
0.5 + Math.abs(0.5 - (getRandom() > 0 ? EASINGS.easeInOutSine(t) : EASINGS.easeInExpo(t))) / 2
)
)
);
}
return getStrokePoints(points, getEllipseStrokeOptions(strokeWidth));
}
function getEllipseDrawIndicatorPath(id, width, height, strokeWidth) {
return getSvgPathFromStrokePoints(getEllipseStrokePoints(id, width, height, strokeWidth));
}
function getEllipsePath(w, h) {
const cx = w / 2;
const cy = h / 2;
const rx = Math.max(0, cx);
const ry = Math.max(0, cy);
return `M${cx - rx},${cy}a${rx},${ry},0,1,1,${rx * 2},0a${rx},${ry},0,1,1,-${rx * 2},0`;
}
import { precise } from "@tldraw/editor";
function getRoundedInkyPolygonPath(points) {
let polylineA = `M`;
const len = points.length;
let p0;
let p1;
let p2;
for (let i = 0, n = len; i < n; i += 3) {
p0 = points[i];
p1 = points[i + 1];
p2 = points[i + 2];
polylineA += `${precise(p0)}L${precise(p1)}Q${precise(p2)}`;
}
polylineA += `${precise(points[0])}`;
return polylineA;
}
function getRoundedPolygonPoints(id, outline, offset, roundness, passes) {
const results = [];
const random = rng(id);
let p0 = outline[0];
let p1;
const len = outline.length;
for (let i = 0, n = len * passes; i < n; i++) {
p1 = Vec.AddXY(outline[(i + 1) % len], random() * offset, random() * offset);
const delta = Vec.Sub(p1, p0);
const distance = Vec.Len(delta);
const vector = Vec.Div(delta, distance).mul(Math.min(distance / 4, roundness));
results.push(Vec.Add(p0, vector), Vec.Add(p1, vector.neg()), p1);
p0 = p1;
}
return results;
}
function getPillPoints(width, height, numPoints) {
const radius = Math.min(width, height) / 2;
const longSide = Math.max(width, height) - radius * 2;
const circumference = Math.PI * (radius * 2) + 2 * longSide;
const spacing = circumference / numPoints;
const sections = width > height ? [
{
type: "straight",
start: new Vec(radius, 0),
delta: new Vec(1, 0)
},
{
type: "arc",
center: new Vec(width - radius, radius),
startAngle: -PI / 2
},
{
type: "straight",
start: new Vec(width - radius, height),
delta: new Vec(-1, 0)
},
{
type: "arc",
center: new Vec(radius, radius),
startAngle: PI / 2
}
] : [
{
type: "straight",
start: new Vec(width, radius),
delta: new Vec(0, 1)
},
{
type: "arc",
center: new Vec(radius, height - radius),
startAngle: 0
},
{
type: "straight",
start: new Vec(0, height - radius),
delta: new Vec(0, -1)
},
{
type: "arc",
center: new Vec(radius, radius),
startAngle: PI
}
];
let sectionOffset = 0;
const points = [];
for (let i = 0; i < numPoints; i++) {
const section = sections[0];
if (section.type === "straight") {
points.push(Vec.Add(section.start, Vec.Mul(section.delta, sectionOffset)));
} else {
points.push(
getPointOnCircle(section.center, radius, section.startAngle + sectionOffset / radius)
);
}
sectionOffset += spacing;
let sectionLength = section.type === "straight" ? longSide : PI * radius;
while (sectionOffset > sectionLength) {
sectionOffset -= sectionLength;
sections.push(sections.shift());
sectionLength = sections[0].type === "straight" ? longSide : PI * radius;
}
}
return points;
}
const SIZES = {
s: 50,
m: 70,
l: 100,
xl: 130
};
const BUMP_PROTRUSION = 0.2;
function getCloudArcs(width, height, seed, size, scale) {
const getRandom = rng(seed);
const pillCircumference = getOvalPerimeter(width, height);
const numBumps = Math.max(
Math.ceil(pillCircumference / SIZES[size]),
6,
Math.ceil(pillCircumference / Math.min(width, height))
);
const targetBumpProtrusion = pillCircumference / numBumps * BUMP_PROTRUSION;
const innerWidth = Math.max(width - targetBumpProtrusion * 2, 1);
const innerHeight = Math.max(height - targetBumpProtrusion * 2, 1);
const innerCircumference = getOvalPerimeter(innerWidth, innerHeight);
const distanceBetweenPointsOnPerimeter = innerCircumference / numBumps;
const paddingX = (width - innerWidth) / 2;
const paddingY = (height - innerHeight) / 2;
const bumpPoints = getPillPoints(innerWidth, innerHeight, numBumps).map((p) => {
return p.addXY(paddingX, paddingY);
});
const maxWiggleX = width < 20 ? 0 : targetBumpProtrusion * 0.3;
const maxWiggleY = height < 20 ? 0 : targetBumpProtrusion * 0.3;
const wiggledPoints = bumpPoints.slice(0);
for (let i = 0; i < Math.floor(numBumps / 2); i++) {
wiggledPoints[i] = Vec.AddXY(
wiggledPoints[i],
getRandom() * maxWiggleX * scale,
getRandom() * maxWiggleY * scale
);
wiggledPoints[numBumps - i - 1] = Vec.AddXY(
wiggledPoints[numBumps - i - 1],
getRandom() * maxWiggleX * scale,
getRandom() * maxWiggleY * scale
);
}
const arcs = [];
for (let i = 0; i < wiggledPoints.length; i++) {
const j = i === wiggledPoints.length - 1 ? 0 : i + 1;
const leftWigglePoint = wiggledPoints[i];
const rightWigglePoint = wiggledPoints[j];
const leftPoint = bumpPoints[i];
const rightPoint = bumpPoints[j];
const distanceBetweenOriginalPoints = Vec.Dist(leftPoint, rightPoint);
const curvatureOffset = distanceBetweenPointsOnPerimeter - distanceBetweenOriginalPoints;
const distanceBetweenWigglePoints = Vec.Dist(leftWigglePoint, rightWigglePoint);
const relativeSize = distanceBetweenWigglePoints / distanceBetweenOriginalPoints;
const finalDistance = (Math.max(paddingX, paddingY) + curvatureOffset) * relativeSize;
const arcPoint = Vec.Lrp(leftPoint, rightPoint, 0.5).add(
Vec.Sub(rightPoint, leftPoint).uni().per().mul(finalDistance)
);
if (arcPoint.x < 0) {
arcPoint.x = 0;
} else if (arcPoint.x > width) {
arcPoint.x = width;
}
if (arcPoint.y < 0) {
arcPoint.y = 0;
} else if (arcPoint.y > height) {
arcPoint.y = height;
}
const center = centerOfCircleFromThreePoints(leftWigglePoint, rightWigglePoint, arcPoint);
const radius = Vec.Dist(
center ? center : Vec.Average([leftWigglePoint, rightWigglePoint]),
leftWigglePoint
);
arcs.push({
leftPoint: leftWigglePoint,
rightPoint: rightWigglePoint,
arcPoint,
center,
radius
});
}
return arcs;
}
function cloudOutline(width, height, seed, size, scale) {
const path = [];
const arcs = getCloudArcs(width, height, seed, size, scale);
for (const { center, radius, leftPoint, rightPoint } of arcs) {
path.push(...getPointsOnArc(leftPoint, rightPoint, center, radius, 10));
}
return path;
}
function getCloudPath(width, height, seed, size, scale) {
const arcs = getCloudArcs(width, height, seed, size, scale);
let path = `M${arcs[0].leftPoint.toFixed()}`;
for (const { leftPoint, rightPoint, radius, center } of arcs) {
if (center === null) {
path += ` L${rightPoint.toFixed()}`;
continue;
}
const arc = Vec.Clockwise(leftPoint, rightPoint, center) ? "0" : "1";
path += ` A${toDomPrecision(radius)},${toDomPrecision(radius)} 0 ${arc},1 ${rightPoint.toFixed()}`;
}
path += " Z";
return path;
}
const DRAW_OFFSETS = {
s: 0.5,
m: 0.7,
l: 0.9,
xl: 1.6
};
function inkyCloudSvgPath(width, height, seed, size, scale) {
const getRandom = rng(seed);
const mutMultiplier = DRAW_OFFSETS[size] * scale;
const arcs = getCloudArcs(width, height, seed, size, scale);
const avgArcLengthSquared = arcs.reduce((sum, arc) => sum + Vec.Dist2(arc.leftPoint, arc.rightPoint), 0) / arcs.length;
const shouldMutatePoints = avgArcLengthSquared > (mutMultiplier * 15) ** 2;
const mutPoint = shouldMutatePoints ? (p) => Vec.AddXY(p, getRandom() * mutMultiplier * 2, getRandom() * mutMultiplier * 2) : (p) => p;
let pathA = `M${arcs[0].leftPoint.toFixed()}`;
let leftMutPoint = mutPoint(arcs[0].leftPoint);
let pathB = `M${leftMutPoint.toFixed()}`;
for (const { leftPoint, center, rightPoint, radius, arcPoint } of arcs) {
if (center === null) {
pathA += ` L${rightPoint.toFixed()}`;
const rightMutPoint2 = mutPoint(rightPoint);
pathB += ` L${rightMutPoint2.toFixed()}`;
leftMutPoint = rightMutPoint2;
continue;
}
const arc = Vec.Clockwise(leftPoint, rightPoint, center) ? "0" : "1";
pathA += ` A${toDomPrecision(radius)},${toDomPrecision(radius)} 0 ${arc},1 ${rightPoint.toFixed()}`;
const rightMutPoint = mutPoint(rightPoint);
const mutArcPoint = mutPoint(arcPoint);
const mutCenter = centerOfCircleFromThreePoints(leftMutPoint, rightMutPoint, mutArcPoint);
if (!mutCenter) {
pathB += ` L${rightMutPoint.toFixed()}`;
leftMutPoint = rightMutPoint;
continue;
}
const mutRadius = Math.abs(Vec.Dist(mutCenter, leftMutPoint));
pathB += ` A${toDomPrecision(mutRadius)},${toDomPrecision(
mutRadius
)} 0 ${arc},1 ${rightMutPoint.toFixed()}`;
leftMutPoint = rightMutPoint;
}
return pathA + pathB + " Z";
}
export {
cloudOutline,
getCloudArcs,
getCloudPath,
getDrawHeartPath,
getEllipseDrawIndicatorPath,
getEllipsePath,
getHeartParts,
getHeartPath,
getHeartPoints,
getOvalPerimeter,
getRoundedInkyPolygonPath,
getRoundedPolygonPoints,
inkyCloudSvgPath
};
//# sourceMappingURL=geo-shape-helpers.mjs.map