In this MP you will supply new vertex positions for the same geometry every frame, causing the geometry to jitter and decay.
This MP is elective, with no code components. It assumes you have already completed the Logo MP.
You will submit a webpage that has
Submit an HTML file and any number of js, css, glsl, and json files. No image files are permitted for this assignment.
You are welcome to use a JavaScript math library, such as the one used in in-class examples or others you might know.
Your program should be generally the same as your Logo MP submission,
except that the vertex data in the attributes changes every frame. This
change should be something that would be very difficult to do as a GPU jitter; for example, adding a small
cumulative Math.random()
to each vertex location each frame. Your vertex shader may not do
anything fancier than a simple matrix multiply.
The end result should ensure that lines that were parallel in the static logo are not parallel in most frames of the jittering logo.
Dynamic attributes can be created by four changes to the usual rendering process:
When you gl.createBuffer()
the buffer that will have changing data, store the result in a global
variable or another place you can get at it again.
For that buffer, call gl.bufferData(..., gl.DYNAMIC_DRAW)
instead of the usual gl.STATIC_DRAW
Every frame, change the contents of the Float32Array
Every frame after gl.bindVertexArray
and before gl.drawElements
repeat the gl.bindBuffer
and gl.bufferData
calls with the updated Float32Array
On both your development machine and when submitted to the submission server and then viewed by clicking the HTML link, the resulting animation should show an I logo with jittering vertices. One example motion might be the following: