Mtg 8/25: Wed-27-Sep-2023

Outline for Today

Wiki

Link to the UR Courses wiki page for this meeting

Media

Transcript

Audio Transcript

So my new laptop is in the works now so I can say goodbye to this the 2017 version that I have. Remember that problem I had about not having a more recent enough computer to update the software so
I'll be able to deal with that. As well.
Meeting 825.
Questions from our previous meeting. Did you look at that example I
the code that I posted actually improved it a little bit since our meeting.
That's right.
It's worth more better attendance today.
Eight 813
Anyway, okay, let's look at that first.
Let's look at the example from yesterday.
Gonna move us down.
Oh, great. Thanks.
That's exactly I'm going to show today.
Okay.
Pardon my messy desktop here
okay
so remember we did the rotation on the triangle
right good so you can see the little triangle so I added a control to do a toggle rotation. So turn rotation on and off
and then I have reset center. So if you remember I did
well, it wasn't
rotating around this.
It was rotating
was retaining at this point? Because I had said
minus high
minus,
minus zero. And given the point zero minus 0.5. Well, anyway, it was this point
for trying, four because there's one upside down. So in the middle, the bottom line here is the distance between the bottom and the top back with two
triangles here.
That isn't the center of the triangle. So the triangle is here.
So this is so this is 60 degrees here, this angle
so that 30 degrees this right here so that's the point
for centering rotation so how do we center rotation? What did we do in our code
to do the rotation the other day? For those of you that are here, do you remember what we did?
I'm not sure that we did a translation.
So the vertex render.
We took the positions that were set from
the vertex buffer
and then did a multiplication to do
effective rotation. So we're rotating
we're gonna rotate around the origin if we don't do any translation. So the origin here because this is minus one, plus one, y minus one plus one and x
is going to be around here are just
some how do we adjust the center of the rotation
How can we specify transformation to do that?
I'm not sure the name of the file
thinks that's.
Anyway, so if we do a rotation, rotating about the origin How can we specify different points rotate around
let's say here's the origin. Let's say we have a triangle over here and here's the center of the triangle
so intuitively what do we need to do is change.
Nancy or Nancy?
See this, this helps me because I
know you're both here and
I can see I can see both of your names
covered. I seem like I know.
I'm doing better than that. Anyway,
I tried to get a laugh every now.
So that's my attempt today. Let's keep it so
if I want to rotate the triangle around at center
so here's the
origin
and here's this seat for center.
So what happens if we translate the center to the origin?
That can help a bit. Because we're gonna rotate
and rotate it the triangle around the center but the center is not with the origin. So if you want to rotate it in place what do we have to do? XYZ.
Okay, so we're
getting five plays
well, we don't
want to have it's good to have some numbers to work, work out specific examples. But let's just talk about
the general principle.
So if I want to rotate around the center of the triangle I'm going to move the center of the triangle to the origin.
So we're going to translate
this point the origin
now
now that we've got rotating about the center of the triangle,
how do we get the triangle back where it was to begin with
could we do another translation? Yeah.
So we have those three steps. So let's
try move moving the center around
Okay, so
what if I change the X what do we expect to happen? Do you have some intuition about that?
So we're not rotating around the center anymore.
So the center of rotation is
is about here
Okay, so let's we'll take a quick look at the code for this version.
Okay
so we have uniform variables and for those who are here what are the uniform variables for from Monday
so, we have the attributes the positions and those are changing with so every vertex has its own position.
When we have a uniform variable we don't change it for each vertex. We're just providing a value to the shader So, it makes sense. So, here we're going to specify a theta for the rotation and a plot an xy point for the center
so, the first two lines there we're getting it. We're doing the translation of the point to the center to the value in the center
excuse me, then we're getting a sine and cosine for that angle and then we're computing a new X and Y position. So we do the rotation first, and then we're adding. So this is step two and three that we just talked about. So here's the rotation and an x and then we're translating back to the center
that same okay
can you see that alright or should I let me see if I can make it Bigger?
Okay, so we're setting up the buffer was data from the positions array that we computed and then we're making the connection between the eight position variable in the shader with the buffer
and then we just have these two
the these are simpler for the uniform variables. We're just giving the location
so if we're right in the render if we're rotating the gasket then we're changing theta. And then we
set we pass the value of fader to our shader
and I forgot rotate rotating we just
well
here we're resetting, resetting the value of the center and then we're drawing triangles.
So this is a fun click handler for the reset button.
That seem okay
so here we have animation and interaction
I just want to
flip down to the render function again.
Best animation frames that
so what does that mean prepares smooth the next frame so the transmission is smooth
so
if we're rotating this So, here's the images on the screen
so, remember we're we're simulating animation or we're giving a sense of animation.
we're animating
like creating
a number of static static images showing them
at a high enough rate that we have a sense of motion.
So if we see this
image and then we request
another frame and the Rotate and the animation
so we're not going to switch to the new frame until it's rendered in the buffer.
So we don't see things being drawn on the stream draw them
off screen and enemies just switch the buffer
little bit more clear.
This make sense so far.
Okay.
So we're dealing with interaction.
How do we know when the user interacts with the application?
How do we know when
something happens?
So I've indicated that there's
two ways to do this one is the original approach
when I started writing code
for the Silicon Graphics workstations
that we had
in the lab in the late 80s and early 90s
I was using the original approach.
So we had a big there's a big loop.
So we're just while one that kind of
approach so we're just.
So we have a big loop,
and then we're testing for different kinds of events.
And then we're handling them
from this loop that loop is the organizing structure of the application.
So what's
a modern approach? To maybe?
Have you written applications that
interact with
the user or the user interacts with the application and how do you?
I mentioned an example
on the screen right now.
events I believe.
No
this is more like Wheel of Fortune here we'll play
you to give us some vowels
Okay, I'll give you a vowel.
Dress rasterization. Is
design one eight and rasterization no that's not right. That's a longer word.
A consonant we'd like to see if there's a constant.
Call out some choices for constants. And I'll fill him in there
no tea
Oh no
What about
oh, I forgot
I missed a letter I'm sorry.
Good thing we're not playing for a new car. Or something.
callbacks, yeah.
So
the events are interested in creating a callback function register that so the system
calls that event handler that's registered for the event. And that's a little more efficient
or a lot more
so. Maybe I should show you here.
Yeah. Me
so this application is allowing us to draw rectangles by specifying two points and then we fill in the other vertices
Oh, that's
why
I'm zoomed in.
So this code
we're getting a mouse event and we're translating into the coordinates that we're drawing from the minus one to plus one minus one to plus one.
So this code
is limited because it needs the canvas to be at the top left
Excuse me.
Let's look at
this vert Shin so
here I'm
I'm using the bounding box rectangle to get the get the points relative to the canvas.
So
display here
start counting at zero rectangles zero
as
the points the vertices minus point eight 4.69.
Excuse
me again. minus point eight 4.17 minus point two 3.17 and minus point two 3.69. And then I'm also displaying the color for the rectangle.
So the vertex shader is just getting the position and then
vertex color is set to be the attribute color value that we get from the color buffer.
I've
given the code a facelift from the one that's on the website
with the idea of making it more readable so, I'm saying that we could specify up to 200 rectangles and a rectangle has four vertices. So the max number of positions are the number of vertices times the max number of rectangles so
are going to create space for 800 vertices and then
well, let's go through it. A little more.
So here's a variable to keep track of the rectangles. And we're distinguishing between the first click so if it's the first click or getting starting a new rectangle if it's
if it's not the first click, which means is the second click. Then we're finishing completing the rectangle
and we're going to store the rectangle is an array
so this is
well some very well we'll just deal with the variables later.
So we have an array for colors and then our in our init function
setting up the context and the color so we're doing a light gray as the fill color or loading our shaders and using that and then here I have the variables. So
I have variables so it's a bit more readable as you go through for the GL commands. So now we're dealing with vertices. We have x and y so the so each vertex has two components
as I've indicated here, component size is four. So a floating point number has four bytes, or 32 bits. So we create a buffer and we're going to bind to that buffer
now
the size we're going to allocate for that buffer is two times four times.
That's not right. Two times four eight times 800 vertices. So we're going to allocate 64 for 6400.
Locations
bytes
we're going to connect a position with the buffer and then we're gonna do the same here for a color buffer
so here I am specifying the event handlers.
Here I'm getting using the DOM to get the text area. I'm going to record some things there.
So we're going to add a listener function for most down and we're going to attach it to the canvas so we don't care about most down events outside the canvas but if it's happens inside the canvas, then we're going to
do this and so again, and get the bounding client rectangle for the canvas. And then so from our event, we get client x and y.
So we subtract the x position from the left of the bounding box and y we subtract the top of the bounding box
so event, client x and y will be in the range of
the canvas size so we set it up to be 512 by 512. So that's what we're getting.
So we're multiplying the x the relative x by two
and we're divided by Canvas width. So we have numbers in the range of the canvas, multiply it by two. So now we have in the case of 512 by 512. We have a range zero to 1023. And then we're gonna divide here by 512.
So then because we've multiplied by two
so we've gotten values between zero and two. And we subtract. Minus we subtract one so then the range is minus one.
To one.
Does that make sense?
So and we're flipping y, so we're not coming from the top left or going from the bottom left, when we're drawing
so when we ever first click, we store the two points.
Then we computed here
in position zero of the array, and then said first click is a false so we're not we're done processing. The first click once we assign that first position in the rectangle array
and then
so for not on the first click, so or the second click we set it back to be
first click and then we're dealing with
the new point we're putting in position to the array and then we're filling in positions one and three.
With combinations of those input points. So here I'm modifying the text content of the text area on the interface so I print them the rectangle the coordinates with two decimal places.
Then here we're adding service originally, we set up this buffer to be 6400 bytes. Right 200 rectangles, each with four vertices, each vertex with x and y and each x, y value, taking four bytes. So we've allocate that block of memory and now we're going to add to it
so we bind to the vertex buffer and then we're going to compute an offset. And the offset is the number of vertices so there's four vertices two components for each vertex so that's
Yeah, so we have x and y so so num vertices is four. And there's two components each vertex. So there's eight components, per the rec, each rectangle and we have four bytes for each of them. So that's 32. So we need to store 32 bytes for each rectangle. So we start rectangles, zero so we have zero offset. And then for a second rectangle. We have a 32 or offsets, 32 and 64. Yeah, so we can see 32 Bytes times 200 equals the size that we've allocated. For our buffer.
I should really test that we don't exceed the maximum number of triangles here
I'll add that
okay,
so then we're going to do the color buffer.
So
we're assigning the same color to each vertex
so
I just have a loop to repeat the values for each vertex
and then
so the offset for colors
for vertices.
Each vertex needs four, four components because we're dealing with RGB A. So that's 16. times is four. That's 64. So we need 64. bytes to specify the Virtus, vertex colors
so the color I'm outputting I'm just recording one of the colors since they're the same
and then
at the end of the loop, we add increment rectangles. So we're dealing with the next rectangle
and then, when we render.
We're doing a triangle fan so we're going through the number of rectangles.
So this is this the primitive redrawing and then the starting point and
and the number we're drawing it that from that starting Point
So
I just want to talk about triangles. Oh boy sorry
no one started closing books which I thought was a generally approved sign for
this makes sense.
I invite you to look at the code for cat ones. And then look at my version and see if you have
if you think I've done a better and improved the readability and if there are things that could still be improved
anyway, so
this gives you have a sense of how to use.
Events for input.
So things you might explore, what about assigning different colors to different vertices and what does that look like? I don't want to keep o'clock or so
thank you. Very much for today.
Any questions before
Thank you very much for today.
So we're not
we don't meet on Friday. Friday is the
national truth and
reconciliation. the
opportunity to look at history
So,
have a good weekend and Monday. I'll get website updated. Have a look at chapter four.
have a good weekend and Monday. I'll get website updated. Have a look at chapter four.

Responses

What important concept or perspective did you encounter today?

The most important thing that I learned today is how to work with animations and how to manipulate interaction to produce different colors to geometrical objects.
It was good to know how to know when user interacts with the application
Today I learnt about User interaction with system( original and modern approach), input rectangles code and learnt about rotation of triangles code.
The most important thing that I learned was original and modern approach to how user interact with the application plus how to rotate a triangle around it's center in three-day steps.
Today the code was improved was improved as compared to the last lecture. I got to know about users interaction with the help of callbacks.
the most important thing which I learned today was how to rotate the Sierpinski triangle , how to trace the axis point for that and then I also tried to do it in 3D which didn't work because it will have another formula.
The original approach of using loop inside of polling fir interaction.
all about vertexes, creating triangles and filling colours

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

When trying to rotate the 2D Triangle it was so interesting for me and I was wondering how we can rotate the 3D sierpensli Triangle. I should be fascinating too.
Modern approach for interaction, I was about to fill "listener" in the blanket but the answer was "callback", because I was doing mobile development and normally have been using events and listener. Furthermore, rotating the triangle based on different xis is quit interesting.

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