](https://katex.org/)
2 | [](https://www.npmjs.com/package/katex)
3 | [](https://github.com/semantic-release/semantic-release)
4 | [](https://github.com/KaTeX/KaTeX/actions?query=workflow%3ACI)
5 | [](https://codecov.io/gh/KaTeX/KaTeX)
6 | [](https://github.com/KaTeX/KaTeX/discussions)
7 | [](https://www.jsdelivr.com/package/npm/katex)
8 | 
9 | [](https://gitpod.io/#https://github.com/KaTeX/KaTeX)
10 | [](https://opencollective.com/katex)
11 |
12 | KaTeX is a fast, easy-to-use JavaScript library for TeX math rendering on the web.
13 |
14 | * **Fast:** KaTeX renders its math synchronously and doesn't need to reflow the page. See how it compares to a competitor in [this speed test](http://www.intmath.com/cg5/katex-mathjax-comparison.php).
15 | * **Print quality:** KaTeX's layout is based on Donald Knuth's TeX, the gold standard for math typesetting.
16 | * **Self contained:** KaTeX has no dependencies and can easily be bundled with your website resources.
17 | * **Server side rendering:** KaTeX produces the same output regardless of browser or environment, so you can pre-render expressions using Node.js and send them as plain HTML.
18 |
19 | KaTeX is compatible with all major browsers, including Chrome, Safari, Firefox, Opera, Edge, and IE 11.
20 |
21 | KaTeX supports much (but not all) of LaTeX and many LaTeX packages. See the [list of supported functions](https://katex.org/docs/supported.html).
22 |
23 | Try out KaTeX [on the demo page](https://katex.org/#demo)!
24 |
25 | ## Getting started
26 |
27 | ### Starter template
28 |
29 | ```html
30 |
31 |
32 |
33 |
34 |
35 |
36 |
37 |
38 |
39 |
40 |
42 |
43 | ...
44 |
45 | ```
46 |
47 | You can also [download KaTeX](https://github.com/KaTeX/KaTeX/releases) and host it yourself.
48 |
49 | For details on how to configure auto-render extension, refer to [the documentation](https://katex.org/docs/autorender.html).
50 |
51 | ### API
52 |
53 | Call `katex.render` to render a TeX expression directly into a DOM element.
54 | For example:
55 |
56 | ```js
57 | katex.render("c = \\pm\\sqrt{a^2 + b^2}", element, {
58 | throwOnError: false
59 | });
60 | ```
61 |
62 | Call `katex.renderToString` to generate an HTML string of the rendered math,
63 | e.g., for server-side rendering. For example:
64 |
65 | ```js
66 | var html = katex.renderToString("c = \\pm\\sqrt{a^2 + b^2}", {
67 | throwOnError: false
68 | });
69 | // '...'
70 | ```
71 |
72 | Make sure to include the CSS and font files in both cases.
73 | If you are doing all rendering on the server, there is no need to include the
74 | JavaScript on the client.
75 |
76 | The examples above use the `throwOnError: false` option, which renders invalid
77 | inputs as the TeX source code in red (by default), with the error message as
78 | hover text. For other available options, see the
79 | [API documentation](https://katex.org/docs/api.html),
80 | [options documentation](https://katex.org/docs/options.html), and
81 | [handling errors documentation](https://katex.org/docs/error.html).
82 |
83 | ## Demo and Documentation
84 |
85 | Learn more about using KaTeX [on the website](https://katex.org)!
86 |
87 | ## Contributors
88 |
89 | ### Code Contributors
90 |
91 | This project exists thanks to all the people who contribute code. If you'd like to help, see [our guide to contributing code](CONTRIBUTING.md).
92 |
93 |
94 | ### Financial Contributors
95 |
96 | Become a financial contributor and help us sustain our community.
97 |
98 | #### Individuals
99 |
100 | 
101 |
102 | #### Organizations
103 |
104 | Support this project with your organization. Your logo will show up here with a link to your website.
105 |
106 | 
107 | 
108 | 
109 | 
110 | 
111 | 
112 | 
113 | 
114 | 
115 | 
116 |
117 | ## License
118 |
119 | KaTeX is licensed under the [MIT License](http://opensource.org/licenses/MIT).
120 |
--------------------------------------------------------------------------------
/docs/katex/contrib/auto-render.js:
--------------------------------------------------------------------------------
1 | (function webpackUniversalModuleDefinition(root, factory) {
2 | if(typeof exports === 'object' && typeof module === 'object')
3 | module.exports = factory(require("katex"));
4 | else if(typeof define === 'function' && define.amd)
5 | define(["katex"], factory);
6 | else if(typeof exports === 'object')
7 | exports["renderMathInElement"] = factory(require("katex"));
8 | else
9 | root["renderMathInElement"] = factory(root["katex"]);
10 | })((typeof self !== 'undefined' ? self : this), function(__WEBPACK_EXTERNAL_MODULE__771__) {
11 | return /******/ (function() { // webpackBootstrap
12 | /******/ "use strict";
13 | /******/ var __webpack_modules__ = ({
14 |
15 | /***/ 771:
16 | /***/ (function(module) {
17 |
18 | module.exports = __WEBPACK_EXTERNAL_MODULE__771__;
19 |
20 | /***/ })
21 |
22 | /******/ });
23 | /************************************************************************/
24 | /******/ // The module cache
25 | /******/ var __webpack_module_cache__ = {};
26 | /******/
27 | /******/ // The require function
28 | /******/ function __webpack_require__(moduleId) {
29 | /******/ // Check if module is in cache
30 | /******/ var cachedModule = __webpack_module_cache__[moduleId];
31 | /******/ if (cachedModule !== undefined) {
32 | /******/ return cachedModule.exports;
33 | /******/ }
34 | /******/ // Create a new module (and put it into the cache)
35 | /******/ var module = __webpack_module_cache__[moduleId] = {
36 | /******/ // no module.id needed
37 | /******/ // no module.loaded needed
38 | /******/ exports: {}
39 | /******/ };
40 | /******/
41 | /******/ // Execute the module function
42 | /******/ __webpack_modules__[moduleId](module, module.exports, __webpack_require__);
43 | /******/
44 | /******/ // Return the exports of the module
45 | /******/ return module.exports;
46 | /******/ }
47 | /******/
48 | /************************************************************************/
49 | /******/ /* webpack/runtime/compat get default export */
50 | /******/ !function() {
51 | /******/ // getDefaultExport function for compatibility with non-harmony modules
52 | /******/ __webpack_require__.n = function(module) {
53 | /******/ var getter = module && module.__esModule ?
54 | /******/ function() { return module['default']; } :
55 | /******/ function() { return module; };
56 | /******/ __webpack_require__.d(getter, { a: getter });
57 | /******/ return getter;
58 | /******/ };
59 | /******/ }();
60 | /******/
61 | /******/ /* webpack/runtime/define property getters */
62 | /******/ !function() {
63 | /******/ // define getter functions for harmony exports
64 | /******/ __webpack_require__.d = function(exports, definition) {
65 | /******/ for(var key in definition) {
66 | /******/ if(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {
67 | /******/ Object.defineProperty(exports, key, { enumerable: true, get: definition[key] });
68 | /******/ }
69 | /******/ }
70 | /******/ };
71 | /******/ }();
72 | /******/
73 | /******/ /* webpack/runtime/hasOwnProperty shorthand */
74 | /******/ !function() {
75 | /******/ __webpack_require__.o = function(obj, prop) { return Object.prototype.hasOwnProperty.call(obj, prop); }
76 | /******/ }();
77 | /******/
78 | /************************************************************************/
79 | var __webpack_exports__ = {};
80 | // This entry need to be wrapped in an IIFE because it need to be isolated against other modules in the chunk.
81 | !function() {
82 |
83 | // EXPORTS
84 | __webpack_require__.d(__webpack_exports__, {
85 | "default": function() { return /* binding */ auto_render; }
86 | });
87 |
88 | // EXTERNAL MODULE: external "katex"
89 | var external_katex_ = __webpack_require__(771);
90 | var external_katex_default = /*#__PURE__*/__webpack_require__.n(external_katex_);
91 | ;// CONCATENATED MODULE: ./contrib/auto-render/splitAtDelimiters.js
92 | /* eslint no-constant-condition:0 */
93 | var findEndOfMath = function findEndOfMath(delimiter, text, startIndex) {
94 | // Adapted from
95 | // https://github.com/Khan/perseus/blob/master/src/perseus-markdown.jsx
96 | var index = startIndex;
97 | var braceLevel = 0;
98 | var delimLength = delimiter.length;
99 |
100 | while (index < text.length) {
101 | var character = text[index];
102 |
103 | if (braceLevel <= 0 && text.slice(index, index + delimLength) === delimiter) {
104 | return index;
105 | } else if (character === "\\") {
106 | index++;
107 | } else if (character === "{") {
108 | braceLevel++;
109 | } else if (character === "}") {
110 | braceLevel--;
111 | }
112 |
113 | index++;
114 | }
115 |
116 | return -1;
117 | };
118 |
119 | var escapeRegex = function escapeRegex(string) {
120 | return string.replace(/[-/\\^$*+?.()|[\]{}]/g, "\\$&");
121 | };
122 |
123 | var amsRegex = /^\\begin{/;
124 |
125 | var splitAtDelimiters = function splitAtDelimiters(text, delimiters) {
126 | var index;
127 | var data = [];
128 | var regexLeft = new RegExp("(" + delimiters.map(function (x) {
129 | return escapeRegex(x.left);
130 | }).join("|") + ")");
131 |
132 | while (true) {
133 | index = text.search(regexLeft);
134 |
135 | if (index === -1) {
136 | break;
137 | }
138 |
139 | if (index > 0) {
140 | data.push({
141 | type: "text",
142 | data: text.slice(0, index)
143 | });
144 | text = text.slice(index); // now text starts with delimiter
145 | } // ... so this always succeeds:
146 |
147 |
148 | var i = delimiters.findIndex(function (delim) {
149 | return text.startsWith(delim.left);
150 | });
151 | index = findEndOfMath(delimiters[i].right, text, delimiters[i].left.length);
152 |
153 | if (index === -1) {
154 | break;
155 | }
156 |
157 | var rawData = text.slice(0, index + delimiters[i].right.length);
158 | var math = amsRegex.test(rawData) ? rawData : text.slice(delimiters[i].left.length, index);
159 | data.push({
160 | type: "math",
161 | data: math,
162 | rawData: rawData,
163 | display: delimiters[i].display
164 | });
165 | text = text.slice(index + delimiters[i].right.length);
166 | }
167 |
168 | if (text !== "") {
169 | data.push({
170 | type: "text",
171 | data: text
172 | });
173 | }
174 |
175 | return data;
176 | };
177 |
178 | /* harmony default export */ var auto_render_splitAtDelimiters = (splitAtDelimiters);
179 | ;// CONCATENATED MODULE: ./contrib/auto-render/auto-render.js
180 | /* eslint no-console:0 */
181 |
182 |
183 | /* Note: optionsCopy is mutated by this method. If it is ever exposed in the
184 | * API, we should copy it before mutating.
185 | */
186 |
187 | var renderMathInText = function renderMathInText(text, optionsCopy) {
188 | var data = auto_render_splitAtDelimiters(text, optionsCopy.delimiters);
189 |
190 | if (data.length === 1 && data[0].type === 'text') {
191 | // There is no formula in the text.
192 | // Let's return null which means there is no need to replace
193 | // the current text node with a new one.
194 | return null;
195 | }
196 |
197 | var fragment = document.createDocumentFragment();
198 |
199 | for (var i = 0; i < data.length; i++) {
200 | if (data[i].type === "text") {
201 | fragment.appendChild(document.createTextNode(data[i].data));
202 | } else {
203 | var span = document.createElement("span");
204 | var math = data[i].data; // Override any display mode defined in the settings with that
205 | // defined by the text itself
206 |
207 | optionsCopy.displayMode = data[i].display;
208 |
209 | try {
210 | if (optionsCopy.preProcess) {
211 | math = optionsCopy.preProcess(math);
212 | }
213 |
214 | external_katex_default().render(math, span, optionsCopy);
215 | } catch (e) {
216 | if (!(e instanceof (external_katex_default()).ParseError)) {
217 | throw e;
218 | }
219 |
220 | optionsCopy.errorCallback("KaTeX auto-render: Failed to parse `" + data[i].data + "` with ", e);
221 | fragment.appendChild(document.createTextNode(data[i].rawData));
222 | continue;
223 | }
224 |
225 | fragment.appendChild(span);
226 | }
227 | }
228 |
229 | return fragment;
230 | };
231 |
232 | var renderElem = function renderElem(elem, optionsCopy) {
233 | for (var i = 0; i < elem.childNodes.length; i++) {
234 | var childNode = elem.childNodes[i];
235 |
236 | if (childNode.nodeType === 3) {
237 | // Text node
238 | var frag = renderMathInText(childNode.textContent, optionsCopy);
239 |
240 | if (frag) {
241 | i += frag.childNodes.length - 1;
242 | elem.replaceChild(frag, childNode);
243 | }
244 | } else if (childNode.nodeType === 1) {
245 | (function () {
246 | // Element node
247 | var className = ' ' + childNode.className + ' ';
248 | var shouldRender = optionsCopy.ignoredTags.indexOf(childNode.nodeName.toLowerCase()) === -1 && optionsCopy.ignoredClasses.every(function (x) {
249 | return className.indexOf(' ' + x + ' ') === -1;
250 | });
251 |
252 | if (shouldRender) {
253 | renderElem(childNode, optionsCopy);
254 | }
255 | })();
256 | } // Otherwise, it's something else, and ignore it.
257 |
258 | }
259 | };
260 |
261 | var renderMathInElement = function renderMathInElement(elem, options) {
262 | if (!elem) {
263 | throw new Error("No element provided to render");
264 | }
265 |
266 | var optionsCopy = {}; // Object.assign(optionsCopy, option)
267 |
268 | for (var option in options) {
269 | if (options.hasOwnProperty(option)) {
270 | optionsCopy[option] = options[option];
271 | }
272 | } // default options
273 |
274 |
275 | optionsCopy.delimiters = optionsCopy.delimiters || [{
276 | left: "$$",
277 | right: "$$",
278 | display: true
279 | }, {
280 | left: "\\(",
281 | right: "\\)",
282 | display: false
283 | }, // LaTeX uses $…$, but it ruins the display of normal `$` in text:
284 | // {left: "$", right: "$", display: false},
285 | // $ must come after $$
286 | // Render AMS environments even if outside $$…$$ delimiters.
287 | {
288 | left: "\\begin{equation}",
289 | right: "\\end{equation}",
290 | display: true
291 | }, {
292 | left: "\\begin{align}",
293 | right: "\\end{align}",
294 | display: true
295 | }, {
296 | left: "\\begin{alignat}",
297 | right: "\\end{alignat}",
298 | display: true
299 | }, {
300 | left: "\\begin{gather}",
301 | right: "\\end{gather}",
302 | display: true
303 | }, {
304 | left: "\\begin{CD}",
305 | right: "\\end{CD}",
306 | display: true
307 | }, {
308 | left: "\\[",
309 | right: "\\]",
310 | display: true
311 | }];
312 | optionsCopy.ignoredTags = optionsCopy.ignoredTags || ["script", "noscript", "style", "textarea", "pre", "code", "option"];
313 | optionsCopy.ignoredClasses = optionsCopy.ignoredClasses || [];
314 | optionsCopy.errorCallback = optionsCopy.errorCallback || console.error; // Enable sharing of global macros defined via `\gdef` between different
315 | // math elements within a single call to `renderMathInElement`.
316 |
317 | optionsCopy.macros = optionsCopy.macros || {};
318 | renderElem(elem, optionsCopy);
319 | };
320 |
321 | /* harmony default export */ var auto_render = (renderMathInElement);
322 | }();
323 | __webpack_exports__ = __webpack_exports__["default"];
324 | /******/ return __webpack_exports__;
325 | /******/ })()
326 | ;
327 | });
--------------------------------------------------------------------------------
/docs/katex/contrib/auto-render.min.js:
--------------------------------------------------------------------------------
1 | !function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("katex")):"function"==typeof define&&define.amd?define(["katex"],t):"object"==typeof exports?exports.renderMathInElement=t(require("katex")):e.renderMathInElement=t(e.katex)}("undefined"!=typeof self?self:this,(function(e){return function(){"use strict";var t={771:function(t){t.exports=e}},r={};function n(e){var a=r[e];if(void 0!==a)return a.exports;var i=r[e]={exports:{}};return t[e](i,i.exports,n),i.exports}n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,{a:t}),t},n.d=function(e,t){for(var r in t)n.o(t,r)&&!n.o(e,r)&&Object.defineProperty(e,r,{enumerable:!0,get:t[r]})},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)};var a={};return function(){n.d(a,{default:function(){return s}});var e=n(771),t=n.n(e),r=function(e,t,r){for(var n=r,a=0,i=e.length;n9 | Back to article 10 |
11 | 12 | 13 |14 | 15 |
16 | 17 | 18 | 19 | 20 | 21 | 22 | -------------------------------------------------------------------------------- /docs/src/math.js: -------------------------------------------------------------------------------- 1 | // Created by Justin Meiners (2022) 2 | // License: MIT 3 | "use strict"; 4 | 5 | function lerp(a, b, t) { 6 | return (1 - t) * a + t * b; 7 | }; 8 | 9 | function clamp(low, high, t) { 10 | if (t < low) { 11 | return low; 12 | } else if (t > high) { 13 | return high; 14 | } else { 15 | return t; 16 | } 17 | }; 18 | function Vec(x, y) { 19 | this.x = x; 20 | this.y = y; 21 | }; 22 | 23 | Vec.fromAngle = function(angle) { 24 | return new Vec(Math.cos(angle), Math.sin(angle)); 25 | }; 26 | 27 | Vec.zero = function() { 28 | return new Vec(0, 0); 29 | }; 30 | 31 | Vec.prototype.copy = function() { 32 | return new Vec(this.x, this.y); 33 | }; 34 | 35 | Vec.prototype.dot = function(b) { 36 | return this.x * b.x + this.y * b.y; 37 | }; 38 | 39 | Vec.prototype.lenSqr = function() { 40 | return this.dot(this); 41 | }; 42 | 43 | Vec.prototype.len = function() { 44 | return Math.sqrt(this.lenSqr()); 45 | }; 46 | 47 | Vec.prototype.orthogonal = function() { 48 | return new Vec(-this.y, this.x); 49 | }; 50 | 51 | Vec.prototype.add = function(b) { 52 | this.x += b.x; 53 | this.y += b.y; 54 | return this; 55 | }; 56 | 57 | Vec.prototype.negate = function() { 58 | this.x = -this.x; 59 | this.y = -this.y; 60 | return this; 61 | }; 62 | 63 | Vec.prototype.sub = function(b) { 64 | this.x -= b.x; 65 | this.y -= b.y; 66 | return this; 67 | }; 68 | 69 | Vec.prototype.normalized = function() { 70 | return Vec.scale(this, 1 / this.len()); 71 | }; 72 | 73 | Vec.add = function(a, b) { 74 | return a.copy().add(b); 75 | }; 76 | 77 | Vec.sub = function(a, b) { 78 | return a.copy().sub(b); 79 | }; 80 | 81 | Vec.scale = function(a, s) { 82 | return new Vec(a.x * s, a.y * s); 83 | }; 84 | 85 | Vec.distSqr = function(a, b) { 86 | return Vec.sub(a, b).lenSqr(); 87 | }; 88 | 89 | Vec.dist = function(a, b) { 90 | return Math.sqrt(Vec.distSqr(a, b)); 91 | }; 92 | 93 | Vec.negate = function(v) { 94 | return v.copy().negate(); 95 | }; 96 | 97 | Vec.min = function(a, b) { 98 | return new Vec(Math.min(a.x, b.x), Math.min(a.y, b.y)); 99 | }; 100 | 101 | Vec.max = function(a, b) { 102 | return new Vec(Math.max(a.x, b.x), Math.max(a.y, b.y)); 103 | }; 104 | 105 | Vec.prototype.inBounds = function(min, max) { 106 | return this.x >= min.x && this.y >= min.y && 107 | this.x <= max.x && this.y <= max.y; 108 | }; 109 | 110 | Vec.prototype.inCircle = function(o, r) { 111 | return Vec.distSqr(this, o) < r * r; 112 | }; 113 | 114 | Vec.lerp = function(a, b, t) { 115 | return new Vec(lerp(a.x, b.x, t), lerp(a.y, b.y, t)); 116 | }; 117 | 118 | Vec.centroid = function(points) { 119 | var sum = points.reduce(function(acc, x) { 120 | return Vec.add(acc, x); 121 | }); 122 | 123 | return Vec.scale(sum, 1 / points.length); 124 | }; 125 | 126 | Vec.pathLen = function(path) { 127 | var sum = 0; 128 | for (var i = 1; i < path.length; ++i) { 129 | sum += Vec.dist(path[i], path[i-1]); 130 | } 131 | return sum; 132 | }; 133 | 134 | Vec.bounds = function(points) { 135 | return [points.reduce(Vec.min), points.reduce(Vec.max)]; 136 | }; 137 | function Matrix() { 138 | this.m = new Float64Array(2 * 2); 139 | }; 140 | 141 | Matrix.from = function(a, b, c, d) { 142 | var A = new Matrix(); 143 | A.m[0] = a; A.m[1] = b; 144 | A.m[2] = c; A.m[3] = d; 145 | return A; 146 | }; 147 | 148 | Matrix.fromScale = function(sx, sy) { 149 | return Matrix.from(sx, 0, 0, sy); 150 | }; 151 | 152 | Matrix.fromAngle = function(angle) { 153 | var x = Math.cos(angle); 154 | var y = Math.sin(angle); 155 | return Matrix.from(x, -y, y, x); 156 | }; 157 | 158 | Matrix.prototype.index = function(row, col) { 159 | return row * 2 + col; 160 | }; 161 | 162 | Matrix.prototype.get = function(row, col) { 163 | return this.m[this.index(row, col)]; 164 | }; 165 | 166 | Matrix.prototype.set = function(row, col, x) { 167 | this.m[this.index(row, col)] = x; 168 | }; 169 | 170 | Matrix.prototype.transform = function(v) { 171 | return new Vec( 172 | this.m[0] * v.x + this.m[1] * v.y, 173 | this.m[2] * v.x + this.m[3] * v.y 174 | ); 175 | }; 176 | 177 | Matrix.prototype.add = function(other) { 178 | for (var i = 0; i < 4; ++i) { 179 | this.m[i] += other.m[i]; 180 | }; 181 | return this; 182 | }; 183 | 184 | Matrix.prototype.scale = function(scale) { 185 | for (var i = 0; i < 4; ++i) { 186 | this.m[i] *= scale; 187 | }; 188 | return this; 189 | }; 190 | 191 | Matrix.mul = function(A, B) { 192 | return Matrix.from( 193 | A.m[0] * B.m[0] + A.m[1] * B.m[2], 194 | A.m[0] * B.m[1] + A.m[1] * B.m[3], 195 | A.m[2] * B.m[0] + A.m[3] * B.m[2], 196 | A.m[2] * B.m[1] + A.m[3] * B.m[3] 197 | ); 198 | }; 199 | 200 | Matrix.prototype.det = function() { 201 | return this.m[0] * this.m[3] - this.m[1] * this.m[2]; 202 | }; 203 | 204 | Matrix.inverse = function(A) { 205 | var s = 1.0 / A.det(); 206 | return Matrix.from(A.m[3], -A.m[1], -A.m[2], A.m[0]).scale(s); 207 | }; 208 | 209 | Matrix.prototype.copy = function() { 210 | var copy = new Matrix(); 211 | copy.m.set(this.m); 212 | return copy; 213 | }; 214 | function AffineTransform() { 215 | this.m = Matrix.from(1, 0, 0, 1); 216 | this.t = new Vec(0, 0); 217 | }; 218 | 219 | AffineTransform.prototype.transform = function(v) { 220 | return this.m.transform(v).add(this.t); 221 | }; 222 | 223 | AffineTransform.inverse = function(a) { 224 | var b = new AffineTransform(); 225 | b.m = Matrix.inverse(a.m); 226 | b.t = b.m.transform( a.t.copy().negate()); 227 | return b; 228 | }; 229 | 230 | function makeAckley(a, b, c) { 231 | return function(vars) { 232 | var sumSquares = vars.reduce(function(total, x) { 233 | return total + x * x; 234 | }, 0); 235 | 236 | var sumCos = vars.reduce(function(total, x) { 237 | return total + Math.cos(x * c); 238 | }, 0); 239 | 240 | var n = vars.length; 241 | return -a * Math.exp(-b * Math.sqrt(sumSquares / n)) - Math.exp(sumCos / n) + a + Math.exp(1); 242 | }; 243 | }; 244 | 245 | function testOptimizer() { 246 | var f = makeAckley(20.0, 0.2, 2.0 * Math.PI); 247 | 248 | var options = { 249 | debug: true, 250 | maxIterations: 100, 251 | tolerance: 0.001 252 | }; 253 | 254 | console.log(multivarOptimize([-2.1, -3.04, 4.5], f, options)); 255 | }; 256 | 257 | function multivarOptimize(initial, costFunc, options) { 258 | var maxIterations = options.maxIterations || 10000; 259 | var tolerance = options.tolerance || 0.001; 260 | 261 | function predicate(iterations, image) { 262 | return iterations > maxIterations || image < tolerance; 263 | }; 264 | 265 | var n = initial.length; 266 | 267 | function guessSizes(initial) { 268 | var sizes = new Float64Array(n); 269 | for (var j = 0; j < n; ++j) { 270 | sizes[j] = (0.05 * Math.abs(initial[j])) + 0.00025; 271 | } 272 | return sizes; 273 | }; 274 | 275 | var simplex = new Simplex(n); 276 | simplex.positionAround(initial, guessSizes(initial)); 277 | return simplex.optimize(costFunc, predicate, options); 278 | }; 279 | 280 | function Simplex(n) { 281 | this.dimension = n; 282 | this.vertices = []; 283 | for (var i = 0; i < (n + 1); ++i) { 284 | this.vertices.push(new SimplexVertex(n)); 285 | } 286 | }; 287 | 288 | function SimplexVertex(n) { 289 | this.point = new Float64Array(n); 290 | this.image = 0; 291 | }; 292 | 293 | SimplexVertex.prototype.copyFrom = function(other) { 294 | this.point.set(other.point); 295 | this.image = other.image; 296 | }; 297 | 298 | SimplexVertex.prototype.swapWith = function(other) { 299 | var ptemp = this.point; 300 | var itemp = this.image; 301 | 302 | this.point = other.point; 303 | this.image = other.image; 304 | other.point = ptemp; 305 | other.image = itemp; 306 | }; 307 | 308 | Simplex.prototype.positionAround = function(point, sizes) { 309 | var n = this.dimension; 310 | for (var i = 0; i < (n + 1); ++i) { 311 | for (var j = 0; j < n; ++j) { 312 | this.vertices[i].point[j] = point[j] + ((i - 1 == j) ? sizes[j] : 0.0); 313 | } 314 | } 315 | }; 316 | 317 | Simplex.prototype.sort = function() { 318 | this.vertices.sort(function(a, b) { 319 | return a.image - b.image; 320 | }); 321 | }; 322 | 323 | Simplex.prototype.getCentroid = function(output) { 324 | var n = this.dimension; 325 | // last point is not included 326 | for (var j = 0; j < n; ++j) { 327 | var x = this.vertices[0].point[j]; 328 | for (var i = 1; i < n; ++i) { 329 | x += this.vertices[i].point[j]; 330 | } 331 | output.point[j] = x / n; 332 | } 333 | }; 334 | 335 | Simplex.prototype.getNewPoint = function(centroid, lambda, output) { 336 | var n = this.dimension; 337 | for (var j = 0; j < n; ++j) { 338 | output.point[j] = (1.0 + lambda) * centroid.point[j] - lambda * this.vertices[n].point[j]; 339 | }; 340 | }; 341 | 342 | Simplex.prototype.shrink = function(sigma) { 343 | var n = this.dimension; 344 | for (var i = 1; i < (n + 1); ++i) { 345 | for (var j = 0; j < n; ++j) { 346 | var x = this.vertices[0].point[j]; 347 | this.vertices[i].point[j] = x + sigma * (this.vertices[i].point[j] - x); 348 | } 349 | } 350 | }; 351 | 352 | Simplex.prototype.computeVertexImages = function(costFunc) { 353 | for (var i = 0; i < (this.dimension + 1); ++i) { 354 | this.vertices[i].image = costFunc(this.vertices[i].point); 355 | } 356 | this.sort(); 357 | }; 358 | 359 | Simplex.prototype.optimize = function(costFunc, stopPredicate, options) { 360 | var rho = options.rho || 1.0; // coefficient for "reflect" 361 | var chi = options.chi || 2.0; // coefficient for "expand" 362 | var gamma = options.gamma || 0.5; // coefficient for "contract" 363 | var sigma = options.sigma || 0.5; // coefficient for "shrink" 364 | var debug = options.debug == undefined ? false : options.debug; 365 | 366 | var n = this.dimension; 367 | 368 | var pointR = new SimplexVertex(n); 369 | var pointE = new SimplexVertex(n); 370 | var pointC = new SimplexVertex(n); 371 | var centroid = new SimplexVertex(n); 372 | 373 | this.computeVertexImages(costFunc); 374 | this.getCentroid(centroid); 375 | 376 | var iterations = 1; 377 | 378 | while (!stopPredicate(iterations, this.vertices[0].image)) { 379 | var shrink = false; 380 | this.getNewPoint(centroid, rho, pointR); 381 | pointR.image = costFunc(pointR.point); 382 | 383 | if (pointR.image < this.vertices[0].image) { 384 | this.getNewPoint(centroid, rho * chi, pointE); 385 | pointE.image = costFunc(pointE.point); 386 | 387 | if (pointE.image < pointR.image) { 388 | if (debug) console.log("expand"); 389 | this.vertices[n].copyFrom(pointE); 390 | } else { 391 | if (debug) console.log("reflect"); 392 | this.vertices[n].copyFrom(pointR); 393 | } 394 | } else { 395 | if (pointR.image < this.vertices[n - 1].image) { 396 | if (debug) console.log("reflect"); 397 | this.vertices[n].copyFrom(pointR); 398 | } else { 399 | if (pointR.image < this.vertices[n].image) { 400 | this.getNewPoint(centroid, rho * gamma, pointC); 401 | pointC.image = costFunc(pointC.point); 402 | 403 | if (pointC.image <= pointR.image) { 404 | if (debug) console.log("contract out"); 405 | this.vertices[n].copyFrom(pointC); 406 | } else { 407 | if (debug) console.log("shrink"); 408 | shrink = true; 409 | } 410 | } else { 411 | this.getNewPoint(centroid, -gamma, pointC); 412 | pointC.image = costFunc(pointC.point); 413 | 414 | if (pointC.image < this.vertices[n].image) { 415 | if (debug) console.log("contract inside"); 416 | this.vertices[n].copyFrom(pointC); 417 | } else { 418 | if (debug) console.log("shrink"); 419 | shrink = true; 420 | } 421 | } 422 | } 423 | } 424 | 425 | if (shrink) { 426 | this.shrink(sigma); 427 | this.computeVertexImages(costFunc); 428 | } else { 429 | for (var i = n - 1; i >= 0 && this.vertices[i + 1].image < this.vertices[i].image; i--) { 430 | this.vertices[i + 1].swapWith(this.vertices[i]); 431 | } 432 | 433 | } 434 | this.getCentroid(centroid); 435 | ++iterations; 436 | 437 | if (debug) console.log("best: ", this.vertices[0].point.join(", "), "score: ", this.vertices[0].image); 438 | }; 439 | 440 | return { 441 | vars: this.vertices[0].point, 442 | cost: this.vertices[0].image, 443 | iterations: iterations 444 | }; 445 | }; 446 | -------------------------------------------------------------------------------- /docs/styles/fonts/firamono_latin.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/justinmeiners/why-train-when-you-can-optimize/e06e036a2e09f08e29ecab60ed4e24c7286544f1/docs/styles/fonts/firamono_latin.woff2 -------------------------------------------------------------------------------- /docs/styles/fonts/firamono_latin_ext.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/justinmeiners/why-train-when-you-can-optimize/e06e036a2e09f08e29ecab60ed4e24c7286544f1/docs/styles/fonts/firamono_latin_ext.woff2 -------------------------------------------------------------------------------- /docs/styles/main.css: -------------------------------------------------------------------------------- 1 | @font-face { 2 | font-family: 'Fira Mono'; 3 | font-style: normal; 4 | font-weight: 400; 5 | font-display: swap; 6 | src: url('fonts/firamono_latin_ext.woff2') format('woff2'); 7 | unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; 8 | } 9 | 10 | @font-face { 11 | font-family: 'Fira Mono'; 12 | font-style: normal; 13 | font-weight: 400; 14 | font-display: swap; 15 | src: url('fonts/firamono_latin.woff2') format('woff2'); 16 | unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; 17 | } 18 | 19 | body { 20 | min-width: 200px; 21 | max-width: 850px; 22 | margin: 3rem auto; 23 | padding: 0 2rem; 24 | font-size: 14pt; 25 | } 26 | 27 | h1 { 28 | text-align: center; 29 | } 30 | 31 | p { 32 | line-height: 1.3; 33 | } 34 | 35 | li { 36 | margin-bottom: 0.3rem; 37 | } 38 | 39 | img { 40 | max-width: 100%; 41 | display: block; 42 | margin-left: auto; 43 | margin-right: auto; 44 | } 45 | 46 | pre { 47 | margin: 1rem 0; 48 | } 49 | 50 | pre.prettyprint { 51 | border: none; 52 | } 53 | 54 | blockquote { 55 | margin: 1.5rem 3rem; 56 | } 57 | 58 | /* document links */ 59 | 60 | a { 61 | text-decoration: none; 62 | } 63 | 64 | a:link, .block-link a:visited { 65 | color: #0046b3; 66 | } 67 | 68 | a:hover, a:active { 69 | text-decoration: underline; 70 | color: #4d92ff; 71 | } 72 | 73 | a:visited { 74 | color: #662e99; 75 | } 76 | 77 | /* code blocks */ 78 | 79 | code, .block-header { 80 | font-size: 11pt; 81 | font-family: 'Fira Mono',Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace; 82 | } 83 | 84 | .block-header, .block-header + pre.prettyprint { 85 | background-color: #f9f8f4; 86 | border: 1px solid #c7c4b4; 87 | box-sizing: border-box; 88 | } 89 | 90 | .block-header { 91 | display: inline-block; 92 | 93 | /* allows the header to overlap the code block to hide part of the top border */ 94 | position: relative; 95 | z-index: 6; 96 | 97 | border-top-left-radius: 0.6rem; 98 | border-top-right-radius: 0.6rem; 99 | border-bottom-width: 0; 100 | 101 | padding: 0.4rem 0.6rem; 102 | } 103 | 104 | .block-title { 105 | font-weight: normal; 106 | } 107 | 108 | .block-title a { 109 | /* this causes navigating to a block link to scroll you just a few pixels above the block header */ 110 | margin-top: -1rem; 111 | padding-top: 1rem; 112 | } 113 | 114 | .block-title, .block-header a:link, .block-header a:visited { 115 | color: #262521; 116 | } 117 | 118 | .block-header a:hover, .block-header a:active { 119 | color: #737372; 120 | } 121 | 122 | .code-block pre.prettyprint { 123 | padding: 0.6rem; 124 | white-space: pre-wrap; 125 | border-radius: 0.6rem; 126 | } 127 | 128 | .code-block .block-header + pre.prettyprint { 129 | /* overlap to the top 1px of the code block with the header so that the top border is partially obscured */ 130 | position: relative; 131 | z-index: 5; 132 | margin-top: -1px; 133 | 134 | border-top-left-radius: 0; 135 | } 136 | 137 | .block-usages { 138 | margin-top: -1rem; 139 | } 140 | 141 | .block-usages small { 142 | display: inline-block; 143 | margin: 0.4rem 0.6rem; 144 | font-size: 11pt; 145 | color: #363535; 146 | } 147 | 148 | .block-usages a, .block-usages span { 149 | padding: 0 0.5rem; 150 | margin-left: 0.1rem; 151 | } 152 | 153 | .block-usages a { 154 | background-color: #f9f8f4; 155 | border: 1px solid #c7c6bf; 156 | box-sizing: border-box; 157 | 158 | color: #57554a; 159 | border-radius: 0.3rem; 160 | } 161 | 162 | .block-usages a + *, .block-usages span + * { 163 | margin-left: 0.2rem; 164 | } 165 | 166 | .block-usages a:hover, .block-usages a:active { 167 | text-decoration: none; 168 | background-color: #f9f9f7; 169 | color: #a6a28d; 170 | } 171 | 172 | 173 | h1 + p, h1 + p + p { 174 | text-align: center; 175 | } 176 | -------------------------------------------------------------------------------- /docs/styles/prettify-theme.css: -------------------------------------------------------------------------------- 1 | /*! Color themes for Google Code Prettify | MIT License | github.com/jmblog/color-themes-for-google-code-prettify */ 2 | /* Atelier Dune Light with modifications for srcweave */ 3 | 4 | .prettyprint { 5 | border: none; 6 | } 7 | 8 | .pln { 9 | color: #20201d; 10 | } 11 | 12 | /* Specify class=linenums on a pre to get line numbering */ 13 | ol.linenums { 14 | margin-top: 0; 15 | margin-bottom: 0; 16 | color: #999580; 17 | } 18 | 19 | li.L0, 20 | li.L1, 21 | li.L2, 22 | li.L3, 23 | li.L4, 24 | li.L5, 25 | li.L6, 26 | li.L7, 27 | li.L8, 28 | li.L9 { 29 | padding-left: 1em; 30 | background-color: #fefbec; 31 | list-style-type: decimal; 32 | } 33 | 34 | @media screen { 35 | 36 | /* string content */ 37 | 38 | .str { 39 | color: #60ac39; 40 | } 41 | 42 | /* keyword */ 43 | 44 | .kwd { 45 | color: #b854d4; 46 | } 47 | 48 | /* comment */ 49 | 50 | .com { 51 | color: #999580; 52 | } 53 | 54 | /* type name */ 55 | 56 | .typ { 57 | color: #6684e1; 58 | } 59 | 60 | /* literal value */ 61 | 62 | .lit { 63 | color: #b65611; 64 | } 65 | 66 | /* punctuation */ 67 | 68 | .pun { 69 | color: #20201d; 70 | } 71 | 72 | /* lisp open bracket */ 73 | 74 | .opn { 75 | color: #20201d; 76 | } 77 | 78 | /* lisp close bracket */ 79 | 80 | .clo { 81 | color: #20201d; 82 | } 83 | 84 | /* markup tag name */ 85 | 86 | .tag { 87 | color: #d73737; 88 | } 89 | 90 | /* markup attribute name */ 91 | 92 | .atn { 93 | color: #b65611; 94 | } 95 | 96 | /* markup attribute value */ 97 | 98 | .atv { 99 | color: #1fad83; 100 | } 101 | 102 | /* declaration */ 103 | 104 | .dec { 105 | color: #b65611; 106 | } 107 | 108 | /* variable name */ 109 | 110 | .var { 111 | color: #d73737; 112 | } 113 | 114 | /* function name */ 115 | 116 | .fun { 117 | color: #6684e1; 118 | } 119 | } 120 | -------------------------------------------------------------------------------- /docs/template.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 |This is the code that sets up the drawing canvas as well as the HTML page.
19 | 20 |function Sim() {
24 | this.canvas = document.getElementById('main-canvas');
25 | this.ctx = this.canvas.getContext('2d', { alpha: false });
26 |
27 | this.canvas.onmousedown = this.mouseDown.bind(this);
28 | this.canvas.onmouseup = this.mouseUp.bind(this);
29 | this.canvas.onmouseout = this.mouseOut.bind(this);
30 | this.canvas.onmousemove = this.mouseMove.bind(this);
31 |
32 | this.shapes = [];
33 | };
34 |
35 | @{sim input}
36 | Used by 1
document.getElementById("clear-button").onclick = function() {
46 | sim.shapes = [];
47 | drawSim();
48 | };
49 |
50 | function getMousePos(canvas, e) {
51 | var rect = canvas.getBoundingClientRect();
52 | return new Vec(e.clientX - rect.left, e.clientY - rect.top);
53 | }
54 |
55 | Sim.prototype.mouseDown = function(e) {
56 | var mp = getMousePos(this.canvas, e);
57 | this.path = [];
58 | this.path.push(mp);
59 | this.dragging = true;
60 |
61 | e.preventDefault();
62 | };
63 |
64 | Sim.prototype.mouseMove = function(e) {
65 | var mp = getMousePos(this.canvas, e);
66 |
67 | if (this.dragging) {
68 | var lp = this.path[this.path.length - 1];
69 |
70 | if (!mp.inCircle(lp, 6)) {
71 | this.path.push(mp);
72 | drawSim();
73 | }
74 | }
75 | }
76 |
77 | Sim.prototype.mouseUp = function(e) {
78 | if (!this.dragging) return;
79 | var mp = getMousePos(this.canvas, e);
80 | this.path.push(mp);
81 | this.endDrag(e);
82 | }
83 |
84 | Sim.prototype.mouseOut = function(e) {
85 | if (!this.dragging) return;
86 | this.endDrag(e);
87 | }
88 |
89 | Sim.prototype.endDrag = function(e) {
90 | var corrected = tryShapeFit(this.path);
91 | if (corrected) {
92 | this.shapes.push(corrected);
93 | } else {
94 | this.shapes.push({
95 | path: this.path
96 | });
97 | }
98 |
99 | this.path = [];
100 | this.dragging = false;
101 | drawSim();
102 | }
103 | Used by 1
function drawSim() {
113 | var ctx = sim.ctx;
114 | ctx.lineWidth = 1;
115 | clearCanvas(ctx, sim.canvas);
116 |
117 | ctx.lineWidth = 2;
118 | ctx.strokeStyle = "#000000";
119 | for (var i = 0; i < sim.shapes.length; ++i) {
120 | var s = sim.shapes[i];
121 | if (s.path) {
122 | drawPath(ctx, s.path);
123 | } else if (s.circle) {
124 | ctx.beginPath();
125 | ctx.arc(s.circle.origin.x, s.circle.origin.y, s.circle.radius, 0.0, Math.PI * 2.0);
126 | ctx.closePath();
127 | ctx.stroke();
128 | } else if (s.ellipse) {
129 | ctx.beginPath();
130 | ctx.ellipse(s.ellipse.origin.x, s.ellipse.origin.y, s.ellipse.size.x, s.ellipse.size.y, 0, 0.0, Math.PI * 2.0);
131 | ctx.closePath();
132 | ctx.stroke();
133 | }
134 | }
135 |
136 | ctx.lineWidth = 3;
137 | ctx.strokeStyle = "#FF0000";
138 | if (sim.path) {
139 | drawPath(ctx, sim.path);
140 | }
141 | }
142 |
143 | function clearCanvas(ctx, canvas) {
144 | ctx.fillStyle = '#C1FFC9';
145 | ctx.beginPath();
146 | ctx.rect(0, 0, canvas.width, canvas.height);
147 | ctx.closePath();
148 | return ctx.fill();
149 | }
150 |
151 | function drawPath(ctx, path) {
152 | if (path.length === 0) return;
153 | ctx.beginPath();
154 | ctx.moveTo(path[0].x, path[0].y);
155 | for (var i = 1; i < path.length; ++i) {
156 | ctx.lineTo(path[i].x, path[i].y);
157 | }
158 | ctx.stroke();
159 | }
160 | Used by 1
// Created by Justin Meiners (2022)
170 | // License: MIT
171 |
172 | "use strict";
173 | @{sim definition}
174 | @{sim rendering}
175 |
176 | var sim = new Sim();
177 | drawSim();
178 | Here is the HTML page I use.
185 | 186 |<!DOCTYPE html>
190 | <html>
191 | <head>
192 | <title>Drawing assistant</title>
193 | </style>
194 | </head>
195 | <body>
196 | <p>
197 | <a href="../">Back to article</a>
198 | </p>
199 |
200 | <canvas id="main-canvas" width="1024" height="768"></canvas>
201 | <p>
202 | <button id="clear-button">Clear</button>
203 | </p>
204 |
205 | <script src="math.js"></script>
206 | <script src="assist.js"></script>
207 | <script src="draw.js"></script>
208 | </body>
209 | </html>
210 |