Redoing the animation example

desktop/sources/links/main.css

@@ -14,4 +14,4 @@ body { margin:0px; padding:0px; overflow:hidden; font-family:"input_mono_regular
 #ronin canvas#guide { background:none; }
 #ronin canvas#surface { border-radius: 2px }
 
-#ronin.hidden canvas#surface, #ronin.hidden canvas#guide { left:10px; }
+#ronin.hidden canvas#surface, #ronin.hidden canvas#guide { left:0px; }

desktop/sources/lisp/prelude.lisp

@@ -18,3 +18,17 @@
       (gt v 1) 
       (times 
         (sub v 1) f))))
+; convert deg to radians
+(defn deg-rad 
+  (deg) 
+  (mul deg 
+    (div PI 180)))
+; position on a circle from angle
+(defn circle-pos 
+  (cx cy r a) {:x 
+  (add cx 
+    (mul r 
+      (cos a))) :y 
+  (add cy 
+    (mul r 
+      (sin a)))})

desktop/sources/scripts/surface.js

@@ -185,7 +185,7 @@ function Surface (ronin) {
   }
 
   this.maximize = function () {
-    this.resize({ x: 0, y: 0, w: (window.innerWidth * this.ratio) - 60, h: (window.innerHeight * this.ratio) - 60, t: 'rect' })
+    this.resize({ x: 0, y: 0, w: ((window.innerWidth - 60) * this.ratio), h: ((window.innerHeight - 60) * this.ratio), t: 'rect' })
   }
 
   this.onResize = function () {

examples/animate.lisp

@@ -1,17 +1,34 @@
-; animate
-
+;
 (clear)
-(def t 
-  (sin 
+;
+(def seg-count 20)
+; 
+(def center 
   (div 
-      (time) 100))) 
-(def pos 
-  (add 200 30 
-    (mul 30 t))) 
-(defn square 
-  (a) 
-  (rect a a a a)) 
+    (of 
+      (frame) :h) 2)) 
+; 
+(def seg-width 
+  (div 
+    (of 
+      (frame) :w) count)) 
+;
+(defn draw-dash 
+  (i) 
+  (
+    (def x 
+      (mul 
+        (sub i 1) seg-width)) 
+    (def y 
+      (add 
+        (mul 
+          (sin 
+            (add 
+              (time 0.01) i)) 15) center)) 
     (stroke 
-  (square pos) 1 "red") 
-; set false to stop 
-(animate true)
+      (line 
+        (pos x y) 
+        (pos 
+          (add x seg-width) y)) 4 "red")))
+;
+(times seg-count draw-dash)

examples/stars.lisp

@@ -1,20 +1,6 @@
 ; stars
 (clear)
 ;
-(defn deg-rad 
-  (deg) 
-  (mul deg 
-    (div PI 180)))
-; 
-(defn circle-pos 
-  (cx cy r a) {:x 
-  (add cx 
-    (mul r 
-      (cos a))) :y 
-  (add cy 
-    (mul r 
-      (sin a)))})
-;
 (defn draw-spoke 
   (cx cy r a) 
   (