Stars.js

✨ Generate a rotating galaxy in a canvas.

🚀 Check it out at https://danziger.github.io/starsjs/!

Running It (Development)

Take a look at package.json, the scripts are self-explanatory, but otherwise npm install and npm start work in 90% of teh cases :D

The project will be accessible at http://localhost:8080/.

Reporting a problem

Don't hesitate to report any issue you find in this website/project by opening a new issue in this repository, but please make sure that problem hasn't been reported before by another user.

TODOs & Bug

Bugs

• Animate (fade-in) FPS meter.

Stars Generation & Options

• Add a footer with an attribution and a "HIRING?" label similar to the one in gmzcodes.com.

• Make twinkle proportional to the distance to the center (so that the effect is more noticeable on larger stars that are further away from the center).

• Consider implementing the settings panel with a few different libraries to see the differences with a real example.

Other Features

• Progressively highlight "Stars.js" letter as the animation loads.

• Animate "Starts.js" dot as a blinking star.

Tech Debt

Options (to be implemented)

• Pattern:

  • Type: uniform, radial, linear
  • Direction: in, out, left, right, top, bottom, custom vector

• Movement:

  • Type: none, rotate, translate
  • Direction: clockwise, counterclockwise, left, right, top, bottom, custom vector
  • Speed

• Style:

  • Background color
  • Foreground gradient
  • Star color(s) / pattern(s)

• Performance:

  • Number of starts:
    • Total (raw number)
    • Density (stars per 100px^2)
    • Grouped (stars per group, each group is a pre-rendered set of 2-10 similar or equal stars)

• Mouse Interaction:

  • Type: none, tilt, translate / drag
  • Direction: away, towards
  • Duration: permanent, spring effect
  • Range / intensity
  • Acceleration / transition function

• Scroll Interaction:

  • Type: none, tilt, translate / drag
  • Direction: same, opposite
  • Duration: permanent, spring effect
  • Range / intensity
  • Acceleration / transition function

Settings Panel

I've been considering different libraries to implement the settings panel available on Stars.js to play around with the settings above (once they get implemented), and I thought the comparison might be relevant for some other people, so here it is (still in draft, I'll be adding more info soon).

• dat.gui - Repo, Docs, dat.gui migration guide, Demo (not official), NPM

  Monthly installs: X, Stars: X, Issues: X, Last updated: YYY.MM.DD

• tweakpane - Repo, Docs, dat.gui migration guide, Demo, NPM

  Monthly installs: X, Stars: X, Issues: X, Last updated: YYY.MM.DD

• control-panel - Repo & Docs, dat.gui migration guide, Demo, NPM

  Monthly installs: X, Stars: X, Issues: X, Last updated: YYY.MM.DD

• guify - Repo, Docs, dat.gui migration guide, Demo, NPM

  Monthly installs: X, Stars: X, Issues: X, Last updated: YYY.MM.DD

• lil-gui - Repo, Docs, dat.gui migration guide, Demo, NPM

  Monthly installs: X, Stars: X, Issues: X, Last updated: YYY.MM.DD

• controlkit.js - Repo, Docs, dat.gui migration guide, Demo, NPM

  Monthly installs: X, Stars: X, Issues: X, Last updated: YYY.MM.DD

• oui - Repo, Docs, dat.gui migration guide, Demo, NPM

  Monthly installs: X, Stars: X, Issues: X, Last updated: YYY.MM.DD

• palette.js - Repo, Docs, dat.gui migration guide, Demo, NPM

  Monthly installs: X, Stars: X, Issues: X, Last updated: YYY.MM.DD

• quicksettings - Repo, Docs, dat.gui migration guide, Demo, NPM

  Monthly installs: X, Stars: X, Issues: X, Last updated: YYY.MM.DD

• paper-gui - Repo, Docs, dat.gui migration guide, Demo, NPM

  Monthly installs: X, Stars: X, Issues: X, Last updated: YYY.MM.DD

Comparison:

TODO: Add a table (maybe Airtable link) with:

• dat.guy drop-in replacement?
• Fields / attributes list.
• React library?
• Some links to projects using it (e.g. https://www.vantajs.com/).
• Dependencies / dependency-free.

Some other sites I've built

• GMZCODES

  👨‍💻 Dani Gamez's personal website PWA built using JavaScript, SCSS and HTML5.

• Stylophone.js

  🎹 The classic Stylophone, now in your phone and computer.

• Key.js

  ⌨ Press any key to get the JavaScript keyboard event event key, code, which, keyCode and more properties!

• Slot.js

  🎰 Circular slot machine mobile-first SPA built with JavaScript, CSS variables and Emojis!

• Job.js

  💼 Sharable image summaries for your open positions: Share your jobs as an image on LinkedIn and Instagram to get a visibility boost and more applicants!

Author

Dani Gámez Franco

LinkedIn: https://www.linkedin.com/in/danigamezfranco/

Stack Overflow: https://stackoverflow.com/users/3723993/danziger