Mtg 7/23: Wed-25-Sep-2024

Outline for Today

Animation and Interaction

Administration

Response to Responses

Responses are to be submitted by noon the following day. Thoughtful is not just a list of topics discussed

Today

my apologies for not having a quiz before today’s meeting
more about critical fusion frequency – the frequency at which a flickering light appears steady to the average human observer
- 60 fps
- Video 30fps or 60 fields per second (even and odd lines)
- Film 24fps but can appear as 48fps or 72fps with double or triple-bladed shutter to show each frame 2 or 3 times
- higher than 12fps perceived as motion
Assignment 1
- Do you need to use the colours that I have used? You can choose your own colours — think about what information can be conveyed with your colour choices.
- is it ok all the subdivided triangles to be different random colours? Look at how the recursive calls to subdivide the triangle are made and see if something can be done differently there
- The perturbation of the midpoints only applies to the recursive subdivision method
Window events resize
Gesture and touch MSDN
Picking (selecting an object onscreen) is difficult for several reasons - can draw simpler version offscreen and test for colours – that comes up in a later chapter
https://www.interactivecomputergraphics.com/8E/Code/03/cad1.html
https://www.interactivecomputergraphics.com/8E/Code/03/cad2.html

For Next Meeting

Wiki

Link to the UR Courses wiki page for this meeting

Media

Transcript

Audio Transcript

Okay,
welcome everybody to our seventh meeting of the semester
and a Happy Wednesday. Seems like a quite a nice day outside,
isn't it last For a while you
so Do child one through nine
plus topics left from major challenges
to Okay?
I think I have the thing, everything set up properly
today, not like last day.
Has anyone noticed a useful
page in the today page? Has anyone tried that for
themselves? Okay? Are things laid out okay between your
courses and my website? Okay? I
Yeah, okay, so
take your own attendance. So response to responses. So I had
a request. I realized I didn't publish this immediately from
last day, but this is the same comment I had from last day.
There was a question about extending the submission time
for responses so it would be closer to the class time. The
idea is that I get a chance to look at them beforehand. I so
that's why it's noon the next day. So I haven't been deducting
marks, and I won't, I won't revisit the ones that have been
submitted already, but starting next week, I will be more I look
for a bit more detail than some more of a thoughtful response,
okay,
and doesn't have to be just the concept that we're Dealing with.
Could be a question or something about which you'd like to learn
more, no more. So it's seven marks for the semester. So I'm
going to ask you to be a little bit more engaged in that. Okay.
Does that seem alright?
Okay, so my apologies, my apologies for not having a quiz
for before today's meeting. So commented with the critical
fusion frequency
so I've linked a couple sources from
Wikipedia, which I think is a good place to start, but maybe
not a good place to finish. When
you're looking for things on the web, I
it anyway.
So one thing to think about is
the flicker frequency, the
frequency at which a flickering light appears to be static to
the average human observer.
So
if we use that definition, we might say between 60 and 90
frames per second would be required.
So how does it relate to the film and video I mentioned
yesterday? I
So video
is
30 frames per second or 29 North American video, where the
broadcast standard is NTSC is just shy of 30 frames per
second, but the way we get a higher refresh rate, as I
mentioned this before, we divide the frames into fields. So the
even lines are one field and the odd lines are another field. So
that gives us 60 fields per second. So it seems like early
updating of 30 frames per second, but we're using a trick
to add some give the impression of 60 frames per second, and
then with film. And I didn't mention this before, for so 24
shot at 24 frames per second, but with a double bladed or a
triple bladed shutter, so we can flash the same image, same
frame, two or three times. So it gives the appearance of 48 or 72
frames per second.
So on the other side of things, if we're lower than if we have
more than 12 frames per second, I can be perceived as motion. So
it's not necessarily smooth motion, but we get the
impression of motion.
So less than 12 we can perceive individual images. You
so generally, the faster the better, I guess.
So when we see
both fields and frames and
a few years ago, talked about 1080 as A resolution, and then
say 1080 i or 1080 he.
Do you know what those with the IEP referred to? Yeah, this is
interlaced and this is
and this is
progressive. Anyway, so it's a bit more information about
what we need to get
sense of motion,
any questions or comments? I
Okay, so we had some questions About asylum one. So
thank you that
so the short answer to Can I choose, can you choose your own
colors
is yes, and think about how the colors convey some meaning about
the structure of The of The gasket I
so if we have
An array of nine colors.
I won't say what They are. I
So, 012345678,
and we've saved one act anyway, I could have done the dot, dot,
dot a bit sooner.
Okay, so we have an array of nine colors. How can we use the
transformation, the last two transformations for the last two
subdivisions or vertices, chosen depending on how you describe it
in your code. How can we use that information to come up with
in come up with indices into the color array? I
Does that make sense the question,
or if you have nine, so is the nine colors clear enough that
we're using that we're going to use nine colors because we have
three transformations times three transformations, three
times three is nine.
Okay, we're Yeah,
so how likely it pick colors?
This is talk about some ideas here.
Do my samples make sense? Let me look at let me show those
samples again. I
Okay, so the subdivision one is similar same colors i
Who doesn't want to talk in a computer science class? I
so if we have, let's say, a number between the
so I don't want to do the assignment in class, but I don't
want To leave you hung up
with a D thing. I
So let's say I
so We
have three transformations. How might we number them?
Say for the last transformation, we're going to assign a number
we're
would three be a Number we use for the
described transformation, or four I
so we could use one, two and three, and we can
do the same second transformation,
second to last transformation, one, two and three,
so how do we convert that into an index into the array, or a
it. Okay, so let's say we
so let's Call this say L
and 2l to
So instead of think of
a nice reach, each transfer, we can think of three
transformations. So we're dealing with base three numbers.
So we can put in L plus and then three times 2l.
So if we choose, if we have one, is a transformation for both of
them.
I, so our first color used is from position four and
then, if we say transformation three,
if we use three for both of them,
three times Three plus plus three is nine plus three equals
12.
So that'll give us some undefined value and
so what if we think about binary digits? Do we start with one?
Binary digits or bits have value zero or one, and we start with
zero because, well, because there's two values per bit, so a
bit can be either off or zero or one, it's on.
So we start with zero when we're dealing with arrays, because
because zero is the first position in the array, is the
star of the array with No offset.
Am I telling you new things or
you're just not going to participate today.
Okay? So if we use 123,
we're we're not getting in this season the array. So what, how
could we change this? What numbers can we use to represent
the three transformations, 01,
and two? Yeah. He.
So then zero if we have zero here. So
three times two plus two equals six plus two equals
eight. So what choice do we have in country and indices for our
colors,
so It can do
three times 2l
plus L or a,
so we can flip them around.
So that make sense?
Any other possibilities? Any questions about that? I
So another question is, Is it okay if all the subdivided
triangles are different random colors or different selections
of of of the nine colors we have in our table. Has anyone
looked at gasket tube and
tried to color it and make sense of the
structure there. So,
so the hint about the subdivision coloring the
look at how so
so what do we Want to have?
So we start with the triangle, and
and we'd like to call it again with three triangles.
Just imagine that's the same size. Let me try again. You
and each time we divide this again, let's say we take the
first prime, the first subdivided, and
so you want,
we want to pass the triangles. I'm going to pass. Make sure
we're passing the little triangles as we recurse on the
subdivision. Does that make sense? Okay, I'm
so the midpoint perturbation stuff is only About who deals
with the curses of the vision only.
So the idea is, you find the midpoint and
then we move it a bit, not a whole lot.
It's not too bad, but something closer, and
then we're passing that point to this triangle, and this
triangle,
so the top of one triangle is kind of to the base of the other
one.
Does that make sense? Okay, I'm
any other questions or comments do
so I want to talk about some other things in chapter three.
So about window resize events in particular, and
this is so it's in the text, but it's
also on the Mozilla, Mozilla developer network. I
so There's some examples here. I
Okay, resize the browser window. Let's try that.
So for drawing up, if we have a canvas in the window, then we
can make sure that we're resizing it to be if we have a
square canvas
or other shape,
then We can adjust it to fit in the window.
Okay? It.
There's also the touch interface, touch events. So if
we have a touch screen, we can have our where we're touching
the screen with our finger or a stylus or other input device
like that you
How this isn't gonna help us,
since this isn't a touch screen
anyway, you can run this on you can access this on your phones
or tablets. And so it gives us another option for creating
events or interacting with a system you
I didn't get something else in
here. I wanted to
Anyway, that's all right. I
So Picking you want to interact with the models displayed On the
screen, to select some part of it i
It seemed easier, hard to do. I gave a hint to My feeling on
that. I so It's difficult because we can't undo the things
we put together in the pipeline with the shaders and everything.
If you think about the transformations being
reversible, sense it can be the inverse operation.
But what gets into the frame buffer is it's hard
to deal. It's hard to interact with as we get Especially being
obligated to
shading projections,
etc. And so
I'm it's mentioned here in the chapter about interaction
because it's important way to interact with it's important
interaction capability for computer graphics. So a way we
can Do this in web channel.
Secondary, draw something wall. So instead of ones being colors
between vertices, we can have not a solid color face. Let's
think about a cube. So if we color, if we predict the colors
of the vertices, then we're going to be integrated on each
face. So we can redraw the cube, making each face a solid color,
and then you can access the colors.
You can select the point on the screen and where that's
selecting can be the color from the off screen, butter to
determine the trace of that selected. So we're going to deal
with that when we talk about frame buffers in a later
chapter. But I wanted to highlight it here as an
interaction technique we're
So then they also talk about
building model on the screen interactively. So here's this is
CAD one, the CAD one program from the text to start with
black.
We can add polygons by specifying one corner or one,
pardon me, rectangles, but with one corner
and the other corner, and then we can select different colors
and
so we could keep doing that. I'm not sure where the limit is set
to be. I
so can you see where the mouse is and where I'm clicking?
I so it's,
there's an issue here about getting most point amongst
coordinates.
It's the code is designed to
work when the when the window is in the top left corner, so that
works like we'd expect it to work, but if I scroll it down a
little bit, and I'm going to try and match this red rectangle.
It has an account for the difference in position of the
window. I
Let's look at the source code here. I
so here we have number of positions, the maximum. So
we're setting the number of position, max number positions
as three times the maximum triangles. So we're
so we're going to store three or 600 positions at most,
and because we have, I
Oh, yeah, here it is, okay.
So eight times max number of positions. So what does that
give us? So why is it eight Times max number of positions? I
so we're in 2d so we have x and y values for each position, two
times eight, or pardon me, two times four is eight. So a float
is four bytes, and two of them in eight bytes. So that's
that's why we're allocating out of space. We're
okay, so that gives us a vertex buffer, and
then we're going and
going to connect the a position. So let's look at the shader
Next. I should do
this differently. You.
So the vertex shader is just taking is drawing the position
that we get from the a position attribute variable, and taking
this vertex color, the attribute color, and In the fragment
shader, we're just coloring based on The
the fragment color is assigned from vertex color we
Yes, maximum position,
so why Is it 16
times
maximum positions for the color buffer, i
i, so Have four vertices for our rectangles, and we want To store
the same color and for each vertex, We
so we need
More time As far as
Okay, so next piece in this Code is
so we get the menu so
here's the menu. So do black, red, yellow, screen, blue, cyan,
magenta, green, blue, magenta, cyan. Pardon me. You.
Okay,
so mouse down, then we have we're working with the vertex
buffer and
so we get
the two points From
we're getting the four vertices for the rectangle.
So we get t zero and t2 and then we make t1 and t3 by flipping
the input already. So that's how we get we're the
rectangle, so we
now get these points and then input
the so let's imagine that's rectangle, so you input two
corners, and then you get the other two by flipping them
around. So then we're putting that data into the ray buffer
for the vertices.
And I shouldn't
just point at my screen. I should use the mouse. So here
we're doing the I we're inputting the value so that
we've just created into the into the vertex buffer, so we have
space for 200 points so logs, we don't exceed that, we'll be
fine.
So we do, we loop through each of these four vertices and put
in the data from that vertex and
and then with the colors.
So we're getting the same color into four different places in
the
into the color buffer, and then we render. And for rendering, we
draw the triangle. Try the triangle fan.
So we go up
from zero to the number of indices we have stepping by
four. So each four positions gives us a new triangle fan that
represents a rectangle.
Does that make sense.
CAD program,
which doesn't seem to be working, supposed to Drop
polygons.
There's an interface design issue for you. I
Okay, so let's look At this One you
so here we keep we're using polygons to keep track of the
number of distinct polygons we have, and then we're drawing,
when we're rendering it, we're drawing each of those polygons
as a triangle fan. And
we give the start index of the
of the triangle fan in the in the above and the positions, and
then we look up for how many triangles To draw in that fan.
How does that seem? I it.
So if we try and draw an hourglass with this, we're not
going to be successful. That's what I've tried to do at least
these two if
so question to think about is, how do we get
more more involved shapes.
Is it going to
what do we have to do to be able to create more involved shapes?
I
that was even very musical.
Okay, let's look at these and these other pieces of code
at the rotating square already. Let's try to rotate square
three. Here we have a slide in.
It so I can change direction, but I can't change the speed
anymore, unless I'm doing
now it's working,
but still it doesn't update this slider. So that would be a good
exercise to think about, how do we keep all the interaction mode
the different input modes in sync here for
here. We're just imprinting points. I
here we're putting a pledge more points and
and then it goes away, because we have more points than we know
what to do within the program. And
any questions? So there is a question mark. I
Let's try once more.
A so question about how to update the sliders so we get
input to be reflected over the different devices. So for
changing speed, one way should be reflected
in all the different
other ways we have to control the speed.
And then the mouse input,
because if we move this out of the corner, we're not going to
get the proper coordinates. So how do we deal with the window?
The canvases that aren't that appear anywhere in the window?
You
here we're generating. I
a triangle, a triangle strip, I believe, and we're coloring
based on the different vertices.
Any anyway, we're out of time now.
Any questions or concerns about the assignment
before we
have office hour tomorrow as well? Description?
Yeah, sign up page that
description boxes. Is that for
us? Okay, so
the calculator just shows you how the marker is going to be
evaluating it. So you'll get comments that are generated by
that calculator. Okay,
thanks for doing.
Have a good weekend.
Thanks.
So I go to office hours tomorrow, and I'll be around if
you have questions for me,
and be reachable if you have questions
and be reachable if you have questions

Responses

What important concept or perspective did you encounter today?

An important concept I learned during the meeting was how to apply numbers to each transformation in the sierpinski gasket to ensure each transformation is colored correctly. It also gives me an idea of how I might be able to apply the appropriate colors for my first assignment.
I believe that touch events are an important concepts to computer graphics nowadays. As brought up in class, phones are the most common use of touch input. However follow ups worth disucssing could be touchscreen laptops and drawing tablets, or even discuss the Nintendo DS/3DS with its bottom touch screen that was highly used in alot of games.
Picking and Colors in Assignment 1
critical fusion frequency
Why it is important to use (16 * maximum positions) and (8 * maximum positions) and where we are meant to use them
i loved the concept of 24fps can appear as 48fps or 72fps cz i am involved a lot in video production. I would love to know about it in more detail and ill do some research as well. Ill ask if any question arises..
We talked about fields and frames (interlaced and progressive), and picking the part on the display.
Picking and colours in Assignment 1
Critical Fusion Frequency and how it affects other things, discussed things about Assignment, Picking and how can it be done using WebGL, window and touch events
How we can use buffers to draw objects and track mouse positions
The idea involves filling 9 colors when performing the last two transformations for the assignment. Picking, or selecting an object, can be tricky. WebGL draws a simpler version offscreen, assigns each object a unique color, and then tests the colors to identify the selected object.
I did not attend the class today due to some reason
The basic of the codi webgl project

Was there anything today that was difficult to understand?

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

Site built: 2025-06-20 12:45 -0600 • Give feedback about page