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"
/>

Author: rparrett

examples/animation/easing_functions.rs

@@ -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,54 +139,45 @@ 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(),
             *color,
         );
 
         // 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),
         );