├── .gitignore ├── dev-readme.md ├── helper.js ├── notes.txt ├── p5-embedder.php ├── p5_iframe.html ├── prism.css ├── prism.js ├── readme.txt ├── style.css └── test ├── index.html ├── p5-embedder ├── helper.js ├── p5-embedder.php ├── p5_iframe.html ├── prism.css ├── prism.js ├── readme.txt └── style.css ├── test.js ├── test.php └── test2.js /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | *.zip 3 | .svn/* 4 | assets/* 5 | trunk/* 6 | branches/* 7 | tags/* -------------------------------------------------------------------------------- /dev-readme.md: -------------------------------------------------------------------------------- 1 | * [updating the plugin](https://codex.wordpress.org/Writing_a_Plugin#Updating_Your_Plugin) 2 | * [svn commands for update](https://wordpress.org/plugins/about/svn/) 3 | -------------------------------------------------------------------------------- /helper.js: -------------------------------------------------------------------------------- 1 | window.onload = function() { 2 | examples.init(); 3 | } 4 | var examples = { 5 | init: function(file) { 6 | var editors = $('.p5_editor'); 7 | 8 | for (var i=0; i 0) { 48 | $dom = new DOMDocument(); 49 | $dom->loadHTML(mb_convert_encoding($content, 'HTML-ENTITIES', 'UTF-8')); 50 | $xpath = new DOMXpath($dom); 51 | $sketches = $xpath->query('//a[@class="p5-embed"]'); 52 | 53 | foreach ($sketches as $s) { 54 | $name = $s->nodeValue; 55 | $url = $s->getAttribute('href'); 56 | $s->setAttribute('class', 'p5_sketch_link'); 57 | 58 | $code = file_get_contents($url); 59 | 60 | $w = $s->getAttribute('data-width'); 61 | $h = $s->getAttribute('data-height'); 62 | $nocode = $s->getAttribute('data-nocode'); 63 | $fontsize = $s->getAttribute('data-fontsize'); 64 | 65 | $iframe = $dom->createElement('iframe'); 66 | $iframe->setAttribute('src', plugins_url('p5_iframe.html', __FILE__)); 67 | $iframe->setAttribute('class', 'p5_exampleFrame'); 68 | $iframe->setAttribute('width', $w); 69 | $iframe->setAttribute('height', $h); 70 | $s->parentNode->appendChild($iframe); 71 | 72 | $pre = $dom->createElement('pre'); 73 | $pre->setAttribute('class', 'language-javascript'); 74 | $s->parentNode->appendChild($pre); 75 | 76 | $editor = $dom->createElement('code', $code); 77 | $editor->setAttribute('class', 'p5_editor language-javascript'); 78 | $pre->appendChild($editor); 79 | 80 | if ($nocode == 'true') { 81 | $pre->setAttribute('style', 'display:none'); 82 | } 83 | 84 | if ($fontsize) { 85 | $lineheight = $fontsize * 1.45; 86 | $pre->setAttribute('style', 'font-size:'.$fontsize.'px !important; line-height:'.$lineheight.'px !important'); 87 | $editor->setAttribute('style', 'font-size:'.$fontsize.'px !important;'); 88 | } 89 | } 90 | return $dom->saveHTML(); 91 | } else { 92 | return $content; 93 | } 94 | } 95 | add_filter('the_content', build_sketch); 96 | 97 | ?> 98 | -------------------------------------------------------------------------------- /p5_iframe.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /prism.css: -------------------------------------------------------------------------------- 1 | /* http://prismjs.com/download.html?themes=prism-coy&languages=markup+css+css-extras+clike+javascript+java&plugins=line-numbers */ 2 | 3 | /* 4 | 5 | * p5.js highlighting based on the prism.js Coy theme for JavaScript, CoffeeScript, CSS and HTML 6 | * Based on https://github.com/tshedor/workshop-wp-theme (Example: http://workshop.kansan.com/category/sessions/basics or http://workshop.timshedor.com/category/sessions/basics); 7 | * @author Tim Shedor 8 | 9 | */ 10 | 11 | code[class*="language-"], 12 | pre[class*="language-"], 13 | textarea { 14 | color: #222; 15 | font-family: 16 | inconsolatamedium, 17 | Consolas, 18 | Monaco, 19 | 'Andale Mono', 20 | monospace; 21 | direction: ltr; 22 | text-align: left; 23 | white-space: pre; 24 | word-spacing: normal; 25 | word-break: normal; 26 | -moz-tab-size: 4; 27 | -o-tab-size: 4; 28 | tab-size: 4; 29 | -webkit-hyphens: none; 30 | -moz-hyphens: none; 31 | -ms-hyphens: none; 32 | hyphens: none; 33 | font-size: 1em !important; 34 | } 35 | 36 | /* Code blocks */ 37 | pre[class*="language-"] { 38 | position:relative; 39 | padding: 0.5em 1.0em; 40 | margin: 0.5em 0 0 -0.5em; 41 | border-left: 0.5em solid #AFAFAF; /* coy og blue 10px solid 358ccb */ 42 | background-color: #fff; /* coy og white #fdfdfd */ 43 | /* lines */ 44 | background-image: -webkit-linear-gradient(transparent 50%, rgba(69, 142, 209, 0.06) 50%); 45 | background-image: -moz-linear-gradient(transparent 50%, rgba(69, 142, 209, 0.06) 50%); 46 | background-image: -ms-linear-gradient(transparent 50%, rgba(69, 142, 209, 0.06) 50%); 47 | background-image: -o-linear-gradient(transparent 50%, rgba(69, 142, 209, 0.06) 50%); 48 | background-image: linear-gradient(transparent 50%, rgba(69, 142, 209, 0.06) 50%); 49 | background-size: 2.9em 2.9em; /* adjusts height of alternating lines */ 50 | background-origin:content-box; 51 | /* set overflow to just let the code roll */ 52 | overflow:auto; 53 | /* or uncomment this to let an inner vertical scroll be triggered, 54 | but be generous as to when 55 | max-height:36em; */ 56 | } 57 | 58 | code[class*="language"] { 59 | } 60 | 61 | 62 | :not(pre) > code[class*="language-"], 63 | pre[class*="language-"] { 64 | margin-bottom: 1em; 65 | } 66 | 67 | /* Inline code */ 68 | :not(pre) > code[class*="language-"] { 69 | position:relative; 70 | padding: .2em; 71 | -webkit-border-radius: 0.3em; 72 | -moz-border-radius: 0.3em; 73 | -ms-border-radius: 0.3em; 74 | -o-border-radius: 0.3em; 75 | border-radius: 0.3em; 76 | color: #333; 77 | border: 1px solid rgba(0, 0, 0, 0.1); 78 | } 79 | 80 | 81 | :not(pre) > code[class*="language-"]:after, 82 | pre[class*="language-"]:after { 83 | right: 0.75em; 84 | left: auto; 85 | } 86 | 87 | /* code colors */ 88 | .token.comment, 89 | .token.block-comment, 90 | .token.prolog, 91 | .token.doctype, 92 | .token.cdata { 93 | color: #A0A0A0; /* light gray */ /* 727272 898189 919191 A0A0A0 AFAFAF BEBEBE coy og: #7D8B99; */ 94 | } 95 | 96 | .token.punctuation { 97 | color: #666; /* darker gray */ /* og coy 5F6364 */ 98 | } 99 | 100 | .token.property, 101 | .token.tag, 102 | .token.boolean, 103 | .token.number, 104 | .token.function-name, 105 | .token.constant, 106 | .token.symbol { 107 | color: #DC3787; /* not p5 pink, but related */ /* og coy c92c2c a reddish color */ 108 | } 109 | 110 | .token.selector, 111 | .token.attr-name, 112 | .token.string, 113 | .token.function, 114 | .token.builtin { 115 | color: #00A1D3; /* blue */ /* 877923 */ /* og coy 2f9c0a - green */ 116 | } 117 | 118 | .token.operator, 119 | .token.entity, 120 | .token.url, 121 | .token.variable { 122 | color: #a67f59; /* og coy a67f59 a light brown */ 123 | background: rgba(255, 255, 255, 0.5); 124 | } 125 | 126 | .token.atrule, 127 | .token.attr-value, 128 | .token.keyword, 129 | .token.class-name { 130 | color: #704F21; /* 9F944F brown */ /* og coy #1990b8 blue */ 131 | } 132 | 133 | .token.regex, 134 | .token.important { 135 | color: #e90; /* og coy e90 orange */ 136 | } 137 | .language-css .token.string, 138 | .style .token.string { 139 | color: #a67f59; /* og coy a67f59 a light brown */ 140 | background: rgba(255, 255, 255, 0.5); 141 | } 142 | 143 | .token.important { 144 | font-weight: normal; 145 | } 146 | 147 | .token.entity { 148 | cursor: help; 149 | } 150 | 151 | .namespace { 152 | opacity: .7; 153 | } 154 | 155 | @media screen and (max-width:767px){ 156 | pre[class*="language-"]:before, 157 | pre[class*="language-"]:after { 158 | bottom:14px; 159 | -webkit-box-shadow:none; 160 | -moz-box-shadow:none; 161 | box-shadow:none; 162 | } 163 | 164 | } 165 | 166 | /* Plugin styles */ 167 | .token.tab:not(:empty):before, 168 | .token.cr:before, 169 | .token.lf:before { 170 | color: #e0d7d1; /* og coy very light brown */ 171 | } 172 | 173 | pre.line-numbers { 174 | position: relative; 175 | padding-left: 3.8em; 176 | counter-reset: linenumber; 177 | } 178 | 179 | pre.line-numbers > code { 180 | position: relative; 181 | } 182 | 183 | .line-numbers .line-numbers-rows { 184 | position: absolute; 185 | pointer-events: none; 186 | top: 0; 187 | font-size: 100%; 188 | left: -3.8em; 189 | width: 3em; /* works for line-numbers below 1000 lines */ 190 | letter-spacing: -1px; 191 | border-right: 1px solid #999; 192 | 193 | -webkit-user-select: none; 194 | -moz-user-select: none; 195 | -ms-user-select: none; 196 | user-select: none; 197 | 198 | } 199 | 200 | .line-numbers-rows > span { 201 | pointer-events: none; 202 | display: block; 203 | counter-increment: linenumber; 204 | } 205 | 206 | .line-numbers-rows > span:before { 207 | content: counter(linenumber); 208 | color: #999; 209 | display: block; 210 | padding-right: 0.8em; 211 | text-align: right; 212 | } 213 | 214 | 215 | -------------------------------------------------------------------------------- /prism.js: -------------------------------------------------------------------------------- 1 | /* http://prismjs.com/download.html?themes=prism-coy&languages=markup+css+css-extras+clike+javascript+java&plugins=line-numbers */ 2 | var self=typeof window!="undefined"?window:{},Prism=function(){var e=/\blang(?:uage)?-(?!\*)(\w+)\b/i,t=self.Prism={util:{encode:function(e){return e instanceof n?new n(e.type,t.util.encode(e.content)):t.util.type(e)==="Array"?e.map(t.util.encode):e.replace(/&/g,"&").replace(/e.length)break e;if(p instanceof i)continue;a.lastIndex=0;var d=a.exec(p);if(d){l&&(c=d[1].length);var v=d.index-1+c,d=d[0].slice(c),m=d.length,g=v+m,y=p.slice(0,v+1),b=p.slice(g+1),w=[h,1];y&&w.push(y);var E=new i(u,f?t.tokenize(d,f):d);w.push(E);b&&w.push(b);Array.prototype.splice.apply(s,w)}}}return s},hooks:{all:{},add:function(e,n){var r=t.hooks.all;r[e]=r[e]||[];r[e].push(n)},run:function(e,n){var r=t.hooks.all[e];if(!r||!r.length)return;for(var i=0,s;s=r[i++];)s(n)}}},n=t.Token=function(e,t){this.type=e;this.content=t};n.stringify=function(e,r,i){if(typeof e=="string")return e;if(Object.prototype.toString.call(e)=="[object Array]")return e.map(function(t){return n.stringify(t,r,e)}).join("");var s={type:e.type,content:n.stringify(e.content,r,i),tag:"span",classes:["token",e.type],attributes:{},language:r,parent:i};s.type=="comment"&&(s.attributes.spellcheck="true");t.hooks.run("wrap",s);var o="";for(var u in s.attributes)o+=u+'="'+(s.attributes[u]||"")+'"';return"<"+s.tag+' class="'+s.classes.join(" ")+'" '+o+">"+s.content+""};if(!self.document){if(!self.addEventListener)return self.Prism;self.addEventListener("message",function(e){var n=JSON.parse(e.data),r=n.language,i=n.code;self.postMessage(JSON.stringify(t.tokenize(i,t.languages[r])));self.close()},!1);return self.Prism}var r=document.getElementsByTagName("script");r=r[r.length-1];if(r){t.filename=r.src;document.addEventListener&&!r.hasAttribute("data-manual")&&document.addEventListener("DOMContentLoaded",t.highlightAll)}return self.Prism}();typeof module!="undefined"&&module.exports&&(module.exports=Prism);; 3 | Prism.languages.markup={comment://g,prolog:/<\?.+?\?>/,doctype://,cdata://i,tag:{pattern:/<\/?[\w:-]+\s*(?:\s+[\w:-]+(?:=(?:("|')(\\?[\w\W])*?\1|[^\s'">=]+))?\s*)*\/?>/gi,inside:{tag:{pattern:/^<\/?[\w:-]+/i,inside:{punctuation:/^<\/?/,namespace:/^[\w-]+?:/}},"attr-value":{pattern:/=(?:('|")[\w\W]*?(\1)|[^\s>]+)/gi,inside:{punctuation:/=|>|"/g}},punctuation:/\/?>/g,"attr-name":{pattern:/[\w:-]+/g,inside:{namespace:/^[\w-]+?:/}}}},entity:/\&#?[\da-z]{1,8};/gi};Prism.hooks.add("wrap",function(e){e.type==="entity"&&(e.attributes.title=e.content.replace(/&/,"&"))});; 4 | Prism.languages.css={comment:/\/\*[\w\W]*?\*\//g,atrule:{pattern:/@[\w-]+?.*?(;|(?=\s*{))/gi,inside:{punctuation:/[;:]/g}},url:/url\((["']?).*?\1\)/gi,selector:/[^\{\}\s][^\{\};]*(?=\s*\{)/g,property:/(\b|\B)[\w-]+(?=\s*:)/ig,string:/("|')(\\?.)*?\1/g,important:/\B!important\b/gi,punctuation:/[\{\};:]/g,"function":/[-a-z0-9]+(?=\()/ig};Prism.languages.markup&&Prism.languages.insertBefore("markup","tag",{style:{pattern:/[\w\W]*?<\/style>/ig,inside:{tag:{pattern:/|<\/style>/ig,inside:Prism.languages.markup.tag.inside},rest:Prism.languages.css}}});; 5 | Prism.languages.css.selector={pattern:/[^\{\}\s][^\{\}]*(?=\s*\{)/g,inside:{"pseudo-element":/:(?:after|before|first-letter|first-line|selection)|::[-\w]+/g,"pseudo-class":/:[-\w]+(?:\(.*\))?/g,"class":/\.[-:\.\w]+/g,id:/#[-:\.\w]+/g}};Prism.languages.insertBefore("css","ignore",{hexcode:/#[\da-f]{3,6}/gi,entity:/\\[\da-f]{1,8}/gi,number:/[\d%\.]+/g});; 6 | Prism.languages.clike={comment:{pattern:/(^|[^\\])(\/\*[\w\W]*?\*\/|(^|[^:])\/\/.*?(\r?\n|$))/g,lookbehind:!0},string:/("|')(\\?.)*?\1/g,"class-name":{pattern:/((?:(?:class|interface|extends|implements|trait|instanceof|new)\s+)|(?:catch\s+\())[a-z0-9_\.\\]+/ig,lookbehind:!0,inside:{punctuation:/(\.|\\)/}},keyword:/\b(if|else|while|do|for|return|in|instanceof|function|new|try|throw|catch|finally|null|break|continue)\b/g,"boolean":/\b(true|false)\b/g,"function":{pattern:/[a-z0-9_]+\(/ig,inside:{punctuation:/\(/}},number:/\b-?(0x[\dA-Fa-f]+|\d*\.?\d+([Ee]-?\d+)?)\b/g,operator:/[-+]{1,2}|!|<=?|>=?|={1,3}|&{1,2}|\|?\||\?|\*|\/|\~|\^|\%/g,ignore:/&(lt|gt|amp);/gi,punctuation:/[{}[\];(),.:]/g};; 7 | Prism.languages.javascript=Prism.languages.extend("clike",{keyword:/\b(var|let|if|else|while|do|for|return|in|instanceof|function|get|set|new|with|typeof|try|throw|catch|finally|null|break|continue|this)\b/g,number:/\b-?(0x[\dA-Fa-f]+|\d*\.?\d+([Ee]-?\d+)?|NaN|-?Infinity)\b/g});Prism.languages.insertBefore("javascript","keyword",{regex:{pattern:/(^|[^/])\/(?!\/)(\[.+?]|\\.|[^/\r\n])+\/[gim]{0,3}(?=\s*($|[\r\n,.;})]))/g,lookbehind:!0}});Prism.languages.markup&&Prism.languages.insertBefore("markup","tag",{script:{pattern:/[\w\W]*?<\/script>/ig,inside:{tag:{pattern:/|<\/script>/ig,inside:Prism.languages.markup.tag.inside},rest:Prism.languages.javascript}}});; 8 | Prism.languages.java=Prism.languages.extend("clike",{keyword:/\b(abstract|continue|for|new|switch|assert|default|goto|package|synchronized|boolean|do|if|private|this|break|double|implements|protected|throw|byte|else|import|public|throws|case|enum|instanceof|return|transient|catch|extends|int|short|try|char|final|interface|static|void|class|finally|long|strictfp|volatile|const|float|native|super|while)\b/g,number:/\b0b[01]+\b|\b0x[\da-f]*\.?[\da-fp\-]+\b|\b\d*\.?\d+[e]?[\d]*[df]\b|\W\d*\.?\d+\b/gi,operator:{pattern:/([^\.]|^)([-+]{1,2}|!|=?<|=?>|={1,2}|(&){1,2}|\|?\||\?|\*|\/|%|\^|(<){2}|(>){2,3}|:|~)/g,lookbehind:!0}});; 9 | Prism.hooks.add("after-highlight",function(e){var t=e.element.parentNode;if(!t||!/pre/i.test(t.nodeName)||t.className.indexOf("line-numbers")===-1){return}var n=1+e.code.split("\n").length;var r;lines=new Array(n);lines=lines.join("");r=document.createElement("span");r.className="line-numbers-rows";r.innerHTML=lines;if(t.hasAttribute("data-start")){t.style.counterReset="linenumber "+(parseInt(t.getAttribute("data-start"),10)-1)}e.element.appendChild(r)}); -------------------------------------------------------------------------------- /readme.txt: -------------------------------------------------------------------------------- 1 | SUPPORT FOR THIS HAS BEEN DISCONTINUED, USE AT YOUR OWN RISK :) 2 | 3 | === p5.js Embedder === 4 | Contributors: lmccart 5 | Tags: p5.js, p5, javascript, js, teaching, processing 6 | Requires at least: 3.0.1 7 | Tested up to: 4.2.3 8 | Stable tag: 0.1.3 9 | License: GPLv2 or later 10 | License URI: http://www.gnu.org/licenses/gpl-2.0.html 11 | 12 | This plugin embeds a live running p5.js sketch into a WordPress blog. There are options to show or hide the associated code and to set the size of the sketch frame. You can see an example of it running [here](http://lauren-mccarthy.com/inmotion/2014/09/test-5/). 13 | 14 | [p5js.org](http://p5js.org): p5.js is a JavaScript library that starts with the original goal of Processing, to make coding accessible for artists, designers, educators, and beginners, and reinterprets this for today’s web. 15 | 16 | == Description == 17 | 18 | ####To include a p5 sketch: 19 | 20 | 1. Upload the sketch.js file to Media Library. 21 | 22 | 2. While editing post, choose 'Add Media' and choose the uploaded JS file, it will 23 | add a link in your post. 24 | 25 | 3. Add class='p5-embed' to the link to specify it should be parsed as a p5 sketch. 26 | `your_filename` 27 | 28 | 4. If you would like to specify the height and width of the frame of your sketch, use 29 | the data-height and data-width tags (you can specify one or both of these). 30 | `your_filename` 31 | 32 | 5. By default the sketch and code are displayed. If you would like to hide the code, 33 | use the tag data-nocode='true'. 34 | `your_filename` 35 | 36 | 6. You can override the default font-size by adding data-fontsize=n, where n is the size 37 | of the font in pixels (for example, 10). 38 | 39 | ####Including media 40 | 41 | To include external files (for example, an image via loadImage) you will need to upload the files individually to wordpress and use the full blog url or the upload in the JS code. 42 | 43 | 44 | == Installation == 45 | 46 | 1. Choose 'Plugins', 'Add New', 'Upload', and upload p5-embedder.zip. 47 | 2. Activate the plugin. See Description for instructions for use in posts. 48 | 49 | 50 | == Changelog == 51 | 52 | = 0.1.1 = 53 | * Fixed jquery link to work for 0.4. 54 | 55 | 56 | = 0.1.2 = 57 | * Fixed issue with wordpress 4.2.3 causing errors. 58 | 59 | 60 | = 0.1.3 = 61 | * Updated to v0.4.9 of p5.js 62 | -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | 2 | 3 | .p5_editor { 4 | height: 500px; 5 | width: 710px; 6 | overflow: hidden; 7 | margin-top: 0.5em; 8 | color: #222; 9 | font-family: 10 | inconsolatamedium, 11 | Consolas, 12 | Monaco, 13 | 'Andale Mono', 14 | monospace; 15 | font-size: 1em !important; 16 | line-height: 1em; 17 | } 18 | 19 | .p5_sketch_link { 20 | width: 100%; 21 | float: left; 22 | padding-bottom: 10px; 23 | } 24 | 25 | iframe { 26 | border: none; 27 | } -------------------------------------------------------------------------------- /test/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 06_Radial_Gradient 12 | 13 | 14 | 06_Radial_Gradient 15 | 16 | -------------------------------------------------------------------------------- /test/p5-embedder/helper.js: -------------------------------------------------------------------------------- 1 | window.onload = function() { 2 | examples.init(); 3 | } 4 | var examples = { 5 | init: function(file) { 6 | var editors = $('.p5_editor'); 7 | 8 | for (var i=0; iloadHTML(mb_convert_encoding($content, 'HTML-ENTITIES', 'UTF-8')); 49 | $xpath = new DOMXpath($dom); 50 | $sketches = $xpath->query('//a[@class="p5-embed"]'); 51 | 52 | foreach ($sketches as $s) { 53 | $name = $s->nodeValue; 54 | $url = $s->getAttribute('href'); 55 | $s->setAttribute('class', 'p5_sketch_link'); 56 | 57 | $code = file_get_contents($url); 58 | 59 | $w = $s->getAttribute('data-width'); 60 | $h = $s->getAttribute('data-height'); 61 | $nocode = $s->getAttribute('data-nocode'); 62 | $fontsize = $s->getAttribute('data-fontsize'); 63 | 64 | $iframe = $dom->createElement('iframe'); 65 | $iframe->setAttribute('src', plugins_url('p5_iframe.html', __FILE__)); 66 | $iframe->setAttribute('class', 'p5_exampleFrame'); 67 | $iframe->setAttribute('width', $w); 68 | $iframe->setAttribute('height', $h); 69 | $s->parentNode->appendChild($iframe); 70 | 71 | $pre = $dom->createElement('pre'); 72 | $pre->setAttribute('class', 'language-javascript'); 73 | $s->parentNode->appendChild($pre); 74 | 75 | $editor = $dom->createElement('code', $code); 76 | $editor->setAttribute('class', 'p5_editor language-javascript'); 77 | $pre->appendChild($editor); 78 | 79 | if ($nocode == 'true') { 80 | $pre->setAttribute('style', 'display:none'); 81 | } 82 | 83 | if ($fontsize) { 84 | $lineheight = $fontsize * 1.45; 85 | $pre->setAttribute('style', 'font-size:'.$fontsize.'px !important; line-height:'.$lineheight.'px !important'); 86 | $editor->setAttribute('style', 'font-size:'.$fontsize.'px !important;'); 87 | } 88 | } 89 | return $dom->saveHTML(); 90 | } 91 | add_filter('the_content', build_sketch); 92 | 93 | ?> -------------------------------------------------------------------------------- /test/p5-embedder/p5_iframe.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /test/p5-embedder/prism.css: -------------------------------------------------------------------------------- 1 | /* http://prismjs.com/download.html?themes=prism-coy&languages=markup+css+css-extras+clike+javascript+java&plugins=line-numbers */ 2 | 3 | /* 4 | 5 | * p5.js highlighting based on the prism.js Coy theme for JavaScript, CoffeeScript, CSS and HTML 6 | * Based on https://github.com/tshedor/workshop-wp-theme (Example: http://workshop.kansan.com/category/sessions/basics or http://workshop.timshedor.com/category/sessions/basics); 7 | * @author Tim Shedor 8 | 9 | */ 10 | 11 | code[class*="language-"], 12 | pre[class*="language-"], 13 | textarea { 14 | color: #222; 15 | font-family: 16 | inconsolatamedium, 17 | Consolas, 18 | Monaco, 19 | 'Andale Mono', 20 | monospace; 21 | direction: ltr; 22 | text-align: left; 23 | white-space: pre; 24 | word-spacing: normal; 25 | word-break: normal; 26 | -moz-tab-size: 4; 27 | -o-tab-size: 4; 28 | tab-size: 4; 29 | -webkit-hyphens: none; 30 | -moz-hyphens: none; 31 | -ms-hyphens: none; 32 | hyphens: none; 33 | font-size: 1em !important; 34 | } 35 | 36 | /* Code blocks */ 37 | pre[class*="language-"] { 38 | position:relative; 39 | padding: 0.5em 1.0em; 40 | margin: 0.5em 0 0 -0.5em; 41 | border-left: 0.5em solid #AFAFAF; /* coy og blue 10px solid 358ccb */ 42 | background-color: #fff; /* coy og white #fdfdfd */ 43 | /* lines */ 44 | background-image: -webkit-linear-gradient(transparent 50%, rgba(69, 142, 209, 0.06) 50%); 45 | background-image: -moz-linear-gradient(transparent 50%, rgba(69, 142, 209, 0.06) 50%); 46 | background-image: -ms-linear-gradient(transparent 50%, rgba(69, 142, 209, 0.06) 50%); 47 | background-image: -o-linear-gradient(transparent 50%, rgba(69, 142, 209, 0.06) 50%); 48 | background-image: linear-gradient(transparent 50%, rgba(69, 142, 209, 0.06) 50%); 49 | background-size: 2.9em 2.9em; /* adjusts height of alternating lines */ 50 | background-origin:content-box; 51 | /* set overflow to just let the code roll */ 52 | overflow:auto; 53 | /* or uncomment this to let an inner vertical scroll be triggered, 54 | but be generous as to when 55 | max-height:36em; */ 56 | } 57 | 58 | code[class*="language"] { 59 | } 60 | 61 | 62 | :not(pre) > code[class*="language-"], 63 | pre[class*="language-"] { 64 | margin-bottom: 1em; 65 | } 66 | 67 | /* Inline code */ 68 | :not(pre) > code[class*="language-"] { 69 | position:relative; 70 | padding: .2em; 71 | -webkit-border-radius: 0.3em; 72 | -moz-border-radius: 0.3em; 73 | -ms-border-radius: 0.3em; 74 | -o-border-radius: 0.3em; 75 | border-radius: 0.3em; 76 | color: #333; 77 | border: 1px solid rgba(0, 0, 0, 0.1); 78 | } 79 | 80 | 81 | :not(pre) > code[class*="language-"]:after, 82 | pre[class*="language-"]:after { 83 | right: 0.75em; 84 | left: auto; 85 | } 86 | 87 | /* code colors */ 88 | .token.comment, 89 | .token.block-comment, 90 | .token.prolog, 91 | .token.doctype, 92 | .token.cdata { 93 | color: #A0A0A0; /* light gray */ /* 727272 898189 919191 A0A0A0 AFAFAF BEBEBE coy og: #7D8B99; */ 94 | } 95 | 96 | .token.punctuation { 97 | color: #666; /* darker gray */ /* og coy 5F6364 */ 98 | } 99 | 100 | .token.property, 101 | .token.tag, 102 | .token.boolean, 103 | .token.number, 104 | .token.function-name, 105 | .token.constant, 106 | .token.symbol { 107 | color: #DC3787; /* not p5 pink, but related */ /* og coy c92c2c a reddish color */ 108 | } 109 | 110 | .token.selector, 111 | .token.attr-name, 112 | .token.string, 113 | .token.function, 114 | .token.builtin { 115 | color: #00A1D3; /* blue */ /* 877923 */ /* og coy 2f9c0a - green */ 116 | } 117 | 118 | .token.operator, 119 | .token.entity, 120 | .token.url, 121 | .token.variable { 122 | color: #a67f59; /* og coy a67f59 a light brown */ 123 | background: rgba(255, 255, 255, 0.5); 124 | } 125 | 126 | .token.atrule, 127 | .token.attr-value, 128 | .token.keyword, 129 | .token.class-name { 130 | color: #704F21; /* 9F944F brown */ /* og coy #1990b8 blue */ 131 | } 132 | 133 | .token.regex, 134 | .token.important { 135 | color: #e90; /* og coy e90 orange */ 136 | } 137 | .language-css .token.string, 138 | .style .token.string { 139 | color: #a67f59; /* og coy a67f59 a light brown */ 140 | background: rgba(255, 255, 255, 0.5); 141 | } 142 | 143 | .token.important { 144 | font-weight: normal; 145 | } 146 | 147 | .token.entity { 148 | cursor: help; 149 | } 150 | 151 | .namespace { 152 | opacity: .7; 153 | } 154 | 155 | @media screen and (max-width:767px){ 156 | pre[class*="language-"]:before, 157 | pre[class*="language-"]:after { 158 | bottom:14px; 159 | -webkit-box-shadow:none; 160 | -moz-box-shadow:none; 161 | box-shadow:none; 162 | } 163 | 164 | } 165 | 166 | /* Plugin styles */ 167 | .token.tab:not(:empty):before, 168 | .token.cr:before, 169 | .token.lf:before { 170 | color: #e0d7d1; /* og coy very light brown */ 171 | } 172 | 173 | pre.line-numbers { 174 | position: relative; 175 | padding-left: 3.8em; 176 | counter-reset: linenumber; 177 | } 178 | 179 | pre.line-numbers > code { 180 | position: relative; 181 | } 182 | 183 | .line-numbers .line-numbers-rows { 184 | position: absolute; 185 | pointer-events: none; 186 | top: 0; 187 | font-size: 100%; 188 | left: -3.8em; 189 | width: 3em; /* works for line-numbers below 1000 lines */ 190 | letter-spacing: -1px; 191 | border-right: 1px solid #999; 192 | 193 | -webkit-user-select: none; 194 | -moz-user-select: none; 195 | -ms-user-select: none; 196 | user-select: none; 197 | 198 | } 199 | 200 | .line-numbers-rows > span { 201 | pointer-events: none; 202 | display: block; 203 | counter-increment: linenumber; 204 | } 205 | 206 | .line-numbers-rows > span:before { 207 | content: counter(linenumber); 208 | color: #999; 209 | display: block; 210 | padding-right: 0.8em; 211 | text-align: right; 212 | } 213 | 214 | 215 | -------------------------------------------------------------------------------- /test/p5-embedder/prism.js: -------------------------------------------------------------------------------- 1 | /* http://prismjs.com/download.html?themes=prism-coy&languages=markup+css+css-extras+clike+javascript+java&plugins=line-numbers */ 2 | var self=typeof window!="undefined"?window:{},Prism=function(){var e=/\blang(?:uage)?-(?!\*)(\w+)\b/i,t=self.Prism={util:{encode:function(e){return e instanceof n?new n(e.type,t.util.encode(e.content)):t.util.type(e)==="Array"?e.map(t.util.encode):e.replace(/&/g,"&").replace(/e.length)break e;if(p instanceof i)continue;a.lastIndex=0;var d=a.exec(p);if(d){l&&(c=d[1].length);var v=d.index-1+c,d=d[0].slice(c),m=d.length,g=v+m,y=p.slice(0,v+1),b=p.slice(g+1),w=[h,1];y&&w.push(y);var E=new i(u,f?t.tokenize(d,f):d);w.push(E);b&&w.push(b);Array.prototype.splice.apply(s,w)}}}return s},hooks:{all:{},add:function(e,n){var r=t.hooks.all;r[e]=r[e]||[];r[e].push(n)},run:function(e,n){var r=t.hooks.all[e];if(!r||!r.length)return;for(var i=0,s;s=r[i++];)s(n)}}},n=t.Token=function(e,t){this.type=e;this.content=t};n.stringify=function(e,r,i){if(typeof e=="string")return e;if(Object.prototype.toString.call(e)=="[object Array]")return e.map(function(t){return n.stringify(t,r,e)}).join("");var s={type:e.type,content:n.stringify(e.content,r,i),tag:"span",classes:["token",e.type],attributes:{},language:r,parent:i};s.type=="comment"&&(s.attributes.spellcheck="true");t.hooks.run("wrap",s);var o="";for(var u in s.attributes)o+=u+'="'+(s.attributes[u]||"")+'"';return"<"+s.tag+' class="'+s.classes.join(" ")+'" '+o+">"+s.content+""};if(!self.document){if(!self.addEventListener)return self.Prism;self.addEventListener("message",function(e){var n=JSON.parse(e.data),r=n.language,i=n.code;self.postMessage(JSON.stringify(t.tokenize(i,t.languages[r])));self.close()},!1);return self.Prism}var r=document.getElementsByTagName("script");r=r[r.length-1];if(r){t.filename=r.src;document.addEventListener&&!r.hasAttribute("data-manual")&&document.addEventListener("DOMContentLoaded",t.highlightAll)}return self.Prism}();typeof module!="undefined"&&module.exports&&(module.exports=Prism);; 3 | Prism.languages.markup={comment://g,prolog:/<\?.+?\?>/,doctype://,cdata://i,tag:{pattern:/<\/?[\w:-]+\s*(?:\s+[\w:-]+(?:=(?:("|')(\\?[\w\W])*?\1|[^\s'">=]+))?\s*)*\/?>/gi,inside:{tag:{pattern:/^<\/?[\w:-]+/i,inside:{punctuation:/^<\/?/,namespace:/^[\w-]+?:/}},"attr-value":{pattern:/=(?:('|")[\w\W]*?(\1)|[^\s>]+)/gi,inside:{punctuation:/=|>|"/g}},punctuation:/\/?>/g,"attr-name":{pattern:/[\w:-]+/g,inside:{namespace:/^[\w-]+?:/}}}},entity:/\&#?[\da-z]{1,8};/gi};Prism.hooks.add("wrap",function(e){e.type==="entity"&&(e.attributes.title=e.content.replace(/&/,"&"))});; 4 | Prism.languages.css={comment:/\/\*[\w\W]*?\*\//g,atrule:{pattern:/@[\w-]+?.*?(;|(?=\s*{))/gi,inside:{punctuation:/[;:]/g}},url:/url\((["']?).*?\1\)/gi,selector:/[^\{\}\s][^\{\};]*(?=\s*\{)/g,property:/(\b|\B)[\w-]+(?=\s*:)/ig,string:/("|')(\\?.)*?\1/g,important:/\B!important\b/gi,punctuation:/[\{\};:]/g,"function":/[-a-z0-9]+(?=\()/ig};Prism.languages.markup&&Prism.languages.insertBefore("markup","tag",{style:{pattern:/[\w\W]*?<\/style>/ig,inside:{tag:{pattern:/|<\/style>/ig,inside:Prism.languages.markup.tag.inside},rest:Prism.languages.css}}});; 5 | Prism.languages.css.selector={pattern:/[^\{\}\s][^\{\}]*(?=\s*\{)/g,inside:{"pseudo-element":/:(?:after|before|first-letter|first-line|selection)|::[-\w]+/g,"pseudo-class":/:[-\w]+(?:\(.*\))?/g,"class":/\.[-:\.\w]+/g,id:/#[-:\.\w]+/g}};Prism.languages.insertBefore("css","ignore",{hexcode:/#[\da-f]{3,6}/gi,entity:/\\[\da-f]{1,8}/gi,number:/[\d%\.]+/g});; 6 | Prism.languages.clike={comment:{pattern:/(^|[^\\])(\/\*[\w\W]*?\*\/|(^|[^:])\/\/.*?(\r?\n|$))/g,lookbehind:!0},string:/("|')(\\?.)*?\1/g,"class-name":{pattern:/((?:(?:class|interface|extends|implements|trait|instanceof|new)\s+)|(?:catch\s+\())[a-z0-9_\.\\]+/ig,lookbehind:!0,inside:{punctuation:/(\.|\\)/}},keyword:/\b(if|else|while|do|for|return|in|instanceof|function|new|try|throw|catch|finally|null|break|continue)\b/g,"boolean":/\b(true|false)\b/g,"function":{pattern:/[a-z0-9_]+\(/ig,inside:{punctuation:/\(/}},number:/\b-?(0x[\dA-Fa-f]+|\d*\.?\d+([Ee]-?\d+)?)\b/g,operator:/[-+]{1,2}|!|<=?|>=?|={1,3}|&{1,2}|\|?\||\?|\*|\/|\~|\^|\%/g,ignore:/&(lt|gt|amp);/gi,punctuation:/[{}[\];(),.:]/g};; 7 | Prism.languages.javascript=Prism.languages.extend("clike",{keyword:/\b(var|let|if|else|while|do|for|return|in|instanceof|function|get|set|new|with|typeof|try|throw|catch|finally|null|break|continue|this)\b/g,number:/\b-?(0x[\dA-Fa-f]+|\d*\.?\d+([Ee]-?\d+)?|NaN|-?Infinity)\b/g});Prism.languages.insertBefore("javascript","keyword",{regex:{pattern:/(^|[^/])\/(?!\/)(\[.+?]|\\.|[^/\r\n])+\/[gim]{0,3}(?=\s*($|[\r\n,.;})]))/g,lookbehind:!0}});Prism.languages.markup&&Prism.languages.insertBefore("markup","tag",{script:{pattern:/[\w\W]*?<\/script>/ig,inside:{tag:{pattern:/|<\/script>/ig,inside:Prism.languages.markup.tag.inside},rest:Prism.languages.javascript}}});; 8 | Prism.languages.java=Prism.languages.extend("clike",{keyword:/\b(abstract|continue|for|new|switch|assert|default|goto|package|synchronized|boolean|do|if|private|this|break|double|implements|protected|throw|byte|else|import|public|throws|case|enum|instanceof|return|transient|catch|extends|int|short|try|char|final|interface|static|void|class|finally|long|strictfp|volatile|const|float|native|super|while)\b/g,number:/\b0b[01]+\b|\b0x[\da-f]*\.?[\da-fp\-]+\b|\b\d*\.?\d+[e]?[\d]*[df]\b|\W\d*\.?\d+\b/gi,operator:{pattern:/([^\.]|^)([-+]{1,2}|!|=?<|=?>|={1,2}|(&){1,2}|\|?\||\?|\*|\/|%|\^|(<){2}|(>){2,3}|:|~)/g,lookbehind:!0}});; 9 | Prism.hooks.add("after-highlight",function(e){var t=e.element.parentNode;if(!t||!/pre/i.test(t.nodeName)||t.className.indexOf("line-numbers")===-1){return}var n=1+e.code.split("\n").length;var r;lines=new Array(n);lines=lines.join("");r=document.createElement("span");r.className="line-numbers-rows";r.innerHTML=lines;if(t.hasAttribute("data-start")){t.style.counterReset="linenumber "+(parseInt(t.getAttribute("data-start"),10)-1)}e.element.appendChild(r)}); -------------------------------------------------------------------------------- /test/p5-embedder/readme.txt: -------------------------------------------------------------------------------- 1 | === p5.js Embedder === 2 | Contributors: lmccart 3 | Tags: p5.js, p5, javascript, js, teaching, processing 4 | Requires at least: 3.0.1 5 | Tested up to: 3.4 6 | Stable tag: 4.3 7 | License: GPLv2 or later 8 | License URI: http://www.gnu.org/licenses/gpl-2.0.html 9 | 10 | This plugin embeds a p5.js sketch into a wordpress blog. 11 | 12 | == Description == 13 | 14 | ####To include a p5 sketch: 15 | 16 | 1. Upload the sketch.js file to Media Library. 17 | 18 | 2. While editing post, choose 'Add Media' and choose the uploaded JS file, it will 19 | add a link in your post. 20 | 21 | 3. Add class='p5-embed' to the link to specify it should be parsed as a p5 sketch. 22 | `your_filename` 23 | 24 | 4. If you would like to specify the height and width of the frame of your sketch, use 25 | the data-height and data-width tags (you can specify one or both of these). 26 | `your_filename` 27 | 28 | 5. By default the sketch and code are displayed. If you would like to hide the code, 29 | use the tag data-nocode='true'. 30 | `your_filename` 31 | 32 | 6. You can override the default font-size by adding data-fontsize=n, where n is the size 33 | of the font in pixels (for example, 10). 34 | 35 | ####Including media 36 | 37 | To include external files (for example, an image via loadImage) you will need to upload the files individually to wordpress and use the full blog url or the upload in the JS code. 38 | 39 | 40 | == Installation == 41 | 42 | 1. Choose 'Plugins', 'Add New', 'Upload', and upload p5-embedder.zip. 43 | 2. Activate the plugin. See Description for instructions for use in posts. 44 | -------------------------------------------------------------------------------- /test/p5-embedder/style.css: -------------------------------------------------------------------------------- 1 | 2 | 3 | .p5_editor { 4 | height: 500px; 5 | width: 710px; 6 | overflow: hidden; 7 | margin-top: 0.5em; 8 | color: #222; 9 | font-family: 10 | inconsolatamedium, 11 | Consolas, 12 | Monaco, 13 | 'Andale Mono', 14 | monospace; 15 | font-size: 1em !important; 16 | line-height: 1em; 17 | } 18 | 19 | .p5_sketch_link { 20 | width: 100%; 21 | float: left; 22 | padding-bottom: 10px; 23 | } 24 | 25 | iframe { 26 | border: none; 27 | } -------------------------------------------------------------------------------- /test/test.js: -------------------------------------------------------------------------------- 1 | var dim; 2 | 3 | function setup() { 4 | createCanvas(400, 400); 5 | dim = width/2; 6 | background(0); 7 | colorMode(HSB, 360, 100, 100); 8 | noStroke(); 9 | ellipseMode(RADIUS); 10 | frameRate(1); 11 | } 12 | 13 | function draw() { 14 | background(0); 15 | for (var x = 0; x <= width; x+=dim) { 16 | drawGradient(x, height/2); 17 | } 18 | } 19 | 20 | function drawGradient(x, y) { 21 | var radius = dim/2; 22 | var h = random(0, 360); 23 | for (var r = radius; r > 0; --r) { 24 | fill(h, 90, 90); 25 | ellipse(x, y, r, r); 26 | h = (h + 1) % 360; 27 | } 28 | } -------------------------------------------------------------------------------- /test/test.php: -------------------------------------------------------------------------------- 1 | loadHTMLFile("index.html"); 4 | 5 | $xpath = new DOMXpath($dom); 6 | $sketches = $xpath->query('//a[@class="p5-embed"]'); 7 | 8 | foreach ($sketches as $s) { 9 | $name = $s->nodeValue; 10 | $url = $s->getAttribute('href'); 11 | $s->setAttribute('class', 'p5_sketch_link'); 12 | 13 | $code = file_get_contents($url); 14 | 15 | $w = $s->getAttribute('data-width'); 16 | $h = $s->getAttribute('data-height'); 17 | $nocode = $s->getAttribute('data-nocode'); 18 | $fontsize = $s->getAttribute('data-fontsize'); 19 | 20 | $iframe = $dom->createElement('iframe'); 21 | $iframe->setAttribute('src', 'p5_iframe.html'); 22 | $iframe->setAttribute('class', 'p5_exampleFrame'); 23 | $iframe->setAttribute('width', $w); 24 | $iframe->setAttribute('height', $h); 25 | $s->parentNode->appendChild($iframe); 26 | 27 | $pre = $dom->createElement('pre'); 28 | $pre->setAttribute('class', 'language-javascript'); 29 | $s->parentNode->appendChild($pre); 30 | 31 | $editor = $dom->createElement('code', $code); 32 | $editor->setAttribute('class', 'p5_editor language-javascript'); 33 | $pre->appendChild($editor); 34 | 35 | if ($nocode == 'true') { 36 | $pre->setAttribute('style', 'display:none'); 37 | } 38 | 39 | if ($fontsize) { 40 | $lineheight = $fontsize * 1.45; 41 | $pre->setAttribute('style', 'font-size:'.$fontsize.'px !important;'); 42 | $editor->setAttribute('style', 'line-height:'.$lineheight.'px !important'); 43 | } 44 | } 45 | 46 | echo mb_convert_encoding($dom->saveHTML(), 'HTML-ENTITIES', 'UTF-8'); 47 | ?> 48 | 49 | -------------------------------------------------------------------------------- /test/test2.js: -------------------------------------------------------------------------------- 1 | var dim; 2 | 3 | function setup() { 4 | createCanvas(400, 400); 5 | dim = width/2; 6 | background(0); 7 | colorMode(HSB, 360, 100, 100); 8 | noStroke(); 9 | ellipseMode(RADIUS); 10 | frameRate(1); 11 | } 12 | 13 | function draw() { 14 | background(0); 15 | ellipse(width/2, height/2, 10, 10) 16 | } --------------------------------------------------------------------------------