{"id":325,"date":"2019-01-23T20:01:03","date_gmt":"2019-01-23T20:01:03","guid":{"rendered":"http:\/\/miriamposner.com\/classes\/dh201w19\/?page_id=325"},"modified":"2019-01-23T20:01:05","modified_gmt":"2019-01-23T20:01:05","slug":"investigating-p5","status":"publish","type":"page","link":"http:\/\/miriamposner.com\/classes\/dh201w19\/tutorials-guides\/data-visualization\/investigating-p5\/","title":{"rendered":"Investigating p5"},"content":{"rendered":"\n

P5.js<\/a> is a JavaScript library designed to help you make interactive drawings and share them on the web.<\/p>\n\n\n\n

Open up the web editor<\/h2>\n\n\n\n

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\u2019re ready, you can upload the whole package to a server so other people can see it. That\u2019s pretty easy to do!<\/p>\n\n\n\n

But because we\u2019re all using differently configured computers, we\u2019re going to do something even easier: We\u2019ll use an interactive web editor for p5. This is a way to write and execute your p5 code directly on the web.<\/p>\n\n\n\n

To open the editor, go to\u00a0editor.p5js.org\/.<\/a>\u00a0<\/p>\n\n\n\n

\"\"\/<\/a><\/figure>\n\n\n\n

Understanding the web editor<\/h2>\n\n\n\n

You\u2019ll notice that your screen is divided into two parts. The left side is where you write your code; the right side, where it says Preview<\/strong>, is where you\u2019ll see your drawing.<\/p>\n\n\n\n

The left side of your screen, the editor, is already populated with two JavaScript functions<\/strong>. (Functions are bits of code that do something.) The first function, setup( )<\/strong> builds a canvas (a drawing space) that is 400 pixels tall by 400 pixels wide.<\/p>\n\n\n\n

The second function, draw( )<\/strong>, colors the background<\/strong> of the canvas gray. (The number inside the background( ) <\/strong>function, 220, refers to a grayscale integer value<\/strong> \u2014 a number between 0 (black) and 255 (white)).<\/p>\n\n\n\n

But the right side of your screen is white, not gray! What\u2019s going on? Well, in order to execute the functions in your editor, you have to click the play<\/strong> button. Try that and see what happens.<\/p>\n\n\n\n

Can you figure out how to make the background black? Try that and press play<\/strong>.<\/p>\n\n\n\n

\"\"\/<\/a><\/figure>\n\n\n\n

Work through chapter three<\/h2>\n\n\n\n

Under Week 3 of CCLE, I\u2019ve placed chapter three of the book\u00a0Getting Started with p5.js,\u00a0by Lauren McCarthy, Casey Reas, and Ben Fry<\/em>. Work through the examples, using the web editor. 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\n\n\n

\"\"\/<\/a><\/figure>\n","protected":false},"excerpt":{"rendered":"

P5.js is a JavaScript library designed to help you make interactive drawings and share them on the web. Open up the web editor There are a few different ways you … <\/p>\n

Continue reading “Investigating p5”<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"parent":211,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_eb_attr":"","footnotes":""},"class_list":["post-325","page","type-page","status-publish","hentry","entry"],"_links":{"self":[{"href":"http:\/\/miriamposner.com\/classes\/dh201w19\/wp-json\/wp\/v2\/pages\/325","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/miriamposner.com\/classes\/dh201w19\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"http:\/\/miriamposner.com\/classes\/dh201w19\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"http:\/\/miriamposner.com\/classes\/dh201w19\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/miriamposner.com\/classes\/dh201w19\/wp-json\/wp\/v2\/comments?post=325"}],"version-history":[{"count":0,"href":"http:\/\/miriamposner.com\/classes\/dh201w19\/wp-json\/wp\/v2\/pages\/325\/revisions"}],"up":[{"embeddable":true,"href":"http:\/\/miriamposner.com\/classes\/dh201w19\/wp-json\/wp\/v2\/pages\/211"}],"wp:attachment":[{"href":"http:\/\/miriamposner.com\/classes\/dh201w19\/wp-json\/wp\/v2\/media?parent=325"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}