Last active
April 12, 2024 04:15
-
-
Save ronwnor/32d98b340f8da48ea071915b0669ea63 to your computer and use it in GitHub Desktop.
a Bézier curve drawing tool which (hopefully) makes drawing in desmos less tedious
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* ~ instructions ~ | |
| * ∙ paste this code inside the javascript console (ctrl+shift+j) | |
| * ∙ create a new table with Alt+Q | |
| * ∙ add a point with Alt+A | |
| * ∙ close the shape with Alt+S. or Alt+C. or Alt+W. | |
| * ∙ enjoy! | |
| */ | |
| (() => { | |
| let state = Calc.getState(), | |
| expressions = state.expressions.list; | |
| // if the script has already been ran, | |
| // skip this step | |
| if (expressions.every(e => e.id != "Bezier")){ | |
| // inserts the following into the graph: | |
| expressions.push({ | |
| //long-ass bézier function | |
| id: "Bezier", | |
| type: "expression", | |
| color: "#000000", | |
| latex: "B_{ez}\\left(x\\right)=\\left(1-T\\right)^{3}x\\left[i+1\\right]+3\\left(1-T\\right)^{2}Tx\\left[i+2\\right]+3\\left(1-T\\right)T^{2}x\\left[i+3\\right]+T^{3}x\\left[i+4\\right]\\operatorname{with}T=\\operatorname{mod}\\left(\\frac{x.\\operatorname{count}-1}{3}t,1\\right),i=3\\operatorname{floor}\\left(\\frac{x.\\operatorname{count}-1}{3}t\\right)" | |
| }, { | |
| // curves folder :D | |
| type: "folder", | |
| id: "curves" , | |
| title: "curves", | |
| collapsed: true | |
| }, { | |
| // tables folder :D | |
| type: "folder", | |
| id: "tables" , | |
| title: "tables", | |
| collapsed: true | |
| }); | |
| // removes the first empty expression that comes by default | |
| if(expressions[0].type === "expression" && expressions[0].latex == null) | |
| expressions.shift(); | |
| // apply | |
| Calc.setState(state); | |
| } | |
| //tracks corrected mouse pos | |
| let pos = { x: 0, y: 0 }; | |
| // add a new table & a bez curve | |
| const addTableCurve = () => { | |
| state = Calc.getState(); | |
| expressions = state.expressions.list; | |
| let tableId = Calc.controller.__nextItemId //Number(Calc.controller.generateId()); | |
| // hide prev tables | |
| expressions | |
| .filter(exp => exp.folderId === "tables" && exp.type == "table") | |
| .forEach(table => table.columns[1].hidden = true); | |
| // make a new table & curve. | |
| // note: a folder's children need to go directly below it. | |
| expressions.splice( expressions.findIndex(exp => exp.id === "tables") + 1, 0, | |
| { | |
| type: "table", | |
| id : "table"+tableId, | |
| folderId: "tables", | |
| columns: [ | |
| { | |
| id: tableId + 1 + "", // the ids must be strings oh god | |
| latex: `x_{${tableId}}`, | |
| values: [pos.x.toFixed(3)], // already inserting the first point as the mouse pos | |
| color: "#388c46"}, | |
| { | |
| id: tableId + 2 + "", | |
| latex: `y_{${tableId}}`, | |
| values: [pos.y.toFixed(3)], | |
| color: "#388c46", | |
| dragMode: "XY", | |
| lineStyle: "DASHED", | |
| lines: true | |
| } | |
| ] | |
| }); | |
| expressions.splice( expressions.findIndex(exp => exp.id === "curves") + 1, 0, | |
| { | |
| type: "expression", | |
| id: "curve" + tableId, | |
| folderId: "curves", | |
| color: "#200000", | |
| latex: `B_{ez}\\left(\\left(x_{${tableId}},y_{${tableId}}\\right)\\right)` | |
| }); | |
| Calc.setState(state); | |
| } | |
| //adding a point | |
| const insertPoint = ({ closeCurve = false }) => { | |
| // get last added table | |
| const table = Calc.getState() | |
| .expressions.list | |
| .filter(exp => exp.folderId == "tables" && exp.type == "table")[0]; | |
| const tableId = table?.id; | |
| if(!tableId) // table where 🐒 | |
| Calc.controller.dispatch({ | |
| type:"toast/show", | |
| toast: {message: "cannot add a point to a nonexistent list 💀 L bozo"} | |
| }); | |
| else { | |
| // if (Alt+A) was pressed: insert mouse position. else, close the shape. | |
| Calc.controller.dispatcher.dispatch({ | |
| type: 'set-tablecell-latex', | |
| tableId: tableId, | |
| cell: { row: table.columns[0].values.length + 1, column:0 }, | |
| latex: closeCurve ? table.columns[0].values[0] : pos.x.toFixed(3) | |
| }); | |
| Calc.controller.dispatcher.dispatch({ | |
| type: 'set-tablecell-latex', | |
| tableId: tableId, | |
| cell: { row: table.columns[1].values.length + 1, column:1 }, | |
| latex: closeCurve ? table.columns[1].values[0] : pos.y.toFixed(3) | |
| }); | |
| } | |
| } | |
| function onKeydown(e) { | |
| if (!e.altKey) return; | |
| switch (e.key){ | |
| case "q": addTableCurve(); return; | |
| case "a": insertPoint({ closeCurve: false }); return; | |
| case "s": | |
| case "c": | |
| case "w": insertPoint({ closeCurve: true }); return; | |
| } | |
| } | |
| document.addEventListener("keydown", onKeydown, true); | |
| document.addEventListener("mousemove", e => | |
| pos = Calc.pixelsToMath({ | |
| x: e.clientX, | |
| y: e.clientY - 46 | |
| }) | |
| ); | |
| })(); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment