Add unary function parsing and custom operator support

README.md

@@ -5,6 +5,26 @@ With that in mind, and inspired on my lectures on the tree data structure I deci
 
 Visit this [website](https://lnogueir.github.io/expression-tree-gen/) to simulate an expression yourself.
 
+Supported syntax includes:
+- Binary operators: `+`, `-`, `*`, `/`
+- Single-letter variables: `a`-`z`
+- Unary functions: `sin`, `cos`, `tan`, `log`, `ln`, `sqrt`, `exp`, `abs`
+- Custom operators/functions:
+  - Arity 0: `#pi`
+  - Arity 1-3 (inferred): `#sign(a)`, `#add(a,b)`, `#clamp(x,a,b)`
+
+Examples:
+- `a+b`
+- `sin(a)`
+- `sin(a)+cos(b)`
+- `sin(cos(a))`
+- `sin(a+b)*cos(c)`
+- `#pi`
+- `#sign(a)`
+- `#add(a,b)`
+- `sin(#add(a,b))*#pi`
+- `#clamp(x,a,b)`
+
 ## Credits:
 
 * This [article](https://llimllib.github.io/pymag-trees/) which helped me a lot introducing me to Knuth's algorithm for the layout of the tree.

canvas.js

@@ -5,10 +5,13 @@
     const SAMPLE_EXPRESSIONS = [
         '(a + b)*c - (x - y)/z',
         '(a * b) - c + z / x',
+        'sin(a)+cos(b)',
+        'sin(a+b)*cos(c)',
+        'sin(#add(a,b))*#pi',
+        '#clamp(x,#min(a,b),c)',
         'x - y + (c / (a + b))',
         '(a / y) + b - (c * x)',
-        '(a - b) * (c + d) / z',
-        '(a * b) - (x / y)'
+        '(a - b) * (c + d) / z'
     ]
     var canvas = document.querySelector('canvas')
     var c = canvas.getContext('2d')
@@ -18,7 +21,6 @@
         var expression = document.getElementById('expression-input').value
         if (typeof expression !== 'undefined' && null != expression) {
             expression = expression.replace(/\s+/g, '')
-            expression = expression.toLowerCase()
             var postfix = infixToPostfix(expression);
             if (null !== postfix) {
                 try {
@@ -61,10 +63,12 @@ function displayErrorMessage() {
             <div style="font-size:1.1em;text-align: left;margin:0px 0px 0px 60px;">
                 - You may only use these brackets ( ). <br/>
                 - Use * for multiplication and / for division. <br/>
+                - Supported unary functions: sin, cos, tan, log, ln, sqrt, exp, abs. <br/>
+                - Custom operators: #name, #name(arg), #name(arg1,arg2,arg3) (max arity 3). <br/>
                 - Valid operators and operands are:<br/>
                 <div style="margin-left: 10px;">
                     <i>Operators</i>: <b>[+ - * / ]</b><br/>
-                    <i>Operands</i>: Any alphabetic letter.
+                    <i>Operands</i>: Single letters a-z and custom operators.
                 </div>
             </div>
         `,

index.html

@@ -20,7 +20,7 @@
             <h1>Expression Tree Generator</h1>
             <div class="inner-input-container" style="text-align: left;">
                 <span>Current Expression:</span>
-                <input type="text" class="name" id='expression-input' placeholder="e.g (x + y)*z - (t / w)">
+                <input type="text" class="name" id='expression-input' placeholder="e.g sin(#add(a,b))*#pi">
             </div>
 
             <div class="buttons">
@@ -46,4 +46,4 @@ <h1>Expression Tree Generator</h1>
 <script src="infixToPostfix.js"></script>
 <script src="canvas.js"></script>
 
-</html>
+</html>