MixSceneWithBoundingCircle

const ColorPalette = Object.freeze({

  "colorT": "#50d0d0",

    "colorM": "#be1e3e",

    "colorK": "#7967c3",

    "colorH": "#ffc639",

  "colorN": "#255699",

  "colorS": "#aeb49c"

});

​

let vs = `

precision mediump float;

​

attribute vec3 aPosition;

attribute vec2 aTexCoord;

uniform mat4 uProjectionMatrix;

uniform mat4 uModelViewMatrix;

​

varying vec2 vTexCoord;

​

void main() { 

  vec3 uPosition = aPosition;

  vec4 positionVec4 = vec4(uPosition, 1.0);

​

  gl_Position = uProjectionMatrix * uModelViewMatrix * positionVec4;//positionVec4;

  vTexCoord = aTexCoord;

}

`;

​

let fs = `

#ifdef GL_ES

precision mediump float;

#endif

varying vec2 vTexCoord;

​

uniform sampler2D fillGraphics;

uniform sampler2D wireGraphics;

uniform sampler2D maskGraphics;

uniform float time;

uniform vec2 resolution;

​

vec3 color;

​

#define R_LUMINANCE 0.298912

#define G_LUMINANCE 0.586611

#define B_LUMINANCE 0.114478

​

const vec3 monochromeScale = vec3(R_LUMINANCE, G_LUMINANCE, B_LUMINANCE);

const vec3 sepiaCoef = vec3(0.9, 0.7, 0.4);

​

vec4 offsetLookup(sampler2D tex, vec2 uv, float xOffset, float yOffset){

  vec2 inverseTexSize = vec2(1.0 / resolution.x, 1.0 / resolution.y);

  return texture2D(tex, uv + vec2(xOffset * inverseTexSize.x, yOffset * inverseTexSize.y));

}

​

float random(float v){

  return fract(sin(234.14 * v) * 347.12);

}

​

float seg(vec2 uv, vec2 s){

  return floor(s.x * uv.x) + s.x * floor(s.y * uv.y);

}

​

vec3 latticeTex(vec2 uv){

    vec3 col = vec3(0.0);

  uv.x += time * 0.5;

    float checker = mod(floor(uv.x), 2.0);

  // float checker = mod(floor(uv.x) + floor(uv.y), 2.0);

​

    col += checker;

    return col;

}

​

void main() {

    // vec2 uv = vec2(vTexCoord.x, 1.0 - vTexCoord.y);

  vec2 uv = vTexCoord;

  // vec4 fillGraphicsTex = texture2D(fillGraphics, uv);

  // vec4 wireGraphicsTex = texture2D(wireGraphics, uv);

  // vec3 checker = latticeTex(uv * 20.0);

  // color += checker;

  // float circle = step((sin(length(uv - vec2(0.5)) * 20.0 - time * 2.0) + 1.0) * 0.5, 0.5);

  // color += mix(fillGraphicsTex.rgb, fillGraphicsTex.rgb, circle);

​

  // default

  // vec4 tex = texture2D(fillGraphics, uv);

  // color = tex.rgb;

​

  // grayScale

  // vec4 tex = texture2D(fillGraphics, uv);

  // float gray = dot(tex.rgb, monochromeScale);

  // color = vec3(gray);

​

  // negative

  // vec4 tex = texture2D(fillGraphics, uv);

  // color = vec3(1.0) - tex.rgb;

​

  // sepia

  // vec4 tex = texture2D(fillGraphics, uv);

  // float v = dot(tex.rgb, monochromeScale);

  // color = sepiaCoef * v;

​

  // threshold

  // vec4 tex = texture2D(fillGraphics, uv);

  // float v = dot(tex.rgb, monochromeScale);

  // color = vec3(step(0.53333, v));

​

  // many screen

  // vec2 fPos = fract(uv * 5.0);

  // vec4 tex = texture2D(fillGraphics, fPos);

  // color = tex.rgb;

​

  // sin(uv)

  // vec2 uv2 = vec2(uv.x + sin(time * 0.7 + uv.y * 15.0) * 0.022, uv.y + cos(time * 0.72 + uv.x * 105.0) * 0.022);

  // vec2 uv3 = mix(uv, uv2, sin(time*0.4)*0.5+0.5);

  // vec4 tex = texture2D(fillGraphics, uv3);

  // color = tex.rgb;

​

  // step

  // float t = step(uv.x, (sin(time*0.2) + 1.0) * 0.5);

  // vec4 fillGraphicsTex = texture2D(fillGraphics, uv);

  // vec4 wireGraphicsTex = texture2D(wireGraphics, uv);

  // color = mix(fillGraphicsTex.rgb, wireGraphicsTex.rgb, t);

​

  // three tex

  vec4 fillGraphicsTex = texture2D(fillGraphics, uv);

  vec4 wireGraphicsTex = texture2D(wireGraphics, uv);

  vec4 maskGraphicsTex = texture2D(maskGraphics, uv);

  color = mix(wireGraphicsTex.rgb, fillGraphicsTex.rgb, maskGraphicsTex.rgb);

​

  // blur

  // vec4 texColor = offsetLookup(wireGraphics, uv, -8.0, 0.0) * 0.5;

  // texColor += offsetLookup(wireGraphics, uv, -6.0, 0.0) * 0.09;

  // texColor += offsetLookup(wireGraphics, uv, -4.0, 0.0) * 0.12;

  // texColor += offsetLookup(wireGraphics, uv, -2.0, 0.0) * 0.15;

  // texColor += offsetLookup(wireGraphics, uv, 0.0, 0.0) * 0.16;

  // texColor += offsetLookup(wireGraphics, uv, 2.0, 0.0) * 0.15;

  // texColor += offsetLookup(wireGraphics, uv, 4.0, 0.0) * 0.12;

  // texColor += offsetLookup(wireGraphics, uv, 6.0, 0.0) * 0.09;

  // texColor += offsetLookup(wireGraphics, uv, 8.0, 0.0) * 0.05;

​

    gl_FragColor = vec4(color, 1.0);

}

`;

​

​

let fillGraphics;

let wireGraphics;

let maskGraphics;

let useShader;

let scenes;

let balls = [];

​

function setup() {

//  createCanvas(windowWidth, windowHeight);

  createCanvas(800, 800, WEBGL);

  background(0);

​

  fillGraphics = createGraphics(width, height, WEBGL);

  wireGraphics = createGraphics(width, height, WEBGL);

  maskGraphics = createGraphics(width, height);

  scenes = new Scenes(fillGraphics, wireGraphics);

​

  balls.push(new Ball());

  balls.push(new Ball());

  balls.push(new Ball());

​

  useShader = createShader(vs, fs);

  textureMode(NORMAL);

}

​

function draw() {

  background(0);

​

  fillGraphics.clear();

  fillGraphics.background(255);

  wireGraphics.clear();

  wireGraphics.background(0);

  maskGraphics.clear();

  maskGraphics.background(0);

​

  scenes.updateLoop();

​

  for(let i = 0; i < balls.length; i++){

    balls[i].update();

    balls[i].boundary();

    balls[i].display(maskGraphics);

  }

​

  // imageMode(CENTER);

  // image(scenes.getFillGraphics(), 0, 0);

  // image(maskGraphics, 0, 0);

​

  shader(useShader);

  useShader.setUniform("resolution", [fillGraphics.width, fillGraphics.height]);

  useShader.setUniform("time", frameCount*0.04);

  useShader.setUniform("fillGraphics", fillGraphics);

  useShader.setUniform("wireGraphics", wireGraphics);

  useShader.setUniform("maskGraphics", maskGraphics);

​

  rectMode(CENTER);

  rect(0, 0, width, height);

}

​

function Ball(){

  this.pos = createVector(random(width), random(height));

  this.vel = p5.Vector.random2D().mult(random(3, 6));

  this.radius = random(140, 200);

  this.update = function(){

    this.pos.add(this.vel);

  }

​

  this.boundary = function(){

    if(this.pos.x > width - this.radius * 0.5){

      this.pos.x = width - this.radius * 0.5;

      this.vel.x *= -1;

    }

    if(this.pos.x <  this.radius * 0.5){

      this.pos.x = this.radius * 0.5;

      this.vel.x *= -1;

    }

    if(this.pos.y > height - this.radius * 0.5){

      this.pos.y = height - this.radius * 0.5;

      this.vel.y *= -1;

    }

    if(this.pos.y <  this.radius * 0.5){

      this.pos.y = this.radius * 0.5;

      this.vel.y *= -1;

    }

  }

​

  this.display = function(gr){

    gr.fill(255);

    gr.noStroke();

    gr.ellipse(this.pos.x, this.pos.y, this.radius, this.radius);

  }

}

​

function Scenes(fillGraphics, wireGraphics){

    this.fillGraphics = fillGraphics;

    this.wireGraphics = wireGraphics;

​

    this.fillScene = new Scene(fillGraphics, false, color(ColorPalette.colorN));

    this.wireScene = new Scene(wireGraphics, true, color(ColorPalette.colorS));

​

    this.updateLoop = function(){

        // console.log("loop");

        if(random(1) > 0.9){

            let p = createVector(random(-width, width), random(height, height * 2), random(-width, width));

            let v = createVector(0.0, -random(2.0, 6.0), 0.0);

            let len = random(20, 60);

            let aVec = createVector(random(TWO_PI), random(TWO_PI), random(TWO_PI));

            const aVelMin = 0.01;

            const aVelMax = 0.05;

            let aVel = createVector(random(aVelMin, aVelMax) * (random(1) > 0.5 ? -1 : 1), random(aVelMin, aVelMax) * (random(1) > 0.5 ? -1 : 1), random(aVelMin, aVelMax) * (random(1) > 0.5 ? -1 : 1));

            this.fillScene.addBp(p, v, len, aVec, aVel);

            this.wireScene.addBp(p, v, len, aVec, aVel);

        }

​

        this.fillScene.updateLoop();

        this.wireScene.updateLoop();

    }

​

    this.getFillGraphics = function(){

        return this.fillGraphics;

    }

​

    this.getWireGraphics = function(){

        return this.wireGraphics;

    }

}

​

function Scene(graphics, isWire, col){

    this.graphics = graphics;

    this.isWire = isWire;

    this.col = col;

​

    this.bps = new BoxParticleSystem(this.graphics, this.isWire, this.col);

​

    this.updateLoop = function(){

        // console.log("loop");

        this.bps.updateLoop();

​

        this.graphics.push();

        this.graphics.translate(0, 0, 0);

        this.graphics.rotateY(frameCount * 0.02);

        if(this.isWire)

        {

            this.graphics.noFill();

            this.graphics.stroke(this.col);

        }

        else

        {

            this.graphics.noStroke();

            this.graphics.ambientLight(120);

            const v = createVector(-2, 1, -1);

            this.graphics.directionalLight(this.col, v);

            this.graphics.ambientMaterial(this.col);

            this.graphics.specularMaterial(100, 255);

        }

        this.graphics.sphere(100);

        this.graphics.pop();

    }

​

    this.addBp = function(pos, vel, len, angleVec, angleVel){

        this.bps.addParticle(pos, vel, len, angleVec, angleVel)

    }

​

    this.getGraphics = function(){

        return this.graphics;

    }

}

​

function BoxParticleSystem(graphics, isWire, col){

    this.graphics = graphics;

    this.isWire = isWire;

    this.col = col;

    this.boxes = [];

​

    this.updateLoop = function(){

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

            this.boxes[i].update();

            this.boxes[i].display();

            if(this.boxes[i].isDeadParticle()){

                this.boxes.splice(i, 1);

                // console.log("delete");

            }

        }

    }

​

    this.addParticle = function(pos, vel, len, angleVec, angleVel){

        this.boxes.push(new BoxParticle(this.graphics, this.isWire, this.col, pos, vel, len, angleVec, angleVel));

    }

​

}

​

function BoxParticle(graphics, isWire, col, pos, vel, len, angleVec, angleVel){

    this.graphics = graphics;

    this.isWire = isWire;

    this.col = col;

​

    this.pos = pos;

    this.vel = vel;

    this.len = len;

    this.angleVec = angleVec;

    this.angleVel = angleVel;

​

    this.update = function(){

        this.pos.add(this.vel);

        this.angleVec.add(this.angleVel);

    }

​

    this.display = function(){

        this.graphics.push();

        this.graphics.translate(this.pos.x, this.pos.y, this.pos.z);

        this.graphics.rotateX(this.angleVec.x);

        this.graphics.rotateY(this.angleVec.y);

        this.graphics.rotateZ(this.angleVec.z);

        if(this.isWire)

        {

            this.graphics.noFill();

            this.graphics.stroke(this.col);

        }

        else

        {

            this.graphics.ambientLight(120);

            const v = createVector(-2, 1, -1);

            this.graphics.directionalLight(this.col, v);

            this.graphics.ambientMaterial(this.col);

            this.graphics.specularMaterial(100, 255);

        }

        this.graphics.box(this.len);

        this.graphics.pop();

    }

​

    this.isDeadParticle = function(){

        return this.pos.y < -height * 1.2;

    }

}