Mtg 24/25: Wed-29-Nov-2023

Outline for Today

Wiki

Link to the UR Courses wiki page for this meeting

Media

Transcript

Audio Transcript

• Speaking of assistants, I find I always find it interesting that
• people talk about Alexa and so on. As smart speakers no one's
• no one calls him smart listeners.
• I would just not say Golden's modern. Definitely not thought.
• The other day I was at uni and I was just went like my TV turns.
• On if I say Alexa, turn on the TV. I reached home and my TV was
• turned on, because my phone sent that request to my Alexa and it
• turned on
• maybe your phone thought TV had to warm up
• for the whole day
• okay
• okay, so you saw my post yesterday where I retrieved all
• the animated GIFs from the wayback machine
• a little presentation today, like a five minute presentation
• for the 734 I was really busy with that.
• Gift count is at the website sharing
• I was replying to your note on the class discussions
• so Did anyone try and clone the repository and good to run
• it this was this felt like too advanced for me. I didn't even
• go into the code.
• Well, it took me a little bit longer to get it running than I
• thought. But I did get to run. So maybe we'll talk a bit more
• about the code on Wednesday. On pardon. Me on Monday.
• So the repository has a package dot json file and package json
• lock file as well. So my first attempt was to remove the lock
• file and regenerate it from the JSON the package dot json file
• because something's missing. Well, it wasn't missing but
• there were some syntaxes have changed and so I tried to get it
• to work. But it wasn't quite there. I got the wireframe
• spinning on the website without any other anything else in the
• cube.
• So I posted revise URLs in the discussion forum.
• So who is very fluent with NPM and note how do we do? Who knows
• what they are? Yeah. So I'm a little I'm a little bit more
• advanced, but I haven't worked with them a lot. But I have NPM
• So node version manager
• you have to downgrade the NBN version.
• No, but I could install this version see I installed an
• earlier version so I looked at
• looked at package json and we found that aid us 12.0 point oh
• says 12 point zero.
• So now what version is now 20.89 or something like that. Here we
• go. So toe point 0.0 was a little bit a little bit of a
• step into the past. But so when I use the same version of node,
• it didn't have problems with the JSON or package lock file. So it
• used that to build to install the provided NPM i to install
• the dependencies based on the lock file and how to recompile
• some things, but it was generally happy
• so but I'm not sure how to tackle the upgrading
• dependencies to the current current version of node because
• apparently some of the packages that are used are have secure
• severe security violations. Now but anyway I got to keep
• spinning
• surprise
• that's never happened to me before.
• Something that's never happened before. Apparently I have a
• class with fewer than 56 students next semester. Wow. So
• that's a bit bigger than if the previous record was 150. Where
• do you take it? In the theater if there's a big lecture theater
• in the classroom building well Nice.
• Okay, so let me
• so, I've done the install
• watched you can trust me that I did that.
• So those two works in the previous version I compiled but
• it wasn't loading the images correctly.
• So you can see what happens when we change the parameter so now
• we're seeing reflection inside The Cube.
• It's very shiny inside bless
• so I think
• I have a few thoughts about this I guess.
• So, if we have time on Monday I'll look through the code a bit
• more
• is the bench manipulation managed in the code or is it
• something that is just because it's in the cube you see how
• does it glass effect
• when there's distortion around the edges?
• Think if we look at this placement see
• that how it's changing
• gonna say we can use this running demo to recreate videos
• that aren't on
• wrapped her up in the internet Wayback Machine internet
• archives but there are a couple of videos there that aren't.
• Don't think can be generated from
• from the display you
• one has arrows in it and I think that's
• it I wouldn't it's maybe not German from the the other ones I
• think are anyway
• okay
• so there's I need just show you a little bit about this.
• Is mature progresses
• This is my first attempt trying to update things to the current
• version of node doesn't quite have the same appeal doesn't
• Why do they have a WebSocket connection
• is it dropped
• Yeah, so I was VS code says do you trust the developer not at
• work? And they said yes.
• Anyway.
• So the other thing I was gonna mention about nvm on the Mac, so
• I use homebrew to install it
• so is there a home? Is there a package manager for Windows?
• Yeah, and we haven't done but no, not package manager
• like homebrew just chocolate I didn't bring any chocolate
• versus actually.
• So I only knew about it after the fact. Anyone use that
• website?
• I could just mentioned to
• somebody over 100 That seems to be more than my house
• No, no no no. waiting to hear and then I'll tell you because I
• only had nobody I was told that it was quite funny
• but so I think everything happens in the content there's
• always wondering
• anyway, we can talk about the quota more on Monday. If you
• like.
• I want to show you an example
• it's not this one
• Okay, now I can copy things over correctly.
• I'll fix that and posted
• now let's see if I can get my third example to work. Actually,
• maybe I'll just depending how that goes, I'll come back and
• see if I can fix this
• Okay, so another example is using three js and by extension
• WebGL to inside of React application. So this is the link
• describes
• So we've included three, the React stuff and some testing
• packages as well.
• So the difference from the code sample is I had to turn the
• intensity of the point light up quite a bit because it wasn't it
• was this is like 1000 times brighter than it was originally.
• So maybe the syntax has changed since this example was written
• and so I realized that some of the files and in this react
• project aren't plagued by junk code reading the files so I had
• to exclude this from the website
• but you can install on your own computer if you like. So you can
• see. We can highlight you get a hover color being different than
• the original. And then we can click and make it small, larger
• or smaller.
• Okay, so let's look at this
• okay
• so in the final version of the app we say so, this is using
• using fiber
• which provides heat or face to three Jas so, we import to get
• the canvas from
• the canvas there and then here's a cylinder and we look at we've
• defined it into a single component file called cylinder
• 3d
• So, the Canvas has started at a point later position 1010 1010
• sativa 1000.
• Let's change the light color so we're drawing two cylinders so
• cylinder 3d And here's a position
• in the second one we're doing wireframe. So we're saying
• wireframe equals true. And the third one we've changed the
• ambient color ambient light color is.
• So let's look at the component
• tree so we're defining
• cylinder
• so from react we get these reference new state and use
• frame comes from the fiber package so we can set up the
• hover. So these are the states whether we're hovering over it
• or not clicked or not. So I'm going to add this to the
• Grandview loop. So we're going to do this we're going to have
• his soldiers rotate around the x axis
• so with the mesh we're getting we're going to scale it based on
• whether it's been clicked or not. And when a click happens,
• we're going to change the value of the status of that state and
• we're going to negate it
• and on Twitter over event
• you said average determine if on pointer out event, you said
• hover to false.
• So if it's hover hovering over it, we can turn it on he's Hot
• Pink is the color otherwise orange.
• So that's the basis of
• getting three Jas into a React app. Little bit simpler code
• isn't it?
• Let me see if I can fix up another example.
• Okay, well, I guess I have to
• would be okay, just to put in another image but it takes a few
• more minutes so.
• must still work this out? You don't have to sit in silence and
• watch me fumble with the keyboard
• so we did
• an example we looked at that project
• Yes, the Apple Yeah. So the thing about this is there's so
• many different libraries for WebGL. So the the apple Fifth
• Avenue Project is using route Rakel or EGL. So it's difficult
• to
• say there's one that's doing the best. So we have to be flexible.
• So the purpose of it. I think the opportunity in this class is
• just looking at WebGL itself and understanding what's going on
• and then you can get some experience with libraries that
• to make things a little easier. So three Jas is one of those
• libraries. So we can do lots of stuff with him. But there's some
• of the examples you find on the web at the web site Web GL two
• fundamentals.org.
• That's that uses a tiny WebGL helper library. So just hide
• some of the complexity but it doesn't still keeps us pretty
• close to working with WebGL. Because he said if you want to
• do something serious use three js.
• Let's see any questions or comments about this?
• So are you getting Are you be more confident about installing
• react apps and from GitHub repositories that
• I'm getting comfortable with which you know, by default, I
• just know what I got wrong.
• Even when I'm reading the code, I can see I can understand
• earlier I initially I was just looking for I had no idea what I
• would just see life just being like a frame buffer. What is it
• doing? Now? Actually, last assignment was quite helpful.
• The last one, I broke it down. I broke it down into really small
• chunks of code. I broke down the whole Jas into smaller
• functions. And that made it very easy for me to actually
• comprehend how it was functioning.
• Okay, good. So on Monday, we'll do a little review. Look at
• some, some of the code in more detail.
• And if you have questions so try and bring out some questions
• ready for Monday. And we'll go through and I hope I have
• examples to answer your questions and if I don't, I'll
• create some. So the mid at the midterm, the final is on the
• 13th. So that's Friday, I think that's Friday the 13th Isn't it?
• Is it no
• final Friday?
• Yeah, it's gonna say well, that Wednesday the 13th That's good
• luck. Three hours Yeah.
• Do you actually give us like, like questions like when you did
• in the midterm? I mean,
• so I think the final exam from last year is posted as well.
• But so I invite your suggestions for questions. That would be a
• fair assessment of our learning this semester. So you can tell
• me whether you like questions. On the final last year's final
• or not. You say don't give us one like this or something like
• that. That would be appreciated as well.
• Okay, so if you want to think we're out of time here to do
• well, two minutes left. So if I can get this fixed in two
• minutes, and you want to stay for two minutes.
• You're welcome. To but I'll excuse you for now
• so I've my feeling is that the code samples in the text are
• good as far as they go. But I've tried with the examples I've
• modified to make them a little bit more accessible and the fact
• that they have their he has his own JavaScript library that's
• not in great shape. So maybe there's in the future, maybe
• I'll adopt something that's more standard or actively developed.
• Anyway, so I welcome your thoughts about that as well.
• Anyway, okay, thank you again. Take care everybody. Have a good
• weekend. See you Monday. And I have office hours
• weekend. See you Monday. And I have office hours

Responses

What important concept or perspective did you encounter today?

• Today's lecture was informative as always. The assignment and furthur code was discussed.