🎨 evy: Add ellipse drawing builtin (#127)

Add canvas ellipse drawing builtin to draw ellipse with

 	ellipse x y radiusX [radiusY [rotation [startDegree endDegree]]]

Pull-Request: #127

Author: juliaogris

frontend/courses/courses.json

@@ -24,6 +24,7 @@
         { "id": "squares", "title": "Squares" },
         { "id": "rainbow", "title": "Rainbow" },
         { "id": "poly", "title": "Polygon and Polyline" },
+        { "id": "ellipse", "title": "Ellipse" },
         { "id": "fill", "title": "Stroke and Fill" },
         { "id": "linestyle", "title": "Line Styles" },
         { "id": "text", "title": "Text" }

frontend/courses/sample/draw/ellipse.evy

@@ -0,0 +1,116 @@
+labels := ["x" "y" "radX" "radY" "rot°" "start°" "end°"]
+vals := [50 60 30 17 5 0 180]
+cnt := len vals
+cur := 1
+w := 11
+
+print "Watermelon, anyone?"
+print "🍉"
+print "Use arrow keys or drag numbers"
+print "for your perfect piece."
+
+draw
+
+func draw
+    clear "hsl(210deg 5% 15%)" // near black
+    draw_ellipse
+    draw_text
+    draw_highlight cur
+end
+
+func draw_ellipse
+    width 2
+    fill "red"
+    stroke "darkgreen"
+    ellipse vals[0] vals[1] vals[2] vals[3] vals[4] vals[5] vals[6]
+end
+
+func draw_text
+    font "italic 300 2rem \"Fira Code\", monospace"
+    textsize 2.7
+    width 0.2
+    fill "hsl(210deg 13% 72%)" // light grey
+    move 2 15
+    text "// "
+    for i := range (len labels)
+        move i*w+20 15
+        text (sprintf "%5s" labels[i])
+    end
+    font "2rem \"Fira Code\", monospace"
+    textsize 2.7
+    fill "hsl(27deg 100% 74%)" // orange
+    move 2 10
+    text "ellipse"
+    fill "hsl(204deg 100% 75%)" // ligth  blue
+    for i := range (len labels)
+        move i*w+20 10
+        text (sprintf "%5.0f" vals[i])
+    end
+
+end
+
+func draw_highlight i:num
+    fill "none"
+    stroke "white"
+    width 0.4
+    x := i * w + 20
+    move x-1 9
+    rect 10 4
+end
+
+// keyboard interaction
+on key k:string
+    if k == "ArrowLeft"
+        cur = (cur + cnt - 1) % cnt
+    else if k == "ArrowRight"
+        cur = (cur + 1) % cnt
+    else if k == "ArrowUp"
+        vals[cur] = vals[cur] + 1
+    else if k == "ArrowDown"
+        vals[cur] = max 0 vals[cur]-1
+    end
+    draw
+end
+
+// pointer interaction
+
+dragy := -1
+deltay := 0
+
+on down x:num y:num
+    if y < 20 and x > 18
+        cur = min (floor (x - 18)/w) (len labels)-1
+        dragy = y
+        draw
+    end
+end
+
+on up _:num _:num
+    dragy = -1
+    deltay = 0
+end
+
+on move _:num y:num
+    if dragy == -1
+        return
+    end
+    deltay = y - dragy
+    if deltay < 0
+        deltay = floor deltay
+    else
+        deltay = ceil deltay
+    end
+end
+
+on animate
+    if deltay == 0
+        return
+    end
+    if cur < 4
+        val := vals[cur] + deltay / 10
+        vals[cur] = max 0 (min 100 val)
+    else
+        vals[cur] = vals[cur] + deltay / 5
+    end
+    draw
+end

frontend/index.js

@@ -57,6 +57,7 @@ function newEvyGo() {
     clear,
     // advanced canvas
     poly,
+    ellipse,
     stroke,
     fill,
     dash,
@@ -97,6 +98,7 @@ function needsCanvas(f) {
     f.colour ||
     f.clear ||
     f.poly ||
+    f.ellipse ||
     f.stroke ||
     f.fill ||
     f.dash ||
@@ -541,6 +543,25 @@ function parsePoints(s) {
   return points
 }
 
+// ellipse is exported to evy go/wasm.
+// see https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/ellipse
+function ellipse(x, y, radiusX, radiusY, rotation, startAngle, endAngle) {
+  const rad = Math.PI / 180
+  const { ctx, fill, stroke } = canvas
+  ctx.beginPath()
+  ctx.ellipse(
+    transformX(x),
+    transformY(y),
+    transformX(radiusX),
+    transformX(radiusY),
+    rotation * rad,
+    startAngle * rad,
+    endAngle * rad
+  )
+  fill && ctx.fill()
+  stroke && ctx.stroke()
+}
+
 // stroke is exported to evy go/wasm.
 function stroke(ptr, len) {
   const s = memToString(ptr, len)

frontend/module/yace-editor.js

@@ -475,6 +475,7 @@ const builtins = new Set([
   "colour",
   "clear",
   "poly",
+  "ellipse",
   "stroke",
   "fill",
   "dash",

pkg/evaluator/builtin.go

@@ -91,7 +91,8 @@ func DefaultBuiltins(rt Runtime) Builtins {
 		"colour": stringBuiltin("colour", rt.Color),
 		"clear":  {Func: clearFunc(rt.Clear), Decl: clearDecl},
 
-		"poly": {Func: polyFunc(rt.Poly), Decl: polyDecl},
+		"poly":    {Func: polyFunc(rt.Poly), Decl: polyDecl},
+		"ellipse": {Func: ellipseFunc(rt.Ellipse), Decl: ellipseDecl},
 
 		"stroke":  stringBuiltin("stroke", rt.Stroke),
 		"fill":    stringBuiltin("fill", rt.Fill),
@@ -152,6 +153,7 @@ type GraphicsRuntime interface {
 
 	// advanced graphics functions
 	Poly(vertices [][]float64)
+	Ellipse(x, y, radiusX, radiusY, rotation, startAngle, endAngle float64)
 	Stroke(s string)
 	Fill(s string)
 	Dash(segments []float64)
@@ -197,6 +199,9 @@ func (rt *UnimplementedRuntime) Text(s string)             { rt.Unimplemented("t
 func (rt *UnimplementedRuntime) Textsize(size float64)     { rt.Unimplemented("textsize") }
 func (rt *UnimplementedRuntime) Font(s string)             { rt.Unimplemented("font") }
 func (rt *UnimplementedRuntime) Fontfamily(s string)       { rt.Unimplemented("fontfamily") }
+func (rt *UnimplementedRuntime) Ellipse(x, y, rX, rY, rotation, startAngle, endAngle float64) {
+	rt.Unimplemented("ellipse")
+}
 
 var readDecl = &parser.FuncDeclStmt{
 	Name:       "read",
@@ -607,6 +612,40 @@ func polyFunc(polyFn func([][]float64)) BuiltinFunc {
 	}
 }
 
+var ellipseDecl = &parser.FuncDeclStmt{
+	Name:          "ellipse",
+	VariadicParam: &parser.Var{Name: "n", T: parser.NUM_TYPE},
+	ReturnType:    parser.NONE_TYPE,
+}
+
+func ellipseFunc(ellipseFn func(x, y, radiusX, radiusY, rotation, startAngle, endAngle float64)) BuiltinFunc {
+	return func(_ *scope, args []Value) (Value, error) {
+		argLen := len(args)
+		if argLen < 3 || argLen == 6 || argLen > 7 {
+			return nil, fmt.Errorf("%w: 'ellipse' requires 3, 4, 5 or 7 arguments, found %d", ErrBadArguments, argLen)
+		}
+		x := args[0].(*Num).Val
+		y := args[1].(*Num).Val
+		radiusX := args[2].(*Num).Val
+		radiusY := radiusX
+		rotation := 0.0
+		startAngle := 0.0
+		endAngle := 360.0
+		if argLen > 3 {
+			radiusY = args[3].(*Num).Val
+		}
+		if argLen > 4 {
+			rotation = args[4].(*Num).Val
+		}
+		if argLen > 6 {
+			startAngle = args[5].(*Num).Val
+			endAngle = args[6].(*Num).Val
+		}
+		ellipseFn(x, y, radiusX, radiusY, rotation, startAngle, endAngle)
+		return nil, nil
+	}
+}
+
 var dashDecl = &parser.FuncDeclStmt{
 	Name:          "dash",
 	VariadicParam: &parser.Var{Name: "segments", T: parser.NUM_TYPE},

pkg/wasm/imports.go

@@ -27,7 +27,7 @@ func newJSRuntime() *jsRuntime {
 }
 
 func (rt *jsRuntime) Yielder() evaluator.Yielder { return rt.yielder }
-func (*jsRuntime) Print(s string)                { jsPrint(s) }
+func (rt *jsRuntime) Print(s string)             { jsPrint(s) }
 func (rt *jsRuntime) Read() string               { return rt.yielder.Read() }
 func (rt *jsRuntime) Sleep(dur time.Duration)    { rt.yielder.Sleep(dur) }
 func (rt *jsRuntime) Move(x, y float64)          { move(x, y) }
@@ -53,6 +53,10 @@ func (rt *jsRuntime) Poly(vertices [][]float64) {
 	poly(strings.Join(vStrings, " "))
 }
 
+func (rt *jsRuntime) Ellipse(x, y, rX, rY, rotation, startAngle, endAngle float64) {
+	ellipse(x, y, rX, rY, rotation, startAngle, endAngle)
+}
+
 func floatsToString(floats []float64) string {
 	if len(floats) == 0 {
 		return ""
@@ -196,6 +200,11 @@ func clear(s string)
 //export poly
 func poly(s string)
 
+// ellipse is imported from JS
+//
+//export ellipse
+func ellipse(x, y, rX, rY, rotation, startAngle, endAngle float64)
+
 // stroke is imported from JS
 //
 //export stroke