pakastin/nodegarden

HTML5 Node Garden

HTML5 Node Garden

https://nodegarden.js.org

Description

Really simple node garden made with HTML5. No Barnes-Hut n-body optimization, just simple physics. I used to do these back in the Flash times, when I worked as a Flash developer. BIT-101 released a great article back then, which got me inspired.

• Click to add nodes
• Drag to make mouse a "black hole"

Rules

• Circles represent nodes
• Node's mass is proportional to it's size
• Lines visualize the gravitational force between nodes
• Line opacity equals to the strength of force
• When two nodes collide, smaller one will reset to a new location and size
• When node travels over screen limits it will reset to a new location and size

Also check out

My other projects:

• HTML5 Deck of Cards
• FRZR view library

Development

Download/clone and then:

npm install
npm run dev

Starts listening file changes and builds automagically to /public folder

License

MIT

nodegarden's Issues

Mouse position broken on retina screen

OSX 10.11.1 Google Chrome. Similar problem on Firefox for Mac as well.

The x,y coordinate of where the mouse clicks is exactly halfway from the top left corner of the page, compared to the mouse's actual position. Everything on the canvas is rendered at half position.

browser version

how do we run this statically with a regular server (not nodejs)

Help with my site pls

I know you probably hate the proposition of end-users asking for help with their websites, but there are some strange issues I've been running into that others aren't which means it's localized to what I'm doing.

I've been modifying the nodegarden script to match my needs and I've got it functional, but some functions in the js file aren't running.

1. When the container div is behind a wrapper (div is ordered before wrapper in the html) the click function works, but it doesn't create any nodes. Removing the wrapper or setting the z-index higher than the wrapper returns functionality.

2. For whatever reason the resize function isn't working for my site. It's not a problem with the script per-say because it's working on the demo and on other sites that utilize nodegarden. I have no leads.
   When refreshing the site with a tiny browser window and resizing it after the document loads, it's obvious that the canvas isn't resizing.

3. The animation speed seems to be tied to framerate. The framerate of my main monitor is 144hz (standard is 60). When tweaking the animation parameters to alter the perceived speed, other devices show it at less than half that speed. It's inconsistent between different framerate devices.

I didn't want to spam independent issues, but rather to put them all in one post. I know you're probably busy working on new and exciting projects, but I would appreciate some help with this.

The site is https://chillstice.com

Make the mouse a really heavy node!

License?

Just stumbled across this, very well done! 👍

Are you willing to put something like MIT license on this? Would love to fork. :)

'Position: fixed' mouse event listener not fixed. Scrolling causes mouse tracking to fail.

I'm interested in using a modified version of NodeGarden as an interesting background element on a personal website I'm currently developing. At the moment I'm having issues regarding webpage scaling. I currently have two paths: dynamically stretch the container div's size to be the same size as the entire document (including scrolling) or make the div position:fixed so that it can remain the size of the viewport, but move with the screen. With the latter, mouse click events can be de-synced by scrolling the page. Mouse click events act as if the container div is still positon:absolute at the top of the page. Even scrolling a little bit and clicking allows you to better visualize this effect. I would publish a wip version of my site, but this effect already exists on another website which may be a better example: https://level1techs.com/video

I know it's been a few years, but I would like some advice regarding whether or not I should pursue dynamically stretching the canvas down the entire document using position:absolute or just using position:fixed. I would like to see this scrolling issue solved for fixed positioning.