diff --git a/etc/nginx/sites-available/default b/etc/nginx/sites-available/default new file mode 100644 index 0000000..6a823b0 --- /dev/null +++ b/etc/nginx/sites-available/default @@ -0,0 +1,42 @@ +server { + listen 80 default_server; + listen [::]:80 default_server; + + #root /var/www/html; + root /media/floppy/noweb; + + # Add index.php to the list if you are using PHP + index index.html index.htm index.nginx-debian.html; + + server_name _; + + error_page 404 /insert.html; + + location = /insert.html { + root /var/www/static; + internal; + } + + location / { + try_files $uri $uri/ =404; + } + + location /static { + alias /var/www/static; + autoindex on; + } + + # /cgi-bin/foo.cgi ==> /media/floppy/noweb/cgi-bin/foo.cgi + location ~ ^/cgi-bin/.*\.cgi$ { + root /media/floppy/noweb/cgi-bin; + rewrite ^/cgi-bin/(.*)\.cgi /$1.cgi break; + include /etc/nginx/fastcgi_params; + fastcgi_pass unix:/var/run/fcgiwrap.socket; + fastcgi_param SCRIPT_FILENAME /media/floppy/noweb/cgi-bin$fastcgi_script_name; + } + + +} + + + diff --git a/floppies/claudia/fine-line/.DS_Store b/floppies/claudia/fine-line/.DS_Store new file mode 100644 index 0000000..42efede Binary files /dev/null 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 new file mode 100755 index 0000000..7cf977a --- /dev/null +++ b/floppies/claudia/fine-line/index.html @@ -0,0 +1,20 @@ + +
+ + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/floppies/claudia/fine-line/libraries/.DS_Store b/floppies/claudia/fine-line/libraries/.DS_Store new file mode 100644 index 0000000..5008ddf Binary files /dev/null and b/floppies/claudia/fine-line/libraries/.DS_Store differ diff --git a/floppies/claudia/fine-line/libraries/p5.dom.js b/floppies/claudia/fine-line/libraries/p5.dom.js new file mode 100644 index 0000000..d339e8d --- /dev/null +++ b/floppies/claudia/fine-line/libraries/p5.dom.js @@ -0,0 +1,2193 @@ +/*! 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);
+ *
+ * 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);
+ *
+ * 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
+ * }
+ *
+ * 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');
+ * }
+ *
+ * var mySpan;
+ * function setup() {
+ * mySpan = createSpan('this is some text');
+ * }
+ *
+ * var img;
+ * function setup() {
+ * img = createImg('http://p5js.org/img/asterisk-01.png');
+ * }
+ *
+ * var myLink;
+ * function setup() {
+ * myLink = createA('http://p5js.org/', 'this is a link');
+ * }
+ *
+ * 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);
+ * }
+ *
+ * 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);
+ * }
+ *
+ * var checkbox;
+ *
+ * function setup() {
+ * checkbox = createCheckbox('label', false);
+ * checkbox.changed(myCheckedEvent);
+ * }
+ *
+ * function myCheckedEvent() {
+ * if (this.checked()) {
+ * console.log("Checking!");
+ * } else {
+ * console.log("Unchecking!");
+ * }
+ * }
+ *
+ * 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);
+ * }
+ *
+ * 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);
+ * }
+ * }
+ *
+ * function setup(){
+ * var inp = createInput('');
+ * inp.input(myInputEvent);
+ * }
+ *
+ * function myInputEvent(){
+ * console.log('you are typing: ', this.value());
+ * }
+ *
+ *
Creates a new <video> element that contains the audio/video feed + * from a webcam. This can be drawn onto the canvas using video().
+ *More specific properties of the feed can be passing in a Constraints object. + * See the + * W3C + * spec for possible properties. Note that not all of these are supported + * by all browsers.
+ *Security note: A new browser security specification requires that getUserMedia, + * which is behind createCapture(), only works when you're running the code locally, + * or on HTTPS. Learn more here + * and here.
+ * + * @method createCapture + * @param {String|Constant|Object} type type of capture, either VIDEO or + * AUDIO if none specified, default both, + * or a Constraints object + * @param {Function} callback function to be called once + * stream has loaded + * @return {Object/p5.Element} capture video p5.Element + * @example + *
+ * var capture;
+ *
+ * function setup() {
+ * createCanvas(480, 120);
+ * capture = createCapture(VIDEO);
+ * }
+ *
+ * function draw() {
+ * image(capture, 0, 0, width, width*capture.height/capture.width);
+ * filter(INVERT);
+ * }
+ *
+ * function setup() {
+ * createCanvas(480, 120);
+ * var constraints = {
+ * video: {
+ * mandatory: {
+ * minWidth: 1280,
+ * minHeight: 720
+ * },
+ * optional: [
+ * { maxFrameRate: 10 }
+ * ]
+ * },
+ * audio: true
+ * };
+ * createCapture(constraints, function(stream) {
+ * console.log(stream);
+ * });
+ * }
+ *
+ * var h2 = createElement('h2','im an h2 p5.element!');
+ *
+ */
+ p5.prototype.createElement = function(tag, content) {
+ var elt = document.createElement(tag);
+ if (typeof content !== 'undefined') {
+ elt.innerHTML = content;
+ }
+ return addElement(elt, this);
+ };
+
+
+// =============================================================================
+// p5.Element additions
+// =============================================================================
+ /**
+ *
+ * Adds specified class to the element.
+ *
+ * @for p5.Element
+ * @method addClass
+ * @param {String} class name of class to add
+ * @return {Object/p5.Element}
+ * @example
+ *
+ * var div = createDiv('div');
+ * div.addClass('myClass');
+ *
+ * var div0 = createDiv('this is the parent');
+ * var div1 = createDiv('this is the child');
+ * div0.child(div1); // use p5.Element
+ *
+ * var div0 = createDiv('this is the parent');
+ * var div1 = createDiv('this is the child');
+ * div1.id('apples');
+ * div0.child('apples'); // use id
+ *
+ * var div0 = createDiv('this is the parent');
+ * var elt = document.getElementById('myChildDiv');
+ * div0.child(elt); // use element from page
+ *
+ * function setup() {
+ * var div = createDiv('').size(10,10);
+ * div.style('background-color','orange');
+ * div.center();
+ *
+ * }
+ *
+ * var div = createDiv('').size(100,100);
+ * div.html('hi');
+ *
+ * var div = createDiv('Hello ').size(100,100);
+ * div.html('World', true);
+ *
+ * function setup() {
+ * var cnv = createCanvas(100, 100);
+ * // positions canvas 50px to the right and 100px
+ * // below upper left corner of the window
+ * cnv.position(50, 100);
+ * }
+ *
+ * var myDiv = createDiv("I like pandas.");
+ * myDiv.style("font-size", "18px");
+ * myDiv.style("color", "#ff0000");
+ *
+ * var col = color(25,23,200,50);
+ * var button = createButton("button");
+ * button.style("background-color", col);
+ * button.position(10, 10);
+ *
+ * var myDiv = createDiv("I like lizards.");
+ * myDiv.style("position", 20, 20);
+ * myDiv.style("rotate", 45);
+ *
+ * var myDiv;
+ * function setup() {
+ * background(200);
+ * myDiv = createDiv("I like gray.");
+ * myDiv.position(20, 20);
+ * }
+ *
+ * function draw() {
+ * myDiv.style("font-size", mouseX+"px");
+ * }
+ *
+ * var myDiv = createDiv("I like pandas.");
+ * myDiv.attribute("align", "center");
+ *
+ * var button;
+ * var checkbox;
+ *
+ * function setup() {
+ * checkbox = createCheckbox('enable', true);
+ * checkbox.changed(enableButton);
+ * button = createButton('button');
+ * button.position(10, 10);
+ * }
+ *
+ * function enableButton() {
+ * if( this.checked() ) {
+ * // Re-enable the button
+ * button.removeAttribute('disabled');
+ * } else {
+ * // Disable the button
+ * button.attribute('disabled','');
+ * }
+ * }
+ *
+ * // gets the value
+ * var inp;
+ * function setup() {
+ * inp = createInput('');
+ * }
+ *
+ * function mousePressed() {
+ * print(inp.value());
+ * }
+ *
+ * // sets the value
+ * var inp;
+ * function setup() {
+ * inp = createInput('myValue');
+ * }
+ *
+ * function mousePressed() {
+ * inp.value("myValue");
+ * }
+ *
+ * var div = createDiv('div');
+ * div.style("display", "none");
+ * div.show(); // turns display to block
+ *
+ * var div = createDiv('this is a div');
+ * div.hide();
+ *
+ * var div = createDiv('this is a div');
+ * div.size(100, 100);
+ *
+ * var myDiv = createDiv('this is some text');
+ * myDiv.remove();
+ *
+ * function setup() {
+ * audioEl = createAudio('assets/beat.mp3');
+ * audioEl.showControls(true);
+ * audioEl.onended(sayDone);
+ * }
+ *
+ * function sayDone(elt) {
+ * alert('done playing ' + elt.src );
+ * }
+ *
+ * function setup() {
+ * background(255,255,255);
+ *
+ * audioEl = createAudio('assets/beat.mp3');
+ * audioEl.showControls();
+ *
+ * // schedule three calls to changeBackground
+ * audioEl.addCue(0.5, changeBackground, color(255,0,0) );
+ * audioEl.addCue(1.0, changeBackground, color(0,255,0) );
+ * audioEl.addCue(2.5, changeBackground, color(0,0,255) );
+ * audioEl.addCue(3.0, changeBackground, color(0,255,255) );
+ * audioEl.addCue(4.2, changeBackground, color(255,255,0) );
+ * audioEl.addCue(5.0, changeBackground, color(255,255,0) );
+ * }
+ *
+ * function changeBackground(val) {
+ * background(val);
+ * }
+ *