In this lesson you will learn how Canvas' interactive coding tools can help you write code better and faster. We will work on many fun coding problems and build several cool video games. All right. Let's code and innovate. So, let's learn about how to create simple animations with ChatGPT Canvas. I'm going to prompt the model to create a simple sine wave matplotlib animation. As you can see, it creates code that we are going to copy and paste it in VSCode in order to run and visualize it. So as you could see, I copied it. And then you're going to open the VSCode, paste the code. And then I'm going to run demo.py And you can see there's a sine wave animation. Now let's try to make some modifications to that. So let's modify the plot to be more dashed, red and the lines to be thicker. Let's see what changes was made. We can also try to modify from 3 to 4 let's say. I'm going to copy and paste it again in VSCode. Run it. And you can see that it made a change to the plot and the animation. So let's create a new animation that will be a matrix style flower of life visualization. And I'm asking the model to use numpy Python. So it now creates a script that we can copy and paste it in a VSCode. And run it to see if it works. And it created the matrix style visualization. Now let me change the language that it wrote. There is a feature in Canvas which is called Port to a language. And we can choose which language do we want to port to. So I would like to change from Python to JavaScript. So let's click on this and the model will try to rewrite the code instead a JavaScript. Now I would like to ask for some modifications in a way that it will create an HTML file. I'm asking to create a self-contained HTML file. So it will be easier for us to render on the web. So I'm going to copy and paste it again in HTML, and then see the fact on the web. So now it wrote the same script in a different language. One of the most powerful use cases for ChatGPT Canvas is to ask the model to explain some kind of concept, and then use it to visualize it. So that's what we're going to do right now, where I'll ask the model to explain the concept of the Kuhn's theory of scientific revolution and write it in Canvas. As you can see, it wrote text about this concept.And now I will ask it to create an interactive simulation that explores this concept behind the theory and in quite an engaging way. And I'm asking you to write in D3 and a self-contained HTML file. As you can see, you can also close the window and it will continue to generate the code. You can also go back and forth between Canvases. So if you want to read back about the revolution, or go back to the code, you can easily do that. So it seems like the code ended. So let me copy and paste in this code to visualize it. And I'm going to render it. So let's see. The model generated a concept visualization, a trivial one. But let's make it a little more interactive. So I'm going to ask it to create a quiz for educational purposes. It will rewrite the code to include this feature. And you can use it as a way to iterate on any of your application or the visualization that you will create. Again, you can see the changes that it made by clicking on the Show Changes feature. I'm going to copy paste it again. And look at the changes here. So here the model added some quiz. Let's try to submit an answer and it's correct. Yeah. And this is the wrong answer. This is the wrong answer. So in a way you can imagine to create some of the interesting flashcards, to learn any of the educational concepts for your school.