Mtg 9/26: Tue-09-Feb-2021

Outline for Today

Media

No Media

Transcript

0

Zoom Audio Transcript

• Just putting my coat on here to. Not enough installation here between me and the. doors in this position. Watch super bowl. Those two days. yeah I watched that. yeah time is good. This weekend from Toronto. I saw people from Tampa Bay in the news. not socially distancing and their celebration afterwards. And Colbert said that his. His answer for his response to that was Florida. I think that was the essence of the comment. anyway. So let me share a page here. For our meeting today. yesterday's meeting. Our last meeting on Thursday, so this is today's meeting. So what i'm trying to do. Based on. It wasn't at midnight last night that I did this. Created the summary.
• But.
• My. plan based on. Our discussions is to have talked about responses from to the last meeting. As a way to think about questions or comments. warm up to. today's topic. Okay. So, if your responses are captured here i'll. still going to include them for marketing. And i'll add them here, so the to the to the record if if the. answer as required. Anyway, so a couple. So let's spend some time talking about P five js and the assignment today. Make sure it's clear about that. And I can adjust the due dates if needed. As far as promised when I signed them a couple weeks ago. When I talk about the last anyway. Okay, so I just went. So i've done some editing on the comments here. Trying. Chris said i'm trying to add my comments as in parentheses, but I didn't do that here. So I should have said, is a true. That. I should have put those in parentheses closer, I was to my comment. So good to have a great for simple renderings and vectors are best when you need to use. A large scale. So. I feel like that's probably true. it's more nuanced than that. So we're talking about. maps and vectors in terms of fonts. This is also true for images, in general, I think. So bit maps great for fast simple renderings. If. We have a small font or a small image. there's a lot of detail in. And the description of the. Evidence vector form might be a large larger file than the map would be at a particular resolution. So for for doing that a lot if you're using that graphical lot or that character lot is, as we do in fonts. And it's it's better to have as as a it's quicker to have it as. A bitmap. Because we're going to save space and we're going to. not have to spend the time to render the description into a into a bitmap anyway. because all of our displays of reusing or bitmap. For the benefit of using vector format for fonts and for images. Is that we have. The ability to scale. And we're talking about scaling to large size. In this description of the image will probably be a much smaller than that map. That mapped image.
• But.
• Are the cases where we have maps revalue bit maps for large images. what's it what's an example of. bitmap. Being popular. With math images being popular. And a large scale. Going on yeah. Okay, so I just noticed a couple of direct messages. So please don't send me direct messages. I don't know if you're going to show up in chat or not. it's just. So, the reason is that i'm. I have, I can immediately send to everybody in the meeting of someone sends me a direct message, because in a set to reply. To you, and a direct messages. Okay, so, then I have to take that extra step and then. If they don't show up in the chat record, and I mean i'd like them to be used for. To be. available for everyone to look at. Okay, so anyway. Yes, so I just talked about very willing to discuss an extension for the assignment and we're going to talk about it today okay. I was looking for responses about when our. When our large kidnapped images. appreciated. and valuable. yeah that's what I was gonna say for photographs. So if you had a 10 megapixel camera or your iPhone or your android. what's what's the size of the images on those devices now. i'm not even sure this say well 1010 million pixels such a. masters or 4k now. so that I can remember the dimensions. The 2500 by. 19. Oh okay thanks kayden. let's figure out what that what those dimensions are. How many pixels that is. 24 bits. one. that's 200 million bits about give or take. Anyway, so. The idea is that we're. Really two key concepts of sampling and quantization. So the. Is a 4k image size so that's the spatial sample. that's how many samples you're taking in a. In a. In the space. And if they're equally spaced. Which is what we'd like to do we're dividing up in the area. into 3840 by 2160. So the aspect ratio is 16. By nine. Everyone familiar with the term aspect ratio. So that's. that's the width to the height. So if we had. A region in space that was nine centimeters. I and 16 centimeters wide. That would be. That we could sample that. and create a 4k image.
• With.
• These dimensions so. For example, I mean it doesn't have to be. It could be 16 meters by nine meters. And if we have if we start out with that shape. Or that the dimension of rectangle. Then we're going to get pixels equally equally just equal distantly. spaced equal distantly. Anyway, so that that's so interesting. So we're going to sample. Anyway, getting. Over too much into sampling here, perhaps. Okay, so let me. Think I didn't get everything. published. we're going to spend the bulk of the time on the p five js assignment. Let me finish going through these questions so. i'm curious why the question mark why we might identify it as an eight bit question mark. And I didn't have a. So I apologize for the. tiny resolution here. So I thought, maybe it was. Eight bits here so 12346 this is seven. So anyway it's my question makes sense. So in the response to me they said we discussed an eight that question mark. Any thoughts about. Why, we had an eight bit question mark why it was called an eight bit or why we might talk about it as an eight this question mark. The talks with a bit depth, which is what we were just describing. Here, in a sense. So, instead of just having a single bit represent that each. pixel. In each location, they were sampling. Storing either zero or one you can store eight bits that gives us between zero and. As a value associated with each sample so. The sampling is this is the X and y are the width and height. Of the image. And the quantization is a number of bits restoring. Using the story to sample. That makes sense. So if you want to anti aliasing a question mark or any character. We need to have more than. one. So we can do better with to better. could do a little bit too, because there was three best and all the way up to 48 that's. That makes sense. And the reason why. It gets better is because we can create a gradient. Of colors for each. That we can assign to each pixel. Each sample. So we don't just have black or white, we have shades of grey or shades of. Whatever colors, we need to represent. To create. A blurred effect. Again, please no direct messages. So whatever whatever however greatest screen resolution we have. we're always going to decide we're always going to end up with deciding pixels turned. Up get to be on or off. And that'll be fine I won't be so bad for. The resolution as intended and. Then we can always do. aliasing. TIM to make up for the. Unlimited sampling capacity. So we can't sample any further any lower than. and any lower than these values here that are indicated in the. question mark shape here the seven. samples in the question mark, so we can't represent them any with any can subdivide them to make them smoother. But what we can do is assign. us. Around. So for make these. Four on. Seven samples here at seven. In the shape. But then we're also assign. A fraction on. Some great value for tango put black and white. The corner lens to have them be rounded out a bit more. So that makes sense. Okay, so. here. comment vote or the responsibility staircase and anti aliasing. So that's how that's a screen resolution, for me, so it looks pretty good. The face to face zoom in on that screen. You can see that the characters are actually done like this, so that's an example of. The application of anti aliasing. So we can take photos images. And zoom in and out. This isn't a very good interface for zooming and output.
• You can.
• Like I won't do that, but you can explore that a bit more. Free zoom out on this one, then we can return to. looking good like the original ensuite one. Okay. address those things. Let me go back to. course, so we can do it i'll share the attendance password with you. Okay, so let's go to the. example that I have for the first assignment. So what are we measuring. Or what are we trying to illustrate with. what's the slider doing here. From observation.
• Increasing entropy.
• yeah surprise. That means. So the density of the pixels is the same, I think it's just. visibly different. So if I if I set a surprise to be lower. than I get more the same pixels in a row. Or the images dominated by the same pixel so there's less surprise. So on the siders at wanted doesn't mean that. blocks of the same color pixel can't happen it's just. The probability is his. Last. So the probability of the same pixel repeating is high, when the surprise is low or the entropy is low. And then the probability of the same pixel is low and. entropy is it surprises at its maximum. So I haven't. done a very sophisticated. No i'm. Passing two coins. So what i'm doing is getting a random number for. cleanser because the two coins so i'm. surprise. Now. So here i'm defining the slider so the surprise sliders of using a create slider. now say it goes from zero to 100 and the. default settings 50. So that's the guy that will be returned. So the the most The surprise cider can return is 100. So 100 divided by 200 is point five. So what what is the effect of. Testing this against Point five. So it's like. It will, when I have this. set to maximum. So it gets 100 value. Then. And the surprise in the function will be 0.5.
• what's the range of values for the random function for coin zero and one.
• And between zero and one.
• Okay, so is that why you have it set to a Max of point five, then.
• yeah.
• 50% probability for each.
• yeah. In the kit in this case and it's like the. The two coins are fair coin toss. So let's look. here. So they can either do 01 or two arguments is no arguments given. The returns around them number from zero. Up to one but not, including one. If you get one argument. turns around and number from zero but up to up to the not including the number. of arguments given an array that picks randomly from the array. two arguments have given them the returns. first argument, up to the not including the second argument. Technically, I should probably do. included a random seed call. So we want to make sure that. you're in the same sequence of random numbers, then we can. Give a. Different number or you can give it an argument for seed, so that the sequence is always going to be the same. So it doesn't say what value it uses proceed, even though that. We don't get. In other languages, you might say, give us give us a time, the number of seconds since 1970. Make sure that it gets you know get different random numbers. doesn't give an example, it doesn't say whether it's good practice to random seed or. Something from time let's say. Anyway, so the idea is the random function that i've since i've used to here is going to give value between zero and. Up to the not including the one. testing. Surprise can only. Be up 2.5. So that means. well. It could be. surface less surprising. it's going to be here so. Let me try that again. So in my example if fluff surprising. we're going to see white pixels. predominate the image. Because the way i've set it up because i'm not testing. i'm not considering the other side of the curve. So. If it was. same point seven five. And the. same as if it was set to be Point two five. So there's an there's an example. Of a limitation that could be overcome in my example is. So the surprise could be. Because have a different value. Different. color predominate when. A surprise that makes sense. So we could also do a third coin or fourth climb, if you want to get. more detail. Do as many as you want. Anyway, but that's another. way to proceed with. With an enhancement. So the question is, do I have this example for this assignment or build something new. So I. Think that's just a matter of. degree is not me, you can say. To build something new. well. Depending if you use any code or any ideas from this. example. So am I, the answer to my question kayden is yes. So if you enhance this example and you. copy this sketch, and then you identify where you. change things. Added things expert. That would be fine and then, if you. want to build something new, then you can do that as well. anyway. Good. glad you're satisfied with my answer. Some other ways we can. Think about this. occurs to me that, in addition to. This showing the. The image we could do some. presents and information about. The probabilities. of each pixel and the image. statement here at the bottom that he should do a print, but I just want to show you. What kinds of things you might see in the console. So here we see. The accounts for. For 012 and three. set to the snacks and value then. The values of each counter approximately the same. not exactly the same because it's random number generator. slider. entropy and compression what's another way. So we talk about a lossless compression of an image. is even heard of run length and coding, I think that was in one of the videos from last. Few meetings. As an example. Another useful thing for the interface should be a pause button. Because if I. I stop this is not going to. Keep an image on the screen. So there's no surprise at all. And we get all the same diet pixels. So what's. what's the way that we can express this image in 400 pixels of the same color. So you can see how many white if we start in one corner. Of the color here is white. And then we go down 20. Times 20. And again see this 400 of them. And that's all we need to say 400 white pixels. So how many Bytes does that require or. Even if we say full color. That can be two bites. right because one or 255 values. More capacity than one bite. So two Bytes. Which is. Now anyway that's what she's getting her again to cheer. He didn't get at least two bites editor. And then two bites and then three bites for the color. So we could store it on five bites would you say. That seem reasonable. We just had one color to record. Anybody still listening. Any reactions. Any thumbs up. Okay, so I got a kind of there, so do you want to. not making sense.
• So it was white and 400 pixels would it just be like the coding result for white and then 400 and your next slot. Or how would you represent it.
• yeah. So we don't we're not thinking. format, particularly so we just want to say color and then the clearances, so we are.
• Okay yeah so that makes sense I.
• think he was sketching something that I thought better of it. Okay, so that's. A little bit more. scale we have. very surprising. Possibility a compromise. How many different kinds of runs are there. Well, I don't want to tell you what to do exactly. Let you explore a little bit more, but. And it wouldn't make sense to. Because you'd have. to bite. The length of the run, even when there's no run. So there's another issues there so maybe we don't want to store more than. You want to use one bite to store ran so, then we can store up to 255. rented up to 255 and the same color. Does that make sense. printing is slowing down things. refresh. that's what happens, we change the frame rate from. From one to 10. let's see if I can do. Alright So here we have the setup function. The canvas. And the pixel and the slider. And the set of pixel density to one. And the frame rate. So I think if I do. Looking. So that's the part that's the frame rate that the. process england's to support. The Auto refresh on and it'll catch console see different errors here. There are problems so. If you're doing this in your own browser, then you can just open the. javascript console to see. let's see So if you want to view. So this is for chrome developer tools. Right, you see that. Are you seeing my menu come down. Or is that hidden from you. Anyway, so the under review there's developer, and then there's this selection between view source developer tools javascript console and. This is also javascript from our events. We put javascript console. Okay, so that. We can make this a little more. friendly to look at. Okay, so this is the. This is the. javascript console from chrome. So that can be more helpful perhaps at times. anyway. So the console on in the editors is reasonable, I think, for many things. as well. So the setup function is executed once the start. And then the draft function is what gets. called each time.
• it's.

Zoom Chat Transcript

• Hello!
• hello
• good afternoon
• hi
• no
• Well the half-time
• Please! That would be super helpful
• BUSY week
• Yes please
• Yes please do
• I agree with khelan
• No the DMs don’t show up in the chat
• Please extend the due date of the assignment 1.
• Maybe for a digital camera?
• 3840 x 2160 is 4k
• 8294400 pixels
• 199065600 bits
• 16:9
• Aspect ratio
• yup
• yes
• Student password
• its controlling the pixel speed
• Increasing/decreasing entropy
• when it is high pixels are dense
• So are we to enhance this example for the assignment? or build something new?
• Ok. Sounds good. Thanks
• yup
• kinda.
• yeah
• iyup
• yep
• it has for me. atleast
• yeah
• Helped me a bit too
• Could you swing Friday?
• Thursday works
• thanks
• okay
• thank you
• thanks’
• Thanks that’s awesome
• thanks prof.
• Thank you!
• it says you want a file
• can we set it to Friday night? that way we can research more into it or have more time to contact you
• Thanks!
• but yo9u want a link?
• thanks!
• So you’ll change the due time on URcourses submission?
• you too.
• Thanks
• Perfect. Thanks
• thank you!

Responses

Wiki

Link to the UR Courses wiki page for this meeting