Discussion
Loading...

Post

Log in
  • About
  • Code of conduct
  • Privacy
  • Users
  • Instances
  • About Bonfire
Karsten Schmidt
Karsten Schmidt
@toxi@mastodon.thi.ng  ·  activity timestamp 2 weeks ago

Welcome to #TextModeTuesday! For the next few weeks I'll be posting some projects & experiments related to this just spontaneously made up hashtag. If you've got something related to interesting text-based art/experiments, patterns, ASCII-art, ANSI-art etc. please share — the more, the merrier...

To start with, here's an experiment from a few years ago to demonstrate some capabilities of https://thi.ng/text-canvas and https://thi.ng/shader-ast to create a raymarching renderer outputting images in text mode (with customizable character sets to represent luminance).

Demo:
https://demo.thi.ng/umbrella/ascii-raymarch/

Commented source code:
https://github.com/thi-ng/umbrella/blob/develop/examples/ascii-raymarch/

Hotkeys:

- c = toggle color on/off
- t = toggle theme switch
- space = toggle update

WebGL version of the same scene (using an almost identical TypeScript shader source, only here transpiled to GLSL and using slightly different colors):
https://demo.thi.ng/umbrella/shader-ast-raymarch/

#TextModeTuesday #ASCIIArt #ThingUmbrella #TypeScript #ShaderAST #Raymarching

Your browser does not support the video tag.
This video cannot be previewed
Open original
Screenrecording of the linked demo, showing a rotating infinite 3D grid of colorful cube-like structures with smooth intersections. Every few seconds the animation cycles between different character sets used to represent the rendered frames as text.
https://demo.thi.ng/umbrella/shader-ast-raymarch/
GitHub

umbrella/examples/ascii-raymarch at develop · thi-ng/umbrella

⛱ Broadly scoped ecosystem & mono-repository of 210 TypeScript projects (and ~185 examples) for general purpose, functional, data driven development - thi-ng/umbrella
https://demo.thi.ng/umbrella/ascii-raymarch/
thi.ng/shader-ast

DSL to define shader code in TypeScript and cross-compile to GLSL, JS and other targets

thi.ng/text-canvas

Text based canvas, drawing, plotting, tables with arbitrary formatting (incl. ANSI/HTML)

  • Copy link
  • Flag this post
  • Block

bonfire.cafe

A space for Bonfire maintainers and contributors to communicate

bonfire.cafe: About · Code of conduct · Privacy · Users · Instances
Bonfire social · 1.0.1-beta.35 no JS en
Automatic federation enabled
Log in
  • Explore
  • About
  • Members
  • Code of Conduct