Improved shape example

desktop/sources/scripts/surface.js

@@ -37,7 +37,7 @@ function Surface (ronin) {
     if (isText(shape)) {
       context.textAlign = shape.a
       context.font = `${shape.p}px ${shape.f}`
-      context.strokeText(shape.t, shape.x, shape.y)
+      context.strokeText(`${shape.t}`, shape.x, shape.y)
     } else if (isSvg(shape)) {
       context.lineWidth = width
       context.save()
@@ -59,7 +59,7 @@ function Surface (ronin) {
     if (isText(shape)) {
       context.textAlign = shape.a
       context.font = `${shape.p}px ${shape.f}`
-      context.fillText(shape.t, shape.x, shape.y)
+      context.fillText(`${shape.t}`, shape.x, shape.y)
     } else if (isSvg(shape)) {
       context.save()
       context.translate(shape.x, shape.y)

examples/basics/basics.lisp

@@ -1,13 +0,0 @@
-; basics
-
-; define a variable 
-(def a 25) 
-(echo a) 
-
-; define a function 
-(defn add-two (a) (add 2 a)) 
-(echo (add-two 4))
-
-; use a lambda
-(times 5 
-  (λ (a) (echo (concat "time:" a))))

examples/basics/shapes.lisp

@@ -1,26 +1,35 @@
-; Shapes
 
 (clear)
-
+; stroke rect
-; variables
-(def center-w (div frame-rect:w 2))
-(def center-h (div frame-rect:h 2))
-(def rad (div frame-rect:h 4))
-
-; draw circle
 (stroke 
-  (circle center-w center-h rad) "white" 2)
+  (rect 0 0 300 300) "red")
-
-; draw rect
 (stroke 
-  (rect 
+  (circle 150 150 150) "white")
-    (sub center-w rad) (sub center-h rad) center-h center-h) "white" 2)
-
-; draw line
 (stroke 
-  (line (sub center-w rad) center-h (add center-w rad) center-h))
+  (ellipse 150 150 75 150) "red")
-(stroke (text 10 170 200 "HELL") "pink" 2)
-
-; draw ellipse
 (stroke 
-  (ellipse center-w center-h rad (div rad 2)) "white" 2)
+  (line 0 150 300 150) "red")
+(stroke 
+  (text 600 300 60 "hell") "white")
+(stroke 
+  (poly 
+    (pos 300 300) 
+    (pos 600 0) 
+    (pos 600 300)) "red")
+(move 0 300)
+(fill 
+  (rect 0 0 300 300) "red")
+(fill 
+  (circle 150 150 150) "white")
+(fill 
+  (ellipse 150 150 75 150) "red")
+(fill 
+  (line 0 150 300 150) "red")
+(fill 
+  (text 600 300 60 "hell") "white")
+(fill 
+  (poly 
+    (pos 300 300) 
+    (pos 600 0) 
+    (pos 600 300)) "red")
+(resetTransform)