 Okay, what is everybody this afternoon? Four windows here Like I got sound going into the microphone around the right mic right yep, you can trunk it up a little bit All right How's going? See Grover mark ambler grad. It's glad it's Friday. Definitely same as same here to Shippu Keith the EE nice. How's it going over on YouTube? David. Dessa. Hello. So hello to all you folks Let's see here Close I just need to basically get the I think we probably want to switch Switch the chats actually. Let me Put this one and we're gonna put this one back. I think Oops There we go. King or north. How's it going? Dexter starboard Let's Almost ready here. Okay, so I've got You can see the chats got the uh Document here, so I'll take oh, I forgot to push Play on the thing Yeah time stamps are going to be off by about Uh Three and a half minutes roughly Sorry folks Maybe I could go back and edit some after the fact But yeah, those are I didn't hit didn't hit play I'm getting better at kind of having The list of everything to do all I'll set up here And I had my time stampers sitting here, but I just never did press the start button Got to run it at the same time As obs and I also did not work in we talked about some features maybe to be able to artificially add The time but it's not worked in yet. So About three and a half minutes off. Let me uh, let me put a time stamp and then say uh time stamps Are about Three minutes 30 seconds off Sorry Okay Yeah Zarnlin Zarnlin. Yeah, luckily it's I luckily I caught it relatively quick And so maybe I'm at the end. I could just go back and Kind of subtract off three or add on to three minutes to all of them before they go into the Uh youtube description I think that'll get it right in there uh hands labs. How's it going? Let's um, all right. Let's get this show going. So hello to everybody. My name is tim Go by foamy guy on the discord and github. This is going to be a deep dive Program deep dive with foamy guy or deep dive with tim. We are Working on circuit python related things. So if you're brand new to all of this and you don't know what circuit python is If you've never seen one of these streams before this website, which is showing right now on the screen This is a good place to get started. This is circuit python.org All the high-level basic information is here and links out to documentation and downloads and all kinds of stuff from here So this is a good place to go if you are just getting introduced to circuit python To give you a quick high level idea of what we're talking about here This is basically a version of python that runs on these tiny computers there's a bunch of them in the background here on this page if you scroll down a bit and This one here is the one i'm gonna start out working on today So there's a tiny computer on the back of this basically this main chip right here Is a a whole computer inside of there and we are writing python code that runs on that computer and Specifically what i'm interested in today is drawing stuff on the screen You can see this little fancy rainbow circle triangle thingy that i've got here um And so this is kind of what i'm dealing with today is drawing stuff on the screen But circuit python itself is definitely a much larger project than that you can hook up to all kinds of sensors and um, you know lights and speakers and joysticks and you know knobs and buttons and Anything you can think of really um, so Today though i am focused on the display, which is one thing you'll find if you do catch The deep dives while i'm doing them or my streams, which are on saturday mornings Oftentimes i do work on display related stuff not a hundred percent But fairly regularly i will you'll find that that's what i am Into i'm kind of naturally drawn to there, so i just kind of work on whatever is seeming interesting to me at the moment Um So that's the introduction um, if you are interested in circuit python enough to help us out with The development it's an open source project So everybody is allowed to help us with the development it all takes place in the open on github, um, so you can head over to github.com slash adafruit That's the github organization, which houses the circuit python core repo as well as all the libraries If you are interested in getting involved, there is this contributing link here at the top of circuit python.org This is going to list out all the open pull requests and issues So these are kind of the the two places that we point folks that are relatively new Because this is kind of the most basic way that you can contribute is um, these are all going to be python code instead of c code So it's a little bit less complex for beginners to programming And inside the issues there's actually a filter for good first issue, which allows you to find Specifically all the issues that we've highlighted as um, you know being good for folks who haven't necessarily contributed anything before Um, so that's a good place to get started if you do like circuit python, uh, and you think it's neat But you're not really interested in getting involved in development. There is another way you can help out Which is by purchasing hardware from adafruit.com. So this is their website here adafruit.com They are a hardware and software company based out of new york in the united states. So they sell These microcontrollers they also sell all sorts of things that you can plug into the microcontrollers to do with them And this is the company that provides The the majority of the financial backing for circuit python. So they're paying The the core team that is developing circuit python Um to work on it. They're paying folks that uh, you know make guides for circuit python folks that help out in the community foster all sorts of community projects and Uh events and things like that as well as some folks who work on the project part time Such as myself. Um, so they're they're paying all of us to work on this circuit python project And so, uh, you know, again, if you purchase hardware from them, then you are Helping support the project sort of indirectly that way, which is really nice. So thank you if You would uh, let's see. I'll catch up on the chat here Hamz lab had this problem with the cutie pie yesterday. Uh, oh Uh, I see hamz lab has a new pair of smart shoes over there CQ has a going close call almost as bad as a lego. Yeah Sneaker net. Oh a sneaker net. I like it a sneaker net So other joints look pretty good I think this proves that bill gates is trying to control your mind. Oh, I mean A little bit to look at ads maybe Probably not much more than that though Uh, you can also add a lot of piezos to power your cutie pie Screw lipos and power banks. Yeah harvest the energy from stepping on the ground Uh, all right, so What am I going to work on today specifically? I'm interested in uh, what I showed on the screen Little bit ago. Uh, we'll see kind of how far I get in this. I have an idea for some tabbed layout stuff I want to get into afterwards But we'll see kind of uh, you know, how far I get on this and how long it takes to explain kind of the stuff I want to explain so Um, what I'm going to do today is talk about vector i o So for folks again, if you are new to circuit python or not new to circuit python, but you don't know what vector i o is this is a A built-in core module inside circuit python that allows you to draw shapes on the display basically so there's Excuse me three shapes built in to vector i o The circle the rectangle and then a polygon and the polygon of course is is quite You know quite General quite dynamic you can give it a list of points and then it will draw whatever polygon those points represent So, um, you know, you can actually make all sorts of different shapes with that polygon And specifically what i'm doing is uh, I made a version of that polygon I'm basically made a an extended version of that polygon that offers some extra Utility uh that the the plane polygon by itself doesn't have Um or or to put it another way. I guess it it has it, but it's kind of difficult to use You got to do a bunch of math To get it so, um That's what i'm going to talk about. I figured it would be good though to start with like You know kind of very very, uh base level. Um, how do you use vector i o and how does the polygon that does exist today work? So, um, that's going to be the first thing that I explain Uh, and we'll take a look at so i'll make a new timecode We'll go vector i o uh polygon Introduction, okay, so If you are interested in vector i o, there's uh, probably the First thing to do is hit the documentation circuit python documentation You can search for vector i o vector i o Uh, which I call vectorio sometimes because I think it's funny Having a rotary encoder would have helped see Keep that banner off of the chat here. So this is the docs for it And there's the three basic shapes that I talked about before the circle the rectangle and the polygon So these is these are how you make these And i'm going to be looking at polygon to start out with I did a little bit of work on rectangles Last week with an outlined rectangle. Uh, but today i'm looking at polygon. So um to start with let's see like What is this polygon thing and how does it work? Let's do that as sort of a baseline So first of all, this is the code for the time stamper, which is not what we want to edit. So i'm gonna Close this try not to Save anything on there because that will interrupt the timer because I still have not turned off the auto reload yet Which I should definitely try to remember to do Code pi here we go. What is in code pi? okay so What i'm gonna do which is bad because I already have a bunch of this file commented out But i'm gonna do it again. So Basically, I'm just gonna kind of turn all this stuff off I'm gonna keep it here because I want to come copy out of it later But i'm gonna turn it all off and just start fresh. So vector i o Polygons, how do we make them? Uh, we need to import Vector i o We need what else do we need vector? vector i o We need a group to put it in vector. I still messed it up. Look at that vector i o. There we go Uh import display i o because we want to get a group In a palette Anything else? Not yet, I don't think so let's give that a try so uh to make a polygon we go Uh, I'm gonna call it test polygon test polygon equals a new Vector i o dot polygon And we passed it a couple of things actually though one of the first things we need to pass it as a palette So let me make a palette palette Equals this one's from display i o dot palette We can have I don't know. Let's just call it five colors Uh, and then let's set a couple of the colors. So zero. Let's call it um zero x Uh, let's see Dd zero zero dd that should be kind of pink. I think um, and maybe we'll set a few more like palette one palette two And let's do a blue And maybe a yellow so like this one. Let's see how those turn out Okay, so we have some palette colors, uh, we pass our palette to this We pass also the points that we want to make our polygon out of Um If that's anything else oh x and y as well, that's right So we're gonna pass some points. Um, and the points are just a list So you create a list of tuples and then um, you pass them in You could also do a tuple of tuples. It doesn't have to be a list. I don't think just a You know iterable object a list like objects. So points Equals uh, and to start with I'm going to do a really really basic polygon So let's just do a square to start with even though Um Rectangle exists right this rectangle exists and this would be the Probably the way you want to make a square um But we can make a square with polygon as well and it makes a pretty good example um, so these points are basically Coordinate points as if you were going to graph this on some graph paper graph paper It's me victor victorio Victorious io Uh, could you not use polygon for all shapes including circle and rectangle? You could definitely use polygon for rectangle um, I Guess you could probably use it for circle as well But you would need a whole lot of points because you basically would need enough points to Uh, round out the edges um And I don't know much about geometry, but I I guess a circle is kind of a polygon technically. I don't really know Um, how it works you could certainly achieve it on the screen though because in our case our circle is actually made up of pixels on the screen, which is a two-dimensional grid and um You know essentially it is a polygon it just has a lot of points basically and a lot of sides Um, so you could probably do that You can also use it for shape for like other shapes that you can't make like triangles for instance So there is no triangle shape, but you can use polygon of course to make triangles I've used polygon uh for arcs lots of points. Yes, you grover says. Okay, so yeah, you could you could use arcs on there Um, I didn't mention the chat, but obviously a bunch of folks are in the chat I'll I'll mention it for anybody that might be new the chat that's on the display there Um right right below me on the screen The first one down is the discord chat and then the one below that is the youtube chat So head over there If you are interested in asking a question or uh, you know just hanging out with the rest of us as you follow along um Okay, let me hide this one So let's start with a square square is really easy Um, and we have like a imaginary coordinate plane here that we're going to put our points in um So Let me I'm probably not great at drawing, but it seems like a thing to do is draw this Let's make a quick drawing real quick. Uh A quick drawing real quick Double quick drawing. Let's just go. I think oh, let's go transparent Then let's paint bucket with black Black oh that was green Black here we go Okay, so when you are graphing like if you take yourself back to geometry class whenever that was for you Um, are you straight? Yeah, there we go When you are going to graph something You would graph it on a thing like this and uh, you know, this is the line There's number tick marks usually counting down here. Those are obviously all messed up on a real graph Those would be straight. Um, but you know, this is the kind of thing where you graph Um shapes in geometry class and the way this works is this quadrant this quadrant up here Is positive. So this axis is the y axis. This axis is the x axis This quadrant represents positive. So y counts upwards this way The first tick mark is y one the next tick mark is y two three four five all the way up to infinity Same thing here. The first tick mark is one for x and then two three four five counting all the way up So, uh, if you graphed point, you know, let's say three three for instance Point three three, you know, this is like you would match up this three here and this three here Uh, whoops, didn't actually select the color. Did I? Oh, that's no Yes, select. Okay, there we go Um, so you would graph point three three and it'd be like over here somewhere Uh, we can make it a bit bigger maybe And, you know, point five five would be further out over here point like, uh, you know, maybe three Or or rather I think it's customary to say x first. So let's say point maybe five three would be like down here, uh, and then, you know point, uh Let's say this one up here is going to be like x three and then y Five or whatever. So, um, these points are basically what we're passing the polygon We're going to give it the points that make up the polygon and then it's going to fill it in with whatever shape it is. So Um, hopefully that Gives you an idea of what like visually what these points we're passing are Um, so I'm going to start with zero zero and I'm going to do something like, uh I just want to start with a square. Um, and then we'll talk about The rotation and stuff with that. So zero zero, let's say maybe just a hundred Uh zero And then a hundred a hundred And then zero hundred So over to the right down to the bottom back to the left and then the uh, the last one is implicit You don't actually it will go from this one back to the first one. So it'll enclose it for you So, uh, these four points here should make us a square So we're going to go points equals points our list Uh, which is actually a tuple not a list, but same same difference Uh, and then we can go x and y. So these are the coordinates that are going to be where This polygon is at on the screen. So let's say 10 10 for right now And we want to draw this on the screen. So we actually have more stuff to do. We need a group Main group Display i o dot group Uh Display we're going to show the group on the display. So board That display dot show the main group Uh, we got to import that board Uh, and now we do need a while true. Otherwise it will only show for a split second and we won't be able to see it But we don't have to do anything in here and I think this is enough for us to get the shape onto the screen Um, let's see 122 extra positional arguments given um Positional arguments. Oh, I think maybe this needs to be pixel shader equals Points must be of type list. Oh, okay. So earlier I said this could be a tuple. I was totally wrong It needs to be a list apparently So let's make that a list Okay, so it didn't crash, but we also don't see The shape oh boy Uh, let's make this print so I can tell If this is actually the device i'm using Yeah, it is okay Since I have the time stamper plugged in as well as yeah, I usually I would just do control cd But if I did that on time stamper then it would stop counting Uh, steven smith. How's it going over there in the youtube chat? Let me catch up here as well Um Okay, so you go over you up using for arcs I was a sys certified sysco trainer in the class that explained ip addresses the instructor guide was advising Not to say it is math as a percentage of american Do block if you tell them It is math Director oh, oh not to tell them that it is math because lots of them have a block to it I would say that's kind of true. Yeah, there's lots of people Who just hear like something is a math problem and kind of shut down a little bit They're just like, oh, I you know, I'm not good at math and then they just kind of leave it at that And I think a lot of people are probably Better than they think if they practice right though if you don't do math a lot then You're out of practice, but like if you do practice even if you're not good at it Um You'll you'll pick stuff up. I think or at least that's my experience. I would say I'm not I don't consider myself particularly good at math um But when I start practicing I can figure it out um Not doing geometry we're doing drawing Well, I'm doing drawing to show the geometry of what we're gonna put on the screen ultimately It still feels like geometry. I don't know if there is maybe not technical definition of geometry. I'm not sure but Um, it certainly feels like it. Oh, okay. Okay. So we made the polygon. We need to add it to the group main group append Polygon there we go There we go. Okay, so now we have a square um and the The zero zero point of our square is what will match up with this X and y coordinates here of the display So we put x and y is 10 and 10 and the top left corner of our square is at 10 10 on the display Uh, if we put this to zero zero then it's going to be full in the top left Okay, so now that's full in the top left But one of the interesting things about polygon is we can actually use negatives for these points um So instead of starting on zero zero we could actually start on like negative 50 zero We could go to positive 50 zero And then we could go Well, let's say negative 50 negative 50 even negative 50 negative 50 We could go down to positive 50 50 and back to Left did I do all of those right? No, that one's wrong Okay, so now we have what looks like a smaller square But really what's happened here is the other three quarters of our square Is up here. It's off the edge now. So our x y zero zero is Aligning with the zero zero point that's inside of here So if we were to scooch this over further now like um Well, we'd have to go by at least 50 so we could go Uh to 60 And this will get us back all the way on the display with our hundred by hundred Okay, so, um Remember the way that this is anchored on zero zero wherever the zero zero point in in this coordinate plane Where all of these other points exist That is like the anchor point of the polygon at least that's the way I think of the anchor point like on the display text library basically Uh and lots of our other widgets as well. So, um, that is how you Define where the polygon is going to get anchored to Which is going to become important Because what we want to talk about next is rotating the polygon So i'm actually going to go Comment this one out make another one And i'm going to put this one back to the one we started with zero zero 100 zero 100 100 zero 100 We're going to put this back. This is the original points. We had we're at a different location now. It's 60 60. So it's way over here now um, but we're back to the original points and So If we want to rotate this square, right? That's kind of our goal here is to be able to rotate this polygon Um, it felt like the mouse pointer was in display. Oh nice Uh, let's see here. Let me catch up a little bit. Uh, a lot from colorado. Love the factory. How's it going? Thanks for tuning in Um, we all use math every day. It's definitely true Uh, for me at least definitely programming for sure Uh, you can count on it. I like it first tuple in the list is the anchor point. No, I don't think so see grover the zero zero um If the first tuple is zero zero then it is the anchor point, but Wherever zero zero is at In this coordinate plane, that's the anchor point even if you don't explicitly have a point on it like Uh, this one does not explicitly have a point on zero zero. It has points all the way around on the outsides Um, but zero zero even though it's not in here is the anchor point still. I think this is how it works um Possibly i'm wrong. We'll see like uh, all of everything i've learned about this is like within the last few days as I was working on rotation So it's also possible. I don't quite have some of it, right? In kind, I believe they refer to that as your reference origin coordinates. That's good to know Uh positive quadrant is Yeah, for a display. That's true. Yeah, this so yeah one thing to keep your mind around is this coordinate plane that holds these points This is kind of a different coordinate plane than these x y's here Uh, you know, these are still x y points in a plane, but this is a different plane Um in the plane where these ones are at It goes down from here positive So positive x is to the right, which is the same but positive y is actually down lower on the screen um Inside of these points here. It's opposite Positive y is up But on the actual display positive y is down. Good point by the way. Thank you for mentioning that Anchor point is the plane not the object. Yeah, the anchor point is the zero zero Of this sort of imaginary plane that all the rest of these points exist in X and y are plane offsets Okay, so we're we're back to zero zero here. So, um, it turns out the math to rotate this is actually not like it's It's already out there. I think actually to ship if the ship was around Uh, I think you shared with me this math Uh rotation matrix is that I think this rotation matrix So this was kind of the first place I got to and thank you by the way for sharing this rotation maker matrix um, so this has an equation Uh that basically allows you to use sign and cosine and input the A particular point and also input an angle for how far you want it to be rotated Um, and then it will spit you back out Like a modified x y so you can take a given point like, you know, 100 zero here You can feed it into this equation along with an angle like let's say 45 degrees Um, and then it will calculate where the new point is with that Original point rotated by 45 degrees Um And so this is fairly similar to what jp talked about I should mention as well If you're interested in another high level quick introduction to vector i o check out the uh circuit python parsec this week jp showed off Vector i o and one of the examples that he has is this carnival game where it's like a Kind of like pong where there's a battle a paddle that runs across the bottom and there's a ball that bounces up and round And there is kind of like a A strand of flags across the top kind of like what you would see at a carnival And those flags are triangles And when jp showed the code in fact, let's pull this up. I could oh, you know what though? It's not um Let's see No, you know what let's not mess with it. Let's not mess with I don't know What happens if you play a youtube video even though ate a fruit obviously owns that video I don't want to like get copyright issues or or anything like that But if you go and look at the parsec, which I think the way to find it right now is in Uh jp's workshop from yesterday. I think eventually it gets broken out to his own video Um, but it should it should be in the workshop from yesterday for sure Um, if you look at all the code for those triangles that are across the top Basically, he took the points that made up his triangle put it into a different program applied the rotation to it And then was like inside that program and then was able to get the new points back out of it And then basically hard-coded a bunch of those new points One for each triangle because there was like five or six different triangles Um another place to see this is back in the circuit python dev channel Um I don't know how far back let's take a look Maybe we could do like a oh, but this thing From John park python dev in Circuit python dev here it is jump This was jp's example. And so what i'm talking about are these triangles at the top here So in order to make these triangles, um, he basically fed this into another program The polygon did the rotation in that other program Got the new points and then hard-coded those new points into the python code that uh, this script Is using so that works, but it's kind of a lot to do right you can't Basically each one of these different triangles is technically a different polygon with different points Um, they all have different x y coordinates on the display as well But because they had to change the points, um in order to change the angle They're all different polygons. So wouldn't it be nice if we could instead Choose our points once that represent this triangle because pretty much all these triangles are basically the same So wouldn't it be nice if we could declare the points for the triangle once and then just say like rotate this one by You know 10 degrees Counterclockwise and rotate this one by five degrees counterclockwise and this one by two degrees And then this one is just flat. It doesn't get rotated at all And then this one is like two degrees the other way and five degrees and 10 degrees Um, or whatever that way you wouldn't have to calculate all those points Externally and then code them into your project instead You just put the points for the triangle and tell it how much you want to rotate it And then of course tell it x y where it should go on the screen So that is what i'm trying to do with this new module um And so I will show what I have so far oops Back it up here just a little bit. Okay So what i'm gonna do is count out this one and then we're gonna go test polygon is actually gonna be a Rotated polygon Which comes from So this is vector io helpers Which is this library right here drop a link in the chat if people are interested You could yeah zoom so scale. I want to do next right now. I just have rotation done Um, but scale should be pretty straightforward as well Wondering if u lab could apply the rotation matrix Uh, probably yes. I don't know the right way to do it with u lab, but probably it could um This is the library that i've been working on vector io helpers rotated polygon right here is the one That I am messing with specifically right now Uh, and the way this works from this import rotated polygon This one is basically like a wrapper around this polygon here, which takes basically the same inputs So pixel shader Is the palette uh points are the points x y are the x y's So i'll just do all of these the same for now And test test polygon Okay, so i'm gonna do it at no rotation first and what we should get is the same The same square Required positional argument. What did I mess up? Let's open the library too And this is all brand new stuff. I just finished writing this like um The night before last night Wednesday Uh, and so like, you know, maybe an hour or two max has what's gone Into this so there's definitely going to be lots of ways it can be improved for sure Uh, but I want to show what I have so far and talk about like what I want to add Uh rotation, I guess it must I see Okay, what we should do is actually this should be zero. We should have a default zero. Let's do it that way And now this should be able to run, right? Yeah, okay. So now we have the same square Um, so this just goes to show like this takes the same kind of inputs as polygon But there's one extra input, which is the special part the rotation right here Um, so how this works is we can pass it the same set of points like the points for our square But we can also give it a rotation in degrees instead of Radiance, uh, which it turns out the formula actually wants radians. So it gets converted internally, but degrees I thought were more common. So let's say we wanted to rotate it like 10 degrees And this goes clockwise. I believe Save that And this redraws and now we have a box on an angle a 10 degree angle But we didn't have to do the calculation for these different points Um, so like if we wanted another box on a slightly different angle, we could just make another Another test polygon We can put it farther over 160 And we can have a different angle Oops, we'd need to add it to the group still Oops, let's go farther Also, let's use our fancy new color index color Index one So now we have two squares This one is actually at a bit more of an angle a 20 degree angle versus this pink one is at a 10 degree angle And the cool thing about this is both of them are declared with the same points We did not have to redeclair a different set of points in order to get our rotation We could have both rotate degrees and radians. Yeah, I like degrees better I'd be happy though if somebody wants to add radians and have it pass through just like my mind like I have No idea what a radian is. I mean, I know it's a unit of degree, but like How far is one radians? I don't have any mental image for it. Um, so like Everything I think of rotations in my head Um is degrees and so that's what I made But definitely if somebody wants to add radians to it by like for sure all by all means, please Uh anybody who wants to help contribute. I am more than happy to help reviews Review prs and stuff on it. Could you make uh my square less square-ish? So it's more clear Where north is. Yeah, let's go more Rectangling So let's say Why don't we go to 50 and 50 So now we have a long and short rectangle Um, and so within each of these the zero zero point is the top left corner The zero one hundred point is over here and then 150 is down here and then back here is the last one And then it automatically closes and so this side here is the top Um, so we're rotating by those degrees Clockwise in the clockwise direction as if That's right, isn't it? Yeah. Yeah hands on the clock. Yeah. Yeah clockwise um Matrix math and rotations having flashbacks to creating games. Yep. So I think eventually we could build a physics engine on top of this and then we could have things like gravity and Uh collision detection and stuff like that. You could get a pretty nice like basic physics engine I think from this two pi is a full turn or something pi radians Pi radians is 180 degrees Maybe a function to convert degrees to radians Uh and back in the library. So there is already yeah math. Oh, I see I'm still catching up to shippu said Which is absolutely right math has a function that does it Radians are measured along the circumference of a unit circle three 360 degrees equals to two pi I will try to remember that but I'm sure I have learned that before and just for whatever reason the Degrees are what sticks in my mind Um So this is what I've been working on this is why I think it's cool is because we can Redeclare the same shape and just choose another Uh rotation for it, which means on something like these flags here. You could declare the flag points once and then you just make you know one two three four five six seven Uh instances of it and each instance is at a slightly different angle Um, and then obviously also a different x y as well So it should simplify the code for that sort of thing quite a bit Um, and I also have it set up where you can Change the rotation dynamically so we could go in here Let's get time We can go in here and we can go another test polygon rotation plus equals one Time dot sleep I don't know just a little bit so We can update the rotation property as well How's it going? Yes in awuka. Thanks for joining us on the youtube chat over there Pi is really a mistake. It should be tau tau is two pi Shall we toss grads into the mix? Oh, is that a different unit grads? Radians are measured along. Oh, I got that one unit of the circle has radius one Okay, so this is cool, right because this means we can change the rotation during the main loop Which means we can get animations like this. They're a little bit clippy Although I will say honestly a lot of the clipping that looks visible here on the screen um Is not quite as bad to the naked eye just looking at the device Just looking at the screen. It does not clip quite as bad as what this video makes it look like But it does clip So like if you're looking for perfect pixel perfect animations that look, you know High definition like an iPhone or something. This is not that but it is basic animations of shapes rotation animations um That we can change over time like this and what's the first thing we notice about how this is rotating We're rotating around That zero zero point So we set this one up with zero zero as our first point of the polygon And that zero zero is where we're rotating around So we're kind of rotating around the corner of this rectangle But we could actually rotate around the center if we wanted so if we did This one which I'll also adjust this one to be let's do the rectangle as well. So We said here So we won't go Let's see We'll go over by 100 But then we'll only go down by 50 Yeah, I think that will get us to Yeah Okay, so now this one is different. It's not rotating by the corner anymore It's rotating by this point like basically the center of the top Because that's where zero zero is In this plane we went negative 50 negative 50 Um, it's actually the bottom not the top in this case because why zero is on the bottom Um, so negative 50 50 were like up into the left We went over to the other half of the quadrant, right? We went to the positive side Then we came down to 50 zero and then back over to negative 50 zero. So The zero zero point is basically halfway between These two points here And that's what we are rotating around. So if we wanted to rotate around the actual center of The rectangle we can do that as well. We can say This would be negative 25 Basically, we need to get zero zero to wherever we want to rotate around so we could say negative 25 and then this can be negative 25 negative 25 What did I do wrong? Oh, uh Positive 25 There we go So now this one is rotating around the actual center point of the rectangle Bottom bottom o top imagine. I'm not sure what you mean, jonathan. Okay. Let me catch up here Only if it's a tardigrad get that that's the space bear, right? I'm impressed how fast the rotation. Yeah, it goes pretty cool. And you can um, I mean you could Effectively go faster by changing the amount of degrees That you rotate per time. So I did exactly one degree each time um, but you could change by 10 degrees each time and then it will Go much faster once it actually starts going at full speed, but obviously the clipping is is way way worse like that I think you can actually do I have not actually tried this, but I think you could do something like this Where it yeah, it rotates by a point one, which of course makes it go much slower, but also smooths it out So um, you have the ability to kind of play with how fast The animation is going to run by how much you change the rotation each time Um, so let me catch up here In trigonometry, the gradient is also known as the gongrad or the grade It's a unit of measurement of an angle defined as one one hundredth of a right angle interesting. I had no idea Um Is the rotation slowing down? Maybe the rotation is getting to a pretty big number Uh, yeah, the code could reset to zero. I think it has I'll have to look back into the code I think there might be something that's doing that if not that's definitely the intention is like If they give it a number that's over 360, then it should drop it back down Uh, good good question an idea c cq Sorry if I I don't know how to pronounce your name for sure. So I apologize if I messed it up That's shippu. So it's 90 Of a hundred of a degree 90 of a hundred. Yeah nine nine tenths of a degree 90 out of a hundred um So this I think is really awesome. I was surprised at how How useful this came out. Um, I thought it would be helpful to solve this kind of Challenge this idea of drawing these shapes that are technically the same shape just at a different rotated angle Um, but it turns out. I think it also has uses for animation and stuff Uh, because you could imagine like making a you know the pong game or something and you could have a spinning paddle That that interacts with the ball and has collision detection Uh, or like some pinball games or something you could have like a rotating target that Um that spins around so Oh, yeah, yeah modulus 360 you definitely could let's check a look at what I did. So I'll show you the code for this um So rotated polygon the initializers here And basically all we do is for each one of the points that got passed to us Uh, we we're building up a list of rotated points and for each one of those points that came in in the constructor We are applying that equation this Equation right here Is implemented in python right here And I don't know about you but to my eye the python one makes a lot more sense I kind of looked at this and it glossed over a bit because there's a bunch like that you have to know About this notation like the way the angles work inside of this Character, which probably has a greek or latin name that I don't know um And stuff like that. I ended up finding a Think stack overflow somewhere somebody had implemented this in like pseudocode Uh, and I adapted the pseudocode to python here So we basically just for each one of our points we calculate the rotated point We put it into this list and then when we actually call to the regular polygon That is when we give it the rotated points instead of the actual points that came from the user And then also in the rotation setter we do the same thing. Uh, we get a new rotation Uh, it's not using modulus. So like right here is where we would go Like this Actually before we do that, let's see if let's let's test and make sure what it's actually doing. So let's go print Rotation what is this actually printing? Is it going bigger than 360? Yes, definitely is So now here this is where we could go mod by 360 And now that should cap it Yeah, now it starts over Okay, do the conversion to radians once please um I could I mean does it I think what I did is like I didn't want it to make a new variable I don't know. I guess maybe it's making a new variable anyway Since this is inside a loop and since you could pass it a lot of points like especially those arc, um Those arc ones see Grover was talking about I didn't know like we'd be making a new Variable each time through I guess we could do like Uh Well, okay. Yeah. Yeah, if we do it in here, then it's not each time through actually. Yeah, we could just go degrees or we could go rotation degrees Like this. Yeah, and again, like I just spat this code out Real quick got it tested. So it's definitely Gonna be lots of room for improvement including stuff like this There it is All right. Oh, I actually only did save instead of paste There we go Make sure that's still working That looks like it So now it's only making one per call to rotation. Although that's Still fairly fast in the infinite loop. I don't know. Maybe it has a way to reuse. I guess we could put it on self or something Um, there's probably a way to buffer it so that we're not actually making a new variable part of my goal though was to avoid As much as possible making variables inside of here because my understanding is making variables inside of here Ultimately means that the garbage collector has to run more frequently To reclaim the memory from those variables and whenever the garbage collector runs it pauses the rotation So it kind of shows as like a hitch uh in the rotation. So I figured That was kind of my rationale for not making a variable was I wanted to minimize the number of variables But I think there's probably a way we could just make one and then not Not be making new ones every time. So this is probably like a pre Like I thought about this when I wrote it as a way to be more efficient But it's probably not actually the case we could still be pretty much as efficient Maybe you could compute once the cosine and sine and then reuse it to avoid doing the math each time Um cosine and sine. Yeah, I Yeah, I guess we do use cosine twice. So we could compute that once And sine as well. Yeah, we could probably do that Theta. Okay. Yeah, right right theta. That's the name of this thing I talked about before this latin thing or I don't know if it's latin or greek I assume one of the two but this like Zero with a dash through it theta You calculate sine and cosine outside the loop. Yeah That's a good point. I should do that change Uh Oh, yeah. Yeah. Yeah my bad. Yeah. Yeah Yeah Good call Thank you. Who is that? See Grover. Thank you. See Grover rotation radiance. This is I think one of the coolest things about Streaming and coding is like getting help Live while I'm doing this stuff like you guys notice stuff That I might not where I messed it up and like it's super cool to be able to have people to bounce ideas off of Uh, is that on the stack or of in the heap that part? I don't know You probably mean or in the heap, but I don't I don't know. I know what those words are, but I don't The truth is I don't have the an actual clear mental picture of like what's what and how it's happening Uh, no garbage collector for local variables at least at least not for floats You compute it for every point rather than once. Yep, we'll make that optimization. There's a whole world of optimizations Uh, yeah Yeah, let's do that one. I do think this this probably should help out some um, so we could say like, uh coast coast val and then use it here and then sign val Use this one here So, yeah, we should be calculating way less now um Not doing math math sign and cosine for each One of those and also not doing the radians for each one. So we were doing three additional operations for every Point before though. We're not doing anymore, which is nice. So thank you all for the ideas uh boba squid How's it going on youtube? Um, I will say too if you take the time dot sleep out it goes fast as I'll get out it goes faster than you would want it to Uh, well, I say that it actually doesn't look that fast now I don't know. Maybe I tried it a different way Or I could have swore I tried this without sleep and it was like Really really fast. Maybe it was back when I oh, maybe it was because this is also slowed down this way It was back when I had it on 10. Yeah, here we go Okay, so if you do one degree at a time even with no sleep It starts to get pretty clippy although again, it does look it doesn't look as bad to the actual eye as it does coming through the The camera here and then also I guess probably getting compressed by the stream and stuff as well Uh, okay, I never did I never did take a timecode for Rotated polygon, but I'll do one right now rotated polygon intro Try to go back after the fact didn't make that better. Again, if anybody is interested in helping out with um Time stamps where we could definitely use help in that area for sure. Um All right, so this is what I've done so far I think it's pretty neat. Um, I will go ahead and update the one in the repo Right that Um, we could also probably turn this off. We don't really need to print eventually I'll just take this out or I guess we could do a verbose or something if we really wanted it to print but This was from back when I was like actually seeing if the math worked or not So what did I do default? arg Value for what was it? rotation or use calculated values So folks are interested you can follow the development there. Um so Once I made this I needed some things to test it with and one of the things that I made to test it with I actually thought came out pretty cool Um, let me Let's go here rotation animation So this is the script that makes this thing And so what I did with this is uh I set up a couple of variables up here the count the radius of the circle that represents like The circle that they're being drawn around Um, so a bigger radius will make these things farther apart if we go to 74. They'll be farther apart Um The polygon points so you can make whatever points inside the polygon you want and then I basically used a rainbow i o which is like the color wheel function to Make a palette that is this size whatever count size is it makes a palette that is that size And it loads it with equidistant wheel results so You know, it's this many colors around the rainbow and it tries to evenly space them throughout the whole rainbow Uh, if that makes any sense and then what it ends up doing is setting each shape to One of those palette colors um So one of the things I want to do is actually Liz showed off Liz Clark Blitz City DIY showed off this video synth on show and tell on wednesday um And what I honestly what I really want to do is make one of those controllers that liz had it's got a couple of slide Potentiometers and it looked like a rotary encoder. Maybe one or two um And I want to hook it up to this I want to have like slide pots that change the rotation and change Uh, the colors maybe or like increase or decrease the radius of that thing. I want to make like a live tweak the knobs and push the sliders and like it changes this kaleidoscope thing Um, I think that would be really fun to play with So I think that is going to be One of the things I'm going to try to do with this new rotated functionality Um, I don't have the slide pots and I noticed they're sold out So it might be a bit before I could get some of those, but I've got some rotary encoders Um, and I think I'm going to hook up those to have them control the various aspects of this I want to play around too though with like the animation. So we have this thing. What happens if we do Some like rotation or what happens if we do some Color changing stuff, what if we go def increment color index and This takes uh This takes a Takes a shape Whoops, it's writing a bunch of JavaScript today Uh, I actually so this code I put in the core. Let me actually just rip it off from here Oops So color index, which is what I'm using to set different colors from the same palette I just implemented this in the core very recently, which reminds me actually if anyone is trying to use this code You have to get like absolute newest build from s3 Uh, you maybe like three or four days ago is when it got merged in So any build that is older than that is not going to be able to work with this thing Because of the way color index is used Um, where are the tests the tests are just in tests, right? Okay vector i o Color index increment color I'm gonna copy this so this takes a shape it If there is enough colors in the palette it increments it by one And once it gets to the end of the palette it sets it back to zero So this is just going to go through the colors and then eventually set it back to zero Uh, so what if we did in here? like for Uh polygon in main group Because groups are like listable uh polygon dot No, uh increment increment color polygon So this will make it like a chameleon right like it will kind of look like it's spinning because the colors will be moving But the shapes will still be in the same spot rotation polygon Ah, okay, so we don't have the property So one thing I found is that I tried originally to extend polygon directly Uh, but it caused a hard fault. I think the deal with that mark actually if mark gambler is watching I know you ran into this at one point So there's like special code in the core that's required if you want to extend If you want to be able to have python code extend a core class My guess is that polygon And probably all the rest of the vector io objects do not have that code in the core That allows them to be extended by python code objects Uh, so what I ended up doing is extending group and then I create the polygon and I add it to the group So uh, we do have an extra layer of object in there eventually it might be nice to extend polygon directly But I suspect it's gonna require work in the core And I don't actually know uh, how to do it uh, chordic is fun Implement i'm not familiar with that looks like probably that's an optimization of some sort Not sure if the time lost from creating an empty array is faster. I'm lost from creating an empty array This one here. I don't know. Sorry. I don't know exactly. I'm a few minutes behind on the chat I don't know what I had pulled up when you said that wishlist rotate the object along the edge Of another vector io object I'm not sure what you mean rotate it along the edge Of another vector io object, but because it rotates around zero zero and because you essentially choose what zero zero is By virtue of the points you pass it like you can make it rotate around whatever point You want as long as you just set it up with the rest of your points so that they Are around zero zero if that makes sense whatever you want it to rotate around Um, yeah sliders I do want to make sliders. So that was one of the things I was also working on last week was async examples Um, and we were building in a slider one and I think this would be a good spot for that as well We could have some sliders on the screen and those would serve as Stand-ins until I can get some of these Slide So there is this by itself, which I could get but truthfully what I want is the easy the easy mode easy plug no solder Easy peasy with built-in leds. This is really what I want because it's stemma And it has the slide all ready to go So I could get the slides by themselves and I you know, you obviously I could do it with this as well, but um I will be real honest like stemma stuff has Spoiled me kind of in a similar vein as to circuit python itself Circuit python spoils me by running my code as soon as I save it and having a extremely fast iteration loop um stemma spoiled me similarly with circuits like Plug and play uh stemma things and just plug stuff together and like You know five minutes flat you have a whole circuit built out with like three different sensors and You know a screen and all this stuff like it it's Tough to ever go back. I'll have to go back at some points, but So, yeah, I think we will do virtual sliders and hook them up ran into issues extending a core class to another core class I think you can extend a core class to a python. Okay, so maybe I need to look into something what I ended up finding. Sorry let me uh Scooch my chair here. I am a bit like scott in that I Infigity while I'm sitting so I'm always constantly getting up and changing and like sitting on one foot and sitting on the other foot and then taking them down and So I apologize if I'm moving around or especially I shake the table, which is bad. I apologize for that, but Um, okay, so maybe it's possible to extend so I don't my Basically what happened is I tried to do an extend a polygon and I got a hard fault and then I just Made the assumption it was because I wasn't allowed to extend it and then I just changed a group and I went on I didn't bother Going back. So really what I need to do is make a reproducer Um, and then make an issue in the core figure out what the problem is Uh define a vectorio circle and then position and rotate a polygon Along the circle's edge I see Yeah, that would be That would be tough because it's not it's not just rotating it's also Changing its x y coordinates I think actually to be honest with you what you are describing if I am understanding it correctly Is what I ended up doing here So to be honest with you see grubber we might be closer We might be closer than it feels like to what you're asking because what I did here So let's go back to this one that's drawing. Oh, it's not drawing right now Why is it not drawing? What is this? Oh, right. I tried to change color index. Okay. Let me comment this out for now So what I did here is, you know, I made the count however many count of polygons And then for each one of them, I calculated a equidistant Point along a circle. So there's like an imaginary circle here And each one of these is put at x y coordinates that are on the circumference of that circle Uh, which is basically like what you're describing up there define a vectorio circle Position and rotate a polygon along the outside of it. So the position along the outside Could use these this math Uh, there's probably a name for this math too. I don't know what the name is The way this thing worked is it takes a Circle radius and it takes a angle And It gives you the point that is on the circumference In the circle at that angle that makes sense. So if you call it a bunch of times Modulus 360 times basically then you end up with equally distant points Around the circle. So I think this actually this x y that's here Um, this could help you do that Right now it's not there's nothing built into rotated polygon that would help you too much I mean the rotations obviously but this part you could do outside of it I would say just put the rotation point on the circle's center That you could do as well If you're getting stuck ping me here, uh, it's been a while since I looked at it But it should be too hard to recall if I start poking again. Yeah, I will do thanks Um, thinking about polygon running around another polygon the path. Yeah, so this would help you around a circle, but not This would be only a circle not other paths. Yeah derivatives to shippos mentioning their paths are hard. I'm still catching up so We're a minute or two behind but I think we're almost there thinking that the path points pixels are already defined within the path object Um, they may be I don't know that we have a path object really that we have polygon when polygon is the Only the points we don't actually only the points of the corners we don't have The rest of the points of the shape Only the corners the math is just the formula for a circle. Okay. Yeah, it's I will freely admit to like I geometry was my worst math subject with geometry I was always like a Guess and checker like if I can see it and if I can tweak a couple of the variables Then I can kind of figure out what I'm doing, but Just the formulas by themselves like they they they don't click into my mind. I don't I don't know what it is. Uh, and and it's like whoever was talking earlier. David I think said something about a block on math. I guess this is that for me Um, and I should probably know better to just like hunker down and study and practice and do it But yeah for whatever reason the formulas never did Never did stick to to memory for me and the theory like I was always a practical more than a theory type of person I can If I have a graphing calculator and I can tweak the inputs then I can start to learn what different stuff does Um, but just looking at the equation. I can't really imagine what it's going to do Without seeing it Um Okay, so let's fix this this color the problem we had here is that um Color index is not a property Color index is a property of polygon, but it is not currently a property of rotated polygon Since we are extending group not polygon We need to actually explicitly make one of these things so Let's do that Color index and it's just going to pass through so it's just going to be self dot Um, okay. Well, it's going to be self Zero because we are a group we can access the polygon at self zero dot color index Yeah, we don't need to copy that color index dot setter Def color index whoa color index. Whoa, why are we not? I'm so used to code completion when it doesn't work. I'm like I don't know what it's doing Huh, let's fix that um Okay, we need to take a new one new color index and this is going to be self No zero color index New color index Now we should be able to set this Should work. I think the object pixel shader 97 increment color Okay, so pixel shader. Yeah pixel shader. It also doesn't have a property for Um, but we could do the same thing basically so basically we need to pass through some of these objects or properties I should say from Polygon up to rotated polygon um pixel shader You don't necessarily need a setter for this to work, but we might as well make a setter. I guess Yeah, that is awesome That is really cool. I want them closer together So I uh, I put this as an example also. I pushed it into the Vector IO helper So if anybody wants to play with this you can grab that example from there And I encourage you to like play with the numbers these numbers here control Uh a bunch of stuff about it So like make your own polygon points change the count go bigger smaller change the circle size Play with it. Have fun. It's it's like really really fun to me at least to like Play with these different values and look at what comes out, which is why I want the knobs. I want to be able to do it live um Let me catch up here Circuit python base graphing calculator. Yeah, it does exist. It does the ti something. I actually have one. Um, is it still over here? ti python something 84 plus python ce Oh, it is so big though Yeah, 84 plus ce python, uh, I I picked up one of these because I had a chance to find it. It was at the Uh, well, actually I missed my chance to get it at the store, but I got one offline. I think it was um It technically has circuit python inside of it That's my understanding but it's like a It's not it's not circuit python. Honestly. It's it doesn't have the usb workflow, which Like I know scott's very passionate about this like the usb workflow is The essence of circuit python and if not like literally the essence of it. It's certainly one of the things that draws me to it Um, so the only way to enter code on that thing is by typing on the keys of the calculator Or if you can get the ti program, there's a special program But it it doesn't work on linux and like there's an open source one And it kind of works a little bit and I tried to install it and I didn't get very far And I ended up giving up so That calculator is out there It's pretty cool. Oh, actually the ship who linked even another one numb workscrafing calculator I should look into that one. Does that one have like the regular circuit python workflow? I really really wanted to be able to just plug it in and see the codepie and edit. I was super stoked um To get that but It's not really what it's like More like a graphing calculator on say the pi portal, which is much cheaper than a calculator Uh c grover if c grover is still here. They've made some uh graphing calculator Emulators basically on the pi portal. They're designed to look like specific grap graphing calculator models Um, also, it's not based on circuit python. It has a samd 21 co processor to run python in It's an environment to do python on your calculator I got to talk with someone on that ti calculator team. They looked at circuit python and micro python to figure out How to do some things, but it's their own subset of python too. Okay. They did not end up then It's maybe not a fork a circuit python Numb works is french. Don't know. Okay. I'll have to look into that the numb works thing would be cool I would love to be able to um to plug it in and Use like The pc and just save a codepie Same Drivers Yeah, I think you drivers They're on the counter. I think um Okay, calculators numb works. I'll have to look into this numb works one. Let me let me take a quick peek now. I'm always, uh I'm always down for a rabbit hole. It's one thing you will learn if you do watch my streams Discontinued, but that just means discontinued from a to for it. I think you can still buy it probably from the manufacturer So the real test for me is like does it exist here? If it does then it like almost certainly has the workflow i'm looking for No It might be possible. It talks about building it on the page here Oh, I closed it already but That's what I really want So whoever is the first company that makes a graphing calculator that keeps the circuit python workflow plug it into the usb and Get uh codepie and edit it and such like that's going to be amazing Adafruit got to ask a few questions on the ti team and got answers vetted by the marketing department. Ah interesting Those angles in metric Numworks is also discontinued, but the emulator works. Oh, is it discontinued from the manufacturer even to? I figured that would be just the adafruit carrying it, but maybe it is also The manufacturer there's a free emulator for numworks Oh interesting I'll have to try that See Grover. Yeah. Yeah. This is what I was thinking of So if folks are interested in a pi portal specifically like graphing calculators on the pi portal see grover Has done a few of these I think but hopefully i'm not hopefully i'm not like Putting putting projects in your in your twitter feed or whatever. I think I've seen a couple of them though If not the ones I have seen are really cool um Really neat uh display i o interfaces just this one. Okay. I must have seen it a couple of times or something Really neat display i o interfaces though too. So if folks are interested in like tips and tricks on display i o That's a good place to get an inspiration from is uh To grover's calculator. I think the problem with making a real sigrapathon calculator is you can't really inject key presses Into the ripple because your program is not running I don't even necessarily need the rep. I mean the ripple would be nice from the pc but I mean, I guess the ripple would be nice from the calculator by itself too It could but I mean like um Can't sarturos board with the blackberry keyboard Maybe q10 So do we this can send keys to the Can this send keys to the ripple? Maybe it can't I don't know for sure if it can I I know the keyboard is connected through I think itc On adafruit didn't look much farther. Okay. That's my guess is maybe just adafruit's not caring It might still be made made by numworks. I'm not actually sure what uh What are we doing there in the youtube chat my friend That doesn't seem very necessary Yay youtube Fixed the instruments. There's the blog post about the ti one I think we would need to either change the core Or when usb host is out then the keys could be on their own device. You can't I assume you can't means to the ripple for The keyboard featherwing Morse code it might have been morse code. It might have been a morse code joke or whatever But it was taken to the point where it was spamming the entire Um thing there and the silly thing about it in my opinion is now we get to see this message deleted by 100 times instead of like the actual chat messages, which is what we really should be looking at because What is the point in deleting messages if they're still Taking up a bunch of room, but this is my own gripe with youtube and not something I should just soapbox about so Uh, you can run a command line in your cp app. You could just use eval Okay, yeah, so you could maybe not go directly to the real ripple, but you could like re-implement your own ripple by eval Inputs coming from your keyboard So take take a little bit of work, but only I can see the messages Okay, well, that's good at least so I wonder maybe if I can So maybe what I should do is Can I be logged into youtube as two different things? Maybe I should do that. Maybe I should use The one on my stream should be like me foamy guy Which won't be able to see those messages because foamy guy is not a moderator But then I'll keep this one open as a to fruit in case we do need moderation Yeah, maybe I can do that if it doesn't show those deleted messages to other people. That's probably then what I need to do is like Keep two open. Although I will say I have trouble enough With two chats and the word doc. Um, if I have to go up to three chats in the word doc, it's Getting dicey as to whether I'm actually gonna Be able to split attention and pay attention to all of them correctly Um, so this is pretty sweet. I love the way this is rainbow rainbowing right here and again the I'll say To the eye it looks pretty smooth And on here, it's kind of got like some chunks like this one in particular is like clipping a lot of the times but To the eye, it's not like that to me at least to my eye. So this is really cool What if we also rotated these things can we like spin these so right now? I'm just like playing with this honestly. I don't I'm not aiming for anything in particular particular I just think this thing is cool. I think it's pretty And I want to play with it and make it do cool stuff You know what? I think would also be really cool ultimately is to make a twitch bot that Uh, so the twitch chat and maybe we could hook it up to discord if we can figure out the way But make a chat bot and have this A program running this like a pipe portal running this thing And then pull it in with obs as its own little window somewhere in the stream and then give the chat the ability to like send commands that manipulate Um the shape and the colors and the sizes and the rotations and stuff So it could be like chat makes a kaleidoscope type thing. Basically. I think that'd be a fun Thing to do ultimately as well. I need to get into twitch twitch bots though figure out how that stuff works I could reload the chat and youtube Um, I appreciate the suggestions. I don't think I'm gonna right now because I don't know if it's gonna like I think it might hit um I don't think obs is gonna keep it and I don't want to mess with the scenes anymore um So I'll test that out. Maybe I'll test it out towards the end that way I know For next time if it does and if it does just refresh fine and obs keeps it Then I'll know for the future that I can just refresh to hide them um, but now I'm afraid of it like changing the way that obs is looking up which thing it is and then Hiding the whole thing and I got to go find it in the list again and stuff. So Not the end of the world, but also Not as fun as playing with these shapes. So can we actually rotate these? What if we go here? In addition to incrementing the color. What if we go polygon rotation? Plus equals 0.5 Okay, much slower much slower So rotating one thing you can go fairly quick rotating 18 things a little bit slower A little bit slower, but really need effect I wonder What if we uh What if we don't do the color for now? Does it go any faster? Better not be the carpet Not the carpet. I hear a cat scratching Maybe so worse. We're not slowing it down much here I guess just the fact that there's 18 of them is slowing it down quite a bit If we try one degree Double speed this one kind of chunks along more than animates But it also looks pretty cool still Rainbow saw blade. Yeah For discord discord pie is back so we can use that. Oh nice I heard about um discord pie. I guess like Thought it was gonna get closed down for a while or something and then There were some forks that came out. So I guess that one's like back up and running now So if we try 10 is it still I assume it's like still chunky, right? Oh, yeah Ooh, but still pretty in its own way Interesting, okay What if we go back to one And what if we put the color back? And what if we make the count smaller nice let's um Hmm, I want it to change colors less but still rotate as much This will do this, right like only One out of 10 frames Not changing at all This Maybe this doesn't work because it's decimals There we go That's pretty sweet nice. Yeah, I I like that. That's pretty cool Um, let's change the polygon though right now. I got this triangle. Let's mix it up some Let's add a fourth point. So what do we have here negative 30? Zero and then 50 zero so all the way over by 80 and then Back to zero X and up to 20. Let's go like negative 60 10 It's way slower this way I think this is probably to do with the size of the thing If it was a smaller shape with that many points, then I think maybe it would uh Still be able to go faster The other thing we might be able to get smoother animations with is like um Messing with the display updating like telling the display not to refresh automatically and instead Explicitly telling it to refresh at a certain time when we're ready after we've made the new thing Um could use a tts like bit loony. I'm not sure what that is. We'll have to look into that And Dave odessa has got a go. So good night all thanks for hanging out Dave appreciate it And the idea there I'll look that up bit bit loony. I'll figure out what that is. I'm not familiar with it But take a look at chat controllable device would be cool. Yeah, thank you. I think that'll be a fun idea Let's make it scroll outside of here disc one of five Had a mini 3d printed tv with an esp running on it the display this printer print status. That's nice I like this screen. What is the price this specific screen? Is a pi portal titano Hi portal titano And it is i'm not sure $50 $60 something like that But this is also the big version of this. There's a slightly There's the normal pi portal, which is a little bit smaller. There's also a pi portal pint Which is even smaller So this is the original pi portal it's $54 $95 And this one is a little bit smaller than the one here. The one i'm using is the titano. This is a $480 by $360. I think that's the resolution whereas this one here the standard pi portal. This is $320 by $240 a little bit smaller $54.95 titano is right here five bucks more Let me make sure I got the size right 320 by 480. Is that what I said? I don't think that is what I said So whatever I said before is wrong 480 width by 320 height is what this one. I'm using is And it's 59 95 and then there's a small one too pi portal pint Which is uh five bucks less. So this one's $50 $49.95 and this one is 2.4 inches But it does have the same amount of pixels as the regular 320 by 240 pixels It's just the screen has smaller pixels. So this is 2.4 inch screen With that many pixels whereas the original is like 2.9 or something 3.2 inch So a little bit a little bit bigger but Not more pixels just bigger pixels Next step implement the asteroids game. Yeah, I I would like to make asteroids as well with uh Kind of like the triangle ship and then rotating around somebody Todd bot I thought I'm pretty sure it was Todd bot made A really nice asteroids game. He ended up using um Not arbitrarily rotated angles like this and instead using tile grid with um Presets of like eight or 16 different Angles so it wasn't like full one degree of freedom like of motion Instead it was like there were eight or 16 different angles all the way around and it just shows the right tile for it But was really cool And I do want to I honestly back when I first started thinking about these rotated polygons was when I was thinking about that and it was around the time that Todd bot made That uh that asteroids game And he showed it off on show and tell I think Running on a bunch of different devices. Uh, so folks are interested you can search back through the old show and tell us to find that This is interesting that it is like it is actually pretty considerably slower on that one And like much smoother with the three I wonder if it's the overall area of this or if it's just the fact of the fourth point existing It's the overall area So as the overall area increases The animation slows down But the number of points it looks like does not necessarily slow it down Everyone's neat looking Maybe the points plays into it too though because this one definitely feels slower and the area is not that much bigger Which I guess would make sense right because rotation inside of here Is looping over the points So to somebody's point earlier, I don't remember who asked about it. Somebody asked about micro lab I do suspect micro lab could probably calculate this stuff quicker I should look into that and maybe calculate an entire An entire list with one operation or whatever instead of uh A loop. Okay. I think what I want to do is let's turn the rotating back off No, let's see the colors on though I mean it makes it feel like it's rotating anyway All right. Oh, let me catch up here equivalent screen with no mcu. Oh, yeah, thank you See Grover linked the screen by itself. So that's a good point. The pi portal has um Has the the microcontroller built in so but you could also get the screen and run it off a different pipe Different microcontroller near doc posted Todd bots asteroids. Thank you More pixels to send to the display to update Almost like a kingfisher bird. Yeah, the one there did remind me of a bird for sure the one I had before Uh, can we do polygon but without the filling? Um, not right now um Right now polygon inside of um Inside vector io. It's always a filled polygon We have the line Which I worked on last week on stream a little bit Line and actually I think originally this code came from uh Either k match or I think maybe jose david They wrote it as like a function and I refactored it into a class Um, but this line class this allows you it basically takes two points only just two points And a stroke size And then it draws a line between those two points so you could Make multiple lines Put them all together And just make sure that the points match up and then it would make a non filled in Polygon it would basically draw the line for the polygon The other thing that you could do maybe is like make a polygon with Um with a really small area that looks like Lines if that makes any sense so like Let's start with zero zero to make it easy and then okay, so we go 50 zero and then we go 50 40 And then we go like 46 40 And then back to something No four this time 46 like zero four Something like this This like an L. Yeah So you could make so I just did two sides here and I don't think I made them the right Size or thickness or whatever one might be more thick than the other But I you could do like this and like make your polygon really skinny and make it represent the A filled in line around your polygon Interesting. I had never thought to do a polygon with only two points So it sounds like polygon by itself maybe works for line Although I will say this line does have the stroke size, which is what What this would do differently than just a polygon with two points What about a vor vor I know voroni verinoy diagram. I don't know what that is Voroni What is that no worries titanium I can look it up. Yep Maybe John Park will have it on for the deal of the day. Yeah, that'd be pretty sweet John JP's pick of the week if you could snag one of those things if 50 off that would be a heck of a deal Or voroni Orinoi diagram partition of a plane into regions Close to each of a given set of objects in the simplest case these objects are just Finitely many points in the plane called seed sites or generators for each seed. There's a corresponding region called a voroni sail consisting of all points of the plane closer to the seed than any other Interesting. So this is like an algorithm that takes a series of points and generates these filled in Like regions that are I don't know exactly how it's choosing like the size and everything But somehow this is like Basically generating all these different shapes that make up the full thing interesting It would be cool to make a script that would generate these and it would be pretty easy I think with vector io because you could definitely make the polygons. I say it should be pretty easy. I have no idea what the What the formula is like or whatever, but oh, okay, it's like Making regions for the closest I see I see this makes sense The way it's described here if all the points was a store like if every single one of these points was a gas station It's the gas station you would go to if you were in That region because it's the closest one That makes sense in my head. I don't know how this is calculated, but we could maybe do this It's just the same thing as mesh and game rendering could be it's a good question. How's it going? That's Patrick? Interesting. Yeah, this would be a fun thing to do figure out how it does like how it generates this and then We could make a script that takes all the points and generates this nice colorful looking diagram thing for us Play it on the pipe world screen. That'd be pretty cool. Um, I want to see what the rotation looks like with this one fairly slow But pretty cool. Oh, interesting. This goes all the way in nice I like it best like right there neat Yeah, this is dangerous for me. I could like sit and stare at this for way longer than I probably should It would be interesting to see what kind of efficiency improvements we could get to I wonder if calculating We should probably do some profiling like what is actually taking the most time Is it calculating anything and if it is then Maybe micro lab could speed it up for us or is the most time actually just in the display update in which case um micro lab won't help us but maybe Efficiency improvements inside the core display. I oh No, no, I see it's not now. Okay, not quite the same as gamer game mesh rendering Um, so yeah, I think that's the two options probably the two most likely is like either The calculations are the slow part or the display updating is the slow part And if it's the calculations micro lab would probably help but if it's the display update then My collab won't help and really the only thing we could do is like inside the core just make display. I owe more efficient Um, which may or may not be possible. I don't know enough about how it works internally But it is that's the kind of stuff. I'm interested in working on so um That's kind of like an aspirational thing I guess would be able to get good enough in the core to be able to like Actually make improvements and make display. I owe more efficient if there is room for um being more efficient best Peroni neti So, yeah, this is what I've been working on. I've been I just wanted to kind of show off like talk about vector I owe polygons show this rotated one show this sort of kaleidoscope thing Point folks to it in the repo if you want to play with it if you think it's as fun as I do Um, the other thing I want to talk about today, which I'll do now and then I'll probably wrap up here before too long Um, I got some other errands and stuff that I'm gonna do tonight. So probably won't go as long as the previous weeks Um, I go like usually this stream will it will go at least two hours So we're coming up on to under the two hour mark like here in just a few minutes Um, sometimes I'll go a little bit longer. Sometimes I won't it just depends on what I have going on that night and You know I'm feeling stuff like that. I usually just go until I feel like getting up and moving around. So that's kind of how I do it I don't really set a a specific Time so of course like folks, you know, if you got other stuff to go and do that's you know No problem at all, right? Don't don't worry if you watch part of it And then have to head out if I'm like going on a marathon or whatever. So Um, but I do think I'll probably wrap it up before too long here tonight Collidoscope, yeah, this is what Collidoscope is exactly what this is making me think Uh, even to the point, you know what I what I thought about was like What if we got and I I it, you know, it's not up to me what Noah and Pedro work on But I know Noah and Pedro are always designing 3d printable stuff. What if we had them design like a uh A telescope like thing right like it's a it's a tube and there's a display at the end of the tube And then we ran a program like this on that display that's on the end of the tube And then maybe we could have like tourney things or rotary encoders or something And like it could actually be like legit collidoscope experience, but digital um I thought of all of this when I started making this This little color rainbow rotating script. I think something like that would be Super cool as well um But yeah, even if not that even if just on the pie portal without the without the whole 3d printing I do think this would make a good like a good guide collidoscope guide and it could be The only guide we have so far. So then the first guide that's focusing on vector IO Uh, currently there's no other guides that talk about vector IO. It's relatively new It was created by a community member to a hug report to a warrior of wire. That's the name of the person on discord that made A vector IO. So they were just a community member and they implemented all this stuff for us. So it's super awesome um And I do think that would make a good that would make a good guide collidoscope maker And it's basically a script like this with a bunch of variables that you can uh That you can tweak And maybe even hook them up to the rotary encoders And then it just does these different patterns I think that'd be super cool internet connected. Even yeah nice um Okay, so this is the main thing I wanted to work on I'll introduce the other topic I had in mind So if folks saw the title of the video, I think I put something in there about like, uh Was it say tabbed layout or something? um So I'll tell you what I'm thinking about on that front and this came to me from a person Got ahold of me through Uh, my website actually. Oh, this reminds me Right when I was very first starting The stream today somebody asked me about my other work I forgot to answer, um And I forgot who asked but I will if you're watching whoever you were I will scroll back and find you and I'm happy to give you that information I don't necessarily want to make it public in the stream right now. I don't think um I will give you the hint if you're eagle eyed And you look at my pie charm when I open files you could probably find a reference to it um But I for for now, I don't I don't want to just make it public all the way But I am happy to point you to it if you're interested in specifically that industry anyway Does Adafruit make a circular screen that was one of the first things I looked up I did not see a pure circle, but what I did find is there's a rounded one There's a rounded one like this one is the one I found I think you could mount this like at the end of a Like a telescope type thing and especially if it's all dark inside right like you won't really see the edges and so Yeah, there definitely are other round displays as well Zarnalyn. Okay, sorry Friend, I did not mean to ignore you. I saw your thing and I will Send you a message a little while after I get done here Did you key has rounded ones? Okay should look into that. How's it going, buddy? Got the stripey cat here. Okay, so tabbed layouts This this person I won't say their name I don't know if they want me to share and honestly, I don't remember their name off the top of my head They reached out to me through my contact form on my website Um, maybe I'll ask them if they're cool with having their name shared And then if so then I'll give them a hug report or something this week This person reached out to me through my uh my contact form on my website And uh, I think they're on the discord as well. Maybe um And was asking about like async IO Examples because like last week I worked on some async IO examples And I'm gonna get back to working on async IO stuff Mixed with display IO stuff I still want to come back to that slider example that I worked on last week and Maybe even this kaleidoscope stuff we could do maybe with some async Action in it. So, uh, I that's probably what I'll be getting back into next week. I'm not a hundred percent certain But um, you you can bet at some point. I will be getting back to async stuff Specifically they reached out to me to ask about like basically A modern version of this pie portal Pie portal interface this guide This guide was made like back around the When display IO got made So I think display IO came out like with circuit python 4 or circuit python 3 Maybe even I'm not sure somewhere in there and I think this guide was published around that time And this guide shows you like a Kind of like a a little mobile phone Application interface basically it's got three tabs and then on each one of the tabs It's got a different like page and you can click between the views and get the different pages Um, and then it also has got buttons which are shown on all the pages. So like the page is only the center section here and basically what this person was asking for was Pretty much a modern version of this example Updated with the latest display IO stuff. So like we just got More features in display IO than when this thing was written. So there's a couple things we could probably make better um And with async this is this none of this stuff, you know async didn't even exist in circuit python when this was written So none of this stuff is written with async in mind But it'd be really nice if we had an example that was relatively complex like this like in terms of a Uh a learn guide. This is actually a pretty complex project, right? Like as far as like display interfaces go um This is definitely one of the more complex projects in the learn guide system But it makes a good example because of how complex it is like you can Take different parts and out of it and reuse it. So, you know, if you want to make your own tabbed layout This is a good guide to come through for inspiration um And so what I want to do is like that that's my end goal is to basically be able to recreate Unapplication that's like this we might take some liberties and do a couple of things differently It might not end up being the exact same, right? Like we might probably not going to have the exact same buttons Uh and all the exact same functionality and stuff. I'll probably do different stuff with it but this concept of like a complex interface definitely I want to have the tabs um I want to have those tabs linked up to different pages And I want to also be able to have stuff that's outside the pages So like these two buttons down here, these ones are static. They get shown no matter what page you're on Um So I figure I will do this as a as a stream project. I will work on this on stream Um All the way through so I don't know exactly how long it will take me I don't know exactly when I will get started on it or what all I will break it down into But this is like the overall goal that I want to make is Modern version of this uh using async and the latest display io best practices um And then once we get it, I'll talk to Uh like lady eta and pt and ask about doing a an updated guide for it either updating this guide or making a new guide Um with all the new stuff in it Like to do gauges and a control panel there is a gauge widget now ask patrick If you haven't seen that it's in um GitHub circuit python. This is in circuit python org which holds a bunch of the display io stuff. There is gauge We should put a picture here of what it looks like um If you haven't seen this yet though, uh, check out this gauge inside circuit python org Let me catch up on the chat as well Oh ask patrick linked us a digi-key screen async vector io Watches are circular true. Yep Digi-key. Okay. I think we're back to here now. Okay If they're looking for an example my turn timer on is on github, which has a few moving parts That hasn't written instructions. They were looking for specifically the uh This type of interface with the tabbed interface like this Um, I do know Oh neat, that's a project having meaning to do does display or vector io make it easy to add graphs I want to use the display to toggle updating a graph so Uh display io vector io themselves don't necessarily make it easy to draw graphs But we do have widgets that can help you cartesian right now. This is another widget. Um Who just said that? Graphs keep the e check out this one. This is also in circuit python org Um display io cartesian this one. I think there are pictures of this one actually This one, um It is like a graph plane But it has been enhanced to have the ability to draw lines inside of it So it's like this By default this can make the plane and it can make a point inside the plane And it does all these labels and everything for you Um, so I assume this is what you're talking about when you say graph If not, then if you mean a different kind of graph then i'm going off on a tangent It's probably not related, but um, that's what this widget does it allows you to make these The axis lines and it puts all the labels and everything And you can put a point inside of it and you can also do a line now Um, it's not there's no lines in the photos yet But this add plot line will allow you to just put a like a make a line graph Basically, you can make your line going somewhere and then make another line going somewhere and then make enough So like for all your different data points you can add Uh new lines to represent each one of them So if you're talking about a line graph This can help you do it. If you're talking about some other kind of graph, unfortunately I don't know of any other helpers that are out there just yet But it would be nice to get some more like you could probably repurpose this into a bar graph pretty easily, um So if you're talking about a bar graph, this doesn't just do it right out of the box But you could probably repurpose it fairly easily If you're talking about something else like a pie graph or any other kind of graph then We probably will need a new widget I'd like to do gauges for a control panel It's an awesome goal with display o and vector i o nice Oh, that is a sweet looking interface See Grover nice job That has like a graph going at the bottom. What is the side there? That's part of a graph too This is these are like bar charts or something on the side, right? They're telling you something based on these colors That is awesome Good night to shippu That'll either give me what I need or give me a format that I can make a pull request to bring it in Thanks for pointing that out. Yeah, for sure. And see Grover. Thanks for showing me the display you made. Yeah um And I'm pretty sure k match is working on Something for that cartesian as well I forgot what it was. Maybe the ability to have multiple like lines together or something like that I don't remember the exact thing. I know k match Uh is working on enhancement for that as well So you might try to catch him on the discord sometime When he's around if you're interested in that cartesian thing Um, so yeah, this will be the project. I think At a bare minimum, I want to make a tabbed layout widget. So Like right now today we have um display layout. We have this library Which has inside of it um A grid layout And I think this tabbed thing The top half of this screen basically I think of this as a tabbed layout So I think what I'm going to do is make a widget that facilitates making this UI this idea of buttons that hide and show pages Uh, I want to abstract this into its own layout widget, uh for this library. So it'll be like tabbed layout in here And it'll have a constructor you pass it like The different tab labels and you pass it the groups that represent each page or something or maybe you add them one at a time I want to try to make this as easy as we can with a reusable, um With a reusable widget So that's going to be part of this project is making that tabbed layout But obviously also all the async code To do all of this advanced complex display handling and stuff That will be a big portion of the work as well. I think so How's it going Johnny? Thanks for tuning in although I will say I'm about to head out here pretty quick. So, uh Maybe high high high and bye as it is, uh Johnny But if you're around tomorrow, I'll uh, I'll catch you then as well So for folks that don't know I do stream on saturdays as well It's on my own channel on twitch foamy guy underscore twitch is where you can find it Um and I stream on saturdays starting at 10 a.m. Central time which is Uh A little bit under 16 hours from right now. It's like 10 minutes less than 16 hours from right now So whatever time zone you're in In 16 hours, it's going to be Something 12 probably That something is when I stream on saturdays. So if you want to catch me and you're in a different time zone Um, that might be a more convenient time. I don't know for sure. Obviously, it depends where you're at I know this stream deep dive is kind of late for some folks Um, so I chose saturday morning for my other stream In order to try to be at a different time in those time zones Animated gauge, yeah a seagrover this coffee thing Um that seagrover is made is really nice too. This is like a uh, It weighs your coffee for you There's a lot of good documentation. I went through the get hub for this thing at one point Looked through all the stuff You've even made like the circuit for this thing too, right? This is like a whole custom Custom circuit you have I think too with a feather or something on it. It's really cool. Oh, hey, thanks, uh Raven Raven crow appreciate the follow there Uh, I was about to say that's interesting because I'm not even on my own twitch But I just said it a minute ago. So probably when I said it this person found it And so I have the because the followers are popped into my obs they they overlaid onto here So thank you for following me over on my own twitch over there Um So yeah, I'll be back in the morning. I don't know, you know what I'll be working on but that's for folks in different time zones that can help out but um, yeah So basically the long and the short of it is that's the the next kind of sort of major project I want to work on and what I would say is like I'm putting Opening it up to folks like what What do you want to see out of that? Like if you wanted to find a new example project for a display IO complex interfaces Mixed with async.io. Like what are the things that you would be looking for most from that project? If you have ideas for what you think it should do if you have ideas for how like what things I should try to break into widgets I am all ears on ideas for like How this thing should be besides the rough idea of Kind of like this one here. I don't really have anything more specific other than The tabbed layout. That's the main thing I have in mind that I know for sure. I want to do But I'm pretty open to other ideas This on off button We don't have a widget for that right now. Hey, whoa, don't grab me, buddy There'd be cats down here and tried to grab my leg Um, I don't think we have a widget for on off button. So that'd be maybe a good one to add Uh, like check boxes. We don't have that might be an interesting one to add. There's a couple like interface widgets we could do Um, but yeah, if if folks have ideas, please reach out to me on um Anywhere basically discord is probably the easiest but like You know if you want to email me you can my email is out there if you find it Like I have a website that you can find where there's a contact page. That's how this other person got back to me so reach out to me if you have ideas for Everything in react native probably won't be going to react. I learned react for a specific part of a thing I made at work and it's uh React is weird still to me. I don't have a lot of practice with it But I do think we're at the cutting edge of making Something like react for circuit python some framework. So we're kind of like in the process of defining The right way to write the code to do this stuff. So We could certainly take inspiration from some of the stuff that react does async io pulling eta fruit io sensor values would be neat I know that dan is uh ultimately going to be working on um async io support for uh Requests Which would probably be part of that although I think async io is a lot of mqtt as well. So but I also imagine like After requests gets done with async probably the other types of network interfaces like mqtt as well and um, hopefully ultimately web sockets would be cool as well Screens navigation stacks etc So screens, I think you mean like the different pages and so that'll be part of the tab thing I also do want to make the tab layout to where it's optional to have the buttons Like some folks might not be using a touchscreen and I want to make this layout work for them as well So like if you imagine a a pie gamer or something, right? It doesn't have a touchscreen But it does have a d-pad. So I do want to make this tab layout to where it's flexible enough that um You know, you could use it on something like this as well and you would not be able Maybe you see the labels or something, but of course you don't touch them Uh, you know, maybe you just use the d-pad or the a or b button to move between them. So Um, that will also work if you wanted to use it as like a full screen page thing of like, you know Here's the intro page and here's the sensor page and here's the settings page or whatever If you wanted to build up an app like that Um, this will help you do that as well All right So that's the plan feel free to reach out. Um, I think I am going to call it a night for now So thank you to everyone who watched thank you to everyone who hung out in the chat and offered up ideas and all sorts of Neat questions and and all kinds of stuff. I appreciate all of you Again, I'll be back tomorrow morning at 10 a.m. Central time So that's again now we're closer to about 20 minutes less than 16 hours from now Which is a weird way to say it. Yes, but 10 a.m. Central time Um, I still haven't looked up utc. So I don't know but somebody could maybe look that up if you're interested So that's when I'll be back Of course, I'll be back next week at the same time as I was today for deep dive Deep dive is it every friday for the foreseeable future. I'll be doing deep dives Um scott. I think their partner's due date was today. Maybe for the baby. So I don't know I haven't talked to scott today. I probably won't be talking to scott for a while I suspect he'll be pretty busy, but uh, definitely everybody sends, you know, good vibes scott's way for sure Um, eventually he may be back. Well, it definitely he'll be back at some point I don't know if he's going to take back over the deep dives probably sometime But for the foreseeable future that'll be me and that's at 4 p.m Central which is my time on friday is usually it's announced as 2 p.m. Pacific though Because his time zone is specific and he started the show. So I'll be back one week from today at that time as well So lots of ways you can catch up if you want to watch GMT is the other name yet for utc Um, yeah, I don't know the right time though. I guess it's probably five or six or or something I don't or maybe it's into the afternoon. I don't know what time it is utc 10 central and utc I don't know for sure. Um, but that's when I'll be back. So yeah, thanks everybody I'll catch you tomorrow morning if you want to watch I'll catch you next week if you want to watch or whenever you whenever you tune in next I will be here. We'll be having fun. So thanks again everybody and I will see you then Let's go