graphics: Initialize graphics primitives

Initialize graphics primitives: move, line, rect, circle, color and
width (line width). Refactor DefaultBuiltins() function to take
a Runtime struct with graphics primitives provided.

Author: juliaogris

frontend/index.css

@@ -120,12 +120,16 @@ main {
 }
 .code, .out {
   flex: 1;
-  padding: 12px 16px;
   overflow: scroll;
 }
 .code {
+  padding: 12px 16px;
   border-right: 1px solid var(--primary-color-dimmer);
 }
+.out {
+  display: flex;
+  flex-direction: column;
+}
 textarea {
   font-family: var(--font-family-code);
   color: var(--code-color);
@@ -137,6 +141,19 @@ textarea {
   border: none;
   background: var(--code-background);
   resize: none;
+  outline: none;
+}
+
+.output {
+  padding: 12px 16px;;
+}
+.canvas {
+  flex:  0 1 50%;
+  border-bottom: 1px solid var(--primary-color-dimmer);
+}
+#canvas {
+  border-right: 1px solid var(--primary-color-dimmer);
+  display: none;
 }
 
 .confetti {
@@ -176,6 +193,7 @@ textarea {
       flex-direction: column;
     }
     .code {
+      flex: 0 1 30%;
       border-right: none;
       border-bottom: 1px solid var(--primary-color-dimmer);
     }

frontend/index.html

@@ -13,16 +13,19 @@
     <header>
       <div>
         <button id="evaluate" disabled>Run</button>
-        <button id="tokenize" disabled>Tokenize</button>
-        <button id="parse" disabled>Parse</button>
+        <button id="tokenize" disabled class="hidden">Tokenize</button>
+        <button id="parse" disabled class="hidden">Parse</button>
       </div>
       <img src="logo.svg" alt="evy logo" height="100%" />
     </header>
     <main>
       <div class="code">
-        <textarea id="code">
-move 10 10
-line 20 20
+        <textarea id="code" spellcheck="false" autocapitalize="none">
+move 10 20
+line 50 50
+rect 25 25
+color "lime"
+circle 10
 
 x := 12
 print "x:" x
@@ -32,7 +35,12 @@
         </textarea>
       </div>
       <div class="out">
-        <textarea id="output" disabled></textarea>
+        <div class="canvas">
+          <canvas id="canvas"></canvas>
+        </div>
+        <div class="output">
+          <textarea id="output" disabled></textarea>
+        </div>
       </div>
     </main>
   </body>

frontend/index.js

@@ -9,7 +9,15 @@ function initWasm() {
     wasm = obj.instance
     go.run(wasm)
   })
-  go.importObject.env = { 'main.jsPrint': jsPrint }
+  go.importObject.env = {
+    'main.jsPrint': jsPrint,
+    'main.move': move,
+    'main.line': line,
+    'main.width': width,
+    'main.circle': circle,
+    'main.rect': rect,
+    'main.color': color,
+  }
   document.querySelectorAll('header button').forEach((button) => {
     button.onclick = handleRun
     button.disabled = false
@@ -18,17 +26,22 @@ function initWasm() {
 }
 
 // jsPrint converts wasm memory bytes from ptr to ptr+len to string and
-// writes it the output pane.
+// writes it to the output textarea.
 function jsPrint(ptr, len) {
-  const buf = new Uint8Array(wasm.exports.memory.buffer, ptr, len)
-  const str = new TextDecoder('utf8').decode(buf)
+  const s = memString(ptr, len)
   const output = document.getElementById('output')
-  output.textContent += str
-  if (str.toLowerCase().includes('confetti')) {
+  output.textContent += s
+  if (s.toLowerCase().includes('confetti')) {
     showConfetti()
   }
 }
 
+function memString(ptr, len) {
+  const buf = new Uint8Array(wasm.exports.memory.buffer, ptr, len)
+  const s = new TextDecoder('utf8').decode(buf)
+  return s
+}
+
 // handleRun retrieves the input string from the code pane and
 // converts it to wasm memory bytes. It then calls the evy evaluate
 // function.
@@ -39,6 +52,7 @@ function handleRun(event) {
   const mem = new Uint8Array(wasm.exports.memory.buffer, ptr, bytes.length)
   mem.set(new Uint8Array(bytes))
   document.getElementById('output').textContent = ''
+  resetCanvas()
   const fn = wasm.exports[event.target.id] // evaluate, tokenize or parse
   fn(ptr, bytes.length)
 }
@@ -66,7 +80,7 @@ function showConfetti() {
     .sort((a, b) => a.r - b.r)
 
   const cssText = (c) =>
-    `background: ${c.color};left: ${c.x}%; top: ${c.y}%; transform: scale(${c.r})`
+    `background: ${c.color}; left: ${c.x}%; top: ${c.y}%; transform: scale(${c.r})`
   const confettiDivs = confetti.map((c) => {
     const div = document.createElement('div')
     div.style.cssText = cssText(c)
@@ -98,3 +112,100 @@ function showConfetti() {
     confettiDivs.forEach((div) => div.classList.add('fadeout'))
   }, 8500)
 }
+
+// graphics
+
+const canvas = {
+  x:0,
+  y:0,
+  ctx: null,
+  scale: {x: 10, y: -10},
+  width: 100,
+  height:100,
+
+  offset: {x: 0, y:-100}, // height
+}
+
+function scaleX(x)  {
+  return canvas.scale.x * x
+}
+
+function scaleY(y)  {
+  return canvas.scale.y * y
+}
+
+function transformX(x)  {
+  return scaleX(x + canvas.offset.x)
+}
+
+function transformY(y)  {
+  return scaleY(y + canvas.offset.y)
+}
+
+function move(x, y) {
+  canvas.x = transformX(x)
+  canvas.y = transformY(y)
+}
+
+function line(x2, y2) {
+  console.log("line x:", x2, "y:", y2)
+  const {ctx, x, y} = canvas
+  ctx.beginPath()
+  ctx.moveTo(x, y)
+  ctx.lineTo(transformX(x2), transformY(y2))
+  ctx.stroke();
+  move(x2, y2)
+}
+
+function color(ptr, len) {
+  const s = memString(ptr, len)
+  console.log("color:", s)
+  canvas.ctx.fillStyle = s;
+  canvas.ctx.strokeStyle = s;
+}
+
+function width(n) {
+  console.log("lineWidth:", n)
+  canvas.ctx.lineWidth = scaleX(n);
+}
+
+function rect(dx, dy) {
+  console.log("rect dx:", dx, "dy:", dy)
+  const {ctx, x, y} = canvas
+  const sDX = scaleX(dx)
+  const sDY = scaleY(dy)
+  canvas.ctx.fillRect(x, y, sDX, sDY)
+  canvas.x = x + sDX
+  canvas.y = y + sDY
+}
+
+function circle(r) {
+  console.log("circle r:", r)
+  const { x, y, ctx } = canvas
+  ctx.beginPath()
+  ctx.arc(x, y, scaleX(r), 0, Math.PI * 2, true)
+  ctx.fill()
+}
+
+function initCanvas() {
+  const c = document.getElementById("canvas")
+  const b = c.parentElement.getBoundingClientRect()
+  const side = b.width < b.height ? b.width : b.height
+  c.width = Math.abs(scaleX(canvas.width))
+  c.height = Math.abs(scaleY(canvas.height))
+  console.log("width", c.width, "height", c.height)
+  c.style.width = `${side}px`
+  c.style.display = 'block'
+  canvas.ctx = c.getContext("2d")
+}
+
+function resetCanvas() {
+  const ctx = canvas.ctx
+  ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height)
+  ctx.fillStyle = "black"
+  ctx.strokeStyle = "black"
+  ctx.lineWidth = 1
+  move(0,0)
+}
+
+initCanvas()

main.go

@@ -64,7 +64,8 @@ func (c *cmdParse) Run() error {
 		return err
 	}
 	printFunc := func(s string) { fmt.Print(s) }
-	builtins := evaluator.DefaultBuiltins(printFunc).Decls()
+	rt := evaluator.Runtime{Print: printFunc}
+	builtins := evaluator.DefaultBuiltins(rt).Decls()
 	result := parser.Run(string(b), builtins)
 	fmt.Println(result)
 	return nil