Course notebooks for CSE 4/6413: Introduction to Computer Graphics as Mississippi State University. Course notes, assignments, and similar.
geometry_2tris_noindex = new Float32Array(
[
0,
0,
1,
0,
0, // x0,y0 r0,g0,b0
1,
0,
0,
1,
0, // x1,y1 r1,g1,b1
0.5,
1,
0,
0,
1, // x2,y2 r2,g2,b2
1,
0,
0,
1,
0, // x1, y1 again, same attrs
0,
0,
1,
0,
0, // x0,y0 again, same attrs
0.5,
-1,
0,
0,
1
] // x3,y3, r3,g3,b3
)
vertexBuffer_2tris_noindex = {
// Create and bind the appropriate buffer type
const buffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
// Load the buffer data
gl.bufferData(gl.ARRAY_BUFFER, geometry_2tris_noindex, gl.STATIC_DRAW);
// Some clean-up for Observable: Make sure buffer deleted when done.
invalidation.then(() => gl.deleteBuffer(buffer));
return buffer;
}
{
// Make sure we are updating the correct buffer
gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer_2tris_noindex);
// Enable the two attributes (vertex & color)
gl.enableVertexAttribArray(0);
gl.enableVertexAttribArray(1);
// Bind the array parts to the attributes
gl.vertexAttribPointer(0, 2, gl.FLOAT, false, FLOAT_SIZE * 5, 0);
gl.vertexAttribPointer(1, 3, gl.FLOAT, false, FLOAT_SIZE * 5, FLOAT_SIZE * 2);
return md`Updating the buffers for non-indexed rendering.`;
}
FLOAT_SIZE = Float32Array.BYTES_PER_ELEMENT
function draw() {
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
gl.bindAttribLocation(program, 0, "position");
gl.bindAttribLocation(program, 1, "color");
gl.drawArrays(gl.TRIANGLES, 0, 6);
}
vertexShader = {
const shader = gl.createShader(gl.VERTEX_SHADER);
gl.shaderSource(shader, vertexShaderCode);
gl.compileShader(shader);
if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS))
throw gl.getShaderInfoLog(shader);
invalidation.then(() => gl.deleteShader(shader));
return shader;
}
fragmentShader = {
const shader = gl.createShader(gl.FRAGMENT_SHADER);
gl.shaderSource(shader, fragmentShaderCode);
gl.compileShader(shader);
if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS))
throw gl.getShaderInfoLog(shader);
invalidation.then(() => gl.deleteShader(shader));
return shader;
}
program = {
const program = gl.createProgram();
gl.attachShader(program, vertexShader);
gl.attachShader(program, fragmentShader);
gl.linkProgram(program);
if (!gl.getProgramParameter(program, gl.LINK_STATUS))
throw gl.getProgramInfoLog(program);
invalidation.then(() => gl.deleteProgram(program));
return program;
}
setup = {
// One time setup
gl.viewport(0, 0, viewof gl.width, viewof gl.height);
gl.useProgram(program);
}
renderloop = {
while (true) {
draw();
yield md`The renderloop code.`;
}
}
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.
