 Right, so welcome to the second interactive session by Paula Dosa. I hope I'm pronouncing your name roughly correctly. Yeah, that's right. Okay. That's okay. Right, so Paula has previously worked as a software engineer for Google and Golden Sacks, I believe, and she was well-acquainted with being the only woman in the room. So she's very passionate about bringing women to tech, and she joined as a co-founder and lead developer in Imageelabs in Stockholm. So today, we hope to hear more about it in this interactive session. So take away Paula, and if anybody at any point have any questions, feel free to ask on the Matrix channel or directly into the Zoom session. Yeah, and I think we also have quite a lot of people watching on YouTube. Okay, awesome. So, yeah, today I'll be giving a workshop on creative coding in Python, specifically using the tools that we have developed at Imageelabs. And so I'll start with just another quick intro of myself. So I'm one of the co-founders and also the lead developer at Imageelabs, and I'm based in Stockholm in Sweden, which is where I am calling from today. And I studied computer science at the University in Abu Dhabi at NYU Abu Dhabi, and I am originally from Romania. Cool. And then in terms of Imageelabs, so our goal at Imageelabs is to equip and empower teenage girls to shape the future with tech, because we believe that if technology is the future, then women need to be equally involved in tech in order to have an equal chance at shaping the future with tech. Great. And in terms of the products that we've developed, so we have a mobile app, the Imageelabs app, through which you actually can learn how to code. And you also, by learning how to code, you also are able to create projects in the Imageelabs app that you can then share in the community that we have. And you can also upload them to something called an Imagine Charm, which is a device, it's like a smart accessory that connects to your phone via Bluetooth and basically allows you to express yourself by showing what you've created with others. And these are just some of the examples of projects that have been created by users in the Imageelabs app. So these are eight by eight pixel projects. And you can see here that we have animations and all sorts of different things that you can do. So even though it seems to be a relatively limited workspace, there's definitely a lot that you can create with this. And these are just a few of the over 10,000 projects that have been created by our app users. Great. So today we're actually going to learn how to create projects like this using the Imageelabs app. So what I'd like participants to do now is head to either the App Store or Google Play and download the Imageelabs app. And if you don't have access to a mobile device, you can also use our web app for this workshop, which its features are a bit more limited because it's still in beta. But you can definitely use that for the purpose of this workshop. So I'll just give people a few minutes to do that. And as you can see on the right of my screen, I actually have the Imageelabs app up on my phone. So this is the iOS app and Android app look a bit different. This is the iOS app. But as soon as you have the app installed and you're signed up, we're going to head to this create section where we're going to be spending most of our time during this workshop. So this is a code editor in the Imageelabs app. So yeah, I'll just wait three minutes or so to give people some time. Yeah, thank you for sharing the link. Okay. And while people are signing up, I'll just go out to get an image arm so I can show that to you as well. Okay, and if I could maybe get like a thumbs up in the chat either here or on the matrix on chat, when someone has successfully signed up. Okay, it looks like we have one sign up here. I'll just wait 30 more seconds. And if you're having any technical difficulties, the slides are linked to the events. So you can definitely go through these later. And I will also be coding live throughout the session. So you'll be able to watch this as well. And just quickly, I wanted to show you the magic charm. So it's this really cute accessory. You can see here, there's a little smiley project on it already. And throughout this workshop, I'll be also uploading some codes to it so you can see what it looks like. Okay, I think we can get started with the workshop then. And the first slides are again, just introducing the concept of coding with Imageelabs. So you still have some time to catch up if you haven't finished signing up yet. Great. So as you saw in the projects that I was showing you earlier, we basically have this eight by eight matrix that you can work with. And this matrix is very similar to a chessboard. So over here, we have a chessboard, and you can see that the rows are numbered, and then the columns have these letters. So for example, if you wanted to identify this position in the board, what you would do is you would look at the row number and column number. So it's on row six and column D. And in just notation, we call this D six. And so this is really similar to how the Imageelabs matrix works. So the Imageelabs matrix is called M, which is just short for matrix. And when your programming in Python, something that's important to keep in mind is that we start counting from zero instead of one. So here you can see that both the rows and columns are numbered. And the numbers are from zero to seven. Okay, so M has eight rows and eight columns. And this means that we have a total of what we call 64 pixels. So we call them pixels, because as you saw in the image charm, these are basically lit up LEDs, which kind of look like pixels, and you're basically kind of creating pixel art. Okay, and now we're going to see how we identify pixels on the matrix. So on the chessboard, you look at the row number and column number. And this is very similar to what we do in the Imageelabs app. So for example, we have this pixel lit up over here, which is on row two, and column three. So the way you would identify it is by using these two numbers, and the name of the matrix, which is M. So in this case, we're going to do M of two and three, because the row is two, and the column is three. And I'm actually going to now type this into the Imageelabs app. And you can go ahead and do this as well. So again, as I was saying, we're going to be spending our time in the create section. This looks a bit different, a bit different between the various apps we have, but you should be able to end up on a code editor that looks similar to this. So I'm going to start typing over here, M of two and three equals on. So what we're doing now is we're just turning this pixel on by typing this in. And I'm going to run my code. Okay, I got a success message. So it seems like everything should be okay. And now I have two options, I can either preview my code in the app, or upload it to a charm. We're going to be using the preview button, since I'm not sure if people have imagined charms today. But if you tap preview here, you can see that this pixel now shows up as lit up on our matrix. And I'm also going to just upload it to the charm. So you can see how that works. If you're curious. So I connected via Bluetooth. And now I can see the pixel is lit up here. Great. So we just wrote our first line of code in the imagine labs app. Great. So I'm just going to show these again, this is what the app you still like, so you would like to create. And this is similar to what the Android app looks like. So you create. And then you select this new blind project option. And then you type in the code. And then you press run. And that's how you end up with this option to either preview or upload your your code. So hopefully people were able to get that far and actually preview their code in the imagine labs app. And then now we're going to go on to doing something a bit more complex. So what we're going to do is create this smiley where we have several pixels which are are lit up. So in order to do this, what we have to do is just add some extra lines of code for the for these pixels in the smiley. So I'm going to start with these I pixels. So I'm going to do m of two and two and set this equal to on. And then let's see what the second pixel is on. So it's on row two column five. So I'll type that in as well. If anyone here wants to tell me what the first mouth pixel position is on the very left. Also for typing. So it looks like the row is five and the column is one. So I'll just type it in here. And I see someone is happy that we have a web app since it's a bit tough to type on your phone. And I agree. But one of the reasons we made this a mobile first experience is that because through our research with girls and not just girls, but teens in general, we found that they spend a lot of time on their phones. So we were trying to leverage that and try to bring a productive experience to their mobile lives. m of six and three. But I agree. If you're a more experienced coder, you probably prefer typing on your laptop or computer. Okay. And as you are typing, you can always. Oh, awesome, Vicki. Thanks so much for backing us on Kickstarter. So as you're typing, you can actually run your code and preview it just to make sure that you're on the right path. Like I see this looks pretty similar to the smiley on my slides. I'm going to continue typing some code here. m of six and five equals on. And I think now I just have one more pixel left, which is the edge of the mouth m of five and six equals on. Cool. And I'm going to run that preview that. Great. I have a smiley and I'll just upload it to my charm again. And I can see here I have a smiley. Awesome. Cool. I'll just leave this code up here a bit in case people are still typing. But hopefully you are. Yeah, you were able to create this project so far. And you might have noticed after signing up that there's this Explorer section in the mobile apps. So you can actually share the projects that you've created to the community there. Okay, nice. Sneaky, smiley. Great. And then you also have the option to share these projects outside of the app. So there's a share button and the iOS app. And you can add like backgrounds to your projects or even take photos or create stickers out of the projects that you've created. Cool. Okay, now let's move on to adding some color to our project. So so far what we've done is basically just turn pixels on. But it's actually possible to add some color, which is something you've seen probably in the projects earlier. So there are several ways of adding colors. We'll start with this one. So we have some keys in the keyboard in the app. If you tap on this like rainbow key, you can see some color keys over here. And which are the colors of the rainbow. And so what we can do with these colors is actually type them instead of on. So we just type in this first letter of the color. So like either r or y or whichever color you prefer, and just replace whatever is on with one of these colors. So I'm going to do that for the eye colors. So let's go with like a green eye, for example. And now I'm going to run this code again and preview it. And I can see that's my my eye now has turned green. And then I can do the same thing with the second I pixel and make sure to run your code whenever you make a change. So the latest changes are reflected. And I'll preview this again. And I can see I have two green eyes. And so we can continue doing this with all of the pixels that we have. So here, you can see on the slide, the eyes were set to blue. Of course, you can use any of the colors you like. So let's do the same with the mouth pixels. So I'll add some purple lipstick to my smiley. And I'll just quickly replace all of these on pixels with key. And I'm going to run this code, preview it. And I can see here that I have a smiley with the green eyes and a purple mouth. And again, it's up on my charm. And you can see here that it shows up. Cool. So I'll just move on to this next slide. So you can see some sample code over here, or people able to get their smileys colored. And again, these are just like this is a very limited number of color options. And on the next slide, I'll show you how to also note the small smiley I really like it. Cute. And I'll now show you how to actually add some more colors to your projects. So you can actually generate millions of colors in the image labs app. And we can do that using something called RGB colors. So using the RGB color scheme. So RGB is a color system that constructs well, not all the colors, but at least millions of colors from the combination of red, green and blue. And the way we specify RGB colors in the image labs app is by typing in these parentheses around like brackets this time, and then typing in three color values. So these color values represent the amounts of red, green and blue that we want in the color that we're creating. So we're going to learn a bit more about this through a little quiz. Okay, so can anyone here tell me what color this RGB value represents? Knowing that the first color stands for red, the second number is green, and the third number is blue. So it looks like we have a lot of red in this color. So yes, we end up with the color red indeed. And I'm actually going to go ahead and change one of the pixels in my spiley to this color. And also something you should definitely do as you're typing is don't forget to save your code. So there's a save button in the app. And on the web app, you can type in a name for your project and then save it. So I'm just going to call this smiley. So I can make sure to go back to this later if I want to. But for now, what I wanted to do is replace this green value with this color. So I'm going to do 255 00. Run that preview. Okay, so when I did turn red here. Great. And so let's see. Yep. So the color was indeed red. What about this color? zero 255 zero. So we have no more red here, no more blue. But we have a lot of green. So we ended up with this color here. And this is equivalent to typing G in the app. So for example, here, if I replace this G with zero 255 zero, I'm going to end up with the same green color that I had before. And of course, it's possible to not just use zero 255 values. But we are just doing this for now. I'm just to get accustomed with these three three values. Okay, but here we have a bit of a trick here one. So we want to end up with magenta. And you can get a bit of a hint of what the RGB value would be by looking at the the three color circles on the the right of the slide. So we can see that we combine red and blue. We end up with this purplish magenta color. It's actually the way we do this is by using equal amounts of red and blue. So I'm going to try to do this for one of the mouth pixels. So I'll set 255 zero 255, run that preview that. And yeah, I can see here, there's a slightly more magenta or pinkish color than the purple that I used before. Great. And then we have yellow, which again is a combination of two of the of these main colors. So for yellow, we would use red and green. And we would end up with this color. So we use red, green, and no blue. And if we run that preview that, we can see that we ended up with this yellow color. And if you are using the iOS app, after this workshop, you can go ahead and complete quest three in order to unlock this design tool that you can use to create more colors. And if you're using the web app, the design tool is automatically accessible. Unfortunately, not available on Android yet, but you can just generate colors also using Google's color picker. So here you have some examples of colors on a color wheel and their RGB representations. Okay, so now I've already done some replacing of these predefined colors with RGB colors. And I'm going to try and go ahead and create some colors using values other than 255 and zero. So I'm just going to go with a random color here. So I will use equal amounts of like red and green, and then use a lot more blue. And let's just see what happens there. Okay, so I ended up again with a purplish color. And then again, you'll be able to use a design tool on the iOS app if you go through some of the quests. And in this case, I'm just going to pick this like aqua color. And I'm going to long press on the color, which will copy it. And then all I have to do is head here and paste that color into my code. And I'll do that for the rest of the pixels as well. Okay, if I run that preview that, I can see that. And I'm actually going to go and just change all of these colors to be consistent. Okay, I'm just going to type them in 242, 209, and then I'll also stick to the same color for the eyes. Okay, let's see what we have so far. Okay, we have an aqua mouth. And I'll do some like brownish color, which I guess I can do. I'm going to check the design tool by going over here. Okay, okay, I ended up with this smiley now. And then if we look on this sample project on the slide, we can see that we have a slightly different color scheme going on here. But you can use whatever colors you like. And as you can see in my code, sometimes I use spaces, sometimes I did not use spaces between the numbers. Best practice is to use spaces that just makes it a bit more readable. But if you're in a hurry, or you just want to type quickly, you can just put just separate them with commas, without adding an extra space. And again, I will upload this to my charm. And I can see here that I have a smiley this time with these RGB values. And yeah, so as I mentioned, there are some quests in the iOS app. By doing this workshop, you're actually getting like a 60 minute version of the learning content we have. And you're actually learning about more than what we currently have in the quests. And we're constantly working on adding more learning content to the app. But we also teach coding through through workshops like this one. Great. So hopefully people have some RGB smileys on their devices. And now we'll find out how to write code a bit faster and also be able to customize our code a bit faster. So we can see here that we actually have that's a really cute smiley. And I like the different colors for the mouth. Awesome. So yeah, for those who are watching me be on YouTube, I'm just commenting on some of the projects that are being sent in the matrix chat. Okay, so that's a lot of repeated code. So we're going to find out how we can use something called variables to help us code and also change things faster. So if you've done some coding before you probably have heard of variables, but I'll just give a quick definition here for those of you who haven't. So variables help you store and also label pieces of information. And so they consist of two parts. There's a name, and then there's the value that the variable stores. And it's best to pick names that are representative of the information they store. For example, if you wanted a variable that you would use to store an eye color, you could call it eye, and this will make your variable easier to understand. So here we have this example of a variable called eye, and then its value is an RGB value. And the way you assign values to variables is by simply using the equal sign, which is what we've been using to also assign colors to pixels on our matrix. So what we're going to do is we're going to instead of assigning the color every time to our pixels, we're going to store these colors in variables. So here we have them called eye and mouth. So I'll just go with eye equals, and then I will make eye equal to the RGB color that I used. So it's 12861 to eight, and then I will make another variable called mouth. And I'll set this equal to the mouth color I used, which was 125242209. Great. And now I'm just going to go swap these all out, which will take a bit of time now. But in the future, you can just use variables from the very beginning and then and then just use them throughout your code. So now I will do this manually. So mouse, mouse. And again, you can call your variables, whatever you like, I could have called them E and M, if I wanted to save time on typing, but decided to go with these names, because if I look at this code again, in a year, it'll be easier for me to figure out what I was trying to do. Okay, and now if I run this code and preview it, it looks identical to what I had before. And that's because all I did was just change the the way that I assigned these colors to my pixels. But the cool thing about this code is that if I now want to change the mouth color, for example, instead of having to go and change each of the six mouth pixels, I can just change the value of the mouth variable once. And that will update the color for all of my mouth pixels. So for example, here, let's say I actually want to go with one of these color pixels. So I'll go with P instead of an RGB value, run that to preview that. And the mouth is set to purple. So you can definitely also use these letter colors as variables, or you can type in another another RGB value. So I'm going to go with 200, 120, or actually let's go with all the same number and see what we end up with. Yeah, so if you use basically the same value for all three colors, you're going to end up with either white if you use 255, 255, 255, or black if you use 0000. And if you use any number in between those two, you'll end up with some sort of gray color. So in this case, it's like a lighter gray, because we're close to white. Cool. So hopefully you were able to get a variable yourself. You can also just switch to using a variable for one of these. So just for the eye or for the mouth. And don't forget to also save your project. Nice. Cool. Okay, so it's only been like 30 minutes, but we've already learned about variables and all about RGB values. So I think we've been super productive so far. And we're going to go ahead and learn even more programming concepts. And this again is like a super fast tracked way of learning how to code. But hopefully, if you have questions, you can you can ask, ask them after this workshop. And also these slides again will be available to you. And you can continue learning on your own. Great. Okay, so so far we've made this smiley. And now we're going to learn how to create something that looks a bit like this. So this is a rainbow. And if we were to color each of these pixels individually, like what we've done so far, you basically have to type like 64 lines of code, because you would have to access each of these pixels one by one, and set them to a certain color. So we're going to learn how we can use something called a for loop to color this much faster. So we're going to start by just coloring the first line in this project. And again, a bit of coding theories. So for loops, help us repeat one or more tasks a certain number of times, or until a certain condition is met. So there are different types of loops. And today we'll be talking about for loops specifically. And so using a for loop, you can have a block of code run for every value within arrange. And that might sound a bit abstract, but we're going to go with like, an actual example, so you can see how this works in in practice. So again, our goal now was to color this line of code, this line of the matrix and turn it red. So let's start by looking at what so with the knowledge we have so far, we probably would have gone and done this, which is just color each of the pixels on this line individually. But if we look at this code, we can see that there are several similarities between all of the lines of code here. So does anyone want to point out what is similar between these lines of code? Yes, the row is similar. So it looks like they're all on rows zero. Yeah, the row indeed. And then there's one more similarity here. And the color is indeed red. And then beyond these two similarities, we also see a pattern. So we see that we start at column zero. And then we go all the way to column seven and we just go one by one through each of these column numbers. So yeah, let's just repeat. So each line of code has the same row number, which means that we can create a for loop, which loops over the values that are incrementing, which is the which are the column values. Okay, so this is the syntax through which you would do this. So as I said, we're using a for loop. So we would start by typing the word for, which is basically signaling that we are starting to loop over some sort of value. And so what we but I said earlier was that we want to loop over the column values. And so we do this by writing this variable name for the column. So I used call and you could call it whatever you like, you could use C or type the whole word column if you wanted to. But let's just go with call for now. And then we want to loop over a specific range. So the way we do this is by typing in the words in range, and then typing in the values of the range. So if you look at the code, you can see that we go from the value zero to the value seven. But then it looks like our range goes from zero to eight. And the reason for that is that in Python range from x to y means all the numbers from x to one less than y. So range zero to eight includes the numbers zero one, two, three, four, five, six, seven, but not eight. And here, something important to note as well is that the code that we want to execute inside of our for loop is indented. And this basically means that we have to type in a tab, or a couple of spaces to basically indent this code inside, so that our computers or phones know that this code has to be executed within the for loop. So I'm going to go ahead and actually type this on my phone. So I'll start by, first of all, creating a new project. So I'm going to go with a new project. And I'm going to type in four. And you can see that the code is going to be highlighted. Like whenever you use the special, like Python syntax, syntax, you end up with this high code. And if you're on the mobile app, there's also this snake key on the keyboard, where you can see these words as well. So you can quickly access them here instead of typing them out. And then I'm going to put in the range from zero to eight. And now I'm going to type in m of zero call. So what we're doing here is we can see that the row stays consistent. That's zero. And then it's this call or column value that changes as we loop throughout this for loop. So here we're using call and setting this equal to read. And now if you try running this code, and previewing it, you'll see that you end up with one line that is read. And you can play around with the range values. For example, instead of ending at eight, you can try and end at like five, let's say. And if I run that and preview that, I can see that I ended up with a shorter line. So basically, it's looped over these five values. So zero one, two, three, four. And you can also change the starting value of the range. So you can go from like one to five, for example, do a run preview. And now you can see that we started from one pixel to the right of zero. So we start at one. And we go all the way up until the pixel on column four. So I'll stick back to zero eight, so that we end up with that rainbow that we saw earlier. And now let's figure out how to add some additional colors to the rainbow. So if we go ahead to the next slide, can anyone tell me what the indices would be here? So what should this third line of code look like now? In order for this second line to show up or second row to show up as orange? I see that there's someone typing. Great. Yeah. So M of one, which is row one. And then we again, we use call equals Oh, great. So now if I run this and preview it, I can see that I ended up with an orange line. And there we are. Okay, and now let's go ahead and fill in the rest of the rainbow. So all of the colors on this rainbow are in the color keyboard. So you can just use that. And I will also be typing along here in case you get stuck at any point. And don't forget to use them to indent all of the code under the for loop. And if I forget to indent my code, so if I do this, for example, and try to run this. What happens is that I end up with only one pixel colored yellow. And this is like the last value that call had, which was seven. But it wasn't executed seven times like the other two pixels. So if I wanted to be executed, or eight times as like the other pixels, I can do this run preview and end up with this. Great. And then we should just do this for the rest of the rainbow. Also, and I see there's some interesting loops going on here in the chat. And it's great to make you that you're you're seeing your older projects. Yeah, so the web app basically syncs with the the mobile app in terms of your private projects, so you can access all of them on the web app. And yeah, if we have some more experienced coders here who prefer typing or writing code on their computers, you can definitely use the web app. And that syncs with the mobile app. So you can open your projects on on both. Awesome. Okay, mf3 and call. Where did we leave off? There's green. mf4 and call equals where we add aqua mf5 and call equals blue. I'm going to go with purple now. And then we have one last which is magenta. And now if I run this and preview it, I can see that I have the rest of the rainbow colored in. And I'm just going to save this project before I forget. You can also use emojis as your project titles if you'd like to. You can also add emojis to your code. If you want to there's quiet a few. We sometimes joke around and say emoji labs instead of the magic lives we really like emojis in this company. I'll just put up this rainbow code up here as well. Oh, it's nice. I see you combined the smiley with the rainbow. That looks really cool. Awesome. Okay, so I see we have some some loops going on here. So I'm going to go ahead to the next concept we'll be learning about, which is animations. And I think this is like one of the most exciting things about coding and image apps. So actually bringing your code to life with these animated projects. So for example, we could make an animation where instead of just showing the full rainbow at once, we actually show it one column at a time. So before we learn see the code for that, and we're going to learn a bit about animations in general. So this galloping horse is the first animation or like movie ever created. And so how exactly was this made? So it's basically made by putting together a lot of pictures which were taken one after the other or frames. And then if you play them really quickly one after the other, it basically looks like there's movement, right? And so this is very similar to how we create movies today. So you might have heard of the term frames per second. So that basically means okay, how many frames are we playing per second? And so the way you create animations in the image labs app is super similar. So we use frames, and then we add them to an animation, and then we play them one after the other, and end up with these animated projects. So we're going to start with a very basic animation. So I'm going to save my changes in this project and go ahead and create a new project. So we're going to start with something simple. So just two animated pixels. And I'll go ahead and copy the code that I see on the slide over on my device. So m of zero and zero equals aqua. And then m of zero and one equals aqua. So now if I run this code preview it, yeah, I see two aqua pixels over here. And what we're going to try and do now is actually animate these pixels. So show one pixel and then two pixels. And so now we have a bit of theory, which is normally what you would learn in like, I guess a first semester of like a computer science class at university. But we're going to learn how to apply this knowledge right now to create these animations. So will we start? Well, we, okay, so what we have to start by doing is creating something called an object. So the way you do this is you first pick a name for your object. I'm going to call it a, which I will use as like a short version of animation. And then I'm going to set it equal to something called an animation class. So you just have to type in animation with a capital A, and then put these round brackets, opening and closing at the end of that. And then what I'm going to do is after each of these pixel lines, type in a dot add underscore frame m. So what we're doing here is we're basically saying, okay, we want to add some frames to our animation object. So you have to type in the name of the object, which is a, and then do something called calling a method or calling a function, which is an R case called add underscore frame. And then we want to basically add the matrix to our object or that current state of the matrix. So we do this by typing in round parentheses, and then putting in an M. And this will have to be done whenever you want to add frames to an animation. So you'll have to type in the name of your animation, in this case, a, and then dot add underscore frame m. And so what happens now is once I've typed that, if I run this, I can see that I've ended up with an animation where I see one pixel first, and then I see two pixels. And so what happens when you create ad frames is that whatever you had in your previous frame is still present. So if I wanted to clear the frames in between adding them, I could type in clear, like you can see on my phone right now, and then run that, preview that. And now you can see that instead of having one pixel and then two pixels, I only have one pixel show up at a time. But it's up to you, maybe you want two pixels to show up at once. And then you can go ahead and add even more frames to your project if you want to. So I'll go ahead and type in like m of zero and seven, let's say equals aqua, and then just type in the same line of code we did earlier, which is a dot add underscore frame. And now I can see that I have three frames. And because I didn't clear the code in between the frames, I can still see that second one. But of course, I can clear it if I want to. So just type in clear. And that just resets the matrix so that you only have whatever pixel you colored before adding that frame in your frame. And there's definitely like a lot that you can do with this, you can just browse through explore later on if you want some more info for these animations. But our goal for these animations was to for now create this animated rainbow. So I'm going to exit this code for now. And I'm just going to call this like, it's three pixel animation, save that. And then I'm going to go back to my rainbow. So hopefully you have that code saved somewhere. If not, it's up on this slide again. This time it's animated. So what I'm going to do is what I did before, which is add an animation object to my project by typing in a equals animation. And now the next step is to add frames to our animation. And instead of having to type eight or add frame every time we want to add one of these eight frames, all we have to do is just add it once inside of this for loop. Because as we know, for loops run a certain number of times. In this case, it is it runs for till of eight times. So we can just press run here, preview. And now I can see that I actually have this rainbow show up column by column. And if I were to only add the frame once, if I didn't invent it inside of the for loop, and try to run this, I would just get the same project we did before. And that's because I'm only adding the frame once. So again, if you want to have this actually show up in an animated way, you have to make sure that you indent your code. And you can do that either by typing spaces or using the tab key on the keyboard. Great. So here we have it. We have this rainbow. And again, you can play around with the ranges, you could make a smaller rainbow, like starting from three, two, let's say six. So it's just going over these, these values. And we can learn or we can use clear, like I did before. So if after adding each frame, you can type in clear. And then we only see one of the, the columns at a time. Cool. So there's definitely a lot you can do with animations. So for example, we had one of our energy coders create this rising sun. And then there's also this all time favorite, which is the smelting ice cream. She even added this like fading effect, which I thought was really cool. And again, if you browse to explore, you can definitely see a lot more of these animated projects. Great. Okay, and I'm going to just pack in one more programming concept into this workshop, which is functions. So I mentioned functions earlier when we were adding frames, I said that that was a function that we were using. So we're going to learn how to actually create functions ourselves. And we're going to learn how to use them to create something like this without having to repeat too much code. So functions basically make it easier to reuse code that you wrote. So let's go back to the smiley project that we created earlier on. So I'm going to go overhead over here to the smiley. And here we have some here, for example, the code was using like the predefined color variables, I'm using RGB values, you can use either one. So what we're going to do is we're going to put our code inside of a function. And the way you do this is you start by defining a function. So you tap in the word, or the short term def, which is short for define, and then give your function a name, I'm going to call it smiley. And then you have to add these brackets around brackets. And type that in like that. And then everything that's inside of your function, just like we just like with for loops has to be indented. So I'm just going to go here one by one and indent my code inside of the function. So this will take a little bit of patience. If you're on the mobile app, on tab tab. Okay, so I wrote this function. So I defined it by typing in def and then giving a name to my function. And now I'm going to run this code. Oops, I got an exception. So the exception says that the matrix is empty, which is confusing maybe because I typed in so much code. But the reason for this is that after defining a function, you actually have to to call it. And the way you call a function is by just typing in its name. And these parentheses again. And now if I run this and preview this, okay, I have my smiley, it's over here. And so another thing we can do with functions is add something called parameters to our functions, which you can then change whenever you call the function. So for example, here we have this eye and mouth variables. And what I'm going to do is add them as parameters to my function. And then I'm going to remove them from this function definition. And now when I call the function, I have to basically I can now assign the values for the eye and mouth variables. So in this case, I'll do a and r. So basically, we turned our variables into function parameters. And now when we call the function, we can just directly add these parameters. And when you call call when you call functions, these parameters actually are called arguments. Yeah, there's a bit of terminology there. But all you need to know is that basically, when you call a function, you just have to assign values to these parameters that you added to the definition. So now if I run this and preview this, I can see that I have the aqua eyes and red mouth. And then if I want to change these values, I can go ahead and type in like yellow magenta and run that preview that. Okay, and what I wanted to do was by to end this workshop by combining our knowledge of animations and functions to create this smiley which alternates its eye and mouth colors. So at the very top of our code, we now have to add an animation object like this, which is what we did earlier. And now I'm going to type in a dot add frame after my first smiley function call, and then do another smiley function call. And you can do whatever colors you like, I'll do magenta and yellow, and then add this as another frame. I'm going to run this now, preview that. And I can see now that I've ended up with this alternating smiley. So I realize that might have been really fast. But again, this code is available for you to look at later. And I'm available to answer questions as well. And there's so much that you can do with coding in general and with the image labs app. So we have projects that are like super creative. So for example, we have this color wheel that a user created. And then we have like more logical projects, for example. So someone created this project where they randomly generate a number between one and six. And so they were able to use the imagine charm as basically a die when they were playing board games. So that's like a fun application of coding as well. And we have a lot of resources through which you can actually find, find out more. Okay, nice, Vicki is so awesome to see someone with an actual imagine charm of this workshop. Awesome. So I'm just going to send some links now in the chat for these various resources I linked here. So there is the learning hub. And the learning hub is our learning center actually, is where you can find project samples. And you can also find more learning materials, and an FAQ and lots of magic goodies to help you on your learning journey. So I'm going to send the link over here in the chat for the learning center. What else we have is we really love challenges. And we have something called a 30 days of code challenge, where you have 30 prompts for various projects that you could create. And if you manage to do all 30 of these, you get a super cool badge in the in the app. So links to this as well. And this is also under the learning center that I linked earlier. And then what we also have is a discord server. So maybe some of you use discord, but this is basically a place for our community to come together. And if you have any questions, you can ask them there. And we also have some voting sessions there for the magic challenges that we we run in the app. But this is the best place to stay up to date with everything that we have going on at imagine labs. So I'll just send the discord invite link over here. Great. So that yeah, so and then there's probably other resources I'm forgetting about. But yeah, we also have our website at imagine labs.com. If you are curious about the magic charm, you can check it out there. And I'm actually going to make a discount code for the participants for this section session. So if you use Euro Python 15, you'll get a 15% discount. And I'll make sure to activate that right after I'm done with this session. So yep, that was it for today. I'll link again to the slides here so that I can make sure let's see how do I exit this? Okay. So that I can make sure that everyone can access these later. Cool. Creative coding and Python slides. Okay, and I guess we have a few more minutes. So maybe I could answer some questions here if there are any questions. But that was it in terms of the coding part of today's session. Yeah, thank you so much. I think there are quite a few people typing so we can wait for this bit and see yes. Yeah, thank you so much to everyone who participated today. It was great to see some Kickstarter backer here as well. Yes, the Kickstarter project is actually how we funded our first batch of imagine charms. And it looks like Vicki here was one of our earliest supporters. Thank you for that. Yeah, I personally had a lot of fun as well. Just now with fingers is a really nice way to spend the lunch break and a little bit more to just play with some code and colors. I think it was really lovely. Thank you so much. Awesome. Yeah, thank you so much for participating along with the workshop. Yeah, that's that's way for more people to see whether they have any questions. Would you be hiring about a little bit more during the conference in case people want to catch up? Yeah, yeah, so I'll be I'll be available on this messaging system. And then also, if I'm not available there, you can also email me at paola at imagine jobs.com and we can continue the conversation there. And Vicki in terms of sensors for the imagine charm. So that's on our roadmap. But right now, we're actually working on a really exciting development with bringing a game to the imagine charm. And you'll be finding out more about that soon, hopefully. Yes, same Vicki, I can I cannot wait as well. Really excited about this. Yeah. So the imagine charm itself. So the my charm is not actually running Python. So we run Python in the cloud. And then we just send over the the output to the imagine charm via Bluetooth. So you actually need internet access to be able to use the app and run code there for now. But maybe yeah, one day we will actually run it on the imagine charm. And that's also of course how we make the output of the code available on the device, even if you don't have the on your mobile device, even if you don't have an imagine charm. Okay, I'll I guess the session is up, but I'll stick around in the in the chat a bit more and answer any more questions there. No, no worries. Yes, so feel free to just use the the chats over there by text and leave the zoom for now. And you could also join the wonder me on in the lounge area so that you can form a little circle and then chats in a more like social way. Yeah. Okay, awesome. Okay, thank you so much, everyone. Thank you so much. Okay, have a good rest of your conference. Thank you. We'll take another hour of a break and then come back later for the last interactive session. Thank you very much. Bye. Bye.