There are a few different ways you could code in p5. One of the most common ways is to download p5, write your program in a text editor, and view your drawing in a browser. Then, when you’re ready, you could upload the whole package to a server so other people can see it. That’s pretty easy to do!<\/p>\n
But because there are a lot of us, and we’re all using differently configured computers, we’re going to do something even easier: We’ll use an interactive web editor for p5. This is a way to write and execute your p5 code directly on the web.<\/p>\n
To open the editor, go to\u00a0https:\/\/alpha.editor.p5js.org\/.<\/a>\u00a0(The “alpha” in that URL is meant to suggest that this web editor is still under development, so there could be bugs!)<\/p>\n You’ll notice that your screen is divided into two parts. The left side is where you write your code; the right side, where it says\u00a0Preview<\/strong>, is where you’ll see your drawing.<\/p>\n The left side of your screen, the editor, is already populated with two JavaScript\u00a0functions<\/strong>. (Functions are bits of code that do something.) The first function,\u00a0setup( )<\/strong>\u00a0builds a canvas (a drawing space) that is 400 pixels tall by 400 pixels wide.<\/p>\n The second function,\u00a0draw( )<\/strong>, colors the\u00a0background<\/strong>\u00a0of the canvas gray. (The number inside the\u00a0background( )\u00a0<\/strong>function, 220, refers to a\u00a0grayscale integer value<\/strong>\u00a0— a number between 0 (black) and 255 (white)).<\/p>\n But the right side of your screen is white, not gray! What’s going on? Well, in order to execute the functions in your editor, you have to click the\u00a0play<\/strong>\u00a0button. Try that and see what happens.<\/p>\n Can you figure out how to make the background black? Try that and press\u00a0play<\/strong>.<\/p>\n Under Week 10 of CCLE, I’ve placed some files for you. They are two different versions of the book\u00a0Getting Started with p5.js,\u00a0by Lauren McCarthy, Casey Reas, and Ben Fry<\/em>. The first version of the book, the one that ends in .epub, will look a lot nicer, so first try to download and work with that. If you can’t read epubs on your computer, download the second version of the file, the one that ends in .pdf.<\/p>\n When you’ve downloaded the book, go to\u00a0chapter three<\/strong>\u00a0and work through the examples. With the knowledge you gain, try to draw a set of images that look like the picture below. Remember, the\u00a0p5js.org<\/a>\u00a0website has a\u00a0Reference\u00a0<\/strong>section that will help you understand the various functions.<\/p>\n![\"\"](\"https:\/\/github.com\/miriamposner\/p5_tutorial\/raw\/master\/images\/let-s-play-with-p5-\/open-up-the-web-editor.png\")
<\/a><\/p>\n<\/a>Understanding the web editor<\/h2>\n
![\"\"](\"https:\/\/github.com\/miriamposner\/p5_tutorial\/raw\/master\/images\/let-s-play-with-p5-\/understanding-the-web-editor.png\")
<\/a><\/p>\n<\/a>Work through chapter three<\/h2>\n
![\"\"](\"https:\/\/github.com\/miriamposner\/p5_tutorial\/raw\/master\/images\/let-s-play-with-p5-\/work-through-chapter-three.png\")
<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"