Add createSpring primitive. #629

Blankeos · 2024-05-12T11:13:02Z

Summary

This PR adds the createSpring primitive. Inspired and Forked from https://svelte.dev/docs/svelte-motion#spring
The API works exactly like createSignal, just that the setter will actually interpolate the value.
It also has familiar opts as the one with svelte-motion/spring.
I come from using Svelte and it's one of the most essential primitives I use for animation. I've been using Solid more and more and have come to love it. I think this primitive is one of the few missing for me here. I think Solid would greatly benefit from a primitive like this since we already have a tween primitive.

Example Usage:

export default function SpringyPage() {
  const [progress, setProgress] = createSpring(0);

  const [radialProgress, setRadialProgress] = createSpring(0, {
    stiffness: 0.05,
  });

  const [xy, setXY] = createSpring(
    { x: 50, y: 50 },
    { stiffness: 0.08, damping: 0.2, precision: 0.01 }
  );

  function toggleProgress() {
    if (progress() === 0) setProgress(1);
    else setProgress(0);
  }
  // ...

Witness, the springiness:

solidjs.spring.primitive.-.demo.mp4

Solid.CreateSpring.Demo.mp4

Todos:

Tests
README.md
package.json

changeset-bot · 2024-05-12T11:13:05Z

⚠️ No Changeset found

Latest commit: 0222ae1

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

rcoopr · 2024-05-14T19:59:14Z

packages/spring/src/index.ts

Currently it allows you to pass a string as an input (or an array of strings, object with string values etc), but you could use a type like this to provide some validation

type SpringTargetPrimitive = number | Date; type SpringTarget = | SpringTargetPrimitive | { [key: string]: SpringTargetPrimitive | SpringTarget } | SpringTargetPrimitive[] | SpringTarget[];

That's a good suggestion. Was also considering this. I just made it close to Svelte's implementation which was more loose with types.

But under the hood it does actually only implement those specific primitives: Date, Number, Array<Date | number>, and { [key: any]: Date | number> }.

Will definitely add it here. Thanks!

While implementing this, I ran into a bit of a hiccup. Didn't know generics behaved this way lol. They seem to convert the data primitives into constants. (e.g. passing 0 will make the type 0, 1 will be 1, etc.)

Luckily the fix was easy:

Just a side note but the "validation" will not catch this:

const [spring, setter] = createSpring({foo: [1,2,3]} as {foo: number[]} | number) setter(101) // runtime error: Cannot read properties of undefined (reading '0')

And it seems to break with readonly number[]

Also interfaces

Also in source code there is a current_value == null check, which I think is impossible with the validation.

Blankeos · 2024-05-15T06:51:00Z

Update: I also figure of adding createDerivedSpring by the way, so that there's a similar API that works like the current createTween's API which doesn't return a setter, but takes in an Signal accessor.

const springValue = createDerivedSpring(signal, opts)

Will add this tonight.

…ests.

Also added some docs.

thetarnav

Thanks, this is a very nice addition.

packages/spring/src/index.ts

packages/spring/test/index.test.ts

packages/spring/package.json

packages/spring/src/index.ts

Blankeos · 2024-09-11T14:51:24Z

Hi @thetarnav just pushed the latest changes based on your review. Thanks so much for the very thorough comments on it.

I haven't done the tests related to timeouts yet because as you said, timeouts are kind of my nightmare too lol. I'll take a gander at it again soon (maybe tomorrow or in a few hours).

If you want to try playing around with it (with the same example video above). Try running this: https://github.com/blankeos/spring-solid-test (currently I just copy paste the index.ts I didn't do pnpm link or anything lol)

…ate-spring

thetarnav · 2024-09-18T21:52:39Z

I don't necessarly like that createSpring by default tries to handle various types of data recursively.
The core idea of a spring is just a simple math equation for tweening numbers, but the source code reads like something much more complex.
I wonder if it would be smart to separate it into more functions rather than one-does-all primitive. Maybe a separate primitive for numbers and objects?
It would be nice to have a vanilla-js spring(from, to, time, options) function as well.
Also maybe the primitive could be added to the tween package? The use and concepts are similar. Separate package for each tweening strategy would probably be a lot.
I still need to think about that.

packages/spring/src/index.ts

thetarnav · 2024-09-19T21:55:48Z

I tried to inline the tasks thing from svelte to the primitive. The tests pass and it works as it should in my eyes, but could you double check @Blankeos?
Probably will merge after that.

rcoopr · 2024-09-23T13:23:03Z

packages/spring/src/index.ts

+    }
+
+    if (raf_id === 0) {
+      time_last = performance.now()


I think it should be something like Number(document.timeline.currentTime || performance.now()) ala MDN

Otherwise, in cases where document.timeline.currentTime is available, the first frame could have a negative timeDelta

hmm youre right
I'm consistently getting negative values with performance.now.

But with document.timeline.currentTime it's always zero.
Which makes me think that maybe this would be better:

requestAnimationFrame(prev_time => { function frame(time) { let delta = time-prev_time prev_time = time requestAnimationFrame(frame) } requestAnimationFrame(frame) }) // or let prev_time = Infinity function frame(time) { let delta = Math.max(0, time-prev_time) prev_time = time requestAnimationFrame(frame) } requestAnimationFrame(frame)

Since the first iteration will be ran with 0 delta anyway which won't progress the animation at all, so it could be skipped.
Instead of relying on document.timeline.currentTime, which may be and may not be there, and falling back to performance.now which is wrong.

rcoopr · 2024-09-23T13:33:08Z

packages/spring/src/index.ts

+    }
+
+    if (opts.soft) {
+      inv_mass_recovery_rate = 1 / (typeof opts.soft === "number" ? opts.soft * 60 : 30);


This hard-codes an assumed 60 fps into the inverse mass recovery feature. On different hardware, opts.soft will behave differently (inv_mass will return to 1 more quickly with higher framerate) and more importantly the velocity will be incorrect.

I'm not sure the best fix for fps-independence here, but in my own adaptation I have gone for tracking the fps as Math.max(fps, 1000 / (time - timeLast)) in the frame function above

See sveltejs/svelte#10717

Turns out tracking fps this way is very flawed. At best it gives an inaccurate value (consistently getting ~180 fps when I should really be getting 166) and at worst is can go to extreme values and be very inconsistent.

I can look into frame-independent impls unless somebody else wants to jump in with a solution

My intuition would be to keep the recovery rate as a constant, only depending on opts.soft.
And use time delta in inv_mass = Math.min(inv_mass + inv_mass_recovery_rate * time_delta, 1)
But I'm curious about other directions.
I'll try to add a test for framerate-independence since we are mocking the raf anyway.

I was able to fix the inv_mass_recovery_rate to actually recover in the correct amount of time, but couldn't accomplish the same for the tick function

solid-primitives/packages/spring/src/index.ts

Lines 152 to 159 in eeff964

const tick = (last: T, current: T, target: T): any => {

if (typeof current === "number" || is_date(current)) {

const delta = +target - +current;

const velocity = (+current - +last) / (time_delta || 1 / 60); // guard div by 0

const spring = stiffness * delta;

const damper = damping * velocity;

const acceleration = (spring - damper) * inv_mass;

const d = (velocity + acceleration) * time_delta;

The frame-dependent time_delta is baked into this implementation in tick. It doesn't quite cancel out even though d is multipled by time_delta in the end either, but I'm not totally sure what is supposed to be going on instead.

https://github.com/pqml/spring/blob/master/lib/Spring.js - this looks promising, it is based on picking a timestep, checking how many of those timesteps have passed since the last frame, and solving for the position that many times

Makes sense. I'm using the same technique in my force-graph implementation—which has the same problem that it cannot be simply "multiplied by delta_time" to make the simulation frame-independent—and it works pretty well: https://github.com/thetarnav/force-graph/blob/main/index.mjs#L86-L98

thetarnav

I think I’m going to merge this in the current state as it’s already useful and matches sveltes version.
The implementation could be improved to be frame-independent in future PRs as it shouldn’t change the current interface.

Blankeos · 2024-09-26T20:19:56Z

Awesome work guys! Couldn't really check the past week, it's been a very busy month for me.

Thanks for adding in your insights @thetarnav @rcoopr! 🦾🥳

Add createSpring primitive.

d94ae1e

rcoopr reviewed May 14, 2024

View reviewed changes

Blankeos added 3 commits May 15, 2024 23:20

Add better types for createSpring primitives and a few tests.

ea6ea39

Added createDerivedSpring tests, ssr tests, and different data type t…

41d6679

…ests.

Refactor by removing useless exports and only export important types.

45d16ec

Also added some docs.

Blankeos force-pushed the feat/create-spring branch from 18ee12d to 45d16ec Compare May 15, 2024 16:02

Blankeos requested a review from rcoopr May 15, 2024 16:02

thetarnav requested changes Sep 7, 2024

View reviewed changes

Refactor by improving implementation based on @thetarnav's suggestions.

24f4702

Add extra tests and refactoring.

9fead8a

Blankeos requested a review from thetarnav September 12, 2024 19:33

Mock raf and timers for spring tests

0ada2ae

thetarnav force-pushed the feat/create-spring branch from 82e0965 to 0ada2ae Compare September 18, 2024 21:25

thetarnav added 2 commits September 18, 2024 23:27

Merge commit '72c6be11b3b12a0b12db8be440627de4398302ee' into feat/cre…

ec7ac75

…ate-spring

Update lockfile

ca45603

thetarnav reviewed Sep 19, 2024

View reviewed changes

packages/spring/src/index.ts Outdated Show resolved Hide resolved

Blankeos and others added 3 commits September 20, 2024 03:12

Remove T extends Date.

98fed63

Clanup, fix and test untracking setter

31bf2ce

Inline tasks abstraction into createSpring primitive

eeff964

rcoopr reviewed Sep 23, 2024

View reviewed changes

Ensure delta time cannot be less than zero

53b08a5

thetarnav approved these changes Sep 26, 2024

View reviewed changes

thetarnav added 2 commits September 26, 2024 18:34

Improve guard against zero delta

fd41228

Add demo page to spring

0222ae1

thetarnav merged commit d270e6b into solidjs-community:main Sep 26, 2024
3 checks passed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add createSpring primitive. #629

Add createSpring primitive. #629

Blankeos commented May 12, 2024 •

edited

Loading

changeset-bot bot commented May 12, 2024 •

edited

Loading

rcoopr May 14, 2024

Blankeos May 15, 2024

Blankeos May 15, 2024

thetarnav Sep 19, 2024

thetarnav Sep 19, 2024

thetarnav Sep 19, 2024

thetarnav Sep 19, 2024

Blankeos commented May 15, 2024 •

edited

Loading

thetarnav left a comment

Blankeos commented Sep 11, 2024 •

edited

Loading

thetarnav commented Sep 18, 2024

thetarnav commented Sep 19, 2024

rcoopr Sep 23, 2024 •

edited

Loading

thetarnav Sep 23, 2024 •

edited

Loading

rcoopr Sep 23, 2024 •

edited

Loading

rcoopr Sep 23, 2024

thetarnav Sep 24, 2024

rcoopr Sep 24, 2024 •

edited

Loading

thetarnav Sep 26, 2024

thetarnav left a comment

Blankeos commented Sep 26, 2024

	const tick = (last: T, current: T, target: T): any => {
	if (typeof current === "number" \|\| is_date(current)) {
	const delta = +target - +current;
	const velocity = (+current - +last) / (time_delta \|\| 1 / 60); // guard div by 0
	const spring = stiffness * delta;
	const damper = damping * velocity;
	const acceleration = (spring - damper) * inv_mass;
	const d = (velocity + acceleration) * time_delta;

Add createSpring primitive. #629

Add createSpring primitive. #629

Conversation

Blankeos commented May 12, 2024 • edited Loading

Summary

changeset-bot bot commented May 12, 2024 • edited Loading

⚠️ No Changeset found

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Blankeos commented May 15, 2024 • edited Loading

thetarnav left a comment

Choose a reason for hiding this comment

Blankeos commented Sep 11, 2024 • edited Loading

thetarnav commented Sep 18, 2024

thetarnav commented Sep 19, 2024

rcoopr Sep 23, 2024 • edited Loading

Choose a reason for hiding this comment

thetarnav Sep 23, 2024 • edited Loading

Choose a reason for hiding this comment

rcoopr Sep 23, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

rcoopr Sep 24, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

thetarnav left a comment

Choose a reason for hiding this comment

Blankeos commented Sep 26, 2024

Blankeos commented May 12, 2024 •

edited

Loading

changeset-bot bot commented May 12, 2024 •

edited

Loading

Blankeos commented May 15, 2024 •

edited

Loading

Blankeos commented Sep 11, 2024 •

edited

Loading

rcoopr Sep 23, 2024 •

edited

Loading

thetarnav Sep 23, 2024 •

edited

Loading

rcoopr Sep 23, 2024 •

edited

Loading

rcoopr Sep 24, 2024 •

edited

Loading