├── .gitignore ├── README.md ├── mobile-examples ├── 01_first │ ├── index.html │ ├── libraries │ │ ├── p5.dom.js │ │ ├── p5.js │ │ └── p5.sound.js │ └── sketch.js ├── 02_touchIsDown │ ├── index.html │ ├── libraries │ │ ├── p5.dom.js │ │ ├── p5.js │ │ └── p5.sound.js │ └── sketch.js ├── 03_touch_coords │ ├── index.html │ ├── libraries │ │ ├── p5.dom.js │ │ ├── p5.js │ │ └── p5.sound.js │ └── sketch.js ├── 04_touch_callbacks │ ├── index.html │ ├── libraries │ │ ├── p5.dom.js │ │ ├── p5.js │ │ └── p5.sound.js │ └── sketch.js ├── 05_multitouch │ ├── index.html │ ├── libraries │ │ ├── p5.dom.js │ │ ├── p5.js │ │ └── p5.sound.js │ └── sketch.js └── 06_rotation │ ├── index.html │ ├── libraries │ ├── p5.dom.js │ ├── p5.js │ └── p5.sound.js │ └── sketch.js └── node-examples ├── aleph.js ├── genesis.txt ├── hello.js ├── markov-bot.js ├── markov-server.js ├── markov.js ├── package.json └── word-count.js /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | Polytechnic School of Engineering of New York University
2 | Integrated Digital Media
3 | Technology, Culture and Society 4 | 5 | # DM-GY 6063 B Creative Coding 6 | 7 | Fall 2015 / Thursdays 6:30-9:20pm MAGNET 825 8 | 9 | Your professor: [Allison Parrish](http://www.decontextualize.com/). E-mail me: [aparrish@nyu.edu](mailto:aparrish@nyu.edu). 10 | 11 | Office hours: Wednesdays, 4pm to 5:30pm at MAGNET (adjunct's work area) 12 | 13 | ##Course description 14 | 15 | This course is an introductory programming class, appropriate for students with 16 | no prior programming experience. Traditionally, introductory programming 17 | teaches algorithmic problem-solving, where a sequence of instructions describe 18 | the steps necessary to achieve a desired result. In this course, students are 19 | trained to go beyond this sequential thinking, to think concurrently and 20 | modularly. By its end, students are empowered to write and read code for 21 | event-driven, object-oriented, graphical user interfaces. 22 | 23 | ## IDM program objectives 24 | 25 | Students will: 26 | 27 | * Develop **conceptual thinking skills** to generate ideas and content in 28 | order to solve problems or create opportunities. 29 | 30 | * Develop **technical skills** to realize their ideas. 31 | 32 | * Develop **critical thinking skills** that will allow them to analyze and 33 | position their work within cultural, historic, aesthetic, economic, and 34 | technological contexts. 35 | 36 | * Gain knowledge of **professional practices and organizations** by developing 37 | their verbal, visual, and written communication for documentation and 38 | presentation, exhibition and promotion, networking, and career preparation. 39 | 40 | * Develop **collaboration skills** to actively and effectively work in a team 41 | or group. 42 | 43 | ## Course objectives 44 | 45 | Students in this course will: 46 | 47 | * Understand the basics of creative coding in Javascript (p5.js/node.js). 48 | * Apply their understanding of digital media to software. 49 | * Learn best practices for designing software within an event-driven, 50 | object-oriented, real time framework. 51 | * Experiment with different techniques for user input and output, including 52 | sensors and non-traditional screens. 53 | * Propose and develop a complete software experience as a final project. 54 | 55 | ## Methodology 56 | 57 | The course is presented in a tutorial format: most class sessions will consist 58 | of the instructor demonstrating and explaining some aspect of computer 59 | programming. The first seven weeks of the course are centered around basic 60 | programming concepts, with a focus on computer visuals; following that, the 61 | approach of the course is oriented toward particular topics. (These topics are 62 | subject to change as the interests of the students become more clear.) 63 | 64 | We'll also be critiquing student work in-class, generally in an informal way 65 | and on a volunteer basis. 66 | 67 | ## Technology 68 | 69 | We'll be learning [p5.js](http://p5js.org/), a Javascript port of the perennial 70 | favorite [Processing](https://processing.org/). 71 | 72 | There are lots of ways to program with p5.js. We're going to try out the p5.js 73 | editor. [Download it here](http://p5js.org/download/#editor) (for Mac and PC). 74 | 75 | ## Requirements 76 | 77 | * Students are responsible for ten weekly assignments, each of which is 78 | designed to give students the opportunity to demonstrate and deepen their 79 | mastery of the technical topics presented in class. 80 | * Students must document their work using the IDM wordpress installation on 81 | [http://sites.bxmc.poly.edu](http://sites.bxmc.poly.edu/) (or similar 82 | blogging site) 83 | * In the last week of class, students will present a final project. The shape, 84 | form, and content of the final project are left up to the student, but the 85 | project should demonstrate significant mastery over the technical concepts 86 | discussed in class. Students are responsible for presenting their project in 87 | class *and* for accompanying documentation of the project (including the 88 | full source code). More details on this as the semester progresses! 89 | 90 | ##Assignments 91 | 92 | The assignments are your opportunity to be on the hook for putting your skills 93 | to the test. They're designed to test and deepen your knowledge while giving me 94 | valuable information about how you're progressing in the class. 95 | 96 | [Turn in your assignments using this Google 97 | Form.](https://docs.google.com/forms/d/1jEqJ5a88ZY_GI-7bbdJihJbTv2rnjYCTCHAwc3ZQmR8/viewform?usp=send_form) 98 | 99 | Specific requirements for assignments: 100 | 101 | * Each assignment should be accompanied by a blog post that documents your 102 | process in fulfilling the assignment's objectives. 103 | * You'll need somewhere to upload your completed sketches. If you already have 104 | your own web hosting service ([DreamHost](https://www.dreamhost.com/), say), 105 | that's great! If not, I'll show you how to set up a 106 | [Neocities](https://neocities.org/) account in class. 107 | * Assignments must be turned in *before class* on the day they're due. Late 108 | assignments will not be accepted. 109 | * Assignments will be graded on their technical mastery and creativity. 110 | 111 | ## Reading 112 | 113 | There is no assigned textbook for this class, but I may assign one-off readings 114 | throughout the semester for in-class discussion. If you're the kind of student 115 | that benefits from having a textbook close at hand, please buy [Make: Getting 116 | Started with p5.js: Making Interactive Graphics in JavaScript and 117 | Processing](http://www.amazon.com/Make-Interactive-Graphics-JavaScript-Processing/dp/1457186772/), by Lauren McCarthy, Ben Fry, and Casey Reas (when it's 118 | released!). 119 | 120 | If you're looking for other supplementary sources of programming knowledge and 121 | exercises, [refer to Katherine Bennet's excellent list of 122 | resources](https://github.com/IDMNYU/DM-UY1133-B_CreativeCodingFA15/blob/master/dm113-B_Resources.md). 123 | 124 | ## Grading policy 125 | 126 | | Component | Percentage | 127 | | --------- | ---------- | 128 | | Attendance and participation | 30% | 129 | | IDM Coursework Documentation | 5% | 130 | | Assignments | 10 x 4% = 40% | 131 | | Final project | 25% | 132 | 133 | ## Attendance, lateness and in-class behavior 134 | 135 | ### Attendance 136 | 137 | You are expected to attend all class sessions. Absences due to non-emergency 138 | situations will only be cleared if you let me know a week (or more) in advance, 139 | and even then only for compelling personal or professional reasons (e.g., 140 | attending an important conference, going to a wedding). If you're unable to 141 | attend class due to contagious or incapacitating illness, please let me know 142 | (by e-mail) before class begins. 143 | 144 | Each unexcused absence will deduct 5% from your final grade. If you have three 145 | or more unexcused absences, you risk failing the course. 146 | 147 | ### Lateness 148 | 149 | Be on time to class. If you're more than fifteen minutes late, or if you leave 150 | early (without my clearance), it will count as an unexcused absence. 151 | 152 | ### In-class behavior 153 | 154 | Laptops must be closed while your fellow students are presenting work. You're 155 | otherwise welcome to use laptops in class, but only to follow along with the 156 | in-class tutorials and to take notes. ([Keeping all of this in 157 | mind.](https://medium.com/@cshirky/why-i-just-asked-my-students-to-put-their-laptops-away-7f5f7c50f368)) 158 | 159 | ### Procedures should punch up 160 | 161 | Read Leonard Richardson's [Bots should punch 162 | up](http://www.crummy.com/2013/11/27/0). "You can poke fun at yourself 163 | (Stephen Colbert famously said 'There's no status I would not surrender for a 164 | joke'), you can make a joke at the expense of someone with higher social status 165 | than you, but if you mock someone with lower status, it's not cool." Be 166 | sensitive to what your classmates might find offensive, triggering, or violent; 167 | be graceful and listen carefully when your work gets called out. 168 | 169 | ##Academic Integrity 170 | 171 | Please review [NYU's School of Engineering's academic dishonesty 172 | policy](http://engineering.nyu.edu/academics/code-of-conduct/academic-dishonesty) in its 173 | entirety. For the purposes of this class, "plagiarism" that violates the 174 | academic integrity policy is defined as representing someone else's code (or 175 | other procedure) as your own. (We will, of course, liberally be using media that 176 | other people have created as source material for our code and procedures—this 177 | does not violate the academic integrity policy. You are, however, expected to 178 | cite the sources of these materials where possible and appropriate.) 179 | 180 | ##Disability accommodations 181 | 182 | If you are student with a disability who is requesting accommodations, please 183 | contact New York University’s Moses Center for Students with Disabilities at 184 | 212-998-4980 or mosescsd@nyu.edu. You must be registered with CSD to receive 185 | accommodations. Information about the Moses Center can be found at 186 | http://www.nyu.edu/csd. The Moses Center is located at 726 Broadway on the 2nd 187 | floor. 188 | 189 | ## Schedule 190 | 191 | ###Session 01: September 3 192 | 193 | * Course introduction: What is programming? 194 | * Syllabus overview 195 | * Using [the p5.js application](http://p5js.org/download/#editor) 196 | * Uploading to the Internet 197 | * Your first sketch 198 | 199 | Works cited: 200 | 201 | * Sol LeWitt, [Wall Drawing instructions](http://solvingsol.com/solutions/) (link is to "Solving Sol," a site where programmers attempt to interpret the instructions with code) 202 | * Casey Reas, [Process Compendium](http://reas.com/compendium_text/) ([example](http://reas.com/p11_s/) of what the realization looks like) 203 | * Yoko Ono, [Grapefruit](http://en.wikipedia.org/wiki/Grapefruit_%28book%29) 204 | * [Fluxus Performance Workbook](http://www.deluxxe.com/beat/fluxusworkbook.pdf) 205 | * Jackson Mac Low, [Insect Assassins](http://www.poets.org/poetsorg/poem/insect-assassins) and [Call Me Ishmael](http://www.poets.org/poetsorg/poem/call-me-ishmael) (examples of "diastic") 206 | 207 | Notes: 208 | 209 | * [First steps with p5.js](http://creative-coding.decontextualize.com/first-steps/) 210 | 211 | Additional resources: 212 | 213 | * [Learning p5.js](https://vimeo.com/channels/learningp5js), video tutorials 214 | from [Dan Shiffman](http://shiffman.net/) 215 | * [p5.js tutorials](http://p5js.org/tutorials/) 216 | 217 | Assignment #1, due September 10: Create a drawing with p5.js and upload the 218 | source code for your drawing to the Internet. Limit yourself to the following 219 | Processing functions: `line()`, `triangle()`, `quad()`, `rect()`, `ellipse()`, 220 | `fill()`, `stroke()`, and `strokeWeight()`. Draw something beautiful or 221 | intentionally banal. 222 | 223 | ###Session 02: September 10 224 | 225 | * Processing: More shapes 226 | * Values, types, and expressions 227 | * Variables 228 | * Loops 229 | 230 | Notes: 231 | 232 | * [Expressions, variables and loops](http://creative-coding.decontextualize.com/expressions-variables-and-loops/) 233 | 234 | Assignment #2, due September 18: Rework your first assignment to make use of 235 | variables, expressions and loops. In your documentation, include screenshots of 236 | how changing a single variable in your sketch effects the way the sketch looks. 237 | EXTRA CREDIT: use a nested `for` loop (i.e., one `for` loop inside of another). 238 | 239 | ###Session 03: September 17 240 | 241 | * Javascript details: Comments, code formatting, numbers 242 | * Changes over time 243 | * Simple interactivity 244 | * Flow control (if/else) 245 | * Randomness 246 | 247 | Notes: 248 | 249 | * [Changes over time](http://creative-coding.decontextualize.com/changes-over-time/) 250 | * [Interaction](http://creative-coding.decontextualize.com/interaction/) 251 | 252 | Assignment #3, due September 24: Create an artwork that responds to user input 253 | and changes over time. Your work should make use of one of the methods of 254 | oscillation discussed in class, at least one of the three variables we 255 | discussed for making use of mouse input, and the code should contain at least 256 | one `if` statement. 257 | 258 | ###Session 04: September 24 259 | 260 | * [Transformations and functions](http://creative-coding.decontextualize.com/transformations-and-functions/) 261 | 262 | Assignment #4, due October 1: Create a visual work that makes use of functions, 263 | loops and transformations to form repeating shapes and patterns with subtle 264 | variation. (You can incorporate interactivity and change over time if you'd 265 | like, but it's not necessary.) Some visual references: [Casey Reas, Yes 266 | No](http://reas.com/yesno_s2/); [Gerhard Richter, 180 267 | Farben](http://www.philamuseum.org/collections/permanent/92487.html), 268 | [Untitled, Jean Arp](http://www.moma.org/collection/works/37013), 269 | [Lacey Micallef's animated gifs](http://laceymicallef.com/). 270 | 271 | ###Session 05: October 1 272 | 273 | * [Working with media: images and audio](http://creative-coding.decontextualize.com/media/) 274 | 275 | Assignment #5, due October 8: Create an overwhelming interactive audio visual 276 | experience using images and audio. (References TK.) 277 | 278 | ###Session 06: October 8 279 | 280 | * [Arrays, objects, and working with data](http://creative-coding.decontextualize.com/arrays-and-objects/) 281 | 282 | Assignment #6, due October 22: Create a sketch that keeps track of user action 283 | over the course of each instance of the sketch being run (clicks, keypresses, 284 | etc). Alternatively (or as a bonus): Use data from a CSV file to draw a simple 285 | data visualization. 286 | 287 | ###Session 07: October 19 (this is a make-up session for October 15) 288 | 289 | * [More about 290 | functions](http://creative-coding.decontextualize.com/functions-continued/); 291 | [objects with 292 | methods](http://creative-coding.decontextualize.com/objects-with-methods/). 293 | 294 | 295 | ###Session 08: October 22 296 | 297 | * Text and type. [Notes.](http://creative-coding.decontextualize.com/text-and-type/) 298 | 299 | Combined assignments #7/#8: Create a work of *electronic literature*. See [the 300 | Electronic Literature Collection](http://collection.eliterature.org/) for 301 | inspiration ([volume 1](http://collection.eliterature.org/1/), [volume 302 | 2](http://collection.eliterature.org/2/)). See also [Ubuweb: Visual 303 | Poetry](http://www.ubu.com/vp/). EXTRA CREDIT: Use object-oriented programming 304 | somewhere in your sketch. 305 | 306 | ###Session 09: October 29 307 | 308 | * [Browser 309 | controls](http://creative-coding.decontextualize.com/browser-controls/) 310 | * [Video](http://creative-coding.decontextualize.com/video/) 311 | 312 | Assignment #9, due November 5. Make a sketch that meets one (or more) of the 313 | following descriptions: (a) Adapt an earlier homework so that it uses HTML 314 | controls (like buttons, sliders, text input fields). BONUS: Incorporate an HTML 315 | control from `p5.dom` that we *didn't* talk about in class. (b) Make a sketch 316 | that creatively re-interprets the pixels in a video (whether pre-recorded or 317 | from the webcam). For inspiration, see the work of [Nam June 318 | Paik](https://www.youtube.com/results?search_query=nam+june+paik), [Golan 319 | Levin](http://www.flong.com/projects/), [Zach 320 | Lieberman](http://thesystemis.com/projects/). 321 | 322 | ###Session 10: November 5 323 | 324 | * [Using external 325 | libraries](http://creative-coding.decontextualize.com/external-libraries) 326 | * [Simple generative language techniques with 327 | RiTaJS](http://creative-coding.decontextualize.com/intro-to-ritajs/) 328 | * More, if time! (Markov chain generation, p5.speech) 329 | 330 | Assignment #10, due November 12. Two options this week. (1) Make a sketch that 331 | modifies or generates language creatively, using the RiTaJS library. This can 332 | be an extension of assignment #7/8, if you want. Bonus points for using 333 | features of RiTaJS that we *didn't* discuss in class. (2) Make a sketch that 334 | uses *some other* 3rd-party library for p5.js. [Here's a 335 | list](http://p5js.org/libraries/) (check in the "Contributed" section). 336 | 337 | *Supplementary assignment.* Come prepared on Nov 12 to pitch an idea for your 338 | final project. We'll discuss these in class. If you have a prototype: even 339 | better! 340 | 341 | ###Session 11: November 12 342 | 343 | * Final project proposals 344 | * [Games and game-like things with p5.play](http://creative-coding.decontextualize.com/making-games-with-p5-play/) 345 | 346 | ###Session 12: November 19 347 | 348 | * Final project check-in 349 | * p5.play continued 350 | * [p5.js and mobile devices](http://creative-coding.decontextualize.com/mobile/) (code examples in this repository) 351 | 352 | ###Session 13: December 3 353 | 354 | * Final project check-in 355 | * [Node.js overview](http://creative-coding.decontextualize.com/node/) (code 356 | examples in this repository) 357 | 358 | ###Session 14: December 10 359 | 360 | * Final project check-ins 361 | * In-class work or topics selected by class 362 | 363 | ###Session 15: December 17 364 | 365 | * Final project presentations 366 | 367 | -------------------------------------------------------------------------------- /mobile-examples/01_first/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 01_first 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /mobile-examples/01_first/libraries/p5.dom.js: -------------------------------------------------------------------------------- 1 | /*! p5.dom.js v0.2.4 October 6, 2015 */ 2 | /** 3 | *

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

6 | *

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

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

19 | *

See tutorial: beyond the canvas 20 | * for more info on how to use this libary. 21 | * 22 | * @module p5.dom 23 | * @submodule p5.dom 24 | * @for p5.dom 25 | * @main 26 | */ 27 | 28 | (function (root, factory) { 29 | if (typeof define === 'function' && define.amd) 30 | define('p5.dom', ['p5'], function (p5) { (factory(p5));}); 31 | else if (typeof exports === 'object') 32 | factory(require('../p5')); 33 | else 34 | factory(root['p5']); 35 | }(this, function (p5) { 36 | // ============================================================================= 37 | // p5 additions 38 | // ============================================================================= 39 | 40 | /** 41 | * Searches the page for an element with the given ID, class, or tag name (using the '#' or '.' 42 | * prefixes to specify an ID or class respectively, and none for a tag) and returns it as 43 | * a p5.Element. If a class or tag name is given with more than 1 element, 44 | * only the first element will be returned. 45 | * The DOM node itself can be accessed with .elt. 46 | * Returns null if none found. 47 | * 48 | * @method select 49 | * @param {String} name id, class, or tag name of element to search for 50 | * @return {Object/p5.Element|Null} p5.Element containing node found 51 | */ 52 | p5.prototype.select = function (e) { 53 | var res; 54 | var str; 55 | if (e[0] === '.'){ 56 | str = e.slice(1); 57 | res = document.getElementsByClassName(str); 58 | if (res) { 59 | return wrapElement(res[0]); 60 | }else { 61 | return null; 62 | } 63 | }else if (e[0] === '#'){ 64 | str = e.slice(1); 65 | res = document.getElementById(str); 66 | if (res) { 67 | return wrapElement(res); 68 | }else { 69 | return null; 70 | } 71 | }else{ 72 | res = document.getElementsByTagName(e); 73 | if (res) { 74 | return wrapElement(res[0]); 75 | }else { 76 | return null; 77 | } 78 | } 79 | }; 80 | 81 | /** 82 | * Searches the page for elements with the given class or tag name (using the '.' prefix 83 | * to specify a class and no prefix for a tag) and returns them as p5.Elements 84 | * in an array. 85 | * The DOM node itself can be accessed with .elt. 86 | * Returns null if none found. 87 | * 88 | * @method selectAll 89 | * @param {String} name class or tag name of elements to search for 90 | * @return {Array} Array of p5.Elements containing nodes found 91 | */ 92 | p5.prototype.selectAll = function (e) { 93 | var arr = []; 94 | var res; 95 | var str; 96 | if (e[0] === '.'){ 97 | str = e.slice(1); 98 | res = document.getElementsByClassName(str); 99 | }else { 100 | res = document.getElementsByTagName(e); 101 | } 102 | if (res) { 103 | for (var j = 0; j < res.length; j++) { 104 | var obj = wrapElement(res[j]); 105 | arr.push(obj); 106 | } 107 | } 108 | return arr; 109 | }; 110 | 111 | /** 112 | * Helper function for getElement and getElements. 113 | */ 114 | function wrapElement(elt) { 115 | if (elt.tagName === "VIDEO" || elt.tagName === "AUDIO") { 116 | return new p5.MediaElement(elt); 117 | } else { 118 | return new p5.Element(elt); 119 | } 120 | } 121 | 122 | /** 123 | * Removes all elements created by p5, except any canvas / graphics 124 | * elements created by createCanvas or createGraphics. 125 | * Event handlers are removed, and element is removed from the DOM. 126 | * @method removeElements 127 | * @example 128 | *

129 | * function setup() { 130 | * createCanvas(100, 100); 131 | * createDiv('this is some text'); 132 | * createP('this is a paragraph'); 133 | * } 134 | * function mousePressed() { 135 | * removeElements(); // this will remove the div and p, not canvas 136 | * } 137 | *
138 | * 139 | */ 140 | p5.prototype.removeElements = function (e) { 141 | for (var i=0; i 169 | * var myDiv; 170 | * function setup() { 171 | * myDiv = createDiv('this is some text'); 172 | * } 173 | * 174 | */ 175 | 176 | /** 177 | * Creates a <p></p> element in the DOM with given inner HTML. Used 178 | * for paragraph length text. 179 | * Appends to the container node if one is specified, otherwise 180 | * appends to body. 181 | * 182 | * @method createP 183 | * @param {String} html inner HTML for element created 184 | * @return {Object/p5.Element} pointer to p5.Element holding created node 185 | * @example 186 | *
187 | * var myP; 188 | * function setup() { 189 | * myP = createP('this is some text'); 190 | * } 191 | *
192 | */ 193 | 194 | /** 195 | * Creates a <span></span> element in the DOM with given inner HTML. 196 | * Appends to the container node if one is specified, otherwise 197 | * appends to body. 198 | * 199 | * @method createSpan 200 | * @param {String} html inner HTML for element created 201 | * @return {Object/p5.Element} pointer to p5.Element holding created node 202 | * @example 203 | *
204 | * var mySpan; 205 | * function setup() { 206 | * mySpan = createSpan('this is some text'); 207 | * } 208 | *
209 | */ 210 | var tags = ['div', 'p', 'span']; 211 | tags.forEach(function(tag) { 212 | var method = 'create' + tag.charAt(0).toUpperCase() + tag.slice(1); 213 | p5.prototype[method] = function(html) { 214 | var elt = document.createElement(tag); 215 | elt.innerHTML = typeof html === undefined ? "" : html; 216 | return addElement(elt, this); 217 | } 218 | }); 219 | 220 | /** 221 | * Creates an <img /> element in the DOM with given src and 222 | * alternate text. 223 | * Appends to the container node if one is specified, otherwise 224 | * appends to body. 225 | * 226 | * @method createImg 227 | * @param {String} src src path or url for image 228 | * @param {String} [alt] alternate text to be used if image does not load 229 | * @param {Function} [successCallback] callback to be called once image data is loaded 230 | * @return {Object/p5.Element} pointer to p5.Element holding created node 231 | * @example 232 | *
233 | * var img; 234 | * function setup() { 235 | * img = createImg('http://p5js.org/img/asterisk-01.png'); 236 | * } 237 | *
238 | */ 239 | p5.prototype.createImg = function() { 240 | var elt = document.createElement('img'); 241 | var args = arguments; 242 | var self; 243 | var setAttrs = function(){ 244 | self.width = elt.offsetWidth; 245 | self.height = elt.offsetHeight; 246 | if (args.length > 1 && typeof args[1] === 'function'){ 247 | self.fn = args[1]; 248 | self.fn(); 249 | }else if (args.length > 1 && typeof args[2] === 'function'){ 250 | self.fn = args[2]; 251 | self.fn(); 252 | } 253 | }; 254 | elt.src = args[0]; 255 | if (args.length > 1 && typeof args[1] === 'string'){ 256 | elt.alt = args[1]; 257 | } 258 | elt.onload = function(){ 259 | setAttrs(); 260 | } 261 | self = addElement(elt, this); 262 | return self; 263 | }; 264 | 265 | /** 266 | * Creates an <a></a> element in the DOM for including a hyperlink. 267 | * Appends to the container node if one is specified, otherwise 268 | * appends to body. 269 | * 270 | * @method createA 271 | * @param {String} href url of page to link to 272 | * @param {String} html inner html of link element to display 273 | * @param {String} [target] target where new link should open, 274 | * could be _blank, _self, _parent, _top. 275 | * @return {Object/p5.Element} pointer to p5.Element holding created node 276 | * @example 277 | *
278 | * var myLink; 279 | * function setup() { 280 | * myLink = createA('http://p5js.org/', 'this is a link'); 281 | * } 282 | *
283 | */ 284 | p5.prototype.createA = function(href, html, target) { 285 | var elt = document.createElement('a'); 286 | elt.href = href; 287 | elt.innerHTML = html; 288 | if (target) elt.target = target; 289 | return addElement(elt, this); 290 | }; 291 | 292 | /** INPUT **/ 293 | 294 | 295 | /** 296 | * Creates a slider <input></input> element in the DOM. 297 | * Use .size() to set the display length of the slider. 298 | * Appends to the container node if one is specified, otherwise 299 | * appends to body. 300 | * 301 | * @method createSlider 302 | * @param {Number} min minimum value of the slider 303 | * @param {Number} max maximum value of the slider 304 | * @param {Number} [value] default value of the slider 305 | * @return {Object/p5.Element} pointer to p5.Element holding created node 306 | * @example 307 | *
308 | * var slider; 309 | * function setup() { 310 | * slider = createSlider(0, 255, 100); 311 | * slider.position(10, 10); 312 | * slider.style('width', '80px'); 313 | * } 314 | * 315 | * function draw() { 316 | * var val = slider.value(); 317 | * background(val); 318 | * } 319 | *
320 | */ 321 | p5.prototype.createSlider = function(min, max, value, step) { 322 | var elt = document.createElement('input'); 323 | elt.type = 'range'; 324 | elt.min = min; 325 | elt.max = max; 326 | if (step) elt.step = step; 327 | if (typeof(value) === "number") elt.value = value; 328 | return addElement(elt, this); 329 | }; 330 | 331 | /** 332 | * Creates a <button></button> element in the DOM. 333 | * Use .size() to set the display size of the button. 334 | * Use .mousePressed() to specify behavior on press. 335 | * Appends to the container node if one is specified, otherwise 336 | * appends to body. 337 | * 338 | * @method createButton 339 | * @param {String} label label displayed on the button 340 | * @param {String} [value] value of the button 341 | * @return {Object/p5.Element} pointer to p5.Element holding created node 342 | * @example 343 | *
344 | * var button; 345 | * function setup() { 346 | * createCanvas(100, 100); 347 | * background(0); 348 | * button = createButton('click me'); 349 | * button.position(19, 19); 350 | * button.mousePressed(changeBG); 351 | * } 352 | * 353 | * function changeBG() { 354 | * var val = random(255); 355 | * background(val); 356 | * } 357 | *
358 | */ 359 | p5.prototype.createButton = function(label, value) { 360 | var elt = document.createElement('button'); 361 | elt.innerHTML = label; 362 | elt.value = value; 363 | if (value) elt.value = value; 364 | return addElement(elt, this); 365 | }; 366 | 367 | /** 368 | * Creates a checkbox <input></input> element in the DOM. 369 | * 370 | * @method createCheckbox 371 | * @param {String} [label] label displayed after checkbox 372 | * @param {boolean} [value] value of the checkbox; checked is true, unchecked is false. Unchecked if no value given 373 | * @return {Object/p5.Element} pointer to p5.Element holding created node 374 | */ 375 | p5.prototype.createCheckbox = function() { 376 | var elt = document.createElement('input'); 377 | elt.type = 'checkbox'; 378 | //checkbox must be wrapped in p5.Element before label so that label appears after 379 | var self = addElement(elt, this); 380 | self.checked = function(){ 381 | if (arguments.length === 0){ 382 | return self.elt.checked; 383 | }else if(arguments[0]){ 384 | self.elt.checked = true; 385 | }else{ 386 | self.elt.checked = false; 387 | } 388 | return self; 389 | }; 390 | this.value = function(val){ 391 | self.value = val; 392 | return this; 393 | }; 394 | if (arguments[0]){ 395 | var ran = Math.random().toString(36).slice(2); 396 | var label = document.createElement('label'); 397 | elt.setAttribute('id', ran); 398 | label.htmlFor = ran; 399 | self.value(arguments[0]); 400 | label.appendChild(document.createTextNode(arguments[0])); 401 | addElement(label, this); 402 | } 403 | if (arguments[1]){ 404 | elt.checked = true; 405 | } 406 | return self; 407 | }; 408 | 409 | /** 410 | * Creates a dropdown menu <select></select> element in the DOM. 411 | * @method createSelect 412 | * @param {boolean} [multiple] [true if dropdown should support multiple selections] 413 | * @return {Object/p5.Element} pointer to p5.Element holding created node 414 | */ 415 | p5.prototype.createSelect = function(mult) { 416 | var elt = document.createElement('select'); 417 | if (mult){ 418 | elt.setAttribute('multiple', 'true'); 419 | } 420 | var self = addElement(elt, this); 421 | self.option = function(name, value){ 422 | var opt = document.createElement('option'); 423 | opt.innerHTML = name; 424 | if (arguments.length > 1) 425 | opt.value = value; 426 | else 427 | opt.value = name; 428 | elt.appendChild(opt); 429 | }; 430 | self.selected = function(value){ 431 | var arr = []; 432 | if (arguments.length > 0){ 433 | for (var i = 0; i < this.elt.length; i++){ 434 | if (value.toString() === this.elt[i].value){ 435 | this.elt.selectedIndex = i; 436 | } 437 | } 438 | return this; 439 | }else{ 440 | if (mult){ 441 | for (var i = 0; i < this.elt.selectedOptions.length; i++){ 442 | arr.push(this.elt.selectedOptions[i].value); 443 | } 444 | return arr; 445 | }else{ 446 | return this.elt.value; 447 | } 448 | } 449 | }; 450 | return self; 451 | }; 452 | 453 | /** 454 | * Creates an <input></input> element in the DOM for text input. 455 | * Use .size() to set the display length of the box. 456 | * Appends to the container node if one is specified, otherwise 457 | * appends to body. 458 | * 459 | * @method createInput 460 | * @param {Number} [value] default value of the input box 461 | * @return {Object/p5.Element} pointer to p5.Element holding created node 462 | */ 463 | p5.prototype.createInput = function(value) { 464 | var elt = document.createElement('input'); 465 | elt.type = 'text'; 466 | if (value) elt.value = value; 467 | return addElement(elt, this); 468 | }; 469 | 470 | /** 471 | * Creates an <input></input> element in the DOM of type 'file'. 472 | * This allows users to select local files for use in a sketch. 473 | * 474 | * @method createFileInput 475 | * @param {Function} [callback] callback function for when a file loaded 476 | * @param {String} [multiple] optional to allow multiple files selected 477 | * @return {Object/p5.Element} pointer to p5.Element holding created DOM element 478 | */ 479 | p5.prototype.createFileInput = function(callback, multiple) { 480 | 481 | // Is the file stuff supported? 482 | if (window.File && window.FileReader && window.FileList && window.Blob) { 483 | // Yup, we're ok and make an input file selector 484 | var elt = document.createElement('input'); 485 | elt.type = 'file'; 486 | 487 | // If we get a second argument that evaluates to true 488 | // then we are looking for multiple files 489 | if (multiple) { 490 | // Anything gets the job done 491 | elt.multiple = 'multiple'; 492 | } 493 | 494 | // Now let's handle when a file was selected 495 | elt.addEventListener('change', handleFileSelect, false); 496 | 497 | // Function to handle when a file is selected 498 | // We're simplifying life and assuming that we always 499 | // want to load every selected file 500 | function handleFileSelect(evt) { 501 | // These are the files 502 | var files = evt.target.files; 503 | // Load each one and trigger a callback 504 | for (var i = 0; i < files.length; i++) { 505 | var f = files[i]; 506 | var reader = new FileReader(); 507 | reader.onload = makeLoader(f); 508 | function makeLoader(theFile) { 509 | // Making a p5.File object 510 | var p5file = new p5.File(theFile); 511 | return function(e) { 512 | p5file.data = e.target.result; 513 | callback(p5file); 514 | }; 515 | }; 516 | 517 | // Text or data? 518 | // This should likely be improved 519 | if (f.type.indexOf('text') > -1) { 520 | reader.readAsText(f); 521 | } else { 522 | reader.readAsDataURL(f); 523 | } 524 | } 525 | } 526 | return addElement(elt, this); 527 | } else { 528 | console.log('The File APIs are not fully supported in this browser. Cannot create element.'); 529 | } 530 | }; 531 | 532 | 533 | /** VIDEO STUFF **/ 534 | 535 | function createMedia(pInst, type, src, callback) { 536 | var elt = document.createElement(type); 537 | if (typeof src === 'string') { 538 | src = [src]; 539 | } 540 | for (var i=0; i