31:Tcea,class Path { constructor() { this.points = []; } get tail() { return this.points[this.points.length - 1] || new Vector(0, 0); } get head() { return this.points[0] || new Vector(0, 0); } addToTail(delta) { const newPath = new Path(); const point = this.tail.add(delta); newPath.points = [...this.points, point]; return newPath; } // returns a vector describing the relative size of the path... // another way to describe would be the max delta get bounds() { const allX = this.points.map(p => p.x); const allY = this.points.map(p => p.y); const deltaX = Math.abs(Math.max(...allX) - Math.min(...allY)); const deltaY = Math.abs(Math.max(...allY) - Math.min(...allY)); return new Vector(deltaX, deltaY); } get minPoint() { const allX = this.points.map(p => p.x); const allY = this.points.map(p => p.y); return new Vector(Math.min(...allX), Math.min(...allY)); } get maxPoint() { const allX = this.points.map(p => p.x); const allY = this.points.map(p => p.y); return new Vector(Math.max(...allX), Math.max(...allY)); } get center() { return this.minPoint.add(this.maxPoint).scale(0.5); } // adds vector to every one of the points translate(vector) { const newPath = new Path(); newPath.points = this.points.map(point => point.add(vector)); return newPath; } translateCenterToOrigin() { return this.translate(this.center.scale(-1)); } translateMinPointToOrigin() { return this.translate(this.minPoint.scale(-1)); } rotate(angle, about = this.center) { const newPath = new Path(); newPath.points = this.points; const adjustedToOrigin = newPath.translate(about.scale(-1)); adjustedToOrigin.points = adjustedToOrigin.points.map(point => point.rotate(angle) ); return adjustedToOrigin.translate(about); } scale(factor, about = this.center) { const newPath = new Path(); newPath.points = this.points.map(point => point.scale(factor)); return newPath.translate(about.scale(0.5)); } join(otherPath, thisDirection = "tail", otherDirection = "head") { let localPoints = this.points || []; let otherPoints = otherPath.points || []; if (thisDirection === "head") { localPoints = localPoints.reverse(); } if (otherDirection === "head") { otherPoints = otherPoints.reverse(); } const newPath = new Path(); newPath.points = [...localPoints, ...otherPoints]; return newPath; } toSimple() { return this.points.map(vector => [vector.x, vector.y]); } static join(...paths) { return paths.reduce((bigPath, littlePath) => { return bigPath.join(littlePath); }, new Path()); } static translate(paths, vector) { return paths.map(p => p.translate(vector)); } static translateMinPointToOrigin(...paths) { const macro = Path.join(...paths); const offset = macro.minPoint.scale(-1); return Path.translate(paths, offset); } static bounds(...paths) { return Path.join(...paths).bounds; } static center(...paths) { return Path.join(...paths).center; } static fromSimple(points) { const newPath = new Path(); newPath.points = points.map(([x, y]) => new Vector(x, y)); return newPath; } }32:T52b,class Group { constructor() { this.paths = []; } get _compoundPath() { return Path.join(...this.paths); } get center() { return this._compoundPath.center; } get maxPoint() { return this._compoundPath.maxPoint; } get bounds() { return this._compoundPath.bounds; } get minPoint() { return this._compoundPath.minPoint; } _clone() { const newGroup = new Group(); newGroup.paths = [...this.paths]; return newGroup; } _mapPaths(mapper) { const newGroup = this._clone(); newGroup.paths = newGroup.paths.map(mapper); return newGroup; } addPath(path) { const newGroup = this._clone(); newGroup.paths.push(path); return newGroup; } translate(vector) { return this._mapPaths(path => path.translate(vector)); } static merge(...groups) { const newGroup = new Group(); for (const group of groups) { newGroup.paths.push(...group.paths); } return newGroup; } translateMinPointToOrigin() { const offset = this._compoundPath.minPoint.scale(-1); return this.translate(offset); } scale(factor, about = this.center) { return this._mapPaths(path => path.scale(factor, about)); } rotate(angle, about = this.center) { return this._mapPaths(path => path.rotate(angle, about)); } }33:[] 2f:{"title":"Tiny vector graphics library","cells":[{"id":0,"value":"md`# Tiny vector graphics library`","pinned":false,"hidden":false,"mode":"ojs"},{"id":59,"value":"md`## Purpose\n\nThis library exists for a narrow purpose: I needed something light weight while rendering fractals, I wanted it to be immutible, and to not have an opinion about how the fractal was rendered. I only needed strait lines. I wanted an extreamly watered-down Paper.js in which each operation was immutable. I couldn't find it, so I built it! It's probably not useful for much else.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":56,"value":"md`## Example\n\nThis example is used to demonstrate this library and is almost like a visual test that it's working ok.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":11,"value":"viewof rotate = Range([0, 360], { value: 0, label: \"Rotate\" })","pinned":false,"hidden":false,"mode":"ojs"},{"id":26,"value":"html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":107,"value":"html``","pinned":true,"hidden":false,"mode":"ojs"},{"id":49,"value":"md`## Implimentation`","pinned":false,"hidden":false,"mode":"ojs"},{"id":18,"value":"function renderPath(path) {\n return d3\n .line()\n .x(vec => vec.x)\n .y(vec => vec.y)(path.points);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":5,"value":"class Vector {\n constructor(x, y) {\n this.x = x;\n this.y = y;\n }\n\n add(otherVector) {\n return new Vector(this.x + otherVector.x, this.y + otherVector.y);\n }\n\n scale(factor) {\n return new Vector(this.x * factor, this.y * factor);\n }\n\n rotate(angle) {\n const radians = (Math.PI / 180) * angle;\n return new Vector(\n this.x * Math.cos(radians) - this.y * Math.sin(radians),\n this.y * Math.cos(radians) + this.x * Math.sin(radians)\n );\n }\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":6,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":97,"value":"$32","pinned":true,"hidden":false,"mode":"ojs"},{"id":102,"value":"function renderGroup(group) {\n return `\n \n ${group.paths.map(path => `\n \n `)}\n \n\n `\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":44,"value":"md`## Test data\n\nThis data is used for the demo:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":16,"value":"libTestData = new Path()\n .addToTail(new Vector(0, 0))\n .addToTail(new Vector(1, 0))\n .addToTail(new Vector(0, 1.5))\n .addToTail(new Vector(-1, 0))\n .addToTail(new Vector(0, -1.5))\n .translate(new Vector(0.1, 0.1))\n .scale(140)","pinned":true,"hidden":false,"mode":"ojs"},{"id":28,"value":"scaledDown = libTestData.scale(0.5)","pinned":true,"hidden":false,"mode":"ojs"},{"id":36,"value":"md`## Dependencies\n\nThe code only depends on \\`d3.line\\`. Importing \\`inputs\\` as well to demo.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":20,"value":"d3 = require(\"d3@6\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":13,"value":"import { Range } from \"@observablehq/inputs\"","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}