Tidy up easing_functions example (#17742)
# Objective After #17461, the ease function labels in this example are a bit cramped, especially in the bottom row. This adjusts the spacing slightly and centers the labels. ## Solution - The label is now a child of the plot and they are drawn around the center of the transform - Plot size and extents are now constants, and this thing has been banished: ```rust i as f32 * 95.0 - 1280.0 / 2.0 + 25.0, -100.0 - ((j as f32 * 250.0) - 300.0), 0.0, ``` - There's room for expansion in another row, so make that easier by doing the chunking by row - Other misc tidying of variable names, sprinkled in a few comments, etc. ## Before <img width="1280" alt="Screenshot 2025-02-08 at 7 33 14 AM" src="https://github.com/user-attachments/assets/0b79c619-d295-4ab1-8cd1-d23c862d06c5" /> ## After <img width="1280" alt="Screenshot 2025-02-08 at 7 32 45 AM" src="https://github.com/user-attachments/assets/656ef695-9aa8-42e9-b867-1718294316bd" />
This commit is contained in:
Rob Parrett
GitHub
parent
7c2d54c93f
commit
a9de5164a8
@ -1,9 +1,10 @@
|
||||
//! Demonstrates the behavior of the built-in easing functions.
|
||||
|
||||
use bevy::{prelude::*, sprite::Anchor};
|
||||
use bevy::prelude::*;
|
||||
|
||||
#[derive(Component)]
|
||||
struct SelectedEaseFunction(EaseFunction, Color);
|
||||
#[require(Visibility, Transform)]
|
||||
struct EaseFunctionPlot(EaseFunction, Color);
|
||||
|
||||
fn main() {
|
||||
App::new()
|
||||
@ -13,6 +14,10 @@ fn main() {
|
||||
.run();
|
||||
}
|
||||
|
||||
const COLS: usize = 12;
|
||||
const EXTENT: Vec2 = Vec2::new(1172.0, 520.0);
|
||||
const PLOT_SIZE: Vec2 = Vec2::splat(80.0);
|
||||
|
||||
fn setup(mut commands: Commands) {
|
||||
commands.spawn(Camera2d);
|
||||
|
||||
@ -21,73 +26,88 @@ fn setup(mut commands: Commands) {
|
||||
..default()
|
||||
};
|
||||
|
||||
for (i, functions) in [
|
||||
let chunks = [
|
||||
// "In" row
|
||||
EaseFunction::SineIn,
|
||||
EaseFunction::SineOut,
|
||||
EaseFunction::SineInOut,
|
||||
EaseFunction::QuadraticIn,
|
||||
EaseFunction::QuadraticOut,
|
||||
EaseFunction::QuadraticInOut,
|
||||
EaseFunction::CubicIn,
|
||||
EaseFunction::CubicOut,
|
||||
EaseFunction::CubicInOut,
|
||||
EaseFunction::QuarticIn,
|
||||
EaseFunction::QuarticOut,
|
||||
EaseFunction::QuarticInOut,
|
||||
EaseFunction::QuinticIn,
|
||||
EaseFunction::QuinticOut,
|
||||
EaseFunction::QuinticInOut,
|
||||
EaseFunction::SmoothStepIn,
|
||||
EaseFunction::SmoothStepOut,
|
||||
EaseFunction::SmoothStep,
|
||||
EaseFunction::SmootherStepIn,
|
||||
EaseFunction::SmootherStepOut,
|
||||
EaseFunction::SmootherStep,
|
||||
EaseFunction::CircularIn,
|
||||
EaseFunction::CircularOut,
|
||||
EaseFunction::CircularInOut,
|
||||
EaseFunction::ExponentialIn,
|
||||
EaseFunction::ExponentialOut,
|
||||
EaseFunction::ExponentialInOut,
|
||||
EaseFunction::ElasticIn,
|
||||
EaseFunction::ElasticOut,
|
||||
EaseFunction::ElasticInOut,
|
||||
EaseFunction::BackIn,
|
||||
EaseFunction::BackOut,
|
||||
EaseFunction::BackInOut,
|
||||
EaseFunction::BounceIn,
|
||||
// "Out" row
|
||||
EaseFunction::SineOut,
|
||||
EaseFunction::QuadraticOut,
|
||||
EaseFunction::CubicOut,
|
||||
EaseFunction::QuarticOut,
|
||||
EaseFunction::QuinticOut,
|
||||
EaseFunction::SmoothStepOut,
|
||||
EaseFunction::SmootherStepOut,
|
||||
EaseFunction::CircularOut,
|
||||
EaseFunction::ExponentialOut,
|
||||
EaseFunction::ElasticOut,
|
||||
EaseFunction::BackOut,
|
||||
EaseFunction::BounceOut,
|
||||
// "InOut" row
|
||||
EaseFunction::SineInOut,
|
||||
EaseFunction::QuadraticInOut,
|
||||
EaseFunction::CubicInOut,
|
||||
EaseFunction::QuarticInOut,
|
||||
EaseFunction::QuinticInOut,
|
||||
EaseFunction::SmoothStep,
|
||||
EaseFunction::SmootherStep,
|
||||
EaseFunction::CircularInOut,
|
||||
EaseFunction::ExponentialInOut,
|
||||
EaseFunction::ElasticInOut,
|
||||
EaseFunction::BackInOut,
|
||||
EaseFunction::BounceInOut,
|
||||
// "Other" row
|
||||
EaseFunction::Linear,
|
||||
EaseFunction::Steps(4),
|
||||
EaseFunction::Elastic(50.0),
|
||||
]
|
||||
.chunks(3)
|
||||
.enumerate()
|
||||
{
|
||||
for (j, function) in functions.iter().enumerate() {
|
||||
let color = Hsla::hsl(i as f32 / 11.0 * 360.0, 0.8, 0.75).into();
|
||||
.chunks(COLS);
|
||||
|
||||
let max_rows = chunks.clone().count();
|
||||
|
||||
let half_extent = EXTENT / 2.;
|
||||
let half_size = PLOT_SIZE / 2.;
|
||||
|
||||
for (row, functions) in chunks.enumerate() {
|
||||
for (col, function) in functions.iter().enumerate() {
|
||||
let color = Hsla::hsl(col as f32 / COLS as f32 * 360.0, 0.8, 0.75).into();
|
||||
commands
|
||||
.spawn((
|
||||
Text2d(format!("{:?}", function)),
|
||||
text_font.clone(),
|
||||
TextColor(color),
|
||||
EaseFunctionPlot(*function, color),
|
||||
Transform::from_xyz(
|
||||
i as f32 * 95.0 - 1280.0 / 2.0 + 25.0,
|
||||
-100.0 - ((j as f32 * 250.0) - 300.0),
|
||||
-half_extent.x + EXTENT.x / (COLS - 1) as f32 * col as f32,
|
||||
half_extent.y - EXTENT.y / (max_rows - 1) as f32 * row as f32,
|
||||
0.0,
|
||||
),
|
||||
Anchor::TopLeft,
|
||||
SelectedEaseFunction(*function, color),
|
||||
))
|
||||
.with_children(|p| {
|
||||
// Marks the y value on the right side of the plot
|
||||
p.spawn((
|
||||
Sprite::from_color(color, Vec2::splat(5.0)),
|
||||
Transform::from_xyz(SIZE_PER_FUNCTION + 5.0, 15.0, 0.0),
|
||||
Transform::from_xyz(half_size.x + 5.0, -half_size.y, 0.0),
|
||||
));
|
||||
// Marks the x and y value inside the plot
|
||||
p.spawn((
|
||||
Sprite::from_color(color, Vec2::splat(4.0)),
|
||||
Transform::from_xyz(0.0, 0.0, 0.0),
|
||||
Transform::from_xyz(-half_size.x, -half_size.y, 0.0),
|
||||
));
|
||||
|
||||
// Label
|
||||
p.spawn((
|
||||
Text2d(format!("{:?}", function)),
|
||||
text_font.clone(),
|
||||
TextColor(color),
|
||||
Transform::from_xyz(0.0, -half_size.y - 15.0, 0.0),
|
||||
));
|
||||
});
|
||||
}
|
||||
@ -96,19 +116,17 @@ fn setup(mut commands: Commands) {
|
||||
Text::default(),
|
||||
Node {
|
||||
position_type: PositionType::Absolute,
|
||||
bottom: Val::Px(12.0),
|
||||
top: Val::Px(12.0),
|
||||
left: Val::Px(12.0),
|
||||
..default()
|
||||
},
|
||||
));
|
||||
}
|
||||
|
||||
const SIZE_PER_FUNCTION: f32 = 80.0;
|
||||
|
||||
fn display_curves(
|
||||
mut gizmos: Gizmos,
|
||||
ease_functions: Query<(&SelectedEaseFunction, &Transform, &Children)>,
|
||||
mut transforms: Query<&mut Transform, Without<SelectedEaseFunction>>,
|
||||
ease_functions: Query<(&EaseFunctionPlot, &Transform, &Children)>,
|
||||
mut transforms: Query<&mut Transform, Without<EaseFunctionPlot>>,
|
||||
mut ui_text: Single<&mut Text>,
|
||||
time: Res<Time>,
|
||||
) {
|
||||
@ -121,36 +139,28 @@ fn display_curves(
|
||||
|
||||
ui_text.0 = format!("Progress: {:.2}", now);
|
||||
|
||||
for (SelectedEaseFunction(function, color), transform, children) in &ease_functions {
|
||||
for (EaseFunctionPlot(function, color), transform, children) in &ease_functions {
|
||||
let center = transform.translation.xy();
|
||||
let half_size = PLOT_SIZE / 2.0;
|
||||
|
||||
// Draw a box around the curve
|
||||
gizmos.linestrip_2d(
|
||||
[
|
||||
Vec2::new(transform.translation.x, transform.translation.y + 15.0),
|
||||
Vec2::new(
|
||||
transform.translation.x + SIZE_PER_FUNCTION,
|
||||
transform.translation.y + 15.0,
|
||||
),
|
||||
Vec2::new(
|
||||
transform.translation.x + SIZE_PER_FUNCTION,
|
||||
transform.translation.y + 15.0 + SIZE_PER_FUNCTION,
|
||||
),
|
||||
Vec2::new(
|
||||
transform.translation.x,
|
||||
transform.translation.y + 15.0 + SIZE_PER_FUNCTION,
|
||||
),
|
||||
Vec2::new(transform.translation.x, transform.translation.y + 15.0),
|
||||
center + half_size,
|
||||
center + half_size * Vec2::new(-1., 1.),
|
||||
center + half_size * Vec2::new(-1., -1.),
|
||||
center + half_size * Vec2::new(1., -1.),
|
||||
center + half_size,
|
||||
],
|
||||
color.darker(0.4),
|
||||
);
|
||||
|
||||
// Draw the curve
|
||||
let f = EasingCurve::new(0.0, 1.0, *function);
|
||||
let drawn_curve = f.by_ref().graph().map(|(x, y)| {
|
||||
Vec2::new(
|
||||
x * SIZE_PER_FUNCTION + transform.translation.x,
|
||||
y * SIZE_PER_FUNCTION + transform.translation.y + 15.0,
|
||||
)
|
||||
});
|
||||
let drawn_curve = f
|
||||
.by_ref()
|
||||
.graph()
|
||||
.map(|(x, y)| center - half_size + Vec2::new(x, y) * PLOT_SIZE);
|
||||
gizmos.curve_2d(
|
||||
&drawn_curve,
|
||||
drawn_curve.domain().spaced_points(samples).unwrap(),
|
||||
@ -158,17 +168,16 @@ fn display_curves(
|
||||
);
|
||||
|
||||
// Show progress along the curve for the current time
|
||||
let y = f.sample(now).unwrap() * SIZE_PER_FUNCTION + 15.0;
|
||||
transforms.get_mut(children[0]).unwrap().translation.y = y;
|
||||
let y = f.sample(now).unwrap() * PLOT_SIZE.y;
|
||||
transforms.get_mut(children[0]).unwrap().translation.y = -half_size.y + y;
|
||||
transforms.get_mut(children[1]).unwrap().translation =
|
||||
Vec3::new(now * SIZE_PER_FUNCTION, y, 0.0);
|
||||
-half_size.extend(0.0) + Vec3::new(now * PLOT_SIZE.x, y, 0.0);
|
||||
|
||||
// Show horizontal bar at y value
|
||||
gizmos.linestrip_2d(
|
||||
[
|
||||
Vec2::new(transform.translation.x, transform.translation.y + y),
|
||||
Vec2::new(
|
||||
transform.translation.x + SIZE_PER_FUNCTION,
|
||||
transform.translation.y + y,
|
||||
),
|
||||
center - half_size + Vec2::Y * y,
|
||||
center - half_size + Vec2::new(PLOT_SIZE.x, y),
|
||||
],
|
||||
color.darker(0.2),
|
||||
);
|
||||
|
||||
Loading…
Reference in New Issue
Block a user