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.asciify

v0.6.3

Published

Apply real-time ASCII conversion to your favourite p5.js sketches instantly.

Downloads

442

Readme

p5.asciify ( ͡° ͜ʖ ͡°)

p5.asciify is a p5.js add-on library for converting the main canvas in WEBGL mode into a grid of ASCII characters in real-time, allowing you to bring a retro, text-based aesthetic to your visualizations, adding a unique touch to your creative coding projects.

The main goal of p5.asciify is to provide an easy-to-use, customizable solution for converting the main p5.js canvas into a grid of ASCII characters, offering a wide range of settings and effects to adjust the appearance of the ASCII grid to specific needs and artistic vision.

To see p5.asciify in action, check out the example and tested sketches in the provided collections on the p5.js web editor: p5.asciify examples, p5.asciify tests.

p5.asciify is actively developed and maintained by @humanbydefinition, with new features and improvements being added regularly. The library is open-source and available here, where you can contribute to its development, report issues, or suggest new features. I highly value your feedback and contributions, so feel free to reach out!

I would love to see your creations using p5.asciify! Feel free to tag me on social media or use the hashtag #p5asciify so I can enjoy and share your amazing work too. (ノ◕ヮ◕)ノ*:・゚✧

Instagram

Special thanks to @davepagurek for helping me learn how to create a p5.js addon library! (✿◠‿◠)

Getting Started

Prerequisites

  • p5.asciify requires p5.js version 1.8.0 or higher to work.
  • p5.asciify only runs in WEBGL mode, so make sure to set up your canvas accordingly:
function setup() {
  createCanvas(windowWidth, windowHeight, WEBGL);
}

That's it! You're now ready to install and use p5.asciify in your p5.js projects.

Installation

Download the latest version of p5.asciify from the GitHub releases page. The library is distributed as a single JavaScript file, which you can include in your project by adding the following script tag to your HTML file after importing p5.js:

<!-- Import p5.js before p5.asciify -->
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/lib/p5.js"></script>

<!-- Import p5.asciify after p5.js -->
<script src="path/to/library/p5.asciify.min.js"></script>

Alternatively, the library can be imported directly from a CDN like jsDelivr:

<!-- Import p5.js before p5.asciify -->
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/lib/p5.js"></script>

<!-- Import p5.asciify after p5.js -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/p5.asciify.min.js"></script>

[!TIP] To capture a canvas with libraries like p5.capture and p5.asciify applied, make sure to import them after p5.asciify to ensure the correct rendering order.

<!-- Import p5.js before p5.asciify -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/lib/p5.js"></script>

<!-- Import p5.asciify after p5.js -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/p5.asciify.min.js"></script>

<!-- Import p5.capture after p5.asciify -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/p5.capture.umd.min.js"></script>

At this point, when imported correctly, the p5.js canvas in WEBGL mode should already be converted into a grid of ASCII characters with the default settings applied! (。◕‿‿◕。)

Instance mode

Since v0.2.0, p5.asciify officially supports both global and instance mode. To use the library in instance mode, you need to load it in a specific way:

const theSketch = (sketch) => {

    // Pass the p5 instance to the p5asciify library before setup
    p5asciify.instance(sketch); 

    sketch.setup = () => {
        sketch.createCanvas(800, 800, sketch.WEBGL);

        // All functions provided by p5.asciify are now available through the p5 instance
        sketch.setAsciiOptions({ 
            common: {
                fontSize: 16,
            },
            brightness: {
                enabled: true,
                invertMode: true,
            },
            edge: {
                enabled: true,
                invertMode: true
            }
        });
    };

    sketch.draw = () => {
        sketch.push();
        sketch.background(0);
        sketch.fill(255);
        sketch.rotateX(sketch.radians(sketch.frameCount * 3));
        sketch.rotateZ(sketch.radians(sketch.frameCount));
        sketch.directionalLight(255, 255, 255, 0, 0, -1);
        sketch.box(800, 100, 100);
        sketch.pop();
    };
};

let myp5 = new p5(theSketch);

[!NOTE] All examples and explanations in the Wiki are given in global mode. To use them in instance mode, you need to adjust the code accordingly, as shown in the example above.

Essentially, you need to pass the p5 instance to the p5asciify library using the p5asciify.instance(sketch) function before setup, as well as using the p5 instance to call the functions provided by the library.

Usage

Check out the Usage section in the Wiki to learn how to customize the ASCII conversion and apply various effects to your sketches! You'll find step-by-step instructions and examples on how to effectively use p5.asciify in your projects.

Contributing

Contributions are welcome! To ensure consistency and avoid unexpected changes, please follow our Contributing Guidelines before submitting issues or pull requests.

License

This project is licensed under the MIT License. See the LICENSE file for more details.