wip

Author: juliaogris

frontend/courses/courses.json

@@ -26,7 +26,10 @@
         { "id": "poly", "title": "Polygon and Polyline" },
         { "id": "fill", "title": "Stroke and Fill" },
         { "id": "linestyle", "title": "Line Styles" },
-        { "id": "text", "title": "Text" }
+        { "id": "text", "title": "Text" },
+        { "id": "poly", "title": "Polygon and Polyline" },
+        { "id": "ellipse", "title": "Ellipse" },
+        { "id": "curve", "title": "Curve" }
       ]
     },
     {
@@ -35,6 +38,7 @@
       "emoji": "🤹‍♀️",
       "units": [
         { "id": "movingdot", "title": "Moving Red Dot" },
+        { "id": "bounce", "title": "Bounce" },
         { "id": "juggle", "title": "Juggle" },
         { "id": "splashtrig", "title": "Splash of Trig" },
         { "id": "draw", "title": "Draw" }

frontend/courses/sample/animate/bounce.evy

@@ -0,0 +1,17 @@
+background := "hsl(0deg 0% 0% / 10%)"
+x := 10
+y := 50
+s := 1
+width 1
+fill background
+stroke "red"
+
+on animate
+    clear background
+    move x y
+    circle 10
+    x = x + s
+    if x < 10 or x > 90
+        s = -s
+    end
+end

frontend/courses/sample/draw/curve.evy

@@ -0,0 +1 @@
+print "todo"

frontend/courses/sample/draw/ellipse.evy

@@ -0,0 +1,118 @@
+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
+
+//TODO: issues!! w := 10 - need better eval error exposure
+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
+        // clamp first 4 values to 0, 100 (x, y, radiusX, radiusY)
+        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,8 @@ function newEvyGo() {
     clear,
     // advanced canvas
     poly,
+    ellipse,
+    curve,
     stroke,
     fill,
     dash,
@@ -97,6 +99,8 @@ function needsCanvas(f) {
     f.colour ||
     f.clear ||
     f.poly ||
+    f.ellipse ||
+    f.curve ||
     f.stroke ||
     f.fill ||
     f.dash ||
@@ -541,6 +545,90 @@ 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()
+}
+
+// curve is exported to evy go/wasm.
+// curve draws connected curve segments encoded as string
+// representing 2 dimensional array, e.g.:
+//  "1 2 3 4,5 6" => [[1,2,3,4], [5,6]]
+// the curve segments here are 1 2 3 4 and 5 6
+//
+// curve segments are interpreted differently depending on their
+// **length**:
+// 2: endX, endY - Line from current position end position x, y
+// 4: controlX, controlY, endX, endY: quadratic bezier curve, see
+//    https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/quadraticCurveTo
+// 5: control1X, control1Y, control2X, control2Y, radius: arcTo, see
+//    https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/arcTo
+// 6: control1X, control1Y, control2X, control2Y, endX, endY: bezierCurveTo, see
+//    https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/bezierCurveTo
+//
+// This notation is very dense and is intended as escape hatch for advanced graphics.
+function curve(ptr, len) {
+  const s = memToString(ptr, len)
+  // parse "1 2 3 4,5 6" into [[1,2,3,4], [5,6]]:
+  const curves = s.split(",").map((s) => s.split(" ").map(Number))
+
+  const { x, y, ctx, fill, stroke } = canvas
+
+  ctx.beginPath()
+  ctx.moveTo(x, y)
+
+  for (const curve of courves) {
+    switch (curve.length) {
+      case 2:
+        ctx.lineTo(transformX(curve[0]), transformY(curve[1]))
+        break
+      case 4:
+        ctx.quadraticCurveTo(
+          transformX(curve[0]), // controlPoint.x
+          transformY(curve[1]), // controlPoint.y
+          transformX(curve[2]), // endPoint.x
+          transformY(curve[3]) // endPoint.y
+        )
+        break
+      case 5:
+        ctx.arcTo(
+          transformX(curve[0]), // controlPoint1.x
+          transformY(curve[1]), // controlPoint1.y
+          transformX(curve[2]), // controlPoint2.x
+          transformY(curve[3]), // controlPoint1.y
+          transformX(curve[4]) // radius
+        )
+        break
+      case 6:
+        ctx.bezierCurveTo(
+          transformX(curve[0]), // controlPoint1.x
+          transformY(curve[1]), // controlPoint1.y
+          transformX(curve[2]), // controlPoint2.x
+          transformY(curve[3]), // controlPoint1.y
+          transformX(curve[4]), // endPoint.x
+          transformY(curve[5]) // endPoint.y
+        )
+        break
+    }
+  }
+  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,8 @@ const builtins = new Set([
   "colour",
   "clear",
   "poly",
+  "ellipse",
+  "curve",
   "stroke",
   "fill",
   "dash",

main.go

@@ -146,6 +146,7 @@ func format(r io.Reader, w io.StringWriter, checkOnly bool) error {
 	parserBuiltins := evaluator.DefaultBuiltins(newCLIRuntime()).ParserBuiltins()
 	prog, err := parser.Parse(in, parserBuiltins)
 	if err != nil {
+		fmt.Println("parser error")
 		return fmt.Errorf("%w: %w", errParse, parser.TruncateError(err, 8))
 	}
 	out := prog.Format()

pkg/evaluator/builtin.go

@@ -86,12 +86,15 @@ func DefaultBuiltins(rt Runtime) Builtins {
 		"line":   xyBuiltin("line", rt.Line),
 		"rect":   xyBuiltin("rect", rt.Rect),
 		"circle": numBuiltin("circle", rt.Circle),
+
 		"width":  numBuiltin("width", rt.Width),
 		"color":  stringBuiltin("color", rt.Color),
 		"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},
+		"curve":   {Func: curveFunc(rt.Curve), Decl: curveDecl},
 
 		"stroke":  stringBuiltin("stroke", rt.Stroke),
 		"fill":    stringBuiltin("fill", rt.Fill),
@@ -152,6 +155,8 @@ type GraphicsRuntime interface {
 
 	// advanced graphics functions
 	Poly(vertices [][]float64)
+	Ellipse(x, y, radiusX, radiusY, rotation, startAngle, endAngle float64)
+	Curve(sements [][]float64)
 	Stroke(s string)
 	Fill(s string)
 	Dash(segments []float64)
@@ -189,6 +194,7 @@ func (rt *UnimplementedRuntime) Width(w float64)           { rt.Unimplemented("w
 func (rt *UnimplementedRuntime) Color(s string)            { rt.Unimplemented("color") }
 func (rt *UnimplementedRuntime) Clear(color string)        { rt.Unimplemented("clear") }
 func (rt *UnimplementedRuntime) Poly(vertices [][]float64) { rt.Unimplemented("poly") }
+func (rt *UnimplementedRuntime) Curve(sements [][]float64) { rt.Unimplemented("curve") }
 func (rt *UnimplementedRuntime) Stroke(s string)           { rt.Unimplemented("stroke") }
 func (rt *UnimplementedRuntime) Fill(s string)             { rt.Unimplemented("fill") }
 func (rt *UnimplementedRuntime) Dash(segments []float64)   { rt.Unimplemented("dash") }
@@ -197,6 +203,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 +616,65 @@ 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,7  or 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 curveDecl = &parser.FuncDeclStmt{
+	Name:          "curve",
+	VariadicParam: &parser.Var{Name: "n", T: numArrayType},
+	ReturnType:    parser.NONE_TYPE,
+}
+
+func curveFunc(curveFn func([][]float64)) BuiltinFunc {
+	return func(_ *scope, args []Value) (Value, error) {
+		segments := make([][]float64, len(args))
+		for i, arg := range args {
+			vertex := arg.(*Array)
+			elements := *vertex.Elements
+			if len(elements) < 2 || len(elements) == 3 || len(elements) > 6 {
+				return nil, fmt.Errorf("%w: 'curve' argument %d has %d elements, expected 2, 4, 5 or 6", ErrBadArguments, i+1, len(elements))
+			}
+			segments[i] = make([]float64, len(elements))
+			for j, val := range elements {
+				segments[i][j] = val.(*Num).Val
+			}
+		}
+		curveFn(segments)
+		return nil, nil
+	}
+}
+
 var dashDecl = &parser.FuncDeclStmt{
 	Name:          "dash",
 	VariadicParam: &parser.Var{Name: "segments", T: parser.NUM_TYPE},