Public
Edited
Jan 6, 2023
Insert cell
Insert cell
{
const app = new PIXI.Application({
width: width,
height: height,
backgroundColor: 0x000000,
resolution: window.devicePixelRatio || 1,
});
invalidation.then(() => app.destroy(true, true));

const geometry = new PIXI.Geometry()
.addAttribute('aVertexPosition', // the attribute name
[0, 0, // x, y
width, 0, // x, y
width, height,
0, height], // x, y
2) // the size of the attribute
.addAttribute('aUvs', // the attribute name
[0, 0, // u, v
1, 0, // u, v
1, 1,
0, 1], // u, v
2) // the size of the attribute
.addIndex([0, 1, 2, 0, 2, 3]);


const vertexSrc = `

precision mediump float;

attribute vec2 aVertexPosition;
attribute vec2 aUvs;

uniform mat3 translationMatrix;
uniform mat3 projectionMatrix;

varying vec2 vUvs;

void main() {

vUvs = aUvs;
gl_Position = vec4((projectionMatrix * translationMatrix * vec3(aVertexPosition, 1.0)).xy, 0.0, 1.0);
}`;

const fragmentWaveSrc = `
precision mediump float;
varying vec2 vUvs;
uniform float amplitude;
uniform float time;
void main()
{
//Offset uv so that center is 0,0 and edges are -1,1
vec2 uv = (vUvs-vec2(0.5))*2.0;
vec3 outColor = vec3(0.);
//Simple wavefunctions inversed and with small offsets.
outColor += 5./length(uv.y*200. - 50.0*sin( uv.x*0.25+ time*0.25)*amplitude);
outColor += 4./length(uv.y*300. - 100.0*sin(uv.x*0.5+time*0.5)*amplitude*1.2);
outColor += 3./length(uv.y*400. - 150.0*sin(uv.x*0.75+time*0.75)*amplitude*1.4);
outColor += 2./length(uv.y*500. - 200.0*sin(uv.x+time)*amplitude*1.6);
gl_FragColor = vec4(outColor,1.0);
}`;
const waveUniforms = {
amplitude: 0.75,
time: 0,
};
const waveShader = PIXI.Shader.from(vertexSrc, fragmentWaveSrc, waveUniforms);
const waveTexture = PIXI.RenderTexture.create({ width: width, height: height });
const waveQuad = new PIXI.Mesh(geometry, waveShader);
const waveContainer = new PIXI.Container();
waveContainer.addChild(waveQuad);
app.stage.addChild(waveContainer);

let time = 0;
app.ticker.add((delta) => {
time += 1 / 60;
waveQuad.shader.uniforms.time = time;
app.renderer.render(waveQuad, { renderTexture: waveTexture });
});
return Object.assign(app.view, { style: `width: ${width}px` });
}
Insert cell
height = 300
Insert cell
PIXI = require("https://cdnjs.cloudflare.com/ajax/libs/pixi.js/6.5.1/browser/pixi.js").catch(
() => window.PIXI
)
Insert cell

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.
Learn more