diff --git a/floppies/claudia/noweb/libraries/.DS_Store b/floppies/Kimmy_Rest/.DS_Store similarity index 92% rename from floppies/claudia/noweb/libraries/.DS_Store rename to floppies/Kimmy_Rest/.DS_Store index 5008ddf..57c3d4f 100644 Binary files a/floppies/claudia/noweb/libraries/.DS_Store and b/floppies/Kimmy_Rest/.DS_Store differ diff --git a/floppies/Kimmy_Rest/LICENSE b/floppies/Kimmy_Rest/LICENSE new file mode 100644 index 0000000..bc8fde7 --- /dev/null +++ b/floppies/Kimmy_Rest/LICENSE @@ -0,0 +1 @@ +FLOPPYLEFT - 2017 diff --git a/floppies/Kimmy_Rest/README b/floppies/Kimmy_Rest/README new file mode 100644 index 0000000..9f79294 --- /dev/null +++ b/floppies/Kimmy_Rest/README @@ -0,0 +1,11 @@ +Author: Kimmy Spreeuwenberg +Date: 2017 +Title: Rest + +Description: +Make a silence. + +“There is no such thing as an empty space or an empty time. +There is always something to see, something to hear. In fact, +try as we may to make a silence, we cannot.” +(John Cage, Silence: Lectures and Writings) \ No newline at end of file diff --git a/floppies/Kimmy_Rest/main.pd b/floppies/Kimmy_Rest/main.pd index 74152ab..26690e4 100644 --- a/floppies/Kimmy_Rest/main.pd +++ b/floppies/Kimmy_Rest/main.pd @@ -1,8 +1,7 @@ -#N canvas 280 23 912 793 10; +#N canvas 166 23 912 793 10; #X obj 98 109 adc~; #X obj 167 267 tabwrite~ noise; #X obj 98 131 +~; -#X obj 143 205 /~ 2; #X msg 209 208 bang; #X obj 214 136 tgl 15 0 empty empty empty 17 7 0 10 -262144 -1 -1 0 1; @@ -15,10 +14,10 @@ #X coords 0 1 88200 -1 200 140 1 0 0; #X restore 428 114 graph; #X obj 313 193 env~; -#X floatatom 325 233 5 0 0 0 - - -, f 5; +#X floatatom 369 228 5 0 0 0 - - -, f 5; #X obj 161 302 phasor~ 0.5; -#X obj 172 564 +~; -#X floatatom 291 263 5 0 0 0 - - -, f 5; +#X obj 175 525 +~; +#X floatatom 306 267 5 0 0 0 - - -, f 5; #X obj 132 240 *~; #X obj 274 322 line~; #X obj 393 306 env~; @@ -38,97 +37,99 @@ #X obj 742 417 sel 1; #X obj 211 658 delwrite~ fd 4000; #X msg 379 442 1800; -#X obj 580 368 > 60; -#X obj 534 370 <= 60; -#X obj 500 368 > 55; -#X obj 454 370 <= 55; #X obj 420 368 > 50; #X obj 379 369 <= 50; -#X obj 742 369 > 75; -#X obj 698 370 <= 75; -#X obj 663 370 > 65; -#X obj 614 370 <= 65; -#X obj 318 523 vd~ fd 100; #X obj 299 39 loadbang; #X msg 299 68 \; pd dsp 1; -#X obj 98 176 *~ 1; -#X obj 98 151 lop~ 1000; -#X msg 274 300 \$1 40; -#X obj 660 623 pack f f; -#X obj 649 658 print; -#X obj 284 238 >= 80; +#X obj 173 564 /~ 2; +#X obj 98 151 lop~ 2500; +#X msg 422 442 1830; #X msg 744 442 1900; -#X msg 502 442 1830; -#X msg 582 442 1850; -#X msg 422 442 1810; -#X msg 664 442 1880; -#X obj 318 549 *~ 0.7; +#X msg 664 442 1875; +#X msg 582 442 1865; +#X msg 502 442 1850; +#X obj 742 369 > 90; +#X obj 698 370 <= 90; +#X obj 663 370 > 80; +#X obj 614 370 <= 80; +#X obj 580 368 > 70; +#X obj 534 370 <= 70; +#X obj 500 368 > 60; +#X obj 454 370 <= 60; +#X obj 273 269 &&; +#X msg 274 300 \$1 40; +#X obj 271 238 > 60; +#X obj 98 176 *~ 20; +#X obj 324 238 <= 80; +#X obj 318 523 vd~ fd 200; +#X obj 288 552 *~ 0.95; #X connect 0 0 2 0; -#X connect 0 1 2 1; -#X connect 2 0 48 0; -#X connect 4 0 1 0; -#X connect 5 0 9 0; -#X connect 6 0 14 0; -#X connect 8 0 6 0; -#X connect 9 0 1 0; -#X connect 11 0 12 0; -#X connect 11 0 51 0; -#X connect 11 0 53 0; -#X connect 13 0 8 0; -#X connect 14 0 33 0; -#X connect 14 0 7 0; -#X connect 14 0 7 1; -#X connect 14 0 18 0; -#X connect 16 0 1 0; -#X connect 17 0 16 1; -#X connect 18 0 20 0; -#X connect 18 0 35 0; -#X connect 18 0 36 0; -#X connect 18 0 37 0; -#X connect 18 0 38 0; -#X connect 18 0 39 0; -#X connect 18 0 40 0; -#X connect 18 0 41 0; -#X connect 18 0 42 0; -#X connect 18 0 43 0; -#X connect 18 0 44 0; -#X connect 18 0 51 1; -#X connect 19 0 45 0; -#X connect 21 0 31 0; -#X connect 22 0 34 0; -#X connect 23 0 57 0; -#X connect 24 0 23 0; -#X connect 25 0 55 0; -#X connect 26 0 25 0; -#X connect 27 0 56 0; -#X connect 28 0 27 0; -#X connect 29 0 58 0; -#X connect 30 0 29 0; -#X connect 31 0 19 0; -#X connect 32 0 54 0; -#X connect 34 0 31 0; -#X connect 35 0 28 0; -#X connect 36 0 26 1; -#X connect 37 0 26 0; -#X connect 38 0 24 1; -#X connect 39 0 24 0; -#X connect 40 0 22 0; -#X connect 41 0 32 0; -#X connect 42 0 30 1; +#X connect 2 0 39 0; +#X connect 3 0 1 0; +#X connect 4 0 8 0; +#X connect 5 0 13 0; +#X connect 7 0 5 0; +#X connect 8 0 1 0; +#X connect 10 0 11 0; +#X connect 10 0 55 0; +#X connect 10 0 57 0; +#X connect 12 0 7 0; +#X connect 13 0 38 0; +#X connect 15 0 1 0; +#X connect 16 0 15 1; +#X connect 17 0 19 0; +#X connect 17 0 34 0; +#X connect 17 0 35 0; +#X connect 17 0 45 0; +#X connect 17 0 46 0; +#X connect 17 0 47 0; +#X connect 17 0 48 0; +#X connect 17 0 49 0; +#X connect 17 0 50 0; +#X connect 17 0 51 0; +#X connect 17 0 52 0; +#X connect 18 0 58 0; +#X connect 20 0 30 0; +#X connect 21 0 33 0; +#X connect 22 0 40 0; +#X connect 23 0 22 0; +#X connect 24 0 44 0; +#X connect 25 0 24 0; +#X connect 26 0 43 0; +#X connect 27 0 26 0; +#X connect 28 0 42 0; +#X connect 29 0 28 0; +#X connect 30 0 18 0; +#X connect 31 0 41 0; +#X connect 33 0 30 0; +#X connect 34 0 23 0; +#X connect 35 0 21 0; +#X connect 36 0 37 0; +#X connect 36 0 8 0; +#X connect 38 0 6 0; +#X connect 38 0 6 1; +#X connect 38 0 32 0; +#X connect 38 0 17 0; +#X connect 39 0 56 0; +#X connect 40 0 30 0; +#X connect 41 0 30 0; +#X connect 42 0 30 0; #X connect 43 0 30 0; -#X connect 44 0 28 1; -#X connect 45 0 59 0; -#X connect 46 0 47 0; -#X connect 46 0 9 0; -#X connect 48 0 11 0; -#X connect 48 0 16 0; -#X connect 50 0 17 0; -#X connect 51 0 52 0; -#X connect 53 0 15 0; -#X connect 53 0 50 0; -#X connect 54 0 31 0; -#X connect 55 0 31 0; -#X connect 56 0 31 0; -#X connect 57 0 31 0; -#X connect 58 0 31 0; -#X connect 59 0 14 1; +#X connect 44 0 30 0; +#X connect 45 0 31 0; +#X connect 46 0 29 1; +#X connect 47 0 29 0; +#X connect 48 0 27 1; +#X connect 49 0 27 0; +#X connect 50 0 25 1; +#X connect 51 0 25 0; +#X connect 52 0 23 1; +#X connect 53 0 54 0; +#X connect 54 0 16 0; +#X connect 55 0 14 0; +#X connect 55 0 53 0; +#X connect 56 0 10 0; +#X connect 56 0 15 0; +#X connect 57 0 53 1; +#X connect 58 0 59 0; +#X connect 59 0 13 1; diff --git a/floppies/Kimmy_Rest/main_200line.pd b/floppies/Kimmy_Rest/main_200line.pd new file mode 100644 index 0000000..8b1615c --- /dev/null +++ b/floppies/Kimmy_Rest/main_200line.pd @@ -0,0 +1,135 @@ +#N canvas 166 23 912 793 10; +#X obj 98 109 adc~; +#X obj 167 267 tabwrite~ noise; +#X obj 98 131 +~; +#X msg 209 208 bang; +#X obj 214 136 tgl 15 0 empty empty empty 17 7 0 10 -262144 -1 -1 0 +1; +#X obj 161 361 tabread4~ noise; +#X obj 154 696 dac~; +#X obj 161 334 *~ 88200; +#X obj 198 170 metro 2000; +#N canvas 0 22 450 278 (subpatch) 0; +#X array noise 88200 float 2; +#X coords 0 1 88200 -1 200 140 1 0 0; +#X restore 428 114 graph; +#X obj 313 193 env~; +#X floatatom 369 228 5 0 0 0 - - -, f 5; +#X obj 161 302 phasor~ 0.5; +#X obj 175 525 +~; +#X floatatom 306 267 5 0 0 0 - - -, f 5; +#X obj 132 240 *~; +#X obj 274 322 line~; +#X obj 393 306 env~; +#X obj 318 499 line~; +#X floatatom 497 321 5 0 0 0 - - -, f 5; +#X floatatom 280 453 5 0 0 0 - - -, f 5; +#X obj 379 419 sel 1; +#X obj 420 417 sel 1; +#X obj 421 395 &&; +#X obj 500 417 sel 1; +#X obj 501 395 &&; +#X obj 580 417 sel 1; +#X obj 581 395 &&; +#X obj 662 417 sel 1; +#X obj 663 395 &&; +#X msg 318 477 \$1 2000; +#X obj 742 417 sel 1; +#X obj 211 658 delwrite~ fd 4000; +#X msg 379 442 1800; +#X obj 420 368 > 50; +#X obj 379 369 <= 50; +#X obj 299 39 loadbang; +#X msg 299 68 \; pd dsp 1; +#X obj 173 564 /~ 2; +#X obj 98 151 lop~ 2500; +#X msg 422 442 1830; +#X msg 744 442 1900; +#X msg 664 442 1875; +#X msg 582 442 1865; +#X msg 502 442 1850; +#X obj 742 369 > 90; +#X obj 698 370 <= 90; +#X obj 663 370 > 80; +#X obj 614 370 <= 80; +#X obj 580 368 > 70; +#X obj 534 370 <= 70; +#X obj 500 368 > 60; +#X obj 454 370 <= 60; +#X obj 273 269 &&; +#X obj 271 238 > 60; +#X obj 98 176 *~ 20; +#X obj 324 238 <= 80; +#X obj 318 523 vd~ fd 200; +#X obj 288 552 *~ 0.95; +#X msg 274 300 \$1 200; +#X connect 0 0 2 0; +#X connect 2 0 39 0; +#X connect 3 0 1 0; +#X connect 4 0 8 0; +#X connect 5 0 13 0; +#X connect 7 0 5 0; +#X connect 8 0 1 0; +#X connect 10 0 11 0; +#X connect 10 0 54 0; +#X connect 10 0 56 0; +#X connect 12 0 7 0; +#X connect 13 0 38 0; +#X connect 15 0 1 0; +#X connect 16 0 15 1; +#X connect 17 0 19 0; +#X connect 17 0 34 0; +#X connect 17 0 35 0; +#X connect 17 0 45 0; +#X connect 17 0 46 0; +#X connect 17 0 47 0; +#X connect 17 0 48 0; +#X connect 17 0 49 0; +#X connect 17 0 50 0; +#X connect 17 0 51 0; +#X connect 17 0 52 0; +#X connect 18 0 57 0; +#X connect 20 0 30 0; +#X connect 21 0 33 0; +#X connect 22 0 40 0; +#X connect 23 0 22 0; +#X connect 24 0 44 0; +#X connect 25 0 24 0; +#X connect 26 0 43 0; +#X connect 27 0 26 0; +#X connect 28 0 42 0; +#X connect 29 0 28 0; +#X connect 30 0 18 0; +#X connect 31 0 41 0; +#X connect 33 0 30 0; +#X connect 34 0 23 0; +#X connect 35 0 21 0; +#X connect 36 0 37 0; +#X connect 36 0 8 0; +#X connect 38 0 6 0; +#X connect 38 0 6 1; +#X connect 38 0 32 0; +#X connect 38 0 17 0; +#X connect 39 0 55 0; +#X connect 40 0 30 0; +#X connect 41 0 30 0; +#X connect 42 0 30 0; +#X connect 43 0 30 0; +#X connect 44 0 30 0; +#X connect 45 0 31 0; +#X connect 46 0 29 1; +#X connect 47 0 29 0; +#X connect 48 0 27 1; +#X connect 49 0 27 0; +#X connect 50 0 25 1; +#X connect 51 0 25 0; +#X connect 52 0 23 1; +#X connect 53 0 59 0; +#X connect 54 0 14 0; +#X connect 54 0 53 0; +#X connect 55 0 10 0; +#X connect 55 0 15 0; +#X connect 56 0 53 1; +#X connect 57 0 58 0; +#X connect 58 0 13 1; +#X connect 59 0 16 0; diff --git a/floppies/Kimmy_Rest/noweb/index.html b/floppies/Kimmy_Rest/noweb/index.html new file mode 100644 index 0000000..c4f4332 --- /dev/null +++ b/floppies/Kimmy_Rest/noweb/index.html @@ -0,0 +1,3193 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/floppies/claudia/fine-line/.DS_Store b/floppies/claudia/fine-line/.DS_Store index 42efede..cf5da4b 100644 Binary files a/floppies/claudia/fine-line/.DS_Store and b/floppies/claudia/fine-line/.DS_Store differ diff --git a/floppies/claudia/fine-line/index.html b/floppies/claudia/fine-line/index.html index 7cf977a..da424a1 100755 --- a/floppies/claudia/fine-line/index.html +++ b/floppies/claudia/fine-line/index.html @@ -4,10 +4,10 @@ - + - - + + diff --git a/floppies/claudia/fine-line/libraries/p5.dom.js b/floppies/claudia/fine-line/libraries/p5.dom.js deleted file mode 100644 index d339e8d..0000000 --- a/floppies/claudia/fine-line/libraries/p5.dom.js +++ /dev/null @@ -1,2193 +0,0 @@ -/*! p5.dom.js v0.3.1 Jan 3, 2017 */ -/** - *

The web is much more than just canvas and p5.dom makes it easy to interact - * with other HTML5 objects, including text, hyperlink, image, input, video, - * audio, and webcam.

- *

There is a set of creation methods, DOM manipulation methods, and - * an extended p5.Element that supports a range of HTML elements. See the - * - * beyond the canvas tutorial for a full overview of how this addon works. - * - *

Methods and properties shown in black are part of the p5.js core, items in - * blue are part of the p5.dom library. You will need to include an extra file - * in order to access the blue functions. See the - * using a library - * section for information on how to include this library. p5.dom comes with - * p5 complete or you can download the single file - * - * here.

- *

See tutorial: beyond the canvas - * for more info on how to use this libary. - * - * @module p5.dom - * @submodule p5.dom - * @for p5.dom - * @main - */ - -(function (root, factory) { - if (typeof define === 'function' && define.amd) - define('p5.dom', ['p5'], function (p5) { (factory(p5));}); - else if (typeof exports === 'object') - factory(require('../p5')); - else - factory(root['p5']); -}(this, function (p5) { - -// ============================================================================= -// p5 additions -// ============================================================================= - - /** - * Searches the page for an element with the given ID, class, or tag name (using the '#' or '.' - * prefixes to specify an ID or class respectively, and none for a tag) and returns it as - * a p5.Element. If a class or tag name is given with more than 1 element, - * only the first element will be returned. - * The DOM node itself can be accessed with .elt. - * Returns null if none found. You can also specify a container to search within. - * - * @method select - * @param {String} name id, class, or tag name of element to search for - * @param {String} [container] id, p5.Element, or HTML element to search within - * @return {Object/p5.Element|Null} p5.Element containing node found - * @example - *

- * function setup() { - * createCanvas(100,100); - * //translates canvas 50px down - * select('canvas').position(100, 100); - * } - *
- *
- * // these are all valid calls to select() - * var a = select('#moo'); - * var b = select('#blah', '#myContainer'); - * var c = select('#foo', b); - * var d = document.getElementById('beep'); - * var e = select('p', d); - *
- * - */ - p5.prototype.select = function (e, p) { - var res = null; - var container = getContainer(p); - if (e[0] === '.'){ - e = e.slice(1); - res = container.getElementsByClassName(e); - if (res.length) { - res = res[0]; - } else { - res = null; - } - }else if (e[0] === '#'){ - e = e.slice(1); - res = container.getElementById(e); - }else { - res = container.getElementsByTagName(e); - if (res.length) { - res = res[0]; - } else { - res = null; - } - } - if (res) { - return wrapElement(res); - } else { - return null; - } - }; - - /** - * Searches the page for elements with the given class or tag name (using the '.' prefix - * to specify a class and no prefix for a tag) and returns them as p5.Elements - * in an array. - * The DOM node itself can be accessed with .elt. - * Returns an empty array if none found. - * You can also specify a container to search within. - * - * @method selectAll - * @param {String} name class or tag name of elements to search for - * @param {String} [container] id, p5.Element, or HTML element to search within - * @return {Array} Array of p5.Elements containing nodes found - * @example - *
- * function setup() { - * createButton('btn'); - * createButton('2nd btn'); - * createButton('3rd btn'); - * var buttons = selectAll('button'); - * - * for (var i = 0; i < buttons.length; i++){ - * buttons[i].size(100,100); - * } - * } - *
- *
- * // these are all valid calls to selectAll() - * var a = selectAll('.moo'); - * var b = selectAll('div'); - * var c = selectAll('button', '#myContainer'); - * var d = select('#container'); - * var e = selectAll('p', d); - * var f = document.getElementById('beep'); - * var g = select('.blah', f); - *
- * - */ - p5.prototype.selectAll = function (e, p) { - var arr = []; - var res; - var container = getContainer(p); - if (e[0] === '.'){ - e = e.slice(1); - res = container.getElementsByClassName(e); - } else { - res = container.getElementsByTagName(e); - } - if (res) { - for (var j = 0; j < res.length; j++) { - var obj = wrapElement(res[j]); - arr.push(obj); - } - } - return arr; - }; - - /** - * Helper function for select and selectAll - */ - function getContainer(p) { - var container = document; - if (typeof p === 'string' && p[0] === '#'){ - p = p.slice(1); - container = document.getElementById(p) || document; - } else if (p instanceof p5.Element){ - container = p.elt; - } else if (p instanceof HTMLElement){ - container = p; - } - return container; - } - - /** - * Helper function for getElement and getElements. - */ - function wrapElement(elt) { - if(elt.tagName === "INPUT" && elt.type === "checkbox") { - var converted = new p5.Element(elt); - converted.checked = function(){ - if (arguments.length === 0){ - return this.elt.checked; - } else if(arguments[0]) { - this.elt.checked = true; - } else { - this.elt.checked = false; - } - return this; - }; - return converted; - } else if (elt.tagName === "VIDEO" || elt.tagName === "AUDIO") { - return new p5.MediaElement(elt); - } else { - return new p5.Element(elt); - } - } - - /** - * Removes all elements created by p5, except any canvas / graphics - * elements created by createCanvas or createGraphics. - * Event handlers are removed, and element is removed from the DOM. - * @method removeElements - * @example - *
- * function setup() { - * createCanvas(100, 100); - * createDiv('this is some text'); - * createP('this is a paragraph'); - * } - * function mousePressed() { - * removeElements(); // this will remove the div and p, not canvas - * } - *
- * - */ - p5.prototype.removeElements = function (e) { - for (var i=0; i - * var myDiv; - * function setup() { - * myDiv = createDiv('this is some text'); - * } - * - */ - - /** - * Creates a <p></p> element in the DOM with given inner HTML. Used - * for paragraph length text. - * Appends to the container node if one is specified, otherwise - * appends to body. - * - * @method createP - * @param {String} html inner HTML for element created - * @return {Object/p5.Element} pointer to p5.Element holding created node - * @example - *
- * var myP; - * function setup() { - * myP = createP('this is some text'); - * } - *
- */ - - /** - * Creates a <span></span> element in the DOM with given inner HTML. - * Appends to the container node if one is specified, otherwise - * appends to body. - * - * @method createSpan - * @param {String} html inner HTML for element created - * @return {Object/p5.Element} pointer to p5.Element holding created node - * @example - *
- * var mySpan; - * function setup() { - * mySpan = createSpan('this is some text'); - * } - *
- */ - var tags = ['div', 'p', 'span']; - tags.forEach(function(tag) { - var method = 'create' + tag.charAt(0).toUpperCase() + tag.slice(1); - p5.prototype[method] = function(html) { - var elt = document.createElement(tag); - elt.innerHTML = typeof html === undefined ? "" : html; - return addElement(elt, this); - } - }); - - /** - * Creates an <img> element in the DOM with given src and - * alternate text. - * Appends to the container node if one is specified, otherwise - * appends to body. - * - * @method createImg - * @param {String} src src path or url for image - * @param {String} [alt] alternate text to be used if image does not load - * @param {Function} [successCallback] callback to be called once image data is loaded - * @return {Object/p5.Element} pointer to p5.Element holding created node - * @example - *
- * var img; - * function setup() { - * img = createImg('http://p5js.org/img/asterisk-01.png'); - * } - *
- */ - p5.prototype.createImg = function() { - var elt = document.createElement('img'); - var args = arguments; - var self; - var setAttrs = function(){ - self.width = elt.offsetWidth || elt.width; - self.height = elt.offsetHeight || elt.height; - if (args.length > 1 && typeof args[1] === 'function'){ - self.fn = args[1]; - self.fn(); - }else if (args.length > 1 && typeof args[2] === 'function'){ - self.fn = args[2]; - self.fn(); - } - }; - elt.src = args[0]; - if (args.length > 1 && typeof args[1] === 'string'){ - elt.alt = args[1]; - } - elt.onload = function(){ - setAttrs(); - } - self = addElement(elt, this); - return self; - }; - - /** - * Creates an <a></a> element in the DOM for including a hyperlink. - * Appends to the container node if one is specified, otherwise - * appends to body. - * - * @method createA - * @param {String} href url of page to link to - * @param {String} html inner html of link element to display - * @param {String} [target] target where new link should open, - * could be _blank, _self, _parent, _top. - * @return {Object/p5.Element} pointer to p5.Element holding created node - * @example - *
- * var myLink; - * function setup() { - * myLink = createA('http://p5js.org/', 'this is a link'); - * } - *
- */ - p5.prototype.createA = function(href, html, target) { - var elt = document.createElement('a'); - elt.href = href; - elt.innerHTML = html; - if (target) elt.target = target; - return addElement(elt, this); - }; - - /** INPUT **/ - - - /** - * Creates a slider <input></input> element in the DOM. - * Use .size() to set the display length of the slider. - * Appends to the container node if one is specified, otherwise - * appends to body. - * - * @method createSlider - * @param {Number} min minimum value of the slider - * @param {Number} max maximum value of the slider - * @param {Number} [value] default value of the slider - * @param {Number} [step] step size for each tick of the slider (if step is set to 0, the slider will move continuously from the minimum to the maximum value) - * @return {Object/p5.Element} pointer to p5.Element holding created node - * @example - *
- * var slider; - * function setup() { - * slider = createSlider(0, 255, 100); - * slider.position(10, 10); - * slider.style('width', '80px'); - * } - * - * function draw() { - * var val = slider.value(); - * background(val); - * } - *
- * - *
- * var slider; - * function setup() { - * colorMode(HSB); - * slider = createSlider(0, 360, 60, 40); - * slider.position(10, 10); - * slider.style('width', '80px'); - * } - * - * function draw() { - * var val = slider.value(); - * background(val, 100, 100, 1); - * } - *
- */ - p5.prototype.createSlider = function(min, max, value, step) { - var elt = document.createElement('input'); - elt.type = 'range'; - elt.min = min; - elt.max = max; - if (step === 0) { - elt.step = .000000000000000001; // smallest valid step - } else if (step) { - elt.step = step; - } - if (typeof(value) === "number") elt.value = value; - return addElement(elt, this); - }; - - /** - * Creates a <button></button> element in the DOM. - * Use .size() to set the display size of the button. - * Use .mousePressed() to specify behavior on press. - * Appends to the container node if one is specified, otherwise - * appends to body. - * - * @method createButton - * @param {String} label label displayed on the button - * @param {String} [value] value of the button - * @return {Object/p5.Element} pointer to p5.Element holding created node - * @example - *
- * var button; - * function setup() { - * createCanvas(100, 100); - * background(0); - * button = createButton('click me'); - * button.position(19, 19); - * button.mousePressed(changeBG); - * } - * - * function changeBG() { - * var val = random(255); - * background(val); - * } - *
- */ - p5.prototype.createButton = function(label, value) { - var elt = document.createElement('button'); - elt.innerHTML = label; - elt.value = value; - if (value) elt.value = value; - return addElement(elt, this); - }; - - /** - * Creates a checkbox <input></input> element in the DOM. - * Calling .checked() on a checkbox returns if it is checked or not - * - * @method createCheckbox - * @param {String} [label] label displayed after checkbox - * @param {boolean} [value] value of the checkbox; checked is true, unchecked is false.Unchecked if no value given - * @return {Object/p5.Element} pointer to p5.Element holding created node - * @example - *
- * var checkbox; - * - * function setup() { - * checkbox = createCheckbox('label', false); - * checkbox.changed(myCheckedEvent); - * } - * - * function myCheckedEvent() { - * if (this.checked()) { - * console.log("Checking!"); - * } else { - * console.log("Unchecking!"); - * } - * } - *
- */ - p5.prototype.createCheckbox = function() { - var elt = document.createElement('div'); - var checkbox = document.createElement('input'); - checkbox.type = 'checkbox'; - elt.appendChild(checkbox); - //checkbox must be wrapped in p5.Element before label so that label appears after - var self = addElement(elt, this); - self.checked = function(){ - var cb = self.elt.getElementsByTagName('input')[0]; - if (cb) { - if (arguments.length === 0){ - return cb.checked; - }else if(arguments[0]){ - cb.checked = true; - }else{ - cb.checked = false; - } - } - return self; - }; - this.value = function(val){ - self.value = val; - return this; - }; - if (arguments[0]){ - var ran = Math.random().toString(36).slice(2); - var label = document.createElement('label'); - checkbox.setAttribute('id', ran); - label.htmlFor = ran; - self.value(arguments[0]); - label.appendChild(document.createTextNode(arguments[0])); - elt.appendChild(label); - } - if (arguments[1]){ - checkbox.checked = true; - } - return self; - }; - - /** - * Creates a dropdown menu <select></select> element in the DOM. - * @method createSelect - * @param {boolean} [multiple] [true if dropdown should support multiple selections] - * @return {Object/p5.Element} pointer to p5.Element holding created node - * @example - *
- * var sel; - * - * function setup() { - * textAlign(CENTER); - * background(200); - * sel = createSelect(); - * sel.position(10, 10); - * sel.option('pear'); - * sel.option('kiwi'); - * sel.option('grape'); - * sel.changed(mySelectEvent); - * } - * - * function mySelectEvent() { - * var item = sel.value(); - * background(200); - * text("it's a "+item+"!", 50, 50); - * } - *
- */ - p5.prototype.createSelect = function(mult) { - var elt = document.createElement('select'); - if (mult){ - elt.setAttribute('multiple', 'true'); - } - var self = addElement(elt, this); - self.option = function(name, value){ - var opt = document.createElement('option'); - opt.innerHTML = name; - if (arguments.length > 1) - opt.value = value; - else - opt.value = name; - elt.appendChild(opt); - }; - self.selected = function(value){ - var arr = []; - if (arguments.length > 0){ - for (var i = 0; i < this.elt.length; i++){ - if (value.toString() === this.elt[i].value){ - this.elt.selectedIndex = i; - } - } - return this; - }else{ - if (mult){ - for (var i = 0; i < this.elt.selectedOptions.length; i++){ - arr.push(this.elt.selectedOptions[i].value); - } - return arr; - }else{ - return this.elt.value; - } - } - }; - return self; - }; - - /** - * Creates a radio button <input></input> element in the DOM. - * The .option() method can be used to set options for the radio after it is - * created. The .value() method will return the currently selected option. - * - * @method createRadio - * @param {String} [divId] the id and name of the created div and input field respectively - * @return {Object/p5.Element} pointer to p5.Element holding created node - * @example - *
- * var radio; - * - * function setup() { - * radio = createRadio(); - * radio.option("black"); - * radio.option("white"); - * radio.option("gray"); - * radio.style('width', '60px'); - * textAlign(CENTER); - * fill(255, 0, 0); - * } - * - * function draw() { - * var val = radio.value(); - * background(val); - * text(val, width/2, height/2); - * } - *
- *
- * var radio; - * - * function setup() { - * radio = createRadio(); - * radio.option('apple', 1); - * radio.option('bread', 2); - * radio.option('juice', 3); - * radio.style('width', '60px'); - * textAlign(CENTER); - * } - * - * function draw() { - * background(200); - * var val = radio.value(); - * if (val) { - * text('item cost is $'+val, width/2, height/2); - * } - * } - *
- */ - p5.prototype.createRadio = function() { - var radios = document.querySelectorAll("input[type=radio]"); - var count = 0; - if(radios.length > 1){ - var length = radios.length; - var prev=radios[0].name; - var current = radios[1].name; - count = 1; - for(var i = 1; i < length; i++) { - current = radios[i].name; - if(prev != current){ - count++; - } - prev = current; - } - } - else if (radios.length == 1){ - count = 1; - } - var elt = document.createElement('div'); - var self = addElement(elt, this); - var times = -1; - self.option = function(name, value){ - var opt = document.createElement('input'); - opt.type = 'radio'; - opt.innerHTML = name; - if (arguments.length > 1) - opt.value = value; - else - opt.value = name; - opt.setAttribute('name',"defaultradio"+count); - elt.appendChild(opt); - if (name){ - times++; - var ran = Math.random().toString(36).slice(2); - var label = document.createElement('label'); - opt.setAttribute('id', "defaultradio"+count+"-"+times); - label.htmlFor = "defaultradio"+count+"-"+times; - label.appendChild(document.createTextNode(name)); - elt.appendChild(label); - } - return opt; - }; - self.selected = function(){ - var length = this.elt.childNodes.length; - if(arguments.length == 1) { - for (var i = 0; i < length; i+=2){ - if(this.elt.childNodes[i].value == arguments[0]) - this.elt.childNodes[i].checked = true; - } - return this; - } else { - for (var i = 0; i < length; i+=2){ - if(this.elt.childNodes[i].checked == true) - return this.elt.childNodes[i].value; - } - } - }; - self.value = function(){ - var length = this.elt.childNodes.length; - if(arguments.length == 1) { - for (var i = 0; i < length; i+=2){ - if(this.elt.childNodes[i].value == arguments[0]) - this.elt.childNodes[i].checked = true; - } - return this; - } else { - for (var i = 0; i < length; i+=2){ - if(this.elt.childNodes[i].checked == true) - return this.elt.childNodes[i].value; - } - return ""; - } - }; - return self - }; - - /** - * Creates an <input></input> element in the DOM for text input. - * Use .size() to set the display length of the box. - * Appends to the container node if one is specified, otherwise - * appends to body. - * - * @method createInput - * @param {Number} [value] default value of the input box - * @param {String} [type] type of text, ie text, password etc. Defaults to text - * @return {Object/p5.Element} pointer to p5.Element holding created node - * @example - *
- * function setup(){ - * var inp = createInput(''); - * inp.input(myInputEvent); - * } - * - * function myInputEvent(){ - * console.log('you are typing: ', this.value()); - * } - * - *
- */ - p5.prototype.createInput = function(value, type) { - var elt = document.createElement('input'); - elt.type = type ? type : 'text'; - if (value) elt.value = value; - return addElement(elt, this); - }; - - /** - * Creates an <input></input> element in the DOM of type 'file'. - * This allows users to select local files for use in a sketch. - * - * @method createFileInput - * @param {Function} [callback] callback function for when a file loaded - * @param {String} [multiple] optional to allow multiple files selected - * @return {Object/p5.Element} pointer to p5.Element holding created DOM element - * @example - * var input; - * var img; - * - * function setup() { - * input = createFileInput(handleFile); - * input.position(0, 0); - * } - * - * function draw() { - * if (img) { - * image(img, 0, 0, width, height); - * } - * } - * - * function handleFile(file) { - * print(file); - * if (file.type === 'image') { - * img = createImg(file.data); - * img.hide(); - * } - * } - */ - p5.prototype.createFileInput = function(callback, multiple) { - - // Is the file stuff supported? - if (window.File && window.FileReader && window.FileList && window.Blob) { - // Yup, we're ok and make an input file selector - var elt = document.createElement('input'); - elt.type = 'file'; - - // If we get a second argument that evaluates to true - // then we are looking for multiple files - if (multiple) { - // Anything gets the job done - elt.multiple = 'multiple'; - } - - // Function to handle when a file is selected - // We're simplifying life and assuming that we always - // want to load every selected file - function handleFileSelect(evt) { - // These are the files - var files = evt.target.files; - // Load each one and trigger a callback - for (var i = 0; i < files.length; i++) { - var f = files[i]; - var reader = new FileReader(); - function makeLoader(theFile) { - // Making a p5.File object - var p5file = new p5.File(theFile); - return function(e) { - p5file.data = e.target.result; - callback(p5file); - }; - }; - reader.onload = makeLoader(f); - - // Text or data? - // This should likely be improved - if (f.type.indexOf('text') > -1) { - reader.readAsText(f); - } else { - reader.readAsDataURL(f); - } - } - } - - // Now let's handle when a file was selected - elt.addEventListener('change', handleFileSelect, false); - return addElement(elt, this); - } else { - console.log('The File APIs are not fully supported in this browser. Cannot create element.'); - } - }; - - - /** VIDEO STUFF **/ - - function createMedia(pInst, type, src, callback) { - var elt = document.createElement(type); - - // allow src to be empty - var src = src || ''; - if (typeof src === 'string') { - src = [src]; - } - for (var i=0; i