- Happy Wednesday
- Attendance
- Class calendar for today
- Upcoming events

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

- 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

- Read Chapter 4
- Submit your response to this meeting before noon tomorrow
- Take the quiz before the start of our next meeting

Link to the UR Courses wiki page for this meeting

- 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

- 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