npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@ejfox/four-seventeen

v0.6.3

Published

Generative art toolkit

Downloads

15

Readme

417

What it does

A framework for generative art made with Coffeescript, D3, Canvas and random numbers.

A boilerplate art script file with useful libraries and scaffolding is provided to create new works quickly. (src/artscripts/_boilerplate.coffee)

See lots of examples here.

Development

npm install before your first use.

Run npm dev in another tab to automatically compile any .coffee file when it is saved

To run any individual art script, you can (assuming you are in the project root) do node dist/artscripts/$FILENAME

To run the boilerplate example you would do node dist/artscripts/_boilerplate

To get started on a new artscript, you can clone the boilerplate cp src/artscripts/_boilerplate.coffee src/artscripts/MY-NEW-ARTSCRIPT.coffee and then modifying that with your editor atom src

Useful commands

watch -n0 node dist/artscripts/10-14 repeatedly runs the 10-14 artscript

ffmpeg -framerate 24 -pattern_type glob -i '*.png' -c:v libx264 -pix_fmt yuv420p $FILENAME.mp4 combines all exported .png files into a movie

Common options

There are a few common options used for artscripts.

  • seed is the seed used for the random number generators. For the most part, an artscript run with the same seed will produce the same image every time. Your results may vary.
  • count is the number of particles to place on the page.
  • numTicks is the number of times to run the tick() function in the artscript. In -movie mode, each tick is exported as a frame.
  • width and height are the width and height of the canvas in pixels.
  • text is the text in the tweet that accompanies the image.

Development web view

The development web view is located at src/webserver.js

To quickly see changes when iterating on a script, this creates a simple web server that shows the latest .png created in the /dist/ folder. You can navigate to it at localhost:3000

Works well when paired with atom-browser dev browser set-up

TODO

  • Add watch script that compiles coffeescript on change

Examples

9-10 10-2 10-3-2 10-4-3 10-3 10-7-2 11-6-3