Published
Edited
Sep 30, 2019
Importers
ShadedRectangle = (fragmentShader, vertexShader, settings = {}) => {
const width = settings.width || 100;
const height = settings.height || 100;
const uniforms = settings.uniforms;
const pivot = settings.pivot || [0.5, 0.5];
// Define geometry
let geometry = new PIXI.Geometry();
geometry.addAttribute('verts', [0, 0, width, 0, width, height, 0, height], 2);
geometry.addAttribute('inputUVs', [0,0,1,0,1,1,0,1], 2);
geometry.addIndex([0,1,2,0,2,3]);
// Add additional data per vertex
const vertexData = settings.vertexData;
if (vertexData) {
const data = [];
if (Array.isArray(vertexData)) {
for (let i = 0; i < 4; i++) data.push(...vertexData);
geometry.addAttribute('vertexData', data, vertexData.length);
} else if (typeof vertexData === 'function') {
const vert = [new Vector2(0, 0), new Vector2(1, 0), new Vector2(1, 1), new Vector2(0, 1)];
let length = 0;
vert.forEach(v => {
const d = vertexData(v);
if (Array.isArray(d)) {
length = d.length;
data.push(...d);
} else {
length = 1;
data.push(d);
}
});
geometry.addAttribute('vertexData', data, length);
}
}
// Create shader
const shader = uniforms === undefined ?
PIXI.Shader.from(vertexShader, fragmentShader) :
PIXI.Shader.from(vertexShader, fragmentShader, uniforms);
// Return generated mesh
const mesh = new PIXI.Mesh(geometry, shader);
mesh.pivot.set(width * pivot[0], height * pivot[1]);
return mesh;
}
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.
