{
//Aggie Blue
gl.clearColor(0.0, 0.15, 0.32, 1.0);
gl.viewport(0, 0, width, height);
gl.clear(gl.COLOR_BUFFER_BIT);
}
{
let shaderv = gl.createShader(gl.VERTEX_SHADER);
let shaderf = gl.createShader(gl.FRAGMENT_SHADER);
gl.shaderSource(shaderv, vertex_shader);
gl.compileShader(shaderv);
if (!gl.getShaderParameter(shaderv, gl.COMPILE_STATUS)) {
throw gl.getShaderInfoLog(shaderv);
}
gl.shaderSource(shaderf, fragment_shader);
gl.compileShader(shaderf);
if (!gl.getShaderParameter(shaderf, gl.COMPILE_STATUS)) {
throw gl.getShaderInfoLog(shaderf);
}
let shaderProgram = gl.createProgram();
gl.attachShader(shaderProgram, shaderv);
gl.attachShader(shaderProgram, shaderf);
gl.linkProgram(shaderProgram);
if (!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)) {
throw "Could not initialise shaders";
}
gl.useProgram(shaderProgram);
shaderProgram.vertexPositionAttribute = gl.getAttribLocation(shaderProgram, "aVertexPosition");
gl.enableVertexAttribArray(shaderProgram.vertexPositionAttribute);
// Init buffers
let triangleVertexBuffer;
triangleVertexBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, triangleVertexBuffer);
let vertices = [
-0.5, -0.5, 0.0,
0.5, -0.5, 0.0,
0.0, 0.5, 0.0
];
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);
triangleVertexBuffer.itemSize = 3; //three floats (x,y,z) per vertex
triangleVertexBuffer.numItems = 3; //six vertices (one triangle, three vertices each)
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
gl.bindBuffer(gl.ARRAY_BUFFER, triangleVertexBuffer);
gl.vertexAttribPointer(shaderProgram.vertexPositionAttribute, triangleVertexBuffer.itemSize, gl.FLOAT, false, 0, 0);
// By setting the GL Viewport to different ranges, we can constrain the area in which we draw in
// This allows us to have multiple views on the same data
for (let i = 0; i<3; i++) {
for (let j = 0; j<3; j++) {
gl.viewport((width/3)*i, (height/3)*j, (width/3), (height/3));
gl.drawArrays(gl.TRIANGLES, 0, triangleVertexBuffer.numItems);
}
}
return "OK"
}
fragment_shader = `#version 300 es
precision mediump float;
out vec4 outColor;
void main(void) {
//Aggie Gold
outColor = vec4(1.0, 0.75, 0.0, 1.0);
}
`
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.
