Mtg 6/23: Mon-23-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

For Next Meeting

Wiki

Link to the UR Courses wiki page for this meeting

Media

Transcript

Audio Transcript

  • Okay, it's fourth. It's not fourth period time for the
  • thanks
  • for that true excitement. So it's our sixth meeting.
  • This is Chapter
  • Three
  • about animation in the
  • direction, oh,
  • I wondered why the scooter was blank. I didn't plug it into the
  • HDMI. I
  • and I didn't save the changes. I
  • Yes, let me do that.
  • It looks like It's been saved. I
  • well, I put
  • it In the wrong me. I
  • Oh, yes, I did.
  • I'll fix that shortly. Anyway, assignment, one questions,
  • that's the first time I made that. I guess it's the first
  • time for everything. Yeah, how much of a
  • code from examining the textbook Are we allowed to use? We
  • allowed
  • to use, like we like boilerplate,
  • everything, textbook and just build right
  • on top of it? Yes. So
  • you should make comments and make it be clear about what
  • you're using from the textbook code, but
  • I'm not going to make you pretend to have come up with
  • things on your own, because we're going to use the textbook
  • code
  • as our examples for how to
  • do things,
  • It's not the only way to do it, and some of the code samples are
  • a little bit dated, like var for example, isn't a lot. That is a
  • better way to handle things, handle variable declarations and
  • but
  • there's enough in the assignment for you to add on yourselves
  • that you can take what You can take the sample of the starting
  • point And
  • did you see my additions to the assignment?
  • So here's a generic here's the Genesis sequence from Star Trek,
  • Wrath of Khan. That's not it. And and I didn't realize that
  • the Wrath of Khan came up before I graduated high school.
  • No thanks. I
  • so here we go.
  • Let me get the audio for you. I
  • Okay, that should do it. I
  • instantaneously causing what we call the Genesis effect. Matter
  • is reorganized with life generally. Tip of living
  • breathing time
  • came. Capable of sustaining whatever life forms we see, that
  • the reforming what we celebrate here represents the nearest
  • traction of the chances potential. Should the Federation
  • wish to fund these experiments to their logic when we consider
  • the cosmic problems of population and food supply. The
  • usefulness of this process becomes clear. This includes
  • early there are
  • three simple changes. That's how all fire stations make. Number
  • one, you
  • have to start treating you
  • do you want to share you stopped at where it said you go to
  • surgery. Oh, great. Yeah. I
  • most days I'm drinking more water and maybe more coffee.
  • You might be drinking other things anyway You Yeah,
  • just hide that video screen.
  • I So would you see the mountains that popped up? So the way
  • they're using the triangle subdivision, perturbing the the
  • midpoints of the triangles, we're taking a surface or a
  • height field, and then we're displacing it in, well, if we
  • think of it in x and y, and Then we're displacing it in Z to
  • create the mountains, and we fly over. But if we think about z in
  • the distance, then we can think of it as the x said plane. And
  • we're changing y and
  • so if you look closely enough, you can see there are some
  • straight lines, some scenes in the in the mountains that don't
  • look quite so natural. But for 1982 this was a big thing.
  • Anyway, that's the reference I made to the Wrath of Khan and
  • the assignments. So I have added two images the samples of output
  • here is with the random approach. So the idea is the
  • three triangles in this if three sub triangles in this lower left
  • triangle are colored red,
  • a little more pink and a little more,
  • just a hint of Red in the white,
  • and then we have green the fully saturated green, less saturated
  • green, and this is a white with a hint of green and then blue at
  • the top. Does that make sense? I
  • Okay, so that's,
  • that's the sample for the random one. Here's the recursive
  • subdivision sample. So it's the same colors, red, green and blue
  • in the lower right, lower left corners of the sub triangles and
  • then the other versions.
  • So a difference between the subdivision approach and the
  • random one is, if we did more subdivisions, we could see the
  • structure repeated at a finer level, so we would see the same
  • nine triangles
  • in to subdivide each of these triangles, for example, does
  • that make sense? So the coloring would be preserved within the
  • nine triangles, and we can generate to a greater love of
  • detail. So in the random case, we're just going to see those
  • nine colors,
  • because there's no we don't have a information like we do in the
  • subdivision case, in the recursive subdivision case. Does
  • that make sense? Okay, any, Any other questions? Let me know. I
  • Okay, so there's a link for attendance for today.
  • So I mentioned tints and tones the other day. So painters
  • terminal eye for mixing colors. If you take a pure color and mix
  • it with white, that's a tint. If you mix the pure color with
  • gray, that's a tone, and if you mix it with black, then you get
  • a shade. And that's that's in the Wikipedia reference. In the
  • Next line, I
  • so the title of the article is not more detailed about color,
  • but it's HSV and HSL. So those are some transformations we can
  • use on RGB to make them a little bit more intuitive to pick
  • colors. But it's an interesting article, if you article, if you
  • want to look at it, that sun can be a focus of our, of our
  • efforts in class. But there's, there's lots of issues about
  • creating a perceptually base colors, color ball that we can
  • use to select colors and
  • so we talked about they're presented as perceptually based,
  • but they're not exactly accurate In all the perceptual parameters
  • and
  • so I want to get into chapter Three. I
  • Let's try rotating square One and
  • let's stop that.
  • Okay, Let me introduce Some ideas. First. I
  • I didn't turn out too Bad.
  • Does it look like a circle.
  • Now that doesn't look squared, but Let's imagine that It is a
  • So cosine, if we think of the angle at zero, cosine of zero is
  • one, sine of zero is zero. So
  • so you get minus One. So
  • you have a comment, okay,
  • so for interaction, we're dealing With the DOM and we're
  • setting up callback functions, event listeners for different
  • things that happen interaction with the web browser window, and
  • then we use that to trigger events. So we define a callback
  • for each event in the graphic system the callbacks is executed
  • when the event occurs. So
  • we can see
  • in our browser, we're interacting with the web server,
  • and then on the local computer, we have the JavaScript engine,
  • and our CPU and GPU, and then the canvas. And inside the
  • associated with the canvas is the frame buffer. That's the GL
  • context,
  • so we have the HTML file that has describes the look of the
  • page, and it does contain the shaders in our cases, in the
  • cases we're looking at, we're putting The shaders inside the
  • HTML file with script tags, and then it loads the JavaScript
  • files that are needed or that are specified.
  • So in our JavaScript files, we have things in init and render,
  • and those two functions are controlling the interaction with
  • the soft all the graphics that are going to go on.
  • So if we don't call init, nothing's going to happen. So
  • then we use the onload event to start the init, and then The
  • init calls render, and then it keeps going. And
  • so we can generate points, location of the vertices by
  • evaluating the angles. I
  • I didn't just labeling makes sense with this diagram, but
  • I they're different
  • here, So we can cosine and sine minus sine and cosine. Minus
  • cos
  • minus sine of
  • so we can continue to do this. We could just calculate the
  • vertices as we're changing The angle, and we can substitute the
  • buffer data and
  • does that seem like a good approach? It's straightforward,
  • but are we using the capabilities of our graphics
  • processing unit? I
  • so we have the vertices in the buffer. How about can transform
  • the vertices in The GPU and
  • so let's just Send
  • the angle of rotation and
  • so uniform variable isn't changing isn't linked to
  • vertices or other things. So we can still change it, but it's
  • not associated with each vertex. For example, I
  • So
  • like we've done with the position attributes, we get a
  • location for that uniform angle input,
  • how do we indicate or help ourselves remember that it's a
  • uniform variable.
  • Yeah, we put u in front of the variable name.
  • So in the render function, we clear the color bit, we
  • increment theta by point 01,
  • then we set the value of the theta, theta location to, excuse
  • me, please, to that variable. We make that connection. Then we
  • draw the triangles and render.
  • Any issues there? I
  • maybe the render is a problem that we're calling render inside
  • the render function, we might end up with a stack overflow
  • condition, because we can request the renders faster than
  • we can create The images. So the new addition is request
  • animation frame for
  • so how Can we conceptualize creating? Frames in this
  • animation. I
  • Maybe that's not A good question. I
  • so If we have two sequential frames, how do we make the
  • animation smooth? It might not take
  • very much time for us to draw a square, a triangle, stripper
  • forward a seats and
  • much more complicated, And we're trying to make them appear
  • smoothly on the
  • comment,
  • no, okay, do
  • so let's say we have two frames, and we say, request animation
  • frame, and
  • we're going from one to two. What's the condition we have for
  • frame two? Before we switch to it has to be done Dry. Yeah, I
  • want to have it finished drying. I'm
  • so in OpenGL, we have a command called swap buffers. So we have
  • a
  • so When we want to have a
  • smoothly rotating square or other animated model.
  • What? What do we need? I
  • let me put that other way, if we want a smoothly animated
  • graphic, can we wait an arbitrary amount of time for the
  • great to finish drawing. Say it takes five minutes. Are you
  • going to get an Animation?
  • Not in Real Time. I
  • so in a traditional film we take, we have 24 frames per
  • second, and that I
  • that is a fairly,
  • fairly good animation. It's
  • CMT, North American broadcasting standard is three frames per
  • second. The
  • modular displays.
  • Senator Brandon, Senator 72 hertz per modern display.
  • What 60 Hertz to like 122,
  • 44 depending on the
  • we do animation. We get some of them. You may see the frames per
  • second. So for refreshing, 120 times a second. That would be
  • very smooth animation, if you could do 120, frames per second.
  • You
  • so there is a term critical fusion frequency you
  • and that's much lower than the top speed that we can get out of
  • our GPU. I
  • So should we try? Let's take a look at that rotating square
  • again. Let's
  • finish the so
  • that's our render function. So we've added the request
  • animation frame to make sure we don't stop workflow condition.
  • So this is the vertex shader.
  • So as input, we
  • have the four position vector eight position which is a vertex
  • attribute we've set up in the JavaScript because it started in
  • A and then we're dealing with the uniform theta and n. So
  • we're calculating the new position x and y.
  • So we take minus theta minus u, theta times a position x, plus
  • cos theta times a position y, to get the x coordinate.
  • And then we do a similar calculation for the new y
  • coordinate, the z coordinate is set to zero and W set to one.
  • We'll talk about W shortly. The
  • it so the buffer swap is done either with a request animation
  • frame, or we can set up an interval timer.
  • So we can set an interval timer for the render function and
  • interval interval greater than zero, so we don't run into the
  • Stack Overflow problem. Again, we
  • so here we have set timeout function and the function we
  • were doing for the timeout is the body of the render, so we
  • have the request animation, frame, Clear the clear the
  • screen, increment, U, theta, and draw the strip, and the interval
  • is 100 milliseconds, so 1/10 of a second will trigger A new
  • grand tree and
  • Okay, let's look At the
  • code. Okay,
  • so We have a vertex here. We're
  • degree. So we're getting sine and cosine of d theta. And this
  • is
  • this, our
  • transformation for the X and Y take minus sign u theta times a
  • position y plus cosine u theta times a partition x, then for so
  • that's the new x. The new y is sine u theta times x to the x
  • position and cosine u theta times the y position, so that
  • does what was advertised in the slide. And then F color fragment
  • color is going to be red. So let's
  • take a look at how that plays
  • out in JavaScript. So this is the onload to make sure the init
  • gets called. So we're getting the Canvas ID by using the dog
  • and then getting a contact with the count from the campus so
  • that we can use GL two, we have a GL two set up the display. So
  • here are the vertices. So the first section here is loading
  • the vertices into the ray buffer so,
  • so we have the square 01 minus 10100, minus one. So that's
  • centered at the origin.
  • Minus Zero. I
  • 01, minus 101,
  • I must need some more coffee. It's not a square, it's a
  • diamond. Anyone remember the shreves commercials from a few
  • years ago? I
  • it's basically shreddings are squares, but they turned them on
  • the side, and then, oh, they're diamonds.
  • Okay, anyway, so that was my struggle with doing math on
  • the board for the day, I think.
  • So we connect, you load the vertices, so that's our starting
  • position, and then we connect the buffer with the eight
  • position variable in the shaders.
  • And then we're also getting we're making the connection with
  • new data,
  • So then the rendering is as in the slide. So
  • so we have rotating square so that's set up so that we're
  • making the most of the GPU. We're just we're just sending
  • four coordinates for the vertices of the square, and then
  • we're doing a transformation in the shaders on the GPU,
  • so we're Not having to send a great deal of information you
  • Okay, so the controls didn't show up because I had zoomed out
  • too much. Zoomed in too much. So then we have the ability.
  • I'm not sure why he has two left to Do the same thing. He
  • Spin faster and slower and
  • Okay, so we have a couple controls There. Let's look at
  • how we set those up.
  • So in the HTML file we have the
  • the button ID called direction, change the rotation direction,
  • and then we have a select control. So zero, an input of
  • zero gives us change of direction. One makes spin
  • faster. Two controls Spin decreases the speed of spinning.
  • I
  • Okay, so you we've named these so we can access them in the
  • JavaScript you
  • so we can see that
  • we have a
  • so we're initializing
  • the event handler for the direction button, so we get the
  • album via key and we see On Click function. So we're
  • changing the direction. We're negating the previous version
  • value for the direction, so it's either zero or one.
  • Then the controls once you click on the controls, we have an
  • event handler.
  • So, case zero is direction changes, case one for
  • so this is a little confusing, I think, because so we can click
  • on so the first one is clicking on a display
  • and 01, and two, and then on key down, switching through, using
  • one, two and 3s case to enter. So anyone
  • else think that's a little confusing? I mean, you don't see
  • the 01, and two, I think it's so you can use your keyboard as
  • well as just clicking on it. Yeah, I'm just talking about the
  • values.
  • So the first one, we're going 01, and two, and then we've
  • changed to the white. Then the key values are one, two and
  • three. There's nothing stopping this, using 01, and two as a
  • key. Key presses and
  • I think that would trip me up at one point, when I'm looking at
  • the code, I see 01, and two, one place night, thinking that's the
  • values that I want. That's what I want to input. Anyone else
  • think that's a possible opportunity for problems? Okay?
  • So we can body that's okay. Do
  • that still counts for participation anyway. I think
  • we're at the end of the day today, and I'm going to make a
  • note of everybody who, no, I'm not any questions or concerns
  • from today? Yeah, What
  • is The critical
  • number?
  • I'm Just curious.

Responses

What important concept or perspective did you encounter today?

  • Various animation framerates
  • We learned about the different types of events that can be used to change something about the code in yyesterdays class it was the different speeds and ways that we could spin the square and how we could apply those to other functionalities
  • In this class, I learned about how complex it is to create an animation frame by frame. I used to think each frame would be displayed one at a time all at once, but today I learned that there is a delay in time before the next frame occurs.
  • Some important concepts I encountered in the last meeting were how to rotate a square, what requestAnimationFrame does, the different framerates for animation in film and for modern displays, what critical fusion frequency is, and then we looked at the code for rotatingsquare1 and rotatingsquare2.
  • I think kthe most important concept was the introduction of requestAnimationFrame() so that we can achieve a consistent and smooth framerate.
  • Interaction + Animation
  • Recursion
  • Critical Fusion Frequency and the concept of fps and hz for displays.
  • We learned how to create a rotating square. In addition, introducing the requestAnimationFrame to avoid stack overflow and make the smooth animation.
  • Animations
  • Interaction
  • Tints/Tones/Shades , RequestAnimationFrame function, Rotating square code and approach, use of double buffers, Frame rates of animations, Critical Fusion Frequency
  • The key concept for animating a rotating square involves using a uniform variable theta to control the square’s rotation and using requestAnimationFrame to ensure smooth synchronization of the animation with the browser's refresh rate.
  • I learned about the rotating square programm which applies a constant rotation through an animation loop.

Was there anything today that was difficult to understand?

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

      Site built: 2024-10-28 00:18 -0600  •  Give feedback about page