jay817/win32.run
1
0
Fork 0
mirror of https://github.com/ducbao414/win32.run.git synced 2025-12-16 17:22:51 +09:00
Code Issues Actions Packages Projects Releases Wiki Activity

init the awkward code

Browse Source
This commit is contained in:
Bao Nguyen
2023-02-13 19:32:10 +07:00
commit 27170afcac
5426 changed files with 1244579 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

219
static/html/visualizers/1.html Normal file
View File

@@ -0,0 +1,219 @@
<html>
<head>
<style>
html,body{
overflow: hidden;
margin: 0;
background-color: black;
}
</style>
</head>
<!-- CodePen Home
Spheres on a noisy sphere
Paul
Follow
https://codepen.io/prisoner849/pen/KKRONqp
-->
<body>
<script>
let noise = `
// Simplex 4D Noise
// by Ian McEwan, Ashima Arts
//
vec4 permute(vec4 x){return mod(((x*34.0)+1.0)*x, 289.0);}
float permute(float x){return floor(mod(((x*34.0)+1.0)*x, 289.0));}
vec4 taylorInvSqrt(vec4 r){return 1.79284291400159 - 0.85373472095314 * r;}
float taylorInvSqrt(float r){return 1.79284291400159 - 0.85373472095314 * r;}
vec4 grad4(float j, vec4 ip){
const vec4 ones = vec4(1.0, 1.0, 1.0, -1.0);
vec4 p,s;
p.xyz = floor( fract (vec3(j) * ip.xyz) * 7.0) * ip.z - 1.0;
p.w = 1.5 - dot(abs(p.xyz), ones.xyz);
s = vec4(lessThan(p, vec4(0.0)));
p.xyz = p.xyz + (s.xyz*2.0 - 1.0) * s.www;
return p;
}
float snoise(vec4 v){
const vec2 C = vec2( 0.138196601125010504, // (5 - sqrt(5))/20 G4
0.309016994374947451); // (sqrt(5) - 1)/4 F4
// First corner
vec4 i = floor(v + dot(v, C.yyyy) );
vec4 x0 = v - i + dot(i, C.xxxx);
// Other corners
// Rank sorting originally contributed by Bill Licea-Kane, AMD (formerly ATI)
vec4 i0;
vec3 isX = step( x0.yzw, x0.xxx );
vec3 isYZ = step( x0.zww, x0.yyz );
// i0.x = dot( isX, vec3( 1.0 ) );
i0.x = isX.x + isX.y + isX.z;
i0.yzw = 1.0 - isX;
// i0.y += dot( isYZ.xy, vec2( 1.0 ) );
i0.y += isYZ.x + isYZ.y;
i0.zw += 1.0 - isYZ.xy;
i0.z += isYZ.z;
i0.w += 1.0 - isYZ.z;
// i0 now contains the unique values 0,1,2,3 in each channel
vec4 i3 = clamp( i0, 0.0, 1.0 );
vec4 i2 = clamp( i0-1.0, 0.0, 1.0 );
vec4 i1 = clamp( i0-2.0, 0.0, 1.0 );
// x0 = x0 - 0.0 + 0.0 * C
vec4 x1 = x0 - i1 + 1.0 * C.xxxx;
vec4 x2 = x0 - i2 + 2.0 * C.xxxx;
vec4 x3 = x0 - i3 + 3.0 * C.xxxx;
vec4 x4 = x0 - 1.0 + 4.0 * C.xxxx;
// Permutations
i = mod(i, 289.0);
float j0 = permute( permute( permute( permute(i.w) + i.z) + i.y) + i.x);
vec4 j1 = permute( permute( permute( permute (
i.w + vec4(i1.w, i2.w, i3.w, 1.0 ))
+ i.z + vec4(i1.z, i2.z, i3.z, 1.0 ))
+ i.y + vec4(i1.y, i2.y, i3.y, 1.0 ))
+ i.x + vec4(i1.x, i2.x, i3.x, 1.0 ));
// Gradients
// ( 7*7*6 points uniformly over a cube, mapped onto a 4-octahedron.)
// 7*7*6 = 294, which is close to the ring size 17*17 = 289.
vec4 ip = vec4(1.0/294.0, 1.0/49.0, 1.0/7.0, 0.0) ;
vec4 p0 = grad4(j0, ip);
vec4 p1 = grad4(j1.x, ip);
vec4 p2 = grad4(j1.y, ip);
vec4 p3 = grad4(j1.z, ip);
vec4 p4 = grad4(j1.w, ip);
// Normalise gradients
vec4 norm = taylorInvSqrt(vec4(dot(p0,p0), dot(p1,p1), dot(p2, p2), dot(p3,p3)));
p0 *= norm.x;
p1 *= norm.y;
p2 *= norm.z;
p3 *= norm.w;
p4 *= taylorInvSqrt(dot(p4,p4));
// Mix contributions from the five corners
vec3 m0 = max(0.6 - vec3(dot(x0,x0), dot(x1,x1), dot(x2,x2)), 0.0);
vec2 m1 = max(0.6 - vec2(dot(x3,x3), dot(x4,x4) ), 0.0);
m0 = m0 * m0;
m1 = m1 * m1;
return 49.0 * ( dot(m0*m0, vec3( dot( p0, x0 ), dot( p1, x1 ), dot( p2, x2 )))
+ dot(m1*m1, vec2( dot( p3, x3 ), dot( p4, x4 ) ) ) ) ;
}
vec3 getNoised( vec3 p){
vec3 np = normalize(p);
float n = snoise(vec4(np * 2., time));
n = n * 0.5 + 0.5;
return np * (4. + n * 2.);
}
`;
</script>
<script type="module">
import * as THREE from "https://cdn.skypack.dev/three@0.136.0";
import {OrbitControls} from "https://cdn.skypack.dev/three@0.136.0/examples/jsm/controls/OrbitControls";
let scene = new THREE.Scene();
scene.background = new THREE.Color(0x240024);
let camera = new THREE.PerspectiveCamera(60, innerWidth / innerHeight, 1, 1000);
camera.position.set(0, 0, 10);
let renderer = new THREE.WebGLRenderer({antialias: true});
renderer.setSize(innerWidth, innerHeight);
document.body.appendChild(renderer.domElement);
window.addEventListener("resize", event => {
camera.aspect = innerWidth / innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(innerWidth, innerHeight);
})
let controls = new OrbitControls(camera, renderer.domElement);
controls.enableDamping = true;
let gu = {
time: {value: 0}
}
let rndPts = [];
let rndClr = [];
let v3 = new THREE.Vector3();
let c = new THREE.Color(), c1 = new THREE.Color("red"), c2 = new THREE.Color("magenta").addScalar(0.25);
for(let i = 0; i < 1000; i++){
v3.randomDirection();
rndPts.push(v3.x, v3.y, v3.z);
c.lerpColors(c1, c2, Math.random());
rndClr.push(c.r, c.g, c.b);
}
let ig = new THREE.InstancedBufferGeometry().copy(new THREE.SphereGeometry(0.1));
ig.instanceCount = Infinity;
ig.setAttribute("instPos", new THREE.InstancedBufferAttribute(new Float32Array(rndPts), 3));
ig.setAttribute("color", new THREE.InstancedBufferAttribute(new Float32Array(rndClr), 3));
let im = new THREE.MeshBasicMaterial({
vertexColors: true,
onBeforeCompile: shader => {
shader.uniforms.time = gu.time;
shader.vertexShader = `
uniform float time;
attribute vec3 instPos;
${noise}
${shader.vertexShader}
`.replace(
`#include <begin_vertex>`,
`#include <begin_vertex>
transformed += getNoised(instPos);
`
);
}
})
let io = new THREE.Mesh(ig, im);
let g = new THREE.IcosahedronGeometry(1, 40);
let m = new THREE.MeshBasicMaterial({
transparent: true,
opacity: 0.25,
color: 0xff4444,
wireframe: true,
onBeforeCompile: shader => {
shader.uniforms.time = gu.time;
shader.vertexShader = `
uniform float time;
${noise}
${shader.vertexShader}
`.replace(
`#include <begin_vertex>`,
`#include <begin_vertex>
transformed = getNoised(position);
`
);
console.log(shader.vertexShader);
}
})
let o = new THREE.Mesh(g, m);
o.add(io);
scene.add(o);
let clock = new THREE.Clock();
renderer.setAnimationLoop(() => {
controls.update();
let t = clock.getElapsedTime();
gu.time.value = t * 0.25;
renderer.render(scene, camera);
});
</script>
</body>
</html>

319
static/html/visualizers/10.html Normal file
View File

@@ -0,0 +1,319 @@
<html>
<head>
<style>
*{ margin: 0px;}
html, body {
background-color: black;
}
</style>
</head>
<!-- CodePen Home
Misjudged your limits, Pushed you too far
Tom Hinton
https://codepen.io/TomHinton/pen/abqvjgZ -->
<body>
<div id="shader"></div>
<script id="vertex" type="x-shader/x-vertex">
varying vec2 vUv;
void main() { gl_Position = vec4(position, 1.0);
vUv = uv;
}
</script>
<script id="fragment" type="x-shader/x-fragment">
precision highp float;
uniform vec2 u_resolution;
uniform float u_time;
varying vec2 vUv;
const float PI = 3.1415926535897932384626433832795;
const float TAU = PI * 2.;
const float HALF_PI = PI * .5;
float wiggly(float cx, float cy, float amplitude, float frequency, float spread){
float w = sin(cx * amplitude * frequency * PI) * cos(cy * amplitude * frequency * PI) * spread;
return w;
}
void coswarp(inout vec3 trip, float warpsScale ){
trip.xyz += warpsScale * .1 * cos(3. * trip.yzx + (u_time * .25));
trip.xyz += warpsScale * .05 * cos(11. * trip.yzx + (u_time * .25));
trip.xyz += warpsScale * .025 * cos(17. * trip.yzx + (u_time * .25));
}
void uvRipple(inout vec2 uv, float intensity){
vec2 p = uv -.5;
float cLength=length(p);
uv= uv +(p/cLength)*cos(cLength*15.0-u_time*.5)*intensity;
}
float smoothMod(float x, float y, float e){
float top = cos(PI * (x/y)) * sin(PI * (x/y));
float bot = pow(sin(PI * (x/y)),2.);
float at = atan(top/bot);
return y * (1./2.) - (1./PI) * at ;
}
vec2 modPolar(vec2 p, float repetitions) {
float angle = 2.*3.14/repetitions;
float a = atan(p.y, p.x) + angle/2.;
float r = length(p);
//float c = floor(a/angle);
a = smoothMod(a,angle,033323231231561.9) - angle/2.;
//a = mix(a,)
vec2 p2 = vec2(cos(a), sin(a))*r;
p2 += wiggly(p2.x + u_time * .05, p2.y + u_time * .05, 2., 4., 0.05);
return p2;
}
float stroke(float x, float s, float w){
float d = step(s, x+ w * .5) - step(s, x - w * .5);
return clamp(d, 0., 1.);
}
// Classic Perlin 2D Noise
// by Stefan Gustavson
//
vec4 permute(vec4 x)
{
return mod(((x*34.0)+1.0)*x, 289.0);
}
vec2 fade(vec2 t) {return t*t*t*(t*(t*6.0-15.0)+10.0);}
float cnoise(vec2 P){
vec4 Pi = floor(P.xyxy) + vec4(0.0, 0.0, 1.0, 1.0);
vec4 Pf = fract(P.xyxy) - vec4(0.0, 0.0, 1.0, 1.0);
Pi = mod(Pi, 289.0); // To avoid truncation effects in permutation
vec4 ix = Pi.xzxz;
vec4 iy = Pi.yyww;
vec4 fx = Pf.xzxz;
vec4 fy = Pf.yyww;
vec4 i = permute(permute(ix) + iy);
vec4 gx = 2.0 * fract(i * 0.0243902439) - 1.0; // 1/41 = 0.024...
vec4 gy = abs(gx) - 0.5;
vec4 tx = floor(gx + 0.5);
gx = gx - tx;
vec2 g00 = vec2(gx.x,gy.x);
vec2 g10 = vec2(gx.y,gy.y);
vec2 g01 = vec2(gx.z,gy.z);
vec2 g11 = vec2(gx.w,gy.w);
vec4 norm = 1.79284291400159 - 0.85373472095314 *
vec4(dot(g00, g00), dot(g01, g01), dot(g10, g10), dot(g11, g11));
g00 *= norm.x;
g01 *= norm.y;
g10 *= norm.z;
g11 *= norm.w;
float n00 = dot(g00, vec2(fx.x, fy.x));
float n10 = dot(g10, vec2(fx.y, fy.y));
float n01 = dot(g01, vec2(fx.z, fy.z));
float n11 = dot(g11, vec2(fx.w, fy.w));
vec2 fade_xy = fade(Pf.xy);
vec2 n_x = mix(vec2(n00, n01), vec2(n10, n11), fade_xy.x);
float n_xy = mix(n_x.x, n_x.y, fade_xy.y);
return 2.3 * n_xy;
}
vec2 rotate2D (vec2 _st, float _angle) {
_st -= 0.5;
_st = mat2(cos(_angle),-sin(_angle),
sin(_angle),cos(_angle)) * _st;
_st += 0.5;
return _st;
}
vec2 rotateTilePattern(vec2 _st){
// Scale the coordinate system by 2x2
_st *= 2.0;
// Give each cell an index number
// according to its position
float index = 0.0;
index += step(1., mod(_st.x,2.0));
index += step(1., mod(_st.y,2.0))*2.0;
// |
// 2 | 3
// |
//--------------
// |
// 0 | 1
// |
// Make each cell between 0.0 - 1.0
_st = fract(_st);
// Rotate each cell according to the index
if(index == 1.0){
// Rotate cell 1 by 90 degrees
_st = rotate2D(_st,PI*0.5);
} else if(index == 2.0){
// Rotate cell 2 by -90 degrees
_st = rotate2D(_st,PI*-0.5);
} else if(index == 3.0){
// Rotate cell 3 by 180 degrees
_st = rotate2D(_st,PI);
}
return _st;
}
vec2 tile(vec2 st, float _zoom){
float vTime = u_time;
st *= _zoom;
return fract(st);
}
vec2 rotateUV(vec2 uv, vec2 pivot, float rotation) {
mat2 rotation_matrix=mat2( vec2(sin(rotation),-cos(rotation)),
vec2(cos(rotation),sin(rotation))
);
uv -= pivot;
uv= uv*rotation_matrix;
uv += pivot;
return uv;
}
void coswarp2(inout vec2 trip, float warpsScale ){
float vTime = u_time;
trip.xy += warpsScale * .1 * cos(3. * trip.yx + (vTime * .25));
trip.xy += warpsScale * .05 * cos(11. * trip.yx + (vTime * .25));
trip.xy += warpsScale * .025 * cos(17. * trip.yx + (vTime * .25));
}
void main() {
vec2 uv = (gl_FragCoord.xy - u_resolution * .5) / u_resolution.yy + 0.5;
float vTime = u_time * .5 ;
vec2 uv2 = uv;
vec2 uv3 = uv;
uvRipple(uv3, .2);
uv = rotateUV(uv, vec2(.55), -PI * vTime * .05);
uv2 = rotateUV(uv, vec2(.45), PI * vTime * .05);
uv = mix(
mix(modPolar(uv2-.5, 12.), modPolar(uv-.25, 9.), fract(uv.x * 9. + cos(vTime)) + fract(uv2.y * 9. + sin(vTime))),
mix(modPolar(uv2-.75, 12.), modPolar(uv-.45, 9.), fract(uv2.x * 15. * sin(vTime * .2)) + fract(uv.y * 15. * sin(vTime * .2))), sin(vTime));
coswarp2(uv, 3.);
rotateTilePattern(uv );
vec3 color = mix(vec3(uv.x, uv.y, 1.), vec3(uv.y, uv.x, uv3.x), uv3.x *sin(vTime));
uvRipple(color.rg, 1.);
uvRipple(color.gb, color.r);
coswarp(color, 3.);
gl_FragColor = vec4(vec3(color.r, color.g, color.b), 1.0);
}
</script>
<script type="module">
import * as THREE from "https://cdn.skypack.dev/three@0.136.0";
import {OrbitControls} from "https://cdn.skypack.dev/three@0.136.0/examples/jsm/controls/OrbitControls";
let camera, scene, renderer, clock;
let uniforms;
function init() {
const container = document.getElementById("shader");
clock = new THREE.Clock();
camera = new THREE.Camera();
camera.position.z = 1;
scene = new THREE.Scene();
const geometry = new THREE.PlaneBufferGeometry(2, 2);
uniforms = {
u_time: { type: "f", value: 1.0 },
u_resolution: { type: "v2", value: new THREE.Vector2() },
};
const material = new THREE.ShaderMaterial({
uniforms,
vertexShader: document.getElementById("vertex").textContent,
fragmentShader: document.getElementById("fragment").textContent
});
const mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);
renderer = new THREE.WebGLRenderer();
renderer.setPixelRatio(window.devicePixelRatio);
container.appendChild(renderer.domElement);
onWindowResize();
window.addEventListener("resize", onWindowResize);
}
function onWindowResize() {
renderer.setSize(window.innerWidth, window.innerHeight);
uniforms.u_resolution.value.x = renderer.domElement.width;
uniforms.u_resolution.value.y = renderer.domElement.height;
}
function render() {
uniforms.u_time.value = clock.getElapsedTime();
renderer.render(scene, camera);
}
function animate() {
render();
requestAnimationFrame(animate);
}
init();
animate();
</script>
</body>
</html>

289
static/html/visualizers/11.html Normal file
View File

@@ -0,0 +1,289 @@
<html>
<head>
<style>
*{ margin: 0px;}
html, body {
background-color: black;
}
</style>
</head>
<!-- CodePen Home
Meet me there, In the blue
Tom Hinton
https://codepen.io/TomHinton/pen/vYdOdrL-->
<body>
<div id="shader"></div>
<script id="vertex" type="x-shader/x-vertex">
varying vec2 vUv;
void main() { gl_Position = vec4(position, 1.0);
vUv = uv;
}
</script>
<script id="fragment" type="x-shader/x-fragment">
precision highp float;
uniform vec2 u_resolution;
uniform float u_time;
varying vec2 vUv;
const float PI = 3.1415926535897932384626433832795;
const float TAU = PI * 2.;
float wiggly(float cx, float cy, float amplitude, float frequency, float spread){
float w = sin(cx * amplitude * frequency * PI) * cos(cy * amplitude * frequency * PI) * spread;
return w;
}
void coswarp(inout vec3 trip, float warpsScale ){
trip.xyz += warpsScale * .1 * cos(3. * trip.yzx + (u_time * .25));
trip.xyz += warpsScale * .05 * cos(11. * trip.yzx + (u_time * .25));
trip.xyz += warpsScale * .025 * cos(17. * trip.yzx + (u_time * .25));
}
void uvRipple(inout vec2 uv, float intensity){
vec2 p = uv -.5;
float cLength=length(p);
uv= uv +(p/cLength)*cos(cLength*15.0-u_time*.5)*intensity;
}
float smoothMod(float x, float y, float e){
float top = cos(PI * (x/y)) * sin(PI * (x/y));
float bot = pow(sin(PI * (x/y)),2.);
float at = atan(top/bot);
return y * (1./2.) - (1./PI) * at ;
}
vec2 modPolar(vec2 p, float repetitions) {
float angle = 2.*3.14/repetitions;
float a = atan(p.y, p.x) + angle/2.;
float r = length(p);
//float c = floor(a/angle);
a = smoothMod(a,angle,033323231231561.9) - angle/2.;
//a = mix(a,)
vec2 p2 = vec2(cos(a), sin(a))*r;
p2 += wiggly(p2.x + u_time * .05, p2.y + u_time * .05, 2., 4., 0.05);
return p2;
}
float stroke(float x, float s, float w){
float d = step(s, x+ w * .5) - step(s, x - w * .5);
return clamp(d, 0., 1.);
}
// Classic Perlin 2D Noise
// by Stefan Gustavson
//
vec4 permute(vec4 x)
{
return mod(((x*34.0)+1.0)*x, 289.0);
}
vec2 fade(vec2 t) {return t*t*t*(t*(t*6.0-15.0)+10.0);}
float cnoise(vec2 P){
vec4 Pi = floor(P.xyxy) + vec4(0.0, 0.0, 1.0, 1.0);
vec4 Pf = fract(P.xyxy) - vec4(0.0, 0.0, 1.0, 1.0);
Pi = mod(Pi, 289.0); // To avoid truncation effects in permutation
vec4 ix = Pi.xzxz;
vec4 iy = Pi.yyww;
vec4 fx = Pf.xzxz;
vec4 fy = Pf.yyww;
vec4 i = permute(permute(ix) + iy);
vec4 gx = 2.0 * fract(i * 0.0243902439) - 1.0; // 1/41 = 0.024...
vec4 gy = abs(gx) - 0.5;
vec4 tx = floor(gx + 0.5);
gx = gx - tx;
vec2 g00 = vec2(gx.x,gy.x);
vec2 g10 = vec2(gx.y,gy.y);
vec2 g01 = vec2(gx.z,gy.z);
vec2 g11 = vec2(gx.w,gy.w);
vec4 norm = 1.79284291400159 - 0.85373472095314 *
vec4(dot(g00, g00), dot(g01, g01), dot(g10, g10), dot(g11, g11));
g00 *= norm.x;
g01 *= norm.y;
g10 *= norm.z;
g11 *= norm.w;
float n00 = dot(g00, vec2(fx.x, fy.x));
float n10 = dot(g10, vec2(fx.y, fy.y));
float n01 = dot(g01, vec2(fx.z, fy.z));
float n11 = dot(g11, vec2(fx.w, fy.w));
vec2 fade_xy = fade(Pf.xy);
vec2 n_x = mix(vec2(n00, n01), vec2(n10, n11), fade_xy.x);
float n_xy = mix(n_x.x, n_x.y, fade_xy.y);
return 2.3 * n_xy;
}
vec2 rotate2D (vec2 _st, float _angle) {
_st -= 0.5;
_st = mat2(cos(_angle),-sin(_angle),
sin(_angle),cos(_angle)) * _st;
_st += 0.5;
return _st;
}
vec2 rotateTilePattern(vec2 _st){
// Scale the coordinate system by 2x2
_st *= 2.0;
// Give each cell an index number
// according to its position
float index = 0.0;
index += step(1., mod(_st.x,2.0));
index += step(1., mod(_st.y,2.0))*2.0;
// |
// 2 | 3
// |
//--------------
// |
// 0 | 1
// |
// Make each cell between 0.0 - 1.0
_st = fract(_st);
// Rotate each cell according to the index
if(index == 1.0){
// Rotate cell 1 by 90 degrees
_st = rotate2D(_st,PI*0.5);
} else if(index == 2.0){
// Rotate cell 2 by -90 degrees
_st = rotate2D(_st,PI*-0.5);
} else if(index == 3.0){
// Rotate cell 3 by 180 degrees
_st = rotate2D(_st,PI);
}
return _st;
}
void main() {
vec2 uv = (gl_FragCoord.xy - u_resolution * .5) / u_resolution.yy + 0.5;
float vTime = u_time;
vec2 uv2 = uv;
vec2 uv3 = uv;
uvRipple(uv2, .5);
uv = modPolar(uv-.5, 4.);
uv = rotateTilePattern(uv * cnoise(uv * 4.));
float n = fract(sin(uv.x) * uv.y);
vec3 color = vec3(uv.x, uv.y, 2.);
coswarp(color, 3.);
uvRipple(uv,color.r);
color = vec3(uv.x, uv.y, 1.);
coswarp(color, 3.);
color -= stroke(distance(uv2,vec2(.5)), .3, .8);
color += stroke(distance(uv2,vec2(n)), uv.x, .5);
gl_FragColor = vec4(vec3(color.r, color.g, color.b), 1.0);
}
</script>
<script type="module">
import * as THREE from "https://cdn.skypack.dev/three@0.136.0";
import {OrbitControls} from "https://cdn.skypack.dev/three@0.136.0/examples/jsm/controls/OrbitControls";
let camera, scene, renderer, clock;
let uniforms;
function init() {
const container = document.getElementById("shader");
clock = new THREE.Clock();
camera = new THREE.Camera();
camera.position.z = 1;
scene = new THREE.Scene();
const geometry = new THREE.PlaneBufferGeometry(2, 2);
uniforms = {
u_time: { type: "f", value: 1.0 },
u_resolution: { type: "v2", value: new THREE.Vector2() },
};
const material = new THREE.ShaderMaterial({
uniforms,
vertexShader: document.getElementById("vertex").textContent,
fragmentShader: document.getElementById("fragment").textContent
});
const mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);
renderer = new THREE.WebGLRenderer();
renderer.setPixelRatio(window.devicePixelRatio);
container.appendChild(renderer.domElement);
onWindowResize();
window.addEventListener("resize", onWindowResize);
}
function onWindowResize() {
renderer.setSize(window.innerWidth, window.innerHeight);
uniforms.u_resolution.value.x = renderer.domElement.width;
uniforms.u_resolution.value.y = renderer.domElement.height;
}
function render() {
uniforms.u_time.value = clock.getElapsedTime();
renderer.render(scene, camera);
}
function animate() {
render();
requestAnimationFrame(animate);
}
init();
animate();
</script>
</body>
</html>

660
static/html/visualizers/12.html Normal file
View File

@@ -0,0 +1,660 @@
<html>
<head>
<style>
</style>
</head>
<!-- CodePen Home
#016 | Tender
Toshiya Marukubo
https://codepen.io/toshiya-marukubo/pen/JjOYmxG -->
<body>
<script type="module">
import * as THREE from "https://cdn.skypack.dev/three@0.136.0";
import {OrbitControls} from "https://cdn.skypack.dev/three@0.136.0/examples/jsm/controls/OrbitControls";
// Reference
// https://towardsdatascience.com/fun-with-html-canvas-lets-make-lava-lamp-plasma-e4b0d89fe778
// https://www.youtube.com/watch?v=8K5wJeVgjrM&t=615s
// Thank you so much.
// sphere vertex shader source
const vertexSphereShader = `
uniform float uTime;
uniform float mouse;
varying vec2 vUv;
float PI = 3.14159265359;
// Reference
// https://gist.github.com/patriciogonzalezvivo/670c22f3966e662d2f83
// Thank you so much.
float mod289(float x){return x - floor(x * (1.0 / 289.0)) * 289.0;}
vec4 mod289(vec4 x){return x - floor(x * (1.0 / 289.0)) * 289.0;}
vec4 perm(vec4 x){return mod289(((x * 34.0) + 1.0) * x);}
float noise(vec3 p){
vec3 a = floor(p);
vec3 d = p - a;
d = d * d * (3.0 - 2.0 * d);
vec4 b = a.xxyy + vec4(0.0, 1.0, 0.0, 1.0);
vec4 k1 = perm(b.xyxy);
vec4 k2 = perm(k1.xyxy + b.zzww);
vec4 c = k2 + a.zzzz;
vec4 k3 = perm(c);
vec4 k4 = perm(c + 1.0);
vec4 o1 = fract(k3 * (1.0 / 41.0));
vec4 o2 = fract(k4 * (1.0 / 41.0));
vec4 o3 = o2 * d.z + o1 * (1.0 - d.z);
vec2 o4 = o3.yw * d.x + o3.xz * (1.0 - d.x);
return o4.y * d.y + o4.x * (1.0 - d.y);
}
void main(){
float noisy = mouse * pow(noise(normal * 2.0 + uTime * 10.0), 2.0);
vec3 newPosition = position + noisy * normal * 100.0;
vec4 mvPosition = modelViewMatrix * vec4(newPosition, 1.0);
vUv = uv;
gl_Position = projectionMatrix * mvPosition;
}
`;
// sphere fragment shader source
const fragmentSphereShader = `
uniform float uTime;
uniform sampler2D uTexture;
varying vec2 vUv;
void main () {
vec4 color = texture2D(uTexture, vUv);
gl_FragColor = vec4(color / 3.0);
}
`;
// sphere vertex shader source
const vertexFloorShader = `
uniform float uTime;
uniform float mouse;
varying vec2 vUv;
float PI = 3.14159265359;
// Reference
// https://gist.github.com/patriciogonzalezvivo/670c22f3966e662d2f83
// Thank you so much.
float mod289(float x){return x - floor(x * (1.0 / 289.0)) * 289.0;}
vec4 mod289(vec4 x){return x - floor(x * (1.0 / 289.0)) * 289.0;}
vec4 perm(vec4 x){return mod289(((x * 34.0) + 1.0) * x);}
float noise(vec3 p){
vec3 a = floor(p);
vec3 d = p - a;
d = d * d * (3.0 - 2.0 * d);
vec4 b = a.xxyy + vec4(0.0, 1.0, 0.0, 1.0);
vec4 k1 = perm(b.xyxy);
vec4 k2 = perm(k1.xyxy + b.zzww);
vec4 c = k2 + a.zzzz;
vec4 k3 = perm(c);
vec4 k4 = perm(c + 1.0);
vec4 o1 = fract(k3 * (1.0 / 41.0));
vec4 o2 = fract(k4 * (1.0 / 41.0));
vec4 o3 = o2 * d.z + o1 * (1.0 - d.z);
vec2 o4 = o3.yw * d.x + o3.xz * (1.0 - d.x);
return o4.y * d.y + o4.x * (1.0 - d.y);
}
void main(){
float noisy = mouse * pow(noise(normal + position.y * position.x + uTime * 10.0), 2.0);
vec3 newPosition = position + noisy * 2.0 * normal * 300.0;
vec4 mvPosition = modelViewMatrix * vec4(newPosition, 1.0);
vUv = uv;
gl_Position = projectionMatrix * mvPosition;
}
`;
// sphere fragment shader source
const fragmentFloorShader = `
uniform float uTime;
uniform sampler2D uTexture;
varying vec2 vUv;
void main () {
vec4 color = texture2D(uTexture, vUv);
gl_FragColor = vec4(color / 3.0);
}
`;
/**
* Mouse class
*/
class Mouse {
constructor(sketch) {
this.sketch = sketch;
this.initialize();
}
initialize() {
this.delta = 0;
this.mouse = new THREE.Vector3();
this.setupEvents();
this.lastX = 0;
this.lastY = 0;
this.speed = 0;
}
setupEvents() {
window.addEventListener('scroll', this.onScroll.bind(this), false);
window.addEventListener('mousemove', this.onMousemove.bind(this), false);
window.addEventListener('touchmove', this.onTouchmove.bind(this), false);
}
onScroll(e) {
const docScrollTop = window.pageYOffset;
const docHeight = document.body.scrollHeight - window.innerHeight;
const scrollPercent = docScrollTop / docHeight;
this.delta = scrollPercent;
}
onMousemove(e) {
this.mouse.x = e.clientX / window.innerWidth * 2 - 1;
this.mouse.y = -(e.clientY / window.innerHeight) * 2 + 1;
this.mouse.z = 0;
this.speed =
Math.sqrt((e.pageX - this.lastX) ** 2 +
(e.pageY - this.lastY) ** 2) * 0.1;
this.lastX = e.pageX;
this.lastY = e.pageY;
}
onTouchmove(e) {
const touch = e.targetTouches[0];
this.mouse.x = touch.pageX / window.innerWidth * 2 - 1;
this.mouse.y = -(touch.pageY / window.innerHeight) * 2 + 1;
this.mouse.z = 0;
this.speed =
Math.sqrt((touch.pageX - this.lastX) ** 2 +
(touch.pageY - this.lastY) ** 2) * 0.5;
this.lastX = touch.pageX;
this.lastY = touch.pageY;
}}
/**
* class Sketch
*/
class Sketch {
constructor() {
this.createCanvas();
this.setupEvents();
this.time = new THREE.Clock(true);
this.mouse = new Mouse(this);
this.initialize();
}
createCanvas() {
this.renderer =
new THREE.WebGLRenderer({
antialias: true,
alpha: true });
document.body.appendChild(this.renderer.domElement);
}
setupEvents() {
window.addEventListener('resize', this.onResize.bind(this), false);
}
onResize() {
if (this.preWidth === window.innerWidth && window.innerWidth < 480) {
return;
}
this.initialize();
}
initialize() {
if (this.animationId) {
cancelAnimationFrame(this.animationId);
}
this.preWidth = this.width = Math.ceil(window.innerWidth);
this.height = Math.ceil(window.innerHeight);
this.scene = new THREE.Scene();
this.setupCanvas();
this.setupCamera();
this.setupLight();
this.setupShape();
this.draw();
}
setupCanvas() {
this.renderer.setSize(this.width, this.height);
this.renderer.setPixelRatio(window.devicePixelRatio);
this.renderer.setClearColor('#D7D6DA', 1.0);
this.renderer.domElement.style.position = 'fixed';
this.renderer.domElement.style.top = '0';
this.renderer.domElement.style.left = '0';
this.renderer.domElement.style.width = '100%';
this.renderer.domElement.style.height = '100%';
this.renderer.domElement.style.zIndex = '-1';
this.renderer.domElement.style.outline = 'none';
}
setupCamera() {
const fov = 50;
const fovRadian = fov / 2 * (Math.PI / 180);
this.dist = this.height / 2 / Math.tan(fovRadian);
this.camera =
new THREE.PerspectiveCamera(
fov,
this.width / this.height,
0.01,
this.dist * 10);
this.cameraV = new THREE.Vector3();
this.cameraP = new THREE.Vector3(0, 0, this.dist);
this.camera.position.set(this.cameraP.x, this.cameraP.y, this.cameraP.z);
this.camera.lookAt(new THREE.Vector3());
this.scene.add(this.camera);
}
updateCamera(time) {
this.cameraV.subVectors(this.mouse.mouse, this.cameraP).multiplyScalar(0.05);
this.cameraP.add(this.cameraV);
this.camera.position.set(
this.cameraP.x * this.dist,
Math.max(this.cameraP.y * this.dist, -200),
this.dist);
this.camera.lookAt(new THREE.Vector3());
}
setupLight() {
// directinal light
this.directionalLight = new THREE.DirectionalLight(0xffffff);
this.scene.add(this.directionalLight);
// point light
this.spotLight = new THREE.SpotLight(0xffffff);
this.spotLightV = new THREE.Vector3();
this.spotLightP = new THREE.Vector3(0, 0, this.dist * 0.1);
this.spotLight.position.set(this.spotLightP.x, this.spotLightP.y, this.spotLightP.z);
this.spotLight.lookAt(new THREE.Vector3());
this.scene.add(this.spotLight);
}
updateLight() {
this.spotLightV.subVectors(this.mouse.mouse, this.spotLightP).multiplyScalar(0.05);
this.spotLightP.add(this.spotLightV);
this.spotLight.position.set(
this.spotLightP.x * this.dist,
this.spotLightP.y * this.dist,
this.dist);
this.spotLight.lookAt(new THREE.Vector3());
}
setupShape() {
this.shape = new Shape(this, 0, 0, 0);
}
draw() {
const time = this.time.getElapsedTime();
this.shape.render(time * 0.1);
this.updateCamera(time);
this.updateLight(time);
this.renderer.render(this.scene, this.camera);
this.animationId = requestAnimationFrame(this.draw.bind(this));
}}
/**
* shape class
*/
class Shape {
constructor(sketch, x, y, z) {
this.sketch = sketch;
this.beta = 0;
this.position = new THREE.Vector3(x, y, z);
this.setupSizes();
this.initialize();
}
setupSizes() {
this.sphereSize = null;
this.floorSize = Math.max(this.sketch.width * 5, this.sketch.height * 5);
if (this.sketch.width < 768) {
this.sphereSize = 120;
}
if (this.sketch.width >= 768) {
this.sphereSize = 192;
}
}
initialize() {
this.createTexture();
//floor
this.floorGeometry = new THREE.PlaneGeometry(this.floorSize, this.floorSize, 128, 128);
this.floorMaterial = new THREE.ShaderMaterial({
side: THREE.DoubleSide,
uniforms: {
uTime: { type: 'f', value: 0 },
mouse: { type: 'f', value: 0 },
uTexture: { type: 't', value: this.returnTexture() } },
vertexShader: vertexFloorShader,
fragmentShader: fragmentFloorShader });
this.floorMesh = new THREE.Mesh(this.floorGeometry, this.floorMaterial);
this.floorMesh.position.set(0, -this.sketch.height / 3, 0);
this.floorMesh.rotation.x = Math.PI / 2;
this.sketch.scene.add(this.floorMesh);
// sphere
this.sphereGeometry = new THREE.SphereGeometry(this.sphereSize, 64, 64);
this.sphereMaterial = new THREE.ShaderMaterial({
side: THREE.DoubleSide,
uniforms: {
uTime: { type: 'f', value: 0 },
mouse: { type: 'f', value: 0 },
uTexture: { type: 't', value: this.returnTexture() } },
vertexShader: vertexSphereShader,
fragmentShader: fragmentSphereShader });
this.sphereMeshV = new THREE.Vector3();
this.sphereMeshP = new THREE.Vector3(0, -2000, 0);
this.sphereMesh = new THREE.Mesh(this.sphereGeometry, this.sphereMaterial);
this.sphereMesh.position.set(this.sphereMeshP.x, this.sphereMeshP.y, this.sphereMeshP.z);
this.sphereMesh.rotation.y = -Math.PI / 2;
this.sketch.scene.add(this.sphereMesh);
}
createTexture() {
this.canvas = document.createElement('canvas');
this.ctx = this.canvas.getContext('2d');
this.length = 256;
this.canvas.width = this.length;
this.canvas.height = this.length;
this.plasma = new Plasma(this.ctx, this.length, this.length);
this.texture = new THREE.CanvasTexture(this.canvas);
}
returnTexture() {
return this.texture;
}
updateTexture(time) {
this.plasma.render(time * 10);
}
render(time) {
this.sphereMeshV.subVectors(new THREE.Vector3(), this.sphereMeshP).multiplyScalar(0.05);
this.sphereMeshP.add(this.sphereMeshV);
this.sphereMesh.position.set(this.sphereMeshP.x, this.sphereMeshP.y, this.sphereMeshP.z);
this.beta -= (this.beta - this.sketch.mouse.speed) * 0.05;
this.sketch.mouse.speed *= 0.99;
this.texture.needsUpdate = true; // important
this.updateTexture(time);
this.sphereMesh.material.uniforms.uTime.value = time;
this.sphereMesh.material.uniforms.mouse.value = this.beta;
this.floorMesh.material.uniforms.uTime.value = time;
this.floorMesh.material.uniforms.mouse.value = this.beta;
}}
// Reference
// https://towardsdatascience.com/fun-with-html-canvas-lets-make-lava-lamp-plasma-e4b0d89fe778
// Thank you so much.
class Plasma {
constructor(ctx, s) {
this.ctx = ctx;
this.size = s;
this.mapSize = this.size * 2;
this.initialize();
}
initialize() {
this.prevDirection = 1;
this.dx1 = 0;
this.dy1 = 0;
this.dx2 = 0;
this.dy2 = 0;
this.heightMap1 = [];
this.heightMap2 = [];
this.palette = [];
this.palettes = [this.makeRandomPalette(), this.makeRandomPalette()];
this.image = this.ctx.createImageData(this.size, this.size);
this.getImageData();
this.getHeightMap();
}
getImageData() {
for (let i = 0; i < this.image.data.length; i += 4) {
this.image.data[i + 0] = 0;
this.image.data[i + 1] = 0;
this.image.data[i + 2] = 0;
this.image.data[i + 3] = 255;
}
}
distance(x, y) {
return Math.sqrt(x * x + y * y);
}
randomColor() {
const r = Math.floor(Math.random() * 255);
const g = Math.floor(Math.random() * 255);
const b = Math.floor(Math.random() * 255);
return { r, g, b };
}
updatePalette(time) {
const inter = (Math.cos(time) + 1) / 2;
const direction = Math.sin(time) >= 0 ? -1 : 1;
if (this.prevDirection != direction) {
this.prevDirection = direction;
if (direction == -1) {
this.palettes[0] = this.makeRandomPalette();
} else {
this.palettes[1] = this.makeRandomPalette();
}
}
for (let i = 0; i < 256; i++) {
this.palette[i] = this.interpolate(this.palettes[0][i], this.palettes[1][i], inter);
}
}
makeRandomPalette() {
const c1 = this.randomColor();
const c2 = this.randomColor();
const c3 = this.randomColor();
const c4 = this.randomColor();
const c5 = this.randomColor();
return this.makeFiveColorGradient(c1, c2, c3, c4, c5);
}
interpolate(c1, c2, f) {
return {
r: Math.floor(c1.r + (c2.r - c1.r) * f),
g: Math.floor(c1.g + (c2.g - c1.g) * f),
b: Math.floor(c1.b + (c2.b - c1.b) * f) };
}
makeFiveColorGradient(c1, c2, c3, c4, c5) {
const g = [];
for (let i = 0; i < 64; i++) {
const f = i / 64;
g[i] = this.interpolate(c1, c2, f);
}
for (let i = 64; i < 128; i++) {
const f = (i - 64) / 64;
g[i] = this.interpolate(c2, c3, f);
}
for (let i = 128; i < 192; i++) {
const f = (i - 128) / 64;
g[i] = this.interpolate(c3, c4, f);
}
for (let i = 192; i < 256; i++) {
const f = (i - 192) / 64;
g[i] = this.interpolate(c4, c5, f);
}
return g;
}
getHeightMap() {
for (let x = 0; x < this.mapSize; x++) {
for (let y = 0; y < this.mapSize; y++) {
const i = x * this.mapSize + y;
const cx = x - this.mapSize / 2;
const cy = y - this.mapSize / 2;
const d = this.distance(cx, cy);
const s = Math.PI * 2 / (this.mapSize / 2);
const r = Math.sin(d * s);
const n = (r + 1) / 2;
this.heightMap1[i] = Math.floor(n * 128);
}
}
for (let x = 0; x < this.mapSize; x++) {
for (let y = 0; y < this.mapSize; y++) {
const i = x * this.mapSize + y;
const cx = x - this.mapSize / 2;
const cy = y - this.mapSize / 2;
const d1 = this.distance(cx, cy) * 0.1;
const d2 = this.distance(cx, cy) * 0.02;
const s = Math.sin(d1);
const c = Math.cos(d2);
const h = s + c;
const n = (h + 2) / 4;
this.heightMap2[i] = Math.floor(n * 127);
}
}
}
moveHeightMap(time) {
this.dx1 = Math.floor(
(Math.cos(time * 0.5) + 1) / 2 * this.mapSize / 2);
this.dy1 = Math.floor(
(Math.sin(time * 0.2) + 1) / 2 * this.mapSize / 2);
this.dx2 = Math.floor(
(Math.cos(time * 0.3) + 1) / 2 * this.mapSize / 2);
this.dy2 = Math.floor(
(Math.sin(time * 0.4) + 1) / 2 * this.mapSize / 2);
}
updateImageData() {
for (let x = 0; x < this.size; x++) {
for (let y = 0; y < this.size; y++) {
const i = (x + this.dy1) * this.mapSize + (y + this.dx1);
const k = (x + this.dy2) * this.mapSize + (y + this.dx2);
const j = x * this.size * 4 + y * 4;
const h = this.heightMap1[i] + this.heightMap2[k];
const c = this.palette[h];
this.image.data[j] = c.r;
this.image.data[j + 1] = c.g;
this.image.data[j + 2] = c.b;
}
}
}
drawImageData() {
this.ctx.putImageData(this.image, 0, 0);
}
render(time) {
this.ctx.clearRect(0, 0, this.size, this.size);
this.moveHeightMap(time);
this.updatePalette(time * 2);
this.updateImageData();
this.drawImageData();
}}
(() => {
window.addEventListener('load', () => {
new Sketch();
});
})();
</script>
</body>
</html>

134
static/html/visualizers/2.html Normal file
View File

@@ -0,0 +1,134 @@
<html>
<head>
<style>
html, body{
overflow: hidden;
margin: 0;
background-color: black;
}
</style>
</head>
<!-- CodePen Home
Points (color, animation, rotation.order)
Paul
Follow
https://codepen.io/prisoner849/pen/RwyzrVj -->
<body>
<script type="module">
import * as THREE from "https://cdn.skypack.dev/three@0.136.0";
import {OrbitControls} from "https://cdn.skypack.dev/three@0.136.0/examples/jsm/controls/OrbitControls";
let scene = new THREE.Scene();
scene.background = new THREE.Color(0x160016);
let camera = new THREE.PerspectiveCamera(60, innerWidth / innerHeight, 1, 1000);
camera.position.set(0, 4, 21);
let renderer = new THREE.WebGLRenderer();
renderer.setSize(innerWidth, innerHeight);
document.body.appendChild(renderer.domElement);
window.addEventListener("resize", event => {
camera.aspect = innerWidth / innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(innerWidth, innerHeight);
})
let controls = new OrbitControls(camera, renderer.domElement);
controls.enableDamping = true;
controls.enablePan = false;
let gu = {
time: {value: 0}
}
let sizes = [];
let shift = [];
let pushShift = () => {
shift.push(
Math.random() * Math.PI,
Math.random() * Math.PI * 2,
(Math.random() * 0.9 + 0.1) * Math.PI * 0.1,
Math.random() * 0.9 + 0.1
);
}
let pts = new Array(25000).fill().map(p => {
sizes.push(Math.random() * 1.5 + 0.5);
pushShift();
return new THREE.Vector3().randomDirection().multiplyScalar(Math.random() * 0.5 + 9.5);
})
for(let i = 0; i < 50000; i++){
let r = 10, R = 40;
let rand = Math.pow(Math.random(), 1.5);
let radius = Math.sqrt(R * R * rand + (1 - rand) * r * r);
pts.push(new THREE.Vector3().setFromCylindricalCoords(radius, Math.random() * 2 * Math.PI, (Math.random() - 0.5) * 2 ));
sizes.push(Math.random() * 1.5 + 0.5);
pushShift();
}
let g = new THREE.BufferGeometry().setFromPoints(pts);
g.setAttribute("sizes", new THREE.Float32BufferAttribute(sizes, 1));
g.setAttribute("shift", new THREE.Float32BufferAttribute(shift, 4));
let m = new THREE.PointsMaterial({
size: 0.1,
transparent: true,
blending: THREE.AdditiveBlending,
onBeforeCompile: shader => {
shader.uniforms.time = gu.time;
shader.vertexShader = `
uniform float time;
attribute float sizes;
attribute vec4 shift;
varying vec3 vColor;
${shader.vertexShader}
`.replace(
`gl_PointSize = size;`,
`gl_PointSize = size * sizes;`
).replace(
`#include <color_vertex>`,
`#include <color_vertex>
float d = length(abs(position) / vec3(40., 10., 40));
d = clamp(d, 0., 1.);
vColor = mix(vec3(227., 155., 0.), vec3(100., 50., 255.), d) / 255.;
`
).replace(
`#include <begin_vertex>`,
`#include <begin_vertex>
float t = time;
float moveT = mod(shift.x + shift.z * t, PI2);
float moveS = mod(shift.y + shift.z * t, PI2);
transformed += vec3(cos(moveS) * sin(moveT), cos(moveT), sin(moveS) * sin(moveT)) * shift.a;
`
);
shader.fragmentShader = `
varying vec3 vColor;
${shader.fragmentShader}
`.replace(
`#include <clipping_planes_fragment>`,
`#include <clipping_planes_fragment>
float d = length(gl_PointCoord.xy - 0.5);
if (d > 0.5) discard;
`
).replace(
`vec4 diffuseColor = vec4( diffuse, opacity );`,
`vec4 diffuseColor = vec4( vColor, smoothstep(0.5, 0.2, d) * 0.5 + 0.5 );`
);
console.log(shader.fragmentShader);
}
});
let p = new THREE.Points(g, m);
p.rotation.order = "ZYX";
p.rotation.z = 0.2;
scene.add(p)
let clock = new THREE.Clock();
renderer.setAnimationLoop(() => {
controls.update();
let t = clock.getElapsedTime() * 0.5;
gu.time.value = t * Math.PI;
p.rotation.y = t * 0.05;
renderer.render(scene, camera);
});
</script>
</body>
</html>

166
static/html/visualizers/3.html Normal file
View File

@@ -0,0 +1,166 @@
<html>
<head>
<style>
*{ margin: 0px;}
html,body{
background-color: black;
}
</style>
</head>
<!-- CodePen Home
#mathober2022 - Harmonic
Tom Hinton
https://codepen.io/TomHinton/pen/MWGqqMN -->
<body>
<!--
Created for Mathtober, a series of maths based creative promtps that can be found https://fractalkitty.com/2022/09/17/mathober-2022-prompts/
Wikipedia says "the term "harmonic" is applied when one is considering functions with sinusoidal variations" so I think that sinwarp must count? ( It almostd definitely doesn't but this is pretty and I don't have time today)
-->
<div id="shader"></div>
<script id="vertex" type="x-shader/x-vertex">
varying vec2 vUv;
void main() { gl_Position = vec4(position, 1.0);
vUv = uv;
}
</script>
<script id="fragment" type="x-shader/x-fragment">
precision highp float;
uniform vec2 u_resolution;
uniform float u_time;
varying vec2 vUv;
const float PI = 3.1415926535897932384626433832795;
const float TAU = PI * 2.;
void sinwarp(inout vec3 trip, float warpsScale ){
float t = u_time;
trip.xyz += warpsScale * .1 * sin(3. * trip.yzx + (t * .25));
trip.xyz += warpsScale * .05 * sin(11. * trip.yzx + (t * .25));
trip.xyz += warpsScale * .025 * sin(17. * trip.yzx + (t * .25));
}
void main() {
vec2 uv = (gl_FragCoord.xy - u_resolution * .5) / u_resolution.yy + 0.5;
vec3 color = vec3(uv.x, uv.y, 1.);
sinwarp(color, 3.);
float vTime = u_time + color.r;
float vTime2 = u_time + color.g;
float vTime3 = u_time + color.b;
color.r = smoothstep(distance(uv, vec2(.5)), (sin(vTime) * .2), (sin(vTime) * .2) +.1);
color.g = smoothstep(distance(uv, vec2(.5)), (sin(vTime) * .2) +.1, (sin(vTime2) * .2) + .2);
color.b = smoothstep(distance(uv, vec2(.5)), (sin(vTime) * .2) +.2, (sin(vTime3) * .2) + .3);
color.r += smoothstep(distance(uv, vec2(.5)), (sin(vTime) * .2), (sin(vTime) * .2) +.15);
color.g += smoothstep(distance(uv, vec2(.5)), (sin(vTime) * .2) +.1, (sin(vTime2) * .2) + .25);
color.b += smoothstep(distance(uv, vec2(.5)), (sin(vTime) * .2) +.2, (sin(vTime3) * .2) + .35);
color.r += smoothstep(distance(uv, vec2(.5)), (cos(vTime) * .2) +.5, (sin(vTime) * .2) +.15);
color.g += smoothstep(distance(uv, vec2(.5)), (cos(vTime) * .2) +.15, (sin(vTime) * .2) + .25);
color.b += smoothstep(distance(uv, vec2(.5)), (cos(vTime) * .2) +.25, (sin(vTime) * .2) + .35);
color =mix(color, 1.-color, smoothstep(distance(uv, vec2(.5)), (cos(vTime) * .25) +.25, (sin(vTime) * .2) + .35));
sinwarp(color, 3.);
gl_FragColor = vec4(vec3(color.r, color.g, color.b), 1.0);
}
</script>
<script type="module">
import * as THREE from "https://cdn.skypack.dev/three@0.136.0";
let camera, scene, renderer, clock;
let uniforms;
function init() {
const container = document.getElementById("shader");
clock = new THREE.Clock();
camera = new THREE.Camera();
camera.position.z = 1;
scene = new THREE.Scene();
const geometry = new THREE.PlaneBufferGeometry(2, 2);
uniforms = {
u_time: { type: "f", value: 1.0 },
u_resolution: { type: "v2", value: new THREE.Vector2() },
};
const material = new THREE.ShaderMaterial({
uniforms,
vertexShader: document.getElementById("vertex").textContent,
fragmentShader: document.getElementById("fragment").textContent
});
const mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);
renderer = new THREE.WebGLRenderer();
renderer.setPixelRatio(window.devicePixelRatio);
container.appendChild(renderer.domElement);
onWindowResize();
window.addEventListener("resize", onWindowResize);
}
function onWindowResize() {
renderer.setSize(window.innerWidth, window.innerHeight);
uniforms.u_resolution.value.x = renderer.domElement.width;
uniforms.u_resolution.value.y = renderer.domElement.height;
}
function render() {
uniforms.u_time.value = clock.getElapsedTime();
renderer.render(scene, camera);
}
function animate() {
render();
requestAnimationFrame(animate);
}
init();
animate();
</script>
</body>
</html>

160
static/html/visualizers/4.html Normal file
View File

@@ -0,0 +1,160 @@
<html>
<head>
<style>
*{ margin: 0px;}
html,body{
background-color: black;
}
</style>
</head>
<!-- CodePen Home
#mathober2022 - Hyperbolic
Tom Hinton https://codepen.io/TomHinton/pen/GRdBVZm -->
<body>
<!--
Created for Mathtober, a series of maths based creative promtps that can be found https://fractalkitty.com/2022/09/17/mathober-2022-prompts/
I think modPolar is something I got from Char Stiles?
http://charstiles.com/
-->
<div id="shader"></div>
<script id="vertex" type="x-shader/x-vertex">
varying vec2 vUv;
void main() { gl_Position = vec4(position, 1.0);
vUv = uv;
}
</script>
<script id="fragment" type="x-shader/x-fragment">
precision highp float;
uniform vec2 u_resolution;
uniform float u_time;
varying vec2 vUv;
const float PI = 3.1415926535897932384626433832795;
const float TAU = PI * 2.;
float smoothMod(float x, float y, float e){
float top = cos(PI * (x/y)) * sin(PI * (x/y));
float bot = pow(sin(PI * (x/y)),2.);
float at = atan(top/bot);
return y * (1./2.) - (1./PI) * at ;
}
vec2 modPolar(vec2 p, float repetitions) {
float angle = 2.*3.14/repetitions;
float a = atan(p.y, p.x) + angle/2.;
float r = length(p);
//float c = floor(a/angle);
a = smoothMod(a,angle,033323231231561.9) - angle/2.;
//a = mix(a,)
vec2 p2 = vec2(cos(a), sin(a))*r;
return p2;
}
void coswarp(inout vec3 trip, float warpsScale ){
float t = u_time;
trip.xyz += warpsScale * .1 * cos(3. * trip.yzx + (t * .25));
trip.xyz += warpsScale * .05 * cos(11. * trip.yzx + (t * .25));
trip.xyz += warpsScale * .025 * cos(17. * trip.yzx + (t * .25));
}
void main() {
vec2 uv = (gl_FragCoord.xy - u_resolution * .5) / u_resolution.yy + 0.5;
float t = (u_time * .5) + length(uv-.5);
uv = modPolar(uv-.5, 17. * sinh(sin(t)));
vec3 color = vec3(uv.x, uv.y, 1.);
coswarp(color, 3.);
coswarp(color, 3.);
color.r *= step(fract(sinh(uv.y ) + sinh(uv.x *( 4. + sin(t) ) ) * .01) *10., .8 );
color.g *= step(fract(sinh(uv.y ) + sinh(uv.x *( 5. + sin(t) ) ) * .01) *5., .8 );
color.b *= step(fract(sinh(uv.y ) + sinh(uv.x *( 6. + sin(t) ) ) * .01) *2., .8 );
gl_FragColor = vec4(vec3(color.r, color.g, color.b), 1.);
}
</script>
<script type="module">
import * as THREE from "https://cdn.skypack.dev/three@0.136.0";
let camera, scene, renderer, clock;
let uniforms;
function init() {
const container = document.getElementById("shader");
clock = new THREE.Clock();
camera = new THREE.Camera();
camera.position.z = 1;
scene = new THREE.Scene();
const geometry = new THREE.PlaneBufferGeometry(2, 2);
uniforms = {
u_time: { type: "f", value: 1.0 },
u_resolution: { type: "v2", value: new THREE.Vector2() },
};
const material = new THREE.ShaderMaterial({
uniforms,
vertexShader: document.getElementById("vertex").textContent,
fragmentShader: document.getElementById("fragment").textContent
});
const mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);
renderer = new THREE.WebGLRenderer();
renderer.setPixelRatio(window.devicePixelRatio);
container.appendChild(renderer.domElement);
onWindowResize();
window.addEventListener("resize", onWindowResize);
}
function onWindowResize() {
renderer.setSize(window.innerWidth, window.innerHeight);
uniforms.u_resolution.value.x = renderer.domElement.width;
uniforms.u_resolution.value.y = renderer.domElement.height;
}
function render() {
uniforms.u_time.value = clock.getElapsedTime();
renderer.render(scene, camera);
}
function animate() {
render();
requestAnimationFrame(animate);
}
init();
animate();
</script>
</body>
</html>

238
static/html/visualizers/5.html Normal file
View File

@@ -0,0 +1,238 @@
<html>
<head>
<style>
html, body {
margin: 0;
background-color: black;
}
.webgl {
position: fixed;
top: 0;
left: 0;
outline: none;
}
</style>
</head>
<!-- CodePen Home
Studying threejs particle
alvalau
https://codepen.io/alvalau/pen/ExLEEeK -->
<body>
<canvas class="webgl"></canvas>
<script type="module">
import * as THREE from "https://cdn.skypack.dev/three@0.136.0";
import {OrbitControls} from "https://cdn.skypack.dev/three@0.136.0/examples/jsm/controls/OrbitControls";
const canvas = document.querySelector('canvas.webgl');
const scene = new THREE.Scene();
let sizes = {
width: window.innerWidth,
height: window.innerHeight,
pixelRatio: Math.min(window.devicePixelRatio, 2),
};
const camera = new THREE.PerspectiveCamera(
75,
sizes.width / sizes.height,
0.01,
100
);
camera.position.set(3.95, 4.86, -0.46);
camera.lookAt(new THREE.Vector3());
const controls = new OrbitControls(camera, canvas);
controls.enableDamping = true;
window.addEventListener('resize', () => {
sizes = {
width: window.innerWidth,
height: window.innerHeight,
pixelRatio: Math.min(window.devicePixelRatio, 2),
};
camera.aspect = sizes.width / sizes.height;
camera.updateProjectionMatrix();
renderer.setSize(sizes.width, sizes.height);
renderer.setPixelRatio(sizes.pixelRatio);
});
const renderer = new THREE.WebGLRenderer({canvas});
renderer.setSize(sizes.width, sizes.height);
renderer.setPixelRatio(sizes.pixelRatio);
const parameters = {
count: 200000,
branches: 2,
radius: 5,
innerColor: '#86ffbd',
outterColor: '#1b3984',
randomness: 0.777,
randomnessPow: 2,
};
class Particle {
constructor(parameters = {}) {
this.instant = null;
this.geometry = null;
this.material = null;
this.count = parameters.count;
this.branches = parameters.branches;
this.radius = parameters.radius;
this.innerColor = parameters.innerColor;
this.outterColor = parameters.outterColor;
this.randomness = parameters.randomness;
this.randomnessPow = parameters.randomnessPow;
this.scene = scene;
this.generate();
}
generate = () => {
if (this.instant !== null) {
this.geometry.dispose();
this.material.dispose();
this.scene.remove(this.instant);
}
this.geometry = new THREE.BufferGeometry();
const positions = new Float32Array(this.count * 3);
const colors = new Float32Array(this.count * 3);
const randomness = new Float32Array(this.count * 3);
const scales = new Float32Array(this.count);
const innerColor = new THREE.Color(this.innerColor);
const outterColor = new THREE.Color(this.outterColor);
for (let i = 0; i < this.count; i++) {
const i3 = i * 3;
const t = ((i % this.branches) / this.branches) * Math.PI * 2;
const radius = Math.random() * this.radius;
positions[i3] = Math.cos(t + Math.PI * 0.5) * radius;
positions[i3 + 1] = Math.sin(t + Math.PI * 0.5) * radius;
positions[i3 + 2] = 0;
randomness[i3] =
Math.pow(Math.random(), this.randomnessPow) *
(Math.random() < 0.5 ? -1 : 1) *
this.randomness *
radius;
randomness[i3 + 1] =
Math.pow(Math.random(), this.randomnessPow) *
(Math.random() < 0.5 ? -1 : 1) *
this.randomness *
radius;
randomness[i3 + 2] =
Math.pow(Math.random(), this.randomnessPow) *
(Math.random() < 0.5 ? -1 : 1) *
this.randomness *
radius;
const color = innerColor.clone().lerp(outterColor, radius / this.radius);
colors[i3] = color.r;
colors[i3 + 1] = color.g;
colors[i3 + 2] = color.b;
scales[i] = Math.random();
}
this.geometry.setAttribute(
'position',
new THREE.BufferAttribute(positions, 3)
);
this.geometry.setAttribute('color', new THREE.BufferAttribute(colors, 3));
this.geometry.setAttribute(
'aRandom',
new THREE.BufferAttribute(randomness, 3)
);
this.geometry.setAttribute('aScale', new THREE.BufferAttribute(scales, 1));
this.material = new THREE.ShaderMaterial({
depthWrite: false,
vertexColors: true,
blending: THREE.AdditiveBlending,
uniforms: {
uTime: {value: 0},
uCamPos: {value: camera.position},
},
vertexShader: `
uniform float uTime;
uniform vec3 uCamPos;
attribute vec3 aRandom;
attribute float aScale;
varying vec3 vColor;
void main() {
vec4 modelPosition = modelMatrix * vec4(position, 1.0);
float angle = atan(modelPosition.y, modelPosition.x);
float vecLength = length(modelPosition.xy);
float angleOffset = (1.0 / vecLength) * uTime;
angle += angleOffset;
modelPosition.x = cos(angle) * (vecLength);
modelPosition.z = sin(angle) * (vecLength);
modelPosition.y += tan(angle) * dot(normalize(uCamPos), vec3(0.0, 0.0, 1.0));
modelPosition.xyz += aRandom;
vec4 mvPosition = viewMatrix * modelPosition;
gl_Position = projectionMatrix * mvPosition;
gl_PointSize = 8.0 * aScale;
gl_PointSize *= (1.0 / - mvPosition.z);
vColor = color;
}
`,
fragmentShader: `
uniform float uTime;
varying vec3 vColor;
vec3 convertHsvToRgb(vec3 c) {
vec4 K = vec4(1.0, 2.0 / 3.0, 1.0 / 3.0, 3.0);
vec3 p = abs(fract(c.xxx + K.xyz) * 6.0 - K.www);
return c.z * mix(K.xxx, clamp(p - K.xxx, 0.0, 1.0), c.y);
}
void main() {
float strength = 1.0 - distance(gl_PointCoord, vec2(0.5));
strength = step(0.5, strength);
vec3 timedColor = vColor;
timedColor.rgb = mod(timedColor.rgb + uTime * 0.05, 1.0);
timedColor = convertHsvToRgb(vec3(vColor.x + uTime * 0.04, 0.6, 0.8));
vec3 color = mix(vec3(0.0), timedColor, strength);
gl_FragColor = vec4(color, 1.0);
}
`,
});
this.instant = new THREE.Points(this.geometry, this.material);
this.scene.add(this.instant);
};
}
const particle = new Particle(parameters);
const clock = new THREE.Clock();
const tick = () => {
const elapsedTime = clock.getElapsedTime();
particle.material.uniforms.uTime.value = elapsedTime;
particle.material.uniforms.uCamPos.value = camera.position;
controls.update();
renderer.render(scene, camera);
requestAnimationFrame(tick);
};
tick();
</script>
</body>
</html>

131
static/html/visualizers/6.html Normal file
View File

@@ -0,0 +1,131 @@
<html>
<head>
<style>
html,body{
background-color: black;
}
*{ margin: 0px;}
</style>
</head>
<!-- CodePen Home
Smoke filled room , Blank clean screen
Tom Hinton
https://codepen.io/TomHinton/pen/xxjpJMp -->
<body>
<div id="shader"></div>
<script id="vertex" type="x-shader/x-vertex">
varying vec2 vUv;
void main() { gl_Position = vec4(position, 1.0);
vUv = uv;
}
</script>
<script id="fragment" type="x-shader/x-fragment">
precision highp float;
uniform vec2 u_resolution;
uniform float u_time;
varying vec2 vUv;
const float PI = 3.1415926535897932384626433832795;
const float TAU = PI * 2.;
void main() {
vec2 uv = (gl_FragCoord.xy - u_resolution * .5) / u_resolution.yy + 0.5;
float vTime = (u_time * .25) + abs(smoothstep(sin(length(uv-.5) * 20.), .3, sin(uv.x +uv.y * 10.)));
float vTime2 = (u_time * .25) + abs(step(sin(length(uv-.5) * 10.), sin(uv.x * 10.)));
float a = step(sin(uv.x * 20.* sin(vTime) ), sin(uv.y * 20.)) ;
float b = step(sin(uv.y * 100.+ cos(vTime2) ), .5) ;
vec3 color = vec3(uv.x, uv.y, 1.);
float c= abs(smoothstep(sin(length(uv-.5) * 2. + (sin(vTime * .1) * 20.)), .3, .001));
color = mix(vec3(1.), color, a );
color = mix(vec3(0.), color, c );
gl_FragColor = vec4(vec3(color.r, color.g, color.b), 1.);
}
</script>
<script type="module">
import * as THREE from "https://cdn.skypack.dev/three@0.136.0";
import {OrbitControls} from "https://cdn.skypack.dev/three@0.136.0/examples/jsm/controls/OrbitControls";
let camera, scene, renderer, clock;
let uniforms;
function init() {
const container = document.getElementById("shader");
clock = new THREE.Clock();
camera = new THREE.Camera();
camera.position.z = 1;
scene = new THREE.Scene();
const geometry = new THREE.PlaneBufferGeometry(2, 2);
uniforms = {
u_time: { type: "f", value: 1.0 },
u_resolution: { type: "v2", value: new THREE.Vector2() },
};
const material = new THREE.ShaderMaterial({
uniforms,
vertexShader: document.getElementById("vertex").textContent,
fragmentShader: document.getElementById("fragment").textContent
});
const mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);
renderer = new THREE.WebGLRenderer();
renderer.setPixelRatio(window.devicePixelRatio);
container.appendChild(renderer.domElement);
onWindowResize();
window.addEventListener("resize", onWindowResize);
}
function onWindowResize() {
renderer.setSize(window.innerWidth, window.innerHeight);
uniforms.u_resolution.value.x = renderer.domElement.width;
uniforms.u_resolution.value.y = renderer.domElement.height;
}
function render() {
uniforms.u_time.value = clock.getElapsedTime();
renderer.render(scene, camera);
}
function animate() {
render();
requestAnimationFrame(animate);
}
init();
animate();
</script>
</body>
</html>

132
static/html/visualizers/7.html Normal file
View File

@@ -0,0 +1,132 @@
<html>
<head>
<style>
*{ margin: 0px;}
html, body {
background-color: black;
}
</style>
</head>
<!-- CodePen Home
And we kissed as the sky fell in
Tom Hinton
https://codepen.io/TomHinton/pen/VwxMvGJ
-->
<body>
<div id="shader"></div>
<script id="vertex" type="x-shader/x-vertex">
varying vec2 vUv;
void main() { gl_Position = vec4(position, 1.0);
vUv = uv;
}
</script>
<script id="fragment" type="x-shader/x-fragment">
precision highp float;
uniform vec2 u_resolution;
uniform float u_time;
varying vec2 vUv;
const float PI = 3.1415926535897932384626433832795;
const float TAU = PI * 2.;
void main() {
vec2 uv = (gl_FragCoord.xy - u_resolution * .5) / u_resolution.yy + 0.5;
float vTime = (u_time * .5) + fract(smoothstep(sin(length(uv-.5) * 20.), .3, .01));
float vTime2 = (u_time * .5) + fract(smoothstep(sin(length(uv-.5) * 10.), .3, .01));
float a = fract(sin(uv.x * 20.+ sin(vTime) )) ;
float b = fract(sin(uv.y * 10.+ cos(vTime2) )) ;
vec3 color = vec3(uv.x, uv.y, 1.);
float c= fract(smoothstep(sin(length(uv-.5) * 2. + (sin(vTime * .1) * 20.)), .3, .001));
color = mix(vec3(1.), color, a);
color = mix(vec3(1., uv.y, c), color, b);
gl_FragColor = vec4(vec3(color.r, color.g, color.b), 1.);
}
</script>
<script type="module">
import * as THREE from "https://cdn.skypack.dev/three@0.136.0";
import {OrbitControls} from "https://cdn.skypack.dev/three@0.136.0/examples/jsm/controls/OrbitControls";
let camera, scene, renderer, clock;
let uniforms;
function init() {
const container = document.getElementById("shader");
clock = new THREE.Clock();
camera = new THREE.Camera();
camera.position.z = 1;
scene = new THREE.Scene();
const geometry = new THREE.PlaneBufferGeometry(2, 2);
uniforms = {
u_time: { type: "f", value: 1.0 },
u_resolution: { type: "v2", value: new THREE.Vector2() },
};
const material = new THREE.ShaderMaterial({
uniforms,
vertexShader: document.getElementById("vertex").textContent,
fragmentShader: document.getElementById("fragment").textContent
});
const mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);
renderer = new THREE.WebGLRenderer();
renderer.setPixelRatio(window.devicePixelRatio);
container.appendChild(renderer.domElement);
onWindowResize();
window.addEventListener("resize", onWindowResize);
}
function onWindowResize() {
renderer.setSize(window.innerWidth, window.innerHeight);
uniforms.u_resolution.value.x = renderer.domElement.width;
uniforms.u_resolution.value.y = renderer.domElement.height;
}
function render() {
uniforms.u_time.value = clock.getElapsedTime();
renderer.render(scene, camera);
}
function animate() {
render();
requestAnimationFrame(animate);
}
init();
animate();
</script>
</body>
</html>

324
static/html/visualizers/8.html Normal file
View File

@@ -0,0 +1,324 @@
<html>
<head>
<style>
html, body, canvas {
display: block;
width: 100%;
height: 100%;
margin: 0;
position: fixed;
background: black;
}
</style>
</head>
<!-- CodePen Home
your actual body
foretoo
https://codepen.io/foretoo/pen/WNzPjgo -->
<body>
<canvas id="canvas"></canvas>
<script type="x-shader/x-vertex" id="vertex_shader">
varying vec3 vPos;
varying float vNoise;
uniform float time;
uniform float size;
#include <snoise>
float PI = 3.14159265;
void main() {
float bt = time / 16.0;
float st = time / 12.0;
// CLOUDS NOISE
vec3 bp = position * vec3(0.33, 1.0, 0.33) * 2.1;
vec3 sp = position * vec3(0.25, 1.0, 0.25) * 5.5;
float bn = // 0.0;
snoise(vec4(
cos(bt) * bp.x - sin(bt) * bp.z,
bp.y + bt,
sin(bt) * bp.x + cos(bt) * bp.z,
0.0
)) + 1.0;
float sn = // 0.0;
snoise(vec4(
cos(st) * sp.x - sin(st) * sp.z,
sp.y + st,
sin(st) * sp.x + cos(st) * sp.z,
0.0
)) + 1.0;
// Get (0-1) final noise
float n = (sn + bn) * 0.25;
// Clear poles
n = n - abs(sin(position.y * 0.4));
// Extract clouds
n = step(0.47, n);
// if cloud go to an orbit
vPos = (1.0 - n) * position + n * normalize(position) * 1.05;
vNoise = n;
vec4 mvPosition = modelViewMatrix * vec4(vPos, 1.0);
gl_PointSize = size * 0.1 * (55.5 / -mvPosition.z);
gl_Position = projectionMatrix * mvPosition;
}
</script>
<script type="x-shader/x-fragment" id="fragment_shader">
uniform float time;
varying vec3 vPos;
varying float vNoise;
float PI = 3.14159265;
void main() {
float t = time / 5.0;
float ty = (vPos.y - t) * 3.33;
float R = (sin(ty ) + 1.0) / 2.0 + vNoise;
float G = (sin(ty + PI * 0.67) + 1.0) / 3.0 + vNoise;
float B = (sin(ty + PI * 1.33) + 1.0) / 2.0 + vNoise;
gl_FragColor = vec4(R, G, B, 1.0);
}
</script>
<script type="x-shader/x-fragment" id="simplex_noise">
// Simplex 4D Noise
// by Ian McEwan, Ashima Arts
//
vec4 permute(vec4 x){return mod(((x*34.0)+1.0)*x, 289.0);}
float permute(float x){return floor(mod(((x*34.0)+1.0)*x, 289.0));}
vec4 taylorInvSqrt(vec4 r){return 1.79284291400159 - 0.85373472095314 * r;}
float taylorInvSqrt(float r){return 1.79284291400159 - 0.85373472095314 * r;}
vec4 grad4(float j, vec4 ip){
const vec4 ones = vec4(1.0, 1.0, 1.0, -1.0);
vec4 p,s;
p.xyz = floor( fract (vec3(j) * ip.xyz) * 7.0) * ip.z - 1.0;
p.w = 1.5 - dot(abs(p.xyz), ones.xyz);
s = vec4(lessThan(p, vec4(0.0)));
p.xyz = p.xyz + (s.xyz*2.0 - 1.0) * s.www;
return p;
}
float snoise(vec4 v){
const vec2 C = vec2( 0.138196601125010504, // (5 - sqrt(5))/20 G4
0.309016994374947451); // (sqrt(5) - 1)/4 F4
// First corner
vec4 i = floor(v + dot(v, C.yyyy) );
vec4 x0 = v - i + dot(i, C.xxxx);
// Other corners
// Rank sorting originally contributed by Bill Licea-Kane, AMD (formerly ATI)
vec4 i0;
vec3 isX = step( x0.yzw, x0.xxx );
vec3 isYZ = step( x0.zww, x0.yyz );
// i0.x = dot( isX, vec3( 1.0 ) );
i0.x = isX.x + isX.y + isX.z;
i0.yzw = 1.0 - isX;
// i0.y += dot( isYZ.xy, vec2( 1.0 ) );
i0.y += isYZ.x + isYZ.y;
i0.zw += 1.0 - isYZ.xy;
i0.z += isYZ.z;
i0.w += 1.0 - isYZ.z;
// i0 now contains the unique values 0,1,2,3 in each channel
vec4 i3 = clamp( i0, 0.0, 1.0 );
vec4 i2 = clamp( i0-1.0, 0.0, 1.0 );
vec4 i1 = clamp( i0-2.0, 0.0, 1.0 );
// x0 = x0 - 0.0 + 0.0 * C
vec4 x1 = x0 - i1 + 1.0 * C.xxxx;
vec4 x2 = x0 - i2 + 2.0 * C.xxxx;
vec4 x3 = x0 - i3 + 3.0 * C.xxxx;
vec4 x4 = x0 - 1.0 + 4.0 * C.xxxx;
// Permutations
i = mod(i, 289.0);
float j0 = permute( permute( permute( permute(i.w) + i.z) + i.y) + i.x);
vec4 j1 = permute( permute( permute( permute (
i.w + vec4(i1.w, i2.w, i3.w, 1.0 ))
+ i.z + vec4(i1.z, i2.z, i3.z, 1.0 ))
+ i.y + vec4(i1.y, i2.y, i3.y, 1.0 ))
+ i.x + vec4(i1.x, i2.x, i3.x, 1.0 ));
// Gradients
// ( 7*7*6 points uniformly over a cube, mapped onto a 4-octahedron.)
// 7*7*6 = 294, which is close to the ring size 17*17 = 289.
vec4 ip = vec4(1.0/294.0, 1.0/49.0, 1.0/7.0, 0.0) ;
vec4 p0 = grad4(j0, ip);
vec4 p1 = grad4(j1.x, ip);
vec4 p2 = grad4(j1.y, ip);
vec4 p3 = grad4(j1.z, ip);
vec4 p4 = grad4(j1.w, ip);
// Normalise gradients
vec4 norm = taylorInvSqrt(vec4(dot(p0,p0), dot(p1,p1), dot(p2, p2), dot(p3,p3)));
p0 *= norm.x;
p1 *= norm.y;
p2 *= norm.z;
p3 *= norm.w;
p4 *= taylorInvSqrt(dot(p4,p4));
// Mix contributions from the five corners
vec3 m0 = max(0.6 - vec3(dot(x0,x0), dot(x1,x1), dot(x2,x2)), 0.0);
vec2 m1 = max(0.6 - vec2(dot(x3,x3), dot(x4,x4) ), 0.0);
m0 = m0 * m0;
m1 = m1 * m1;
return 49.0 * ( dot(m0*m0, vec3( dot( p0, x0 ), dot( p1, x1 ), dot( p2, x2 )))
+ dot(m1*m1, vec2( dot( p3, x3 ), dot( p4, x4 ) ) ) ) ;
}
</script>
<script type="module">
import * as THREE from "https://cdn.skypack.dev/three@0.136.0"
import { OrbitControls } from
"https://cdn.skypack.dev/three@0.136.0/examples/jsm/controls/OrbitControls"
import { MeshSurfaceSampler } from
"https://cdn.skypack.dev/three@0.136.0/examples/jsm/math/MeshSurfaceSampler.js"
import { EffectComposer } from
"https://cdn.skypack.dev/three@0.136.0/examples/jsm/postprocessing/EffectComposer.js"
import { RenderPass } from
"https://cdn.skypack.dev/three@0.136.0/examples/jsm/postprocessing/RenderPass.js"
import { UnrealBloomPass } from
"https://cdn.skypack.dev/three@0.136.0/examples/jsm/postprocessing/UnrealBloomPass.js"
console.clear()
// ------------------------ //
// INIT
const scene = new THREE.Scene()
const camera = new THREE.PerspectiveCamera(60, innerWidth / innerHeight, 1, 1000)
camera.position.set(0, 1, 3)
const renderer = new THREE.WebGLRenderer({ canvas })
renderer.setSize(innerWidth, innerHeight)
renderer.setPixelRatio(Math.min(devicePixelRatio, 2))
const orbit = new OrbitControls(camera, canvas)
orbit.enableDamping = true
// ------------------------ //
// Geometry sampler
const dodecahedron = new THREE.DodecahedronBufferGeometry(1, 0)
dodecahedron.rotateX(Math.random() * Math.PI * 2)
dodecahedron.rotateY(Math.random() * Math.PI * 2)
const sampler = new MeshSurfaceSampler(new THREE.Mesh(dodecahedron))
.setWeightAttribute(null)
.build()
// ------------------------ //
// Points data
const count = 55000
const position = new Float32Array(count * 3)
const pos = new THREE.Vector3()
for (let i = 0; i < count; i++) {
sampler.sample(pos)
position[i * 3 + 0] = pos.x
position[i * 3 + 1] = pos.y
position[i * 3 + 2] = pos.z
}
// ------------------------ //
// Points mesh
const points_geometry = new THREE.BufferGeometry()
points_geometry.setAttribute("position", new THREE.BufferAttribute(position, 3))
const points_material = new THREE.ShaderMaterial({
uniforms: {
time: { value: 0 },
size: { value: calcPointSize() },
},
vertexShader: vertex_shader.textContent.replace(
"#include <snoise>",
simplex_noise.textContent
),
fragmentShader: fragment_shader.textContent,
})
const points = new THREE.Points(points_geometry, points_material)
scene.add(points)
// ------------------------ //
// Bloom effect
const renderScene = new RenderPass(scene, camera)
const bloomPass = new UnrealBloomPass(
{ x: innerWidth, y: innerHeight },
3 * (1 / renderer.getPixelRatio()), // strength
2 * (1 / renderer.getPixelRatio()), // radius
0.99, // threshold
)
const composer = new EffectComposer(renderer)
composer.addPass(renderScene)
composer.addPass(bloomPass)
// ------------------------ //
// Looper
const loop = () => {
points.rotateY(0.002)
points_material.uniforms.time.value += 0.05
orbit.update()
composer.render()
requestAnimationFrame(loop)
}
requestAnimationFrame(loop)
// ------------------------ //
// Helpers
onresize = () => {
points_material.uniforms.size.value = calcPointSize()
bloomPass.setSize(innerWidth, innerHeight)
camera.aspect = innerWidth / innerHeight
camera.updateProjectionMatrix()
composer.setSize(innerWidth, innerHeight)
renderer.setSize(innerWidth, innerHeight)
}
function calcPointSize() {
return renderer.getPixelRatio() * Math.min(innerWidth, innerHeight) * 0.001
}
</script>
</body>
</html>

208
static/html/visualizers/9.html Normal file
View File

@@ -0,0 +1,208 @@
<html>
<head>
<style>
*{ margin: 0px;}
html, body {
background-color: black;
}
</style>
</head>
<!-- CodePen Home
I still walk the same streets at night
Tom Hinton
https://codepen.io/TomHinton/pen/BardWZj-->
<body>
<div id="shader"></div>
<script id="vertex" type="x-shader/x-vertex">
varying vec2 vUv;
void main() { gl_Position = vec4(position, 1.0);
vUv = uv;
}
</script>
<script id="fragment" type="x-shader/x-fragment">
precision highp float;
uniform vec2 u_resolution;
uniform float u_time;
varying vec2 vUv;
const float PI = 3.1415926535897932384626433832795;
const float TAU = PI * 2.;
float wiggly(float cx, float cy, float amplitude, float frequency, float spread){
float w = sin(cx * amplitude * frequency * PI) * cos(cy * amplitude * frequency * PI) * spread;
return w;
}
void coswarp(inout vec3 trip, float warpsScale ){
trip.xyz += warpsScale * .1 * cos(3. * trip.yzx + (u_time * .25));
trip.xyz += warpsScale * .05 * cos(11. * trip.yzx + (u_time * .25));
trip.xyz += warpsScale * .025 * cos(17. * trip.yzx + (u_time * .25));
}
vec2 brownConradyDistortion(in vec2 uv, in float k1, in float k2)
{
uv = uv * 2.0 - 1.0; // brown conrady takes [-1:1]
// positive values of K1 give barrel distortion, negative give pincushion
float r2 = uv.x*uv.x + uv.y*uv.y;
uv *= 1.0 + k1 * r2 + k2 * r2 * r2;
// tangential distortion (due to off center lens elements)
// is not modeled in this function, but if it was, the terms would go here
uv = (uv * .5 + .5); // restore -> [0:1]
return uv;
}
void uvRipple(inout vec2 uv, float intensity){
vec2 p = uv -.5;
float cLength=length(p);
uv= uv +(p/cLength)*cos(cLength*15.0-u_time*.5)*intensity;
}
float smoothMod(float x, float y, float e){
float top = cos(PI * (x/y)) * sin(PI * (x/y));
float bot = pow(sin(PI * (x/y)),2.);
float at = atan(top/bot);
return y * (1./2.) - (1./PI) * at ;
}
vec2 modPolar(vec2 p, float repetitions) {
float angle = 2.*3.14/repetitions;
float a = atan(p.y, p.x) + angle/2.;
float r = length(p);
//float c = floor(a/angle);
a = smoothMod(a,angle,033323231231561.9) - angle/2.;
//a = mix(a,)
vec2 p2 = vec2(cos(a), sin(a))*r;
p2 += wiggly(p2.x + u_time * .05, p2.y + u_time * .05, 2., 4., 0.05);
return p2;
}
float stroke(float x, float s, float w){
float d = step(s, x+ w * .5) - step(s, x - w * .5);
return clamp(d, 0., 1.);
}
void main() {
vec2 uv = (gl_FragCoord.xy - u_resolution * .5) / u_resolution.yy + 0.5;
vec2 uv2 = uv;
vec2 uv3 = uv;
uvRipple(uv2, 2.5 + wiggly(uv2.x + u_time * .05, uv2.y + u_time * .05, 2., 2., .5));
float n = sin(uv.x) * 50. * uv.y * sin(u_time * .1);
float a =sin(uv.x*n+u_time) / uv.y* n* cos(u_time*.15);
uv = brownConradyDistortion(uv, n, a );
vec3 color = vec3(uv.x, uv.y, 1.);
color = mix(color, 1.-color, smoothstep(distance(uv2, vec2(.5)), .2, .6));
color = mix(color, 1.-color, smoothstep(distance(uv, vec2(.4)), .3, .6));
color = mix(color, 1.-color, smoothstep(distance(uv3, vec2(.3)), .4, .6));
coswarp(color, 3.);
color = vec3(stroke(color.r, .5, .5), stroke(color.g, .5, .5), stroke(color.b, .5, .5));
gl_FragColor = vec4(vec3(color.r, color.g, color.b), 1.0);
}
</script>
<script type="module">
import * as THREE from "https://cdn.skypack.dev/three@0.136.0";
import {OrbitControls} from "https://cdn.skypack.dev/three@0.136.0/examples/jsm/controls/OrbitControls";
let camera, scene, renderer, clock;
let uniforms;
function init() {
const container = document.getElementById("shader");
clock = new THREE.Clock();
camera = new THREE.Camera();
camera.position.z = 1;
scene = new THREE.Scene();
const geometry = new THREE.PlaneBufferGeometry(2, 2);
uniforms = {
u_time: { type: "f", value: 1.0 },
u_resolution: { type: "v2", value: new THREE.Vector2() },
};
const material = new THREE.ShaderMaterial({
uniforms,
vertexShader: document.getElementById("vertex").textContent,
fragmentShader: document.getElementById("fragment").textContent
});
const mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);
renderer = new THREE.WebGLRenderer();
renderer.setPixelRatio(window.devicePixelRatio);
container.appendChild(renderer.domElement);
onWindowResize();
window.addEventListener("resize", onWindowResize);
}
function onWindowResize() {
renderer.setSize(window.innerWidth, window.innerHeight);
uniforms.u_resolution.value.x = renderer.domElement.width;
uniforms.u_resolution.value.y = renderer.domElement.height;
}
function render() {
uniforms.u_time.value = clock.getElapsedTime();
renderer.render(scene, camera);
}
function animate() {
render();
requestAnimationFrame(animate);
}
init();
animate();
</script>
</body>
</html>