{"id":1382,"date":"2020-10-26T11:00:59","date_gmt":"2020-10-26T16:00:59","guid":{"rendered":"https:\/\/www.tigoe.com\/pcomp\/code\/?p=1382"},"modified":"2020-10-26T11:01:01","modified_gmt":"2020-10-26T16:01:01","slug":"glitch-and-p5-js-and-p5-serialport","status":"publish","type":"post","link":"https:\/\/www.tigoe.com\/pcomp\/code\/arduinowiring\/1382\/","title":{"rendered":"Glitch and p5.js and p5.serialport"},"content":{"rendered":"\n<p><a href=\"https:\/\/www.ryerson.ca\/rta\/People\/faculty\/david-bouchard\/\">David Bouchard<\/a> of Ryerson University gave me a great tip: <a href=\"https:\/\/glitch.com\/\">Glitch.com<\/a> works well for p5.js projects. It&#8217;s a nice alternative to the <a href=\"https:\/\/editor.p5js.org\/\">p5.js editor<\/a>, particularly because it supports sharing of live code. This can be handy when you&#8217;re working remotely with others. This means you and your remote partner can both be typing in the same sketch in real-time (well, network real-time). <\/p>\n\n\n\n<p>It even works with <a href=\"https:\/\/github.com\/p5-serial\/p5.serialport\">p5.serialport library<\/a> and the <a href=\"https:\/\/github.com\/p5-serial\/p5.serialcontrol\/releases\">p5.serialcontrol app<\/a> if you want to work on p5.js sketches that require asynchronous serial input. Each person sharing the sketch will be running a local instance of the sketch in their own browser. This means they will be able to connect with their local copy of p5.serialcontrol, to communicate with their own serial ports. <\/p>\n\n\n\n<p>Here are the steps to make a p5.js serialport app work:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Set up a Glitch account if you don&#8217;t already have one. <\/li><li>Make a new project in Glitch. Use the &#8220;Hello Webpage&#8221; option<\/li><li>Replace the default HTML with the following:<\/li><\/ul>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: xml; title: ; notranslate\" title=\"\">\n&lt;!DOCTYPE html&gt;&lt;html lang=&quot;en&quot;&gt;&lt;head&gt;\n  &lt;script src=&quot;p5.min.js&quot;&gt;&lt;\/script&gt;\n  &lt;script src=&quot;p5.serialport.js&quot;&gt;&lt;\/script&gt;\n  &lt;\/head&gt;\n  &lt;body&gt;\n    &lt;script src=&quot;sketch.js&quot;&gt;&lt;\/script&gt;\n&lt;\/body&gt;&lt;\/html&gt;\n<\/pre><\/div>\n\n\n<ul class=\"wp-block-list\"><li> Replace the two script tags with the latest CDN links for <a href=\"https:\/\/cdnjs.com\/libraries\/p5.js\">p5.js <\/a>and p5.serialport.js. The p5.js CDN can be found at <a href=\"https:\/\/cdnjs.com\/libraries\/p5.js\">this link<\/a>. The p5.serialport latest version is 0.0.29, as of this writing:<\/li><\/ul>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: xml; title: ; notranslate\" title=\"\">\n&lt;script src=&quot;https:\/\/cdn.jsdelivr.net\/npm\/p5.serialserver@0.0.29\/lib\/p5.serialport.js&quot;&gt;&lt;\/script&gt;\n<\/pre><\/div>\n\n\n<ul class=\"wp-block-list\"><li>Replace the script.js file with a file called sketch,js and make it a p5.js sketch. Here&#8217;s the minimum:<\/li><\/ul>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: plain; title: ; notranslate\" title=\"\">\nfunction setup() {\n  \n}\n\nfunction draw() {\n \n}\n<\/pre><\/div>\n\n\n<ul class=\"wp-block-list\" id=\"block-f4587006-635f-4074-83e9-fda60eb190d9\"><li>Download the <a href=\"https:\/\/github.com\/p5-serial\/p5.serialcontrol\/releases\">p5.serialcontrol app<\/a>, connect to a microcontroller over a serial port, and you&#8217;re ready to go.<\/li><li>Once you&#8217;ve made your sketch click Share -> Code and share that link with your remote partner.  That&#8217;s it! You&#8217;re ready to go. <\/li><\/ul>\n\n\n\n<p>To test this, I made a <a href=\"https:\/\/glitch.com\/~p5-serialport-selector\">sketch<\/a> that creates a serialport object, then gets the list of serial ports and makes a select menu so you can choose the serial port. Feel free to use it. <\/p>\n","protected":false},"excerpt":{"rendered":"<p>David Bouchard of Ryerson University gave me a great tip: Glitch.com works well for p5.js projects. It&#8217;s a nice alternative to the p5.js editor, particularly because it supports sharing of live code. This can be handy when you&#8217;re working remotely with others. This means you and your remote partner can both be typing in the &hellip; <\/p>\n<p class=\"link-more\"><a href=\"https:\/\/www.tigoe.com\/pcomp\/code\/arduinowiring\/1382\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;Glitch and p5.js and p5.serialport&#8221;<\/span><\/a><\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[9,103],"tags":[],"class_list":["post-1382","post","type-post","status-publish","format-standard","hentry","category-arduinowiring","category-javascript"],"_links":{"self":[{"href":"https:\/\/www.tigoe.com\/pcomp\/code\/wp-json\/wp\/v2\/posts\/1382","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.tigoe.com\/pcomp\/code\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.tigoe.com\/pcomp\/code\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.tigoe.com\/pcomp\/code\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.tigoe.com\/pcomp\/code\/wp-json\/wp\/v2\/comments?post=1382"}],"version-history":[{"count":4,"href":"https:\/\/www.tigoe.com\/pcomp\/code\/wp-json\/wp\/v2\/posts\/1382\/revisions"}],"predecessor-version":[{"id":1386,"href":"https:\/\/www.tigoe.com\/pcomp\/code\/wp-json\/wp\/v2\/posts\/1382\/revisions\/1386"}],"wp:attachment":[{"href":"https:\/\/www.tigoe.com\/pcomp\/code\/wp-json\/wp\/v2\/media?parent=1382"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.tigoe.com\/pcomp\/code\/wp-json\/wp\/v2\/categories?post=1382"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.tigoe.com\/pcomp\/code\/wp-json\/wp\/v2\/tags?post=1382"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}