🫧 evy: Add clear to drawing functions (#122)

Add `clear` to drawing functions as a builtin because it is very
commonly used. Use an optional second parameter to specify the clear or
background colour.

Pull-Request: #122

Author: juliaogris

frontend/courses/sample/animate/juggle.evy

@@ -48,12 +48,6 @@ func delta:num d:num n:num
     return -d
 end
 
-func clear
-    color "white"
-    move 0 0
-    rect 100 100
-end
-
 func draw dot:{}num col:string
     color col
     move dot.x dot.y

frontend/courses/sample/animate/movingdot.evy

@@ -5,12 +5,6 @@ for i := range 0 100 0.1
     sleep 0.01
 end
 
-func clear
-    color "white"
-    move 0 0
-    rect 100 100
-end
-
 func dot x:num y:num
     color "red"
     move x y

frontend/courses/sample/animate/splashtrig.evy

@@ -60,7 +60,8 @@ for i := range (len dots)
 end
 
 on animate
-    clear
+    // 2% opacity leaves trails on movement
+    clear "hsl(0deg 100% 100% / 2%)"
 
     for dot := range dots
         update dot
@@ -72,13 +73,6 @@ func update dot:{}num
     dot.phase = dot.phase + dot.s
 end
 
-func clear
-    // 2% opacity leaves trails on movement
-    color "hsl(0deg 100% 100% / 2%)"
-    move 0 0
-    rect 100 100
-end
-
 func draw dot:{}num col:string
     color col
     x := 50 + dot.orbit * (cos (tau * dot.phase))

frontend/courses/sample/tour/events.evy

@@ -50,12 +50,6 @@ func dot x:num y:num radius:num hue:num
     circle radius
 end
 
-func clear
-    color "white"
-    move 0 0
-    rect 100 100
-end
-
 func hsl hue:num sat:num light:num
     s := sprintf "hsl(%.0fdeg %.0f%% %.0f%%)" hue%360 sat light
     color s

frontend/index.js

@@ -54,6 +54,7 @@ function newEvyGo() {
     circle,
     rect,
     color,
+    clear,
   }
   const go = new Go() // see wasm_exec.js
   go.importObject.env = Object.assign(go.importObject.env, evyEnv)
@@ -461,6 +462,20 @@ function circle(r) {
   ctx.fill()
 }
 
+// clear is exported to evy go/wasm.
+function clear(ptr, len) {
+  const ctx = canvas.ctx
+  if (len === 0) {
+    ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height)
+    return
+  }
+  const color = memToString(ptr, len)
+  const prevColor = ctx.fillStyle
+  ctx.fillStyle = color
+  ctx.fillRect(0, 0, ctx.canvas.width, ctx.canvas.height)
+  ctx.fillStyle = prevColor
+}
+
 function logicalX(e) {
   const scaleX = (canvas.width * canvas.scale.x) / e.target.offsetWidth
   return e.offsetX * scaleX - canvas.offset.x

pkg/evaluator/builtin.go

@@ -89,6 +89,7 @@ func DefaultBuiltins(rt Runtime) Builtins {
 		"width":  numBuiltin("width", rt.Width),
 		"color":  stringBuiltin("color", rt.Color),
 		"colour": stringBuiltin("colour", rt.Color),
+		"clear":  {Func: clearFunc(rt.Clear), Decl: clearDecl},
 	}
 	xyParams := []*parser.Var{
 		{Name: "x", T: parser.NUM_TYPE},
@@ -135,6 +136,7 @@ type GraphicsRuntime interface {
 	Circle(radius float64)
 	Width(w float64)
 	Color(s string)
+	Clear(color string)
 }
 
 type UnimplementedRuntime struct {
@@ -162,6 +164,7 @@ func (rt *UnimplementedRuntime) Rect(x, y float64)     { rt.Unimplemented("rect"
 func (rt *UnimplementedRuntime) Circle(r float64)      { rt.Unimplemented("circle") }
 func (rt *UnimplementedRuntime) Width(w float64)       { rt.Unimplemented("width") }
 func (rt *UnimplementedRuntime) Color(s string)        { rt.Unimplemented("color") }
+func (rt *UnimplementedRuntime) Clear(color string)    { rt.Unimplemented("clear") }
 
 var readDecl = &parser.FuncDeclStmt{
 	Name:       "read",
@@ -523,6 +526,26 @@ func rand1Func(_ *scope, args []Value) (Value, error) {
 	return &Num{Val: rand.Float64()}, nil //nolint: gosec
 }
 
+var clearDecl = &parser.FuncDeclStmt{
+	Name:          "clear",
+	VariadicParam: &parser.Var{Name: "s", T: parser.STRING_TYPE},
+	ReturnType:    parser.NONE_TYPE,
+}
+
+func clearFunc(clearFn func(string)) BuiltinFunc {
+	return func(_ *scope, args []Value) (Value, error) {
+		if len(args) > 1 {
+			return nil, fmt.Errorf("%w: 'clear' takes 0 or 1 string arguments", ErrBadArguments)
+		}
+		color := ""
+		if len(args) == 1 {
+			color = args[0].(*String).Val
+		}
+		clearFn(color)
+		return nil, nil
+	}
+}
+
 func xyDecl(name string) *parser.FuncDeclStmt {
 	return &parser.FuncDeclStmt{
 		Name: name,

pkg/wasm/imports.go

@@ -33,6 +33,7 @@ func (rt *jsRuntime) Rect(x, y float64)          { rect(x, y) }
 func (rt *jsRuntime) Circle(r float64)           { circle(r) }
 func (rt *jsRuntime) Width(w float64)            { width(w) }
 func (rt *jsRuntime) Color(s string)             { color(s) }
+func (rt *jsRuntime) Clear(color string)         { clear(color) }
 func (rt *jsRuntime) Yielder() evaluator.Yielder { return rt.yielder }
 
 // sleepingYielder yields the CPU so that JavaScript/browser events
@@ -157,6 +158,11 @@ func width(w float64)
 //export color
 func color(s string)
 
+// clear is imported from JS
+//
+//export clear
+func clear(s string)
+
 // setEvySource is imported from JS
 //
 //export setEvySource