React App

85 |

{title}

86 |

87 |         <div>
88 |             <button onClick={() => {
89 |                 if(editor) onEval(editor.getValue())
90 |             }}>eval</button>
91 |         </div>
92 |         <ResultArea result={result}/>
93 |     </article>
94 | }
95 |

--------------------------------------------------------------------------------
/experiments/genuary6.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | <head>
  4 |     <meta charset="UTF-8">
  5 |     <title>Title</title>
  6 | </head>
  7 | <body>
  8 | <canvas id="c1" width="600" height="600"></canvas>
  9 | <script type="module">
 10 |     //draw triangle w/ three circles
 11 |     function randi(max) {
 12 |         return Math.floor(Math.random()*max)
 13 |     }
 14 | 
 15 |     function pt(x, y) {
 16 |         return { x,y,
 17 |             distance:function(p2){
 18 |                 let a = p2.x-this.x
 19 |                 let b = p2.y-this.y
 20 |                 return Math.sqrt(Math.pow(a,2)+Math.pow(b,2))
 21 |             },
 22 |             minus: function(p2) {
 23 |                 return pt(this.x-p2.x, this.y-p2.y)
 24 |             },
 25 |             add: function(p2) {
 26 |                 return pt(p2.x+this.x, p2.y+this.y)
 27 |             },
 28 |             angle: function() {
 29 |                 return Math.atan2(this.y,this.x)
 30 |             },
 31 |             rotate: function(theta) {
 32 |                 return pt(
 33 |                     this.x*Math.cos(theta) - this.y*Math.sin(theta),
 34 |                     this.x*Math.sin(theta) + this.y*Math.cos(theta),
 35 |                 )
 36 |             }
 37 |         }
 38 |     }
 39 | 
 40 |     function draw_triangle(c, t, fill) {
 41 |         c.strokeStyle = fill
 42 |         c.beginPath()
 43 |         c.moveTo(t[0].x,t[0].y)
 44 |         c.lineTo(t[1].x,t[1].y)
 45 |         c.lineTo(t[2].x,t[2].y)
 46 |         c.closePath()
 47 |         c.stroke()
 48 |     }
 49 | 
 50 |     function toRad(deg) {
 51 |         return deg * Math.PI/180
 52 |     }
 53 | 
 54 |     function draw_circle_triangle(c, t, fill) {
 55 |         // draw_triangle(c,t,'black')
 56 |         let A = t[0], B = t[1], C = t[2]
 57 |         // const circ = (pt) => {
 58 |         //     c.moveTo(pt.x,pt.y)
 59 |         //     c.arc(pt.x,pt.y,10,0,Math.PI*2)
 60 |         // }
 61 |         // const line = (a,b)=>{
 62 |         //     c.moveTo(a.x,a.y)
 63 |         //     c.lineTo(b.x,b.y)
 64 |         // }
 65 |         const circle_line = (A,B) => {
 66 |             let AB = B.minus(A)
 67 |             let D = AB.rotate(toRad(60)).add(A)
 68 |             let LEN = A.distance(B)
 69 | 
 70 |             c.fillStyle = `hsla(${100+randi(5)*40},100%,50%,0.05)`
 71 |             c.beginPath()
 72 |             c.arc(D.x,D.y, LEN, 0, Math.PI*2)
 73 |             c.fill()
 74 | 
 75 |             // let E = AB.rotate(toRad(-60)).add(A)
 76 |             // c.beginPath()
 77 |             // c.arc(E.x,E.y, LEN, 0, Math.PI*2)
 78 |             c.fill()
 79 |         }
 80 |         circle_line(A,B)
 81 |         circle_line(B,C)
 82 |         circle_line(C,A)
 83 |     }
 84 |     let c = document.querySelector('#c1').getContext('2d')
 85 | 
 86 |     function clear(c) {
 87 |         c.fillStyle = 'white'
 88 |         c.fillRect(0,0,400,400)
 89 |     }
 90 | 
 91 |     clear(c)
 92 | 
 93 |     // c.globalCompositeOperation = 'darken'
 94 | 
 95 |     let t = [pt(200,200), pt(400,200), pt(300,400)]
 96 |     // draw_triangle(c, t, 'black')
 97 | 
 98 | 
 99 |     function random_split(t) {
100 |         let side = 0//randi(3)
101 |         const pp = (n) => t[(n%t.length)]
102 |         let  p = pt( (pp(side).x + pp(side+1).x)/2, (pp(side).y + pp(side+1).y)/2)
103 |         let t1 = [pp(side),p,pp(side+2)]
104 |         let t2 = [p,pp(side+1),pp(side+2)]
105 |         return [t1,t2]
106 |     }
107 |     let ts = [t]
108 |     ts = ts.concat(random_split(ts[0]))
109 |     // ts = ts.concat(random_split(ts[2]))
110 | 
111 |     ts.forEach(t => draw_circle_triangle(c,t,'red'))
112 | 
113 | </script>
114 | 
115 | </body>
116 | </html>

--------------------------------------------------------------------------------
/experiments/genuary4.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | <head>
  4 |     <meta charset="UTF-8">
  5 |     <title>Title</title>
  6 |     <script src="../node_modules/tinycolor2/dist/tinycolor-min.js"></script>
  7 |     <style type="text/css">
  8 |         canvas {
  9 |             border: 1px solid black;
 10 |         }
 11 |     </style>
 12 | </head>
 13 | <body>
 14 | 
 15 | <canvas id="canvas" width="600" height="600"></canvas>
 16 | 
 17 | <script type="module">
 18 |     let col = tinycolor({r:0,g:0,b:255})
 19 |     console.log("tiny color is", col.toHexString())
 20 | 
 21 |     function Circle(opts) {
 22 |         return { ...opts}
 23 |     }
 24 | 
 25 |     function rando(min, max) {
 26 |         return Math.random()*(max-min) + min
 27 |     }
 28 | 
 29 |     function Point(opts) {
 30 |         return { ...opts}
 31 |     }
 32 | 
 33 |     function range(len) {
 34 |         let arr = []
 35 |         for(let i=0; i<len; i++) {
 36 |             arr.push(i)
 37 |         }
 38 |         return arr
 39 |     }
 40 | 
 41 |     function draw(shapes) {
 42 |         let canvas = document.querySelector('#canvas')
 43 |         let c = canvas.getContext('2d')
 44 |         c.save()
 45 |         c.translate(50,50)
 46 |         // c.fillStyle = 'white'
 47 |         // c.fillRect(0,0,600,300)
 48 |         shapes.forEach(sh => {
 49 |             c.fillStyle = sh.fill.toHexString()
 50 |             c.beginPath()
 51 |             c.arc(sh.center.x,sh.center.y,sh.radius, 0, Math.PI*2)
 52 |             c.closePath()
 53 |             c.fill()
 54 |         })
 55 |         c.restore()
 56 |     }
 57 | 
 58 |     function randoRGBColor() {
 59 |         return tinycolor({
 60 |             r: rando(0,255),
 61 |             g: rando(0,255),
 62 |             b: rando(0,255),
 63 |         })
 64 |     }
 65 | 
 66 |     let base = {r:0,g:255,b:255}
 67 | 
 68 |     //mix colors using squares
 69 |     function mixColor(c1, c2, weight) {
 70 |         return {
 71 |             r: Math.sqrt((1-weight)*Math.pow(c1.r,2) + weight*Math.pow(c2.r,2)),
 72 |             g: Math.sqrt((1-weight)*Math.pow(c1.g,2) + weight*Math.pow(c2.g,2)),
 73 |             b: Math.sqrt((1-weight)*Math.pow(c1.b,2) + weight*Math.pow(c2.b,2)),
 74 |         }
 75 |     }
 76 | 
 77 |     console.log("base weight is",base)
 78 | 
 79 |     //draw 100 circles with random positions and random colors
 80 |     /*
 81 |     draw(range(1000).map(()=>{
 82 |         return Circle({
 83 |             radius: rando(10,50),
 84 |             center: Point({
 85 |                 x: rando(0,600),
 86 |                 y: rando(0,300),
 87 |             }),
 88 |             // fill: randoRGBColor()
 89 |             // fill: tinycolor.mix(randoRGBColor(),base,50), //random color mixed with base of cyan
 90 |             // fill: tinycolor({h:rando(0,60), s:100, l:50}), //random hue, 60 degrees
 91 |             fill: tinycolor({h:0,s:rando(0,100),v:100}), //random saturation of red, from 80-100%
 92 |             // fill: tinycolor({h:200, s:100, v: rando(0,100)}),//blue with random brightness 0 - 100%
 93 |             // fill: tinycolor({h:rando(100,100), s:rando(0,100), v:rando(50,100)}), //green with partially random sat (50%-100%) & value (50%-100%)
 94 |             fill: tinycolor({h:100, s:rando(0,100), l:rando(0,100)}), //green with random sat and lightness
 95 |             // fill: Color(tinycolor.fromRatio({h:0,s:1.0, l:rando(0,1)}))
 96 |         })
 97 |     }))
 98 | 
 99 |      */
100 | 
101 |     function fillBand(start,size, fill) {
102 |         draw(range(50).map(()=>{
103 |             return Circle({
104 |                 radius: rando(15,15),
105 |                 center: Point({x:rando(0,500),y:rando(start,start+size)}),
106 |                 fill: fill(),
107 |             })
108 |         }))
109 |     }
110 |     for(let i=0; i<10; i++) {
111 |         fillBand(i*50+25, 0, () => tinycolor({h: 160, s: rando(i*5,i*10), l: rando(0, 100)}))
112 |         // fillBand(100, 50, () => tinycolor({h: 100, s: rando(50, 100), l: rando(0, 100)}))
113 |     }
114 |     // fillBand(200,300)
115 | 
116 | </script>
117 | </body>
118 | </html>

--------------------------------------------------------------------------------
/src/editor/editor.ts:
--------------------------------------------------------------------------------
  1 | import * as codemirror from 'codemirror'
  2 | 
  3 | // @ts-ignore
  4 | codemirror.defineSimpleMode("filament", {
  5 |     // The start state contains the rules that are initially used
  6 |     start: [
  7 |         // The regex matches the token, the token property contains the type
  8 |         {regex: /"(?:[^\\]|\\.)*?(?:"|$)/, token: "string"},
  9 |         {regex: /'(?:[^\\]|\\.)*?(?:'|$)/, token: "string"},
 10 |         // You can match multiple tokens at once. Note that the captured
 11 |         // groups must span the whole string in this case
 12 |         {regex: /(def)(\s+)([a-z$][\w$]*)/,
 13 |             //@ts-ignore
 14 |             token: ["keyword", null, "variable-2"]},
 15 |         // comments
 16 |         {regex: /\/\/.*/,token:"comment"},
 17 |         // Rules are matched in the order in which they appear, so there is
 18 |         // no ambiguity between this one and the one above
 19 |         {regex: /(?:function|def|var|return|if|for|while|else|do|this)\b/,
 20 |             token: "keyword"},
 21 |         {regex: /true|false|null|undefined/, token: "atom"},
 22 |         {regex: /0x[a-f\d]+|[-+]?(?:\.\d+|\d+\.?\d*)(?:e[-+]?\d+)?/i,
 23 |             token: "number"},
 24 |         {regex: /\/(?:[^\\]|\\.)*?\//, token: "variable-3"},
 25 |         {regex: /[-+\/*=<>!]+/, token: "operator"},
 26 |         // indent and dedent properties guide autoindentation
 27 |         {regex: /[\{\[$]/, indent: true},
 28 |         {regex: /[\}\]$]/, dedent: true},
 29 |         {regex: /[a-z$][\w$]*/, token: "variable"},
 30 |     ],
 31 |     // The meta property contains global information about the mode. It
 32 |     // can contain properties like lineComment, which are supported by
 33 |     // all modes, and also directives like dontIndentStates, which are
 34 |     // specific to simple modes.
 35 |     meta: {
 36 |         // dontIndentStates: ["comment"],
 37 |         // lineComment: "//"
 38 |     }
 39 | });
 40 | 
 41 | function findPreviousParen(start:number, line:string) {
 42 |     while(true) {
 43 |         start--
 44 |         if(line.charAt(start) === '(') {
 45 |             return start
 46 |         }
 47 |         if(start <= 0) {
 48 |             return -1
 49 |         }
 50 |     }
 51 |     return -1
 52 | }
 53 | 
 54 | function findPreviousFun(start:number, line:string) {
 55 |     let end = start
 56 |     while(start && /\w/.test(line.charAt(start-1))) --start
 57 |     return line.slice(start,end)
 58 | }
 59 | 
 60 | /*
 61 | if theta, replace it with 'ø'. will it still parse?
 62 |  */
 63 | function searchSynonyms(cm:any, option:any) {
 64 |     return new Promise(function (accept) {
 65 |         setTimeout(function () {
 66 |             console.log("cm is",cm)
 67 |             console.log("option is",option)
 68 |             console.log("scope is")
 69 |             let completions = option.scope.names()
 70 |             // console.log(completions)
 71 |             // accept(null)
 72 |             var cursor = cm.getCursor(), line = cm.getLine(cursor.line)
 73 |             var start = cursor.ch, end = cursor.ch
 74 | 
 75 |             while (start && /\w/.test(line.charAt(start - 1))) --start
 76 |             while (end < line.length && /\w/.test(line.charAt(end))) ++end
 77 | 
 78 | 
 79 |             // find function we are inside of to look up parameter names
 80 |             let paren = findPreviousParen(start,line)
 81 |             if(paren > 0) {
 82 |                 let fun_name = findPreviousFun(paren,line)
 83 |                 if(fun_name) {
 84 |                     let matches = completions.filter((k:string) => k === fun_name)
 85 |                     if(matches.length > 0){
 86 |                         let fun_obj = option.scope.lookup(matches[0])
 87 |                         let params = Object.keys(fun_obj.params)
 88 |                         completions = params.concat(completions)
 89 |                     }
 90 |                 }
 91 |             }
 92 |             const word = line.slice(start, end).toLowerCase()
 93 |             //shortcuts for theta
 94 |             let matches = completions.filter((k:string) => k.startsWith(word))
 95 |             if(word === 'theta') matches.unshift('Θ')
 96 |             return accept({
 97 |                 list: matches,
 98 |                 from: codemirror.Pos(cursor.line, start),
 99 |                 to: codemirror.Pos(cursor.line, end)
100 |             })
101 |         }, 100)
102 |     })
103 | }
104 | 
105 | export const synonyms:codemirror.HintFunction = searchSynonyms as codemirror.HintFunction
106 |

--------------------------------------------------------------------------------
/src/examples/views.js:
--------------------------------------------------------------------------------
  1 | import {useEffect, useRef} from 'react'
  2 | 
  3 | import {CanvasView} from '../canvas.js'
  4 | import {is_boolean, is_scalar, is_canvas_result, is_error_result, is_list} from 'filament-lang'
  5 | import {is_string} from 'filament-lang'
  6 | 
  7 | const ErrorResult = ({result}) => <div>error!!! <b>{result.toString()}</b></div>
  8 | const ScalarResult = ({result}) => <div><b>{result.toString()}</b></div>
  9 | const StringResult = ({result}) => <div>String <b>{result.toString()}</b></div>
 10 | const BooleanResult = ({result}) => <div><b>{result.toString()}</b></div>
 11 | const StringView = ({result}) => <div><b>{result.toString()}</b></div>
 12 | 
 13 | 
 14 | function ListResult({result}) {
 15 |     if(result.value.length > 100) {
 16 |         let start = result.value.slice(0,90)
 17 |         let end = result.value.slice(result.value.length-10)
 18 |         let res1 = start.map((v,i) => [<ResultArea key={i} result={v}/>,','])
 19 |         let res2 = end.map((v,i) => [<ResultArea key={i+90} result={v}/>,','])
 20 |         return <div className={'list-result'}>list: {res1} ... {res2}</div>
 21 |     }
 22 |     let res = result.value.map((v,i) => [<ResultArea key={i} result={v}/>,','])
 23 |     return <div className={'list-result'}>list: {res}</div>
 24 | }
 25 | 
 26 | const is_table = (result) => (result && result.type === 'table')?true:false
 27 | const is_image = (result) => {
 28 |     if(result && result.width && result.height && result.data) return true
 29 |     if(result && result instanceof Image) return true
 30 |     if(result && result instanceof HTMLCanvasElement) return true
 31 |     return false
 32 | }
 33 | const is_date = (result) => {
 34 |     if(result && result.type === 'date') return true
 35 |     return false
 36 | }
 37 | const is_time = (result) => {
 38 |     if(result && result.type === 'time') return true
 39 |     return false
 40 | }
 41 | 
 42 | 
 43 | function TableRow({item, schema}) {
 44 |     let cells = Object.keys(schema.properties).map(key => {
 45 |         return <td key={key}>{item[key]}</td>
 46 |     })
 47 |     return <tr>{cells}</tr>
 48 | }
 49 | 
 50 | function TableView({result}) {
 51 |     let header = Object.keys(result.schema.properties).map(key => {
 52 |         let sch = result.schema.properties[key]
 53 |         let title = key
 54 |         // if(sch.title) title = sch.title
 55 |         return <th key={key}>{title}</th>
 56 |     })
 57 |     let items = result._map((it,n) => {
 58 |         return <TableRow key={n} item={it} schema={result.schema}/>
 59 |     })
 60 |     return <div className={'table-wrapper'}>
 61 |         <table className={'table-result'}>
 62 |             <thead>
 63 |                 <tr>{header}</tr>
 64 |             </thead>
 65 |             <tbody>
 66 |             {items}
 67 |             </tbody>
 68 |         </table>
 69 |     </div>
 70 | }
 71 | 
 72 | function ImageView({result}) {
 73 |     const can = useRef()
 74 |     useEffect(()=>{
 75 |         if(can.current) {
 76 |             if(result.data) {
 77 |                 let arr = Uint8ClampedArray.from(result.data)
 78 |                 let id = new ImageData(arr, result.width, result.height)
 79 |                 let ctx = can.current.getContext('2d')
 80 |                 ctx.putImageData(id, 0, 0)
 81 |             } else {
 82 |                 if(result instanceof HTMLImageElement) {
 83 |                     let ctx = can.current.getContext('2d')
 84 |                     ctx.drawImage(result,0,0)
 85 |                     // let dt = ctx.getImageData(0,0,result.width,result.height)
 86 |                 }
 87 |                 if(result instanceof HTMLCanvasElement) {
 88 |                     let ctx = can.current.getContext('2d')
 89 |                     ctx.drawImage(result,0,0)
 90 |                     // let dt = ctx.getImageData(0,0,result.width,result.height)
 91 |                 }
 92 |             }
 93 |         }
 94 |     })
 95 |     return <div>
 96 |         <p>got an image {result.width} x {result.height}</p>
 97 |         <canvas ref={can} width={result.width} height={result.height}/>
 98 |     </div>
 99 | }
100 | 
101 | 
102 | export function ResultArea({result}) {
103 |     if (is_error_result(result)) return <ErrorResult result={result}/>
104 |     if (is_scalar(result)) return <ScalarResult result={result}/>
105 |     if (is_boolean(result)) return <BooleanResult result={result}/>
106 |     if (is_string(result)) return <StringResult result={result}/>
107 |     if (is_list(result)) return <ListResult result={result}/>
108 |     if (is_canvas_result(result)) return <CanvasView result={result}/>
109 |     if (is_table(result)) return <TableView result={result}/>
110 |     if (is_image(result)) return  <ImageView result={result}/>
111 |     if (result === null) return <div>result is <b>null</b></div>
112 |     if (is_date(result)) return <StringView result={result}/>
113 |     if (is_time(result)) return <StringView result={result}/>
114 |     console.log('result is',result)
115 |     return <div>unknown result here</div>
116 | }
117 | 
118 | function ColorResult({result}) {
119 |     let col = result.toHexColorString()
120 |     return <div>Color <b style={{backgroundColor: col}}>{col}</b></div>
121 | }
122 |

--------------------------------------------------------------------------------
/tests/util.js:
--------------------------------------------------------------------------------
  1 | import fs from 'fs'
  2 | import test from "tape"
  3 | import tp from "tape-approximately"
  4 | import {
  5 |     add, and, convertunit,
  6 |     cos,
  7 |     divide, equal,
  8 |     factorial,
  9 |     greaterthan, greaterthanorequal, is_prime,
 10 |     lessthan, lessthanorequal, mod,
 11 |     multiply,
 12 |     negate, not, notequal, or,
 13 |     power,
 14 |     sin,
 15 |     subtract,
 16 |     tan
 17 | } from '../../filament-lang/src/math.js'
 18 | import {drop, get_field, join, length, map, range, reverse, select, sort, sum, take} from '../../filament-lang/src/lists.js'
 19 | import {FilamentFunction, Parser} from '../../filament-lang/src/parser.js'
 20 | import {scalar, Scope, unpack} from '../../filament-lang/src/ast.js'
 21 | import {dataset} from '../../filament-lang/src/dataset.js'
 22 | 
 23 | tp(test)
 24 | 
 25 | const func = new FilamentFunction("func",{data:null},(data)=>data)
 26 | const funk = new FilamentFunction("funk",{data:null},(data)=>data)
 27 | 
 28 | 
 29 | let g2_source = fs.readFileSync(new URL("../src/lang/filament.ohm", import.meta.url)).toString()
 30 | 
 31 | 
 32 | let grammar_source = fs.readFileSync(new URL('../src/lang/filament.ohm', import.meta.url)).toString();
 33 | 
 34 | export function tests(msg,arr, opts) {
 35 |     let scope = new Scope()
 36 |     scope.install(add, subtract, multiply, divide, power, negate, mod)
 37 |     scope.install(sum, length, range, join, take, reverse)
 38 |     scope.install(lessthan, greaterthan, equal, notequal, lessthanorequal, greaterthanorequal, and,or)
 39 | 
 40 |     let parser = new Parser(scope, grammar_source)
 41 |     test(msg, (t)=>{
 42 |         let proms = arr.map((tcase) => {
 43 |             let str = tcase[0];
 44 |             let ans = tcase[1];
 45 |             let m = parser.parse(str)
 46 |             if(m.failed()) throw new Error("match failed on: " + str);
 47 |             let val = parser.ast(m).evalJS(scope)
 48 |             return Promise.resolve(val).then(v => {
 49 |                 if(v.evalJS) v = v.evalJS()
 50 |                 t.deepEqual(v,ans);
 51 |             })
 52 |         });
 53 |         Promise.allSettled(proms)
 54 |             .then(()=> t.end())
 55 |             .catch(e =>console.log("error",e))
 56 |     });
 57 | }
 58 | 
 59 | export function verify_ast(name, tests) {
 60 |     let scope = new Scope('verify_ast')
 61 |     scope.install(add, subtract, multiply, divide, power, negate, mod, factorial)
 62 |     scope.install(lessthan, greaterthan, equal, notequal, lessthanorequal, greaterthanorequal,or,and,not)
 63 |     scope.install(func,funk)
 64 |     scope.install(convertunit)
 65 |     let parser = new Parser(scope,g2_source)
 66 |     test(name, (t)=>{
 67 |         Promise.allSettled(tests.map((tcase) => {
 68 |             // console.log("tcase",tcase)
 69 |             let [code,obj,str,val] = tcase
 70 |             let match = parser.parse(code)
 71 |             let ast = parser.ast(match)
 72 |             // console.log("ast",ast)
 73 |             t.deepLooseEqual(ast,obj)
 74 |             // console.log("to string",ast.toString())
 75 |             t.deepEqual(ast.toString(),str)
 76 |             let prom = ast.evalJS(scope)
 77 |             return Promise.resolve(prom)
 78 |                 .then(res => {
 79 |                     // console.log("final result",res)
 80 |                     return unpack(res)
 81 |                 })
 82 |                 .then((res)=> t.deepEqual(res,val))
 83 |         })).then(()=>t.end())
 84 |     })
 85 | }
 86 | 
 87 | export function eval_ast(name, tests) {
 88 |     let scope = new Scope('eval_ast')
 89 |     scope.install(add,subtract,multiply,divide, power,mod, negate, factorial, is_prime)
 90 |     scope.install(lessthan,lessthanorequal,equal,notequal,greaterthanorequal,greaterthan,and,or,not)
 91 |     scope.install(range,length,take,drop,join,reverse,map, get_field, select,sort,sum)
 92 |     scope.install(dataset)
 93 |     scope.install(convertunit)
 94 |     scope.set_var('pi',scalar(Math.PI))
 95 |     let parser = new Parser(scope,g2_source)
 96 |     test(name, t => {
 97 |         Promise.allSettled(tests.map(tcase => {
 98 |             // console.log("eval ast test case",tcase)
 99 |             let [code,val] = tcase
100 |             let match = parser.parse(code)
101 |             if(match.failed()) t.error()
102 |             let ast = parser.ast(match)
103 |             // console.log("ast",ast)
104 |             return Promise.resolve(ast.evalFilament(scope))
105 |                 .then(r => {
106 |                     // console.log("testing",val,'vs',r)
107 |                     if(is_scalar(val)) {
108 |                         t.approximately(r.value,val.value,0.1)
109 |                         t.equal(r.unit,val.unit)
110 |                         return
111 |                     }
112 |                     t.deepEqual(r,val)
113 |                 })
114 |                 .catch(e => {
115 |                     console.log("error here",e)
116 |                     t.fail()
117 |                 })
118 |         })).then(() => t.end())
119 |             .catch(e => {
120 |                 console.log("error after")
121 |                 console.error(e)
122 |             })
123 |     })
124 | }
125 |

--------------------------------------------------------------------------------
/experiments/genuary5.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | <head>
  4 |     <meta charset="UTF-8">
  5 |     <title>Genuary 5</title>
  6 |     <script src="../node_modules/tinycolor2/dist/tinycolor-min.js"></script>
  7 |     <style type="text/css">
  8 |         canvas {
  9 |             border: 1px solid black;
 10 |         }
 11 |     </style>
 12 | </head>
 13 | <body>
 14 | 
 15 | <canvas id="canvas1" width="600" height="300"></canvas>
 16 | <canvas id="canvas2" width="600" height="300"></canvas>
 17 | <canvas id="canvas3" width="600" height="600"></canvas>
 18 | <canvas id="canvas4" width="600" height="600"></canvas>
 19 | 
 20 | <script type="module">
 21 |     let col = tinycolor({r:0,g:0,b:255})
 22 |     function Circle(opts) {
 23 |         return { ...opts}
 24 |     }
 25 | 
 26 |     function rando(min, max) {
 27 |         return Math.random()*(max-min) + min
 28 |     }
 29 | 
 30 |     function Point(opts) {
 31 |         return { ...opts}
 32 |     }
 33 | 
 34 |     function range(len) {
 35 |         let arr = []
 36 |         for(let i=0; i<len; i++) {
 37 |             arr.push(i)
 38 |         }
 39 |         return arr
 40 |     }
 41 | 
 42 |     function clear_background(canvas_id) {
 43 |         let canvas = document.querySelector(canvas_id)
 44 |         let c = canvas.getContext('2d')
 45 |         c.fillStyle = 'white'
 46 |         c.fillRect(0,0,600,300)
 47 |     }
 48 |     function draw(canvas_id, shapes) {
 49 |         let canvas = document.querySelector(canvas_id)
 50 |         let c = canvas.getContext('2d')
 51 |         c.save()
 52 |         c.translate(50,50)
 53 |         // c.fillStyle = 'white'
 54 |         // c.fillRect(0,0,600,300)
 55 |         shapes.forEach(sh => {
 56 |             c.fillStyle = sh.fill.toHexString()
 57 |             c.beginPath()
 58 |             c.arc(sh.center.x,sh.center.y,sh.radius, 0, Math.PI*2)
 59 |             c.closePath()
 60 |             c.fill()
 61 |         })
 62 |         c.restore()
 63 |     }
 64 | 
 65 |     function randoRGBColor() {
 66 |         return tinycolor({
 67 |             r: rando(0,255),
 68 |             g: rando(0,255),
 69 |             b: rando(0,255),
 70 |         })
 71 |     }
 72 | 
 73 |     let base = {r:0,g:255,b:255}
 74 | 
 75 |     function mixColor(c1, c2, weight) {
 76 |         return {
 77 |             r: Math.sqrt((1-weight)*Math.pow(c1.r,2) + weight*Math.pow(c2.r,2)),
 78 |             g: Math.sqrt((1-weight)*Math.pow(c1.g,2) + weight*Math.pow(c2.g,2)),
 79 |             b: Math.sqrt((1-weight)*Math.pow(c1.b,2) + weight*Math.pow(c2.b,2)),
 80 |         }
 81 |     }
 82 | 
 83 |     clear_background("#canvas1")
 84 |     const eye_1 = (x,rad,h) => {
 85 |         return range(4).map((n)=>{
 86 |             let c ={
 87 |                 h:h,
 88 |                 s:100,
 89 |                 l:50,
 90 |             }
 91 |             //black, then white, then color, then white
 92 |             if(n === 0) c.l = 0
 93 |             if(n === 1) c.l = 100
 94 |             if(n === 2) c.h = h
 95 |             if(n === 3) c.l = 0
 96 |             return Circle({
 97 |                 radius: (rad-n)*rad,
 98 |                 center: Point({x:x,y:100}),
 99 |                 fill: tinycolor(c)
100 |             })
101 |         })
102 |     }
103 |     draw("#canvas1",[eye_1(50,10, rando(0,360)), eye_1(250,10, rando(0,360))].flat())
104 | 
105 |     clear_background('#canvas2')
106 |     const eye_2 = () => {
107 |         return range(10).map(e => eye_1(e*50+50,5, rando(60,120))).flat()
108 |     }
109 |     draw("#canvas2",eye_2())
110 | 
111 | 
112 |     clear_background('#canvas3')
113 |     const eye_4 = () => {
114 |         return range(3000).map(n => {
115 |             let th = (n/50.0)
116 |             let jitter = rando(-10,10)
117 |             // let jitter = 0
118 |             let rad = rando(5,10)
119 |             let s = 15+n/20
120 |             let x = Math.sin(th*2+n/20)*s
121 |             let y = Math.cos(th*3)*s
122 |             let cx = 300-50
123 |             let cy = 300-50
124 |             return Circle({
125 |                 radius:rad,
126 |                 center: Point({x:x+cx+jitter, y:y+cy+jitter}),
127 |                 fill: tinycolor({
128 |                     h:(n/100)%360,
129 |                     s: 100,
130 |                     l: n/40,
131 |                 }),
132 |             })
133 |         })
134 |     }
135 |     draw("#canvas3",eye_4())
136 | 
137 |     function doGolf(canvas_id) {
138 |         const r = (min, max) => Math.random()*(max-min) + min
139 |         let c = document.querySelector(canvas_id).getContext('2d')
140 |         let w = 300
141 |         c.save()
142 |         c.translate(w,600-w)
143 |         c.scale(1,-1)
144 |         c.fillStyle = 'white'
145 |         c.fillRect(0,0,w*2,w*2)
146 |         for(let n=0; n<10000; n++) {
147 |             let th = (n/50.0)
148 |             let jit = r(-10,10)
149 |             let s = 10+n/50
150 |             let x = Math.sin(th*2+n/20)*s
151 |             let y = Math.cos(th*3)*s
152 |             c.fillStyle = `hsla(${((n/130)+0)%360},100%,${10+n/130}%,0.2)`
153 |             c.beginPath()
154 |             c.arc(x+jit,y+jit,r(5,10), 0, Math.PI*2)
155 |             c.closePath()
156 |             c.fill()
157 |         }
158 |         c.restore()
159 |     }
160 |     doGolf("#canvas4")
161 | 
162 | </script>
163 | </body>
164 | </html>

--------------------------------------------------------------------------------
/tests/lang.test.js:
--------------------------------------------------------------------------------
  1 | /**
  2 |  * @jest-environment jsdom
  3 |  */
  4 | 
  5 | 
  6 | import {add, subtract, multiply, divide, factorial, mod, power, negate, sin, cos, tan} from '../../filament-lang/src/math.js'
  7 | 
  8 | test('add', () => {
  9 |     // 4 + 2 >> 6
 10 |     expect(add(4,2)).toEqual(6)
 11 |     // 4 + [1,2] >> [5,6]
 12 |     expect(add(4,[1,2])).toEqual([5,6])
 13 |     //  [1,2] + 4 >> [5,6]
 14 |     expect(add([1,2],4)).toEqual([5,6])
 15 |     // [4,5]+[1,2]
 16 |     expect(add([4,5],[1,2])).toEqual([5,7])
 17 | })
 18 | 
 19 | test('subtract',()=>{
 20 |     // 2 - 1
 21 |     expect(subtract(2,1)).toEqual(1)
 22 |     // 1 - 2
 23 |     expect(subtract(1,2)).toEqual(-1)
 24 |     // -1 - 2
 25 |     expect(subtract(-1,2)).toEqual(-3)
 26 |     // [1,2,3] - 4 = [-3,-2,-1]
 27 |     expect(subtract([1,2,3],4)).toEqual([-3,-2,-1])
 28 |     // 4 - [1,2,3]
 29 |     expect(subtract(4,[1,2,3])).toEqual([3,2,1])
 30 | })
 31 | 
 32 | test('multiply', () => {
 33 |     // 4 * 5 = 20
 34 |     expect(multiply(4,5)).toEqual(20)
 35 |     // [1,2,3] * 4 = [4,8,12]
 36 |     expect(multiply([1,2,3],4)).toEqual([4,8,12])
 37 |     // 4 * [1,2,3] = [4,8,12
 38 |     expect(multiply(4,[1,2,3])).toEqual([4,8,12])
 39 |     // [1,2,3] * [4,5,6] = [4,10,18]
 40 |     expect(multiply([1,2,3],[4,5,6])).toEqual([4,10,18])
 41 | })
 42 | 
 43 | test('divide',() => {
 44 |     // 4/5 = 4/5
 45 |     expect(divide(4,5)).toEqual(4/5)
 46 |     // [1,2,3] / 4 = [1/4,1/2,3/4]
 47 |     expect(divide([1,2,3],4)).toEqual([1/4,1/2,3/4])
 48 |     // 4 / [1,2,3]
 49 |     expect(divide(4,[1,2,3])).toEqual([4,2,4/3])
 50 |     // [4,6,8] / [2,3,4]
 51 |     expect(divide([4,6,8],[1,2,3])).toEqual([4,3,8/3])
 52 | })
 53 | 
 54 | test('power',() => {
 55 |     // 2**2
 56 |     expect(power(2,2)).toEqual(2*2)
 57 |     // 2**3
 58 |     expect(power(2,3)).toEqual(2*2*2)
 59 | })
 60 | 
 61 | test('negate', ()=>{
 62 |     // -88
 63 |     expect(negate(88)).toEqual(-88)
 64 |     // - -88
 65 |     expect(negate(-88)).toEqual(88)
 66 |     // - [1,2,3]
 67 |     expect(negate([1,2,3])).toEqual([-1,-2,-3])
 68 | })
 69 | 
 70 | test('factorial',()=>{
 71 |     //!1 = 1
 72 |     expect(factorial(1)).toEqual(1)
 73 |     //!0 = 0
 74 |     expect(factorial(0)).toEqual(1)
 75 |     //!3 = 1*2*3 = 6
 76 |     expect(factorial(3)).toEqual(6)
 77 |     //![1,2,3,4,5] = [1,2,6,24,120]
 78 |     expect(factorial([1,2,3,4,5])).toEqual([1,2,6,24,120])
 79 | })
 80 | 
 81 | test('modulo',()=>{
 82 |     //2 mod 3 = 2
 83 |     expect(mod(2,3)).toEqual(2)
 84 |     //0 mod 3 = 0
 85 |     expect(mod(0,3)).toEqual(0)
 86 |     //4 mod 3 = 1
 87 |     expect(mod(4,3)).toEqual(1)
 88 | 
 89 |     //[0,1,2,3,4,5] mod 4 = [0,1,2,3,0,1]
 90 |     expect(mod([0,1,2,3,4,5],4)).toEqual([0,1,2,3,0,1])
 91 |     //4 mod [0,1,2,3,4,5] = [inf?, 0,0,3,0,1]
 92 |     expect(mod(4,[0,1,2,3,4,5])).toEqual([NaN,0,0,1,0,4])
 93 | })
 94 | 
 95 | //sin, cos, tan
 96 | test('trig', () => {
 97 |     //sin(0) = 0
 98 |     expect(sin(0)).toEqual(0)
 99 |     //sin(pi/2) = 1
100 |     expect(sin(Math.PI/2)).toEqual(1)
101 |     //sin(pi) = 0
102 |     expect(sin(Math.PI)).toEqual(0)
103 |     //sin([0,pi/2,pi]) = [0,1,0]
104 |     expect(sin([0,Math.PI/2,Math.PI])).toEqual([0,1,0])
105 |     //cos([0,pi/2,pi]) = [1,0,1]
106 |     expect(cos([0,Math.PI/2,Math.PI])).toEqual([1,0,1])
107 |     //tan([-pi/4,0,pi/4]) = [1,0,1]
108 |     expect(tan([0,Math.PI/2,Math.PI])).toEqual([1,0,1])
109 | })
110 | 
111 | //sqrt
112 | //sqrt(4) = 2
113 | //sqrt([1,2,4,16,25]) = [1,1.414,2,4,5]
114 | 
115 | //max and min
116 | //max(1,2) = 2
117 | //min(1,2) = 1
118 | //min(-1,2) = -1
119 | //min([1,2,3,4,5]) = 1
120 | //max([1,99,4,3,-99]) = 99
121 | //min([1,99,4,3,-99]) = -99
122 | //max(1,2,3) = 3
123 | //min(1,2,3) = 1
124 | //min([1,2,8],[3,1,4])  what does this really mean?
125 | 
126 | //is_prime
127 | //exp meaning e^n
128 | //random. how to test this?
129 | 
130 | 
131 | // `<` less than
132 | // lessthan(4,5) = true
133 | // lessthan(5,5) = false
134 | // lessthan([1,2,6],[4,5,6]) = [true,true,false]
135 | 
136 | // `>` greater than
137 | // greaterthan(4,5) = false
138 | // greaterthan(5,5) = false
139 | // greaterthan([1,2,6],[4,5,6]) = [false,false,false]
140 | 
141 | // `<=` less than or equal
142 | // lessthanequal(4,5) = true
143 | // lessthanequal(5,5) = true
144 | // lessthanequal([1,2,6],[4,5,6]) = [true,true,true]
145 | 
146 | // `>=` greater than or equal
147 | // greaterthanequal(4,5) = false
148 | // greaterthanequal(5,5) = true
149 | // greaterthanequal([1,2,6],[4,5,6]) = [false,false,true]
150 | 
151 | 
152 | // * `=`  equal
153 | // equal(4,5) = false
154 | // equal(5,5) = true
155 | // equal(4,5,6) ??
156 | // equal([1,2,3],[1,2,3]) true
157 | // equal([1,2,3],[1,2,4]) false or [true,true,false]
158 | 
159 | // `<>` boolean NOT equal
160 | // notequal(4,5) = true
161 | // notequal(5,5) = false
162 | // notequal(4,5,6) ??
163 | // notequal([1,2,3],[1,2,3]) false
164 | // notequal([1,2,3],[1,2,4]) true or [false,false,true]
165 | 
166 | // `and` boolean AND
167 | // and(true,true) = true
168 | // and(true,false) = false
169 | // and(false,true) = false
170 | // and(false,false) = false
171 | // and([true,false], [true,false]) = [true,false] or true?
172 | 
173 | 
174 | // `or`  boolean OR
175 | // or(true,true) = true
176 | // or(true,false) = true
177 | // or(false,true) = true
178 | // or(false,false) = false
179 | // or([true,false], [true,false]) = [true,false] or true?
180 | 
181 | 
182 | // `not` boolean NOT
183 | // not(true) = false
184 | // not(false) = true
185 | // not([true,false]) = false or [false,true]
186 | 
187 | 
188 |

--------------------------------------------------------------------------------
/experiments/raytracer.js:
--------------------------------------------------------------------------------
  1 | 
  2 | export class Color {
  3 |     constructor(red,green,blue) {
  4 |         this.red = red
  5 |         this.blue = blue
  6 |         this.green = green
  7 |     }
  8 | }
  9 | 
 10 | export class Vec3 {
 11 |     constructor(x,y,z) {
 12 |         this.x = x
 13 |         this.y = y
 14 |         this.z = z
 15 |     }
 16 |     scaleBy(s) {
 17 |         return new Vec3(this.x*s, this.y*s, this.z*s)
 18 |     }
 19 |     add(v) {
 20 |         return new Vec3(this.x + v.x, this.y + v.y, this.z + v.z)
 21 |     }
 22 |     sub(v) {
 23 |         return new Vec3(this.x - v.x, this.y - v.y, this.z - v.z)
 24 |     }
 25 | 
 26 |     dot(v) {
 27 |         return this.x*v.x + this.y*v.y + this.z*v.z
 28 |     }
 29 |     magnitude() {
 30 |         return Math.sqrt(this.x*this.x + this.y*this.y + this.z*this.z)
 31 |     }
 32 |     normalize() {
 33 |         let s = 1.0/this.magnitude()
 34 |         return new Vec3(this.x*s,this.y*s,this.z*s)
 35 |     }
 36 | }
 37 | export class Ray {
 38 |     constructor(origin,direction) {
 39 |         this.origin = origin
 40 |         this.direction = direction
 41 |     }
 42 | }
 43 | export class Sphere {
 44 |     constructor(center, radius, color) {
 45 |         this.center = center
 46 |         this.radius = radius
 47 |         this.color = color
 48 |     }
 49 | 
 50 |     intersect(ray) {
 51 |         //HL: dist << ray.origin - sphere.center
 52 |         //HL: b << dist dot ray.direction
 53 |         //HL: c = b**2 - dist.magnitude()**2 + sphere.radius**2
 54 |         //HL: fdist << (c > 0) ? b - sqrt(c) : Infinity
 55 |         //HL: return hit(obj: this, dist: dist, point: ray.direction * fidst + ray.origin)
 56 |         let distance = ray.origin.sub(this.center)
 57 |         let b = distance.dot(ray.direction)
 58 |         let c = b*b - (distance.magnitude() * distance.magnitude()) + (this.radius*this.radius)
 59 |         if(c > 0.0) {
 60 |             return b - Math.sqrt(c)
 61 |         } else {
 62 |             return Infinity
 63 |         }
 64 |     }
 65 |     getNormal(point) {
 66 |         // HL: return normalize(pt - sphere.center)
 67 |         return point.sub(this.center).normalize()
 68 |     }
 69 | }
 70 | 
 71 | const scene = {
 72 |     fov: 90.0,
 73 |     lights: [
 74 |         {
 75 |             center: new Vec3(-30,-10,20)
 76 |         },
 77 |     ],
 78 |     spheres: [
 79 |         new Sphere(
 80 |             new Vec3(-1,0,-4),
 81 |             1.5,
 82 |             new Color(0.4,1.0,0.4)
 83 |         ),
 84 |         new Sphere(
 85 |             new Vec3(2,0,-4),
 86 |             1.0,
 87 |             new Color(0.4,1.0,0.4)
 88 |         )
 89 |         ]
 90 | }
 91 | 
 92 | export class Image {
 93 |     constructor(w,h) {
 94 |         this.width = w
 95 |         this.height = h
 96 |     }
 97 | }
 98 | 
 99 | let canvas = new Image(50,20)
100 | 
101 | function create_prime(x,y,image) {
102 |     //HL:  (xy + [0.5,0.5]) / image.size * 2.0 - [1.0,1.0]
103 |     //HL: return ray(origin: [0,0,0], direction: normalize([cx,cy,-1]))
104 |     let canvas_x =       (x+0.5)/image.width * 2.0 - 1.0
105 |     let canvas_y = 1.0 - (y+0.5)/image.height * 2.0
106 |     return new Ray(
107 |         new Vec3(0,0,0),
108 |         new Vec3(canvas_x,canvas_y,-1).normalize(),
109 |     )
110 | }
111 | 
112 | function surface(ray, scene, obj, pointAtTime, normal, depth) {
113 |     let b = obj.color
114 |     let c = new Vec3(0,0,0)
115 |     let lambertAmount = 0
116 |     scene.lights.forEach(light => {
117 |         // unit(light.center - pat) dot normal
118 |         let contrib = light.center.sub(pointAtTime).normalize().dot(normal)
119 |         if(contrib < 0) return
120 |         lambertAmount += contrib
121 |     })
122 |     //clamp to above 1
123 |     lambertAmount = Math.min(1,lambertAmount)
124 |     //multiply times sphere color and material.lambert + ambient
125 |     return lambertAmount
126 | }
127 | 
128 | export function run(canvas, cb) {
129 |     //HL: for(canvas, (x,y) => ())
130 |     for (let j = 0; j < canvas.height; j++) {
131 |         for (let i = 0; i < canvas.width; i++) {
132 |             let ray = create_prime(i, j, canvas)
133 |             //see if hit
134 |             let closest = {
135 |                 distance: Infinity,
136 |                 obj: null
137 |             }
138 |             //record the closest hit
139 |             //HL: hits << map(spheres, sp => sp.intersect(ray))
140 |             //HL: let closest = min(hits, hit => hit.distance)
141 |             scene.spheres.forEach(obj => {
142 |                 let distance = obj.intersect(ray)
143 |                 if (distance < closest.distance) {
144 |                     closest = {distance, obj}
145 |                 }
146 |             })
147 |             // if closest.distance < 0
148 |             if (closest.distance < 0) {
149 |                 let pointAtTime = ray.origin.add(ray.direction.scaleBy(closest.distance))
150 |                 let color = surface(ray,
151 |                     scene,
152 |                     closest.obj,
153 |                     pointAtTime,
154 |                     closest.obj.getNormal(pointAtTime)
155 |                 )
156 |                 //HL: hit.point  << ray.direction * hit.distance + ray.origin
157 |                 //HL: brightness << surface(ray,scene,hit.obj, hit.point, hit.obj.getNormal(hit.point))
158 |                 //HL: brightness * closest.obj.color + ambient >> clamp(0,1) >> return
159 |                 cb(i,j,color)
160 |             } else {
161 |                 cb(i,j,0)
162 |             }
163 |         }
164 |     }
165 | }
166 | 
167 | if(typeof process !== 'undefined') {
168 |     run(canvas, (x, y, c) => {
169 |         if (x === 0) process.stdout.write('\n')
170 |         let colors = ['.', ':', '*', '%', '#', '@', 'x', 'X', 'W', 'Q']
171 |         if (c === 0) {
172 |             process.stdout.write('_')
173 |         } else {
174 |             let n = Math.floor(c * 10)
175 |             process.stdout.write(colors[n])
176 |         }
177 | 
178 |     })
179 | }
180 |

--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # Filament: A Humanist Language
  2 | 
  3 | Filament is a humanist programming language for doing exploratory research 
  4 | and visualizations.  Filament is reactive and organized around transforming and plotting data. 
  5 | It is a humanist language, because its primary 
  6 | concern is providing a good experience for the human doing the programming. It does *not* focus on 
  7 | performance or type safety, except where that would help the primary humanist concerns.
  8 | *Filament is a tool for thinking about things, not shipping production software.*
  9 | 
 10 | See the [intro](./intro.md) document for more on the philosophy and what makes Filament unique.
 11 | 
 12 | # Examples:
 13 | 
 14 | ## Histogram of date states entered the union
 15 | 
 16 | ```javascript
 17 |     DATASETS.US_STATES >>
 18 |         histogram( item: (s)=>state.date_entered_union,
 19 |                   label: (s)=>state.abbreviation,
 20 |                   bin_size: 10yrs)
 21 | ```
 22 | 
 23 | 
 24 | ## How long would it take Superman to fly around the world
 25 | Let's assume he is [faster than a speeding bullet](https://en.wikipedia.org/wiki/.220_Swift). 
 26 | We need the circumference of the earth and the speed of the fastest bullet. Lets show it in hours.
 27 | 
 28 | ```javascript
 29 | earth.circumference / 4_000 ft/s as hours
 30 | ````
 31 | 
 32 | ## Show the relative sizes of the planets in the solar system as a row of circles
 33 | ```javascript
 34 | planet_to_circle << (planet) => circle(
 35 |     radius = planet.radius,
 36 |     fill = color(hue=random(360))
 37 |     )
 38 | 
 39 | DATASETS.PLANETS >> map(planet_to_circle) >> row() >> draw()
 40 | ```
 41 | 
 42 | 
 43 | ## How many milliseconds is 15 minutes
 44 | 
 45 | ```javascript
 46 |   15 minutes as msec
 47 | ```
 48 | 
 49 | 
 50 |   
 51 | 
 52 | ## Plot all of my friends on a map by their addresses as user avatars
 53 | 
 54 | ```javascript
 55 | select(contacts, where: (a) => a.type == DB.person and a.category == DB.contacts)
 56 |   >> for((f) => f.latlon = lookup_lat_lon(f.address))
 57 |   >> draw_geomap( coord: (f)=> f.latlon, label: (f)=>f.avatar)
 58 | ```
 59 | 
 60 | The `draw_map` function takes a list of objects. If the objects are themselves lat/lon pairs 
 61 | it will just draw them with default markers. If the objects are not GeoCoordinates 
 62 | it will need an accessor function to pull out the lat lon. You can also use a mapping 
 63 | function to pull out a label.
 64 | 
 65 | ## Show the current position of the ISS on a map
 66 | 
 67 | ```javascript
 68 | import ISS
 69 | find_position(now()) >> draw_geomap( globe:true)
 70 | ```
 71 | 
 72 | 
 73 | ## Draw the relative height of a 6ft man and 40in child
 74 | 
 75 | ```javascript
 76 |   rect(width:1ft height:6ft) >> man
 77 |   rect(width:1ft height:40in) >> child
 78 |   row([man,child]) >> draw()
 79 | ```
 80 | 
 81 | ## Draw the relative thinness of every iphone
 82 | 
 83 | ```javascript
 84 | iphones = datasets('iphones')
 85 | iphones 
 86 |   >> map( p => rect(width:p.depth, height:p.height))
 87 |   >> for( r => r.fill = color({hue:randi(360)}))
 88 |   >> row()
 89 |   >> draw() 
 90 | ```
 91 | 
 92 | ## Plot the equation x^2 + 5x
 93 | ```javascript
 94 | fun eq = (x) => x^2 + 5x
 95 | plot(eq, range:[0,10])
 96 | ```
 97 | 
 98 | ## 10 tallest buildings in the world as table and diagram
 99 | 
100 | ```javascript
101 | order(DATASETS.BUILDINGS, by:'height', dir:'asc') >> take(10) >> buildings
102 | show(buildings)
103 | buildings >> map(h => rect(height:h, width: h/10)) >> row() >> draw()
104 | ```
105 | 
106 | ## Chart atomic number vs year of discovery
107 | 
108 | ```javascript
109 | elements = datasets('elements')
110 | chart(elements, 
111 |   x_axis:(e)=>e.number, 
112 |   y_axis:(e)=>e.discovery_date, 
113 |   type:'scatter')
114 | ```
115 | 
116 | ## Calculate scrabble value of the word EXIT
117 | 
118 | ```javascript
119 | let word = 'EXIT'
120 | let letters = dataset('alphabet')
121 | word.map(l => letters[letter].score) => sum()
122 | ```
123 | 
124 | ## Vector math for drawing points
125 | 
126 | ```javascript
127 | // define some points
128 | let A = [25,50]   // first point
129 | let B = [100,50]  // second point
130 | 
131 | let AB = B-A   // subtract vectors to get the part between the two points
132 | fun magnitude (A) => (A[0]**2+A[1]**2)**-2 
133 | fun normalize (A) => (A/magnitude(A))
134 | fun make_rot (Ø) => [ [cos(Ø), -sin(Ø)], 
135 |                       [sin(Ø),  cos(Ø)] ]
136 | 
137 | fun dot (A,B) => + across (A*B)
138 | 
139 | fun cross (A,B) =>  [
140 |     A[1]*B[2] - A[2]*B[1], 
141 |     A[2]*B[0] - A[0]*B[2],
142 |     A[0]*B[1] - A[1]*B[0],
143 | ]
144 | fun angle (A,B) => arccos(dot(A,B)/(mag(A)*mag(B)))
145 | // rotate by 90 degrees
146 | let rotated = make_rot(PI/2) * AB
147 | ```
148 | 
149 | # Random stuff
150 | 
151 | ## image manipulation
152 | 
153 | `coord` here is a vector of 2 numbers, (x,y)
154 | `color` here is a vector of 3 numbers, rgb, 0->1.
155 | 
156 | ```javascript
157 | // mix each pixel w/ adjacent 50%/50
158 | for(image, (coord, color) => {
159 |     let adj = getPixel(image,coord+[1,0])
160 |     return (color + adj)/2
161 | })
162 | ```
163 | 
164 | 
165 | # research
166 | 
167 | https://en.wikipedia.org/wiki/Comparison_of_programming_languages_(list_comprehension)
168 | 
169 | Look at what LINQ does.
170 | 
171 | ```csharp
172 | var ns = from x in Enumerable.Range(0, 100)
173 |          where x * x > 3
174 |          select x * 2;
175 | ```
176 | 
177 | is sugar for
178 | 
179 | ```csharp
180 | var ns = Enumerable.Range(0, 100)
181 |         .Where(x => x * x > 3)
182 |         .Select(x => x * 2);
183 | ```
184 | 
185 | how about 
186 | ```javascript
187 | range(100) >> select(where= x=>x*x>3, map:x=>x*2)
188 | ```
189 | or
190 | ```javascript
191 | range(100) >> filter(x=>x*x>3) => map(x=>x*2) => show()
192 | ```
193 | 
194 | 
195 | turned into block language
196 | ```
197 | |--------------|
198 | | make 0 to 10 | 
199 | |--------------------|
200 | | include x where    |
201 | |  x*x > 3           |
202 | |--------------------|
203 | | transform x to |
204 | |  x * 2         |
205 | |----------------|
206 | ```
207 | 
208 | # Philosophy
209 | 
210 | * build your code up in pieces, incrementally. always be able to see the steps along the way
211 | * learn as you code. shortcuts are just sugar for plain stuff. learn the plain then learn the sugar
212 | * make a separate function, then inline it.
213 | 
214 | https://writings.stephenwolfram.com/2016/09/how-to-teach-computational-thinking/
215 |

--------------------------------------------------------------------------------
/tools/builddocs.js:
--------------------------------------------------------------------------------
  1 | /*
  2 | - parse markdown. two phase parser and grammar?
  3 | - generate HTML from AST
  4 | - parse embedded codeblocks marked as filament
  5 | - generate pretty code
  6 | - executed embedded codeblocks
  7 | - generate pretty output for common result types
  8 | - generate PNGs for canvas result type
  9 | - everything into in-memory datastructure
 10 | - flatten entire structure into final html file
 11 | - run as cli app. accepts input file and output file and output dir
 12 |  */
 13 | 
 14 | 
 15 | import path from 'path'
 16 | import {promises as fs, createWriteStream, mkdir as real_mkdir} from 'fs'
 17 | import ohm from 'ohm-js'
 18 | import {Parser} from '../../filament-lang/src/parser.js'
 19 | import {is_canvas_result, Scope} from "../../filament-lang/src/ast.js"
 20 | import {default as PImage} from "pureimage"
 21 | import {make_standard_scope} from '../../filament-lang/src/lang.js'
 22 | 
 23 | 
 24 | // import {chart, histogram, timeline} from '../src/lang/chart.js'
 25 | 
 26 | const H1    = (content) => ({type:'H1', content})
 27 | const H2    = (content) => ({type:'H2',content})
 28 | const P     = (content) => ({type:'P',content})
 29 | const code  = (language,content) => ({type:'CODE', language, content})
 30 | 
 31 | function parse_markdown_blocks(str) {
 32 |     let parser = {}
 33 |     parser.grammar = ohm.grammar(`
 34 | MarkdownOuter {
 35 |   Doc = Block*
 36 |   Block = h2 | h1 | code | para | blank
 37 |   h2 = "##" rest
 38 |   h1 = "#" rest
 39 |   para = line+  //paragraph is just multiple consecutive lines
 40 |   code = q rest (~q any)* q //anything between the \`\`\` markers
 41 |   
 42 |   
 43 |   q = "\`\`\`"   // start and end code blocks
 44 |   nl = "\\n"   // new line
 45 |   blank = nl  // blank line has only newline
 46 |   line = (~nl any)+ nl  // line has at least one letter
 47 |   rest = (~nl any)* nl  // everything to the end of the line
 48 | }
 49 |     `)
 50 |     parser.semantics = parser.grammar.createSemantics()
 51 |     parser.semantics.addOperation('blocks',{
 52 |         _terminal() { return this.sourceString },
 53 |         h1:(_,b) => H1(b.blocks()),
 54 |         h2:(_,b) => H2(b.blocks()),
 55 |         code:(_,name,cod,_2) => code(name.blocks(),cod.blocks().join("")),
 56 |         para: a=> P(a.sourceString),
 57 |         rest: (a,_) => a.blocks().join("")
 58 |     })
 59 |     let match = parser.grammar.match(str)
 60 |     return parser.semantics(match).blocks()
 61 | }
 62 | 
 63 | function l(...args) {
 64 |     console.log(...args)
 65 | }
 66 | 
 67 | function parse_markdown_content(block) {
 68 |     // l("parsing content from block",block)
 69 |     // let parser = {}
 70 |     // parser.grammar = ohm.grammar(`
 71 |     // `)
 72 |     // parser.semantics = parser.grammar.createSemantics()
 73 |     // parser.semantics.addOperation('content',{
 74 |     // })
 75 |     // let match = parser.grammar.match(block)
 76 |     // return parser.semantics(match).content()
 77 |     return block
 78 | }
 79 | 
 80 | async function parse_markdown(raw_markdown) {
 81 |     // l('parsing raw markdown',raw_markdown)
 82 |     let blocks = parse_markdown_blocks(raw_markdown)
 83 |     // l("blocks are",blocks)
 84 |     let doc = blocks.map(block => parse_markdown_content(block))
 85 |     return doc
 86 | }
 87 | 
 88 | async function eval_filament(doc) {
 89 |     // l("evaluating all filament objects in",doc)
 90 |     let codeblocks = doc.filter(block => block.type === 'CODE')
 91 |     // l("codeblocks",codeblocks)
 92 |     let filament_grammer = (await fs.readFile('src/lang/filament.ohm')).toString()
 93 |     let parser = new Parser(null,filament_grammer)
 94 |     let scope = make_standard_scope()
 95 | 
 96 |     return Promise.all(codeblocks.map(async (code) => {
 97 |         console.log(code)
 98 |         let match = parser.parse(code.content)
 99 |         // console.log('match',match.failed())
100 |         if(match.failed()) throw new Error("match failed on: " + code.content);
101 |         let ast = parser.ast(match)
102 |         // console.log("ast is",ast)
103 |         let res = await ast.evalFilament(scope)
104 |         // console.log("final result is",res,'for code',code)
105 |         code.result = res
106 |         return res
107 |     })).then(()=>{
108 |         // console.log("all done")
109 |     })
110 | }
111 | 
112 | async function mkdir(dir) {
113 |     return new Promise((res,rej)=>{
114 |         real_mkdir(dir,(err)=>{
115 |             console.log("done making")
116 |             if(err) {
117 |                 // console.log(err)//return rej(err)
118 |             }
119 |             res()
120 |         })
121 |     })
122 | }
123 | 
124 | async function generate_canvas_images(doc, basedir, subdir) {
125 |     await mkdir(path.join(basedir,subdir))
126 |     // l("rendering all canvas images in doc",doc)
127 |     Promise.all(doc
128 |         .filter(block => block.type === 'CODE' && is_canvas_result(block.result))
129 |         .map(async(block,i) => {
130 |             const img = PImage.make(1000,500);
131 |             block.result.cb(img)
132 |             let fname = `output.${i}.png`
133 |             block.src = path.join(subdir,fname)
134 |             await PImage.encodePNGToStream(img,createWriteStream(path.join(basedir,subdir,fname)))
135 |         })).then(done => {
136 |             console.log("fully done writing images")
137 |         })
138 | }
139 | 
140 | function render_code_output(block) {
141 |     let code =`<pre>
142 |   <code data-language="${block.language}">${block.content}</code>
143 | </pre>
144 | result
145 | `
146 | 
147 |     if(block.src) {
148 |         code += `<img src="${block.src}" width="500" height="250">`
149 |     } else {
150 |         code += `<p><code>${block.src}</code></p>`
151 |     }
152 |     return code
153 | }
154 | 
155 | function render_html(doc) {
156 |     // l('rendering html from doc',doc)
157 |     const title = 'tutorial'
158 |     const content = doc.map(block => {
159 |         // l("block is",block)
160 |         if(block.type === 'H1') return `<h1>${block.content}</h1>`
161 |         if(block.type === 'H2') return `<h2>${block.content}</h2>`
162 |         if(block.type === 'P') return `<p>${block.content}</p>`
163 |         if(block.type === 'CODE') return render_code_output(block)
164 |         return "ERROR"
165 |     }).join("\n")
166 |     let template = `
167 |      <html>
168 |      <head><title>${title}</title></head>
169 |         <body>
170 |         ${content}
171 |         </body>
172 |         </html>`
173 |     return template
174 | }
175 | 
176 | async function convert_file(infile_path, outdir_path, outfile_name) {
177 |     await mkdir(outdir_path)
178 |     let raw_markdown = (await fs.readFile(infile_path)).toString()
179 |     let doc = await parse_markdown(raw_markdown+"\n")
180 |     await eval_filament(doc)
181 |     await generate_canvas_images(doc,outdir_path,'images')
182 |     let html = render_html(doc)
183 |     console.log("final html is",html)
184 |     await fs.writeFile(path.join(outdir_path,outfile_name),html)
185 | }
186 | 
187 | const fnt = PImage.registerFont('node_modules/pureimage/tests/unit/fixtures/fonts/SourceSansPro-Regular.ttf','Source Sans Pro');
188 | fnt.load(()=>{
189 |     convert_file('tools/test.md','output', 'output.html')
190 |         .then(()=>{console.log("done")})
191 |         .catch(e => console.error(e))})
192 |

--------------------------------------------------------------------------------
/.idea/workspace.xml:
--------------------------------------------------------------------------------
  1 | <?xml version="1.0" encoding="UTF-8"?>
  2 | <project version="4">
  3 |   <component name="AutoImportSettings">
  4 |     <option name="autoReloadType" value="SELECTIVE" />
  5 |   </component>
  6 |   <component name="ChangeListManager">
  7 |     <list default="true" id="81b546d0-edcf-4322-afeb-66eaae132749" name="Changes" comment="move examples and symbols to typescript in own dirs">
  8 |       <change afterPath="$PROJECT_DIR$/.nvmrc" afterDir="false" />
  9 |       <change beforePath="$PROJECT_DIR$/.gitignore" beforeDir="false" afterPath="$PROJECT_DIR$/.gitignore" afterDir="false" />
 10 |       <change beforePath="$PROJECT_DIR$/.idea/filament-gui.iml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/filament-gui.iml" afterDir="false" />
 11 |       <change beforePath="$PROJECT_DIR$/package-lock.json" beforeDir="false" afterPath="$PROJECT_DIR$/package-lock.json" afterDir="false" />
 12 |       <change beforePath="$PROJECT_DIR$/package.json" beforeDir="false" afterPath="$PROJECT_DIR$/package.json" afterDir="false" />
 13 |       <change beforePath="$PROJECT_DIR$/src/App.js" beforeDir="false" afterPath="$PROJECT_DIR$/src/App.js" afterDir="false" />
 14 |       <change beforePath="$PROJECT_DIR$/src/actions.ts" beforeDir="false" />
 15 |       <change beforePath="$PROJECT_DIR$/src/editor/view.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/editor/view.tsx" afterDir="false" />
 16 |       <change beforePath="$PROJECT_DIR$/src/examples/views.js" beforeDir="false" afterPath="$PROJECT_DIR$/src/examples/views.js" afterDir="false" />
 17 |       <change beforePath="$PROJECT_DIR$/src/index.js" beforeDir="false" afterPath="$PROJECT_DIR$/src/index.js" afterDir="false" />
 18 |       <change beforePath="$PROJECT_DIR$/src/logo.svg" beforeDir="false" />
 19 |       <change beforePath="$PROJECT_DIR$/src/reportWebVitals.js" beforeDir="false" />
 20 |       <change beforePath="$PROJECT_DIR$/tsconfig.json" beforeDir="false" afterPath="$PROJECT_DIR$/tsconfig.json" afterDir="false" />
 21 |     </list>
 22 |     <option name="SHOW_DIALOG" value="false" />
 23 |     <option name="HIGHLIGHT_CONFLICTS" value="true" />
 24 |     <option name="HIGHLIGHT_NON_ACTIVE_CHANGELIST" value="false" />
 25 |     <option name="LAST_RESOLUTION" value="IGNORE" />
 26 |   </component>
 27 |   <component name="FileTemplateManagerImpl">
 28 |     <option name="RECENT_TEMPLATES">
 29 |       <list>
 30 |         <option value="TypeScript File" />
 31 |       </list>
 32 |     </option>
 33 |   </component>
 34 |   <component name="Git.Settings">
 35 |     <option name="RECENT_GIT_ROOT_PATH" value="$PROJECT_DIR$" />
 36 |   </component>
 37 |   <component name="MacroExpansionManager">
 38 |     <option name="directoryName" value="8035lprt" />
 39 |   </component>
 40 |   <component name="MarkdownSettingsMigration">
 41 |     <option name="stateVersion" value="1" />
 42 |   </component>
 43 |   <component name="PackageJsonUpdateNotifier">
 44 |     <dismissed value="$PROJECT_DIR$/package.json" />
 45 |   </component>
 46 |   <component name="ProblemsViewState">
 47 |     <option name="selectedTabId" value="CurrentFile" />
 48 |   </component>
 49 |   <component name="ProjectId" id="2C7yeT45iySejmU0mZ77uP42Kp2" />
 50 |   <component name="ProjectViewState">
 51 |     <option name="foldersAlwaysOnTop" value="false" />
 52 |     <option name="hideEmptyMiddlePackages" value="true" />
 53 |     <option name="showLibraryContents" value="true" />
 54 |   </component>
 55 |   <component name="PropertiesComponent"><![CDATA[{
 56 |   "keyToString": {
 57 |     "RunOnceActivity.OpenProjectViewOnStart": "true",
 58 |     "RunOnceActivity.ShowReadmeOnStart": "true",
 59 |     "WebServerToolWindowFactoryState": "false",
 60 |     "node.js.detected.package.eslint": "true",
 61 |     "node.js.detected.package.standard": "true",
 62 |     "node.js.detected.package.tslint": "true",
 63 |     "node.js.selected.package.eslint": "(autodetect)",
 64 |     "node.js.selected.package.standard": "",
 65 |     "node.js.selected.package.tslint": "(autodetect)",
 66 |     "nodejs_package_manager_path": "npm",
 67 |     "settings.editor.selected.configurable": "settings.typescriptcompiler",
 68 |     "ts.external.directory.path": "/Users/josh.marinacci/projects/filament-gui/node_modules/typescript/lib"
 69 |   }
 70 | }]]></component>
 71 |   <component name="RecentsManager">
 72 |     <key name="MoveFile.RECENT_KEYS">
 73 |       <recent name="$PROJECT_DIR$/src/symbols" />
 74 |       <recent name="$PROJECT_DIR$/src/gui" />
 75 |       <recent name="$PROJECT_DIR$/src/editor" />
 76 |     </key>
 77 |   </component>
 78 |   <component name="RunManager" selected="npm.start">
 79 |     <configuration name="build" type="js.build_tools.npm" temporary="true" nameIsGenerated="true">
 80 |       <package-json value="$PROJECT_DIR$/package.json" />
 81 |       <command value="run" />
 82 |       <scripts>
 83 |         <script value="build" />
 84 |       </scripts>
 85 |       <node-interpreter value="project" />
 86 |       <envs />
 87 |       <method v="2" />
 88 |     </configuration>
 89 |     <configuration name="start" type="js.build_tools.npm" temporary="true" nameIsGenerated="true">
 90 |       <package-json value="$PROJECT_DIR$/package.json" />
 91 |       <command value="run" />
 92 |       <scripts>
 93 |         <script value="start" />
 94 |       </scripts>
 95 |       <node-interpreter value="project" />
 96 |       <envs />
 97 |       <method v="2" />
 98 |     </configuration>
 99 |     <recent_temporary>
100 |       <list>
101 |         <item itemvalue="npm.start" />
102 |         <item itemvalue="npm.build" />
103 |       </list>
104 |     </recent_temporary>
105 |   </component>
106 |   <component name="SpellCheckerSettings" RuntimeDictionaries="0" Folders="0" CustomDictionaries="0" DefaultDictionary="application-level" UseSingleDictionary="true" transferred="true" />
107 |   <component name="TaskManager">
108 |     <task active="true" id="Default" summary="Default task">
109 |       <changelist id="81b546d0-edcf-4322-afeb-66eaae132749" name="Changes" comment="" />
110 |       <created>1658168012723</created>
111 |       <option name="number" value="Default" />
112 |       <option name="presentableId" value="Default" />
113 |       <updated>1658168012723</updated>
114 |       <workItem from="1658168014577" duration="1226000" />
115 |       <workItem from="1658169437384" duration="8391000" />
116 |       <workItem from="1658209172439" duration="4595000" />
117 |     </task>
118 |     <task id="LOCAL-00001" summary="initial start on converting to typescript">
119 |       <created>1658171126003</created>
120 |       <option name="number" value="00001" />
121 |       <option name="presentableId" value="LOCAL-00001" />
122 |       <option name="project" value="LOCAL" />
123 |       <updated>1658171126003</updated>
124 |     </task>
125 |     <task id="LOCAL-00002" summary="move examples and symbols to typescript in own dirs">
126 |       <created>1658174980408</created>
127 |       <option name="number" value="00002" />
128 |       <option name="presentableId" value="LOCAL-00002" />
129 |       <option name="project" value="LOCAL" />
130 |       <updated>1658174980408</updated>
131 |     </task>
132 |     <option name="localTasksCounter" value="3" />
133 |     <servers />
134 |   </component>
135 |   <component name="TypeScriptGeneratedFilesManager">
136 |     <option name="version" value="3" />
137 |   </component>
138 |   <component name="Vcs.Log.Tabs.Properties">
139 |     <option name="TAB_STATES">
140 |       <map>
141 |         <entry key="MAIN">
142 |           <value>
143 |             <State />
144 |           </value>
145 |         </entry>
146 |       </map>
147 |     </option>
148 |   </component>
149 |   <component name="VcsManagerConfiguration">
150 |     <MESSAGE value="initial start on converting to typescript" />
151 |     <MESSAGE value="move examples and symbols to typescript in own dirs" />
152 |     <option name="LAST_COMMIT_MESSAGE" value="move examples and symbols to typescript in own dirs" />
153 |   </component>
154 |   <component name="XSLT-Support.FileAssociations.UIState">
155 |     <expand />
156 |     <select />
157 |   </component>
158 | </project>

--------------------------------------------------------------------------------
/src/examples/examples.ts:
--------------------------------------------------------------------------------
  1 | export type ExampleGroup = {
  2 |     type:string,
  3 |     title:string,
  4 |     content:Example[]
  5 | }
  6 | export type Example = {
  7 |     title:string,
  8 |     code:string,
  9 | }
 10 | export const EXAMPLES:ExampleGroup[] = [
 11 |     {
 12 |         type:'group',
 13 |         title:'Arithmetic & Units',
 14 |         content:[
 15 |             {
 16 |                 title:'basic arithmetic',
 17 |                 code:`// follows standard precedence rules. mul > add
 18 | 4*5 + 2*8`,
 19 |             },
 20 |             {
 21 |                 title:'factorial',
 22 |                 code:` // ! means factorial instead of NOT
 23 | !8`,
 24 |             },
 25 |             {
 26 |                 title:'power',
 27 |                 code:`// two to the 8th
 28 | 2 ** 8
 29 | `,
 30 |             },
 31 |             {
 32 |                 title:'convert feet to meters',
 33 |                 code:`64ft as meters`
 34 |             },
 35 |             {
 36 |                 title:'convert length to volume gallons',
 37 |                 code:`8ft * 9ft * 10ft as gallons`
 38 |             },
 39 |             {
 40 |                 title:'make random number between 0 and 10',
 41 |                 code:`random(max:10)`
 42 |             },
 43 |             {
 44 |                 title:'make 10 random number between 5 and 10',
 45 |                 code:`//make 10 random numbers, each between 5 and 10
 46 | range(10) >> map(range, with: x->random(min: 5, max:10))`
 47 |             }
 48 |         ]
 49 |     },
 50 |     {
 51 |         type:'group',
 52 |         title:'dates and times',
 53 |         content:[
 54 |             {
 55 |                 title:"make some dates",
 56 |                 code:`
 57 | [
 58 |     date("July 27 2021", format:"MMMM dd yyyy"),
 59 |     date("8/8/08",       format:"MM/dd/yy"),
 60 |     date(year:2021, month:7, day:27)
 61 | ]
 62 | `,
 63 |             },
 64 |             {
 65 |                 title:"make some times",
 66 |                 code:`
 67 | [
 68 |     time("3:42",format:"kk:mm"),
 69 |     time("14:42:33",format:"kk:mm:ss"),
 70 |     time("3:42pm",format:"hh:mmaa")
 71 | ]
 72 |             `
 73 |             },
 74 |             {
 75 |                 title:"duration math",
 76 |                 code:`
 77 | [
 78 |     23hours + 60minutes as days,
 79 |     23min - 8s,
 80 |     80min * 6
 81 | ]
 82 |                 `,
 83 |             },
 84 |             {
 85 |                 title:"math with dates and times",
 86 |                 code:`
 87 |                 [
 88 | //days until next christmas
 89 | date(month:12, day:25, year:2021) - today() as days,
 90 | 
 91 | // 8pm - 2am
 92 | time("8pm",format:"hhaa") - time("2am",format:"hhaa") as hours
 93 | ]
 94 | `,
 95 |             },
 96 |         ]
 97 |     },
 98 |     {
 99 |         type:'group',
100 |         title:'Lists',
101 |         content:[
102 |             {
103 |                 title:'simple list of numbers',
104 |                 code:`[5, 8, 44, 16]`
105 |             },
106 |             {
107 |                 title:'huge list',
108 |                 code:`//long lists will be rendered with ... in the middle
109 | range(10000)`,
110 |             },
111 |             {
112 |                 title:"average of list of numbers",
113 |                 code:`data << [1,2,3,4]
114 | sum(data)/length(data)`
115 |             },
116 |             {
117 |                 title:"double list with a lambda ",
118 |                 code:`map([1,2,3], x -> x*2)`
119 |             },
120 |             {
121 |                 title:"add two lists",
122 |                 code:`[1,2,3] + [4,5,6]`
123 |             },
124 |             {
125 |                 title:'list * number',
126 |                 code:`2 * [1,2,3]`
127 |             },
128 |             {
129 |                 title:'last 5 of 0 to 100 by 10s',
130 |                 code:`take(range(100,step:10), -5)`
131 |             },
132 |             {
133 |                 title:'all primes under 100',
134 |                 code:'range(100) >> select(where:is_prime)',
135 |             },
136 |             {
137 |                 title:'select from list where multiple of 7',
138 |                 code:`select(range(0,100), {where:x=>x%7===0})`
139 |             },
140 |         ]
141 |     },
142 |     {
143 |         type:'group',
144 |         title:'Charts and Datasets',
145 |         content:[
146 |             {
147 |                 title:'simple chart of 10 to zero ',
148 |                 code:`chart(reverse(range(10)))`,
149 |             },
150 |             {
151 |                 title:'alphabet data',
152 |                 code: `//info on ever letter in the alphabet\ndataset('alphabet')`
153 |             },
154 |             {
155 |                 title:'how many syllables in each letter',
156 |                 code:`dataset('alphabet') >> chart(x_label:'letter', y:'syllables')`
157 |             },
158 |             {
159 |                 title:"elements number vs weight",
160 |                 code: `chart(dataset('elements'), x:'number', y:'weight', type:'scatter')`
161 |             },
162 |             {
163 |                 title:"planets radius vs orbit radius",
164 |                 code:
165 |                     `planets << dataset('planets')
166 | chart(planets, type:'scatter', 
167 |                   x:'orbital_radius',
168 |                   y:'mean_radius',
169 |                size:'mean_radius',
170 |                name:'name'
171 |     )                  
172 |                   `
173 |             },
174 |             {
175 |                 title:'5 tallest buildings. name vs height',
176 |                 code:`dataset('tallest_buildings') 
177 |   >> take(count:5) 
178 |   >> chart(y:'height', x_label:'name')`
179 |             },
180 |             {
181 |                 title:'most populous countries',
182 |                 code:
183 |                     `top_countries << take(dataset('countries'), 10)
184 | chart(top_countries, x_label:'name', y:'population', y_label:'population')
185 | `
186 |             },
187 |             {
188 |                 title:'First Letters of US State Names',
189 |                 code:
190 |                     `states << dataset('states')
191 | def first_letter (state:?) {
192 |    take(get_field(state,'name'), 1)
193 | }
194 | states << map(states, first_letter)
195 | histogram(states)`
196 |             },
197 |             {
198 |                 title:'Timeline of US States entering the Union',
199 |                 code: `dataset('states') >> timeline(date:'statehood_date', name:'name')`
200 |             },
201 |             {
202 |                 title:'History of Apple stock closing price',
203 |                 code: `stockhistory('AAPL') >> chart(y:'close')`
204 |             }
205 |         ]
206 |     },
207 |     {
208 |         type:'group',
209 |         title:'Plotting Equations',
210 |         content:[
211 |             {
212 |                 title:'quadratic equation',
213 |                 code:`
214 | quad << (x) -> x**2 - 3*x - 4
215 | plot(y:quad)
216 | `
217 |             },
218 |             {
219 |                 title:'sin() 0->10',
220 |                 code:`plot(y: x->sin(x),  min:-pi*4, max:pi*4)`
221 |             },
222 |             {
223 |                 title: 'lissajou',
224 |                 code: `
225 | px2 << theta ->  sin(2*theta)
226 | py2 << theta ->  sin(3*theta)
227 | plot(x:px2,y:py2, zoom: 150)
228 |         `
229 |             },
230 | 
231 | 
232 |             {
233 |                 title:'heart equation',
234 |                 code:`
235 | px3 << t -> (16 * (sin(t)**3))/10
236 | py3 << t -> (13 * cos(t) - 5 * cos (2*t) - 2 * cos(3*t) - cos(4*t))/10
237 | plot(x:px3, y:py3, zoom:150)
238 | `
239 |             }
240 |         ]
241 |     },
242 |     {
243 |         type:'group',
244 |         title:'Image manipulation',
245 |         content:[
246 |             {title:'make red image',
247 |             code:`
248 | make_image(width:100,height:100) >> map_image(with:(x,y) -> {
249 |     [1,0,0]
250 | })
251 | `},
252 |             {
253 |                 title:'vertical stripes',
254 |                 code:`
255 | red << [1,0,0]
256 | green << [0,1,0]
257 | 
258 | stripe << (x,y,color) -> {
259 |     if x mod 2 = 0 then red else green
260 | }
261 | 
262 | // make red and green stripes
263 | make_image(width:100,height:100) >> map_image(with:stripe)
264 |         `
265 |              },
266 | 
267 | 
268 |             {
269 |                 title:'whitenoise',
270 |                 code:`
271 | make_image(width:100, height: 100)
272 |     >> map_image(with:(x,y,color) -> {
273 |             n << random(min:0,max:1)
274 |             [n,n,n]
275 |     })`
276 |             },
277 | 
278 |             {
279 |                 title:'load remote image',
280 |                 code:`load_image(src:'https://placekitten.com/200/300')`
281 |             }
282 | 
283 |         ]
284 |     }
285 | ]
286 |

--------------------------------------------------------------------------------
/roadmap.md:
--------------------------------------------------------------------------------
  1 | # High Level Roadmap
  2 | - [x] All functional language features work properly
  3 | - [ ] conditionals (if, match, loops?)
  4 | - [ ] Make 10 more cool examples. Blog about it.
  5 | - [ ] Tool to evaluate markdown and generate html with pngs for tutorial doc
  6 | - [ ] Plot, for trig, parametric, strange attractors
  7 | - [ ] Image, loop to define and convert pixel values with color vectors
  8 | - [ ] Experimental block editor
  9 | - [ ] Basic features for GUI editor. Multiple blocks. Hide sidebars. Symbol inspector. Blog .
 10 | - [ ] Reactive variables to auto revaluation
 11 | - [ ] Drawing canvas for shapes and words
 12 |                 
 13 | 
 14 | # Sprints
 15 | 
 16 | ## M1
 17 | - [x] focus on impl instead of research
 18 | - [x] Remove custom types. Just use regular JS syntax where possible. plain JS objects.
 19 | - [x] headless unit test support. make `npm run lang-tests` work
 20 | - [x] impl all math functions with unit tests
 21 | - [x] impl all list functions with unit tests
 22 | - [x] implement API enough for 10 examples to work
 23 | - [x] blog post on the language and some ascii code examples
 24 | 
 25 | 
 26 | ## M2
 27 | - [x] render tables and lists as spreadsheet like view
 28 | - [x] add 10 new examples to sidebar
 29 | - [x] blog post on the editor
 30 | - [x] implement parser enough for all examples to work that don't use lambdas
 31 | - [x] Scalar() class with unit. 
 32 | - [x] List() class from list literals or datasets or other. Works with records too.
 33 | - [x] Callsite class represents a parsed function with args ready to apply
 34 | - [x] all functions work with new list and scalar classes
 35 | - [x] pipeline works to compose functions
 36 | - [x] spec named vs indexed arguments
 37 | - [x] implement named and indexed args for a few functions
 38 | - [x] switch editor to use HL language
 39 | - [x] implement the current syntax in an ohm parser
 40 | - [x] implement 10 examples using new syntax
 41 | - [x] blog post
 42 | 
 43 | ## M3
 44 | - [ ] button to add new code block
 45 | - [ ] button to add new markdown block
 46 | - [ ] render code and markdown pretty when not editing them
 47 | - [x] review: https://cuelang.org
 48 | - [ ] research syntaxes for code blocks, lambdas, and control flow in non-C style languages. 
 49 |     smalltalk, applescript, hypertalk, dylan?
 50 | - [ ] design better syntax for control flow, code blocks, named and lambda functions
 51 | - [ ] blog post
 52 | 
 53 | ## M4
 54 | - [ ] design & impl full shape drawing system
 55 | - [ ] design chart system to auto-detect formats and labels. lets you customize as needed for all current examples
 56 | - [x] scatter chart
 57 | - [x] bar chart
 58 | - [ ] pie chart
 59 | - [ ] circles and rects drawing
 60 | - [ ] polygon and path drawing
 61 | - [ ] turtle drawing
 62 | - [ ] add 10 new examples which use graphics
 63 | 
 64 | ## M5
 65 | * blog post
 66 | * add unicode pretty view
 67 | * prototype visual scratch blocks view of same code. split pane. not interactive.
 68 | 
 69 | ## to be categorized
 70 | 
 71 | * load and save to localstorage
 72 | * list of existing notebooks to load
 73 | * load and save to docserver using github auth
 74 | * splash page explaining what it is and w/ tutorial
 75 | * custom domain
 76 | * access remote datasets from the web
 77 | * access remote datasets from silly.io with schema to guide how it's interpreted
 78 | * twitter api
 79 | * stock api
 80 | * weather api
 81 | * dictionary api
 82 | * more of the tutorial written
 83 | * website analytics. think about what i want to capture
 84 |     * for each week, how many total, how many per route, top ten user agents per route, top ten langs per route, top ten countries per route. same top ten for the totals. 
 85 |     * show the same for each day for the past 7 days
 86 | * simple raytracer
 87 |     * draw three spheres, no reflections, two lights.
 88 | * mandlebrot renderer
 89 |     * draw mandel given an input range and output resolution
 90 | * lindenmayer system tree
 91 |     * draw a simple tree by mapping letters to functions. R R F, etc.
 92 | * logo impl for turtle graphics
 93 |     * needs logo gfx output surface
 94 |     * draw 4 classic logo programs using equivalent syntax
 95 |     * draw them with abbreviated syntax R F R L U D, etc.
 96 | * recreate some circles demos from wolfram tutorial
 97 |     * nested circles offset
 98 |     * circles w/ different colors
 99 | * get 10 recent tweets on a hashtag into a list, include username and text and timestamp
100 |     * most recent tweets on #magic hashtag. re-evaluate to get new data. includes text, username, and timestap in a table.
101 | * whats 99 to the 99th power
102 | * how much is 20 thousand leagues
103 | * how many teaspoons in a gallon
104 | * koch triangle using logo rules using a rule map. needs matching/mapping and gfx.
105 | 
106 | # research and bibliography and open questions
107 | 
108 | https://writings.stephenwolfram.com/2016/09/how-to-teach-computational-thinking/
109 | 
110 | https://en.wikipedia.org/wiki/Comparison_of_programming_languages_(list_comprehension)
111 | 
112 | Look at what LINQ does.
113 | 
114 | ```csharp
115 | var ns = from x in Enumerable.Range(0, 100)
116 |          where x * x > 3
117 |          select x * 2;
118 | ```
119 | 
120 | is sugar for
121 | 
122 | ```csharp
123 | var ns = Enumerable.Range(0, 100)
124 |         .Where(x => x * x > 3)
125 |         .Select(x => x * 2);
126 | ```
127 | 
128 | how about 
129 | ```javascript
130 | range(100) => select(where= x=>x*x>3, map:x=>x*2)
131 | ```
132 | or
133 | ```javascript
134 | range(100) => filter(x=>x*x>3) => map(x=>x*2) => show()
135 | ```
136 | 
137 | 
138 | turned into block language
139 | ```
140 | |--------------|
141 | | make 0 to 10 | 
142 | |--------------------|
143 | | include x where    |
144 | |  x*x > 3           |
145 | |--------------------|
146 | | transform x to |
147 | |  x * 2         |
148 | |----------------|
149 | ```
150 | 
151 | 
152 | # Philosophy
153 | 
154 | * build your code up in pieces, incrementally. always be able to see the steps along the way
155 | * learn as you code. shortcuts are just sugar for plain stuff. learn the plain then learn the sugar
156 | * make a separate function, then inline it.
157 | 
158 | # Questions
159 | 
160 | * How can you show provenance? Include textual descriptions with links. Ex: [The 5 Fastest Rifle Cartridges](https://www.msn.com/en-us/news/us/the-5-fastest-rifle-cartridges/ar-BB17nLBQ)
161 | * How to auto-complete the `earth.circumference` part?
162 | * How to make sure the unit `ft/s` isn’t interpreted as actual division?
163 | 
164 | * define clamp to work on more than just scalars. could you clamp a color vector or a point vector?
165 | * visualize vectors by drawing as arrows. how?  map list of vectors to arrows?
166 | * how to let you work with components of vectors with xyz rgb etc when it's really just a list of two numbers underneath
167 | 
168 | [Eucliean Vector](https://en.wikipedia.org/wiki/Euclidean_vector)
169 | 
170 | 
171 | * What's the shortest possible raytracer using vector math. 
172 |     * Loop over every pixel
173 |     * generate primary ray
174 |     * intersect with list of objects
175 |     * find normal at closest intersection
176 |     * calculate shading using lights.
177 |     * project secondary rays and recurse
178 | 
179 |   
180 | * what's a good syntax for anonymous functions / lambdas?
181 | 
182 | ``` javascript
183 | double = @(x) x*2
184 | double = |x|x*2|
185 | double = (x)=>x*2
186 | double = x => x*2
187 | double = lambda x: x*2
188 | double = {x:Number -> x*2}
189 | double(x) = x+y
190 | ```
191 | 
192 | 
193 | * equality vs setting variables and pipeline.  Can pipelining to a new identifier be the same as setting a variable? ex:
194 | 
195 | ``` javascript
196 | // set the foo variable to the 'bar' string
197 | var foo = 'bar'  //assign foo
198 | var foo := 'bar' //assign foo
199 | 'bar' => foo     //assign to foo
200 | (foo=='bar')     //comparison
201 | 
202 | ```
203 | 
204 | 
205 | 
206 | # Possible Business Models
207 | 
208 | There is no business model for a programming language. They are cost centers. They also tend to
209 | get better adoption when they are open source; at least in the 21st century. I think Java was the
210 | last non-open source language to gain wide adoption.  Making HL is going to be hard. Not the actual
211 | implementation, but the platform and the marketing to drive adoption and work with potential users. 
212 | Plus a lot of the value will come from system integration (twitter apis) and data curation (useful
213 | datasets) All that takes money. Wolfram Alpha is expensive to make and maintain.
214 | So what are the options.
215 | 
216 | * *desktop software* Make it be an app you download and install. Charge once and for upgrades, or a subscription.
217 | * *Donations* from individuals to a the HL non-profit.
218 | * *SaaS for the platform*. Make a hosted version with built in datasets and API integrations. Language and std lib are still open source, and anyone
219 | could host their own impl, just without the integrations and datasets.
220 | * *ads* just slap ads on it. A completly free and open resource with ads. [Like these](https://www.worldometers.info/geography/alphabetical-list-of-countries/)
221 | * *sponsorship* it's a public resource and big companies pay to be the sponsor. Think NPR sponsorships. The sponsor name is tasteful and on every page, just once per page.
222 | * *sell books* create programming books on it that are sold.
223 | * *sell cirriculum* if this really is that powerful, sell a curriculum based on it to schools and home schoolers and clubs.
224 | 
225 | 
226 |

--------------------------------------------------------------------------------

setOpen(!open)}>{title}

Examples

setOpen(!open)}>{symbol.name}

{title}