coreyshuman/constellation

A configurable physics-based animation in JavaScript which can produce many designs and effects, including constellation-like star fields. You can interact with the animation using the mouse or multiple touch points on touch devices.

constellation's Issues

Mouse repulsion weight is reversed.

Closer orbs (to the mouse) produce less force while farther away orbs produce more force.

Queued line draw are significantly slower in Firefox (Gecko)

Queued line draw performance in Gecko:
FPS: 7

Non-queued line draw performance in Gecko:
FPS: 62

Comparison: queued line draw performance in Chrome (V8):
FPS: 237

Comparison: non-queued line draw performance in Chrome (V8):
FPS: 150

Code

Most time appears to be spent in the 'moveTo()' function call here:

Constellation/constellation.js

Line 685 in 2a096a0

ctx.moveTo(line.x1, line.y1);

Possible solutions

• Select queue or non-queued based on browser (accurate browser detection becomes a maintenance issue)
• Troubleshoot/research moveTo() performance in Gecko and work on alternative implementation or submit fix upstream.

Touch events conflict with mobile browser built-in motions

Swiping actions in the demo conflict with browser actions, especially in chrome. For example:

• Swiping right to open menu drawer also triggers "go back" action
• Swiping down triggers "refresh" action
• Swiping up triggers scroll even when not selecting the menu drawer

The usage of event.preventDefault() doesn't address the issue and triggers an error:

[Intervention] Unable to preventDefault inside passive event listener due to target being treated as passive. See <URL>

'Line Size 2' causes unknown "system" slowdown in Chrome

Slowdown in "system" instead of in our code?

The FPS should be around 210-220 for these update and draw times.

When orbs align on the same x or y axis, more torque is produced against them

Orbs rotating around each other can't pass through a horizontal or vertical alignment. A reverse rotation torque is produced. This is creating the pairs that seem to zoom across the screen. They are vertically or horizontally aligned.