ladd
/
physics
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

parser

This commit is contained in:
Ladd Hoffman 2024-06-21 20:11:48 -05:00
parent 8cb1debb16
commit 4091f476ff
4 changed files with 118 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

77
draw.js
View File

@ -1,6 +1,10 @@
class Drawing { class Drawing {
constructor(divId) { constructor(div) {
this.div = document.getElementById(divId); if (div instanceof HTMLElement) {
this.div = div;
} else {
this.div = document.getElementById(div);
}
this.div.classList.add('drawing'); this.div.classList.add('drawing');
this.div.classList.add('container'); this.div.classList.add('container');
this.buttonsDiv = document.createElement('div'); this.buttonsDiv = document.createElement('div');
@ -54,7 +58,9 @@ class Drawing {
} }
setTitle(title) { setTitle(title) {
this.titleDiv.innerHTML = title; const h = document.createElement('h4');
h.innerHTML = title;
this.titleDiv.appendChild(h);
} }
setCaption(caption) { setCaption(caption) {
@ -287,4 +293,69 @@ class Drawing {
this.ctx.stroke(); this.ctx.stroke();
}) })
} }
static fromText(node) {
const div = document.createElement('div');
node.parentNode.parentNode.insertBefore(div, node.parentNode);
node.style.display = 'none';
const d = new Drawing(div);
const lines = node.innerText.split('\n');
for (let i = 0; i < lines.length; i++) {
const line = lines[i];
if (line.startsWith("#")) continue;
const [cmd, ...args] = line.split(' ');
// console.log({cmd, args});
switch (cmd) {
case 'title': {
d.setTitle(args.join(' '));
} break;
case 'caption': {
d.setCaption(args.join(' '));
} break;
case 'buttons': {
d.addButtons();
} break;
case 'frame': {
const [x1, y1, x2, y2] = args.map(x => parseInt(x));
d.setFrame([x1, y1], [x2, y2]);
} break;
case 'axes': {
const [x, y] = args.map(x => parseInt(x));
d.polyline([0, y], [0, 0], [x, 0]);
} break;
case 'stroke': {
const style = args[0];
const width = parseInt(args[1]);
d.setStroke(style, width);
} break;
case 'fill': {
const style = args[0];
d.setFill(style);
} break;
case 'point': {
const [name, ...rest] = args;
let body = rest.join(' ');
while (lines[i + 1].startsWith(' ')) {
body += lines[i + 1];
i += 1;
}
d.definePoint(name, () => {
return (function() {
return eval(body);
}).call(d);
});
} break;
case 'circle':
case 'square': {
const p = args[0];
const traceAge = args[1] ? parseInt(args[1]) : 0;
d[cmd](p, {trace: {age: traceAge}});
} break;
case 'start': {
d.start();
} break;
}
}
d.render();
}
} }

25
reveal.html
View File

@ -16,17 +16,31 @@
<link rel="stylesheet" href="./node_modules/reveal.js/plugin/highlight/monokai.css"> <link rel="stylesheet" href="./node_modules/reveal.js/plugin/highlight/monokai.css">
</head> </head>
<body> <body>
<script src="./draw.js"></script>
<div class="reveal"> <div class="reveal">
<div class="slides"> <div class="slides">
<section> <section>
<h2>Slide 1</h2> <h2>Slide 1</h2>
<p>Content... `a = b / c`</p> <p>Content... `a = b / c`</p>
<div id="d3"></div>
<script>
{
const d = new Drawing('d3');
d.setTitle('Test Drawing');
d.line([0, 0], [100, 100]);
d.render();
}
</script>
</section> </section>
<section data-markdown> <section data-markdown>
<textarea data-template> <textarea data-template>
## Slide 2 ## Slide 2
- Item 1 - Item 1
- Item 2 - Item 2
### Heading 3
#### Heading 4
##### Heading 5
###### Heading 6
<div id="d1"></div> <div id="d1"></div>
<script> <script>
{ {
@ -48,7 +62,6 @@
<script src="./node_modules/reveal.js/plugin/markdown/markdown.js"></script> <script src="./node_modules/reveal.js/plugin/markdown/markdown.js"></script>
<script src="./node_modules/reveal.js/plugin/highlight/highlight.js"></script> <script src="./node_modules/reveal.js/plugin/highlight/highlight.js"></script>
<script src="./node_modules/reveal.js/plugin/math/math.js"></script> <script src="./node_modules/reveal.js/plugin/math/math.js"></script>
<script src="./draw.js"></script>
<script> <script>
// More info about initialization & config: // More info about initialization & config:
// - https://revealjs.com/initialization/ // - https://revealjs.com/initialization/
@ -63,7 +76,13 @@
}, },
// Learn about plugins: https://revealjs.com/plugins/ // Learn about plugins: https://revealjs.com/plugins/
plugins: [ RevealMarkdown, RevealHighlight, RevealNotes, RevealMath.MathJax3 ] plugins: [ RevealMarkdown, RevealHighlight, RevealNotes, RevealMath.MathJax3 ]
}); }).then(() => {
</script> const nodes = document.querySelectorAll('code.drawing');
for (let node of nodes) {
Drawing.fromText(node);
}
});
</script>
</body> </body>
</html> </html>

1
test.html
View File

@ -23,7 +23,6 @@
d1 = d; d1 = d;
d.setTitle('Example Animation'); d.setTitle('Example Animation');
d.setCaption('Lissajou figure (skewed)'); d.setCaption('Lissajou figure (skewed)');
d.addButtons();
d.setStroke('black', 4); d.setStroke('black', 4);
d.polyline([0, 100], [0, 0], [100, 0]); d.polyline([0, 100], [0, 0], [100, 0]);
d.definePoint('p1', () => d.oscillatingPoint([25, 50], [100, 100], 5000)); d.definePoint('p1', () => d.oscillatingPoint([25, 50], [100, 100], 5000));

23
test.md
View File

@ -1,3 +1,24 @@
## Slide 3 ## Slide 3
Testing Testing
<div id="d2"></div>
```drawing
title Test Drawing!
caption This is a test
buttons
frame 0 0 200 100
axes 200 100
point p1 this.oscillatingPoint([20, 20], [80, 20], 3000)
fill cyan
square p1 1000
point p2 [100, 30]
fill red
circle p2
point p3 [ this.oscillatingValue(20, 80, 3000),
this.oscillatingValue(20, 80, 3000, Math.PI/2) ]
fill green
circle p3 1000
start
```