add bevy animation but still not in right spot

This commit is contained in:
Liam Fitzpatrick 2025-01-05 08:57:27 -05:00
parent 87ad2ef372
commit 5fbd2d8956
9 changed files with 2376 additions and 2 deletions

View File

@ -0,0 +1,7 @@
import init from '/out/bevyanim.js'
init().catch((error) => {
if (!error.message.startsWith("Using exceptions for control flow, don't mind me. This isn't actually an error!")) {
throw error;
}
});

View File

@ -0,0 +1 @@
(spawn_rate:0.01,spawn_amount:22,emission_shape:Circle(0.0),lifetime:(12.0,0.0),linear_speed:Some((400.0,0.46)),linear_acceleration:Some((0.0,0.0)),direction:Some(((0.0,0.0),1.0)),angular_speed:Some((0.0,0.18)),angular_acceleration:Some((0.0,0.3)),scale:Some((5.0,1.0)),color:None,gravity_direction:None,gravity_speed:None,linear_damp:Some((0.0,0.0)),angular_damp:Some((0.0,0.25)),scale_curve:None,color_curve:Some((points:[((red:0.012286487,green:0.046665076,blue:0.10946172,alpha:1.0),0.1,None),((red:0.9646863,green:0.1651323,blue:0.004391431,alpha:1.0),0.12,None)])))

File diff suppressed because it is too large Load Diff

Binary file not shown.

View File

@ -0,0 +1,17 @@
<!doctype html>
<html lang="en">
<body style="margin: 0px;">
<canvas id="bevy-canvas1" width="100vw" height="100vh"></canvas>
<script type="module">
import init from './bevyanim.js'
init().catch((error) => {
if (!error.message.startsWith("Using exceptions for control flow, don't mind me. This isn't actually an error!")) {
throw error;
}
});
</script>
</body>
</html>

View File

@ -0,0 +1 @@
(spawn_rate:0.01,spawn_amount:22,emission_shape:Circle(0.0),lifetime:(12.0,0.0),linear_speed:Some((400.0,0.46)),linear_acceleration:Some((0.0,0.0)),direction:Some(((0.0,0.0),1.0)),angular_speed:Some((0.0,0.18)),angular_acceleration:Some((0.0,0.3)),scale:Some((5.0,1.0)),color:None,gravity_direction:None,gravity_speed:None,linear_damp:Some((0.0,0.0)),angular_damp:Some((0.0,0.25)),scale_curve:None,color_curve:Some((points:[((red:0.012286487,green:0.046665076,blue:0.10946172,alpha:1.0),0.1,None),((red:0.9646863,green:0.1651323,blue:0.004391431,alpha:1.0),0.12,None)])))

View File

@ -43,6 +43,17 @@ function drawConnections() {
} }
} }
function moveBevy() {
const canvas_el = document.getElementById("bevy-canvas1");
const content_el = document.getElementById("hero");
const content_box = content_el.getBoundingClientRect();
canvas_el.setAttribute("width", content_box.width);
canvas_el.setAttribute("height", content_box.height);
canvas_el.setAttribute("top", content_box.top);
canvas_el.setAttribute("left", content_box.left);
}
window.addEventListener("scroll", (event) => { window.addEventListener("scroll", (event) => {
drawConnections(); drawConnections();
moveBevy();
}); });

View File

@ -9,3 +9,10 @@ body{
left: 0; left: 0;
z-index: -1; z-index: -1;
} }
#bevy-canvas1{
position:fixed;
top: 0;
left: 0;
z-index: -1;
}

View File

@ -57,8 +57,10 @@ pub fn App() -> impl IntoView {
#[component] #[component]
fn HomePage() -> impl IntoView { fn HomePage() -> impl IntoView {
view! { view! {
<canvas id="p-e-canvas"></canvas> <script type="module" src="/load_bevy_anim.js">
<div class="md:flex md:flex-row min-h-screen md:justify-center md:items-center"> </script>
<canvas id="bevy-canvas1" width="100vw"></canvas>
<div id="hero" class="md:flex md:flex-row min-h-screen md:justify-center md:items-center">
<img class="max-w-lg rounded hidden md:block" src="/founder_portrait.jpg" /> <img class="max-w-lg rounded hidden md:block" src="/founder_portrait.jpg" />
<div class="flex flex-col m-4 p-2 items-start max-w-lg"> <div class="flex flex-col m-4 p-2 items-start max-w-lg">
<ul class="flex flex-row justify-around w-full"> <ul class="flex flex-row justify-around w-full">
@ -73,6 +75,8 @@ fn HomePage() -> impl IntoView {
</div> </div>
</div> </div>
<canvas id="p-e-canvas"></canvas>
<div id="p-e-content" class="min-h-screen"> <div id="p-e-content" class="min-h-screen">
<H1>"Professional Experience"</H1> <H1>"Professional Experience"</H1>