// mold: https://openprocessing.org/sketch/2213463/#code

let d;

​

let dither_fs;

​

let drops = [];

function tineLine(v, x, y, z, c) {

  for (let drop of drops) {

    drop.tine(v, x, y, z, c);

  }

}

​

function addInk(x, y, r, col, _drops) {

  let drop = new Drop(x, y, r, col);

  for (let other of drops) {

    other.marble(drop);

  }

  _drops.push(drop);

}

​

​

class Mold {

  constructor(g) {

    // Mold variables

    // this.x = random(width);

    // this.y = random(height); 

    this.x = random(width/2 - 20, width/2 + 20);

    this.y = random(height/2 - 20, height/2 + 20); 

    this.r = 0.5;

    this.g = g;

    this.heading = random(360);

    this.vx = cos(this.heading);

    this.vy = sin(this.heading);

    this.rotAngle = 45;

    // Sensor variables

    this.rSensorPos = createVector(0, 0);

    this.lSensorPos = createVector(0, 0);

    this.fSensorPos = createVector(0, 0);

    this.sensorAngle = 45;

    this.sensorDist = 10;

  }

  update() {        

    this.vx = cos(this.heading);

    this.vy = sin(this.heading);

    // Using % Modulo expression to wrap around the canvas

    this.x = (this.x + this.vx + width) % width;

    this.y = (this.y + this.vy + height) % height;

    // Get 3 sensor positions based on current position and heading

    this.getSensorPos(this.rSensorPos, this.heading + this.sensorAngle);

    this.getSensorPos(this.lSensorPos, this.heading - this.sensorAngle);

    this.getSensorPos(this.fSensorPos, this.heading);

    // Get indices of the 3 sensor positions and get the color values from those indices

    let index, l, r, f;

    index = 4*(d * floor(this.rSensorPos.y)) * (d * width) + 4*(d * floor(this.rSensorPos.x));

    r = this.g.pixels[index];

    index = 4*(d * floor(this.lSensorPos.y)) * (d * width) + 4*(d * floor(this.lSensorPos.x));

    l = this.g.pixels[index];

    index = 4*(d * floor(this.fSensorPos.y)) * (d * width) + 4*(d * floor(this.fSensorPos.x));

    f = this.g.pixels[index];

    // Compare values of f, l, and r to determine movement 

    if (f > l && f > r) {

      this.heading += 0;

    } else if (f < l && f < r) {

      if (random(1) < 0.5) {

        this.heading += this.rotAngle;

      } else {

        this.heading -= this.rotAngle;

      }

    } else if (l > r) {

      this.heading += -this.rotAngle;

    } else if (r > l) {

      this.heading += this.rotAngle;

    }

  }

  display() {

    this.g.noStroke();

    let col = color(255,0,255);

    let ysep = height / vaporwave.length;

    for (let i = vaporwave.length-1; i >= 0; i--) {

      if (this.y > ysep*i) {

        col = color(vaporwave[i]);

        break;

      }

    }

    col.setAlpha(10);

    this.g.fill(col);

    this.g.ellipse(this.x, this.y, this.r*2, this.r*2);

    // line(this.x, this.y, this.x + this.r*3*this.vx, this.y + this.r*3*this.vy);

    // fill(255, 0, 0);

    // ellipse(this.rSensorPos.x, this.rSensorPos.y, this.r*2, this.r*2);

    // ellipse(this.lSensorPos.x, this.lSensorPos.y, this.r*2, this.r*2);

    // ellipse(this.fSensorPos.x, this.fSensorPos.y, this.r*2, this.r*2);

  }

  getSensorPos(sensor, angle) {

    sensor.x = (this.x + this.sensorDist*cos(angle) + width) % width;

    sensor.y = (this.y + this.sensorDist*sin(angle) + height) % height;

  }

​

}

​

let ibm_blue = "#0f62fe";

let vaporwave = [

  // (0, 0, 0),

  // (20, 20, 20),

  // (220, 220, 220),

  "#ff71ce",

  "#01cdfe",

  "#05ffa1",

  "#b967ff",

  "#fffb96",

  "#0f62fe",

  // (0, 0, 0),

  // (0, 0, 0),

  // (0,0,0),

];

​

function setup() {

  createCanvas(800, 1200);

  background(20);

  noiseDetail(8, 0.75);

  pixelDensity(1);

  // angleMode(DEGREES);

  let molds = [];

  let num = 4000;

  d = pixelDensity();

​

  let gfx = createGraphics(width, height);

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

    molds[i] = new Mold(gfx);

  }

  for (let _ = 0; _ < 10000; _++) {

    gfx.loadPixels();

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

      molds[i].update();

      molds[i].display();

    }

  }

  dither_fs = createFilterShader(dither_src);

​

  //   for (let t = 0; t < TWO_PI; t++) {

  //     gfx.push();

​

  //     let x = 20 * cos(t);

  //     let y = -height * 0.25 + 20 * sin(t);

​

  //     gfx.translate(x, y);

  //     gfx.rotateX(QUARTER_PI);

  //     gfx.rotateY(HALF_PI);

  //     gfx.rotateZ(PI);

  //     let ibm = color(ibm_blue);

  //     ibm.setAlpha(40);

  //     gfx.stroke(ibm);

  //     gfx.noFill();

  //     gfx.sphere(width * 0.3, 24, 4);

  //     gfx.pop();

  //   }

​

  for (let cid = 0; cid < vaporwave.length; cid++) {

    let col = color(vaporwave[cid]);

    // stroke(col);

​

    let x = 0; //random(width); //*.25, width*.75);

    let y = random(height); //*.25, height*0.75);

​

    let w = width; //random(width * 0.25, width * 0.75);

    let h = random(height * 0.25, height * 0.75);

​

    let hw = w / 2;

    let hh = h / 2;

    let sx = 0; //x - hw;

    let sy = y - hh;

​

    // let _sx = sx;

    // if (x < width/2) _sx = 0;

    // else w = width;

​

    let maxZ = 1; //10

    for (let z = 0; z < maxZ; z++) {

      // let z = 0;

      for (let _x = sx; _x < sx + w; _x++) {

        for (let _y = sy; _y < sy + h; _y++) {

          let zoom = map(z, 0, 10, 0.001, 0.0001); //map(z, 0, 10, 0.01, 0.1);

​

          let n = noise(_x * zoom, _y * zoom, z * zoom);

          let off = map(n, 0.0, 1.0, -hh, hh);

          let a = map(z, 0, 10, 60, 1); //120, 20);

          col.setAlpha(a);

          stroke(col);

          point(_x, _y + off);

        }

      }

    }

    //     fill(col);

    //     rectMode(CENTER)

    //     rect(x, y, w, h);

  }

​

  // let off = width * 0.05;

  // stroke(color(ibm_blue));

  // // strokeWeight(4);

  // noFill();

  // rect(off, off, width - 2 * off, height - 2 * off);

​

  filter(dither_fs);

  // image(gfx, 0, 0);

  let off = width * 0.05;

  stroke(color(ibm_blue));

  // strokeWeight(4);

  noFill();

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

  let currentColor = color(vaporwave[0]);

  for (let _ = 0; _ < 250; _++) {

    let life = 50;

    let x = random(width-1);

    let y = random(height-1);

    let r = random(8, 15);

    let col = color(random(vaporwave));

    counter++;

    addInk(x, y, r, currentColor, drops);

    while (life > 0 && x >= 0 && x <= width-1 && y >= 0 && y <= height-1) {

      let n = noise(x*0.01, y*0.01);

      let a = map(n, 0.0, 1.0, -TWO_PI, TWO_PI);

      x += (r/2) * cos(a);

      y += (r/2) * sin(a);

      counter++;

      addInk(x, y, r, col, drops);

      life--;

    }

  }

  for (let drop of drops) {

    drop.show();

  }

}

let counter = 0;

function draw() {

  // background(220);

}

​

// 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 = dither2x2(gl_FragCoord.xy, texture2D(tex0, uv));

}`;

​

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

let tv_noise_src = `precision mediump float;

varying vec2 vTexCoord;

uniform sampler2D tex0;

uniform float u_noise;

uniform float u_time;

​

/*

 * 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 _noise = fract(sin(u_noise*4.)) * 1.2 * cos(u_time*.0001);

​

    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(u_time))); //(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);

}`;

​