Chartacritty = Alacritty plus charts and other useless decorations

Last updated to:

• Alacritty Terminal v0.22.1-dev
• Alacritty (base) 0.14.0-dev

About

This is a modified version of Alacritty that includes:

• Drawing time series charts (prometheus based or internal counters)
• Drawing prometheus alerts, static reference units and other decorations on the time series (see below for example).
• Hexagon background decorations (Like James Webb Telescope, Starcraft).
• Lyon decorations (these are decorations that can be generated by creating lyon tesselations, text and wgpu not supported yet).
• Moon phase decorations (Gather moon-phase data and use lyon to draw it).
• "Suspended in a light beam" (from Sagan's poem The Pale Blue Dot). a beam of "light" that travels through the background decorations "now and then".
• Shader Toy Vortex Street
• Shader Toy Snowy

Lyon State

Nannou crate is not being worked on much and has some vulnerabilities, this project has moved to lyon.

Integrating Shader Toys

Uniforms

A uniform is a value that is sent from the rendering loop in the rust code to the shader code in the GPU.

Time

There are references to iTime in the shader, this should be the time in seconds since the application started. If your shader looks static and it should be moving (or is too fast). you must change the iTime, i.e. multiply or divide iTime in the shader by, say, 200., 1000., until you find a comfortable speed that is not too distracting to your workflow.

Resolution

The uniform iResolution is sent from the terminal SizeInfo to the shader on resizes and redraws. Generally you won't need to play around this uniform, unless you want to change a specific shader effect size.

Channel0

Some shaders reference iChannel0 and use it as a base. Where possible I change references to iChannel0 to the base color, which contains the hexagons, lyon polar clock, etc. There is one texture loaded in the terminal for the glyphs. You may get away with using it by adding one more uniform: uniform sampler2D iChannel0; at the top of the file. Mind you this texture is drawn below the visible screen, so you must substract some y values to get it to render on screen and not show completely empty.

mainImage modifications

The code on mainImage is called on shadertoys web ui for any shader. Since we use multiple shaders at the same time, they must be renamed to avoid collisions. For example, for vortex street I renamed mainImage to vortex_street.

Step by Step

Copy all the shader definition in shadertoys.

Imagine you have a someOperations() function that changes the colors/etc.:

vec3 someOperations(vec2 coord) {
  // ...
}
void mainImage (out vec4 fragColor, in vec2 fragCoord){
  // Any references to `fragCoord` must be replaced to `gl_FragCoord` in the new version.
  // Then we must find what sets the fragColor and return the final value
  fragColor = someOperations(fragCoord.xy);
}

Paste it above main() in alacritty/res/hex_bg.f.glsl The return type and the parameters of mainImage must be adjusted.

vec3 someOperations(vec2 coord) {
  // ...
}
// You may want to send the base color parameter, for example,
// The polar clock re-uses this same shader at this moment.
color_t vortex_street(color_t base){
  color_t res = someOperarions(gl_FragCoord.xy);
  // You may also want to preserve the alpha from the base color
  return vec4(res.r, res.g,  res.b, base.a);
}
void main() {
  // ...
  FRAG_COLOR = vortex_street(color);
}

Merge Requests are welcome

Feel free to add a merge request if you find a shader, one that looks nice... and not too expensive.

Deep dive into the code

An unnecessarily long version of the above explanation that ties the alacritty terminal and the decorations together can be seen in youtube

Why

I feel I got enough CPU/GPU power to add a few vertices and bridge generative art, monitoring and alacritty.

The goal is to make environment immerssive and learn about terminals, generative art, astronomy.

And just have fun in general...

TODO:

• The moon phase is not working as expected when moving to Lyon. The stroke-path tesselator vs fill-tesselator needs to be worked on.
• The toml configuration for the charts/decorations looks ugly since it's array based. As much as I hate yaml I don't know how to properly encode the same functionality there without making a mess.

Mirror the screenshot setup

key_bindings:
  - { key: Comma,    mods: Alt,     action: ToggleChartShow                  } # This hides the charts TODO hide decorations
charts:
  default_dimensions:
    x: 50
    y: 25
  position:
    x: 1000
  spacing: 10
  charts:
    - name: output newlines
      series:
        - name: output
          type: alacritty_output
          color: "0x00ff00"
          alpha: 1.0
          missing_values_policy: last
          collision_policy: Increment
    - name: input newlines
      series:
        - name: input
          type: alacritty_input
          color: "0xff0000"
          alpha: 1.0
          missing_values_policy: last
          collision_policy: Increment
    - name: load
      decorations:
        - type: reference
          value: 16.0
          color: "0x03dac6"
          alpha: 0.3
          height_multiplier: 0.05
        - type: alert
          target: prometheus alerts # ties to below series of the same name
          threshold: 0
          comparator: '>'
          color: "0xff0000"
      series:
        - name: load average 1 min
          type: prometheus
          refresh: 15
          source: 'http://localhost:9090/api/v1/query_range?query=node_load1'
          color: "0xbb86cf"
          alpha: 0.9
          missing_values_policy: avg
          collision_policy: Overwrite
          metrics_capacity: 30
        - name: load average 5 min
          type: prometheus
          refresh: 15
          source: 'http://localhost:9090/api/v1/query_range?query=node_load5'
          color: "0xba68c8"
          alpha: 0.6
          missing_values_policy: avg
          collision_policy: Overwrite
          metrics_capacity: 30
        - name: load average 15 min
          type: prometheus
          refresh: 15
          source: 'http://localhost:9090/api/v1/query_range?query=node_load15'
          color: "0xee98fb"
          alpha: 0.3
          missing_values_policy: avg
          collision_policy: Overwrite
          metrics_capacity: 30
        - name: prometheus alerts
          type: prometheus
          refresh: 15
          source: 'http://localhost:9090/api/v1/query_range?query=ALERTS'
          color: "0xff0000"
          collision_policy: Overwrite
          missing_values_policy: zero  # The ALERT type queries tend to disappear, so making them zero by default
          alpha: 0.0                   # This is meant only for alerting, so it will be set to transparent
    - name: memory
      series:
        - name: memory used
          type: prometheus
          refresh: 15
          source: 'http://localhost:9090/api/v1/query_range?query=node_memory_Active_bytes'
          color: "0xcf6679"
          alpha: 1.0
          missing_values_policy: avg
          collision_policy: Overwrite
          metrics_capacity: 30
        - name: memory total
          type: prometheus
          refresh: 15
          source: 'http://localhost:9090/api/v1/query_range?query=node_memory_MemTotal_bytes'
          color: "0xe1f5fe"
          alpha: 1.0
          missing_values_policy: avg
          collision_policy: Overwrite
          metrics_capacity: 30
decorations:
  decorators:
    - type: Triangles
      props:
        type: Hexagon
        props:
          vertex_color: "0x1958a7"
          center_color: "0x000000"
          alpha: 0.05
          radius: 100
    - type: Triangles
      props:
        type: Lyon
        props:
          color: "0x1958a7"
          alpha: 0.2
          radius: 100 # This needs to be the same as the above radius or the hexs won't match