v0.6.3 - Bugfixes

I did neglect making a release here for v0.6.1 and v0.6.2, but they also exist on npm, containing small bugfixes no one except me probably encountered so far. :)

This version also only contains a small bugfix:

• When updating the ascii font by loading a new one, the text ascii renderer in layer 4, which let's you mark and copy the generated ASCII art, now also has the font properly updated.

Full Changelog: v0.6.0...v0.6.3

v0.6.0 - Pixel density support & text renderer

Happy to bring more fun and important updates! :)

---

First, p5.asciify now supports any screen and it's pixel density. This is great, because the rendered ASCII outputs should now look much better on higher pixel density screens, like on a Retina display on a MacBook with a pixel density of 2 for example.

Previously, p5.asciify set the pixel density to 1 internally, so the grid of ASCII characters would at least properly display on all screens. Now, it looks even better on screens with higher pixel density.

---

Second, there is a new ascii renderer layer, which can be used to render the non-copyable ASCII output of the canvas onto a div, which overlays the canvas and contains the same ASCII output, but is copyable and can be pasted anywhere.

Based on the given settings, there might be a noticeable decrease in frame rate with this active.

To use this mode, you can pass a new object text to setAsciiOptions(), which can contain the following properties:

• enabled (bool)
• characterColor (hex string)
• characterColorMode: (int)
• backgroundColor: (hex string)
• invertMode: (bool)

Those options are similar to the same properties in other ascii renderers, which are already more properly documented in this repositories Wiki. Besides that, there is a new test sketch inside the /tests/ folder, which serves as a reference on how to use this text ascii renderer for now.

https://github.com/humanbydefinition/p5.asciify/tree/main/tests/text_ascii_renderer

---

Lastly, as already announced in previous release notes, some functionalities have been dropped and are no longer available.

• The whole effect logic, adding pre- and post- effects before/after the ascii rendering, have been removed.

  • As mentioned in another release note, there is now functionality present in p5.asciify, which allows to draw on top of the ASCII rendered result. To not convolute p5.asciify with non-textmode/ascii relevant stuff, those things are now up to the user.

• The brightness object can no longer be used inside setAsciiOptions(). Use ascii instead.

---

I'm still lacking behind in terms of the Wiki and documentation overall. That's what I want to focus on next before there are any new features added. Bugs or other issues will of course be handled directly and once one pops up, I'll try to get them sorted asap. Feel free to create an Issue or contact me directly if you notice any! :)

Cheers! 🍸

---

What's Changed

• 0.6.0 by @humanbydefinition in #17

Full Changelog: v0.5.0...v0.6.0

v0.5.0 - Revamped rendering pipeline & new advanced `custom` render mode

Really excited for this one! :) This update features a new and improved ASCII rendering pipeline, which allows for easy extension of future possible rendering modes, as well as more customizability. In terms of customizability, p5.asciify now offers a new renderMode "custom", which can be used instead of "brightness" or "accurate".

The new renderMode "custom" is more advanced and currently exposes 3 framebuffers to the user, where the user can draw on.

• First, there is p5asciify.customPrimaryColorSampleFramebuffer, which is a framebuffer that always matches the given ASCII grid dimensions, where the user can draw on. The colors on this framebuffer will correspond to the rendered ASCII characters and position on the grid.
• Likewise, there is p5asciify.customPrimaryColorSampleFramebuffer, which can be used similarly, but is used for the individual grid cell background colors.
• Finally, there is p5asciify.customAsciiCharacterFramebuffer, where each pixel is translated to one of the ASCII characters from the whole given font. For that to work, it's necessary to know how p5.asciify maps the given fonts characters into colors, which are then being translated and rendered as ASCII characters on the canvas. I will follow this up soon with a new page on the Wiki p5.asciify on it's new advanced features and how to utilize them. For the time being, I have already implemented a new sketch in the /tests/ folder, which showcases the new "custom" ascii renderer in-depth with an advanced example based on a generative artwork I did in the past.

The mentioned example sketch within this repositories /tests/ folder can also be found online: https://openprocessing.org/sketch/2468143

In the future, there will be more framebuffers exposed to individually define the behaviour of a given grid cell. For example, a framebuffer to individually define whether a grid cell should swap it's character and cell background color, as well as a framebuffer to define the angle of a character within it's grid cell, will definitely come soon. Apart from that, feel free to let me know if you got any fun stuff that could be exposed to customize the customized ascii rendering even more.

---

New functions

To provide even more customizability and to properly utilize the new "custom" ASCII rendering mode, there are two new global functions that are appended to the p5 context, meaning that they can be called globally when using p5.js in global mode. Instance mode users will know how to convert this.

First, there is setAsciifyPostSetupFunction(), where you can pass a function to. This function will be executed after the setup of p5.asciify has finished, allowing you access to it's properties, like the grid dimensions and much more, to properly set up eventual framebuffers that match this size, among other useful stuff.

There is also a new global function setAsciifyPostDrawFunction(), which also accepts a function, which will be called after the draw loop of p5.asciify ends, allowing to draw and apply custom drawing logic on top of the ASCII rendered result.

A more in-depth explanation will also be provided soon in the new advanced usage Wiki page, which will eventually come. For the time being, the previously mentioned example sketch - which is heavily commented - can be used, since setAsciifyPostSetupFunction() is used here in-depth. https://openprocessing.org/sketch/2468143

---

Deprecation warning

Going forward I want to keep the focus of this library more on the actual ASCII/textmode rendering side of things, meaning that the previously provided effect logic will be removed from version v0.6.0. Those effects were used to apply non-ascii related effects like kaleidoscope or chromatic aberration before or after the ascii rendering.

With p5.asciify now being more customizable than ever, those effects can now be implemented directly by the user before or after the rendering loop of p5.asciify within his/her own sketch, not convoluting this library and decreasing the file size.

---

As for the future, there will be more customization options to the "custom" rendering mode as mentioned, among other improvements to make this rendering mode more accessible possibly, since currently a deeper understanding of this libraries ASCII rendering process is required, as well as optimally some shader programming knowledge to make the most out of this rendering mode without sacrificing frame rate. Within the coming advanced usage page in the Wiki, I hope to provide some help on the first part at some point.

Besides that, I'm currently working on two new special rendering modes. First, a new ascii rendering mode that renders the grid as actual text that can be copied and pasted, since that is currently not possible. Next to this rendering mode, I'm working on a rendering mode that renders the grid of ASCII characters onto a grid of textured 3D cubes within 3D space, which can be explored using a free-flight camera.

Here's an example of the work-in-progress rendering mode that renders onto a grid of textured 3D cubes, taking a peak at the following example sketch: https://editor.p5js.org/humanbydefinition/sketches/8ED3-3Qp0

2024-11-21_23-43-58.mp4

Another one:

output_discordd.mp4

---

Looking forward to the further development of p5.asciify with all the new possibilities the new rendering pipeline opens up. :) Happy about any recommendations, feedback, feature requests, and other kind of contributions!

Cheers! 🍸

---

What's Changed

• 0.5.0 by @humanbydefinition in #16

Full Changelog: v0.4.1...v0.5.0

v0.4.1 - bugfix #1

In this tiny update, only a small bug has been fixed that was causing issues when changing the renderMode property between 'brightness' and 'accurate' during run-time after the user's setup() function somewhere in the draw()-loop.

Other than that, the 02_Usage section of the Wiki has been updated and now includes code examples for addAsciiGradient() and removeAsciiGradient(), as well as links to corresponding p5.js web editor sketches, where those examples can be viewed. For now, I consider the Wiki complete for now with those additions made. If you think there is something missing, incomplete or badly described in the Wiki, feel free to create an Issue on this repository.

All example sketches given in the 02_Usage section can also be found in the following p5.js web editor collection: https://editor.p5js.org/humanbydefinition/collections/Q7Uv8vnhJ

A more in-depth example on how ascii gradients/patterns are used with this library, can be found in the /tests/ folder of this repository, which is also available in the p5.js web editor: https://editor.p5js.org/humanbydefinition/sketches/_hg3L2cKk

Cheers! 🍹

Full Changelog: v0.4.0...v0.4.1

v0.4.0 - WebGL1 support, new ASCII conversion modes & functionality, CRT filter

My motivation is up again right now to improve p5.asciify, and I've got a ton of cool new features added to the library, which I've been cooking over the last few months.

---

First, all shaders are now rewritten in WebGL1, meaning that sketches using p5.asciify now also run on older and more obscure devices that do not support WebGL2. This does not affect any sketches and devices running WebGL2. A better compatibility is reached having the shaders in WebGL1 syntax. Devices that do not support antialiasing might be problematic as of now, which should only be a very tiny chunk.

---

Also, I've rewritten, improved, and simplified the overall ascii rendering pipelines, hopefully making them more accessible for potential contributors and curious minds. Additionally, new ASCII conversion modes/functionalities have been added, which is described in the following.

Basically, the ASCII conversion process now consists of 3 different layers:

Layer 1:

The first layer of ASCII conversion affects the entire canvas based on one of currently two methods. The already existing brightness-based conversion uses the brightness of the pixels to determine the ASCII character. Additionally, there is a new ascii conversion mode accurate, which can be used instead of the brightness mode. Which renderer is used in layer 1 can be changed at any time.

Layer 2:

The second layer is a new gradient/pattern-based ascii conversion, where a brightness range from 0-255 is mapped to a specific string of characters, and a customizeable gradient/pattern attached to it. Only the grid cells that fall within the specified brightness range will be converted to ASCII characters, which are drawn using the dynamic gradient/pattern.

Layer 3:

Lastly, the third layer is the already existing edge-based conversion, which uses a Sobel filter to detect edges in the image and convert them into ASCII characters.

--

Overall I still have to provide new examples here, but other than that, the Wiki and README have already been updated and include everything that's new and how it's being used. If you feel like there is anything that should be improved here to increase the user experience, feel free to add a new Issue to this repository.

Notably, the following parts of the Wiki are new or have been modified:

• 00_Home | Features (Features & ASCII Conversion parts)
• 02_Usage | setAsciiOptions
• 02_Usage | addAsciiGradient()
• 02_Usage | removeAsciiGradient()

To check out the new accurate ascii conversion mode or how the new gradient/pattern-based ascii conversion in Layer 2 looks like, make sure to check out the /tests/ folder of this repository. Additionally, I've also added those tests to a collection on the p5.js web editor:
p5.asciify | tests

Relevant test sketches on the p5.js web editor:
p5.asciify | accurate ascii conversion test
p5.asciify | gradients test

---

Finally, a new effect shader 'crt' has been added, which can be added to the rendering loop as either a pre- or post-effect, rendering before or after the 3-layered ASCII conversion. This CRT effect is based on the CRT filter shader released by Mattias Gustavsson on shadertoy.com. Link: MattiasCRT

This CRT effect is added similar to the already existing effects, which are already documented in the Wiki. The Wiki has also been updated and the 'crt' effect was added to the documentation.

---

All examples and tests have been updated to the latest p5.js version v1.11.1 as well as the latest p5.asciify version v0.4.0.

---

Deprecation notice:

Using setAsciiOptions(), the brightness options was previously used to change certain options for the brightness-based rendering process. This option will be replaced with ascii in the future. brightness can still be used and works the same as ascii right now. The brightness option will be removed in the future with p5.asciify v0.6.0.

The new ascii property which can be passed to setAsciiOptions() now, additionally has a new propert renderMode, which can be toggled between brightness and accurate to change the ascii conversion mode of layer 1.

---

While I feel like this release notes might be a bit messy, I think the README and the Wiki, along with the provided examples and tests are quite complete and showcase the functionalities, capabilities and possibilities that p5.asciify offers.

At some point, I also hope to offer my standardized and easy to read pull requests and release notes. 😄

If there are any issues you identify while using the library or reading the documentation, feel free to open an Issue on this repository if applicable, or reach out to me directly through my socials.

I hope you all enjoy those new features and I can't wait to see your creations. :) Feel free to reach out to me or tag me through my socials, so I can amplify your works using p5.asciify.

---

What's Changed

• Improved onboarding for contributors by @humanbydefinition in #13
• Rewrite of all WebGL2 shader into WebGL1 by @humanbydefinition in #14
• v0.4.0 by @humanbydefinition in #15

Full Changelog: v0.3.0...v0.4.0

v0.3.0 - bundling and compatibility fix

Based on multiple past reports informing about issues with this library when imported via npm, this update addresses and fixes the bundling issues to ensure compatibility with frameworks like Vite.

Specifically, I've tested this library imported via npm inside a Vite project and didn't encounter any issues, as well as the classic route, simply importing the library inside an html file via the script tag. When using p5.asciify in an environment like Vite, or imported via npm in general, make sure to follow the instructions on how to use it based on the instance mode example and instructions.

If you encounter any issues with the update, feel free to reach out or simply create an issue.

Special thanks to:

• @gridsystem - Issue reporting and suggestions #10

Changes:

• Fixed bundling issues to ensure the library works when imported via npm
• Improved compatibility with modern frameworks such as Vite
• Updated dependencies

_
Thank you for your feedback and contributions!

v0.2.1 - instance mode support bugfix #1

Directly after the last release I noticed that I made an error when bundling the minified version, causing the instance mode to not be properly usable there.

This has now been fixed and the global variable p5asciify, which you need to pass the p5 instance to, now won't get renamed during bundling process. As a result, the minified version now also works properly. :)

v0.2.0 changelogs

Hey everyone, based on a request I've been getting I am happy to announce that p5.asciify now officially and fully supports p5.js in instance mode!

Really happy that p5.asciify should now be usable for all p5.js users above version 1.8.0 using a canvas in WEBGL mode! :)

I've tested all existing functionality in instance mode and didn't encounter any more bugs or issues.
If you do, please feel free to reach out!

To use p5.asciify in instance mode, make sure to read through the short "Instance mode" section, either in the README or the Wiki. It's super simple and just requires an additional line of code in comparison with global mode. :)

Hope you enjoy, cheers!

v0.2.0 - instance mode support

Hey everyone, based on a request I've been getting I am happy to announce that p5.asciify now officially and fully supports p5.js in instance mode!

Really happy that p5.asciify should now be usable for all p5.js users above version 1.8.0 using a canvas in WEBGL mode! :)

I've tested all existing functionality in instance mode and didn't encounter any more bugs or issues.
If you do, please feel free to reach out!

To use p5.asciify in instance mode, make sure to read through the short "Instance mode" section, either in the README or the Wiki. It's super simple and just requires an additional line of code in comparison with global mode. :)

Hope you enjoy, cheers!

v0.1.5

• Fixed an error with the edge detection shader, where in some rare canvas sizes, there was a rounding error, causing the ascii edges to be offset to their correct position in x and/or y position.
• Kaleidoscope effect is now divided vertically.
  • Noticeable especially with 2 segments. Previously, they were divided horizontally, now vertically.

v0.1.4

Fixed another bug related to the pre- and post-effect queues I randomly encountered, where the first effect in the queue wasn't rendered, if the second (and last) effect wasn't enabled. This was mainly due to putting the ping-ponging in the wrong spot.