Course notebooks for CSE 4/6413: Introduction to Computer Graphics as Mississippi State University. Course notes, assignments, and similar.
viewof gl = {
const canvas = DOM.canvas(
ewidth * devicePixelRatio,
height * devicePixelRatio
);
canvas.style.width = `${ewidth}px`;
canvas.style.height = `${height}px`;
const gl = (canvas.value = canvas.getContext("webgl"));
gl.viewport(0, 0, canvas.width, canvas.height);
return canvas;
}
vertexBuffer = {
// A non-indexed full-"screen" quad of two triangles
const buffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
gl.bufferData(
gl.ARRAY_BUFFER,
new Float32Array([-0.5, -0.5, 0.5, -0.5, 0, 0.5]),
gl.STATIC_DRAW
);
invalidation.then(() => gl.deleteBuffer(buffer));
return buffer;
}
u_background = gl.getUniformLocation(program, "background")
vertexShader = {
const shader = gl.createShader(gl.VERTEX_SHADER);
gl.shaderSource(shader, vertexShaderSource);
gl.compileShader(shader);
if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS))
throw gl.getShaderInfoLog(shader);
// Important: delete our resources when the cell is invalidated
invalidation.then(() => gl.deleteShader(shader));
return shader;
}
fragmentShader = {
const shader = gl.createShader(gl.FRAGMENT_SHADER);
gl.shaderSource(shader, fragmentShaderSource);
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;
}
draw = {
setup;
gl.uniform3fv(u_background, hexToRGB(background));
gl.drawArrays(gl.TRIANGLES, 0, 3);
}
setup = {
// One time setup
const positions = gl.getAttribLocation(program, "position");
gl.viewport(0, 0, viewof gl.width, viewof gl.height);
gl.useProgram(program);
gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
gl.vertexAttribPointer(positions, 2, gl.FLOAT, false, 0, 0);
gl.enableVertexAttribArray(positions);
}
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.
