react-perimeter
react-perimeter copied to clipboard
aweary
Feature: precognition
Just watched the React Europe talk. Sounds like a cool component. But I was thinking what you really want to know is will the mouse enter the component not is it close. You could do this by interpolating the mouse trajectory based on mouse position, speed and acceleration.
// each interval
x = mouse.x
xspeed = x - prevx
xacc = xspeed - prevxspeed
//calculate mouse pos 10 frames ahead
for (let i=0; i < 10; i++ ) {
xspeed = xspeed + xacc
x = x + xspeed
// if (x, y) in box and (xspeed**2 + yspeed**2) < 10
// mouse very likely to rest in box within 10 frames
}
I used this logic in a game where you controlled firefly. A fish would jump out of the water only if based on pre calculating both trajectories it would eat you in ten frames (providing you did not take evasive action). The fish seldom missed and always took you by surprise if you flew too close to the water. What felt cool was the firefly's speed made no difference to the fishes accuracy.
the fish is only missing here because he is photoshopped in
10 frames would give you 160ms to preload even if the mouse was moving fast towards the button from a long distance.
I think this is very related to https://github.com/aweary/react-perimeter/issues/21
I'd like to support this in a really flexible way. I'm thinking we can add a prop that takes a function that's called with x and y and returns a boolean indicating whether onBreach should be called?
