p5.js `_setupDone` always `false` in `P5LIVE`

[humanbydefinition]

Hi @ffd8!

I'm developing p5.asciify and played around with it in P5LIVE. Since my add-on library in some cases checks the p5.js internal _setupDone flag to decide on certain actions, I noticed that the _setupDone flag always seems to remain false in P5LIVE.

At first I thought the reason might be a bad p5.js version, but when running P5LIVE locally with a trusted p5.js version, _setupDone still always seems to remain false.

Personally it's not too much of a big deal, since I can just call _setupDone = true; in my case at the appropriate time. Still, I wanted to get this out, since it might also affect the compatibility of P5LIVE with other p5.js add-on libraries.

Cheers! 🍹

[ffd8]

Hey @humanbydefinition loooove your lib! Some time ago after talking with Flor, I got it working without any issues in P5LIVE – tried to reload that same sketch today = broken... I thiiiink it's probably related to this issue with p5.js, which makes me wonder if the scope of _setupDone changed recently? The suggestion was to use _renderer._pInst._setupDone rather than what I see in your lib of _pInst._setupDone (at least that's what I saw in the v0.6.3 I tested... When trying to test many older version of p5.js within their editor, I never got it to produce a true until checking print(_renderer._pInst._setupDone), which worked from v0.7.0 » v1.11.7 (randomly testing various ones)

[ffd8]

Yup – indeed, by adding _setupDone = true; to the bottom of the setup() my previous sketch in P5LIVE is working again! Sooo, probably worth chiming in on the p5.js issue above and ask if/why something changed (or just try to catch both variables?).

[humanbydefinition]

Hey again @ffd8!

Thanks for the kind words and all the info :) Looking through the linked issue, it doesn't seem like a priority for them to adjust since there's a workaround. I don't mind personally, I have updated p5.asciify to become independent from this flag with the latest release already. So no more _setupDone = true; necessary in P5LIVE. ✌️

With the more recent p5.asciify releases, I did some improvements targeted towards live coding usage. From my testing so far, my lib seems fully live codeable now in your editor 🥳 I hope to get a guide out in the coming days. 🤞

[ffd8]

@humanbydefinition Great to hear – I'm really curious if/how/when this _setupDone became an issue.. I never used it before, so it's surprising news – but the fact it worked earlier, then stopped, means something must have changed – maybe there was previously an alias pointing to the more official internal way of reaching it.

In any case, great it's working again – I just checked with your v0.10.0 and it works smooothly without the _setupDone! Just tested for live-coding and the secret to do it within P5LIVE, is that you should re-call the setupAsciify() upon changes within the //sandbox zone (used for hydra or hy5 code), so it triggers an update eval without reloading the whole sketch, ie:

P5LIVE + asciify demo

(however, FYI, this is a problem if reloading the whole sketch and that call of 'setupAsciify()` is still in the sandbox, getting loaded two early... hmm maybe the setupAsciify function should also have a try/catch for if the setup has happened yet?

ahh nevermind – just realized one can move aspects of that initial setupAsciify() function directly into the draw, where it's no problem to softCompile:

brightnessRenderer.update({
    characters: "hello world",
});

[humanbydefinition]

Hello once more @ffd8!

Thanks for the info regarding the //sandbox usage, I'll look into that more. Besides that, I have implemented functionality in p5.asciify to disable hooks my library attaches to the p5.js lifecycle entirely.

This way, you don't need to have a setupAsciify() function, and you set up everything in setup() yourself. Likewise, you don't need a drawAsciify() function to draw on top of the asciified texture, but manage everything yourself in draw().

I did this mainly because P5LIVE didn't seem to update stuff I've changed in drawAsciify() when doing a soft compile. I assume I could've gone the //sandbox route here too though, now that I know about it. 🕺

P5LIVE | Hydra + p5.asciify example

This example sketch showcases what I'm talking about. I think this is a good way to live code with p5.asciify, but there are options as you suggested, which is great 🍀

There's also a dedicated documentation page for p5.asciify now, if you haven't seen it already 😎 https://p5.textmode.art/
The live coding guide is still work-in-progress though.

[ffd8]

heyhey @humanbydefinition !
Super cool – just checked out your demo and can highly recommend for the live-coding (especially if using hydra) to use my HY5 bridge for p5.js + hydra = reduces a lot of that code to the background and just need 1-line to send p5 into hydra and vice versa. Here I could reduce the code to ~60 lines (could be less w/o comments) by using this bridge and using p5.asciify in perhaps a simpler way = just asciify the whole p5 canvas!

P5LIVE - HY5 + p5.asciify example

To note when mixing p5.js + hydra, one has to make an alias of hydra's noise as noize (could be anything, but i like z) – since they both have the global function (in Flors example, it works upon initial load, then breaks upon live-coding changes due to hydra's noise going poof.

I also tried moving all of the code from setupAsciify() to the regular setup(), but it didn't trigger.. guess it's a timing issue – was just curious, since any changes to setupAsciify() in P5LIVE don't trigger an update, since that function isn't called manually in the setup etc – so one has to do a hardCompile() (CTRL + SHIFT + ENTER) to see the change = not an issue, when only setting up initially then making the real livecoded changes within the draw to overwrite options.

I'll definitely add a built-in example for P5LIVE's demos/libs/ since it's so much fun to play with. For all demos I try to have a both CDN + local lib for offline access... as that's developed, I'd add a version to the includes/libs, which usually doesn't get updated so often, so let me know when it's a good time to grab it and dev is slowing down (if that's a thing...).

yes yes, this past semester I pointed one of my students to use the lib for their generative design tool and discovered how rich and detailed the docs got since I last checked it out! veeery nice!

[humanbydefinition]

Hey hey @ffd8, thanks again for all the input!

To stay on-topic for a second, the linked issue on the p5.js repo has new comments. I also agree with what Dave was implying, which is why I also got rid of this dependency in p5.asciify.

The coming p5.asciify v0.10.0 (currently in beta) will be quite good for live coding purposes, spent quite a lot of time now optimizing it for this very purpose. I'm happy to do a pull request once that version is fully released. I'm also happy to provide some built-in examples for P5LIVE. 🕹

Also huge thanks for bringing up hy5! I checked out your remix and quite like it. I would love to feed the asciified p5.js canvas back to hydra to perform final transformations as you indicated, but I haven't figured that out yet in P5LIVE. How exactly do I do that?

I have a working flok.cc sketch going that I would like to reproduce in P5LIVE, which contains this missing final hydra rendering step.

The P5LIVE sketch I'm looking to add the final hydra rendering step to with hy5, currently looks like this: P5LIVE | hydra + p5.asciify

To run the finished flok.cc sketch, you can paste the following sketch code. I'm sure hy5 could be integrated here nicely as well.

Thanks a million for all the help so far, cheers! 🙏

/*
	hydra → p5.js → p5.asciify → hydra pipeline
	by @humanbydefinition (https://github.com/humanbydefinition)
	p5.asciify live coding guide: https://p5.textmode.art/docs/guides/livecoding
 */

// Import `hydra-synth` and `p5.asciify`
await loadScript("https://cdn.jsdelivr.net/npm/hydra-synth@1.3.29/dist/hydra-synth.min.js");
await loadScript("https://cdn.jsdelivr.net/npm/p5.asciify@0.10.0-beta.16/dist/p5.asciify.umd.min.js");

// Set the error level for `p5.asciify`
// Using `WARNING`, p5.asciify won't crash if you pass illegal parameters to p5.asciify functions, and keep it's previous state instead
p5asciify.setErrorLevel(P5AsciifyErrorLevel.WARNING);

// Initialize the first hydra canvas, which will be passed to the p5.js canvas
window.hydraCanvas = document.createElement('canvas');
hydraCanvas.width = window.innerWidth;
hydraCanvas.height = window.innerHeight;
hydraCanvas.style.display = 'none';
document.body.appendChild(hydraCanvas);

// Create the initial hydra object and attach it to the global context, so we can reference it at any time
window.h1 = new Hydra({
  canvas: hydraCanvas,
  detectAudio: false,
  makeGlobal: false
});

// Run the initial hydra simulation (This block can be soft-compiled during run-time)
h1.synth.osc(60, 0.1, 1.5)
  .rotate(0.3)
  .mult(h1.synth.osc(20, -0.1, 1).modulate(h1.synth.noise(3, 1)))
  .color(0.8, 0.6, 1.0)
  .out();

// Create a new p5.js instance and attach it to the global context
window.p5i = new P5({mode: 'webgl'})
p5i.hide();

// By nature, flok loads p5.asciify without hooks enabled
// That's why we initialize and set up `p5.asciify` manually
await p5asciify.init(p5i);
await p5asciify.setup();

// Create a p5.Graphics object which will contain the initial hydra texture to asciify
window.pg = p5i.createGraphics(window.innerWidth, window.innerHeight);

// Fetch the default asciifier as the first asciifier
window.asciifier1 = p5asciify.asciifier();
window.brightnessRenderer1 = asciifier1.renderers().get("brightness");
	
// Add a new asciifier as the second asciifier
window.asciifier2 = p5asciify.add();
window.brightnessRenderer2 = asciifier2.renderers().get("brightness");

// Modify the font sizes (Can be soft-compiled during run-time)
asciifier1.fontSize(16);
asciifier2.fontSize(32);

// Empty grid cells will be left transparent in the asciified textures (Can be soft-compiled during run-time)
asciifier1.background([0, 0, 0, 0]); 
asciifier2.background([0, 0, 0, 0]);

// Update the properties of the brightness renderers (Blocks can be soft-compiled during run-time)
// When properties are updated in `draw`, they have priority over the definitions here
brightnessRenderer1.update({
    enabled: true,
    characters: " .:-=+*#%@",
    characterColor: "#ffffff",
    characterColorMode: 'sampled',
    backgroundColor: "#000000",
    backgroundColorMode: 'fixed',
    invertMode: false,
    rotationAngle: 0,
    flipHorizontally: false,
    flipVertically: false,
    brightnessRange: [0, 255],
  });

brightnessRenderer2.update({
    enabled: true,
    characters: " .:-=+*#%@",
    characterColor: "#ffffff",
    characterColorMode: 'sampled',
    backgroundColor: "#000000",
    backgroundColorMode: 'fixed',
    invertMode: false,
    rotationAngle: 0,
    flipHorizontally: false,
    flipVertically: false,
    brightnessRange: [0, 255],
  });

// p5.js draw loop (The whole function can be soft-compiled during run-time)
p5i.draw = () => {

  // Update properties of the p5.asciify renderers during run-time
  brightnessRenderer1.characters(" .:-=+*#%@");
  brightnessRenderer1.invert(false);
  brightnessRenderer1.backgroundColorMode("sampled");
  brightnessRenderer1.characterColorMode("fixed");
  brightnessRenderer1.rotation(0); // in degrees
  brightnessRenderer1.brightnessRange([0, 63])
  //...
  
  brightnessRenderer2.brightnessRange([64, 255]);
  //...
  
  // Update asciifier properties like the font size, ..
  asciifier1.fontSize(16);
  //...

  // Clear pg and re-draw the hydra canvas to it.
  pg.clear();
  pg.drawingContext.drawImage(hydraCanvas, 0, 0, p5i.width, p5i.height);

  // Update the p5.asciify main framebuffer with the content to asciify
  p5asciify.sketchFramebuffer.begin();
  p5i.clear();
  p5i.image(pg, -p5i.width / 2, -p5i.height / 2);
  p5asciify.sketchFramebuffer.end();
  
  // Call `asciify()` manually to generate the asciified textures
  asciifier1.asciify();
  asciifier2.asciify();

  // Draw the asciified texture to the canvas.
  p5i.background(0);
  p5i.image(asciifier1.texture, -width/2, -height/2);
  p5i.image(asciifier2.texture, -width/2, -height/2);

  // `drawAsciify` area
  // With the asciified textures drawn to the canvas, we can draw on top here

  // Draw text on top of the asciified content
  p5i.textFont(asciifier1.fontManager.font);
  p5i.noStroke();
  p5i.textSize(64);
  p5i.fill(255);
  p5i.textAlign(p5i.CENTER, p5i.CENTER);
  p5i.text("live coding", 0, -100);
  p5i.text("with", 0, 0);
  p5i.text("p5.asciify", 0, 100);
}

// Resize the p5.js canvas and pg (holds the initial hydra texture to asciify)
// `p5.asciify` is responsive by default with canvas size changes, updating the grid dimensions
p5i.windowResized = () => {
  p5i.resizeCanvas(p5i.windowWidth, p5i.windowHeight);
  pg = p5i.createGraphics(p5i.windowWidth, p5i.windowHeight);

  // Also update the resolution of the initial hydra canvas
  h1.setResolution(p5i.windowWidth, p5i.windowHeight);
}

// Initialize the final hydra canvas with the p5.js texture
s0.init({ src: p5i.canvas });

// Run the final hydra simulation (Block can be soft-compiled during run-time)
src(s0)
  .modulateRotate(osc(8, 0.15).kaleid(8), 0.8)
  //.color(1.1, 0.9, 1.3)
  .contrast(1.2)
  .modulateScale(noise(1.5, 0.08), 0.15)
  //.blend(src(s0).shift(0.01, 0.01, 0.01), 0.8)
  .out();

[ffd8]

Heyhey – quick chime in – i'm a big fan of least lines of code possible when live-coding, so HY5 can def help for the pipeline you want to do. did some tests and it's not working so well to send p5 back into the initial hydra that gets asciify'ed (barely visible). I think it works best to go p5/p5.asciify » hydra (like the image pasted above), or hydra » p5/p5.asciify » hydra2 for doing wild hydra stuff on top of the ascii (to break/distort the grid of ascii).

To demo this, I added p5.asciify to the HY5 demo for hydra » p5 » hydra, which lets you quickly make a 2nd instance of hydra: _hy5_hydra_p5_hydra + p5.asciify

PS – also check out snippets in P5LIVE, attached is a basic one (open snippets, ALT + SHIFT + S then import it) – I still have to resolve the issue of already having a let libs = [] then adding a snippet with more... for now have to manually cut+paste.. but makes it nice and easy to quickly test out p5.asciify on any sketch.

P5L_SNIPPET_p5.asciify_20250610013741.json

PPS - P5LIVE is already resizing the canvas to fullsize on resize, so no need to add that function at the bottom.

[humanbydefinition]

Awesome, thanks a bunch! 🤟

Your sketch looks sick, thanks for sharing! That's exactly the kind of pipeline I was looking for. I hope to integrate those techniques, alongside hy5, into the live coding guide on my website soon.

This weekend I plan to release another small patch for p5.asciify. Then, I'd love to integrate this version into P5LIVE! I've also been playing around with the snippets feature, and it's quite nice. I intend to do a pull request in the near future which'll include p5.asciify, alongside some basic demo snippets to use.

I personally like to use p5.asciify without most hooks in live coding environments, since you're not dependent on setupAsciify() and drawAsciify() to do anything you want.

In P5LIVE, making changes to drawAsciify() are only applied once a full reset is done, which is why I disable the relevant hooks to handle everything in draw() to allow for soft compiles.

P5L_SNIPPET_p5.asciify-no_hooks_20250612223123.json

As I'm not a live coder, I don't really know what kind of basic p5.asciify snippets would be the most useful. This snippet basically expects you to have a completely new/empty sketch with just a setup and draw function, with the pre-defined createCanvas call updated to a WEBGL canvas. Then it's just a blank canvas, where a user can start adding stuff. It's really bare-bones though, and I'll probably add more to it like some p5.asciify function calls to play around with during run-time.

[ffd8]

Sure – and let me know if you'd like a glance over planned livecoding guide for website.

Regarding PR, thanks for making it! nevertheless, I've decided to steer the demo snippets into a more agnostic live-coding direction (mainly audio, midi, osc, font, ____) and I'll probably remove the ones there for hydra + hy5, since they can be easily added via 'ace snippets' which are similar but different- type one word then hit tab... what I'll work on soon is a built in extender for those ace-snippets, and create a repo dedicated for user-contributed P5LIVE snippets, which can be exported and imported individually. Then this could be one of those for the community, added on demand (ooh a browse + 'add me' manager would be sweeet). With the snippet above I got two errors, first I didn't have the lib installed yet and 2nd, I wasn't in WEBGL mode, thus I suggest the following tweaks to it:

// add to libs:
`https://cdn.jsdelivr.net/npm/p5.asciify`

// add to top of setup(), simply overwrites createCanvas
createCanvas(windowWidth, windowHeight, WEBGL)

But for a snippet, I'd def try to reduce as much code/comments as possible, so in live-coding context there's only the absolute necessary bits. In fact, I was just experimenting and saw that one can simply disable EVERYTHING, only include the lib and get started with asciifying the canvas! That's rad – of course also interesting to draw on top of that layer, so then it just needed 3 lines of code in the draw:

p5asciify.deactivateHook("post");
p5asciify.sketchFramebuffer.end();
p5asciify.asciify();

Of course some very useful code missing is setting font-size + characters, which would be cool if it was possible to do the following without an asciifier and brightnessRenderer for the simplified basic mode:

p5asciify.fontSize(8);
p5asciify.characters(" .:-=+*#%@");
p5asciify.invert(true);

(your lib has loads of great features and customization, but I guess I'm advocating for a very simplified way to adjust things all tucked behind that single p5asciify object. Can pick up discussion on this idea within your own repo if it makes sense.

Regarding a demo file to include in the libs, let's start a direct discussion about a single smallest and exciting example to include.