Transcript

CHRISTIAN NOLD

This short video will introduce you to the code editor, show you how to make some coding tweaks, and save an image of your work to your computer. So, this box here, that’s the p5.js editor, running inside the Open University virtual learning environment. When you encounter an editor window, the code will already be playing and displaying a canvas on the right-hand side, this grey area here.

This is the Hello World example. When you move your cursor across the canvas like this, it draws these circles. If you press ‘Stop’, the code stops. If you press ‘Play’ again, the code plays again.

Notice there are these numbers here on the left-hand side. They’re called line numbers. And they can be useful for identifying bits of important code. So, the thing we care about here is in line seven, which is the circle function, this one here. And it has three parameters. And the thing we care about is the 20 at the end. That’s the diameter.

So, 20 creates these circles, like this. If I change this now to 40 and press ‘Play’, you can see we have a larger diameter circle. And I can just go and change this to 400 and press ‘Play’ again; and we have a huge circle. Now, that circle is too big. So, what I can do is I’m just going to revert. And that takes me back to the original code. And I just press ‘Play’ again, and there you go. The original code is playing again.

Notice when I was making these tweaks, all I was doing was changing these pink numbers and the code here. That’s the main thing you’ll be doing. You won’t have to do any code writing from scratch. So, what I’m going to do now is I’m just going to stop and start again, and I’m going to draw you an algorithmic quilt. And I’m just going to draw around the edges here. And I’m just playing around a little bit just to see what I can do with this example.

And I am drawing towards the middle. And when I get to the middle, what I’m going to do is I’m just going to save an image of what I’ve drawn. And there are two ways you can do this. You can press the ‘s’ key, and you can see that saved hello.png file to your computer. Or you can press the right mouse button and select ‘Save Image As’. And then this pop-up comes across. And it gives me a place to save it, currently in the Downloads folder. And I click ‘Save’. So, there you go. I’ve saved an image of my artwork.