index.html

---
layout: default
title: "Home"
description: ""
---

<canvas id="canvas" class="canvas_full2 pixelated" width="256" height="64"></canvas>

<h2><img src="./img/icons/home-0.png" class="pixelated" width="25" style="margin-right:8px;transform:scale(1.25);background-color:var(--md-sys-color-pixel-bg)">Home</h2>
<div style="padding:36px;border-radius:12px;outline:1px solid var(--md-sys-color-outline-variant);">
  <img draggable="false" src="./img/icons/skin-2.png" class="pixelated" width="36" style="display:block;margin-left:-2px;margin-bottom:-50px;">
  <img draggable="false" src="./img/icons/skin-1.png" class="pixelated" width="32" style="float:left;border-radius:4px;margin:16px 16px 0 0;">
  <p style="margin:0;">
    <br>
    Hello! I'm Nxrix, a developer and artist who loves to play around with random, colorful things. I create voxel models, pixel art, and mini-apps or tools, I mostly use JS, C, Lua and GLSL.
  </p>
</div>

<br>

<div class="cart_set">
  {% for project in site.projects %}
  {% unless project.hidden %}
  <a href="{{ project.url }}" class="cart">
    <img class="pixelated" src="./img/carts/{{ project.image }}">
    <div class="content">
      <div class="title">{{ project.title }}</div>
      <div class="description">{{ project.description }}</div>
    </div>
  </a>
  {% endunless %}
  {% endfor %}
</div>


<script src="./js/three.min.js"></script>
<script>
/**
 * @copyright   (c) 2025 Nxrix. All rights reserved.
 */
"use strict";

const palette = [
  [0x1d,0x18,0x26],[0x8b,0x7f,0xb0],[0xc3,0xbe,0xe5],[0xff,0xe8,0xe9],
  [0x65,0x26,0x4e],[0xa0,0x1a,0x3d],[0xde,0x1b,0x45],[0xf2,0x63,0x7b],
  [0x8b,0x3f,0x39],[0xbb,0x45,0x31],[0xef,0x5d,0x0e],[0xff,0x95,0x00],
  [0x00,0xa0,0x3d],[0x12,0xd5,0x00],[0xb4,0xd8,0x00],[0xff,0xc3,0x1f],
  [0x00,0x6e,0x69],[0x00,0xae,0x85],[0x00,0xda,0xa7],[0x4f,0xd6,0xff],
  [0x2b,0x27,0x54],[0x3c,0x51,0xaf],[0x18,0x88,0xde],[0x00,0xa9,0xe1],
  [0x59,0x3c,0x97],[0x89,0x44,0xcf],[0xb4,0x4a,0xff],[0xe9,0x59,0xff],
  [0xe7,0x87,0x6d],[0xff,0xba,0x8c],[0xff,0xef,0x5c],[0xff,0x9c,0xde]
];
const  width = 128;
const height = 32;
const  width2 = width/2;
const height2 = height/2;
const  widthm1 = width-1;
const heightm1 = height-1;
const buffer = new Uint8Array(width*height);

const palette_mask = [];
let pattern = 0;
let pattern_color = 0;
let cameraX = 0;
let cameraY = 0;
let clipX0 = 0;
let clipY0 = 0;
let clipX1 = width;
let clipY1 = height;

const font_buffer = [0,0,0,0,0,1,0,0,1,0,1,0,1,0,1,0,0,1,0,0,1,0,1,0,0,1,0,0,0,1,0,0,0,1,0,0,0,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,0,1,1,1,0,1,1,0,0,1,1,1,0,1,1,1,0,1,0,1,0,1,1,1,0,1,1,1,0,1,1,1,0,1,1,1,0,1,1,1,0,0,0,0,0,0,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,0,0,0,1,0,0,1,1,1,0,0,1,0,0,1,0,1,0,1,0,1,0,0,0,0,0,0,0,0,0,0,0,0,0,1,0,0,0,0,0,1,0,1,0,0,0,0,1,0,0,0,0,1,0,1,0,1,0,1,1,0,0,0,1,1,0,1,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,1,0,1,1,1,0,1,1,1,0,0,0,0,0,0,0,0,0,0,1,0,0,1,0,1,0,1,1,0,0,1,0,0,0,0,1,1,0,0,0,0,0,0,0,0,0,1,0,0,0,1,1,1,0,1,1,0,0,0,1,1,0,1,1,0,0,1,1,1,0,1,1,1,0,1,1,1,0,1,0,1,0,1,1,1,0,0,1,1,0,1,0,1,0,1,0,0,0,1,1,1,0,1,1,0,0,0,1,1,0,1,1,1,0,1,1,1,0,1,1,0,0,1,1,1,0,1,1,1,0,1,0,1,0,1,0,1,0,1,0,1,0,1,0,1,0,1,0,1,0,1,1,1,0,0,1,1,0,0,1,0,0,1,1,0,0,0,0,0,0,0,0,0,0,0,1,0,0,1,0,1,0,1,1,1,0,1,1,0,0,0,0,1,0,1,0,1,0,0,1,0,0,1,0,0,0,0,0,1,0,1,0,1,0,0,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,0,0,1,0,1,0,0,1,0,0,0,0,1,0,0,1,1,0,1,0,1,0,1,0,0,0,1,0,0,0,0,0,1,0,1,0,1,0,1,1,1,0,0,1,0,0,0,0,0,0,0,1,0,0,1,1,1,0,0,1,0,0,1,0,1,0,1,0,1,0,1,1,1,0,1,0,1,0,0,1,0,0,0,0,0,0,1,0,1,0,1,0,0,0,0,0,1,0,0,0,0,0,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1,0,1,0,1,0,1,1,0,0,0,1,1,0,0,0,0,0,1,1,1,0,0,0,0,0,0,0,0,0,1,1,1,0,1,1,1,0,0,0,0,0,1,1,1,0,0,1,0,0,1,0,1,0,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1,0,0,1,0,0,0,0,0,0,0,1,0,0,1,0,1,0,1,1,1,0,1,0,0,0,1,0,1,0,1,1,0,0,1,0,0,0,1,0,0,0,1,0,1,0,0,1,0,0,0,0,1,0,1,1,0,0,1,0,0,0,1,1,1,0,1,0,1,0,1,0,1,0,1,0,1,0,1,0,1,0,1,0,1,0,1,1,0,0,0,1,0,0,1,0,1,0,1,0,1,0,1,0,1,0,0,1,0,0,1,0,1,0,0,1,1,0,1,1,0,0,0,1,0,0,0,1,1,0,0,0,1,0,0,0,0,0,0,0,0,0,0,0,0,0,1,0,1,0,0,1,1,0,1,0,0,0,0,1,0,0,0,0,0,0,1,0,0,0,0,0,1,0,0,1,0,0,1,1,1,0,0,1,0,0,1,1,1,0,0,0,0,0,0,1,0,0,1,0,1,0,0,1,0,0,1,1,0,0,0,0,1,0,1,1,1,0,0,1,1,0,1,1,1,0,0,0,1,0,1,1,1,0,0,0,1,0,0,0,0,0,0,1,0,0,1,0,0,0,0,0,0,0,0,0,1,0,0,0,1,0,1,0,0,0,1,1,1,0,0,1,0,0,1,0,1,0,1,0,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,0,1,0,0,0,1,0,0,0,0,1,0,0,0,0,1,0,1,0,1,0,1,1,0,0,0,1,1,0,0,0,0,0,0,0,0,0,1,1,1,0,0,0,0,0,0,0,0,0,1,1,1,0,1,1,1,0,1,1,1,0,0,1,0,0,1,0,1,0,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1,0,1,0,1,0,0,0,0,0,0,0,0,0,1,1,1,0,1,0,1,0,1,0,0,0,1,0,1,0,1,0,0,0,1,1,1,0,1,0,1,0,1,1,1,0,0,1,0,0,1,0,1,0,1,0,1,0,1,0,0,0,1,0,1,0,1,0,1,0,1,0,1,0,1,1,1,0,1,1,1,0,1,1,0,0,0,1,1,0,0,1,0,0,1,0,1,0,1,0,1,0,1,1,1,0,1,0,1,0,0,1,0,0,1,1,0,0,1,1,0,0,0,1,0,0,0,1,1,0,1,1,1,0,0,0,0,0,0,1,0,0,0,0,0,0,1,1,1,0,0,1,0,0,1,0,1,0,1,0,1,0,0,0,0,0,0,1,0,0,0,1,0,0,1,0,1,0,0,1,0,0,1,0,0,0,0,0,0,0,0,1,0,0,1,0,0,0,1,1,1,0,1,1,1,0,1,1,1,0,1,1,1,0,0,0,1,0,1,1,1,0,1,1,1,0,0,0,1,0,1,1,1,0,1,1,1,0,0,1,0,0,1,0,0,0,0,1,0,0,1,1,1,0,0,1,0,0,0,1,0,0,0,1,0,0,1,1,1,0,1,0,1,0,0,1,0,0,0,0,0,0,1,0,1,0,0,0,1,0,1,0,0,0,0,0,0,0,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1,0,1,0,1,0,1,1,0,0,0,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,0,0,1,0,1,0,1,1,0,0,0,0,1,0,0,1,1,0,0,0,0,0,1,1,1,0,0,0,0,0,1,0,1,0,1,1,1,0,0,1,1,0,1,1,0,0,1,1,1,0,1,0,0,0,1,1,1,0,1,0,1,0,1,1,1,0,1,1,1,0,1,0,1,0,1,1,1,0,1,0,1,0,1,0,1,0,1,1,0,0,1,0,0,0,0,0,1,0,1,0,1,0,1,1,1,0,0,1,0,0,1,1,1,0,0,1,0,0,1,1,1,0,1,0,1,0,0,1,0,0,1,1,1,0,0,1,1,0,0,1,0,0,1,1,0,0,1,0,0,0];

const bayer4x4 = [
  [ 0, 8, 2, 10],
  [12, 4, 14, 6],
  [ 3, 11, 1, 9],
  [15, 7, 13, 5]
];
const bayer8x8 = [
  [ 0, 32,  8, 40,  2, 34, 10, 42],
  [48, 16, 56, 24, 50, 18, 58, 26],
  [12, 44,  4, 36, 14, 46,  6, 38],
  [60, 28, 52, 20, 62, 30, 54, 22],
  [ 3, 35, 11, 43,  1, 33,  9, 41],
  [51, 19, 59, 27, 49, 17, 57, 25],
  [15, 47,  7, 39, 13, 45,  5, 37],
  [63, 31, 55, 23, 61, 29, 53, 21]
];
const px8_pset = (x,y,col) => {
  x -= cameraX;
  y -= cameraY;
  if (x>=clipX0&&x<clipX1&&y>=clipY0&&y<clipY1) {
    col = Math.round(col);
    const ptrn = pattern>>((~x&3)+((~y&3)<<2))&1;
    col = ptrn?pattern_color:col;
    if ((col>0||!ptrn)&&!palette_mask[col]) {
      buffer[x+y*width] = col&31;
    }
  }
};
const cls = (col) => {
  pattern = 0;
  pattern_color = 0;
  palette_mask.fill(false);
  buffer.fill(Math.round(col)&0xff);
};
const pset = (x,y,col) => {
  x = Math.round(x);
  y = Math.round(y);
  px8_pset(x,y,col);
};
const pget = (x, y) => {
  x = Math.round(x)&widthm1;
  y = Math.round(y)&heightm1;
  return buffer[x+(y*width)];
};
const fillp = (p,col) => {
  pattern = Math.round(p)||0;
  pattern_color = Math.round(col)||0;
};
const palt = (col,t) => {
  if (col) {
    palette_mask[Math.round(col)&0xff]=t;
  } else {
    palette_mask.fill(false);
  }
};
const camera = (x, y) => {
  cameraX = Math.round(x)||0;
  cameraY = Math.round(y)||0;
};
const clip = (x0,y0,x1,y1) => {
  clipX0 = Math.round(x0)||0;
  clipY0 = Math.round(y0)||0;
  clipX1 = Math.round(x1)||width;
  clipY1 = Math.round(y1)||height;
};
const line = (x0,y0,x1,y1,col) => {
  x0 = Math.round(x0);
  y0 = Math.round(y0);
  x1 = Math.round(x1);
  y1 = Math.round(y1);
  const dx = Math.abs(x1-x0);
  const dy = Math.abs(y1-y0);
  const sx = (x0<x1)?1:-1;
  const sy = (y0<y1)?1:-1;
  let  err = dx-dy;
  while (true) {
    px8_pset(x0,y0,col);
    if (x0==x1&&y0==y1) break;
    const e2 = err*2;
    if (e2>-dy) { err -= dy;x0 += sx; }
    if (e2< dx) { err += dx;y0 += sy; }
  }
};
const rect = (x0,y0,x1,y1,col) => {
  x0 = Math.round(x0);
  y0 = Math.round(y0);
  x1 = Math.round(x1);
  y1 = Math.round(y1);
  if (x0>x1) {
    const temp = x0;
    x0 = x1;
    x1 = temp;
  }
  if (y0>y1) {
    const temp = y0;
    y0 = y1;
    y1 = temp;
  }
  for (let x=x0;x<=x1;x++) {
    px8_pset(x,y0,col);
    px8_pset(x,y1,col);
  }
  for (let y=y0;y<=y1;y++) {
    px8_pset(x0,y,col);
    px8_pset(x1,y,col);
  }
};
const rectfill = (x0,y0,x1,y1,col) => {
  x0 = Math.round(x0);
  y0 = Math.round(y0);
  x1 = Math.round(x1);
  y1 = Math.round(y1);
  if (x0 > x1) {
    const temp = x0;
    x0 = x1;
    x1 = temp;
  }
  if (y0 > y1) {
    const temp = y0;
    y0 = y1;
    y1 = temp;
  }
  for (let x=x0;x<=x1;x++) {
    for (let y=y0;y<=y1;y++) {
      px8_pset(x,y,col);
    }
  }
};
const circ = (x,y,r,col) => {
  x = Math.round(x);
  y = Math.round(y);
  r = Math.round(r);
  let  f = 1-r;
  let dx = 1;
  let dy = -2*r;
  let cx = 0;
  let cy = r;
  while (cx<=cy) {
    px8_pset(x+cx,y+cy,col);
    px8_pset(x-cx,y+cy,col);
    px8_pset(x+cx,y-cy,col);
    px8_pset(x-cx,y-cy,col);
    px8_pset(x+cy,y+cx,col);
    px8_pset(x-cy,y+cx,col);
    px8_pset(x+cy,y-cx,col);
    px8_pset(x-cy,y-cx,col);
    if (f>=0) {
      cy--;
      dy +=  2;
       f += dy;
    }
    cx++;
    dx +=  2;
     f += dx;
  }
};
const circfill = (x, y, r, col) => {
  x = Math.round(x);
  y = Math.round(y);
  r = Math.round(r);
  let  f = 1-r;
  let dx = 1;
  let dy = -2*r;
  let cx = 0;
  let cy = r;
  const hline = (x1,x2,y) => {
    for (let i=x1;i<=x2;i++) {
      px8_pset(i,y,col);
    }
  };
  while (cx<=cy) {
    hline(x-cx,x+cx,y+cy);
    hline(x-cx,x+cx,y-cy);
    hline(x-cy,x+cy,y+cx);
    hline(x-cy,x+cy,y-cx);
    if (f >= 0) {
      cy--;
      dy += 2;
      f += dy;
    }
    cx++;
    dx += 2;
    f += dx;
  }
};
const tri = (x0,y0,x1,y1,x2,y2,col) => {
  line(x0,y0,x1,y1,col);
  line(x1,y1,x2,y2,col);
  line(x2,y2,x0,y0,col);
};
const trifill = (x0,y0,x1,y1,x2,y2,col) => {
  x0 = Math.round(x0);
  y0 = Math.round(y0);
  x1 = Math.round(x1);
  y1 = Math.round(y1);
  x2 = Math.round(x2);
  y2 = Math.round(y2);
  if (y0>y1) {
    let temp = y0;
    y0 = y1;
    y1 = temp;
    temp = x0;
    x0 = x1;
    x1 = temp;
  }
  if (y1>y2) {
    let temp = y1;
    y1 = y2;
    y2 = temp;
    temp = x1;
    x1 = x2;
    x2 = temp;
  }
  if (y0>y1) {
    let temp = y0;
    y0 = y1;
    y1 = temp;
    temp = x0;
    x0 = x1;
    x1 = temp;
  }
  const dx1 = x1-x0;
  const dy1 = y1-y0;
  const dx2 = x2-x0;
  const dy2 = y2-y0;
  const dx3 = x2-x1;
  const dy3 = y2-y1;
  const m1 = dx1/dy1;
  const m2 = dx2/dy2;
  const m3 = dx3/dy3;
  let xl = x0;
  let xr = x0;
  for (let i=y0;i<=y1;i++) {
    line(xl,i,xr,i,col);
    xl += m1;
    xr += m2;
  }
  xl = x1;
  xr = x0;
  for (let i=y1;i<=y2;i++) {
    line(xl,i,xr,i,col);
    xl += m3;
    xr += m2;
  }
};
const sspr = (spr,x,y,w,h) => {
  x = Math.round(x);
  y = Math.round(y);
  spr = spr.split(",");
  const w1 = spr[0];
  const h1 = spr[1];
  spr = spr[2].split("");
  for (let i=0;i<w;i++) {
    for (let j=0;j<h;j++) {
      const col = parseInt(spr[Math.floor(i/w*w1)+Math.floor(j/h*h1)*w1],33);
      if (col<32) {
        px8_pset(x+i,y+j,col);
      }
    }
  }
};
const print = (text,x,y,col) => {
  x = Math.round(x);
  y = Math.round(y);
  text = text.toString();
  const lines = text.split("\n");
  for (let l=0;l<lines.length;l++) {
    const line = lines[l];
    const cy = y+l*5;
    for (let i=0;i<line.length;i++) {
      const code = line.charCodeAt(i);
      const cx = x+i*4;
      for (let j=0;j<5;j++) {
        for (let k=0;k<4;k++) {
          if (font_buffer[(code-32)*4+j*380+k]==1) {
            px8_pset(cx+k,cy+j,col);
          }
        }
      }
    }
  }
};
  
const context = canvas.getContext("webgl",{ antialias: false, preserveDrawingBuffer: true });

const renderer = new THREE.WebGLRenderer({canvas:canvas,context:context});
renderer.setPixelRatio(Math.min(window.devicePixelRatio,1));
renderer.outputColorSpace  = THREE.LinearSRGBColorSpace;

const cam = new THREE.PerspectiveCamera(90,2,0.125,256);
const scene = new THREE.Scene();
cam.position.set(0,0,0);
cam.lookAt(0,0,1);

const buffer_texture = new THREE.DataTexture(buffer,width,height,THREE.AlphaFormat,THREE.UnsignedByteType);

const data_pal = new Uint8Array(32*4);
for (let i=0;i<32;i++) {
  const c = palette[i&31];
  const n = i*4;
  data_pal[n  ] = c[0];
  data_pal[n+1] = c[1];
  data_pal[n+2] = c[2];
  data_pal[n+3] = 255;
}
const palette_texture = new THREE.DataTexture(data_pal,32,1,THREE.RGBAFormat,THREE.UnsignedByteType);
palette_texture.needsUpdate = true;

const plane = new THREE.Mesh(new THREE.PlaneGeometry(30, 15),new THREE.ShaderMaterial({
  uniforms: {
    uPalette: { value: palette_texture },
    uBuffer: { value: buffer_texture },
  },
  vertexShader: `
    varying vec2 vU;
    void main() {
      vU = uv;
      gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
    }`,
  fragmentShader: `
    uniform sampler2D uPalette;
    uniform sampler2D uBuffer;
    varying vec2 vU;
    
    void main() {
      vec3 c = texture2D(uPalette,vec2(texture2D(uBuffer,vU*vec2(1,-1)+vec2(0,1)).a*8.0,0)).rgb;
      gl_FragColor = vec4(c,1.0);
    }`,
}));

plane.rotation.y = -Math.PI;
plane.position.z = 7.5;
scene.add(plane);

/*class srnd {
  static d = 0xFFFFFFFF;
  static u = 1664525;
  static a = 1013904223;
  gen(s) {
    return ((s*srnd.u+srnd.a)%srnd.d)/srnd.d;
  }
}*/

/*class srnd {
  lcg(seed) {
    const a = 1664525;
    const c = 1013904223;
    const m = Math.pow(2,32);
    return (seed*a+c)%m;
  }
  gen(n) {
    return this.lcg(n)%33;
  }
}*/

/*class srnd {
  gen(n) {
    let hash = 0;
    for (let i = 0; i < n.toString().length; i++) {
      hash = (hash << 5) - hash + n.toString().charCodeAt(i);
      hash |= 0;
    }
    return Math.abs(hash)&0xffff;
  }
}*/

class srnd {
  gen(n) {
    const a = 1664525;
    const c = 1013904223;
    n = n|0;
    n = (a*n+c)&0xFFFFFFFF;
    return (n>>>16)&0xFFFF;
  }
}

class frnd {
  fh(n,f=2) {
    return (n^(n%2)^(n%3)^(n%5)^(n%7)^(n%11)^(n%13)^(n%17)^(n%19)^(n%27)^(n%29))%f/(f-1);
  }
  gen(n) {
    return this.fh(n,32);
  }
}


let events = {
  1: [
    {
      day: 10,
      solar: true,
      offset: 3,
      icon: "5,6,wwfwwfffffbfffb2fbf2wb2bww2w2w",
      w: 5,
      c1: 25,
      c2: 26,
    },
    {
      day: 24,
      solar: true,
      offset: 3,
      icon: "5,6,wwfwwfffffbfffb2fbf2wb2bww2w2w",
      w: 5,
      c1: 0,
      c2: 20,
    }
  ],
  2: [
    {
      day: 14,
      solar: false,
      icon: "5,6,55w55565654565424542w242www2ww",
      w: 5,
      c1: 5,
      c2: 6,
    }
  ],
  12: [
    {
      day: 25,
      solar: false,
      icon: "5,6,wwfwwwgg6ww6ccwggggg22822ww2ww",
      w: 5,
      c1: [5,16,2],
      c2: [6,17,3],
    }
  ]
};
const leap_year = (year) => {
  //return (year%4==0&&year%100!=0)||(year%400==0);
  return (year%4==0);
}
const find_event = (input) => {
  const date = (input instanceof Date)?input:new Date(input);
  const year = date.getFullYear();
  const month = date.getMonth()+1;
  const day = date.getDate();
  const e = events[month]||[];
  for (const event of e) {
    let eday = event.day;
    if (event.solar&&leap_year(year+event.offset)) eday-=1;
    if (day==eday) {
      return event;
    }
  }
  return null;
}

//---1632640020000---//
const k = new Date("2021-09-26T10:37:00.000+03:30");
const _second = 1000;
const _minute = _second*60;
const _hour = _minute*60;
const _day = _hour*24;
const _month = _day*30;
const _year = _month*12;

let t = 0;
let update = () => {
  cls();
  const date = new Date();
  const now = new Date(date.getTime());
  const e = find_event(now);
  const dist = now-k;
  const d = Math.floor(dist/_day);
  const h = Math.floor((dist%  _day)/   _hour).toString().padStart(2,0);
  const m = Math.floor((dist% _hour)/ _minute).toString().padStart(2,0);
  const s = Math.floor((dist%_minute)/_second).toString().padStart(2,0);
  const str1 = `${d}`;
  const str2 = `${h}:${m}:${s}`;
  const w = e!==null?e.w:0;
  const strl2 = str1.length+w/4+1/2+str2.length;
  const str2p = w+str1.length*4+3;

  const rnd = new srnd();
  const n = Math.floor(dist/1000);
  const rn = rnd.gen(n);
  let c1 = rn&31;
  let c2 = rn+1;
  if (rn&3==3) {
    c2 = rn-1;
  }
  if  (c1==0) c2 = 20;
  if  (c1==1) c2 = 20;
  if (c1==14) c2 = 13;
  if (c1==14) c1 = 12;
  if (c1==15) c2 = 11;
  if (c1==18) c2 = 23;
  if (c1==19) c2 = 23;
  if (c1==30) c2 = 11;
  if (c1==30) c1 = 10;
  if (c1==31) c2 = 27;

  if (e!=null) {
    if (Array.isArray(e.c1)) {
      c1 = e.c1[rn%e.c1.length];
    } else {
      c1 = e.c1;
    }
    if (Array.isArray(e.c2)) {
      c2 = e.c2[rn%e.c2.length];
    } else {
      c2 = e.c2;
    }
  }

  fillp(rn,c2);
  for (let i=0;i<width;i++) {
    for (let j=0;j<height;j++) {
      pset(i,j,c1);
    }
  }
  fillp();

  for (let i=0;i<4*strl2+8;i++) {
    for (let j=0;j<12;j++) {
      let v = 3;
      if ((i==1||j==1||i==strl2*4+6||j==10)&&(i>0)&&(j>0)&&(i<strl2*4+7)&&(j<11)) {
        v = (Math.abs(i-(4*strl2+6)/2)^Math.abs(j-5.5))+n*4+t/4;
      }
      pset(i+width2-4-strl2*2,j+height2-6,v);
    }
  }

  if (e!=null) {
    sspr(e.icon,17+width2-2*strl2,height2-3,e.w,6);
  }
  //print(str,width2-1-2*strl,height2-3,20);
  //print(str,width2  -2*strl,height2-3,20);
  //print(str,width2+1-2*strl,height2-3,20);
  //print(str,width2-1-2*strl,height2-2,0);
  //print(str,width2+1-2*strl,height2-2,0);
  //print(str,width2-1-2*strl,height2-1,0);
  //print(str,width2  -2*strl,height2-1,0);
  //print(str,width2+1-2*strl,height2-1,0);

  print(str1,width2-2*strl2-1,height2-3,20);
  print(str1,width2-2*strl2  ,height2-3,20);
  print(str1,width2-2*strl2+1,height2-3,20);
  print(str1,width2-2*strl2-1,height2-2,0);
  print(str1,width2-2*strl2+1,height2-2,0);
  print(str1,width2-2*strl2-1,height2-1,0);
  print(str1,width2-2*strl2  ,height2-1,0);
  print(str1,width2-2*strl2+1,height2-1,0);

  print(str2,str2p+width2-2*strl2-1,height2-3,20);
  print(str2,str2p+width2-2*strl2  ,height2-3,20);
  print(str2,str2p+width2-2*strl2+1,height2-3,20);
  print(str2,str2p+width2-2*strl2-1,height2-2,0);
  print(str2,str2p+width2-2*strl2+1,height2-2,0);
  print(str2,str2p+width2-2*strl2-1,height2-1,0);
  print(str2,str2p+width2-2*strl2  ,height2-1,0);
  print(str2,str2p+width2-2*strl2+1,height2-1,0);

  //print(str,width2-2*strl,height2-2,3);
  print(str1,width2-2*strl2,height2-2,3);
  print(str2,str2p+width2-2*strl2,height2-2,3);

  /*const oldb = buffer;
  const pget2 = (x,y) => {
    x = x&widthm1;
    y = y&heightm1;
    return oldb[x+y*width];
  }
  for (let i=0;i<width;i++) {
    for (let j=0;j<height;j++) {
      pset(i,j,pget2(i+rnd.gen(n*width+j+t),j));
    }
  }*/

  buffer_texture.needsUpdate = true;
  renderer.render(scene,cam);
  t++;
  requestAnimationFrame(update);
}
update();
</script>