text: import React from "react";
  import { Shaders, Node, GLSL, LinearCopy, Uniform } from "gl-react";
  import MersenneTwister from "mersenne-twister";
  
  export const n = 59;
  export const title = "Pixels 256";
  export const description =
    "There will be only 256 patterns generated by this single fragment shader.";
  
  export const Shader = ({ time, n, exporting }) => (
    <Main n={n + 1 + (exporting ? 0 : Math.floor(time))} />
  );
  
  const Main = React.memo(({ n }) => {
    const rng = new MersenneTwister(n % 256);
    const s1 = rng.random();
    const s2 = rng.random();
    const s3 = rng.random();
    const s4 = rng.random();
    const s5 = rng.random();
    const s6 = rng.random();
    return <Node shader={shaders.node} uniforms={{ s1, s2, s3, s4, s5, s6 }} />;
  });
  
  const shaders = Shaders.create({
    node: {
      frag: GLSL`
  precision highp float;
  varying vec2 uv;
  uniform float s1,s2,s3,s4,s5,s6;
  
  float m = 1. + floor(6. * s3 * s3 * s3);
  float b = 1. + floor(10. * s2 * s2 * s2);
  float unzoom = floor(8. - 8. * s6 * s6 + s1 * 10.);
  
  // https://iquilezles.org/www/articles/palettes/palettes.htm
  vec3 palette( in float t, in vec3 a, in vec3 b, in vec3 c, in vec3 d ) {
    return a + b*cos( 6.28318*(c*t+d) );
  }
  vec3 color (float t) {
    return palette( t + 0.2 * s5, vec3(.5), vec3(.6), vec3(1.0, 1.0, 1.0),
      vec3(
        0.8 * s1,
        0.3 * s2,
        0.1 + 0.3 * s3
      )
    /*
    vec3(
      0.5 + 0.3 * s1,
      0.8 - 0.2 * s3,
      1.0 - 0.2 * s2
    )
    */ );
  }
  float cell (vec2 p) {
    return mod(mod(
      0.001 * s3 * (cos(8. * s4 * p.x) + sin(8. * s4 * p.y)) +
      (floor(8. * mix(p.x, p.y, s4)) / 8.0) *
      floor(s6 * p.x + s5 * s5 * 20. * p.y)
    , b), m);
  }
  void main() {
    vec2 offset = vec2(-.25 * unzoom, -.25 * unzoom);
    vec3 c = color((.1 + .3 * s6 * s6) * cell(floor(uv * unzoom + offset)));
    gl_FragColor = vec4(c, 1.0);
  }
  `,
    },
  });
  