Award-winning creative focused on data-driven art and visualizations, trying to push the boundaries of the web one visual story at a time ✨
Public
Edited
Feb 16, 2023
Importers
3 stars
width = 512
height = 256
{
const canvas = DOM.canvas(width, height);
const gl = canvas.getContext("webgl");
// setup shader program
const program = initShaderProgram(gl, vertexSource1, fragSource1);
// get attribute & uniform location
const positionAttribLocation = gl.getAttribLocation(program, "a_position");
const resolutionUniformLocation = gl.getUniformLocation(
program,
"u_resolution"
);
// calculate positions (THIS IS NOT THE RIGHT WAY TO DO THIS, FIX LATER)
const count = 1000;
const xRandom = d3.randomNormal(width / 2, 15);
const yRandom = d3.randomNormal(height / 2, 15);
const positions = _.times(count, (i) => [xRandom(), yRandom()]).flat();
const positionBuffer = initPositionBuffer(gl, positions);
console.log(positions);
gl.viewport(0, 0, width, height);
gl.useProgram(program);
// set attributes & uniforms
setPositionAttribute(gl, positionBuffer, positionAttribLocation);
gl.uniform2f(resolutionUniformLocation, width, height);
gl.drawArrays(gl.POINTS, 0, count);
return canvas;
}
splats2 = {
const canvas = DOM.canvas(width, height);
const gl = canvas.getContext("webgl");
// setup shader program
const program = initShaderProgram(gl, vertexSource1, fragSource1);
// get attribute & uniform location
const positionAttribLocation = gl.getAttribLocation(program, "a_position");
const resolutionUniformLocation = gl.getUniformLocation(
program,
"u_resolution"
);
// calculate positions (THIS IS NOT THE RIGHT WAY TO DO THIS, FIX LATER)
const numSplatters = 15;
const slicesPerCircle = 10;
const sliceAngle = (2 * Math.PI) / slicesPerCircle;
const padding = 20;
const splatRadRandom = d3.randomNormal(8, 4);
const positions = _.chain(numSplatters)
.times((i) => {
// for each splat, calculate center
const splatRadius = splatRadRandom();
const xRandom = d3.randomNormal(
_.random(padding, width - padding),
splatRadius
);
const yRandom = d3.randomNormal(
_.random(padding, height - padding),
splatRadius
);
const radRandom = d3.randomNormal(splatRadius / 6, splatRadius / 4);
return _.times(splatRadius * 60, (i) => {
const x = xRandom();
const y = yRandom();
const radius = radRandom();
return _.times(slicesPerCircle, (i) => {
const startAngle = i * sliceAngle;
const endAngle = (i + 1) * sliceAngle;
return [
x + radius * Math.cos(startAngle),
y + radius * Math.sin(startAngle), // vert1
x + radius * Math.cos(endAngle),
y + radius * Math.sin(endAngle), // vert2
x,
y
];
});
});
})
.flattenDeep()
.value();
const positionBuffer = initPositionBuffer(gl, positions);
gl.viewport(0, 0, width, height);
gl.useProgram(program);
// set attributes & uniforms
setPositionAttribute(gl, positionBuffer, positionAttribLocation);
gl.uniform2f(resolutionUniformLocation, width, height);
gl.drawArrays(gl.TRIANGLES, 0, positions.length / 3);
return canvas;
}
{
const canvas = DOM.canvas(width, height);
const gl = canvas.getContext("webgl");
// setup shader program
const program = initShaderProgram(gl, vertexSource1, fragSource1);
// get attribute & uniform location
const positionAttribLocation = gl.getAttribLocation(program, "a_position");
const resolutionUniformLocation = gl.getUniformLocation(
program,
"u_resolution"
);
const count = 1000;
const xRandom = d3.randomNormal(width / 2, 15);
const yRandom = d3.randomNormal(height / 2, 15);
const positions = _.times(count, (i) =>
[xRandom(), yRandom()].map(Math.round)
).flat();
const positionBuffer = initPositionBuffer(gl, positions);
console.log(positions);
gl.viewport(0, 0, width, height);
gl.useProgram(program);
// set attributes & uniforms
setPositionAttribute(gl, positionBuffer, positionAttribLocation);
gl.uniform2f(resolutionUniformLocation, width, height);
gl.drawArrays(gl.POINTS, 0, 20 * count);
return canvas;
}
import {
loadShader,
initShaderProgram,
initPositionBuffer,
setPositionAttribute
} from "@sxywu/00-webgl-setup"
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.
