pakastin / nodegarden Goto Github PK
View Code? Open in Web Editor NEWHTML5 Node Garden
Home Page: https://nodegarden.js.org
License: MIT License
HTML5 Node Garden
Home Page: https://nodegarden.js.org
License: MIT License
Just stumbled across this, very well done! ๐
Are you willing to put something like MIT license on this? Would love to fork. :)
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.
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.
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.
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.
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
how do we run this statically with a regular server (not nodejs)
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.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.