aweary / aweary/react-perimeter

Feature: precognition

Open
#21 3 comments 0 reactions 0 assignees View on GitHub
Dominant language
JavaScript
Stars
1k
Forks
27
PR merge metrics
No merged PRs in 30d

Description

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.

```javascript
// 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.

Contributor guide

No contributing guide indexed for this repository

Research direction

The issue names no files, tests, or entry points; begin by reviewing the existing react-perimeter implementation and its mouse-event behavior. Define how trajectory prediction should identify a likely component entry within 10 frames or about 160ms, then verify the behavior with appropriate coverage.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, react
Domain
frontend
Issue type
Feature
Difficulty
5/5
Estimated time
Over a week
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
25/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.