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

shaderpen

v0.1.1

Published

Shadertoy like functionality as a portable js library.

Downloads

8

Readme

Shaderpen

About

Shaderpen is a simple library that mimics a lot of the same functionality seen in Shadertoy. It sets up the WebGL context, adds a canvas to the DOM that auto-resizes to fit the window, sets up a flat vertex shader that covers the entire canvas, and exposes several attributes relating to time, mouse position, etc. This allows you to get started tinkering with WebGL quickly by writing fragment shaders.

Usage

npm/Import

npm install shaderpen

import ShaderPen from 'shaderpen';

new ShaderPen(`
  WRITE YOUR SHADER HERE
`);

Script Include

Include the script: https://unpkg.com/shaderpen

new ShaderPen(`
  WRITE YOUR SHADER HERE
`);

Reason

Codepen is where I make/keep 99% of my sketches/ideas, so I wanted a way to do quick shader sketches there as well. Creating shaderpen was also a great opportunity for me to dive more into learning how to interface directly with the WebGL context. With that said, any and all input on how to improve upon this is welcome.

Future

I've tested this library a good bit with various examples from Shadertoy that don't use some of the deeper features (channels, etc...), and 95% of them work correctly. I would like to reach full parity with Shadertoy's base feature set (no audio channels or other custom inputs), but then deviate Shadertoy's "Channels" by creating a means for people to extend the Shaderpen object, adding their own custom uniforms and event listeners. This will allow people to create any custom input imaginable (WebAudio context, WebSockets, even things like the Battery Status API, etc...).

TODO

  • Add iDate from Shadertoy
  • Begin exploring ways of extending

See Also

Shadertoy - The awesome site that inspired this library!