Outline for Today
Media
No Media
Transcript
0
Zoom Audio Transcript
-
Good afternoon. Let me. See attendance swag. still fresh in my mind. The password. Before I turned it off as far but now it's gotten very cold again so. Having guises in the background is a heater. Okay, so. yeah very useful things. Alright, so. I just wanted to check about the assignments, first of all there's a question that was posted about. P five, so I just wanted to review that first. So get started as a good place to get started with P five in this reference material. So this is what gets set up each time. A reminder. So there are two functions two main functions and P five GS or. which are similar to the processing if you're have some experience with them. So when is a setup function that gets called once at the beginning, so sets up the parameters of the graphics so. In this case, we're going to create the canvas which is. An area on screen that we're going to draw into. And then the draft function. Is the thing that gets called each time. So once you've got things set up we're going to keep drawing. and drawing. can occur as fast as we. as fast as the processing as our processor allows and the other constraints. Or we can set the frame rate there was two we did that last day. But you notice that we don't have to make a any calls to set up or draw. To have. The sketches run. So the pros P five GS. This. Particular like other, like other Members of processing family. Sorry. it's designed. So that these two functions are called automatically. So set up is called once. At the beginning of a sketch, and then draw is called. In a loop. So this is the main part of. Anything else you want to do in the code, while your sketches running comes out as a draw on. That makes sense. So I see that it's getting better outside. Of that I still need to. Do something to get my car to start, though. So I think identify, so I had did not it's a fairly new car, so I didn't have to plug it in last year and. I think I know where the plugin has to go, but I can't get the cover off or I couldn't get the cover off. This morning, freezing fingers this morning. So I want to make sure that, then I can solve it, the manual. About. accessing the engine block heater and. So, hoping to see a little picture that confirmed for me what I was going to try and do. But now I have to look for YouTube video, to make sure. That i'm not gonna break something off. Because if it's going to. Is warmer temperatures that might not be so critical, but I think. minus 50 ish. I don't want to take any chances. don't break something else the Karma will take something off me. anyway. So is that any any questions about P five sketches. yeah so I mean the idea of illustrating entropy is trying to. be something that's going to illustrate. concept of entropy or surprise. And so surprised, since most when. It comes through equally likely. So free, fair coin flip. Or, more than one correct fair coin flip that's. going to have some surprise. In the outcomes. For some ways to do a visual representation of that. Okay, any. And i've got an office hours at 330 today so. If you have some lingering questions. You can reach me that. Okay. An example of. A vector image file format. Okay, so this is. My favorite con image. svg format, which is a scale called represent scalable vector graphics. So instead of. A bitmap virginica describing the image here. So let's do a little zooming first. Not real centered. zooming in and we're still. not seeing any. Any. jagged edges right. So, how did I do that. Before. Take a screenshot of this. What i'm saying is strange. strange. got from the screen capture. Let me go back to the other one. Let me try and another. zoom. Let me see if I can. zoom capture. Okay, so if this doesn't work i'm just going to. ask you to believe me that would work and i'll do it later. Fine. It looks like it's all still very smooth and precise but as we get to the. lines are different. Not at 90 degree angles. And you can see the. issues that come up. I guess that's as far as I can go. Anyway, does that make sense in terms of. scaling images and. being stuck with a bitmap at some point. So the other thing is. yeah so that's right we're changing the image format so we're taking a snapshot so we're converting the image from a description of the. Of the care of the quad a description of the image to a set of pixels so it becomes. Like when we have text. Written as an outline font. And we still have the idea of the text that we can select it and in the document and so on. But once we have a picture of text. And we lose that textual meaning and we can recover if we did. optical character recognition or something like that. But essentially we're. When we're when we grab. A screenshot with text in it. It stops being text and becomes a picture. At a fixed resolution and so that's what we've done here we've taken the picture and a fixed resolution and then. soon. Okay. Does that make sense, so far. So we can do view source and that's as well. So we go down to the. developer tools on chrome and save you source. So description not not that pixel so. scalable vector graphics version. format party scalable vector graphics format for fav icon of dh. subscribing to a regular have to gun. For me. I have a reference circle I can't edit this one. will go and go into the one to edit and show you those things. So there's a circle. Oh i'm still showing everyone sorry. So here's the source view of. The image. So svg is a xml. If you're in an xml so that's why it's got all these xml namespace and so on. version and so on and so these are html comments. So I think in the Grand scheme of things. Some of the features of svg are being overtaken by CSS. cascading style sheets. So there's some competition between those two standards, and I think. CSS is winning more so than svg. I think there's good support for svg as a format. At this level, but I don't know how many more versions. It will be. Okay, so anyway i've been an outer D. And then, an inner D. In. This describes the whole curve, in terms of segments. To go outside So it goes from. 02 minus 100. So let's start at the bottom of the circle and goes. Up to the top. And then. Around. me. In terms of words me. On my laptop and show you that. Okay, so I know that I have to change my screenshot and the second my screen. One second here. Okay. So here's the source file that i'm working with. me a copy. let's see what happens when I put that circle back in. Actually, maybe I should just do my desktop. that's going to squish you're on screens of that but. The way I can switch between the source and. The. OK. So the circle looks like a circle. And then saying style, such as already CSS. till nine and stroke is. So, how would you characterize this without knowing exactly what kind of color it is. Is it white or black. The black, so it would black be. So this is, this is a color. yeah so black would be all zeros. And there are six zeros because. These are hacks. And to hex digits make up a bite. So there's three bites red green and blue. One for each is red green and blue. and So. Six digits equals two three bites to six X digits equals three bites. White be. No it's not white either. way be all the same digits again. Yes, that makes sense. So that's the highest number, we can represented for better. So FF for PR for bite means all the bits are set. And because they're all. Because each digits in the same. Then we know that red green and blue is going to be the same so it's gonna be somewhere on the Gray scale. So red green and blue equal intensity. try something different. So what is that going to look like. What what kind of tend to second half. So, which one's going to predominate. So we have red and then green and blue. So let's take a look. Maybe a little hard to see in this. picture. It. How many pixels wide. Real quick is one pixel. Sophie made it.
-
15.
-
There we go. To work now. Regular. So you can describe things like circle. Polygon. And then there's a path. The path starts out, then we can say move to. And then line to. break. So if we change this to a plus or minus sign here. You should be able to notice. refresh. don't. know why it's so slow for that content and. Not for others. Beating this horse to death, so to speak. With you have other questions about this. You can use your microphone. So we talked about colors being. specified is red green and blue. So I want to just touch on how I came upon these colors. Another interface for picking colors. See. find an example on the web. Something. saturation brightness is another model for. So we think of think of huge as being. An angle around in a circle. Not a yellow. yellow. i'm asking with a question like behind yellow because i'm a little bit on the color blind side. Would you say that is. Turquoise okay Oh, someone said, Sam yeah very good. I thought that may I thought Turquoise might be a little bit more easy to come by. Technically it's called cyan. And then another 60 degrees. that's pretty close to 60 degrees. Any any ideas for this name. magenta yeah. Great pink yes. purple. magenta is the boundary going. Again away you wouldn't want you wouldn't want to trust me to name colors and then Rebecca red. Red green and blue. Important colors for defining. Are. displayed colors right we're talking about combinations of red green and blue. To do. Okay here's my artistry my interpretation of the pictures on the screen. At the top and then dream. The bottom right and listen to the bottom left. So we talked yesterday about colors being combinations of red these primaries red green and blue. So we think of. The other way. So we see, this is the red axis. Which is the green access. And this is a blue axis. So what color do we have a combination of. going from zero to one zero to one and zero to one. So we have none of red green or blue yeah black great. That makes sense. And if we have not none of blue or green, but just read. And we have read. cannot imagine i'm still working with a cube here. This becomes a little less like you like. That anyway so here the. Blue so if we have all blue, but nothing in red or green. We get fluids not corner right. up here we have cream. Now, what about over here. stream. So. Think about some combination of blue and green. What color did we see down here. Red blue is. Around corner. Should it be. Blue red so here's the red blue playing at the bottom right. here. So what color etc present. So we get to way that way. So we can see that there's a line can think of there being a line between black and white. was done in the middle of this. The cube. know. I could have drawn anyway. red. yellow. Green. magenta. And then red. Not quite like a hexagon does it. should stop apologizing for my. difficulty drying making your shapes. Okay So how do we get out of. This model. need to. saturation brightness. The bottom of a comb so you can think of. The cube. Being. rotated so that the. black and white axis is. Down the Center. So if we start and so with the black end here. Then that's the point, so we can do. Let me just change the brightness to zero. So doesn't matter what. Any good pick for you. saturation. Well we're we're at the single point. But as you increase the brightness.
-
50%.
Zoom Chat Transcript
-
Hello!
-
Afternoon
-
good afternoon sir
-
hello!
-
hello
-
Hello!
-
Hello
-
hello
-
hello
-
hello
-
Student password
-
I have one beside me as well
-
its getting better outside
-
yup
-
ye
-
yes
-
Screenshots change the image from svg to a png or jpg (bitmap)
-
You are just sharing the screenshot window so we cannot see the window you are sharing
-
000000
-
Grey. Hex black is #000000. White is #FFFFFF
-
FFFFFF
-
Questions?
-
yea yellow
-
Looks yellow!
-
Highlighter yellow
-
yellow
-
yep
-
Green!
-
cyan
-
Turquoise I think
-
Mid point between blue and green
-
yea
-
Blue with a hint of purple
-
pink!
-
Bright purple now
-
Magenta
-
white
-
Your drawings are beautiful
-
Mix everything? But no saturation
-
0% saturation
-
Thanks!
-
thanks
-
Thanks. you too
-
thank you! have a good week off!
-
Have a nice break!
-
Thank you!
Responses
Wiki
Link to the UR Courses wiki page for this meeting