Introduction to the Art Canvas+ Playground
Watch this video to learn more about the new Art Canvas+ Playground in VEXcode VR! Learn about the added Pen capabilities, how to upload images to the Art Canvas, how to download your creations from the Art Canvas, and more, so that you can make the most of this playground in your setting.
Welcome back to the VEX Classroom. My name is Alaina, and in this video, we're going to be talking about the VEXcode VR Art Canvas+ Playground. We're going to go over some of the new pen functions that are part of this playground. Also, how to upload and download images to the playground or from the playground, and some ideas for use in your classroom using some of our resources.
Let's go ahead and get started and take a look at this playground. So here I'm about to start a new Blocks project. Everything that we talk about in this video today can also be applied to coding a Python project. I will just be showing you Blocks, and I can mention some different Python things as we go through.
The first thing to notice is some of the differences between Art Canvas and Art Canvas+ that we can see here. If you look in this top left, Art Canvas actually has the grid markings on the Playground as well as walls around the side, versus Art Canvas+ that can be seen here in the middle has no walls. It is a completely blank field as well as having this gray border inside of the Art Canvas+ playground.
You notice a few things that are different right off the bat. There's differences in the playground that we discussed. There's also an additional menu here. This menu can be used for uploading or downloading images, and we'll talk about that in just a little bit. Some of the other differences are inside of this looks category. So we have the traditional set pen color block that has the four options. Also, though, in Art Canvas+, we have the set pen color that uses a slider system. This has RGB values from zero to 255 that you can choose using a slider. It also has opacity, so this changes the transparency of the color.
This could be really cool to use if you wanted to layer different colors, talk about color mixing, and how they layer together. If you use opacity of 100, this is a percentage, then any color is gone over top of each other. That top color will remain the dominant color versus if you had two 50% opacity colors, those would actually be mixed together. All of these values inside of a Python project can actually be done by putting in values from zero to 255 for red, green, and blue, and then zero to 100 for the opacity.
You can see here as you slide each one around, it actually changes the color up inside of this block. If I ran the project, so we're just setting our pen color to this blue, you can actually see the top of the pen changes to that same blue color. So you have that visual indication on the robot itself of what the pen color is.
Beyond the pen color, you also have the option for various pen widths. By default, the pen is set to the thin width option. So if we move the pen down and drive forward, we can actually see what this default size is on the playground. I can see that here there are also four other widths that are options here in this project. Here you can see I have some rainbow colors off to the side that I have set. And I also have them set to start from extra thin going up to the extra wide option. So as the VR robot drives forward, that width actually increases as you go through, which makes for a really interesting appearance on the playground.
One of the last features that we're going to talk about is the fill option. So here, let me remove these blocks. If we go back to our looks category, we have the option to fill that area with color. So if we wanted to do this, we could drag this into our project. Let me move this down, and we can fill the area with color. What's going to happen is the pen is going to decide what's inside of the immediate area that it's above. So let's say we wanted to add in some sort of blue. We'll just do a regular blue color now. Because my robot is directly above this purple line, if I run the project and fill that area, it will actually fill just that section with blue.
Thank you for joining us in this exploration of the VEXcode VR Art Canvas+ Playground. We hope you found this video helpful and inspiring for your classroom projects.
If you have any questions or need further assistance, please feel free to reach out. Happy coding!
It becomes really cool if you wanted to do any projects around color by number or maybe filling in certain areas. You could actually upload an image of something like a map and color different states or countries. Those are all some really cool things that you could do with the fill area.
If I drove forward before filling the area with the color, let's say we'll drive 200, let's make this a maybe more of a light blue teal. So we'll bring our green up. If I run this, the robot's going to drive forward and it will fill the rest of the area outside of the gray border. With this, anything that's over the gray border will not actually be drawn, so you want to make sure you're thinking about that.
Now, I have this great image that we've made together. What I can do is I can actually download this image. There are two different options. If you wanted to download just what's on the playground—no robot, none of the data from this window—you can use this first piece. You can see here it actually downloaded and saved just what was on the playground. It did not include the gray border, did not include the robot. This can be really cool to use in some sort of classroom gallery or bulletin board where students could actually share their art pieces from our canvas plus with one another.
The other option inside of this menu is actually to save the entire playground window. This will save the sensor data at the top, the timer as well. You can see here it has all of the sensor data, it has the colors, it has our timer, all of the information from that playground window is inside of this option. This is a great way for students to share their projects with you, with others, with people at home, without having to recreate the project on their device.
The last option inside of this menu is actually to upload images. Let's take a look at how we can do that. Here I have opened the Vexcode VR activities, and I want to look for an activity that just uses Art Canvas+, so we can filter that out. You can also do this as you're creating any kind of connections for how you want to use this in your classroom. You can see some different options, like a word search, color by number, lifecycles.
What's great is you can open something like the word search activity, which is a Google doc, just like others that we have. Here you'll see information about an image upload. These are all linked in Google slideshows. If I open this Google slides, I can see here, this is the word search that we're using on the canvas. These images should be 1000 by 1000 pixels, which is the ideal size, something that you can do inside of a slide like this is set those dimensions. It's the ideal size for use in the art canvas plus playground. We can download this specific slide as a PNG image, which is again the ideal situation. We can download this word search and actually go right back to VEXcode VR and upload it onto the playground.
Now we're back in our playground, but some of the information is still on their playground. If you wanted to clear it all at once, you can go ahead and hit this trash can. I'm going to reset the position of my robot and my timer, and now I have a clear canvas to upload my next image. Now I'm going to use this first option and select from my downloads folder where that image was saved. Now I have uploaded my image. You can see this on the canvas, you can see my word search, the letters, the words here. Now I could start building a project that can cross off the different words, both in the word bank at the bottom or at the top.
There's more information about both uploading and downloading images from the Art Canvas+ Playground and inside of the VEX STEM library. Those articles will be linked below as well as information on how to use Google slides in order to create these images. Again, all those resources will be linked below.
These can be a really great option as you're trying to make connections between the vocabulary that you have for that week in your classroom. You have all sorts of options for how to apply this in your classroom by being able to upload images. If you don't want to have to worry about that with your students, there are also activities like the Mondrian patterns.
You can have them go through a history lesson and learn about this artist and then go through and apply and try to create those Mondrian patterns. It's also a great math connection, talking about parallel and perpendicular lines and the angles you need to use to create those, as well as something like the protractor activity where you have a chance to measure different angles and actually draw with your robot on a protractor on the Art Canvas+ Playground.
I cannot wait to see what you and your students do and create on Art Canvas+. I'd love it if you would share your Art Canvas+ art galleries with me in the community. Or if you share, make a bulletin board and you can share that as well.
Cannot wait to see what you do and create, and we will see you next time.
Let's go ahead and get started and take a look at this playground. So here I'm about to start a new Blocks project. Everything that we talk about in this video today can also be applied to coding a Python project. I will just be showing you Blocks, and I can mention some different Python things as we go through.
The first thing to notice is some of the differences between Art Canvas and Art Canvas+ that we can see here. If you look in this top left, Art Canvas actually has the grid markings on the Playground as well as walls around the side, versus Art Canvas+ that can be seen here in the middle has no walls. It is a completely blank field as well as having this gray border inside of the Art Canvas+ playground.
You notice a few things that are different right off the bat. There's differences in the playground that we discussed. There's also an additional menu here. This menu can be used for uploading or downloading images, and we'll talk about that in just a little bit. Some of the other differences are inside of this looks category. So we have the traditional set pen color block that has the four options. Also, though, in Art Canvas+, we have the set pen color that uses a slider system. This has RGB values from zero to 255 that you can choose using a slider. It also has opacity, so this changes the transparency of the color.
This could be really cool to use if you wanted to layer different colors, talk about color mixing, and how they layer together. If you use opacity of 100, this is a percentage, then any color is gone over top of each other. That top color will remain the dominant color versus if you had two 50% opacity colors, those would actually be mixed together. All of these values inside of a Python project can actually be done by putting in values from zero to 255 for red, green, and blue, and then zero to 100 for the opacity.
You can see here as you slide each one around, it actually changes the color up inside of this block. If I ran the project, so we're just setting our pen color to this blue, you can actually see the top of the pen changes to that same blue color. So you have that visual indication on the robot itself of what the pen color is.
Beyond the pen color, you also have the option for various pen widths. By default, the pen is set to the thin width option. So if we move the pen down and drive forward, we can actually see what this default size is on the playground. I can see that here there are also four other widths that are options here in this project. Here you can see I have some rainbow colors off to the side that I have set. And I also have them set to start from extra thin going up to the extra wide option. So as the VR robot drives forward, that width actually increases as you go through, which makes for a really interesting appearance on the playground.
One of the last features that we're going to talk about is the fill option. So here, let me remove these blocks. If we go back to our looks category, we have the option to fill that area with color. So if we wanted to do this, we could drag this into our project. Let me move this down, and we can fill the area with color. What's going to happen is the pen is going to decide what's inside of the immediate area that it's above. So let's say we wanted to add in some sort of blue. We'll just do a regular blue color now. Because my robot is directly above this purple line, if I run the project and fill that area, it will actually fill just that section with blue.
Thank you for joining us in this exploration of the VEXcode VR Art Canvas+ Playground. We hope you found this video helpful and inspiring for your classroom projects.
If you have any questions or need further assistance, please feel free to reach out. Happy coding!
It becomes really cool if you wanted to do any projects around color by number or maybe filling in certain areas. You could actually upload an image of something like a map and color different states or countries. Those are all some really cool things that you could do with the fill area.
If I drove forward before filling the area with the color, let's say we'll drive 200, let's make this a maybe more of a light blue teal. So we'll bring our green up. If I run this, the robot's going to drive forward and it will fill the rest of the area outside of the gray border. With this, anything that's over the gray border will not actually be drawn, so you want to make sure you're thinking about that.
Now, I have this great image that we've made together. What I can do is I can actually download this image. There are two different options. If you wanted to download just what's on the playground—no robot, none of the data from this window—you can use this first piece. You can see here it actually downloaded and saved just what was on the playground. It did not include the gray border, did not include the robot. This can be really cool to use in some sort of classroom gallery or bulletin board where students could actually share their art pieces from our canvas plus with one another.
The other option inside of this menu is actually to save the entire playground window. This will save the sensor data at the top, the timer as well. You can see here it has all of the sensor data, it has the colors, it has our timer, all of the information from that playground window is inside of this option. This is a great way for students to share their projects with you, with others, with people at home, without having to recreate the project on their device.
The last option inside of this menu is actually to upload images. Let's take a look at how we can do that. Here I have opened the Vexcode VR activities, and I want to look for an activity that just uses Art Canvas+, so we can filter that out. You can also do this as you're creating any kind of connections for how you want to use this in your classroom. You can see some different options, like a word search, color by number, lifecycles.
What's great is you can open something like the word search activity, which is a Google doc, just like others that we have. Here you'll see information about an image upload. These are all linked in Google slideshows. If I open this Google slides, I can see here, this is the word search that we're using on the canvas. These images should be 1000 by 1000 pixels, which is the ideal size, something that you can do inside of a slide like this is set those dimensions. It's the ideal size for use in the art canvas plus playground. We can download this specific slide as a PNG image, which is again the ideal situation. We can download this word search and actually go right back to VEXcode VR and upload it onto the playground.
Now we're back in our playground, but some of the information is still on their playground. If you wanted to clear it all at once, you can go ahead and hit this trash can. I'm going to reset the position of my robot and my timer, and now I have a clear canvas to upload my next image. Now I'm going to use this first option and select from my downloads folder where that image was saved. Now I have uploaded my image. You can see this on the canvas, you can see my word search, the letters, the words here. Now I could start building a project that can cross off the different words, both in the word bank at the bottom or at the top.
There's more information about both uploading and downloading images from the Art Canvas+ Playground and inside of the VEX STEM library. Those articles will be linked below as well as information on how to use Google slides in order to create these images. Again, all those resources will be linked below.
These can be a really great option as you're trying to make connections between the vocabulary that you have for that week in your classroom. You have all sorts of options for how to apply this in your classroom by being able to upload images. If you don't want to have to worry about that with your students, there are also activities like the Mondrian patterns.
You can have them go through a history lesson and learn about this artist and then go through and apply and try to create those Mondrian patterns. It's also a great math connection, talking about parallel and perpendicular lines and the angles you need to use to create those, as well as something like the protractor activity where you have a chance to measure different angles and actually draw with your robot on a protractor on the Art Canvas+ Playground.
I cannot wait to see what you and your students do and create on Art Canvas+. I'd love it if you would share your Art Canvas+ art galleries with me in the community. Or if you share, make a bulletin board and you can share that as well.
Cannot wait to see what you do and create, and we will see you next time.
Share
Like this video? Share it with others!
Additional Resources
View the following resources related to the concepts covered in the video as you continue your learning.
- Using the Playground Window in Art Canvas+
- Coding the Pen of the VR Robot in Art Canvas+
- Creating and Downloading .png Images from Slideshows for Art Canvas+
- VEXcode VR Activities
Like this video? Discuss it in the VEX Professional Learning Community.