Write a function to compute this transform as a composition of primitive transforms.

By
Responsive Centered Red Button

Need Help with this Question or something similar to this? We got you! Just fill out the order form (follow the link below), and your paper will be assigned to an expert to help you ASAP.

Order Form

Goals:
Task 1: Build UI widgets.
To specify the world coordinate window, you will need input widgets to specify a range in X and Y.  Any valid interval that represents a rectangular region  can be used.  Once the region is specified, the transformation from display coordinates (canvas represents the display) to world coordinates can be computed.
You can use the  tag (widget) (Links to an external site.) in HTML to enter textual information.  For instance,  the following JS code can be used to retrieve the value in the text field:
document.getElementById(“ymax”).onchange = function (evt) {
ymax = evt.target.value
}
Task 2 :  Display to World Coordinate Transformation
We are mapping from display to world coordinates; the display is determined by the canvas you specify. The world coordinate window is specified by the user.  Thus, its a mapping from one rectangle to another, which involves a sequence of translation and scale transforms (refer to the references above).  You will write a function that  computes this transform as a product of  primitive transforms (similar to the window to viewport transform illustrated in the lecture slides).
You will write a function to compute this transform as a composition of primitive transforms.
Note:  The canvas coordinate system and t he world coordinate system contain a flip in Y. To account for this, you can simply treat both to have the lower left corner as  the origin, but when a point  has to be transformed, simply flip its Y coordinate (canvas.height – y)  prior to transforming  the point.
Task 3 :  World to NDC Transformation, Applied in the Vertex Shader
World to NDC coordinates was done algebraically in Lab 3. Here you are performing the same transformation by composing a sequence of  primitive affine transformations; this is similar to Task 2, except that we are going from world coordinate window  (specified by the user)  to NDC coordinate window (-1 to 1 in X and Y).
You will write a function that computes this composite transform and returns it. The matrix  will be applied in the vertex shader.  Use a uniform variable to share the shader (similar to Lab 5)
Task 4 : Display Display, World and NDC Coordinates on Text Area
When each point is drawn, print the device coordinates (mouse position), World coordinates and the NDC coordinates onto the text area. See the video below for example output.
Implementation Notes:
Reminder – matrices that are shared with the shader must  be transposed, then flattened prior to sharing the uniform variable
Use a uniform variable  to share the world to NDC transformation (as seen in the provided shader)
mat_vec.js contains matrix-matrix multiplication and matrix-vector multiplication functions that should ease the process of composing primitive transforms; use the scale, translate functions from Lab 5.

How to create Testimonial Carousel using Bootstrap5

Clients' Reviews about Our Services