Components / QuadField
QuadField
A plane of squares that waves like a floor and stands up into a picture as the page scrolls.
Example
The component itself, running in WebAssembly, beside its code in a playground. Try it.
Code
use ravenrs::prelude::*;
fn quad_field() -> impl View {
// Scroll inside: the waving floor stands up into a small dashboard.
// ravenrs-lint: allow(raw_color) the pixels of the scene, like those of an `ImageData::from_fn`
let (floor, bars, ground) = (Color::hex(0x222734), Color::hex(0x4c66ee), Color::hex(0x12151c));
let picture = move |u: f32, v: f32, time: f64| {
let bar = ((u - 0.1) / 0.1).floor();
let height = 0.35 + 0.25 * (bar * 1.7 + time as f32).sin().abs();
if v < 0.15 {
floor
} else if (0.1..0.9).contains(&u) && v > 0.9 - height {
bars
} else {
ground
}
};
ScrollView::new((
ScrollScene::new(QuadField::new(64, 36, picture).height(280.0)).length(600.0),
Canvas::new(|_, _| {}).size(10.0, 400.0),
))
.spacing(0.0)
.height(280.0)
}