Project A: Hi Kirby
Goals
This project aims to draw, translate, rotate and animate Shapes created focus on Webgl. I use shaders to draw the complex character Kirby and create Kirby’s magic power. I make animation functions and also use the requestAnimationFrame tool to make the animations.
User-Guide
Click to change Kirby’s power color
You can drag Kirby’s star
Press [Space] to see Kirby’s invisible power :）
CODE-Guide
There are four documents. 1 HTML and 3 JavaScript files.
HiKirby.html
It creates a multi-layered canvas application titled "Hi Kirby." It features three canvases (kirbyCanvas, Diamond, webgl) stacked on top of each other, each responsible for different visual elements. The kirbyCanvas is for displaying Kirby, Diamond is for displaying diamond shapes, and WebGL serves as a base canvas for WebGL rendering.
Below the canvases, a control section (#controls) offers buttons to scale and speed up or down objects within the canvases. They are not achieved yet due to time limit, but I’ll explore them in further studies. User instructions are also provided.
The page imports several utility scripts for WebGL functionalities, as well as specific scripts (Kirby.js, Diamond.js, BackGround.js) to handle the logic for each canvas layer.
Kirby.js
It creates a multi-layered canvas application titled "Hi Kirby." It features three canvases (kirbyCanvas, Diamond, webgl) stacked on top of each other, each responsible for different visual elements. The kirbyCanvas is for displaying Kirby, Diamond is for displaying diamond shapes, and WebGL serves as a base canvas for WebGL rendering.
Below the canvases, a control section (#controls) offers buttons to scale and speed up or down objects within the canvases. They are not achieved yet due to time limit, but I’ll explore them in further studies. User instructions are also provided.
The page imports several utility scripts for WebGL functionalities, as well as specific scripts (Kirby.js, Diamond.js, BackGround.js) to handle the logic for each canvas layer.
For the main part :
Grabs the WebGL rendering context.
Initializes the shaders.
Binds mouse event handlers for dragging functionality.
Sets up buffer objects and vertex attributes.
Calls the draw function to render Kirby.
For Rendering Functions:
draw: Renders the entire character on the screen. It clears the canvas and draws each part of the character in a specific sequence.
draw_circle: This function is used to draw circular parts of Kirby like the eyes, body, cheeks, etc. It accepts transformation parameters and uses the provided angle to rotate the object.
draw_star: Renders a star figure. Accepts transformation parameters.
Mouse Event Handlers:
onMouseDown: Checks if the mouse click is within the canvas. If yes, initialize dragging.
onMouseMove: Updates the character's position while dragging.
onMouseUp: Stops the dragging operation.
Event Listener :
onMouseDown: Checks if the mouse click is within the canvas. If yes, initialize dragging.
onMouseMove: Updates the character's position while dragging.
onMouseUp: Stops the dragging operation.
Listens to the window's load event to execute the main function.
BackGround.js
This WebGL program creates an animated scene containing a rotating and translating circle, also with multiple random triangles that rotate.
Main Features :
The vertex shader rotates the vertices based on the input angle and offset. The fragment shader sets the color of the triangles.
Global Variables: globalTriangleColor and isPaused variables are used to control the triangle color and pause state.
Event Listeners :
A mouse click changes the color of the triangles.
Pressing the spacebar toggles the pause state of the animation.
Animation :
The animation function (animate) uses the requestAnimationFrame method.
The circle's rotation and x-axis position are animated.
Multiple triangles are animated with random rotations and offsets.
Functions :
main(): Entry point of the program. Initializes WebGL, sets up shaders, and kicks off animation loop.
changeTriangleColor(): Randomizes the color of the triangles.
initAngles(gl): Initializes angle data and binds it to the buffer.
Diamond.js
This WebGL script renders a rotating diamond on an HTML canvas element with the ID 'Diamond'. ( An extension of rotatingTriangle)
Shaders :
STAR_VSHADER_SOURCE: Vertex shader, transforms vertices using a model matrix.
STAR_FSHADER_SOURCE: Fragment shader, sets the color of the pixels.
Constants :
ANGLE_STEP: Angular step for the rotation animation.
Main Function:
Initializes WebGL, shaders, and vertex buffers.
Retrieves uniform location for the model matrix.
Sets up the animation loop (tick).
initVertexBuffers :
Creates a buffer for the star's vertices.
Binds the buffer to the attribute a_Position.
Draw Function :
Sets the model matrix and scaling.
Rotates the star according to the current angle.
Clears the canvas and draws the star.
Animate Function :
Calculates the new angle for rotation based on elapsed time.
Event Listener :
Starts the main function when the window loads.