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

p5.js-svg

v1.5.1

Published

The main goal of p5.SVG is to provide a SVG runtime for p5.js, so that we can draw using p5's powerful API in \<svg\>, save things to svg file and manipulating existing SVG file without rasterization.

Downloads

4,083

Readme

p5.js-svg

The main goal of p5.SVG is to provide a SVG runtime for p5.js, so that we can draw using p5's powerful API in <svg>, save things to svg file and manipulating existing SVG file without rasterization.

Getting Started

Add this line in your projects index.html :

<script src="https://unpkg.com/[email protected]"></script>

(p5.js-svg v1.5.x is compatible with p5.js v1.6.x)

Open your sketch.js and edit it:

function setup() {
  createCanvas(100, 100, SVG);
  background(255);
  fill(150);
  stroke(150);
}

function draw() {
  var r = frameCount % 200 * Math.sqrt(2);
  background(255);
  ellipse(0, 0, r, r);
}

Then you can open your html file, and view the result. It's <svg>!

SVG Gettting Started

Examples

  • https://zenozeng.github.io/p5.js-svg/examples/
  • https://zenozeng.github.io/p5.js-svg/test/
  • Vite + TypeScript

SVG Renderer vs Canvas2D Renderer

The major difference is that SVG Renderer is based on SVG Document Object Model while Canvas 2D Renderer is based on pixels. Therefore, the performance may not be as good as canvas, but SVG-format vector images can be rendered at any size without loss of quality.

Note that not all drawing results are exactly same in pixel-level.For example, the round rects below are almost same, but there are some pixels different.

round rect

As for filters, gray(), invert(), threshold(), opaque() did have same behavior as Canvas2D Renderer. But blur(), erode(), dilate() didn't.

To implement blur, feGaussianBlur was used, which is different from Processing's blur. blur

As for erode() and dilate(), they were implemnted using feOffset and feBlend. So, the result is not exactly same. erode

You can view all the pixels based diff on the online tests.

Browser Compatibility

[email protected] was tested and should work on:

  • Chromium 90 (Debian 11.0, LXQt 0.16)
  • Safari (iPadOS 14)

How it works

p5.RendererSVG is a class which extends p5.Renderer2D. A mocked <canvas> element and a CanvasRenderingContext2D api are provided using svgcanvas, which is JavaScript Object that syncs proprieties and draws on <svg> element.

Known issue

Too many child elements

Since SVG is XML-based, every call of the draw function will insert elements into it, and these elements keep existing even if they are not visible. So, long-time running will result in too many child elements. We recommend calling clear() in your draw function, which will trigger internal context.__clearCanvas() to remove elements.

function draw() {
  clear();
  // draw
}

See https://github.com/zenozeng/p5.js-svg/issues/32

blendMode is not implemented yet.

Building dist

To build dist files after cloning repo, you can run:

npm install
npm run build

Tests

p5.SVG was driven by tests. We use Karma and mocha. Most tests are based on pixel-diff. There are still some p5's methods not covered with unit tests. But Rendering and Shape API are already covered with tests and should work.

If you found a bug, feel free to open a issue or pull a request.

All tests can be found here: https://github.com/zenozeng/p5.js-svg/tree/master/test/unit

You can also run the online test yourself: https://zenozeng.github.io/p5.js-svg/test/