gonnavis

TOTALLY SUPER DUPER NOT MY WORK! Trying to illuminate how FizzyText (seen here, source here, isolated from dat.GUI dependency here) works. Original appears to have been written by George Michael Brower.

In the original, which I find brilliant:

• Solid black text is drawn onto an invisible canvas, from which it gets bitmap data
• The bitmap data is read like a collision detection array, where black means "you're on top of text" and white means "you're not"
• Particles of size r=0 are randomly spawned on a visible canvas
• The particles grow if they're on top of a (non-rendered) black pixel, and shrink till they disappear if not
• When they shrink to r=0, they respawn randomly somewhere
• The particles follow a Perlin noise flow field, a very sensible and fluid kind of random movement, in which nearby particles

gonnavis

.shaking {animation: shaking 1s linear infinite;}
@keyframes shaking{
  0%{transform:translate(0px, 0px);}
  40%,49%{transform:translate(0px, 0px);}
  50%,59%{transform:translate(-5px, 0px);}
  60%,69%{transform:translate(5px, 0px);}
  70%,79%{transform:translate(-5px, -5px);}
  80%,89%{transform:translate(0px, 5px);}
  90%,99%{transform:translate(5px, 5px);}
  100%{transform:translate(-5px, 5px);}

gonnavis

// Processing code by Etienne JACOB
// motion blur template by beesandbombs
// opensimplexnoise code in another tab might be necessary
// --> code here : https://gist.github.com/Bleuje/fce86ef35b66c4a2b6a469b27163591e


int[][] result;
float t, c;

float ease(float p) {

gonnavis

// by Etienne JACOB
// motion blur template by beesandbombs
// needs opensimplexnoise code in another tab
// --> code here : https://gist.github.com/Bleuje/fce86ef35b66c4a2b6a469b27163591e

int[][] result;
float t, c;

float ease(float p) {
  return 3*p*p - 2*p*p*p;

gonnavis

// Processing code by Etienne JACOB
// motion blur template by beesandbombs
// opensimplexnoise code in another tab might be necessary
// --> code here : https://gist.github.com/Bleuje/fce86ef35b66c4a2b6a469b27163591e


int[][] result;
float t, c;

float ease(float p) {

gonnavis

Generic 1,2,3 Noise

float rand(float n){return fract(sin(n) * 43758.5453123);}

float noise(float p){
	float fl = floor(p);
  float fc = fract(p);
	return mix(rand(fl), rand(fl + 1.0), fc);
}

gonnavis

.close {
  position:absolute;
  width:10vw;height:10vw;left:0;right:0;top:0;bottom:0;margin:auto;
  background: rgba(0, 0, 0, 0)
    url('data:image/svg+xml;utf8,<svg t="1604377024255" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3056" width="200" height="200"><path d="M511.65696 471.998464l140.791808-140.792832c11.108352-11.108352 29.118464-11.108352 40.226816 0 11.108352 11.108352 11.108352 29.118464 0 40.226816L551.882752 512.22528l140.792832 140.792832c11.108352 11.108352 11.108352 29.118464 0 40.226816-11.108352 11.108352-29.118464 11.108352-40.226816 0L511.65696 552.452096 370.864128 693.244928c-11.108352 11.108352-29.118464 11.108352-40.226816 0-11.108352-11.108352-11.108352-29.118464 0-40.226816L471.42912 512.22528 330.637312 371.432448c-11.108352-11.108352-11.108352-29.118464 0-40.226816 11.108352-11.108352 29.118464-11.108352 40.226816 0l140.792832 140.792832z" fill="white" p-id="3057"></path><path d="M512 910.222336c219.931648 0 398.222336-178.290688 3

gonnavis

//https://threejs.org/examples/?q=webgl_instancing_modified#webgl_instancing_modified

const material = new THREE.MeshMatcapMaterial( { color: 0xaaaaff, matcap: texture } );

material.onBeforeCompile = function(shader) {
  shader.vertexShader = shader.vertexShader
    .replace("#include <common>", `
            attribute vec3 instanceColor;
            varying vec3 vInstanceColor;
            #include <common>

gonnavis

let uniforms = THREE.UniformsUtils.merge([
  THREE.ShaderLib.standard.uniforms,
  {
    diffuse: { value: new THREE.Color(1, 1, 1) },
    cameraLengthInverse: { value: 0 },
  },
]);
let material = new THREE.ShaderMaterial({
  lights: true,
  vertexColors: true,

gonnavis

vec3 hash3( float n ){
  // http://glslsandbox.com/e#61476.1
  return fract(sin(vec3(n,n+1.0,n+2.0))*vec3(43758.5453123,22578.1459123,19642.3490423));
}