Mtg 7/25: Mon-25-Sep-2023

Outline for Today

Wiki

Link to the UR Courses wiki page for this meeting

Media

Transcript

Audio Transcript

Okay, let's start out then.
So any questions or concerns from last day?
Feel like this is going to
not end well for me the keyboard
is
stuck at a strange angle over there oh, it's even got a little display on it
as a sketch
take a picture so
I can include that
so you don't think I'm just making things up
how many of you think I'm making things up
we just,
oh, I was gonna say you, Cynthia You don't think so? But sure, maybe he's not even looking up from his phone
what is that, like? I'm not sure what.
No, it was just it was terrible.
So you can adjust the angle of the keyboard. Oh, and it was angled such a way that it wouldn't go back into the slot. So now it's all set. And I'm still getting an error here so I won't I won't. I'll update the website. afterwards.
So who can tell me a little
bit of a little bit about a basic WebGL program? What pieces does it have or what it? Let's talk about some of the examples we've already looked at what pieces do we have for those?
Zip canvas to work on. Okay,
so let's go a little higher level so what which files do we have
so we have an HTML file
we have JavaScript.
So this is Oh sorry.
So in the HTML
we were
we describe the canvas
shaders, right. So, the book describes a way that we can have shaders not in the HTML file but putting them in the HTML file is a good way to make sure that all was run. So sometimes you might have some security issues if we're trying to load files not in the HTML file with a web application so you can review that.
So we're describing the structure of the web page in HTML and JavaScript.
I don't want to just monopolize the time here. So what else what do we do in the JavaScript?
We like the algorithm Yeah.
Should we make use of?
It. To manage data as well. So the basic structure we had is where we're getting regenerating data. And we're moving it to the GPU. And then we're describing how to eat make use of that data in the GPU.
Okay, so does that seem all right?
Soon as it's most on the table, and I just feel like I should use it connected to my computer so.
Okay, so before I get too far into the new stuff, but interaction this has a little bit of interaction, but it's also an example using three js to draw this or Krinsky triangle.
Erricka
so this is on the web,
but it's acting up a little bit. So it's hard to you might have to use source on the file. Check that with you just in a minute. So if we have index dot HTML and the main dot JavaScript and we run MPX make more are on francais VT.
This used to work more reliably.
So this is our serpent's key triangle drawn with a collection of triangles. let's redraw it
it's too quick
have to quick anyway, so we can
so we can interact with this a little bit.
I can zoom in on a
different triangle
go to the website here.
So I think if we do view source here
shouldn't be able to see the fine
No, that's it
let's see index page. Okay, so I apologize for not figuring this out before. Still needs a bit of work but let me go back to.
Source code directory
so I'm going to copy this
so when I read when I published the website today, you'll see the main dot HTML file and you can look at the source now
it's not very complicated
so we have the serpent's key triangle, the title and the heading and then we have a heading heading one in the body and then we identify the script happening in main.js. So that's where everything is going on
I think we can see main.js from the website.
xlarge to read
I'll do here on my screen
so the interactive elements are done with the harvest control orbit controls. So that's not part of the
main three library.
But it's an add on
so then we have a prospective camera and we're setting that up
to make a new camera because it's position we talked about those coordinates already a little bit
so here's another place so then we're making a new essence of the orbit controls attached to the camera and we connected with the renderer.
And then we have
Dr. We create the data for the triangle
so here they're using spread notation. Have you Are you familiar with that with JavaScript? A little bit. Yeah, I'm a little bit familiar too. So I have to look it up. Anyway, so we draw a triangle initially so that so if we set it up, it'll draw the outside triangle and then we'll call this recursively to draw the inside triangles. So the render rendering the scene with a camera and we update the controls. So we have one two, and then declaration for the controls
the camera dot position dot set 002 in a bit. So is it the initial initial position of the respective?
Yes, so So remember we talked about when we're lining up a shot. So we have the camera in a position and we're and we just say we're looking at so this is one to one, one axis of our camera. Coordinate System.
So that makes sense. Okay.
Anyway, I just wanted to show you that
so we're gonna go into more detail about interaction in WebGL but this is a way
that we can
see in three js, we can do a lot of things without getting worried about what's under the hood. So to speak. What are the mechanisms involved?
So we won't talk
about changing the camera position today. Some of the examples we'll deal with today are related to finding input or using mouse inputs
and buttons and
again, different kinds of inputs. Okay.
So what I want to do is
show you first some
examples from the text version
so, we'll do the rotating square first.
So, this is about
animation, right. So, we're going to animate this way to animate geometry. So, if you want to go back well, we could actually should we go back and spin gasket around from earlier examples done pa helpful thing anyone more enthusiastic about
Okay, so let's look at this code first.
So we see can you see that
alright
I can only see you
alright, so vertex shader so we're doing rotation requires an angle. So we're going to change the angle
and we're going to compute the sine of the angle and the cosine
so we think of drawing
drawing a circle, so you can imagine that's a circle please
and so the
so this is cosine. So this is theta cosine of theta sine of
the core coordinate so that's, as you're going through the
the angles we were going to use sine and cosine to
specify new coordinates
so we're getting our position that we've calculated for the so in this case, we have a square so that's four coordinates
sine and cosine. And then we're going to update the graphics position, multiplying sign by the Y and cosine by the x position. The minus sign for the first one and the y position gets
sine times cosine
and they're also flipped here. So cosine times x.
So this notation is called Swizzle, I believe. So we can access the elements of the vector by
by using dot notation, and then we can do some interesting things. We can change the order of elements if we if we go x y Zed and then we say Zed y x
so is that position is zero and then here we have w. So we talked a little I think we talked a little bit of emoji, what genius coordinates if you mentioned that, I feel like we did a little bit what how we can represent we can incorporate rotation, scaling and translation
and the single matrix
that we talk about that
maybe you mentioned it,
okay. So
well, so this is to do with more genius. coordinates. So we're going to get a point in x, y and Zed.
So we all get hung up on it and don't worry about it. If it's not clear.
But I just want to explain that so.
We have x divided by w find w w.
So that's how we get our
I'm gonna get her coordinate in 3d.
Usually we're going to have w as one. So just a bit of arithmetic doesn't come into it
anyway, so we're doing the rotation and so we have an input vector. The position that we're getting from our, our buffer that will set up in Jad GS file and then we have uniform float. So that's the angle
so uniform, is because the angle is gonna be constant doesn't change with a vertex. So we're just passing a single value to the shader. So now, we're not creating a buffer with one angle for every vertex, for example. We're just doing one angle for the shader. So we'll see how that goes. And that's why we use uniform. So to do that
and then
in the fragment shader, we're just doing the color. So we're doing color red okay.
Then rotating square
so the JavaScript we're doing
so we
declare theta as a variable with
global scope
and set to zero. And then we have a variable that we're going to use in a few different places, that's going to be the location of theta in the shader. So that's how we're going to make the connection between the JavaScript and the shader. Like we do for position Lok, for example. So we set the viewport and clear color, set the shaders and then we have vertices 01 minus 1010. And zero minus one.
So then,
for those four vertices, we're going to store them or send them to the GPU.
And then, so we're making the associated association between a position and the buffer. And then here's the one line we're dealing with the angle
so theta Loc,
GL get uniform location. So it's a little different than this one, get attribute, attribute location.
Get uniform location from the program and look for the name u theta.
So we make the connection. And then we call the render.
And here's the other place where
we're using that information. So
in the render, we're adding to the angle and then we're sending that very resetting that variable
in the shader with this connection, using GL uniform one f. So we make that connection and change the value and then we're going to draw the array
so there are a couple of things here. So on the other one, we saw a render
we just drew the arrays. Now we have request animation frame render as well.
So that's the idea that we want to make things. We want the animation to be smoother. So we're managing the switching of so we're switching the screen when the new images ready.
So instant screen is like each time rotates.
Yeah, so we can use instead of having to redraw the buffer, while it's visible. We can redraw it in the background and then switch once it's once it's ready. So that's called double buffering.
So I just want to mention also a triangle strip here.
So
we start with 01.
And then we go to minus one, zero
and then we have 100 minus one
so we do
do that so we can think of starting with 01. To
get back to the that is when we do a triangle strip. We're making a triangle with the first three vertices and then only add one more verdict vertex here.
Then we're making a triangle out of the
three vertices, the next three vertices. So this is a way to make more efficient use of the vertex data that we have
and that's a square rotated.
Not a sailing ship or anything else
that makes sense.
So we're using this and then we're going to rotate it
so let's go back to our.
Let's do the to D.
Why don't we move into
it chapter Three.
Okay, so we need
we need to update
update the shader as well. We'll do that in a second.
Okay.
So we've added the variable for theta we didn't use we didn't change the draw raise command because we have triangles they don't have the triangle strips so
we'll take that
Okay.
That's CMRA so we're doing the code change the position
based on the rotation angle
think we have all the pieces there. Now
I didn't save. file that would have helped
I think that may have helped
any questions or questions or concerns about that.
Can we control the speed of the animation?
Yes
Now I want to go back and.
Excuse me so this has some controls
so we can change the direction
and we can change the speed as well.
So this is a search box with toggle rotation direction the spin faster and spin slower. That's a select control and HTML and I am not sure that's being put to very good use here.
These these are just buttons
and we seem to the broken
so because we're doing this as part of our HCC program, let's think about how to interact
with this rotating square
so we play maybe we'd like to have an indication of the range of speed possible
and if we keep slowing it down, maybe we'd like it to stop. But then if we hit the faster button, it should start again. Those things seem reasonable. Anything else?
Here's the question. So the more we click this spin slower button, the more it click gets slow. So if we like it should be the same for the faster right if we click spin faster, we cannot like started or you can give up committed defaults.
The issue here is there aren't any checks
so
spin slower we'll get it'll, it'll be a positive number but it'll it'll be infinitesimally small if we keep pressing slower and if we keep pressing faster we get a huge number
so this is their final This is the revised version so they've added a slider here
so they can
make it to be 100% and 0% isn't zero because it's still moving
so this is my version of the
of the
last time we saw
so we have three buttons. And we can also use key presses
two this is using Bootstrap.
So
we have the buttons
So I have a variable for speed. I said 250
And then I'm going to have
this is the progress bar or the speedometer. In the textbook version they were dividing through by two or multiplying by two with no checks so
I
created a variable for this factor that we're going to multiply and divide by
my B we don't we don't want to do that.
And we just want to increment. So if we're spinning faster we're increasing the speed by one and if we're spinning slower, we decrease it by one
I've still
I've kept
some elements of the original code.
So speedometer, I'm getting it using the DOM to find the item with the ID in the HTML file.
I'm not using
a select so I just comment that out for now.
So the button that has a direction I'm toggling between true and false.
And then the button
to which I've given the ID slower. I call a function spin slower
faster I do spin faster.
Then here we're doing key presses. So press one toggles the direction press two at Spin slower press three spins faster.
Suspend sore I divide through by the factor. The speed is less than one I set speed to zero. And then I update the speedometer. It's been faster speed is greater than zero. multiplied by the factor of speed is greater than 100. So to be 100.
So if it's
if it's zero
and I said to be one
because if it's zero, the multiplication by whatever factors is going to make it a different so that's so restart it. Updates phenomenon so
I'm updating this style with based on speed so the speed will be a percentage between zero and 100.
This is an accessibility property for screen readers and so on and this is a label so we're getting speed
so that's what we see on the progress bar it says speed some percentage.
So in the render function, clear the color bit if speed is greater than zero.
Changing theta based on
a toggle direction so if it's true we're adding point one to theta. And if it's false we add negative point one set send that to the vertex shader. Draw the triangles strip to triangles. Then we set the timeout function this is the way that we're controlling the speed.
So we're delaying or setting a delay to request the next frame that's basically it. So when speed is 100 the timeout is zero speed is zero then we're not going to do anything except drive.
Draw the square draw the triangle strips
in the current position so we're not updating the angle or anything
I've tried to improve the readability and
quality of the code in the example
does this make sense? Do you have any questions?
Moses interesting. today.
So who can take on being more talkative in class
Shubh
anyway, I don't want to belabor the point
so we've seen a couple things for animation so we're doing the rotation of angle and we have the request animation frame.
They will look at the assignment, the first assignment yet. Any questions about that? Okay,
okay, we're right on time. So thank you very much for today.
I'll see you on Wednesday. Have a good day. Take care. Enjoy the nice weather
I'll see you on Wednesday. Have a good day. Take care. Enjoy the nice weather

Responses

What important concept or perspective did you encounter today?

learning about basics web_gl was a important point for me. How many functionalities can be added with it, this was all really intresting for me.
I learned coding of gasket and use of timer to rotate the square
From the transcript i learned about the webgl program also about the shaders and making use of dom and algorithms.

Was there anything today that was difficult to understand?

how spin worked and how to control the speed of it

Was there anything today about which you would like to know more?

drawing, rotating rectangle using coordinates on JS is something new to me and did not used before. I am curious if we can do other things like shake/pop/morph/squeeze/wobble/swing/flipX/flipY.

Site built: 2025-05-06 13:52 -0600 • Give feedback about page