{"id":685,"date":"2017-10-09T12:04:10","date_gmt":"2017-10-09T17:04:10","guid":{"rendered":"http:\/\/bluegalaxy.info\/codewalk\/?p=685"},"modified":"2021-01-17T21:30:26","modified_gmt":"2021-01-18T02:30:26","slug":"p5-js-getting-started","status":"publish","type":"post","link":"https:\/\/bluegalaxy.info\/codewalk\/2017\/10\/09\/p5-js-getting-started\/","title":{"rendered":"p5.js: Getting Started"},"content":{"rendered":"\n<p>Getting started with p5.js, this article follows the instructions found here:<br><a href=\"https:\/\/p5js.org\/get-started\/\">https:\/\/p5js.org\/get-started\/<\/a><\/p>\n\n\n\n<p>Where processing.py only allows interaction in the Processing code environment, p5.js allows for real time interactive experiences on the web. This article is similar to the previous article I wrote about getting started with Processing.py:<\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-wp-embed is-provider-chris-nielsen-code-walk wp-block-embed-chris-nielsen-code-walk\"><div class=\"wp-block-embed__wrapper\">\n<blockquote class=\"wp-embedded-content\" data-secret=\"kW6xl8N5sZ\"><a href=\"http:\/\/bluegalaxy.info\/codewalk\/2017\/09\/25\/processing-py-getting-started\/\">Processing.py: Getting Started<\/a><\/blockquote><iframe loading=\"lazy\" class=\"wp-embedded-content\" sandbox=\"allow-scripts\" security=\"restricted\" style=\"position: absolute; clip: rect(1px, 1px, 1px, 1px);\" title=\"&#8220;Processing.py: Getting Started&#8221; &#8212; Chris Nielsen Code Walk\" src=\"http:\/\/bluegalaxy.info\/codewalk\/2017\/09\/25\/processing-py-getting-started\/embed\/#?secret=kW6xl8N5sZ\" data-secret=\"kW6xl8N5sZ\" width=\"600\" height=\"338\" frameborder=\"0\" marginwidth=\"0\" marginheight=\"0\" scrolling=\"no\"><\/iframe>\n<\/div><\/figure>\n\n\n\n<p>In the Processing IDE, choose the p5.js option at the right. For example:<\/p>\n\n\n\n<figure class=\"wp-block-image is-style-default\"><img loading=\"lazy\" decoding=\"async\" width=\"118\" height=\"133\" src=\"http:\/\/bluegalaxy.info\/codewalk\/wp-content\/uploads\/2017\/10\/ide_p5.png\" alt=\"\" class=\"wp-image-688\"\/><\/figure>\n\n\n\n<p>There are some syntactical differences between p5.js and regular Processing to make note of:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><code class=\"EnlighterJSRAW\" data-enlighter-language=\"no-highlight\">size()<\/code> has been replaced with <code class=\"EnlighterJSRAW\" data-enlighter-language=\"no-highlight\">createCanvas()<\/code><\/li><li><code class=\"EnlighterJSRAW\" data-enlighter-language=\"no-highlight\">mousePressed<\/code> has been replaced with&nbsp;<code class=\"EnlighterJSRAW\" data-enlighter-language=\"no-highlight\">mouseIsPressed<\/code><\/li><\/ul>\n\n\n\n<p>Other differences are described here:<br><a href=\"https:\/\/github.com\/processing\/p5.js\/wiki\/Processing-transition\">https:\/\/github.com\/processing\/p5.js\/wiki\/Processing-transition<\/a><\/p>\n\n\n\n<p>The first project I completed with p5.js is the interactive circle_canvas project, which looks like this:<\/p>\n\n\n\n<figure class=\"wp-block-image is-style-default\"><img loading=\"lazy\" decoding=\"async\" width=\"640\" height=\"480\" src=\"http:\/\/bluegalaxy.info\/codewalk\/wp-content\/uploads\/2017\/10\/green_circles.jpg\" alt=\"\" class=\"wp-image-694\" srcset=\"https:\/\/bluegalaxy.info\/codewalk\/wp-content\/uploads\/2017\/10\/green_circles.jpg 640w, https:\/\/bluegalaxy.info\/codewalk\/wp-content\/uploads\/2017\/10\/green_circles-300x225.jpg 300w\" sizes=\"auto, (max-width: 640px) 100vw, 640px\" \/><\/figure>\n\n\n\n<p>With p5.js projects, the Processing IDE provides two tabs, one for the code and one for the HTML needed to view the project on the web. The index.html file is created and updated automatically depending on name given to the project.<\/p>\n\n\n\n<figure class=\"wp-block-image is-style-default\"><img loading=\"lazy\" decoding=\"async\" width=\"368\" height=\"404\" src=\"http:\/\/bluegalaxy.info\/codewalk\/wp-content\/uploads\/2017\/10\/proc_ide_p5.png\" alt=\"\" class=\"wp-image-696\" srcset=\"https:\/\/bluegalaxy.info\/codewalk\/wp-content\/uploads\/2017\/10\/proc_ide_p5.png 368w, https:\/\/bluegalaxy.info\/codewalk\/wp-content\/uploads\/2017\/10\/proc_ide_p5-273x300.png 273w\" sizes=\"auto, (max-width: 368px) 100vw, 368px\" \/><\/figure>\n\n\n\n<p>Here is the code for the circle_canvas project:<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"js\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">var w = 640;\nvar h = 400;\nx = -50;  \/\/ Initial position off screen\ny = -50;  \/\/ Initial position off screen\n\nfunction setup() {\n  createCanvas(w, h);\n  background(\"#DDEACC\")\n}\n\nfunction draw() {\n  if (mouseIsPressed) {\n    fill(\"#8BB25A\");\n  } else {\n    fill(\"#F0FFDE\");\n  }\n  \/\/ Use conditional to hide the initial circle off screen\n  if (mouseX) {\n    ellipse(mouseX, mouseY, 40, 40);\n  } else {\n    \/\/ hide off screen\n    ellipse(x, y, 40, 40);\n  }\n}<\/pre>\n\n\n\n<p>And here is the resulting index.html file that is automatically generated:<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;html>\n&lt;head>\n  &lt;meta charset=\"UTF-8\">\n\n  &lt;!-- PLEASE NO CHANGES BELOW THIS LINE (UNTIL I SAY SO) -->\n  &lt;script language=\"javascript\" type=\"text\/javascript\" src=\"libraries\/p5.js\">&lt;\/script>\n  &lt;script language=\"javascript\" type=\"text\/javascript\" src=\"circle_canvas1.js\">&lt;\/script>\n  &lt;!-- OK, YOU CAN MAKE CHANGES BELOW THIS LINE AGAIN -->\n\n  &lt;!-- This line removes any default padding and style. \n       You might only need one of these values set. -->\n  &lt;style> body {padding: 0; margin: 0;} &lt;\/style>\n&lt;\/head>\n\n&lt;body>\n&lt;\/body>\n&lt;\/html><\/pre>\n\n\n\n<p>Here is the interactive canvas for this project:<\/p>\n\n\n\n<!-- iframe plugin v.5.2 wordpress.org\/plugins\/iframe\/ -->\n<iframe loading=\"lazy\" name=\"circle_canvas1\" src=\"https:\/\/bluegalaxy.info\/processing\/p5\/circle_canvas1\/\" scrolling=\"no\" width=\"640\" height=\"400\" id=\"iframe_drop_shadow\" class=\"iframe-class\" frameborder=\"0\"><\/iframe>\n\n\n\n\n<p><\/p>\n\n\n\n<p><button class=\"btn\" onclick=\"refreshIframe('circle_canvas1');\">Clear Canvas<\/button><\/p>\n<script language=\"JavaScript\">\nfunction refreshIframe(name) {\n    var ifr = document.getElementsByName(name)[0];\n    ifr.src = ifr.src;\n}\n<\/script>\n","protected":false},"excerpt":{"rendered":"<p>Getting started with p5.js, this article follows the instructions found here:https:\/\/p5js.org\/get-started\/ Where processing.py only allows interaction in the Processing code environment, p5.js allows for real time interactive experiences on the web. This article is similar to the previous article I wrote about getting started with Processing.py: In the Processing IDE, choose the p5.js option at &hellip; <a href=\"https:\/\/bluegalaxy.info\/codewalk\/2017\/10\/09\/p5-js-getting-started\/\" class=\"more-link\">Continue reading <span class=\"screen-reader-text\">p5.js: Getting Started<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[47,35],"tags":[45,48,36],"class_list":["post-685","post","type-post","status-publish","format-standard","hentry","category-p5-js","category-processing-language","tag-javascript","tag-p5-js","tag-processing-py"],"_links":{"self":[{"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/posts\/685","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/comments?post=685"}],"version-history":[{"count":30,"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/posts\/685\/revisions"}],"predecessor-version":[{"id":3371,"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/posts\/685\/revisions\/3371"}],"wp:attachment":[{"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/media?parent=685"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/categories?post=685"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/tags?post=685"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}