JSFiddle - React, Tailwind, and code Playground

by Andrew Poes

JavaScript

/* vec4 get_atlas_pixel(int index, vec2 uv) {
  vec2 grid_size = atlas_size / atlas_char;
    int grid_x = index % int(grid_size.x); 
  int grid_y = index / int(grid_size.x);
  vec2 atlas_position = vec2(float(grid_x) * atlas_size.x, 
                             float(grid_y) * atlas_size.y);
    // atlas_position += uv * atlas_char;
  vec2 atlas_uv = atlas_position / atlas_size;
  return texture2D(atlas, atlas_uv);
}

void main() {
  float grid = 20.0;
  float grid_2 = grid * 0.5;
  vec2 grid_size = vec2(grid);
  vec2 position = vUv * viewport_size;
  vec2 grid_position = floor(position / grid_size) * grid_size;
  vec2 grid_uv = (grid_position + grid_2) / viewport_size;
  vec4 pixel = texture2D(tx, grid_uv);

    float grey = pixel.r * 0.21 + pixel.g * 0.71 + pixel.b * 0.07;
  int char_index = int(float(atlas_max) * grey);
  vec2 atlas_uv = (position - grid_position) / grid;
  gl_FragColor = get_atlas_pixel(char_index, atlas_uv);
} */

const viewport_size = {x: 1280, y: 720};
let uv = {x: 0, y: 0};

const grid = 20.0;
const grid_2 = grid / 2.0;
let grid_size = {x: grid, y: grid};
let position = uv * viewport_size;
let grid_position = {x: Math.floor(position.x / grid_size.x), y: Math.floor(position.y / grid_size.y)};
let pixel = {r: 1, g: 0, b: 0, a: 1};
let gray = pixel.r * 0.21 + pixel.g * 0.71 + pixel.b * 0.07;