Skip to content

Tidy up easing_functions example #17742

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Feb 8, 2025

Conversation

rparrett
Copy link
Contributor

@rparrett rparrett commented Feb 8, 2025

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:

    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

Screenshot 2025-02-08 at 7 33 14 AM

After

Screenshot 2025-02-08 at 7 32 45 AM

@mockersf
Copy link
Member

mockersf commented Feb 8, 2025

what do you think of starting the fourth row now, with the easings that don't really fit in the in/out/inout split? so linear, steps, elastic. maybe with more example of the last two with different parameters if you want to fill it

@rparrett
Copy link
Contributor Author

rparrett commented Feb 8, 2025

Looks great, IMO

image

@rparrett rparrett added C-Examples An addition or correction to our examples C-Code-Quality A section of code that is hard to understand or change A-Math Fundamental domain-agnostic mathematical operations D-Straightforward Simple bug fixes and API improvements, docs, test and examples S-Needs-Review Needs reviewer attention (from anyone!) to move forward labels Feb 8, 2025
@mweatherley mweatherley added S-Ready-For-Final-Review This PR has been approved by the community. It's ready for a maintainer to consider merging it and removed S-Needs-Review Needs reviewer attention (from anyone!) to move forward labels Feb 8, 2025
@mockersf mockersf added this pull request to the merge queue Feb 8, 2025
Merged via the queue into bevyengine:main with commit a9de516 Feb 8, 2025
34 checks passed
github-merge-queue bot pushed a commit that referenced this pull request Feb 8, 2025
# Objective

While working on #17742, I noticed that the `Steps` easing function
looked a bit suspicious.


![image](https://github.com/user-attachments/assets/be8f07e4-2079-461f-8c23-56d4b689aed9)

Comparing to the options available in
[css](https://developer.mozilla.org/en-US/docs/Web/CSS/easing-function/steps#description):


![image](https://github.com/user-attachments/assets/2c351519-c87f-483f-b5ff-63a9ee7b7b51)

It is "off the charts," so probably not what users are expecting.

## Solution

Use `floor` when rounding to match the default behavior (jump-end, top
right) in css.

<img width="100" alt="image"
src="https://github.com/user-attachments/assets/1ec46270-72f2-4227-87e4-03de881548ab"
/>


## Testing

I had to modify an existing test that was testing against the old
behavior. This function and test were introduced in #14788 and I didn't
see any discussion about the rounding there.

`cargo run --example easing_functions`

## Migration Guide

<!-- Note to editors: this should be adjusted if 17744 is addressed, and
possibly combined with the notes from the PR that fixes it. -->

`EaseFunction::Steps` now behaves like css's default, "jump-end." If you
were relying on the old behavior, we plan on providing it. See
#17744.
mrchantey pushed a commit to mrchantey/bevy that referenced this pull request Feb 17, 2025
# Objective

After bevyengine#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"
/>
mrchantey pushed a commit to mrchantey/bevy that referenced this pull request Feb 17, 2025
# Objective

While working on bevyengine#17742, I noticed that the `Steps` easing function
looked a bit suspicious.


![image](https://github.com/user-attachments/assets/be8f07e4-2079-461f-8c23-56d4b689aed9)

Comparing to the options available in
[css](https://developer.mozilla.org/en-US/docs/Web/CSS/easing-function/steps#description):


![image](https://github.com/user-attachments/assets/2c351519-c87f-483f-b5ff-63a9ee7b7b51)

It is "off the charts," so probably not what users are expecting.

## Solution

Use `floor` when rounding to match the default behavior (jump-end, top
right) in css.

<img width="100" alt="image"
src="https://github.com/user-attachments/assets/1ec46270-72f2-4227-87e4-03de881548ab"
/>


## Testing

I had to modify an existing test that was testing against the old
behavior. This function and test were introduced in bevyengine#14788 and I didn't
see any discussion about the rounding there.

`cargo run --example easing_functions`

## Migration Guide

<!-- Note to editors: this should be adjusted if 17744 is addressed, and
possibly combined with the notes from the PR that fixes it. -->

`EaseFunction::Steps` now behaves like css's default, "jump-end." If you
were relying on the old behavior, we plan on providing it. See
bevyengine#17744.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
A-Math Fundamental domain-agnostic mathematical operations C-Code-Quality A section of code that is hard to understand or change C-Examples An addition or correction to our examples D-Straightforward Simple bug fixes and API improvements, docs, test and examples S-Ready-For-Final-Review This PR has been approved by the community. It's ready for a maintainer to consider merging it
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants