Commit fbdb2636 authored by Rahix's avatar Rahix 🦀
Browse files

components: Add some orbital movement to the nodes

Just playing around with the ECS, make the nodes orbit around "The Sun".
parent 6e6d98aa
mod edge;
mod movable;
mod node;
mod position;
mod thesun;
pub use edge::Edge;
pub use movable::{Gravity, Movable};
pub use node::Node;
pub use position::Position;
pub use thesun::TheSun;
pub use edge::draw_edges_system;
pub use movable::{update_gravity_system, update_movement_system};
pub use node::draw_nodes_system;
pub use thesun::draw_thesun_system;
use crate::components;
pub struct Movable {
velocity: nalgebra::Vector2<f32>,
acceleration: nalgebra::Vector2<f32>,
}
impl Movable {
pub fn new(vel_x: f32, vel_y: f32) -> Movable {
Movable {
velocity: nalgebra::Vector2::new(vel_x, vel_y),
acceleration: nalgebra::Vector2::new(0.0, 0.0),
}
}
}
#[legion::system(for_each)]
pub fn update_movement(pos: &mut components::Position, mov: &mut Movable) {
let delta = 0.3;
mov.velocity += mov.acceleration * delta;
pos.0 += mov.velocity * delta;
}
pub struct Gravity;
#[legion::system(for_each)]
pub fn update_gravity(_: &Gravity, mov: &mut Movable, pos: &components::Position) {
let sun = nalgebra::Point2::new(600.0, 400.0);
let distance_vector = sun - pos.0;
let gravity = 60000.0 / distance_vector.magnitude_squared();
mov.acceleration = distance_vector.normalize() * gravity;
}
use crate::components;
use crate::resources;
pub struct TheSun;
#[legion::system(for_each)]
pub fn draw_thesun(
_: &TheSun,
pos: &components::Position,
#[resource] ctx: &mut web_sys::CanvasRenderingContext2d,
#[resource] clock: &resources::Clock,
) {
ctx.begin_path();
ctx.set_fill_style(&"#b239ff".into());
ctx.arc(
pos.0.x as f64,
pos.0.y as f64,
30.0,
0.0,
std::f64::consts::TAU,
)
.unwrap();
ctx.fill();
let now = clock.wall_time();
ctx.set_line_width(10.0);
ctx.begin_path();
ctx.set_stroke_style(&"#67029f".into());
ctx.arc(
pos.0.x as f64,
pos.0.y as f64,
40.0,
0.0 + now,
0.4 * std::f64::consts::TAU + now,
)
.unwrap();
ctx.stroke();
ctx.begin_path();
ctx.set_stroke_style(&"#440069".into());
ctx.arc(
pos.0.x as f64,
pos.0.y as f64,
55.0,
4.0 - now,
4.0 + 0.66 * std::f64::consts::TAU - now,
)
.unwrap();
ctx.stroke();
}
......@@ -28,29 +28,43 @@ pub fn start() {
resources.insert(resources::Clock::new());
let mut schedule = legion::Schedule::builder()
.add_system(components::update_gravity_system())
.add_system(components::update_movement_system())
.flush()
.add_thread_local(components::draw_edges_system())
.add_thread_local(components::draw_nodes_system())
.add_thread_local(components::draw_thesun_system())
.build();
let n0 = world.push((
components::Node::new(),
components::Position::new(100.0, 100.0),
components::Position::new(800.0, 200.0),
components::Movable::new(5.0, 10.0),
components::Gravity,
));
let n1 = world.push((
components::Node::new(),
components::Position::new(120.0, 160.0),
components::Movable::new(5.0, -5.0),
components::Gravity,
));
let n2 = world.push((
components::Node::new(),
components::Position::new(180.0, 130.0),
components::Position::new(700.0, 600.0),
components::Movable::new(8.0, -4.0),
components::Gravity,
));
let n3 = world.push((
components::Node::new(),
components::Position::new(340.0, 150.0),
components::Movable::new(10.0, 0.0),
components::Gravity,
));
let n4 = world.push((
components::Node::new(),
components::Position::new(300.0, 260.0),
components::Movable::new(0.0, 10.0),
components::Gravity,
));
world.push((components::Edge::new(n0, n1),));
......@@ -58,6 +72,9 @@ pub fn start() {
world.push((components::Edge::new(n0, n2),));
world.push((components::Edge::new(n2, n3),));
world.push((components::Edge::new(n3, n4),));
world.push((components::Edge::new(n0, n4),));
world.push((components::TheSun, components::Position::new(600.0, 400.0)));
utils::request_animation_frame(move || {
{
......
......@@ -13,7 +13,7 @@
<svg id="game-svg" class="game-gui" viewBox="0 0 1920 1080">
<circle cx="300" cy="260" r="20" class="node-button" onclick="alert('n4')"/>
<circle cx="340" cy="150" r="20" class="node-button" onclick="alert('n3')"/>
<text x="100" y="100">Lorem ipsum dolor sit amet</text>
<text x="20" y="1060">Still working on this ...</text>
</svg>
</div>
<script src="./bundle.js"></script>
......
......@@ -30,7 +30,7 @@ div.game {
}
text {
fill: $primary1-shade1;
fill: $primary3-shade1;
font-family: "Montserrat";
font-size: 24pt;
font-weight: 900;
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment