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) => {
drawConnections();
moveBevy();
});

View File

@ -8,4 +8,11 @@ body{
top: 0;
left: 0;
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]
fn HomePage() -> impl IntoView {
view! {
<canvas id="p-e-canvas"></canvas>
<div class="md:flex md:flex-row min-h-screen md:justify-center md:items-center">
<script type="module" src="/load_bevy_anim.js">
</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" />
<div class="flex flex-col m-4 p-2 items-start max-w-lg">
<ul class="flex flex-row justify-around w-full">
@ -72,6 +74,8 @@ fn HomePage() -> impl IntoView {
projects outlined on this website. If you want to hire me or ask questions about my projects reach out to me "<a class="underline" href="mailto:liam.fitzpatrick@live.com">here</a>.</P>
</div>
</div>
<canvas id="p-e-canvas"></canvas>
<div id="p-e-content" class="min-h-screen">