• Fixed rendering issues on Android devices

  • textmode.js should now be compatible across all devices again that support WebGL2. 🤞
  • Let me know if you run into any issues on your end!

• Fixed loading screen error handling

  • Calling t.loading.error() or phase.fail() now works as expected.

This update adds onto the layering system introduced in the v0.7.X versions, and gifts each layer its own individual font and grid to modify. While previously all layers shared the same grid and font, you can now do multi-layered, multi-grid, and multi-font textmode creations.

Existing functionality like the textmodifier.grid getter are now layer-aware too. This means that you'll get the grid of the layer currently drawing to when called inside its draw-callback. Otherwise, the non-removeable base layer grid is returned.

Grids in general have also been adjusted: Instead of being forced to have a responsive number of columns and rows based on the canvas pixel dimensions, font, and font size, you can now opt-out of this responsiveness, and define the number of columns and rows statically. When they are statically set, they won't change when calling textmodifier.resizeCanvas() afterwards. Calling grid.responsive() brings back the responsive behaviour.

Touch and mouse controls have also been adjusted, and they now always reference the top most layer/grid by default. You can also opt-out here, and define the grid that should be referenced statically instead. Additionally, the touch and mouse positioning is now also center-based, matching the drawing API. This makes it easier to integrate mouse/touch controls into textmode.js sketches I hope.

Video preloading and applying color filters to images/videos have been removed from the core library, since they are very specific features. A color filter will soon be available on a layer basis via the textmode.filters.js add-on library. For video preloading, you'll need to write your own logic to prepare a video into a sequence of TextmodeImage instances for the same effect.

With this update, I feel like anything 2D textmode-related, and far beyond the limitations of it, is entirely possible with textmode.js. I still got some 3D related-features up my sleeve that I would like to add in the future, but for now I will focus on the documentation and ecosystem growing around the library. This means that there likely won't be any bigger new features coming in the near future, but mostly bug fixes and overall improvements.

If you'd like to help with the documentation, you can learn more here: https://github.com/humanbydefinition/code.textmode.art
Also feel free to check out the Discord server: https://discord.gg/sjrw8QXNks

Thanks for being around, hope you'll have great christmas days! 🎅

This small update fixes smaller issues that got introduced with the last v0.7.0 update related to the new layering functionality.

• All layer-related textures are now resized properly when the font or font size is changed.
• Added a clear() method to the layer manager (t.layers), which can be used to remove all user-defined layers.
  • Useful for integrating textmode.js into live coding environments when code is re-evaluated.
• Added a rotateZ(degrees) for textmode layers, which is applied when all textmode/ASCII layers are composited into a single texture.

• Added support for multi-layered textmode scenes. Control each layers opacity, blend mode and xy-offset to create unimaginable compositions.
• Added filters like grayscale that can be applied in sequence on any layer, or globally on the final result.
  • Extensible for your own filter shaders.
  • A new add-on library for filters: https://github.com/humanbydefinition/textmode.filters.js
    • Feel free to contribute!

This release is also compatible with previous versions.

With that out of the way, i'm happy to finally release v0.6.0, probably one of the biggest updates, bringing textmode.js into an even more mature state.

It's been a while and I might miss certain details in this post, but the documentation at https://code.textmode.art/ has been fully updated, including updated and more visual example sketches throughout the documentation. The documentation still needs a lot of work, and i'm currently working on open-sourcing it to allow others to participate.

Changes

• In certain scenarios the performance has doubled.
  • A stress test where I previously only was able to render about 8000 rectangles per frame at a stable 60 FPS, now runs at a stable 60 FPS with about 17000 rectangles.
• ANIMATED & FULLY CUSTOMIZEABLE LOADING SCREEN (looking at certain other creative coding libraries here) | API docs
• As mentioned in the warning at the top of this post, geometries like rect(), ellipse() and arc() no longer receive positional arguments.
• Position (0, 0, 0) now is the center instead of the top left, matching other 3D graphics programming libraries
• Added native support for loading and displaying videos | Images and videos docs
• Videos and images have a new method .colorFilter(['#FF0000', ..]);, where you can apply a color filter to the source before it gets converted to textmode.
• Enhanced plugin system to allow users to author custom conversion logic for the source/image/video conversion. textmode.js only has a single conversion mode 'brightness' implemented, but I'll release a first conversion add-on library soon, with instructions how to get started yourself.
• All geometries can now be placed/rotated freely in 3D space. (had to postpone 3D geometries and lighting unfortunately, but i hope to get it to a releasable state soon)
• Added ortho() to apply orthographic projection to the scene. | API docs
• Rewrote some internal WebGL1 shaders to WebGL2, so all shaders are written in WebGL2 now. This was a desperate attempt to fix an inconsistent rendering issue for a user, which I was not able to recreate myself. This fixed it.
• Fixed a font parsing/drawing issue related to certain types of glyphs in fonts, which would break the sketch. Fonts like C64_Pro_Mono were affected in previous versions.
• textmode.js builds without the default UrsaFont are no longer available.
• Textmode render targets reduced from 5 to 3.

There's probably some more, but that should do. :) As mentioned, the content at https://code.textmode.art has been updated quite a lot for this latest version, allowing you to get started with textmode.js v0.6.0.

cheers! 🍹

Happy to report that smooth GIF and video exporting directly from the canvas are finally here. :)

While all the existing export functionality has been removed from the core textmode.js library, all known and mentioned new export formats are now available through an add-on library textmode.export.js.

Make sure to check out the README of the add-on library to learn how to install and use the add-on library with textmode.js. It is really simple, and besides controlling the export process programmatically, textmode.export.js also comes with a handy overlay UI that can be disabled optionally.

The Exporting documentation has been updated accordingly: https://code.textmode.art/docs/exporting.html
Make sure to give the updated sections a read to properly utilize the export functionality.

Additionally, textmode.js now offers a plugin/add-on system, which textmode.export.js uses to function. This system is still heavily work-in-progress and might change quite a bit in future updates. No proper public documentation has been done for the plugin system yet, and I don't recommend getting into add-on development just yet. For curious minds: Unlike textmode.js, textmode.export.js is already fully open-source. :) textmode.js will follow at some point.

Cheers!

Touch events are here! The full touch API is now live, bringing taps, swipes, pinches, rotations, and raw touch streams to your textmode creations. Build mobile-first interactive experiences with the same grid-based coordinate system you already know.

• Gesture recognition: tap(), doubleTap(), longPress(), swipe(), pinch(), rotateGesture()
• Raw touch tracking: touchStarted(), touchMoved(), touchEnded(), touchCancelled()
• Multi-touch support: Access all active touches via t.touches array
• Learn more in the updated event handling guide.

Dynamic cursor control via textmodifier.cursor() lets your sketches adapt the canvas cursor for different interaction modes. Show crosshairs while drawing, pointers for clickable areas, or custom cursors for specialized tools.

// Show crosshair when drawing
t.mousePressed(() => {
    t.cursor('crosshair');
});

// Reset to default when released
t.mouseReleased(() => {
    t.cursor();
});

Experimental alpha support in charColor() and cellColor() . You might not get what you expect. Pass the optional fourth parameter to start experimenting:

t.charColorMode('fixed');
t.charColor(255, 0, 0); // Red characters
t.cellColorMode('fixed');
t.cellColor(0, 0, 0, 0); // Transparent cell background

That's it for this release - enjoy building with touch! 📱✨

textmode.js just got a lot better!

textmode.js now provides event handling for mouse and keyboard actions, allowing you to creative interactive sketches and games. Touch actions will follow.

• Learn more here: https://code.textmode.art/docs/events.html

You can now create framebuffers for offscreen rendering. Additionally, images (png, jpg, ...) can now be loaded and displayed as a textmode representation that runs through an adjustable brightness converter. Both framebuffers and images can be drawn using textmodifier.image(img | framebuffer, x, y, width, height);.

• Learn more here: https://code.textmode.art/docs/advanced.html

With framebuffers and shaders you can now also perform advanced operations like multi-stage shaders and feedback loops.

textmode.js can now be applied to virtually any <canvas> or <video> element with a newly added overlay mode, where textmode.js applies it's canvas on top of the source, automatically resizing and repositioning to match the target.

The content from the target is fetched and converted to textmode, similar to how images are currently handled.

With overlay mode active, you get access to textmodifier.overlay, which is a TextmodeImage instance that is constantly capturing the content of the target. You can draw it anywhere onto the textmode.js canvas using tm.image(tm.overlay, x, y, width, height);.

• Learn more here: https://code.textmode.art/docs/framework-integration.html
  • Includes examples for p5.js, hydra-synth, three.js, and more :)

You can even inject textmode.js into YouTube videos using the DevTools console, allowing you to enjoy your favorite music videos and ads in textmode :)

I think that's about it for now, cheers!

surprise! i made a creative coding library that turns your canvas into a sentient textmode art machine

what even is this:

• draws characters really fast (like, REALLY fast)
• uses fancy webgl magic i don't fully understand
• has 5 render targets because why not
• exports to svg because someone asked nicely
• zero dependencies (i did everything myself like a fool)
• typescript because i have standards (barely)

how to use:

1. npm install textmode.js
2. import { textmode } from 'textmode.js'
3. ????
4. textmode art profit

links:

• 📚 docs: https://code.textmode.art (actual documentation, shocking)
• 🎨 web editor: https://editor.textmode.art (break things safely)
• 💬 discord: https://discord.gg/sjrw8QXNks (come yell at me about bugs)

built with <3 and questionable life choices

p.s. it only works in webgl2 browsers because i refuse to support ie6