Working on canvas, now having little squares wherever I want, next up is figuring out how to resize the canvas to the window size

src/app.rs

@@ -24,9 +24,8 @@ pub fn App(cx: Scope) -> impl IntoView {
 
         // content for this welcome page
         <Router>
-            <main class="text-white bg-indigo-950 min-h-screen ">
+            <main class="text-white bg-indigo-950 min-h-screen relative">
-            <Background />
+                <div class="max-w-3xl container mx-auto p-4 md:p-0 md:pb-14 relative z-50">
-                <div class="max-w-3xl container mx-auto p-4 md:p-0 md:pb-14">
                     <nav class="py-4 flex space-x-4">
                         <a href="/">"Home"</a>
                         <a href="/blog">"Blog"</a>
@@ -38,6 +37,7 @@ pub fn App(cx: Scope) -> impl IntoView {
                         <Route path="/blog" view=|cx| view! { cx, <Blog/> }/>
                     </Routes>
                 </div>
+                <Background class="absolute h-screen w-screen top-0 z-0"/>
             </main>
         </Router>
     }

src/components/background.rs

@@ -1,11 +1,13 @@
-use std::f64;
 use leptos::html::Canvas;
 use leptos::*;
+use std::f64;
 use wasm_bindgen::JsCast;
 use wasm_bindgen::JsValue;
 
+use crate::space_colonization::SpaceColonization;
+
 #[component]
-pub fn Background(cx: Scope) -> impl IntoView {
+pub fn Background(cx: Scope, class: &'static str) -> impl IntoView {
     let canvas = create_node_ref::<Canvas>(cx);
 
     canvas.on_load(cx, move |_| {
@@ -44,10 +46,31 @@ pub fn Background(cx: Scope) -> impl IntoView {
             .arc(90.0, 65.0, 5.0, 0.0, f64::consts::PI * 2.0)
             .unwrap();
 
+        log!("before stroke");
         context.stroke();
+
+        let sc = SpaceColonization::new();
+        context.set_fill_style(&JsValue::from("yellow"));
+        log!("About to render nodes");
+        for n in sc.nodes.iter() {
+            context.fill_rect(n.position.x.into(), n.position.y.into(), 5.0, 5.0);
+            log!("filled node at position = {:#?}", n.position);
+        }
+
+        context.set_fill_style(&JsValue::from("magenta"));
+        for a in sc.attractors.iter() {
+            context.fill_rect(a.position.x.into(), a.position.y.into(), 5.0, 5.0);
+            log!("filled node at position = {:#?}", a.position);
+        }
+        context.fill_rect(100.0, 100.0, 5.0, 5.0);
+        context.fill_rect(200.0, 200.0, 5.0, 5.0);
+        context.fill_rect(300.0, 300.0, 5.0, 5.0);
+        context.fill_rect(400.0, 400.0, 5.0, 5.0);
+        context.fill_rect(500.0, 500.0, 5.0, 5.0);
     });
+    let class = format!("canvas {}", class);
     view! { cx,
-        <div class="canvas fixed h-screen w-screen">
+        <div class={class}>
             <canvas node_ref=canvas></canvas>
         </div>
     }

src/lib.rs

@@ -1,3 +1,4 @@
+mod space_colonization;
 pub mod app;
 mod components;
 mod routes;

src/space_colonization/mod.rs

@@ -0,0 +1,46 @@
+#[derive(Debug)]
+pub struct Point {
+    pub x: u16,
+    pub y: u16,
+}
+
+pub struct Attractor {
+    pub position: Point,
+}
+
+pub struct Node {
+    pub position: Point,
+}
+
+pub struct SpaceColonization {
+    max_point: Point,
+    kill_distance: u16,
+    attraction_force: u16,
+    density: u16,
+    pub nodes: Vec<Node>,
+    pub attractors: Vec<Attractor>,
+}
+
+impl SpaceColonization {
+    pub fn new() -> SpaceColonization {
+        let mut nodes = Vec::new();
+        nodes.push(Node { position: Point  { x: 100, y: 100 } });
+        let mut attractors = Vec::new();
+        attractors.push(Attractor { position: Point  { x: 10, y: 10 } });
+        attractors.push(Attractor { position: Point  { x: 20, y: 20 } });
+        attractors.push(Attractor { position: Point  { x: 30, y: 30 } });
+        attractors.push(Attractor { position: Point  { x: 40, y: 40 } });
+        attractors.push(Attractor { position: Point  { x: 50, y: 50 } });
+        attractors.push(Attractor { position: Point  { x: 60, y: 60 } });
+        attractors.push(Attractor { position: Point  { x: 70, y: 70 } });
+
+        SpaceColonization {
+            max_point: Point { x: 500, y: 500 },
+            kill_distance: 10,
+            attraction_force: 15,
+            density: 10,
+            nodes,
+            attractors,
+        }
+    }
+}