<commit_before><!doctype html>
<html><head><meta charset="UTF-8" />
<title>Cyclic cellular automaton</title>
<style type="text/css">
  body { background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAAAAAA6mKC9AAAA9ElEQVQYGQ3BzS4DYRQG4HPe883o9CfxUZWxKbWw6YaFhbtyLS6Crb21jcQGSSPRJjQZqn9Gp2rMnKPPw+8QEV5+BvhpVvR+7GytnKdbVcWozm81x8zlVOOgtCgfvsbHAKx/qaFqoZX+dR7ACT9dXXzpWnobd5wTVrc7W0ZquvBnDYLI38Z5t2KqVsTdOgAdbZ4c9n6Jisl+JIAVEx91pyMlXTQcCLZK9njbP0/oO22LGfLBDko5Cl/mg4Mq2LD68KQWdR4ey6YjMqSZNzPycW/YErAhaQVkjLCT3E0dq7paMyAwEJ5mNZCZk5AZguxm3PZixv8pPXcdlcC16gAAAABJRU5ErkJggg==); }
  #fractal-controls { background: white; float: right; margin: 5px; padding: 5px; }
  body { margin: 0; padding: 0; }
 .control label { display: inline-block; margin: 3px 5px; }
 .control input { float: right; margin: 0 5px; }
 .control button { display: block; margin: 1px 5px 3px auto; }
 .control { width: 100%; border: 1px solid pink; padding: 2px; }
 .control:after { content: ""; clear: both; }
</style>
</head><body>

<canvas id="gl">
 Apparently there is no &lt;canvas&gt;.
</canvas>

<div id="fractal-controls">
    <div class="control">
        <button id="change-canvas-size">Change size</button>
    </div>
    <div class="control">
        <button id="toggle-anim">Toggle animation</button>
    </div>
    <div class="control">
        <button id="reset-noise">Reset noise</button>
    </div>
    <div class="control">
        <label for="nr-states">Number of states</label>
        <input id="nr-states" type="number" min=1 max=255 step=1 value=8 />
    </div>
    <div class="control">
        <label for="go-fast">Go fast?</label>
        <input id="go-fast" type="checkbox" style="margin-top: 3px" />
    </div>
    <div>
        <p>Smooth avg=<span id="frame-avg">?</span>ms.</p>
        <p>Smooth dev≅<span id="frame-dev">?</span>ms.</p>
        <p>Instant time=<span id="frame-instant">?</span>ms.</p>
    </div>
    <ul id="messages"></ul>
</div>

// <!-- <script type="text/javascript" src="webgl-debug.js"></script> -->
<script type="text/javascript">
// <!--
var messages = document.getElementById("messages");
var t0 = Date.now();
function page_log(message) {
    var t = Date.now();
    var li = document.createElement("li");
    message = String(message);
    message = String(t - t0) + "ms " + message;
    li.appendChild(document.createTextNode(String(message)));
    messages.appendChild(li);
    t0 = t;
}

function nextPOT(n) {
    // http://graphics.stanford.edu/~seander/bithacks.html#RoundUpPowerOf2
    n = (n|0) - 1;
    n |= n >> 1;
    n |= n >> 2;
    n |= n >> 4;
    n |= n >> 8;
    n |= n >> 16;
    return (n+1);
}

var nr_states_input = document.getElementById("nr-states");
var canvas = document.getElementById("gl");
canvas.width = 480;
canvas.height = 360;
page_log(canvas);

var gl = canvas.getContext("webgl", {
    failIfMajorPerformanceCaveat: true,
    antialias: false,
    alpha: false,
    depth: false,
    stencil: false});
// gl = WebGLDebugUtils.makeDebugContext(gl);
page_log(gl);

var fill_quad = new Float32Array([
        0, 0,
        0, 1,
        1, 1,
        0, 0,
        1, 1,
        1, 0
])

var v_shader_text = `
attribute vec2 coord2d;
uniform vec2 texSize;
uniform vec2 vptSize;

varying vec2 st;
varying vec2 dsdt;
varying vec2 min_pixel;
varying vec2 max_pixel;

void main(void) {
 min_pixel = 0.5 / texSize;
 max_pixel = (vptSize - vec2(0.5)) / texSize;
 dsdt = 1.0 / texSize;
 st = coord2d.xy * vptSize / texSize;
 vec2 uv = (2.0 * coord2d.xy) - 1.0;
 gl_Position = vec4(uv, 0.0, 1.0);
}`;

var v_s = gl.createShader(gl.VERTEX_SHADER);
gl.shaderSource(v_s, v_shader_text);
gl.compileShader(v_s)
page_log("v: " + gl.getShaderInfoLog(v_s));

var cyclic_shader_text = `
precision mediump float;
varying vec2 st;
varying vec2 dsdt;
varying vec2 min_pixel;
varying vec2 max_pixel;
uniform sampler2D grid;
uniform float states;

float quantize(float x) {
  return floor(x * (states + 1.0));
}

float neighbour(float xDir, float yDir) {
  vec2 coord = vec2(st.x + dsdt.x*xDir, st.y + dsdt.y*yDir);
  if (coord.x < min_pixel.x) { coord.x = max_pixel.x; }
  if (coord.y < min_pixel.y) { coord.y = max_pixel.y; }
  if (coord.x > max_pixel.x) { coord.x = min_pixel.x; }
  if (coord.y > max_pixel.y) { coord.y = min_pixel.y; }
  return quantize(texture2D(grid, coord).r);
}

void main(void) {
 int increment = 0;
 float me = neighbour(0.0, 0.0);
 float next = me + 1.0;
 if (next >= states) { next = 0.0; }
 if (neighbour(-1.0,  0.0) == next) { increment = 1; }
 if (neighbour( 0.0, -1.0) == next) { increment = 1; }
 if (neighbour( 0.0, +1.0) == next) { increment = 1; }
 if (neighbour(+1.0,  0.0) == next) { increment = 1; }
 if (increment == 1) { me = next; }
 gl_FragColor[0] = me / states;
 gl_FragColor[1] = 0.0;
 gl_FragColor[2] = 0.0;
 gl_FragColor[3] = 1.0;
}`;

var cyclic_s = gl.createShader(gl.FRAGMENT_SHADER);
gl.shaderSource(cyclic_s, cyclic_shader_text);
gl.compileShader(cyclic_s)
page_log("cyclic f: " + gl.getShaderInfoLog(cyclic_s));

var cyclic_prog = gl.createProgram();
gl.attachShader(cyclic_prog, v_s);
gl.attachShader(cyclic_prog, cyclic_s);
gl.linkProgram(cyclic_prog);

page_log("cyclic_p: " + gl.getProgramInfoLog(cyclic_prog));
var cyclic_coord2d_loc = gl.getAttribLocation(cyclic_prog, "coord2d");
var cyclic_grid_loc = gl.getUniformLocation(cyclic_prog, "grid");
var cyclic_texSize_loc = gl.getUniformLocation(cyclic_prog, "texSize");
var cyclic_vptSize_loc = gl.getUniformLocation(cyclic_prog, "vptSize");
var cyclic_states_loc = gl.getUniformLocation(cyclic_prog, "states");

var colour_shader_text = `
precision mediump float;
varying vec2 st;
uniform sampler2D grid;

void main(void) {
 vec4 look = texture2D(grid, st);
 float h = look.r;
 /*
 gl_FragColor[0] = look.r;
 gl_FragColor[1] = look.r;
 gl_FragColor[2] = look.r;
 */
 gl_FragColor[0] = 0.5 * (1.0 + sin(radians(h*180.0)));
 gl_FragColor[1] = 0.5 * (1.0 + sin(radians(h*180.0 + 120.0)));
 gl_FragColor[2] = 0.5 * (1.0 + sin(radians(h*180.0 + 240.0)));
 gl_FragColor[3] = 1.0;
}`;

var colour_s = gl.createShader(gl.FRAGMENT_SHADER);
gl.shaderSource(colour_s, colour_shader_text);
gl.compileShader(colour_s)<commit_msg>Tidy commented code in CCA<commit_after><!doctype html>
<html><head><meta charset="UTF-8" />
<title>Cyclic cellular automaton</title>
<style type="text/css">
  body { background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAAAAAA6mKC9AAAA9ElEQVQYGQ3BzS4DYRQG4HPe883o9CfxUZWxKbWw6YaFhbtyLS6Crb21jcQGSSPRJjQZqn9Gp2rMnKPPw+8QEV5+BvhpVvR+7GytnKdbVcWozm81x8zlVOOgtCgfvsbHAKx/qaFqoZX+dR7ACT9dXXzpWnobd5wTVrc7W0ZquvBnDYLI38Z5t2KqVsTdOgAdbZ4c9n6Jisl+JIAVEx91pyMlXTQcCLZK9njbP0/oO22LGfLBDko5Cl/mg4Mq2LD68KQWdR4ey6YjMqSZNzPycW/YErAhaQVkjLCT3E0dq7paMyAwEJ5mNZCZk5AZguxm3PZixv8pPXcdlcC16gAAAABJRU5ErkJggg==); }
  #fractal-controls { background: white; float: right; margin: 5px; padding: 5px; }
  body { margin: 0; padding: 0; }
 .control label { display: inline-block; margin: 3px 5px; }
 .control input { float: right; margin: 0 5px; }
 .control button { display: block; margin: 1px 5px 3px auto; }
 .control { width: 100%; border: 1px solid pink; padding: 2px; }
 .control:after { content: ""; clear: both; }
</style>
</head><body>

<canvas id="gl">
 Apparently there is no &lt;canvas&gt;.
</canvas>

<div id="fractal-controls">
    <div class="control">
        <button id="change-canvas-size">Change size</button>
    </div>
    <div class="control">
        <button id="toggle-anim">Toggle animation</button>
    </div>
    <div class="control">
        <button id="reset-noise">Reset noise</button>
    </div>
    <div class="control">
        <label for="nr-states">Number of states</label>
        <input id="nr-states" type="number" min=1 max=255 step=1 value=8 />
    </div>
    <div class="control">
        <label for="go-fast">Go fast?</label>
        <input id="go-fast" type="checkbox" style="margin-top: 3px" />
    </div>
    <div>
        <p>Smooth avg=<span id="frame-avg">?</span>ms.</p>
        <p>Smooth dev≅<span id="frame-dev">?</span>ms.</p>
        <p>Instant time=<span id="frame-instant">?</span>ms.</p>
    </div>
    <ul id="messages"></ul>
</div>

// <!-- <script type="text/javascript" src="webgl-debug.js"></script> -->
<script type="text/javascript">
// <!--
var messages = document.getElementById("messages");
var t0 = Date.now();
function page_log(message) {
    var t = Date.now();
    var li = document.createElement("li");
    message = String(message);
    message = String(t - t0) + "ms " + message;
    li.appendChild(document.createTextNode(String(message)));
    messages.appendChild(li);
    t0 = t;
}

function nextPOT(n) {
    // http://graphics.stanford.edu/~seander/bithacks.html#RoundUpPowerOf2
    n = (n|0) - 1;
    n |= n >> 1;
    n |= n >> 2;
    n |= n >> 4;
    n |= n >> 8;
    n |= n >> 16;
    return (n+1);
}

var nr_states_input = document.getElementById("nr-states");
var canvas = document.getElementById("gl");
canvas.width = 480;
canvas.height = 360;
page_log(canvas);

var gl = canvas.getContext("webgl", {
    failIfMajorPerformanceCaveat: true,
    antialias: false,
    alpha: false,
    depth: false,
    stencil: false});
// gl = WebGLDebugUtils.makeDebugContext(gl);
page_log(gl);

var fill_quad = new Float32Array([
        0, 0,
        0, 1,
        1, 1,
        0, 0,
        1, 1,
        1, 0
])

var v_shader_text = `
attribute vec2 coord2d;
uniform vec2 texSize;
uniform vec2 vptSize;

varying vec2 st;
varying vec2 dsdt;
varying vec2 min_pixel;
varying vec2 max_pixel;

void main(void) {
 min_pixel = 0.5 / texSize;
 max_pixel = (vptSize - vec2(0.5)) / texSize;
 dsdt = 1.0 / texSize;
 st = coord2d.xy * vptSize / texSize;
 vec2 uv = (2.0 * coord2d.xy) - 1.0;
 gl_Position = vec4(uv, 0.0, 1.0);
}`;

var v_s = gl.createShader(gl.VERTEX_SHADER);
gl.shaderSource(v_s, v_shader_text);
gl.compileShader(v_s)
page_log("v: " + gl.getShaderInfoLog(v_s));

var cyclic_shader_text = `
precision mediump float;
varying vec2 st;
varying vec2 dsdt;
varying vec2 min_pixel;
varying vec2 max_pixel;
uniform sampler2D grid;
uniform float states;

float quantize(float x) {
  return floor(x * (states + 1.0));
}

float neighbour(float xDir, float yDir) {
  vec2 coord = vec2(st.x + dsdt.x*xDir, st.y + dsdt.y*yDir);
  if (coord.x < min_pixel.x) { coord.x = max_pixel.x; }
  if (coord.y < min_pixel.y) { coord.y = max_pixel.y; }
  if (coord.x > max_pixel.x) { coord.x = min_pixel.x; }
  if (coord.y > max_pixel.y) { coord.y = min_pixel.y; }
  return quantize(texture2D(grid, coord).r);
}

void main(void) {
 int increment = 0;
 float me = neighbour(0.0, 0.0);
 float next = me + 1.0;
 if (next >= states) { next = 0.0; }
 if (neighbour(-1.0,  0.0) == next) { increment = 1; }
 if (neighbour( 0.0, -1.0) == next) { increment = 1; }
 if (neighbour( 0.0, +1.0) == next) { increment = 1; }
 if (neighbour(+1.0,  0.0) == next) { increment = 1; }
 if (increment == 1) { me = next; }
 gl_FragColor[0] = me / states;
 gl_FragColor[1] = 0.0;
 gl_FragColor[2] = 0.0;
 gl_FragColor[3] = 1.0;
}`;

var cyclic_s = gl.createShader(gl.FRAGMENT_SHADER);
gl.shaderSource(cyclic_s, cyclic_shader_text);
gl.compileShader(cyclic_s)
page_log("cyclic f: " + gl.getShaderInfoLog(cyclic_s));

var cyclic_prog = gl.createProgram();
gl.attachShader(cyclic_prog, v_s);
gl.attachShader(cyclic_prog, cyclic_s);
gl.linkProgram(cyclic_prog);

page_log("cyclic_p: " + gl.getProgramInfoLog(cyclic_prog));
var cyclic_coord2d_loc = gl.getAttribLocation(cyclic_prog, "coord2d");
var cyclic_grid_loc = gl.getUniformLocation(cyclic_prog, "grid");
var cyclic_texSize_loc = gl.getUniformLocation(cyclic_prog, "texSize");
var cyclic_vptSize_loc = gl.getUniformLocation(cyclic_prog, "vptSize");
var cyclic_states_loc = gl.getUniformLocation(cyclic_prog, "states");

var colour_shader_text = `
precision mediump float;
varying vec2 st;
uniform sampler2D grid;

void main(void) {
 vec4 look = texture2D(grid, st);
 float h = look.r;
 gl_FragColor[0] = 0.5 * (1.0 + sin(radians(h*180.0)));
 gl_FragColor[1] = 0.5 * (1.0 + sin(radians(h*180.0 + 120.0)));
 gl_FragColor[2] = 0.5 * (1.0 + sin(radians(h*180.0 + 240.0)));
 gl_FragColor[3] = 1.0;
}`;

var colour_s = gl.createShader(gl.FRAGMENT_SHADER);
gl.shaderSource(colour_s, colour_shader_text);
gl.compileShader(colour_s)
{'fraction_non_alphanumeric': 0.16343648208469055, 'fraction_numerical': 0.039006514657980454, 'mean_word_length': 4.117083333333333, 'pattern_counts': {'":': 0, '<': 121, '<?xml version=': 0, '>': 141, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '4261671', 'n_tokens_mistral': 5311, 'n_tokens_neox': 4990, 'n_words': 981}