let ibm_blue = "#0f62fe";

let tv_fs, rgb_fs, dither_fs;

let gfx;

let sc = 1;//2;

let font;

function preload() {

  font = loadFont("TINY5-REGULAR.TTF");

}

function setup() {

  createCanvas(600, 800);

  // createCanvas(4000, 6000);

  randomSeed(1);

  pixelDensity(1);

  border = width * 0.05;

​

  background(220);

  stroke(color(ibm_blue));

  noFill();

​

  rect(border, border, width - 2 * border, height - 2 * border);

​

  rgb_fs = createFilterShader(rgb_src);

  tv_fs = createFilterShader(tv_noise_src);

  dither_fs = createFilterShader(dither_src);

​

  tv_fs.setUniform("_noise", 0.05);

  filter(tv_fs);

​

  let num_cells = int(random(25, 50));

  let box_w = (width - 2 * border) / num_cells;

​

​

  for (let x = border + box_w; x < width - border; x += box_w) {

    let y = border + int(random(1, 5)) * box_w;

    let y2 = y + int(random(25, 10)) * box_w;

    y2 = constrain(y2, border, height - border);

    line(x, y, x, y2);

  }

​

  for (let y = border + box_w; y < height / 2 - border; y += box_w) {

    let x = border + int(random(1, 5)) * box_w;

    let x2 = x + int(random(45, 10)) * box_w;

    x2 = constrain(x2, border, width - border);

    line(x, y, x2, y);

  }

​

  let _y = border + 2 * box_w;

  let num = random(5, 50);

  for (let i = 0; i < num; i++) {

    for (let x = border + box_w; x < width - border - 1; x += box_w) {

      circle(x, _y + 10 * cos(x), 10);

    }

    _y += box_w;

  }

  let sun_r = width * random(0.1, 0.25);

  let sun_x = random(border + sun_r, width - border - sun_r);

  let sun_y = random(border + sun_r, border + 2 * sun_r);

​

  circle(sun_x, sun_y, sun_r * 2);

  for (let _ = 0; _ < 10*sc; _++) {

    let _r = random(1, sun_r / 2);

    let _t = random(-TWO_PI, TWO_PI);

    let _c = color(ibm_blue);

    _c.setAlpha(random(1, 10));

    noStroke();

    fill(_c);

​

    // _c = color(random(220,255),0,random(220,255))

    drawCircle(sun_x + _r * cos(_t), sun_y + _r * sin(_t), _r, _c);

    // circle(sun_x + _r * cos(_t), sun_y + _r * sin(_t), _r * 2);

  }

​

  // stroke(220);

  // let _t = random(-TWO_PI, TWO_PI);

  // let t = _t + TWO_PI;

  // while (_t < t) {

  //   line(sun_x, sun_y, width*cos(_t), height * sin(_t));

  //   _t += random(PI/32, PI/256);

  // }

​

  let x = border;

  let y = height - border - random(0, height * 0.25);

​

  gfx = createGraphics(width, height);

  gfx.background(255);

​

  stroke(color(ibm_blue));

​

  gfx.fill(color("#000"));

  beginShape();

  gfx.beginShape();

  while (x < width - border) {

    vertex(x, y);

    gfx.vertex(x, y);

    x += random(border, 2 * border);

    x = constrain(x, border, width - border);

    vertex(x, y);

    gfx.vertex(x, y);

​

    y += random(-border, border);

    y = constrain(y, border, height - border);

    vertex(x, y);

    gfx.vertex(x, y);

  }

  vertex(width - border, height - border);

  vertex(border, height - border);

  endShape(CLOSE);

​

  gfx.vertex(width - border, height - border);

  gfx.vertex(border, height - border);

  gfx.endShape(CLOSE);

​

  gfx.loadPixels();

  for (let _ = 0; _ < 5000*sc; _++) {

    let x = random(border, width - border);

    let y = random(height / 2, height - border);

​

    let pid = getPixelID(x, y);

    if (

      gfx.pixels[pid] == 0 &&

      gfx.pixels[pid + 1] == 0 &&

      gfx.pixels[pid + 2] == 0

    ) {

      // for (let _ = 0; _ < 10; _++) {

      let _c = color(ibm_blue);

      let _r = box_w;//random(border, 2 * border); //border * 0.1, border * 0.45);

      // _c.setAlpha(1); //random(1, 10));

      // noStroke();

      // fill(_c);

      // circle(x, y, _r * 2);

      drawCircle(x, y, _r, _c);

      // }

    }

  }

  //  textFont(font);

  // textAlign(RIGHT);

  // textSize(36);

  // fill(ibm_blue)

  // let txt = "text"

  // let tw = textWidth(txt);

  // text("fuck you", width-border-12, height-border-12);

​

  rgb_fs.setUniform("_noise", 0.02);

  // rgb_fs.setUniform("fractalize", true);

  filter(rgb_fs);

​

  let indexMatrix4x4 = [0, 8, 2, 10, 12, 4, 14, 6, 3, 11, 1, 9, 15, 7, 13, 5];

  dither_fs.setUniform("indexMatrix4x4", indexMatrix4x4);

  filter(dither_fs);

​

  rgb_fs.setUniform("_noise", 0.05);

   filter(rgb_fs);

  // image(gfx, 0, 0)

}

​

let __t = 0;

function draw() {}

​

function drawCircle(x, y, r, col) {

  let step = random(PI / 4, PI / 64);

  let t = random(0, TWO_PI);

  col.setAlpha(1);

  noStroke();

  fill(col);

  beginShape();

  for (let _t = t; _t < t + TWO_PI; _t += step) {

    let off = noise(_t * 0.1);

    // off = map(off, 0.0, 1.0, r/16, r / 40);

    let r2 = map(off, 0.0, 1.0, 2.0, 0.25); //off;

    let _x = x + r2 * r * cos(_t);

    let _y = y + r2 * r * sin(_t);

    vertex(_x, _y);

  }

  endShape(CLOSE);

  // fill(col);

  // circle(x,y,d);

}

​

function getPixelID(x, y) {

  let _density = gfx.pixelDensity();

  return 4 * _density * (int(y) * _density * width + int(x));

}

​

// https://webgl-shaders.com/shaders/frag-badtv.glsl

let tv_noise_src = `precision mediump float;

varying vec2 vTexCoord;

uniform sampler2D tex0;

uniform float _noise;

​

/*

 * Random number generator with a float seed

 *

 * Credits:

 * http://byteblacksmith.com/improvements-to-the-canonical-one-liner-glsl-rand-for-opengl-es-2-0

 */

highp float random1d(float dt) {

    highp float c = 43758.5453;

    highp float sn = mod(dt, 3.14);

    return fract(sin(sn) * c);

}

​

/*

 * Pseudo-noise generator

 *

 * Credits:

 * https://thebookofshaders.com/11/

 */

highp float noise1d(float value) {

    highp float i = floor(value);

    highp float f = fract(value);

    return mix(random1d(i), random1d(i + 1.0), smoothstep(0.0, 1.0, f));

}

​

/*

 * Random number generator with a vec2 seed

 *

 * Credits:

 * http://byteblacksmith.com/improvements-to-the-canonical-one-liner-glsl-rand-for-opengl-es-2-0

 * https://github.com/mattdesl/glsl-random

 */

highp float random2d(vec2 co) {

    highp float a = 12.9898;

    highp float b = 78.233;

    highp float c = 43758.5453;

    highp float dt = dot(co.xy, vec2(a, b));

    highp float sn = mod(dt, 3.14);

    return fract(sin(sn) * c);

}

​

​

//https://iquilezles.org/articles/distfunctions2d/

float sdBox( in vec2 p, in vec2 b )

{

    vec2 d = abs(p)-b;

    return length(max(d,0.0)) + min(max(d.x,d.y),0.0);

}

​

/*

 * The main program

 */

void main() {

    // Calculate the effect relative strength

    float strength = (0.3 + 0.7 * noise1d(0.3 * 1.)) * _noise;// 0.5; //u_mouse.x / u_resolution.x;

​

    // Calculate the effect jump at the current time interval

    float jump = 500.0 * floor(0.3 * (0.5) * (1. + noise1d(1.))); //(u_mouse.x / u_resolution.x) * (u_time + noise1d(u_time)));

​

    // Shift the texture coordinates

    vec2 uv = vTexCoord;

​

// Get the texture pixel color

    vec3 pixel_color = texture2D(tex0, uv).rgb;

​

  pixel_color.r = texture2D(tex0, uv-vec2(_noise,_noise)).r;

  pixel_color.g = texture2D(tex0, uv+vec2(_noise,_noise)).g;

  pixel_color.b = texture2D(tex0, uv-vec2(_noise,_noise)).b;

​

​

//if (sdBox(uv, vec2(0.15,0.15)) > 0.5) {

    uv.y += _noise*5.*0.2 * strength * (noise1d(5.0 * vTexCoord.y + 2.0 * 1. + jump) - 0.5);

    uv.x += 0.1 * strength * (noise1d(100.0 * strength * uv.y + 3.0 * 1. + jump) - 0.5);

​

    // Get the texture pixel color

     pixel_color = texture2D(tex0, uv).rgb;

​

​

    // Add some white noise

    pixel_color += vec3(5.0 * strength * (random2d(vTexCoord + 1.133001 * vec2(1., 1.13)) - 0.5));

//} else {

​

//}

    // Fragment shader output

    gl_FragColor = vec4(pixel_color, 1.0);

}

`;

​

// rgb - based on https://editor.p5js.org/BarneyCodes/sketches/XUer03ShM

let rgb_src = `precision mediump float;

varying vec2 vTexCoord;

uniform sampler2D tex0;

uniform float _noise;

uniform float _g_noise;

uniform bool fractalize;

​

​

//https://iquilezles.org/articles/distfunctions2d/

float sdBox( in vec2 p, in vec2 b )

{

    vec2 d = abs(p)-b;

    return length(max(d,0.0)) + min(max(d.x,d.y),0.0);

}

​

void main() {

  vec2 uv = vTexCoord;

  vec3 col;

  vec4 _col = texture2D(tex0, uv);

  col = _col.rgb;

​

  float noise = 0.25;

​

  // if (sdBox(uv, vec2(1.0,sin(_g_noise*0.15))) > (2.2 * sin(_g_noise*0.5))) {//0.5) {

​

  //if ((sdBox(uv, vec2(0.15,0.31)) > 0.75) || (1./sdBox(uv, vec2(0.85,0.71)) < 0.25)) {

  // glitch rgb components

  // vec2 offset = vec2(noise * 0.05, 0.0);

  vec2 offset = vec2(noise * _noise, noise *_noise);

  col.r = texture2D(tex0, uv-offset).r;

  col.g = texture2D(tex0, uv+offset).g;

  col.b = texture2D(tex0, uv-offset).b;

​

   if (fractalize) col = fract(5.*cos(2.0/col));

   //col.g *= tan(4.0*_g_noise);

   //col.r = cos(2.8 * _g_noise);

   //col.g = pow(step(0.5,col.g),_g_noise);

​

​

//}

​

  float alpha = 1.0;

 //float alpha = clamp(pow(noise, 2.0),0.0, 0.5);

  gl_FragColor = vec4(col, alpha);

}`;

​

// dither - https://medium.com/the-bkpt/dithered-shading-tutorial-29f57d06ac39

// http://alex-charlton.com/posts/Dithering_on_the_GPU/

// https://github.com/hughsk/glsl-dither/blob/master/example/index.frag

let dither_src = `precision mediump float;

varying vec2 vTexCoord;

uniform sampler2D tex0;

uniform float _noise;

uniform float indexMatrix4x4[16];

​

mat4 bayer = mat4(

  -0.5, 0.0, -0.375, 0.125,

  0.25, -0.25, 0.375, -0.125,

  -0.3125, 0.1875, -0.4375, 0.0625,

  0.4375, -0.0625, 0.3125, -0.1875

); 

​

// https://github.com/hughsk/glsl-luma/blob/master/index.glsl

float luma(vec3 color) {

  return dot(color, vec3(0.299, 0.587, 0.114));

}

// https://github.com/hughsk/glsl-luma/blob/master/index.glsl

float luma(vec4 color) {

  return dot(color.rgb, vec3(0.299, 0.587, 0.114));

}

​

float dither4x4(vec2 position, float brightness) {

  int x = int(mod(position.x, 4.0));

  int y = int(mod(position.y, 4.0));

  int index = x + y * 4;

  float limit = 0.0;

​

  if (x < 8) {

    if (index == 0) limit = 0.0625;

    if (index == 1) limit = 0.5625;

    if (index == 2) limit = 0.1875;

    if (index == 3) limit = 0.6875;

    if (index == 4) limit = 0.8125;

    if (index == 5) limit = 0.3125;

    if (index == 6) limit = 0.9375;

    if (index == 7) limit = 0.4375;

    if (index == 8) limit = 0.25;

    if (index == 9) limit = 0.75;

    if (index == 10) limit = 0.125;

    if (index == 11) limit = 0.625;

    if (index == 12) limit = 1.0;

    if (index == 13) limit = 0.5;

    if (index == 14) limit = 0.875;

    if (index == 15) limit = 0.375;

  }

​

  return brightness < limit ? 0.0 : 1.0;

}

​

vec3 dither4x4(vec2 position, vec3 color) {

  return color * dither4x4(position, luma(color));

}

​

vec4 dither4x4(vec2 position, vec4 color) {

  return vec4(color.rgb * dither4x4(position, luma(color)), 1.0);

}

​

float dither8x8(vec2 position, float brightness) {

  int x = int(mod(position.x, 8.0));

  int y = int(mod(position.y, 8.0));

  int index = x + y * 8;

  float limit = 0.0;

​

  if (x < 8) {

    if (index == 0) limit = 0.015625;

    if (index == 1) limit = 0.515625;

    if (index == 2) limit = 0.140625;

    if (index == 3) limit = 0.640625;

    if (index == 4) limit = 0.046875;

    if (index == 5) limit = 0.546875;

    if (index == 6) limit = 0.171875;

    if (index == 7) limit = 0.671875;

    if (index == 8) limit = 0.765625;

    if (index == 9) limit = 0.265625;

    if (index == 10) limit = 0.890625;

    if (index == 11) limit = 0.390625;

    if (index == 12) limit = 0.796875;

    if (index == 13) limit = 0.296875;

    if (index == 14) limit = 0.921875;

    if (index == 15) limit = 0.421875;

    if (index == 16) limit = 0.203125;

    if (index == 17) limit = 0.703125;

    if (index == 18) limit = 0.078125;

    if (index == 19) limit = 0.578125;

    if (index == 20) limit = 0.234375;

    if (index == 21) limit = 0.734375;

    if (index == 22) limit = 0.109375;

    if (index == 23) limit = 0.609375;

    if (index == 24) limit = 0.953125;

    if (index == 25) limit = 0.453125;

    if (index == 26) limit = 0.828125;

    if (index == 27) limit = 0.328125;

    if (index == 28) limit = 0.984375;

    if (index == 29) limit = 0.484375;

    if (index == 30) limit = 0.859375;

    if (index == 31) limit = 0.359375;

    if (index == 32) limit = 0.0625;

    if (index == 33) limit = 0.5625;

    if (index == 34) limit = 0.1875;

    if (index == 35) limit = 0.6875;

    if (index == 36) limit = 0.03125;

    if (index == 37) limit = 0.53125;

    if (index == 38) limit = 0.15625;

    if (index == 39) limit = 0.65625;

    if (index == 40) limit = 0.8125;

    if (index == 41) limit = 0.3125;

    if (index == 42) limit = 0.9375;

    if (index == 43) limit = 0.4375;

    if (index == 44) limit = 0.78125;

    if (index == 45) limit = 0.28125;

    if (index == 46) limit = 0.90625;

    if (index == 47) limit = 0.40625;

    if (index == 48) limit = 0.25;

    if (index == 49) limit = 0.75;

    if (index == 50) limit = 0.125;

    if (index == 51) limit = 0.625;

    if (index == 52) limit = 0.21875;

    if (index == 53) limit = 0.71875;

    if (index == 54) limit = 0.09375;

    if (index == 55) limit = 0.59375;

    if (index == 56) limit = 1.0;

    if (index == 57) limit = 0.5;

    if (index == 58) limit = 0.875;

    if (index == 59) limit = 0.375;

    if (index == 60) limit = 0.96875;

    if (index == 61) limit = 0.46875;

    if (index == 62) limit = 0.84375;

    if (index == 63) limit = 0.34375;

  }

​

  return brightness < limit ? 0.0 : 1.0;

}

​

vec3 dither8x8(vec2 position, vec3 color) {

  return color * dither8x8(position, luma(color));

}

​

vec4 dither8x8(vec2 position, vec4 color) {

  return vec4(color.rgb * dither8x8(position, luma(color)), 1.0);

}

​

float dither2x2(vec2 position, float brightness) {

  int x = int(mod(position.x, 2.0));

  int y = int(mod(position.y, 2.0));

  int index = x + y * 2;

  float limit = 0.0;

​

  if (x < 8) {

    if (index == 0) limit = 0.25;

    if (index == 1) limit = 0.75;

    if (index == 2) limit = 1.00;

    if (index == 3) limit = 0.50;

  }

​

  return brightness < limit ? 0.0 : 1.0;

}

​

vec3 dither2x2(vec2 position, vec3 color) {

  return color * dither2x2(position, luma(color));

}

​

vec4 dither2x2(vec2 position, vec4 color) {

  return vec4(color.rgb * dither2x2(position, luma(color)), 1.0);

}

​

​

void main() {

  vec2 uv = vTexCoord;

  //vec3 col;

  //vec4 _col = texture2D(tex0, uv);

  //col = _col.rgb;

​

  //col = dither(col);

  //gl_FragColor = vec4(col, 1.0);

​

  gl_FragColor = dither8x8(gl_FragCoord.xy, texture2D(tex0, uv));

}`;

​