Good progress on rendering and learned a good bit about web_sys, next step implement tick to reach attractors
This commit is contained in:
Jean-Gabriel Gill-Couture
parent
111285f32d
commit
02b1331f72
@ -33,6 +33,7 @@ features = [
|
||||
'Element',
|
||||
'HtmlCanvasElement',
|
||||
'Window',
|
||||
'Performance',
|
||||
]
|
||||
|
||||
[features]
|
||||
|
||||
@ -25,7 +25,7 @@ pub fn App(cx: Scope) -> impl IntoView {
|
||||
// content for this welcome page
|
||||
<Router>
|
||||
<main class="text-white bg-indigo-950 min-h-screen relative">
|
||||
<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 relative z-50 bg-opacity-90 bg-indigo-950">
|
||||
<nav class="py-4 flex space-x-4">
|
||||
<a href="/">"Home"</a>
|
||||
<a href="/blog">"Blog"</a>
|
||||
@ -37,7 +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"/>
|
||||
<Background class="fixed h-screen w-screen top-0 z-0"/>
|
||||
</main>
|
||||
</Router>
|
||||
}
|
||||
|
||||
@ -1,9 +1,10 @@
|
||||
use leptos::html::Canvas;
|
||||
use leptos::*;
|
||||
use std::f64;
|
||||
use wasm_bindgen::JsCast;
|
||||
use wasm_bindgen::JsValue;
|
||||
use web_sys::window;
|
||||
|
||||
use crate::space_colonization::Node;
|
||||
use crate::space_colonization::SpaceColonization;
|
||||
|
||||
#[component]
|
||||
@ -33,45 +34,36 @@ pub fn Background(cx: Scope, class: &'static str) -> impl IntoView {
|
||||
.unchecked_into::<web_sys::CanvasRenderingContext2d>();
|
||||
log!("context = {:#?}", context);
|
||||
context.set_stroke_style(&JsValue::from("white"));
|
||||
context.set_fill_style(&JsValue::from("white"));
|
||||
context.begin_path();
|
||||
|
||||
// Draw the outer circle.
|
||||
context
|
||||
.arc(75.0, 75.0, 50.0, 0.0, f64::consts::PI * 2.0)
|
||||
.unwrap();
|
||||
|
||||
// Draw the mouth.
|
||||
context.move_to(110.0, 75.0);
|
||||
context.arc(75.0, 75.0, 35.0, 0.0, f64::consts::PI).unwrap();
|
||||
|
||||
// Draw the left eye.
|
||||
context.move_to(65.0, 65.0);
|
||||
context
|
||||
.arc(60.0, 65.0, 5.0, 0.0, f64::consts::PI * 2.0)
|
||||
.unwrap();
|
||||
|
||||
// Draw the right eye.
|
||||
context.move_to(95.0, 65.0);
|
||||
context
|
||||
.arc(90.0, 65.0, 5.0, 0.0, f64::consts::PI * 2.0)
|
||||
.unwrap();
|
||||
|
||||
log!("before stroke");
|
||||
context.stroke();
|
||||
|
||||
context.set_fill_style(&JsValue::from("yellow"));
|
||||
log!("About to render nodes");
|
||||
let start_time = window().unwrap().performance().unwrap().now();
|
||||
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.begin_path();
|
||||
let render_id = window().unwrap().performance().unwrap().now();
|
||||
for n in sc.nodes.iter() {
|
||||
n.render(render_id, |n: &Node, child: &Node| {
|
||||
context.move_to(n.position.x.into(), n.position.y.into());
|
||||
context.line_to(child.position.x.into(), child.position.y.into());
|
||||
});
|
||||
}
|
||||
|
||||
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);
|
||||
}
|
||||
let end_time = window().unwrap().performance().unwrap().now();
|
||||
log!(
|
||||
"Rendering {} nodes and {} attractors took {}",
|
||||
sc.nodes.len(),
|
||||
sc.attractors.len(),
|
||||
end_time - start_time
|
||||
);
|
||||
|
||||
sc.tick();
|
||||
});
|
||||
|
||||
let class = format!("canvas {}", class);
|
||||
@ -81,27 +73,3 @@ pub fn Background(cx: Scope, class: &'static str) -> impl IntoView {
|
||||
</div>
|
||||
}
|
||||
}
|
||||
|
||||
// #[component]
|
||||
// fn ComponentA(cx: Scope) -> impl IntoView {
|
||||
// let canvas = NodeRef::<HtmlElement<Canvas>>::new(cx);
|
||||
// let on_click = move |_| {
|
||||
// // checks to see if node has been rendered
|
||||
// let context = canvas.get()
|
||||
// // if you're able to click the button, canvas should already be there
|
||||
// .expect("canvas to have been mounted")
|
||||
// // here's the getContext() call
|
||||
// .get_context("2d")
|
||||
// // it returns Result<Option<Object>, ...>
|
||||
// // so we massage the types a little
|
||||
// .ok()
|
||||
// .flatten()
|
||||
// .expect("canvas to have context")
|
||||
// .unchecked_into::<web_sys::CanvasRenderingContext2d>();
|
||||
// leptos::log!("context = {:#?}", context);
|
||||
// };
|
||||
// view! { cx,
|
||||
// <button on:click=on_click>"Click me"</button>
|
||||
// <canvas node_ref=canvas></canvas>
|
||||
// }
|
||||
// }
|
||||
|
||||
@ -6,7 +6,6 @@ use leptos_meta::*;
|
||||
pub fn HomePage(cx: Scope) -> impl IntoView {
|
||||
view! { cx,
|
||||
<Title text="NationTech - Unconventional team for extraordinary challenges"/>
|
||||
<div class="text-white bg-indigo-950">
|
||||
<div class="flex space-y-4 flex-col max-w-3xl container mx-auto">
|
||||
<h1 class="text-6xl text-orange-400 font-extrabold pt-8">"NationTech"</h1>
|
||||
<h2 class="text-3xl">"Unconventional team for extraordinary challenges"</h2>
|
||||
@ -16,6 +15,5 @@ pub fn HomePage(cx: Scope) -> impl IntoView {
|
||||
<p class="text-lg">"We don't cheap out, we always give our all, we always try to balance all the factors to find the best possible solution to any situation."</p>
|
||||
<p class="text-lg">"The status quo does not exist, we always improve, automate, look for exponential gains across the stack."</p>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
}
|
||||
|
||||
@ -104,7 +104,7 @@ pub fn WhyMicroDatacenters(cx: Scope) -> impl IntoView {
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-col bg-indigo-950">
|
||||
<div class="flex flex-col">
|
||||
<div class="p-8 w-fit h-fit mr-72 ml-72">
|
||||
<div class="w-fit pt-4 pb-4 border-r-8 border-indigo-500 pr-2">
|
||||
<div class="flex-col">
|
||||
@ -259,7 +259,7 @@ pub fn WhyMicroDatacenters(cx: Scope) -> impl IntoView {
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-indigo-950 h-fit p-4">
|
||||
<div class="h-fit p-4">
|
||||
<div class="flex flex-col justify-center pt-4 pb-4 pl-2 mb-12 mt-16 mr-72 ml-72 border-r-8 border-blue-400">
|
||||
<p class="text-right p-4 text-white">
|
||||
"La consommation annuelle d’eau des centres de données est passée de 738.2 millions de litres en 2015 à près de 840 milliards de litres en 2021 (Holger, 2022), soit une augmentation de plus de 113 690% en 6 ans. Google révélait avoir utilisé à elle seule 16.28 milliards de litres d’eau en 2021 afin de refroidir et humidifier ses centres de données (Our Commitment to Climate-Conscious Data Center Cooling, 2022), ce qui équivaut à environ 6 400 piscines olympiques. Ces données sont préoccupantes, d’autant plus que la majorité de l’eau utilisée provient de sources potables."
|
||||
@ -359,7 +359,7 @@ pub fn WhyMicroDatacenters(cx: Scope) -> impl IntoView {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col justify-center bg-indigo-950 p-8">
|
||||
<div class="flex flex-col justify-center p-8">
|
||||
<div class="mx-auto h-fit w-full border-t-4 border-b-4 border-orange-400 p-8">
|
||||
<SectionTitle dark=true>
|
||||
"Impact social négatif"
|
||||
@ -499,7 +499,7 @@ d=IwAR3wuxdHW8VE30FMaqZ6Iuj9Cs86bRSvmij1e_zDjM6Bwo4l71n5EKcLxqY"
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex-col bg-indigo-950 p-8">
|
||||
<div class="flex-col p-8">
|
||||
<div class="mx-auto h-fit w-full border-t-4 border-b-4 border-orange-400 p-4">
|
||||
<SectionTitle dark=true>
|
||||
"Energy reuse factor (ERF)"
|
||||
@ -539,7 +539,7 @@ d=IwAR3wuxdHW8VE30FMaqZ6Iuj9Cs86bRSvmij1e_zDjM6Bwo4l71n5EKcLxqY"
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex-col bg-indigo-950 p-8">
|
||||
<div class="flex-col p-8">
|
||||
<div class="mx-auto h-fit w-full border-t-4 border-b-4 border-orange-400 p-4">
|
||||
<SectionTitle dark=true>
|
||||
"Global power usage effectiveness (GPUE)"
|
||||
@ -573,7 +573,7 @@ d=IwAR3wuxdHW8VE30FMaqZ6Iuj9Cs86bRSvmij1e_zDjM6Bwo4l71n5EKcLxqY"
|
||||
|
||||
<div class="flex flex-col">
|
||||
<div class="flex flex-row">
|
||||
<div class="flex w-1/2 justify-center items-center bg-indigo-950 p-8">
|
||||
<div class="flex w-1/2 justify-center items-center p-8">
|
||||
<img src="/img/Facebook-logo.jpg" class="mx-auto mt-8 mb-8 rounded-lg w-1/2"/>
|
||||
</div>
|
||||
<div class="flex justify-center center w-1/2 bg-zinc-200">
|
||||
@ -585,7 +585,7 @@ d=IwAR3wuxdHW8VE30FMaqZ6Iuj9Cs86bRSvmij1e_zDjM6Bwo4l71n5EKcLxqY"
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-row">
|
||||
<div class="flex w-1/2 justify-center items-center bg-indigo-950 p-8">
|
||||
<div class="flex w-1/2 justify-center items-center p-8">
|
||||
<img src="/img/Microsoft-logo.jpg" class="h-[231.23px] mx-auto mt-8 mb-8 rounded-lg w-1/2"/>
|
||||
</div>
|
||||
<div class="flex justify-center center w-1/2 bg-zinc-200">
|
||||
@ -597,7 +597,7 @@ d=IwAR3wuxdHW8VE30FMaqZ6Iuj9Cs86bRSvmij1e_zDjM6Bwo4l71n5EKcLxqY"
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-row">
|
||||
<div class="flex w-1/2 justify-center items-center bg-indigo-950 p-8">
|
||||
<div class="flex w-1/2 justify-center items-center p-8">
|
||||
<div class="flex h-[231.23px] w-[368px] bg-white rounded-lg">
|
||||
<img src="/img/Vantage-logo.png" class="mx-auto mt-8 mb-8 h-3/4 w-3/4"/>
|
||||
</div>
|
||||
@ -611,7 +611,7 @@ d=IwAR3wuxdHW8VE30FMaqZ6Iuj9Cs86bRSvmij1e_zDjM6Bwo4l71n5EKcLxqY"
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-row">
|
||||
<div class="flex w-1/2 justify-center items-center bg-indigo-950 p-8">
|
||||
<div class="flex w-1/2 justify-center items-center p-8">
|
||||
<img src="/img/Equinix-logo.jpg" class="h-[231.23px] mx-auto mt-8 mb-8 rounded-lg w-1/2"/>
|
||||
</div>
|
||||
<div class="flex justify-center center w-1/2 bg-zinc-200">
|
||||
@ -623,7 +623,7 @@ d=IwAR3wuxdHW8VE30FMaqZ6Iuj9Cs86bRSvmij1e_zDjM6Bwo4l71n5EKcLxqY"
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-row">
|
||||
<div class="flex w-1/2 justify-center items-center bg-indigo-950 p-8">
|
||||
<div class="flex w-1/2 justify-center items-center p-8">
|
||||
<img src="/img/Amazon-logo.jpg" class="h-[231.23px] mx-auto mt-8 mb-8 rounded-lg w-1/2"/>
|
||||
</div>
|
||||
<div class="flex justify-center center w-1/2 bg-zinc-200">
|
||||
@ -686,7 +686,7 @@ d=IwAR3wuxdHW8VE30FMaqZ6Iuj9Cs86bRSvmij1e_zDjM6Bwo4l71n5EKcLxqY"
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col p-8 bg-indigo-950">
|
||||
<div class="flex flex-col p-8 ">
|
||||
<div class="pt-16 w-full">
|
||||
<div class="h-fit w-full border-t-4 border-b-4 border-orange-400 p-8">
|
||||
<SectionTitle dark=true>
|
||||
@ -695,7 +695,7 @@ d=IwAR3wuxdHW8VE30FMaqZ6Iuj9Cs86bRSvmij1e_zDjM6Bwo4l71n5EKcLxqY"
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-indigo-950 h-fit p-4">
|
||||
<div class="h-fit p-4">
|
||||
<div class="flex flex-col justify-center pt-4 pb-4 pl-2 mb-12 mt-4 mr-72 ml-72 border-r-8 border-blue-400">
|
||||
<p class="text-right p-4 text-white">
|
||||
"Comme l’illustre le schéma ci-contre décrivant le fonctionnement des MCD de NationTech, l’installation de l'infrastructure informatique ne requiert aucune déforestation ou utilisation supplémentaire de territoire. En effet, les MCD de NationTech sont intégrés aux immeubles déjà existants, contrairement aux grandes entreprises technologiques qui acquièrent d’énormes terrains afin de construire les gigantesques usines qui serviront à héberger leurs serveurs. De plus, NationTech peut aussi bien intégrer ses MCD à l’intérieur qu’à l’extérieur des immeubles bénéficiant de la récupération de l’énergie thermique, ce qui rend cette technologie facile à intégrer n’importe où, peu importe le type d’immeuble visé."
|
||||
|
||||
@ -89,7 +89,7 @@ pub fn WhyMicroDatacenters(cx: Scope) -> impl IntoView {
|
||||
</SectionTitle>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-col bg-indigo-950">
|
||||
<div class="flex flex-col">
|
||||
<div class="p-8 w-fit h-fit mr-72 ml-72">
|
||||
<div class="w-fit pt-4 pb-4 border-r-8 border-indigo-500 pr-2">
|
||||
<div class="flex-col">
|
||||
|
||||
@ -1,5 +1,15 @@
|
||||
use leptos::*;
|
||||
use rand::thread_rng;
|
||||
use rand::Rng;
|
||||
use wasm_bindgen::prelude::*;
|
||||
use web_sys::console;
|
||||
use web_sys::window;
|
||||
|
||||
#[wasm_bindgen]
|
||||
extern "C" {
|
||||
#[wasm_bindgen(js_namespace = window)]
|
||||
fn performance() -> web_sys::Performance;
|
||||
}
|
||||
|
||||
#[derive(Debug)]
|
||||
pub struct Point {
|
||||
@ -13,6 +23,19 @@ pub struct Attractor {
|
||||
|
||||
pub struct Node {
|
||||
pub position: Point,
|
||||
pub children: Vec<Node>,
|
||||
}
|
||||
|
||||
impl Node {
|
||||
pub fn render<F>(&self, render_id: f64, render_fn: F) where F: Copy + Fn(&Node, &Node) {
|
||||
for child in self.children.iter() {
|
||||
render_fn(self, child);
|
||||
}
|
||||
|
||||
for child in self.children.iter() {
|
||||
child.render(render_id, render_fn);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
pub struct SpaceColonization {
|
||||
@ -29,6 +52,7 @@ impl SpaceColonization {
|
||||
let mut nodes = Vec::new();
|
||||
nodes.push(Node {
|
||||
position: Point { x: 100, y: 100 },
|
||||
children: Vec::new(),
|
||||
});
|
||||
let attractors = Vec::new();
|
||||
|
||||
@ -50,6 +74,8 @@ impl SpaceColonization {
|
||||
}
|
||||
|
||||
fn place_attractors(&mut self) {
|
||||
let start_time = window().unwrap().performance().unwrap().now();
|
||||
console::log_1(&format!("Start placing attractors {}", start_time).into());
|
||||
let mut x_pos = 0;
|
||||
let mut y_pos = 0;
|
||||
while x_pos < self.max_point.x {
|
||||
@ -62,6 +88,9 @@ impl SpaceColonization {
|
||||
x_pos += self.density;
|
||||
y_pos = 0;
|
||||
}
|
||||
let end_time = window().unwrap().performance().unwrap().now();
|
||||
let elapsed = end_time - start_time;
|
||||
console::log_1(&format!("Done placing attractors , took : {}", elapsed).into());
|
||||
}
|
||||
|
||||
fn get_random_point(&self, x_pos: i32, y_pos: i32) -> Point {
|
||||
@ -87,4 +116,8 @@ impl SpaceColonization {
|
||||
.unwrap(),
|
||||
}
|
||||
}
|
||||
|
||||
pub fn tick(&self) {
|
||||
todo!();
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user