Public
Edited
Nov 5, 2022
2 stars
params = {
return{
shape: 1,
radius: 6,
rotateR: Math.PI / 12,
rotateB: Math.PI / 12 * 2,
rotateG: Math.PI / 12 * 3,
scatter: 1,
blending: 1,
blendingMode: 1,
greyscale: true,
disable: false
}
}
material = new THREE.ShaderMaterial({
side:THREE.DoubleSide,
vertexShader: `
varying vec2 vUv;
void main () {
vUv = uv;
gl_Position = projectionMatrix * modelViewMatrix * vec4(position.xyz, 1.0);
}
`,
fragmentShader: `
varying vec2 vUv;
uniform float u_time;
//zigzag
uniform float aZ;
uniform float fZ;
uniform float gZ;
// quad
uniform float fQ;
uniform float gQ;
// sawtooth
uniform float aS;
uniform float fS;
uniform float gS;
// sinu
uniform float aSin;
uniform float fSin;
uniform float gSin;
// mix
uniform float thres;
uniform float speed;
float Zigzag(float p, float amplitude, float frequence)
{
float y = amplitude*(abs(mod(p*frequence,2.0)-1.));
return y;
}
float Quad(float d) {
float y = floor(fract(d)*2.0);
return y;
}
float Sawtooth(float d,float amplitude, float frequence) {
float y = amplitude*(fract(d*frequence));
return y;
}
float Sinu(float d,float amplitude, float frequence) {
float triangle = abs(mod(d*frequence,2.0)-1.);
float y = amplitude*(triangle*triangle*(3.0 - 2.0 *triangle));
return y;
}
void main () {
vec2 st = vUv * 2.-1.0;
float wave = 0.0;
float d = length(st);
float t = u_time * speed;
wave += (Zigzag((d*fZ)-t,aZ,1.0)*gZ);
wave += (Quad((d*fQ)-t)*gQ);
wave += (Sawtooth((d*fS)-t,aS,1.0)*gS);
wave += (Sinu((d*fSin)-t,aSin,1.0)*gSin);
wave = wave/thres;
gl_FragColor = vec4(vec3(wave), 1.0);
}
`,
uniforms: {
aZ:{value: 0},
fZ:{value: 0},
gZ:{value: 0},
fQ:{value: 0},
gQ:{value: 0},
aS:{value: 0},
fS:{value: 0},
gS:{value: 0},
aSin:{value: 0},
fSin:{value: 0},
gSin:{value: 0},
thres:{value: 0},
speed:{value:0},
u_time: { value: 0 },
u_resolution: { value: new THREE.Vector2() }
}
});
// Continuously updates
{
while (true) {
//uniforms.u_time.value += clock.getDelta();
material.uniforms.u_time.value += clock.getDelta()/2;
// zig zag
material.uniforms.aZ.value = ampZ;
material.uniforms.fZ.value = freqZ;
material.uniforms.gZ.value = gainZ;
// quad
material.uniforms.fQ.value = freqQ;
material.uniforms.gQ.value = gainQ;
// sawtooth
material.uniforms.aS.value = ampS;
material.uniforms.fS.value = freqS;
material.uniforms.gS.value = gainS;
// sinu
material.uniforms.aSin.value = ampSin;
material.uniforms.fSin.value = freqSin;
material.uniforms.gSin.value = gainSin;
// mix
material.uniforms.thres.value = thres;
material.uniforms.speed.value = speed;
composer.render( clock.getDelta() );
yield null;
}
}
halftonePass = new THREE.HalftonePass( width, height, params );
{
composer.addPass( renderPass );
composer.addPass( halftonePass );
}
renderPass = new THREE.RenderPass( scene, camera );
composer = new THREE.EffectComposer(renderer)
height = 400
geometry = new THREE.PlaneBufferGeometry( 2, 2 );
mesh = new THREE.Mesh( geometry, material );
scene = {
const scene = new THREE.Scene();
scene.background = new THREE.Color(0x001b42);
scene.add(mesh);
return scene;
}
clock = new THREE.Clock();
camera = {
const fov = 45;
const aspect = width / height;
const near = 0.1;
const far = 1000;
const camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
camera.position.set(0, 0, 4)
camera.lookAt(new THREE.Vector3(0, 0, 0));
return camera;
}
renderer = {
const renderer = new THREE.WebGLRenderer({antialias: true});
renderer.setSize(width, height);
renderer.setPixelRatio(devicePixelRatio);
const controls = new THREE.OrbitControls(camera, renderer.domElement);
controls.addEventListener("change", () => renderer.render(scene, camera));
invalidation.then(() => (controls.dispose(), renderer.dispose()));
return renderer;
}
THREE = {
const THREE = window.THREE = await require("three@0.130.0/build/three.min.js");
await require("three@0.140.0/examples/js/controls/OrbitControls.js").catch(() => {});
await require("three@0.140.0/examples/js/postprocessing/EffectComposer.js").catch(() => {});
await require("three@0.140.0/examples/js/postprocessing/RenderPass.js").catch(() => {});
await require("three@0.140.0/examples/js/postprocessing/HalftonePass.js").catch(() => {});
await require("three@0.140.0/examples/js/postprocessing/ShaderPass.js").catch(() => {});
await require("three@0.140.0/examples/js/shaders/HalftoneShader.js").catch(() => {});
return THREE;
}
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
