Installation

Prerequisites

• p5.asciify requires p5.js versions 1.8.0 to 1.X.X to run.
  • p5.js versions 2.X.X are not yet supported, but will be in the future.
• p5.asciify only runs in WEBGL mode, so make sure to set up your canvas accordingly:

function setup() {
  createCanvas(800, 800, WEBGL);
}

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

Importing the library

Global mode

Download the latest umd version of p5.asciify from the GitHub releases page or import it directly from a CDN like jsDelivr. 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="path/to/library/p5.min.js"></script>

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

<!-- Or import it directly from a CDN like jsDelivr
<script src="https://cdn.jsdelivr.net/npm/p5.asciify@0.9.0/dist/p5.asciify.umd.min.js"></script> 
-->

Instance mode

Download the latest esm version of p5.asciify from the GitHub releases page, import it directly from a CDN like jsDelivr, or install it using npm:

npm install p5.asciify

import p5 from 'p5';
import { p5asciify } from 'p5.asciify';

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

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

let myp5 = new p5(sketch);

---

info

At this point - when imported correctly - your p5.js canvas in WEBGL mode should already be converted into a grid of ASCII characters with the default settings applied.

Make sure to check out the Fundamentals guide to learn more about the core concepts of the library and how to get started with your first project before diving into the Your First Rendering Pipeline guide to create your first custom rendering pipeline. (◕‿◕✿)

If you feel adventurous, you can also check out the Playgrounds section to run and play with p5.asciify example sketches in your browser, without installing anything! (✿◠‿◠)