diff options
| -rw-r--r-- | docs/style.css | 8 | ||||
| -rw-r--r-- | docs/tutorial/expression.html | 45 | ||||
| -rw-r--r-- | svg.bqn | 4 | ||||
| -rw-r--r-- | tutorial/evalexp.bqn | 19 | ||||
| -rw-r--r-- | tutorial/expression.md | 7 |
5 files changed, 67 insertions, 16 deletions
diff --git a/docs/style.css b/docs/style.css index 4e208c47..2dc22dde 100644 --- a/docs/style.css +++ b/docs/style.css @@ -50,10 +50,13 @@ pre, code, textarea, .kb { border: 1px solid #bdcac4; letter-spacing: 0.2; } -.code { +.code, .codeCover { fill: #e3e7e7; stroke: #bdcac4; } +.codeCover { + stroke: #e3e7e7; +} code { padding: 0.15em 0.1em 0.05em; white-space: nowrap; @@ -123,7 +126,8 @@ a:visited { color: #3d155f; } input { border-color: #0c0d0e; } textarea, pre, code { color: #969698; background-color: #0c0d0e; } textarea, pre, code, .kb { border-color: #040509; } - .code { fill: #0c0d0e; stroke: #040509; } + .code, .codeCover { fill: #0c0d0e; stroke: #040509; } + .codeCover { stroke: #0c0d0e; } code { border-color: #0c0d0e; background-color: #0f1011; } table td, th{ border-color: #636967; } table th { border-color: #88918c; background-color: #292a2b; } diff --git a/docs/tutorial/expression.html b/docs/tutorial/expression.html index 5dfa2251..1f14e90b 100644 --- a/docs/tutorial/expression.html +++ b/docs/tutorial/expression.html @@ -60,11 +60,46 @@ 33.5103216382911 </pre> <p>The evaluation order is shown below, with the function <code><span class='Function'>⋆</span></code> on the first line evaluated first, then <code><span class='Function'>×</span></code> on the next, and so on. The effect of the parentheses is that <code><span class='Function'>÷</span></code> is evaluated before the leftmost <code><span class='Function'>×</span></code>.</p> -<pre> <span class='Function'>=</span> <span class='Number'>2</span><span class='Function'>⋆</span><span class='Number'>3</span> - <span class='Number'>π</span> <span class='Function'>×</span> - <span class='Number'>4</span><span class='Function'>÷</span><span class='Number'>3</span> - <span class='Paren'>(</span> <span class='Paren'>)</span> <span class='Function'>×</span> -</pre> +<svg viewBox='-175.375 -34 512 188'> + <g font-family='BQN,monospace' font-size='18px'> + <rect class='code' stroke-width='1' rx='10' x='-21.5' y='-24' width='204.25' height='168'/> + <text><tspan class='Paren'>(</tspan><tspan class='Number'>4</tspan><tspan class='Function'>÷</tspan><tspan class='Number'>3</tspan><tspan class='Paren'>)</tspan> <tspan class='Function'>×</tspan> <tspan class='Number'>π</tspan> <tspan class='Function'>×</tspan> <tspan class='Number'>2</tspan><tspan class='Function'>⋆</tspan><tspan class='Number'>3</tspan></text> + <path class='Paren' stroke='currentColor' fill='none' stroke-width='1' d='M17.2 2.4v72h10.75'/> + <path class='Paren' stroke='currentColor' fill='none' stroke-width='1' d='M27.95 74.4v24h43'/> + <path class='Paren' stroke='currentColor' fill='none' stroke-width='1' d='M38.7 2.4v72h-10.75'/> + <path class='Paren' stroke='currentColor' fill='none' stroke-width='1' d='M70.95 98.4v24h-77.938'/> + <path class='Paren' stroke='currentColor' fill='none' stroke-width='1' d='M92.45 2.4v48h21.5'/> + <path class='Paren' stroke='currentColor' fill='none' stroke-width='1' d='M113.95 50.4v48h-43'/> + <path class='Paren' stroke='currentColor' fill='none' stroke-width='1' d='M135.45 2.4v24h10.75'/> + <path class='Paren' stroke='currentColor' fill='none' stroke-width='1' d='M146.2 26.4v24h-32.25'/> + <path class='Paren' stroke='currentColor' fill='none' stroke-width='1' d='M156.95 2.4v24h-10.75'/> + <g text-anchor='middle'> + <g class='codeCover' stroke-width='6' stroke-linejoin='round'> + <text x='17.125' y='81'>4</text> + <text x='27.875' y='81'>÷</text> + <text x='38.625' y='81'>3</text> + <text x='70.875' y='105'>×</text> + <text x='92.375' y='57'>π</text> + <text x='113.875' y='57'>×</text> + <text x='135.375' y='33'>2</text> + <text x='146.125' y='33'>⋆</text> + <text x='156.875' y='33'>3</text> + </g> + <g font-size='15px' opacity='0.9'> + <text x='17.125' y='79'><tspan class='Number'>4</tspan></text> + <text x='27.875' y='79'><tspan class='Function'>÷</tspan></text> + <text x='38.625' y='79'><tspan class='Number'>3</tspan></text> + <text x='70.875' y='103'><tspan class='Function'>×</tspan></text> + <text x='92.375' y='55'><tspan class='Number'>π</tspan></text> + <text x='113.875' y='55'><tspan class='Function'>×</tspan></text> + <text x='135.375' y='31'><tspan class='Number'>2</tspan></text> + <text x='146.125' y='31'><tspan class='Function'>⋆</tspan></text> + <text x='156.875' y='31'><tspan class='Number'>3</tspan></text> + </g> + </g> + </g> +</svg> + <p>The following rule might help you to internalize this system in addition to identifying when parentheses are needed: an expression never needs to end with a parenthesis, or contain two closing parentheses in a row. If it does, at least one set of parentheses can be removed.</p> <h2 id="one-or-two-arguments">One or two arguments?</h2> <p>What about functions without a left argument? Let's find an equation with lots of square roots in it… <a href="https://en.wikipedia.org/wiki/Nested_radical#Denesting">looks good</a>.</p> @@ -36,6 +36,10 @@ Fmt ← (2⌊≡)◶FmtNum‿(1↓·∾(' '∾FmtNum)¨)‿{𝕩⋄!0} Attr ← { 𝕨 ∾ ∾ {<∾⟨" ",𝕨,"='",𝕩,"'"⟩}´⎉1 𝕩 } +At ← { + _s ← {((+`׬)⊸-𝕗⊸=)⊸⊔} + 𝕨 ⊢⊘Attr >'='_s¨ '|'_s 𝕩 +} Pos ← ⟨"x","y"⟩ ≍˘ FmtNum¨ Elt ← Void∘Attr diff --git a/tutorial/evalexp.bqn b/tutorial/evalexp.bqn index 304301e5..5d922af1 100644 --- a/tutorial/evalexp.bqn +++ b/tutorial/evalexp.bqn @@ -1,10 +1,17 @@ wh ← 10.75‿24 -pad← wh×1.5‿1 +pad← wh×2‿1 t ← 10 -ps ← >⟨"stroke"‿"#585552","style"‿"fill:none","stroke-width"‿"2"⟩ -rc ← >⟨"class"‿"code","stroke-width"‿"1","rx"‿"12"⟩ -gr ← "g" Attr >⟨"font-family"‿"BQN,monospace", "font-size"‿"18px"⟩ +ps ← At "class=Paren|stroke=currentColor|fill=none|stroke-width=1" +rc ← At "class=code|stroke-width=1|rx=10" +gr ← "g" At "font-family=BQN,monospace|font-size=18px" +gt ← "g" At "text-anchor=middle" +gb ← "g" At "class=codeCover|stroke-width=6|stroke-linejoin=round" +gf ← "g" At "font-size=15px|opacity=0.9" +Shadow ← { + t ← (⟨0,0‿¯2⟩+⌜𝕨) ("text" Attr Pos)⊸Enc¨ (⊢≍Highlight¨) ⥊¨𝕩 + gt Enc ⟨gb,gf⟩ Enc¨<˘ t +} DrawEval←{ ix←𝕩⊏˜i←/𝕩≠' ' @@ -18,12 +25,14 @@ DrawEval←{ m←1+⌈´d←+`⊸×⌾(rev⊸⊏)fn pt ← f/⍉> wh×⟨i,d⟩ - off← (o ⊏ ∾⟜(whׯ1‿m))⊸- pt + off← (o ⊏ ∾⟜(whׯ1.25‿m))⊸- pt pd ← pt (<(wh×0.6‿0.1)⊸+)⊸∾⟜⌽˘ off dim← (wh×⟨≠𝕩,2+m⟩)+2‿0×pad + tp ← <˘pt+(1+wh÷2‿3)+⎉1(0‿1×⌜˜f/¬fn)×off (512‿0⊸⌈⊸(⊣∾˜(t+pad)-˜-˜÷2˙)dim+2×t) SVG gr Enc ∾⥊¨⟨ <"rect" Elt rc∾(Pos-pad)∾"width"‿"height"≍˘FmtNum¨dim <"text" Enc Highlight 𝕩 (<"path" Elt ps∾"d"≍○<·∾"Mvh"∾⟜Fmt¨⊢)˘ pd + <tp Shadow f/ix ⟩ } diff --git a/tutorial/expression.md b/tutorial/expression.md index 59fe827c..39738d51 100644 --- a/tutorial/expression.md +++ b/tutorial/expression.md @@ -57,10 +57,9 @@ For a longer example, here's an expression for the [volume of a sphere](https:// The evaluation order is shown below, with the function `⋆` on the first line evaluated first, then `×` on the next, and so on. The effect of the parentheses is that `÷` is evaluated before the leftmost `×`. - = 2⋆3 - π × - 4÷3 - ( ) × +<!--SVG evalexp.bqn +DrawEval "(4÷3) × π × 2⋆3" +--> The following rule might help you to internalize this system in addition to identifying when parentheses are needed: an expression never needs to end with a parenthesis, or contain two closing parentheses in a row. If it does, at least one set of parentheses can be removed. |