Mtg 4/25: Wed-13-Sep-2023

Outline for Today

Wiki

Link to the UR Courses wiki page for this meeting

Media

Transcript

Audio Transcript

All right
just want to play an update to the website
now people
it's interesting what comes up on this transcription tool? Because I think the last few minutes of the class yesterday there were some people talking in the hallway outside and pick that up and I picked all that up
what's the limitation on photo processing like what's still got doesn't have a minute god, that's true how long it can we work?
No, it can. Wow I think it resets after three hours or something. So it's it's quite impressive that way.
Class, I was using that notion and
charge you to basically use the transcription to make notes. But then hit a cap on the number of minutes that it could use but I did not have auto I was using the inbuilt API that open AI provides for transcription. But it hit the gap and then I couldn't
create notes using it.
So this is $50 a year for the plan that I have. So it's not too bad.
gonna love it.
year
using
Git get them
Okay, so how's everyone doing today? That's good
so another Wednesday is our third Wednesday, already.
Oh, I didn't put my zero remember my name
Okay, so happy Wednesday or third Wednesday of semester so far. So this is the attendance. That's your responsibility to record your attendance. That's our class calendar for today to give you some reminders and activities upcoming events. There aren't really any, I think
haven't been the assignment and here's a new link. Check your grades so you can see.
So I've been giving grades for the responses. So keep track of that. If you notice anything strange It looked okay to me but if you see anything you can report before did in class discussions or in the participation for
so I put a link here. So looking at the responses from the last day it's a comment about JPEG so I looked it up and I wasn't quite on. I said picture was photographic. Some Joint Photographic Experts Group so now remember, if you're going to wall people with trivia, this is the correct answer. And it's a link to the Wikipedia page. So JPEG is a lossy image compression format and discard some information that makes minor contributions to the image quality
and I can see that I'm now that I'm looking at the website, I see that
my typing wasn't quite as accurate as or is it what is accurate as my suggestion for the acronym yesterday? I've got a few extra letters here.
So again, we're talking about pixels as discrete samples. We sample continuous phenomena in order to reconstruct or approximate the phenomena.
So let's say we have a curve like that. We want to draw on the screen
okay maybe I didn't want to draw such a big curve. Let's let's superimpose.
Let's try and imagine these are straight lines. And they might even they might even be squares making a nice grid pattern.
Okay, now if we sample the center of the square, we mark off so this is the region we're going to we're going to associate with this pixel. So which layer we're going to choose to represent the underlying phenomena. So this one that's pretty close in sense, maybe we excuse me.
Oh, pick that one. And maybe this is near the center to some will say
so we're not going to pick we're not gonna add anything to the curve from this one. Because we don't see the curve and we're at the point where we're sampling.
Maybe here we're saying that we're close given my the accuracy of my drawing.
You so all the places where the curve intersects the grid we have let's see 1-234-567-8910 1112 1314 1516 1718 1920 we mate we got for those. So that the curve that we're drawing, that's the continuous thing. So let me know if this makes sense. So we have this continuous thing is generating data that we can plot like that. But then when it comes to drawing it on the screen, the screen has a finite resolution and we're going to divide the thing that you're trying to represent
then we're going to assign bits of the phenomena to different grid cells. So the sample that we associated with the grid cell will become the pixel value. So there are more involved ways to do samples. We might not just take the naive approach and pick the point in the middle we might try and get a sense of what what's going on in the whole region. But the idea is that we're still getting one value.
Sound makes sense.
So when we have an image stored, if we have an array of pixels stored for an image, we can think of that as we might say, a bitmap. So we have a JPEG image or a png for image format. We have a particular resolution and we're restoring that resolution. So on me zoom in or zoom. Zoom out isn't so much a problem, because it will look better. It might look better or smoother. But if we zoom in, then we'll see the artifacts of the samples are the pixels.
So the alternative is to describe things in terms of the mathematical representation. So we might call that a vector format. Excuse me. SVG is a common Well, I'm not sure if it's common. I've heard that SVG functionality is being subsumed by CSS. So
anyway, so we know SVG Scalable Vector Graphics.
If I got that, right. Um, I'm wearing now
so we think about
it. In this day and age, all our displays are bitmapped that we're dealing with the raster, with maybe a very high resolution retina displays or packing in twice as many pixels in each dimension.
So before that, maybe we're hilarious the way computer graphics started.
I didn't write on the board
are having our meeting for today but maybe that's clear from context.
When you see that picture pop up under meeting for make the connection.
So at first so these things from the side they look
so to draw something on this display. send commands to position the electron gun
and that would send a B electrons and excite the phosphorus which would cause a glow on the screen. So if we just did that once that would come on, and then it would fade away because it's not being constantly stimulated.
So are you using the CRT
so we couldn't draw that squiggly line but again, the problem is that we have to refresh it.
Think I'm doing better size wise but neatness is still a challenge
so we talked about last day that film was first 24 frames per second. So modern displays might be 60 hertz 72 hertz or 144. So that means
we can make things more nuanced. Sometimes that comes across as maybe a bit uncanny when the pictures when we have such a high refresh rate
Okay, so first vector displays you can draw what we liked, but we had to be smart about it. So that we could keep it refreshed. before it went away.
So how can we take a vector display where we can draw anywhere? How can we make that into a raster display or a bitmap display?
Think there's if you look at rastering the dictionary see rake as a root word for it
back checking out if you like so how what kind of approach could we take so that instead of just being able to draw anywhere we have?
We have more of a bitmap display
CRT used to go line by line rows. Start from the top left and then the next row and so on.
Yes back to the bottom. Yeah, so that's one thing we could enforce that the electron gun is not going wherever starts at the top left and goes to the bottom right. And that's why we have that idea of a regular regular rose going down the screen
so there's an another piece that we'd have between the phosphorus and the electron gun deflect.
Yes, I think that's the same mechanism we use to aim the gun in a vector display. But we have a shadow mask so that we're not just drawing anywhere along those lines. The idea is a beam would have to
all right
so we have a shadow masks so that they would be the holes corresponding to the resolution. And they
I'm not sure what VT 100 was for resolution and we'd have 80 by 2480 columns by 24 lines and then some number of dots for each character space so.
Yeah, we can scan from top to bottom. You can put in place the shutter masks to give us more precision in terms of where the phosphor gets excited. And emits light. So what's an advantage from between drawing a vector shape was smooth lines compared to drawing when where we're scanning from top to bottom
so it makes sense
your refresh rate
so I would say let's think about something
try and draw another picture.
Okay. So let's say we do that on a vector display. What do we notice about the pattern that we're using to draw that image
going over some of the same spots more frequently we have to
so we're not being efficient in the way that we're stimulating or we're using the time we have to refresh the screen
so if instead
I apologize for this.
I'm just trying to get them to match up a little
bit. Can you see the flower and this one? Or, or did you think that was a flower to begin with? Yes. So the idea is instead of having to trace everything, and it's such a nice feature that we can trace everything with smooth lines. But here if we reformulate the image in terms of, of pixels need to be turned on. At different times, then we can go from top to bottom and scan everything and that means everything is refreshed so display the whole picture will persist.
Anyone heard of interlaced displays
so that comes out came to be so we will divide like for TV. The even lines and the odd lines to make two fields
so with half the number of lines to refresh. You could do that twice as quickly. So we might only be able to refresh it 30 times a second. Now because we're doing and have it seems like we're doing we're doing better
I wonder where that came from.
So even a few years ago, I'm not sure if they have them if it's still current but you might see a display content as I grew interlaced and then he wrote progressive
that means we're refreshing all scanlines at a time anything you want to share yesterday good mood. Okay, I'll take that. So that makes sense. So the benefit going back to slough scalable vector graphics. The idea is every time so we're storing the mathematical representation of the shapes like this. And when we zoom in, or scale it, whatever the scale that we apply, create a new bitmap. So that
that means we're generating the appropriate resolution for our display so we're not getting pixel artifacts and so on. Though we have to do some anti aliasing for that, but that makes sense.
So I put a link here for square tile mosaic art
and these generate an incredible amount of ads
I was looking through them and I had the now that I
may be in the process of pasting the link into and sharing it with you I got rid of some of the offensive offending links let's see if
let's see what comes up here. This is different.
And the search that I was finally happy with last night seems to not be returning the same results today. So I was trying to find an example where you might see was a done with square tiles but each tile is a different color or there are a number of colors and effect is to see like a large bitmap image on a wall
anyway if you have I know there was an example at SFU I should have somebody take a picture of it. Maybe I have a pic. I don't know. Anyway I'm trying to think of there's one here
that's what I'm
yes so if you want actually put it in the class. Sure. Thanks
Okay. Any questions or concerns about that?
So I can see the mouse on the screen as I'm trying to navigate on my own screen and it's little distracting to figure out where things are.
There's another typo.
So the authors of the textbooks say there are four main types of applications of computer graphics. So display of information you have well, you'll, you'll take a class about information visualization. That's coming up next semester. Right
so that's one of the areas
the textbook they talk about
the author's mentioned crafty. Who was said it has a lot to say about design of graphics to convey information. So for example, with 3d graphics, with graphics, we can make bar charts into column charts. Well bar charts that go on long rows and the column charts with school columns. Instead of having them be rectangles. We can make them into three dimensional shapes. Parallel. Parallel a pipe is too general
Susannah, good thing to do.
This isn't a topic of that class in one sense.
So, if you want to display information, I don't want to put my foot in my mouth, too. far either. If we want to display information so that people can understand and read it. If we make certain as some people call them two and a half the things maybe in Microsoft Excel, you have the option to do these charts that look at this looks more exciting, more inviting.
But then come more difficult to interpret, for trying to compare two things in this and we have a platform here and a platform there it just becomes it can become more difficult. So there are a number of things that we can do to make them more accessible.
I just wanted to add that I did my dissertation on information visualization. So I wasn't trying to make this
make it an easy thing. So we have display of information. We can use computer graphics for design so we'll talk about Bezier curves at one point and they were developed by someone working at center when a French carmaker. I don't know what still call them French carmaker now
that's another application, simulation and animation.
So in entertainment, they do something called pre visualization of shots. So they can see how things will take place and will interact when they have shots that are a lot of money. With practical elements
and use your inner interface is so
drying many menus
pop up
what else, Windows menus
and I'm thinking about web interfaces windows icon mouse and point
know some point or to close.
Windows icon menu pointers
Windows icons, mouse and pulldown menus Oh
okay. So it actually stands for both. So
menus and pointers or you can call it Windows icons, mouse and pulldown menus
Okay. Any other applications that come to mind?
Making Marvel movies
CGI does
fall under simulation
or animation
I would say that's where we're at fits best
so if we have a graphic system so we have some input devices a keyboard mouse, maybe a stylus so that we can wrap things in the CPU and we have a GPU usually. So now the CPU and GPU might be on the same chip
that Rolex that I have over there I'm not sure. My laptop that's a 2017 model to which I can no longer apply the latest updates because it's
it's too old it's like I feel too old sometimes. But I still tried to I'm still try to apply updates was moderate success.
My wife isn't so sure. Okay, so we have CPU GPU memory, frame buffer. And output devices.
So.
So there's quite a lot of interest lately about GPUs and applying them not for graphics. But things at the same profile as graphics applications.
So memory is for general purpose
man we have a frame buffer
so this is memory but it's special purpose.
So let's
pixels in it but it may not just have pixels
it also can store depth information so why is depth information important if we have
let's see if Shubh is looking at me. This super computer generated
we need depth information so that I don't appear in front of the monitor
okay if if I was
if I generated a a model of myself and the room this display here I don't want to expose that's like Tron the movie or somebody gets sucked into the computer. Anyone see Tron? So there's two of them actually.
I saw the new one.
Anyway, let me just suspend some disbelief. So if we store depth information, then we can sort out if I'm closer or the display is closer. So in general we're trying to make a realistic image. If we're looking from Schubert's point of view this will obscure any, anything behind it. So we're building in computer graphics, we're building virtual models of things. You don't automatically have the properties you observe in the real world. We have to detect when we hit something to do reflections but also if this were a piece of glass then distortion Yeah. Let me refract. But then, you might see me see the part of me that's obscured by the monitor if it wasn't really a monitor it was a made of glass
fixtures separately so metal would be different as opposed to concrete. Average Yeah. Well, we apply we'll apply them at different stages
and then the devices so like a monitor, projector so these are generic Okay, so
so we do vertex processing solutions. We talk about geometry is a collection of points
and then from those points we can indicate shapes that are built from them so we have a collection of points
and put them together in the right way. Get a queue so the first step in the process pipeline is vertex processing. So this is from the textbook. So each vertex is processed independently. So we do coordinate transformations. compute a color for the vertex and other changes to the vertex
so we're doing in the pipeline, coordinate transformations.
So next we do clipping so that we're not processing all the things we can't see. So if I'm looking this way I don't want to process stuff behind me.
I really need to do clipping not just based on vertices but the shapes to primitive shapes that are made from those vertices.
So if we have a triangle we may end up with not a triangle but.
So a triangle become
quadrilateral rhomboid
Yeah, so our clipping is going to change the geometry
because if we clipped a just on the vertices
we get rid of this one and then we end up with a line
then rasterization or scan conversion happens or assembling
we're putting together the frame buffer and we're deciding what which pixels are inside
polygon so it's a process that we talked about going from the vector flower to
the raster display. And then finally take the fragments that are generated by the rasterization and we put them into the frame buffer
the color on the fragment might be altered by texture mapping or bump mapping.
So that gives you a sense of what
what the steps are. So in WebGL
deal with vertex shader and.
Fragment shaders
one at this point, another one.
So we talked about different coordinates
so if I have a camera
this maybe I should talk a bit about two ways to think about coordinate systems or 3d coordinate systems.
So that's pretty standard, right? Positive x from left to right, positive y from bottom to top. Where's positive Zed towards us
would like pauses in
the board
so a way to think about this. We talked about left handed and right handed coordinate systems right handed x cross y and your thumb goes out some positive Zed this way is right handed.
X cross Y my left hand side is going positive Zed is going into the board.
We'll talk about that some more later. So the other thing I wanted to mention about this so we have say we've modeled all the company chairs in here. projector and we have models for you too.
So we can think about this world coordinates. Maybe we start with the origin. I mean depends on the scale that we're trying to build. If you're just doing the room then we can take a coordinate an origin for the corn system that makes sense for this for the room that we're modeling. And then if we want to view it
so we're going to take a camera close up a wide shot. So then I'm one point so the position of the camera is one part of the
the court system of the camera so if I'm here so I'm going to look here. So camera position is you can say it's fixed even though I so then another point is where I'm looking so look at so from a position camera to where I'm looking that's one dimension of the axis. And then I can say which direction is up? If I'm doing this then up is over there. So that gives me a second one.
Then if we do a cross between these and we get a third axis
I didn't draw the camera equate in line here with the coordinate system. Does that make sense? So it can do perspective and
plan views so there's a number of different projections. We can use to make sense of this.
I just wanted to get back here to the
to our three js example. So Haider, for you weren't here, but if you go look back through things, there's an example for setting up the three Jas library using node so if we do O for open in browser
so this gives us
a starting working example.
Right so in our code, so we're setting up the scene. So this is a lot of details hidden behind these function calls. So we can serve a perspective camera
and we set up a renderer using WebGL.
We're out of time here. So we're setting up a cube a unit cube basic material which is the color green
and make a mesh based on the job and the material we Add to Queue then we animate by changing the X and Y angles associated with the cube so when we talk about synthetic camera, that's the approach we're talking about. So this is an example with a synthetic camera so next week we don't meet on Fridays. We'll go a bit further with this. And then we'll do a WebGL example of something that makes sense. Thank you very much for today
and if I'm doing anyway I'm happy to see you smiling in class you can tell me wearing anyway
No Don't manway I'll just stop there. Thanks again. Have a good weekend and we'll see you Monday
so you can maybe look at this example and see how to make it more complex. So you'll get Yeah, I'm never tried to stop talking. But I I did say read chapter two in the text. For those people who wanted me to make that more clear, so it's on the syllabus as well. And it's on the meeting notes too. Okay. I'm not gonna say another word.
so you can maybe look at this example and see how to make it more complex. So you'll get Yeah, I'm never tried to stop talking. But I I did say read chapter two in the text. For those people who wanted me to make that more clear, so it's on the syllabus as well. And it's on the meeting notes too. Okay. I'm not gonna say another word.
(Did you notice that I didn't say another word as you left our classroom?)

Responses

What important concept or perspective did you encounter today?

The thing I learned today are different type of displays and how graphics work on these displays with them.
I learned about JPEG compression, image sampling, formats (bitmap vs. vector), computer graphics applications, system components, and the graphics pipeline.Among them ,most important and interesing thing for me is the working of CRT and raster vs vector difference.
is how the cathode ray tub works and knowing about the graphics pipeline.
Importance of graphics and visualization in daily life.
I learned about the grapics system that includes Input devices, Central Processing Unit, Graphics Processing Unit, Memory, Framebuffer and Output devices.
The way that CRTs work was the most interesting thing for me I learned it before but totally forget it and also I didn't know about the image sampling and Interlaced display.
I learned about Interlaced Displays a technique where even and odd lines refresh separately to optimize refresh rates, and also about the rasterization and importance of depth information.
How Shadow Mask ensures that the electron beam hits only the correct dots.

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

as I am new to the subject graphic design, it is both fun and challenging to learn, I would like to learn more about from today's lecture is graphic pipeline, the little I know about that is The stages and processes required in rendering a 3D scene into a 2D screen are described by the graphics pipeline, a key idea in computer graphics and 3D rendering. The conversion of 3D models and scenes into 2D images that can be viewed on a computer monitor is a methodical, step-by-step procedure.
Would like to know more about graphics pipeline
The example with a synthetic camera and the explanation was very engaging for me. I am eagerly looking forward to more such examples in the forthcoming sessions.

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