add timer

index.html

@@ -20,7 +20,7 @@
             transform: translate(-50%, -50%);
         }
     </style>
-	<canvas id="circle_canvas" height="150" width="150"></canvas>
+	<canvas id="circle_canvas" height="800" width="800"></canvas>
   </body>
 </html>
 

src/lib.rs

@@ -1,4 +1,7 @@
 use wasm_bindgen::prelude::*;
+use std::cell::RefCell;
+use std::rc::Rc;
+use js_sys::Date;
 use wasm_bindgen::JsCast;
 
 mod drawing;
@@ -8,6 +11,15 @@ mod circle;
 use shapes::*;
 use circle::CircleShapes;
 
+fn request_animation_frame(f: &Closure<dyn FnMut()>) {
+    web_sys::window()
+        .unwrap()
+        .request_animation_frame(
+            f.as_ref()
+            .unchecked_ref()
+        ).unwrap();
+}
+
 #[wasm_bindgen(start)]
 pub fn start() {
     let canvas_id = "circle_canvas";
@@ -25,11 +37,36 @@ pub fn start() {
         .dyn_into::<web_sys::CanvasRenderingContext2d>()
         .unwrap();
 
-    context.begin_path();
-  
-    let iter = CircleShapes::new(100, 13, Circle {center: Point {x: 75.0, y: 75.0}, radius: 70.0});
-    for shape in iter {
-        drawing::draw_shape(shape, &context);
-    }
-    context.stroke();
+
+    let f = Rc::new(RefCell::new(None));
+    let g = f.clone();
+
+    let mut timestamp: Option<f64> = None;
+    let mut factor = 2;
+    let mut modulo = 10;
+
+    *g.borrow_mut() = Some(Closure::wrap(Box::new(move || {
+        match timestamp {
+            Some(date) if (Date::now() - date) < 250. => (),
+            _ => {
+                timestamp = Some(Date::now());
+                context.begin_path();  
+                let iter = CircleShapes::new(modulo, factor, Circle {center: Point {x: 400.0, y: 400.0}, radius: 400.0});
+                for shape in iter {
+                    drawing::draw_shape(shape, &context);
+                }
+                context.stroke();
+        
+                factor += 1;
+                if factor == modulo {
+                    factor = 2;
+                    modulo += 1;
+                }
+            }
+        }
+
+        request_animation_frame(f.borrow().as_ref().unwrap());
+    }) as Box<dyn FnMut()>));
+
+    request_animation_frame(g.borrow().as_ref().unwrap());
 }