├── .gitignore ├── README.md ├── archive ├── 01-html │ ├── article.html │ ├── basic.html │ ├── css │ │ └── style1.css │ ├── html-css-the-works.html │ ├── img │ │ └── cat_with_calculator.jpg │ ├── in-class-nov3 │ │ ├── Cookie-Monster-19.png │ │ ├── cat3.png │ │ ├── cookie_monster.html │ │ └── stylesheet.css │ ├── index.html │ └── layout.html ├── 02-servi-basics │ ├── hello-servi │ │ └── server.js │ ├── readme.md │ └── servi-file-server │ │ ├── public │ │ └── index.html │ │ └── server.js ├── 03-js │ ├── 0fundamentals │ │ └── object.js │ ├── 1embedded_js │ │ └── simple_javascript1.html │ ├── 2external_js │ │ ├── myscript.js │ │ └── simple_javascript2.html │ ├── 3html_js_css_skeleton │ │ ├── css │ │ │ └── mystyle.css │ │ ├── index.html │ │ └── js │ │ │ └── myscript.js │ ├── 4console │ │ └── console.html │ └── 5dialog-boxes │ │ └── dialog_boxes.html ├── 04-p5js │ ├── empty_example │ │ ├── index.html │ │ ├── p5.js │ │ └── sketch.js │ └── simple_example │ │ ├── index.html │ │ ├── p5.js │ │ └── sketch.js ├── 05-dom │ ├── create_dom_dynamic.html │ ├── dom_basics.html │ └── p5_dom │ │ ├── 00_canvas_parent │ │ ├── index.html │ │ └── sketch.js │ │ ├── 01_position_canvas │ │ ├── index.html │ │ └── sketch.js │ │ ├── 03_add_p_element │ │ ├── index.html │ │ └── sketch.js │ │ ├── 04_parent_child │ │ ├── index.html │ │ └── sketch.js │ │ ├── 05_style_functions │ │ ├── index.html │ │ └── sketch.js │ │ ├── 06_style_css │ │ ├── index.html │ │ ├── sketch.js │ │ └── style.css │ │ ├── 07_setting_class │ │ ├── index.html │ │ ├── sketch.js │ │ └── style.css │ │ ├── 08_mousepressed │ │ ├── index.html │ │ └── sketch.js │ │ ├── 09_mouseover_mouseout │ │ ├── index.html │ │ ├── rainbow.png │ │ └── sketch.js │ │ ├── 10_getElement │ │ ├── index.html │ │ └── sketch.js │ │ ├── 11_getElements │ │ ├── index.html │ │ └── sketch.js │ │ ├── 13_animateDOM │ │ ├── index.html │ │ └── sketch.js │ │ ├── 14_button_slider │ │ ├── ball.js │ │ ├── index.html │ │ └── sketch.js │ │ ├── 14a_canvas_p5_dom │ │ ├── index.html │ │ ├── p5.dom.js │ │ ├── p5.js │ │ ├── sketch.js │ │ └── style.css │ │ ├── 15_wordscrambler │ │ ├── index.html │ │ └── sketch.js │ │ └── README.md ├── 06-listeners │ ├── button_listener.html │ ├── keyboard_listener.html │ └── mouse_listener.html ├── 07-json │ ├── animal_tracking.json │ ├── common_names.json │ ├── readme.md │ ├── student_urls.json │ └── weather.json ├── 08-apis │ ├── 00static │ │ ├── index.html │ │ ├── p5.dom.js │ │ ├── p5.js │ │ ├── sketch.js │ │ └── student_urls.json │ ├── 01_weather │ │ ├── index.html │ │ ├── p5.js │ │ └── sketch.js │ ├── 01_weather_dom │ │ ├── index.html │ │ ├── p5.dom.js │ │ ├── p5.js │ │ └── sketch.js │ ├── 02_capitol_words │ │ ├── index.html │ │ ├── p5.js │ │ ├── sketch.js │ │ └── style.css │ ├── 03_instagram │ │ ├── index.html │ │ └── sketch.js │ └── 04_nytimes │ │ ├── index.html │ │ └── sketch.js ├── 09-jquery │ └── ajax_get │ │ ├── index.html │ │ └── script.js └── 10-server-side │ ├── 00-servi-static-files │ ├── faq.html │ └── server.js │ ├── 01-servi-userprofiles │ └── server.js │ ├── 02-servi-userprofiles-data │ └── server.js │ ├── 03-servi-form-get │ ├── form.html │ └── server.js │ ├── 04-servi-form-post │ ├── form.html │ └── server.js │ ├── 05-servi-template │ ├── server.js │ └── templates │ │ └── page.template.html │ ├── 05a-servi-template-loop │ ├── server.js │ └── templates │ │ └── people_list.html │ ├── 06-servi-db │ ├── people.db │ └── server.js │ ├── 07-servi-db-search │ ├── html │ │ └── searchform.html │ ├── people.db │ └── server.js │ ├── 09-servi-toads │ ├── serve-toad.js │ └── toad_profile.html │ ├── 10-servi-load-json │ ├── server.js │ └── weather.json │ ├── 11-servi-file-uploads │ ├── form.html │ └── upload.js │ ├── 12-servi-blog-templates-db-uploads │ ├── public │ │ └── style.css │ ├── server.js │ └── templates │ │ ├── .tmpscript │ │ ├── blogpost.html │ │ ├── foot.html │ │ ├── form.html │ │ ├── head.html │ │ └── home.html │ └── readme.md ├── docs └── img │ ├── cyberduck_2files.png │ ├── cyberduck_connect.png │ ├── cyberduck_connected.png │ ├── cyberduck_node_modules.png │ ├── cyberduck_open_connection.png │ ├── digital_ocean_create_droplet.png │ ├── servi-browser.png │ ├── servi-exported.png │ ├── servi-file-server.png │ ├── servi-hello.png │ ├── servi-other-page.png │ ├── servi-run.png │ ├── week1 │ └── html_table.png │ ├── week2 │ ├── console_browser_elements.png │ ├── console_detail.png │ ├── console_in_browser.png │ └── openDevTools.png │ └── week4 │ ├── instagramAPI.png │ └── instagramAPI_response.png ├── week1 ├── 01servi │ ├── 00-serve-static-file │ │ ├── home.html │ │ └── server.js │ └── 01-routing │ │ ├── faq.html │ │ └── server.js └── 02javascript │ └── object.js ├── week2 ├── 01-servi │ └── serve-files-from-directory │ │ ├── public │ │ └── index.html │ │ └── server.js └── 02-html-css │ ├── README.md │ ├── basic.html │ ├── css │ └── style.css │ ├── html-css-embedded.html │ ├── img │ └── cat_with_calculator.jpg │ ├── index.html │ └── layout-css-linked.html ├── week3 ├── 01embedded_js │ └── simple_javascript1.html ├── 02external_js │ ├── myscript.js │ └── simple_javascript2.html ├── 03html_js_css_skeleton │ ├── css │ │ └── mystyle.css │ ├── index.html │ └── js │ │ └── myscript.js ├── 04console │ └── console.html ├── 05dom │ ├── 01dom.html │ ├── 02dom_content_loaded.html │ └── create_dom_dynamic.html ├── 06listeners │ ├── button_create_elements.html │ ├── button_listener.html │ ├── keyboard_listener.html │ └── mouse_listener.html └── 07game_example │ ├── css │ └── style.css │ ├── images │ ├── boat.png │ ├── cat.png │ ├── drink.png │ └── shoes.png │ ├── index.html │ └── js │ └── game.js ├── week4 ├── 00-canvas │ ├── README.md │ └── canvas-basic.html ├── 01-p5js │ ├── 01-empty_example │ │ ├── index.html │ │ ├── p5.js │ │ └── sketch.js │ ├── 02-simple_example │ │ ├── index.html │ │ ├── p5.js │ │ └── sketch.js │ ├── 03-shapes_array │ │ ├── index.html │ │ └── sketch.js │ ├── 04-images_array │ │ ├── burger.png │ │ ├── chickens.jpg │ │ ├── fish.png │ │ ├── flower.png │ │ ├── index.html │ │ └── sketch.js │ └── 05-objects_array │ │ ├── index.html │ │ ├── p5.js │ │ └── sketch.js └── 02-p5_dom │ ├── 00_canvas_parent │ ├── index.html │ └── sketch.js │ ├── 01_position_canvas │ ├── index.html │ └── sketch.js │ ├── 03_add_p_element │ ├── index.html │ └── sketch.js │ ├── 04_parent_child │ ├── index.html │ └── sketch.js │ ├── 05_style_functions │ ├── index.html │ └── sketch.js │ ├── 06_style_css │ ├── index.html │ ├── sketch.js │ └── style.css │ ├── 07_setting_class │ ├── index.html │ ├── sketch.js │ └── style.css │ ├── 08_mousepressed │ ├── index.html │ └── sketch.js │ ├── 09_mouseover_mouseout │ ├── index.html │ ├── rainbow.png │ └── sketch.js │ ├── 10_getElement │ ├── index.html │ └── sketch.js │ ├── 11_getElements │ ├── index.html │ └── sketch.js │ ├── 13_animateDOM │ ├── index.html │ └── sketch.js │ ├── 14_button_slider │ ├── ball.js │ ├── index.html │ └── sketch.js │ ├── 14a_canvas_p5_dom │ ├── index.html │ ├── p5.dom.js │ ├── p5.js │ ├── sketch.js │ └── style.css │ ├── 15_wordscrambler │ ├── index.html │ └── sketch.js │ └── README.md ├── week5 ├── 00-json │ ├── 00-javascript-object.js │ ├── animal_tracking.json │ ├── capitol_words.json │ ├── common_names.json │ ├── instagram.json │ ├── movie.json │ ├── readme.md │ ├── student_urls.json │ └── weather.json ├── 01-apis │ ├── 00static │ │ ├── index.html │ │ ├── p5.dom.js │ │ ├── p5.js │ │ ├── sketch.js │ │ └── student_urls.json │ ├── 01_weather │ │ ├── index.html │ │ ├── p5.js │ │ └── sketch.js │ ├── 01_weather_p5_dom │ │ ├── index.html │ │ ├── p5.dom.js │ │ ├── p5.js │ │ └── sketch.js │ ├── 02_capitol_words │ │ ├── index.html │ │ ├── p5.js │ │ ├── sketch.js │ │ └── style.css │ ├── 03_instagram │ │ ├── index.html │ │ └── sketch.js │ └── 04_nytimes │ │ ├── index.html │ │ └── sketch.js └── 02-jquery │ ├── README.md │ └── ajax_get │ ├── index.html │ └── script.js └── week6 ├── 00-servi-static-files ├── faq.html └── server.js ├── 01-servi-userprofiles └── server.js ├── 02-servi-userprofiles-data └── server.js ├── 03-servi-form-get ├── form.html └── server.js ├── 04-servi-form-post ├── form.html └── server.js ├── 05-servi-template ├── server.js └── templates │ └── page.template.html ├── 06-servi-template-loop ├── server.js └── templates │ └── people_list.html ├── 07-servi-template-data ├── serve-toad.js └── toad_profile.html ├── 08-servi-db ├── people.db └── server.js ├── 09-servi-db-search ├── html │ └── searchform.html ├── people.db └── server.js ├── 10-servi-load-json ├── server.js └── weather.json ├── 11-servi-file-uploads ├── form.html └── upload.js ├── 12-servi-blog-templates-db-uploads ├── public │ └── style.css ├── server.js └── templates │ ├── .tmpscript │ ├── blogpost.html │ ├── foot.html │ ├── form.html │ ├── head.html │ └── home.html └── 13-servi_get_api └── servi_http_get.js /.gitignore: -------------------------------------------------------------------------------- 1 | docs/img/week4/instagramAPI.fw.png 2 | 02-servi/_serviScratch/* 3 | 10-server-side/06-servi-db/people.db 4 | sandbox/* 5 | week3/07game_example/images/fw/* 6 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ITP Comm Lab: Networked Media 2 | ============== 3 | 4 | ###See the [__Wiki__](https://github.com/robynitp/networkedmedia/wiki) for syllabus, assignments, etc. 5 | 6 | * [Syllabus](https://github.com/robynitp/networkedmedia/wiki) 7 | 8 | * [Schedule](https://github.com/robynitp/networkedmedia/wiki#weekly-schedule) 9 | 10 | ![How the internet works](http://itp.robynoverstreet.com/wp-content/uploads/2013/10/comic-vlad-how-the-internet-works.png) 11 | 12 | *artwork by Vlad Gerasimov* 13 | -------------------------------------------------------------------------------- /archive/01-html/article.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Networked Media Article 5 | 6 | 7 | 8 |

My article

9 |

The network is one of our most fundamental mediums for interactivity. It makes possible our interaction with machines, data, and, most importantly, other people. Though the base interaction it supports is simple, a client sends a request to a server, which replies; an incredible variety of systems can be and have been built on top of it.

10 | 11 | -------------------------------------------------------------------------------- /archive/01-html/basic.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Hello World 5 | 6 | 7 | 8 |

I am HTML.

9 | 10 | -------------------------------------------------------------------------------- /archive/01-html/css/style1.css: -------------------------------------------------------------------------------- 1 | body{ 2 | margin:0; 3 | background-color: #333; 4 | /*background:url('../img/bg.png') center 0 repeat-y ;*/ 5 | } 6 | #header{ 7 | background: url('../img/logo.png') 0 0 no-repeat; 8 | padding: 0; 9 | margin:0; 10 | border-top: 1px solid #fff; 11 | height: 100px; 12 | } 13 | #header h1{ 14 | text-indent: -9999999px; 15 | } 16 | #outer-container{ 17 | margin: 0 auto; 18 | width:960px; 19 | 20 | } 21 | #container{ 22 | float:left; 23 | width:950px; 24 | background-color: #fff; 25 | } 26 | #nav{ 27 | margin:0; 28 | width:100%; 29 | border-bottom: 1px solid #666; 30 | } 31 | #nav ul{ 32 | margin:0; 33 | height:28px; 34 | } 35 | #nav li{ 36 | display:inline; 37 | border: 1px solid #666; 38 | border-bottom: 0; 39 | padding: 10px 20px; 40 | background-color: #006181; 41 | 42 | } 43 | #nav li a{ 44 | text-decoration: none; 45 | color: #ccc; 46 | } 47 | #nav li:hover{ 48 | background-color:#333; 49 | } 50 | #nav li a:hover{ 51 | color: #ccc; 52 | } 53 | #sidebar { 54 | width:230px; 55 | float:left; 56 | padding: 2em; 57 | } 58 | 59 | #sidebar h3{ 60 | padding-left:20px; 61 | } 62 | #main { 63 | float:left; 64 | width: 610px; 65 | padding: 20px; 66 | border-left: 1px solid #ccc; 67 | 68 | } 69 | h1,h2,h3{ 70 | font-family: Verdana,Arial,Helvetica,sans-serif; 71 | } -------------------------------------------------------------------------------- /archive/01-html/img/cat_with_calculator.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/robynitp/networkedmedia/3406f7744631d03e2ec72d0553cfe038eac9054e/archive/01-html/img/cat_with_calculator.jpg -------------------------------------------------------------------------------- /archive/01-html/in-class-nov3/Cookie-Monster-19.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/robynitp/networkedmedia/3406f7744631d03e2ec72d0553cfe038eac9054e/archive/01-html/in-class-nov3/Cookie-Monster-19.png -------------------------------------------------------------------------------- /archive/01-html/in-class-nov3/cat3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/robynitp/networkedmedia/3406f7744631d03e2ec72d0553cfe038eac9054e/archive/01-html/in-class-nov3/cat3.png -------------------------------------------------------------------------------- /archive/01-html/in-class-nov3/cookie_monster.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Secret Page 5 | 6 | 7 | 8 |

COOOOOKIES!

9 |
10 |
11 |
12 |

Hello

13 |
14 | 15 |
16 | 17 |
18 | 19 |
20 |

Hello

21 |
22 | 23 |
24 |
25 |

Stop floating now!

26 |
27 | 28 | 29 | 30 | 31 | -------------------------------------------------------------------------------- /archive/01-html/in-class-nov3/stylesheet.css: -------------------------------------------------------------------------------- 1 | h1{ 2 | text-align: center; 3 | text-family: Impact; 4 | color: darkcyan; 5 | font-size: 40px; 6 | background-color: pink; 7 | } 8 | .box{ 9 | border: 1px solid #333; 10 | display:block; 11 | width: 100px; 12 | float:left; 13 | margin: 10px; 14 | margin: 0 auto; 15 | } 16 | #monster{ 17 | width: 700px; 18 | padding: 100px; 19 | } 20 | .different{ 21 | /*clear:both;*/ 22 | } 23 | .main{ 24 | border:1px solid red; 25 | width: 100%; 26 | float:left; 27 | } 28 | #cat img{ 29 | width:200px; 30 | position: absolute; 31 | bottom: 0; 32 | } -------------------------------------------------------------------------------- /archive/01-html/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Hello World 5 | 6 | 7 | 8 |

Welcome

9 |

I am HTML.

10 |

Here is an article: 14 Things That Are Meaningless

11 |

I wrote this article: 10 things about the web

12 | 13 | -------------------------------------------------------------------------------- /archive/01-html/layout.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | The Site 6 | 7 | 8 | 9 |
10 |
11 | 12 | 15 | 24 | 25 | 29 | 30 |
31 |

Welcome to my site

32 |

But, soft! What light through yonder window breaks? 33 | It is the east, and Juliet is the sun! 34 | Arise fair sun and kill the envious moon, 35 | Who is already sick and pale with grief 36 | That thou her maid are more fair than she.

37 | 38 |

Hello, world. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis cursus bibendum varius. Donec eleifend mattis magna. Mauris arcu velit, viverra in molestie non, fringilla sed tellus. Proin eget nibh sed velit ultricies tincidunt. Quisque lorem tortor, tincidunt et suscipit at, rhoncus non ligula. Praesent eget odio vitae ipsum ornare malesuada suscipit eu augue. Maecenas dapibus suscipit quam ac porta. Nulla feugiat fringilla dolor, a mattis dolor posuere et. Fusce vel pharetra quam. Duis blandit, nisl dapibus lobortis egestas, tortor arcu convallis sem, sed euismod lacus nunc ac urna. Pellentesque mauris lacus, molestie sed semper ac, ornare vitae eros. Ut sed mi justo, vitae cursus odio. Aenean adipiscing, quam eu dictum vehicula, tellus ipsum iaculis mi, id porta leo lectus vehicula eros. Vestibulum aliquam augue eget nisl congue ac ullamcorper sem mollis.

39 | 40 |
41 | 42 |
43 |
44 | 45 | 46 | -------------------------------------------------------------------------------- /archive/02-servi-basics/hello-servi/server.js: -------------------------------------------------------------------------------- 1 | // respond to every request with "Hello world" 2 | function run(request) { 3 | request.respond("Hello World!"); 4 | } -------------------------------------------------------------------------------- /archive/02-servi-basics/readme.md: -------------------------------------------------------------------------------- 1 | Servi.js examples for the Servi IDE 2 | from https://github.com/antiboredom/servi-ide/tree/master/examples -------------------------------------------------------------------------------- /archive/02-servi-basics/servi-file-server/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Hello World 5 | 6 | 7 | 8 |

I am HTML.

9 | 10 | -------------------------------------------------------------------------------- /archive/02-servi-basics/servi-file-server/server.js: -------------------------------------------------------------------------------- 1 | // serve files from a directory named "public" 2 | serveFiles("public"); 3 | 4 | /* 5 | 6 | NOTE: Make sure to create a directory in your Servi project called "public" 7 | and put at least one HTML file in it. 8 | 9 | If you include a file called "index.html", it will show up automatically as your home page. 10 | 11 | */ -------------------------------------------------------------------------------- /archive/03-js/0fundamentals/object.js: -------------------------------------------------------------------------------- 1 | var allColors = { 2 | red: { 3 | title: "Red as in Crimson", 4 | hexcode: "#ff0000" 5 | }, 6 | green: { 7 | title: "Green as in Kale", 8 | hexcode: "#00ff00" 9 | }, 10 | blue: { 11 | title: "Blue as in Sky", 12 | hexcode: "#0000ff" 13 | }, 14 | }; 15 | 16 | console.log("The object containing all the color objects:"); 17 | console.log(allColors); 18 | 19 | var color = "red"; 20 | 21 | var chosenColorObject = allColors[color]; 22 | 23 | console.log("The object with the property name, " + color + ":"); 24 | console.log(chosenColorObject); -------------------------------------------------------------------------------- /archive/03-js/1embedded_js/simple_javascript1.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Embedded Javascript 5 | 8 | 9 | 10 | 11 |

Javascript is embedded in a script tag inside the head tag. 12 | For Javascript longer than a few lines, it's a good practice to put Javascript in a separate file and link to it in the HTML. 13 |

14 | 15 | 16 | -------------------------------------------------------------------------------- /archive/03-js/2external_js/myscript.js: -------------------------------------------------------------------------------- 1 | console.log("Hello World from an external file"); -------------------------------------------------------------------------------- /archive/03-js/2external_js/simple_javascript2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | External Javascript 5 | 6 | 7 | 8 | 9 |

The Javascript that this file uses is contained in an external file called "myscript.js"

10 | 11 | 12 | -------------------------------------------------------------------------------- /archive/03-js/3html_js_css_skeleton/css/mystyle.css: -------------------------------------------------------------------------------- 1 | body{ 2 | background-color: #0762D9; 3 | } -------------------------------------------------------------------------------- /archive/03-js/3html_js_css_skeleton/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | HTML, CSS, Javascript 5 | 6 | 7 | 8 | 9 | 10 |

This file has external CSS and Javascript

11 | 12 | -------------------------------------------------------------------------------- /archive/03-js/3html_js_css_skeleton/js/myscript.js: -------------------------------------------------------------------------------- 1 | console.log("Hello World from an external file"); -------------------------------------------------------------------------------- /archive/03-js/5dialog-boxes/dialog_boxes.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Dialog Boxes 5 | 11 | 12 | 13 | 14 |

Old School Javascript

15 |

Pop-ups ahoy! Some quick and dirty ways to get input from the user. See this tutorial on dialog boxes for more info.

16 | 17 |

18 |
19 | 45 | 46 | -------------------------------------------------------------------------------- /archive/04-p5js/empty_example/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /archive/04-p5js/empty_example/sketch.js: -------------------------------------------------------------------------------- 1 | function setup() { 2 | // put setup code here 3 | } 4 | 5 | function draw() { 6 | // put drawing code here 7 | } -------------------------------------------------------------------------------- /archive/04-p5js/simple_example/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /archive/04-p5js/simple_example/sketch.js: -------------------------------------------------------------------------------- 1 | // Runs once at the start 2 | function setup() { 3 | 4 | console.log('setup.'); 5 | createCanvas(600, 400); 6 | 7 | } 8 | 9 | // Runs in a loop, over and over again 10 | function draw() { 11 | 12 | console.log('draw!'); 13 | 14 | // background 15 | background(42, 169, 217); 16 | 17 | // ellipse 18 | fill(242, 228, 21); 19 | ellipse(100,100,100,100); 20 | 21 | //rectangle 22 | fill(162, 217, 39); 23 | rect(300,100,150,150); 24 | 25 | } -------------------------------------------------------------------------------- /archive/05-dom/create_dom_dynamic.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Create DOM elements dynamically 5 | 6 | 47 | 48 | 49 |

Class list

50 | 51 | 52 | 53 | -------------------------------------------------------------------------------- /archive/05-dom/dom_basics.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Basic DOM access 5 | 47 | 48 | 49 | 50 | 51 |

Introduction

52 |
53 |

This is Ground Control 54 | to Major Tom 55 | You've really made the grade 56 | And the papers want to know whose shirts you wear 57 | Now it's time to leave the capsule 58 | if you dare

59 |

This is Major Tom to Ground Control 60 | I'm stepping through the door 61 | And I'm floating 62 | in a most peculiar way 63 | And the stars look very different today

64 |

David Bowie

65 |
66 | 67 | 68 | -------------------------------------------------------------------------------- /archive/05-dom/p5_dom/00_canvas_parent/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 |
canvas div
10 | 11 |
another div
12 | 13 | -------------------------------------------------------------------------------- /archive/05-dom/p5_dom/00_canvas_parent/sketch.js: -------------------------------------------------------------------------------- 1 | // ITP Networked Media, Fall 2014 2 | // DOM Manipulation 3 | // https://github.com/shiffman/itp-networked-media 4 | // Daniel Shiffman 5 | 6 | // These are adapted from https://github.com/lmccart/itp-creative-js 7 | 8 | function setup() { 9 | // Here we can store a reference to the canvas DOM element 10 | var canvas = createCanvas(300, 200); 11 | // And do things like place it in a div by its id (see the HTML file) 12 | canvas.parent("canvasContainer"); 13 | } 14 | 15 | // A simple animation 16 | function draw() { 17 | background(51); 18 | stroke(255); 19 | line(frameCount % width, 0, frameCount % width, height); 20 | } -------------------------------------------------------------------------------- /archive/05-dom/p5_dom/01_position_canvas/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | The canvas below is absolute positioned. 10 | 11 | -------------------------------------------------------------------------------- /archive/05-dom/p5_dom/01_position_canvas/sketch.js: -------------------------------------------------------------------------------- 1 | // ITP Networked Media, Fall 2014 2 | // DOM Manipulation 3 | // https://github.com/shiffman/itp-networked-media 4 | // Daniel Shiffman 5 | 6 | // These are adapted from https://github.com/lmccart/itp-creative-js 7 | 8 | function setup() { 9 | // Here we can store a reference to the canvas DOM element 10 | var canvas = createCanvas(600, 400); 11 | // And do things like give it an absolute position on the page 12 | canvas.position(50, 50); 13 | } 14 | 15 | // A simple animation 16 | function draw() { 17 | background(51); 18 | stroke(255); 19 | line(frameCount % width, 0, frameCount % width, height); 20 | } -------------------------------------------------------------------------------- /archive/05-dom/p5_dom/03_add_p_element/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /archive/05-dom/p5_dom/03_add_p_element/sketch.js: -------------------------------------------------------------------------------- 1 | // ITP Networked Media, Fall 2014 2 | // DOM Manipulation 3 | // https://github.com/shiffman/itp-networked-media 4 | // Daniel Shiffman 5 | 6 | // These are adapted from https://github.com/lmccart/itp-creative-js 7 | 8 | function setup() { 9 | 10 | // In addition to making a canvas we can make other DOM elements 11 | // Like here is a paragraph element:

This is a paragraph element.

12 | // By default these elements are appended to the 13 | // Try reversing these two lines of code and see the difference 14 | var text = createP("This is a paragraph element."); 15 | var canvas = createCanvas(300, 200); 16 | 17 | // Here we call methods of each element to set the position and id, try changing these values. 18 | // Use the inspector to look at the HTML generated from this code when you load the sketch in your browser. 19 | text.id("apple"); 20 | // If we wanted absolute positioning, if not the elements just "float" in the order they are created 21 | // canvas.position(300, 50); 22 | canvas.id("pear"); 23 | } 24 | 25 | // A simple animation 26 | function draw() { 27 | background(51); 28 | stroke(255); 29 | line(frameCount % width, 0, frameCount % width, height); 30 | } 31 | -------------------------------------------------------------------------------- /archive/05-dom/p5_dom/04_parent_child/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /archive/05-dom/p5_dom/04_parent_child/sketch.js: -------------------------------------------------------------------------------- 1 | // ITP Networked Media, Fall 2014 2 | // DOM Manipulation 3 | // https://github.com/shiffman/itp-networked-media 4 | // Daniel Shiffman 5 | 6 | // These are adapted from https://github.com/lmccart/itp-creative-js 7 | 8 | function setup() { 9 | 10 | // We can put other HTML stuff inside our DOM elements 11 | var text = createP("Here is some text and this is an HTML link! "); 12 | 13 | // But p5 also has some functions to create specific elements like a link 14 | var link = createA("http://i.imgur.com/WXaUlrK.gif","We can also create a link this way.") 15 | 16 | var canvas = createCanvas(300, 200); 17 | 18 | // We can put the link element inside the paragraph one with child() 19 | text.child(link); 20 | // link.parent(child); // this is the equivalent 21 | } 22 | 23 | 24 | 25 | // A simple animation 26 | function draw() { 27 | background(51); 28 | stroke(255); 29 | line(frameCount % width, 0, frameCount % width, height); 30 | } 31 | 32 | -------------------------------------------------------------------------------- /archive/05-dom/p5_dom/05_style_functions/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /archive/05-dom/p5_dom/05_style_functions/sketch.js: -------------------------------------------------------------------------------- 1 | // ITP Networked Media, Fall 2014 2 | // DOM Manipulation 3 | // https://github.com/shiffman/itp-networked-media 4 | // Daniel Shiffman 5 | 6 | // These are adapted from https://github.com/lmccart/itp-creative-js 7 | 8 | function setup() { 9 | 10 | // If we don't want a canvas (p5 creates one by default even if you don't ask) 11 | noCanvas(); 12 | 13 | // Make a paragraph element 14 | var text = createP("This is some stuff in a paragraph that is dynamically styled with style()"); 15 | 16 | // With the style method we can pass in CSS directly in our code 17 | text.style("font-family", "monospace"); 18 | text.style("background-color", "#FF69B4"); 19 | text.style("color", "#FFFFFF"); 20 | text.style("font-size", "18pt"); 21 | text.style("padding", "10px"); 22 | } 23 | -------------------------------------------------------------------------------- /archive/05-dom/p5_dom/06_style_css/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /archive/05-dom/p5_dom/06_style_css/sketch.js: -------------------------------------------------------------------------------- 1 | // ITP Networked Media, Fall 2014 2 | // DOM Manipulation 3 | // https://github.com/shiffman/itp-networked-media 4 | // Daniel Shiffman 5 | 6 | // These are adapted from https://github.com/lmccart/itp-creative-js 7 | 8 | function setup() { 9 | noCanvas(); 10 | 11 | // Make a paragraph element 12 | var text = createP("This is some stuff in a paragraph that pulls its style from CSS via an id set by p5."); 13 | 14 | // Set its id (for which the styles are specified in style.css) 15 | text.id("apple"); 16 | } 17 | -------------------------------------------------------------------------------- /archive/05-dom/p5_dom/06_style_css/style.css: -------------------------------------------------------------------------------- 1 | #apple { 2 | font-family: monospace; 3 | background-color: #FF69B4; 4 | color: #FFFFFF; 5 | font-size: 18pt; 6 | padding: 10px; 7 | } -------------------------------------------------------------------------------- /archive/05-dom/p5_dom/07_setting_class/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /archive/05-dom/p5_dom/07_setting_class/sketch.js: -------------------------------------------------------------------------------- 1 | // ITP Networked Media, Fall 2014 2 | // DOM Manipulation 3 | // https://github.com/shiffman/itp-networked-media 4 | // Daniel Shiffman 5 | 6 | // These are adapted from https://github.com/lmccart/itp-creative-js 7 | 8 | // Three elements 9 | var elt0; 10 | var elt1; 11 | var elt2; 12 | 13 | function setup() { 14 | 15 | noCanvas(); 16 | 17 | // Three floating elements 18 | elt0 = createDiv("Here's a div."); 19 | elt1 = createDiv("Here's another div."); 20 | elt2 = createDiv("Oh and even another one!"); 21 | 22 | // Let's give the first two elements class donkey, and the third class yogurt. 23 | elt0.class('donkey'); 24 | elt1.class('donkey'); 25 | elt2.class('yogurt'); 26 | }; 27 | 28 | 29 | 30 | 31 | 32 | 33 | -------------------------------------------------------------------------------- /archive/05-dom/p5_dom/07_setting_class/style.css: -------------------------------------------------------------------------------- 1 | .donkey { 2 | font-family: monospace; 3 | background-color: #FF69B4; 4 | color: #FFFFFF; 5 | font-size: 18pt; 6 | padding: 10px; 7 | margin: 20px; 8 | } 9 | 10 | .yogurt { 11 | font-family: monospace; 12 | font-size: 18pt; 13 | } 14 | 15 | /* We're about to deal with events, but here's a quick way to get a mouse rollover with CSS */ 16 | /* this is mostly used with a href */ 17 | .yogurt:hover { 18 | margin: 20px; 19 | background-color: #FF69B4; 20 | } -------------------------------------------------------------------------------- /archive/05-dom/p5_dom/08_mousepressed/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /archive/05-dom/p5_dom/08_mousepressed/sketch.js: -------------------------------------------------------------------------------- 1 | // ITP Networked Media, Fall 2014 2 | // DOM Manipulation 3 | // https://github.com/shiffman/itp-networked-media 4 | // Daniel Shiffman 5 | 6 | // These are adapted from https://github.com/lmccart/itp-creative-js 7 | 8 | // Using p5 DOM element mouse listeners, mousePressed. 9 | 10 | // Global variable for background color 11 | var bg; 12 | 13 | function setup() { 14 | createCanvas(400, 400); 15 | bg = color(51); 16 | 17 | var link = createA("#","Click me"); 18 | // The function changeBG becomes a callback for when the mouse is pressed 19 | // On this DOM element (different than mousePressed() anywhere on page) 20 | link.mousePressed(changeBG); 21 | 22 | } 23 | 24 | function draw() { 25 | background(bg); 26 | } 27 | 28 | // This function is triggered when the mouse is pressed on the link 29 | function changeBG() { 30 | bg = color(random(255)); 31 | } 32 | -------------------------------------------------------------------------------- /archive/05-dom/p5_dom/09_mouseover_mouseout/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /archive/05-dom/p5_dom/09_mouseover_mouseout/rainbow.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/robynitp/networkedmedia/3406f7744631d03e2ec72d0553cfe038eac9054e/archive/05-dom/p5_dom/09_mouseover_mouseout/rainbow.png -------------------------------------------------------------------------------- /archive/05-dom/p5_dom/09_mouseover_mouseout/sketch.js: -------------------------------------------------------------------------------- 1 | // ITP Networked Media, Fall 2014 2 | // DOM Manipulation 3 | // https://github.com/shiffman/itp-networked-media 4 | // Daniel Shiffman 5 | 6 | // These are adapted from https://github.com/lmccart/itp-creative-js 7 | 8 | // Using p5 DOM element mouse listeners, mouseOver and mouseOut. 9 | 10 | // We define the variables outside of setup so we can access them from anywhere in the sketch. 11 | var img; 12 | var canvas; 13 | 14 | 15 | function setup() { 16 | 17 | createP("The image appears only when the mouse is over the canvas element.") 18 | 19 | // Make the canvas 20 | canvas = createCanvas(320, 240); 21 | // Make an HTML image element (different from loadImage()!) 22 | img = createImg("rainbow.png"); 23 | 24 | // Here we call methods of DOM Image element to set the size and style. 25 | // Note the use of "AUTO" to keep the aspect ration 26 | img.size(200, AUTO); 27 | img.style("padding","10px"); 28 | 29 | // Attach listeners for mouse events related to canvas 30 | canvas.mouseOver(uniShow); 31 | canvas.mouseOut(uniHide); 32 | }; 33 | 34 | 35 | // A simple animation 36 | function draw() { 37 | background(51); 38 | stroke(255); 39 | line(frameCount % width, 0, frameCount % width, height); 40 | } 41 | 42 | // Create functions for hiding and showing uni image. 43 | // These will be hooked into mouse events related to canvas above. 44 | function uniHide() { 45 | img.hide(); 46 | } 47 | 48 | function uniShow() { 49 | img.show(); 50 | } 51 | 52 | -------------------------------------------------------------------------------- /archive/05-dom/p5_dom/10_getElement/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 27 | 28 | 29 | 30 |

Press 'a', 'b', or 'p' to hide an element.
Press space to show all elements.

31 |

apple

32 |

banana

33 |

pear

34 | 35 | 36 | -------------------------------------------------------------------------------- /archive/05-dom/p5_dom/10_getElement/sketch.js: -------------------------------------------------------------------------------- 1 | // ITP Networked Media, Fall 2014 2 | // DOM Manipulation 3 | // https://github.com/shiffman/itp-networked-media 4 | // Daniel Shiffman 5 | 6 | // These are adapted from https://github.com/lmccart/itp-creative-js 7 | 8 | // Three variables to hold our DOM elements 9 | var apple; 10 | var banana; 11 | var pear; 12 | 13 | function setup() { 14 | noCanvas(); 15 | // Instead of making the elements here we can just grab them 16 | // via their id (see index.html) 17 | apple = getElement('apple'); 18 | banana = getElement('banana'); 19 | pear = getElement('pear'); 20 | } 21 | 22 | // Hide and show them depending on what key was pressed 23 | function keyPressed() { 24 | if (key == 'A') { 25 | apple.hide(); 26 | } else if (key == 'B') { 27 | banana.hide(); 28 | } else if (key == 'P') { 29 | pear.hide(); 30 | } else if (key == ' ') { 31 | apple.show(); 32 | banana.show(); 33 | pear.show(); 34 | } 35 | } 36 | 37 | -------------------------------------------------------------------------------- /archive/05-dom/p5_dom/11_getElements/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 18 | 19 | 20 | 21 | 22 |

Move the apples around.

23 |

1 apple

24 |

2 apples

25 |

3 apples

26 | 27 | 28 | -------------------------------------------------------------------------------- /archive/05-dom/p5_dom/11_getElements/sketch.js: -------------------------------------------------------------------------------- 1 | // ITP Networked Media, Fall 2014 2 | // DOM Manipulation 3 | // https://github.com/shiffman/itp-networked-media 4 | // Daniel Shiffman 5 | 6 | // These are adapted from https://github.com/lmccart/itp-creative-js 7 | // Creating other HTML elements, adding style. 8 | 9 | function setup() { 10 | noCanvas(); 11 | 12 | var link = getElement("clicky"); 13 | link.mousePressed(shuffle); 14 | } 15 | 16 | 17 | function shuffle() { 18 | // Get an array of elements of the same class 19 | var apples = getElements("apple"); 20 | // Do something to all of them 21 | for (var i=0; i 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /archive/05-dom/p5_dom/13_animateDOM/sketch.js: -------------------------------------------------------------------------------- 1 | // ITP Networked Media, Fall 2014 2 | // DOM Manipulation 3 | // https://github.com/shiffman/itp-networked-media 4 | // Daniel Shiffman 5 | 6 | // Let's look at something that resembles a Processing sketch 7 | // but animations a DOM element instead 8 | 9 | // This is our DOM element 10 | var words; 11 | 12 | // Variables to move it around 13 | var x; 14 | var y; 15 | var xspeed = 5; 16 | var yspeed = -2; 17 | 18 | // Size 19 | var fsize = 32; 20 | 21 | var w = 280; 22 | var h = 100; 23 | 24 | function setup() { 25 | noCanvas(); 26 | 27 | // Make a DIV with some styling 28 | words = createDiv("Bouncing Shaking Words"); 29 | words.style("padding","10px"); 30 | words.style("background-color","pink"); 31 | words.style("text-align","center"); 32 | words.style("vertical-align","center"); 33 | words.size(w,h); 34 | words.style("line-height","100px"); 35 | 36 | // Start it in the middle 37 | x = windowWidth/2; 38 | y = windowHeight/2; 39 | 40 | } 41 | 42 | function draw() { 43 | 44 | // Set position and style 45 | words.position(x,y); 46 | words.style("font-size",fsize); 47 | 48 | // Manipulate the size 49 | fsize = floor(fsize + random(-2,2)); 50 | fsize = constrain(fsize,24,36); 51 | 52 | // Bouncing ball algorithm! 53 | x += xspeed; 54 | y += yspeed; 55 | 56 | if (x > windowWidth - w || x < 0) { 57 | xspeed *= -1; 58 | } 59 | if (y > windowHeight - h || y < 0) { 60 | yspeed *= -1; 61 | } 62 | } 63 | 64 | 65 | -------------------------------------------------------------------------------- /archive/05-dom/p5_dom/14_button_slider/ball.js: -------------------------------------------------------------------------------- 1 | // ITP Networked Media, Fall 2014 2 | // DOM Manipulation 3 | // https://github.com/shiffman/itp-networked-media 4 | // Daniel Shiffman 5 | 6 | function Ball(tempX, tempY, tempW) { 7 | this.x = tempX; 8 | this.y = tempY; 9 | this.w = tempW; 10 | this.speed = 0; 11 | 12 | this.gravity = function() { 13 | // Add gravity to speed 14 | this.speed = this.speed + gravity; 15 | } 16 | 17 | this.move = function() { 18 | // Add speed to y location 19 | this.y = this.y + this.speed; 20 | // If square reaches the bottom 21 | // Reverse speed 22 | if (this.y > height) { 23 | this.speed = this.speed * -0.95; 24 | this.y = height; 25 | } 26 | } 27 | 28 | this.display = function() { 29 | // Display the circle 30 | fill(255, 100); 31 | stroke(255); 32 | ellipse(this.x,this.y,this.w,this.w); 33 | } 34 | } 35 | -------------------------------------------------------------------------------- /archive/05-dom/p5_dom/14_button_slider/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /archive/05-dom/p5_dom/14_button_slider/sketch.js: -------------------------------------------------------------------------------- 1 | // ITP Networked Media, Fall 2014 2 | // DOM Manipulation 3 | // https://github.com/shiffman/itp-networked-media 4 | // Daniel Shiffman 5 | 6 | // Let's look at a simple sketch that adds some buttons 7 | // and sliders! 8 | 9 | var balls = []; // We start with an empty array 10 | var gravity = 0.1; 11 | 12 | // All of the DOM elements we need 13 | var counter; 14 | var button; 15 | var slider; 16 | var sliderVal; 17 | 18 | function setup() { 19 | createCanvas(640,360); 20 | 21 | // Dom elements 22 | counter = createP(""); 23 | 24 | // A button 25 | button = createButton("Add a new ball."); 26 | // Attach the button to a function! 27 | button.mousePressed(newBall); 28 | button.position(20,340); 29 | 30 | // A slider 31 | // Min and max values and where to start 32 | slider = createSlider(10,100,50); 33 | // A dom element to show us the value 34 | sliderVal = createDiv(""); 35 | 36 | // Initialize ball index 0 37 | balls.push(new Ball(50,0,24)); 38 | 39 | } 40 | 41 | function draw() { 42 | background(51); 43 | 44 | // Update and display all balls 45 | for (var i = 0; i < balls.length; i ++ ) { // Whatever the length of that array, update and display all of the objects. 46 | balls[i].gravity(); 47 | balls[i].move(); 48 | balls[i].display(); 49 | } 50 | 51 | // Updating the DOM elements that show us info: 52 | counter.html("Total objects: " + balls.length); 53 | sliderVal.html("Size: " + slider.value()); 54 | } 55 | 56 | function newBall() { 57 | // A new ball object 58 | var b = new Ball(random(width),random(height),slider.value()); // Make a new object at the mouse location. 59 | // Here, the function push() adds an element to the end of the array. 60 | balls.push(b); 61 | } 62 | -------------------------------------------------------------------------------- /archive/05-dom/p5_dom/14a_canvas_p5_dom/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 |

Resize the box

12 |
13 |
14 |
15 | 16 | 17 | -------------------------------------------------------------------------------- /archive/05-dom/p5_dom/14a_canvas_p5_dom/sketch.js: -------------------------------------------------------------------------------- 1 | /* 2 | --------------- 3 | jsfiddle version: http://jsfiddle.net/rover/0r7ydo1s/ 4 | --------------- 5 | */ 6 | var canvas; 7 | var sliderElement; 8 | // canvas w x h 9 | var canvasW = 600; 10 | var canvasH = 400; 11 | 12 | function setup() { 13 | 14 | canvas = createCanvas(canvasW,canvasH); 15 | // put the canvas in the
with id "canvas-container" (see html) 16 | canvas.parent('canvas-container'); 17 | // createSlider(lowValue,highValue,width) 18 | sliderElement = createSlider(10,canvasW - 20,canvasW/4); 19 | sliderElement.size(canvasW - 20); 20 | // put the slider in the
with id "slider-container" 21 | sliderElement.parent('slider-container'); 22 | } 23 | 24 | 25 | function draw() { 26 | 27 | console.log('draw!'); 28 | 29 | // background 30 | background(42, 169, 217); 31 | 32 | sliderValue = sliderElement.value(); 33 | //rectangle 34 | fill(162, 217, 39); 35 | rect(10,100,sliderValue,150); 36 | 37 | } -------------------------------------------------------------------------------- /archive/05-dom/p5_dom/14a_canvas_p5_dom/style.css: -------------------------------------------------------------------------------- 1 | body{ 2 | padding: 0 10px; 3 | margin:0; 4 | } 5 | #canvas-container{ 6 | border:1px solid #333; 7 | } 8 | li{ 9 | background-color: #453243; 10 | } -------------------------------------------------------------------------------- /archive/05-dom/p5_dom/15_wordscrambler/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 |
9 |

Please enter some text:

10 |

11 |

12 |
13 | 14 | -------------------------------------------------------------------------------- /archive/05-dom/p5_dom/15_wordscrambler/sketch.js: -------------------------------------------------------------------------------- 1 | // ITP Networked Media, Fall 2014 2 | // DOM Manipulation 3 | // https://github.com/shiffman/itp-networked-media 4 | // Daniel Shiffman 5 | 6 | // Let's look an example that messes with user input text 7 | // A ton more here! https://github.com/shiffman/Programming-from-A-to-Z-F14 8 | 9 | // The scrambled text 10 | var scrambled = ''; 11 | 12 | // The user input 13 | var input; 14 | 15 | function setup() { 16 | noCanvas(); 17 | 18 | // Grab the text field 19 | input = getElement('input'); 20 | 21 | // A Grab the button 22 | var go = getElement('button'); 23 | // Set up a function to handle when the button is pressed 24 | go.mousePressed(generate); 25 | 26 | // A paragraph element for the scrambled text 27 | scrambled = getElement('scrambled'); 28 | } 29 | 30 | function generate() { 31 | // Clear the scrambled text 32 | var scrambledtext = ''; 33 | 34 | // What has the user entered? 35 | var text = input.value(); 36 | // Check to see if they entered something 37 | var len = text.length; 38 | if (text.length === 0) { 39 | alert('Enter something!'); 40 | } else { 41 | // If they did, scramble up the text using string parsing 42 | for (var i = 0; i < len; i++) { 43 | var which = floor(random(text.length)); 44 | scrambledtext += text.charAt(which); 45 | // Remove what was already used 46 | text = text.substring(0,which) + text.substring(which+1,text.length); 47 | } 48 | // Update the result 49 | scrambled.html(scrambledtext); 50 | } 51 | } 52 | -------------------------------------------------------------------------------- /archive/05-dom/p5_dom/README.md: -------------------------------------------------------------------------------- 1 | p5 dom examples from Lauren McCarthy: https://github.com/lmccart/itp-creative-js 2 | 3 | https://github.com/lmccart/itp-creative-js/tree/master/week3/04_dom_p5 -------------------------------------------------------------------------------- /archive/06-listeners/button_listener.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Button Listener 5 | 6 | 23 | 24 | 25 | 26 |
27 | 28 | 29 | 30 | -------------------------------------------------------------------------------- /archive/06-listeners/keyboard_listener.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Keyboard Listener 5 | 20 | 71 | 72 | 73 |
74 |

use the keyboard arrows to move me

75 |
76 | 77 | 78 | -------------------------------------------------------------------------------- /archive/06-listeners/mouse_listener.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Mouse Listener 5 | 20 | 38 | 39 | 40 |
41 |

Click the mouse to re-position the box

42 |
43 | 44 | 45 | -------------------------------------------------------------------------------- /archive/07-json/common_names.json: -------------------------------------------------------------------------------- 1 | { 2 | "last_names":[ 3 | "Smith", 4 | "Johnson", 5 | "Williams", 6 | "Jones", 7 | "Brown", 8 | "Davis", 9 | "Miller", 10 | "Wilson", 11 | "Moore", 12 | "Taylor", 13 | "Anderson", 14 | "Thomas", 15 | "Jackson", 16 | "White", 17 | "Harris", 18 | "Martin", 19 | "Thompson", 20 | "Garcia", 21 | "Martinez", 22 | "Robinson", 23 | "Clark", 24 | "Rodriguez", 25 | "Lewis", 26 | "Lee", 27 | "Walker", 28 | "Hall" 29 | ], 30 | "traditionally_male_names":[ 31 | "James", 32 | "Steven", 33 | "Robert", 34 | "Michael", 35 | "William", 36 | "David", 37 | "Richard", 38 | "Charles", 39 | "Joseph", 40 | "Thomas", 41 | "Christopher", 42 | "Daniel", 43 | "Paul", 44 | "Mark", 45 | "Donald", 46 | "George", 47 | "Kenneth", 48 | "John", 49 | "Edward", 50 | "Brian", 51 | "Ronald", 52 | "Anthony", 53 | "Kevin", 54 | "Jason", 55 | "Matthew", 56 | "Gary" 57 | ], 58 | "traditionally_female_names":[ 59 | "Mary", 60 | "Patricia", 61 | "Linda", 62 | "Barbara", 63 | "Elizabeth", 64 | "Jennifer", 65 | "Maria", 66 | "Susan", 67 | "Margaret", 68 | "Dorothy", 69 | "Lisa", 70 | "Nancy", 71 | "Karen", 72 | "Betty", 73 | "Helen", 74 | "Sandra", 75 | "Donna", 76 | "Carol", 77 | "Ruth", 78 | "Sharon", 79 | "Michelle", 80 | "Laura", 81 | "Sarah", 82 | "Kimberly", 83 | "Deborah", 84 | "Jessica" 85 | ] 86 | } -------------------------------------------------------------------------------- /archive/07-json/readme.md: -------------------------------------------------------------------------------- 1 | For an example of parsing JSON data see http://jsfiddle.net/rover/d6gN5/ -------------------------------------------------------------------------------- /archive/07-json/student_urls.json: -------------------------------------------------------------------------------- 1 | [ 2 | { 3 | "name": "Brett Stiller", 4 | "url": "http://brettstiller.xyz/?cat=6" 5 | }, 6 | { 7 | "name": "Catherine Rehwinkel", 8 | "url": "http://www.catherinerehwinkel.com/itp-nyu/" 9 | }, 10 | { 11 | "name": "Craig Pickard", 12 | "url": "http://www.craigwentdigital.com/category/networked-media/" 13 | }, 14 | { 15 | "name": "Lisa In Young Song", 16 | "url": "http://lisaisong.com/networked-media" 17 | }, 18 | { 19 | "name": "Julia Irwin", 20 | "url": "http://www.juliasbetablog.com/category/networked-media/" 21 | }, 22 | { 23 | "name": "Louis Minsky", 24 | "url": "http://www.louisminsky.com/?q=blog/networked-media/" 25 | }, 26 | { 27 | "name": "Maria Fang", 28 | "url": "http://www.mariafangitp.com/category/networked-media/" 29 | }, 30 | { 31 | "name": "Matt Romein", 32 | "url": "http://www.itp-mromein.com/" 33 | }, 34 | { 35 | "name": "Melissa Felderman", 36 | "url": "http://www.feldiblog.com/?cat=9" 37 | }, 38 | { 39 | "name": "Sergio Mora", 40 | "url": "http://itp.smorad.com/category/commlab-network/" 41 | }, 42 | { 43 | "name": "Will Field", 44 | "url": "http://www.willjfield.com/?cat=5" 45 | } 46 | ] -------------------------------------------------------------------------------- /archive/07-json/weather.json: -------------------------------------------------------------------------------- 1 | { 2 | "coord": { 3 | "lon": -76.61, 4 | "lat": 39.29 5 | }, 6 | "sys": { 7 | "message": 0.0441, 8 | "country": "United States of America", 9 | "sunrise": 1396953525, 10 | "sunset": 1397000248 11 | }, 12 | "weather": [ 13 | { 14 | "id": 500, 15 | "main": "Rain", 16 | "description": "light rain", 17 | "icon": "10d" 18 | } 19 | ], 20 | "base": "cmc stations", 21 | "main": { 22 | "temp": 59.99, 23 | "humidity": 58, 24 | "pressure": 999, 25 | "temp_min": 57, 26 | "temp_max": 62.6 27 | }, 28 | "wind": { 29 | "speed": 3.33, 30 | "gust": 7.2, 31 | "deg": 269 32 | }, 33 | "rain": { 34 | "1h": 0.25 35 | }, 36 | "clouds": { 37 | "all": 12 38 | }, 39 | "dt": 1396974326, 40 | "id": 4347778, 41 | "name": "Baltimore", 42 | "cod": 200 43 | } -------------------------------------------------------------------------------- /archive/08-apis/00static/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /archive/08-apis/00static/sketch.js: -------------------------------------------------------------------------------- 1 | function setup() { 2 | noCanvas(); 3 | loadJSON('student_urls.json', doStuff); 4 | } 5 | 6 | /* The parameter "data" is the content of the json file, as a Javascript object. 7 | loadJSON() takes care of sending the object to your function -- 8 | you just have to give it a name. Here, it's called "data", but could be anything. 9 | */ 10 | function doStuff(data){ 11 | // Debug: inspect the json object 12 | console.log(data); 13 | 14 | // loop through the array of names and URLs 15 | for (var i = 0; i < data.length; i++){ 16 | 17 | // each element of the array is an object. 18 | // just to make that point, i'm storing each temporarily in a variable called personObject 19 | var personObject = data[i]; 20 | 21 | // Debug: see what's in each object 22 | console.log(personObject); 23 | //console.log(personObject.name); 24 | 25 | // create a new

with the person's name 26 | createP(personObject.name); 27 | 28 | 29 | } 30 | } 31 | -------------------------------------------------------------------------------- /archive/08-apis/00static/student_urls.json: -------------------------------------------------------------------------------- 1 | [ 2 | { 3 | "name": "Brett Stiller", 4 | "url": "http://brettstiller.xyz/?cat=6" 5 | }, 6 | { 7 | "name": "Catherine Rehwinkel", 8 | "url": "http://www.catherinerehwinkel.com/itp-nyu/" 9 | }, 10 | { 11 | "name": "Craig Pickard", 12 | "url": "http://www.craigwentdigital.com/category/networked-media/" 13 | }, 14 | { 15 | "name": "Lisa In Young Song", 16 | "url": "http://lisaisong.com/networked-media" 17 | }, 18 | { 19 | "name": "Julia Irwin", 20 | "url": "http://www.juliasbetablog.com/category/networked-media/" 21 | }, 22 | { 23 | "name": "Louis Minsky", 24 | "url": "http://www.louisminsky.com/?q=blog/networked-media/" 25 | }, 26 | { 27 | "name": "Maria Fang", 28 | "url": "http://www.mariafangitp.com/category/networked-media/" 29 | }, 30 | { 31 | "name": "Matt Romein", 32 | "url": "http://www.itp-mromein.com/" 33 | }, 34 | { 35 | "name": "Melissa Felderman", 36 | "url": "http://www.feldiblog.com/?cat=9" 37 | }, 38 | { 39 | "name": "Sergio Mora", 40 | "url": "http://itp.smorad.com/category/commlab-network/" 41 | }, 42 | { 43 | "name": "Will Field", 44 | "url": "http://www.willjfield.com/?cat=5" 45 | } 46 | ] -------------------------------------------------------------------------------- /archive/08-apis/01_weather/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /archive/08-apis/01_weather/sketch.js: -------------------------------------------------------------------------------- 1 | /* 2 | from: 3 | Lauren McCarthy 4 | https://github.com/lmccart/p5.js/wiki/Loading-external-files:-AJAX,-XML,-JSON 5 | 6 | */ 7 | 8 | function setup() { 9 | createCanvas(600, 400); 10 | noStroke(); 11 | loadJSON('http://api.openweathermap.org/data/2.5/weather?q=NewYork,USA', drawWeather); 12 | } 13 | 14 | function drawWeather(weather) { 15 | 16 | // Get the loaded JSON data 17 | console.log(weather); // inspect the weather JSON 18 | var humidity = weather.main.humidity; // get the main.humidity out of the loaded JSON 19 | console.log(humidity); // inspect the humidity in the console 20 | 21 | background(40, 90, 200); 22 | fill(0, 255, 255, humidity); // use the humidity value to set the alpha 23 | for (var i = 0; i < 50; i++) { 24 | ellipse(random(width), random(height), 30, 30); 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /archive/08-apis/01_weather_dom/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 |

Hello p5.js and p5.dom.js

11 |
12 | 13 | -------------------------------------------------------------------------------- /archive/08-apis/01_weather_dom/sketch.js: -------------------------------------------------------------------------------- 1 | // From in-class example Monday 11/17/14 2 | // jsfiddle version: http://jsfiddle.net/rover/bnz198Lv/ 3 | 4 | function setup() { 5 | noCanvas(); 6 | loadJSON('http://api.openweathermap.org/data/2.5/weather?q=New+York&units=imperial',parseStuff); 7 | } 8 | 9 | function parseStuff(data){ 10 | //console.log(data); // the whole thing 11 | //console.log(data.weather[0].main); // the first weather condition (eg, Rain) 12 | 13 | for (i in data.weather){ 14 | console.log(data.weather[i].main); 15 | createP(data.weather[i].main); 16 | } 17 | 18 | //getElement("message").html('hi'); // try adding something from the JSON here 19 | } -------------------------------------------------------------------------------- /archive/08-apis/02_capitol_words/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 |
Favorite words of NY legislators, from Capitol Words. Click anywhere to redraw.
11 | 12 | -------------------------------------------------------------------------------- /archive/08-apis/02_capitol_words/sketch.js: -------------------------------------------------------------------------------- 1 | var baseUrl = "http://capitolwords.org/api/1/phrases.json?entity_type=state&entity_value=NY&apikey="; 2 | var apiKey = "3e16c02bbb374110b558027c6adb189d"; // this is my api key, but you can borrow it. 3 | var fullUrl = baseUrl+apiKey; 4 | var words; 5 | 6 | function setup() { 7 | createCanvas(windowWidth, windowHeight); 8 | noStroke(); 9 | loadJSON(fullUrl, getWords); 10 | // set up text size 11 | textSize(32); 12 | // fill style for "loading" text 13 | fill(100); 14 | text("Loading Capitol Words ...", 100,100); 15 | } 16 | /* 17 | // You could also use the draw function to make the words re-render continuously 18 | function draw(){ 19 | renderWords(); 20 | }*/ 21 | 22 | function mousePressed(){ 23 | renderWords(); 24 | } 25 | 26 | function getWords(json){ 27 | console.log(json); // for debugging, to view the full json result 28 | words = json; 29 | renderWords(); 30 | } 31 | 32 | function renderWords(){ 33 | background(255); 34 | // don't start drawing until there are words in the array 35 | if (words.length > 0){ 36 | console.log('got words'); 37 | // words is an array of objects 38 | for (var i=0; i 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /archive/08-apis/03_instagram/sketch.js: -------------------------------------------------------------------------------- 1 | // Daniel Shiffman 2 | // Programming from A to Z, Fall 2014 3 | // https://github.com/shiffman/Programming-from-A-to-Z-F14 4 | 5 | // Instagram requires oAuth, but the old API does not seem to 6 | // https://api.instagram.com/v1/ 7 | 8 | // To get a search query 9 | var input; 10 | 11 | // An array of images 12 | var imgs = []; 13 | 14 | function setup() { 15 | noCanvas(); 16 | 17 | // Set up a search query and button for searching 18 | var form = createDiv(''); 19 | input = createInput('love'); 20 | input.parent(form); 21 | var button = createButton('search'); 22 | button.mousePressed(search); 23 | button.parent(form); 24 | } 25 | 26 | // This function will execute the search 27 | function search() { 28 | 29 | // Clear all the previous divs 30 | for (var i = 0; i < imgs.length; i++) { 31 | imgs[i].remove(); 32 | } 33 | 34 | // Start over 35 | imgs = []; 36 | 37 | // Form a URL 38 | var part1 = 'https://api.instagram.com/v1/tags/'; 39 | // add your client ID into the ________ 40 | var part2 = '/media/recent?client_id=_______'; 41 | var query = part1 + input.value() + part2; 42 | 43 | // Execute the API query 44 | loadJSON(query, gotData); 45 | } 46 | 47 | // The API query is done 48 | function gotData(data) { 49 | // Get the image data 50 | var images = data.data; 51 | for (var i = 0; i < images.length; i++) { 52 | // Make an image element for each one 53 | var img = createImg(images[i].images.thumbnail.url); 54 | imgs.push(img); 55 | } 56 | } 57 | 58 | -------------------------------------------------------------------------------- /archive/08-apis/04_nytimes/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /archive/08-apis/04_nytimes/sketch.js: -------------------------------------------------------------------------------- 1 | /* 2 | Adapted from 3 | https://github.com/lmccart/itp-creative-js/tree/master/week4/01_p5_examples/07_external_API_nytimes 4 | 5 | For information on the NYTimes Article Search API, see: 6 | http://developer.nytimes.com/docs/read/article_search_api_v2 7 | */ 8 | 9 | function setup() { 10 | createCanvas(1200, 400); 11 | noLoop(); 12 | noStroke(); 13 | fill(0); 14 | 15 | var baseUrl = "http://api.nytimes.com/svc/search/v2/articlesearch.jsonp?callback=svc_search_v2_articlesearch&q="; 16 | var apiKey = "sample-key"; //this key works 17 | var searchTerm = "net+neutrality"; // "obama", "middle+east", "net+neutrality", "earthquake", etc 18 | var url = baseUrl + searchTerm + "&api-key=" + apiKey; 19 | loadJSON(url, drawDocs); 20 | } 21 | 22 | function draw() { 23 | } 24 | 25 | function drawDocs(data) { 26 | var docs = data.response.docs; 27 | for (var i=0; i 2 | 3 | 4 | 5 | 6 | 7 | 8 |
9 | 10 | -------------------------------------------------------------------------------- /archive/09-jquery/ajax_get/script.js: -------------------------------------------------------------------------------- 1 | $(document).ready(function() { //jQuery's method of listening for the DOM to load 2 | // Put all your code INSIDE this function 3 | var url = "http://api.openweathermap.org/data/2.5/weather?q=New+York&units=imperial"; 4 | // get the content of the URL into the variable "response" 5 | $.get(url, function (response) { 6 | console.log(response); // see everything 7 | 8 | //drill down and get the data you want 9 | console.log(response.weather[0].description); 10 | 11 | //jQuery makes it easy to grab a DOM element. 12 | // Use CSS syntax, "#" for id and "." for class 13 | $("#info").html("The temperature is " + response.main.temp + "° F"); 14 | 15 | }); 16 | 17 | }); 18 | 19 | /* 20 | === NOTES === 21 | * Most functions in jQuery start with "$". Yeah, it looks weird at first. 22 | 23 | * The $.get() function is similar to p5's loadJSON() function. It takes 2 paramaters: 24 | 1. The URL to load 25 | 2. A function to handle the content of the URL. 26 | 27 | In this example, the function is inline, as an anonymous function. You could also write it like: 28 | $.get(url,nameOfFunctionDefinedSomewhereElse); 29 | 30 | and then, of course, you'd have to define that function: 31 | function nameOfFunctionDefinedSomewhereElse(response){ 32 | 33 | } 34 | 35 | Like in p5, the parameter is sent to the function automatically. 36 | You just have to name it something. Here it's called "response" 37 | More info: http://api.jquery.com/jquery.get/ 38 | 39 | * Access DOM elements in jQuery using $("CSS SYNTAX HERE"). 40 | Inside the quotes, write the path to the element using CSS selectors like "#" and "." 41 | For example, "#info" gets any element with an id="info" 42 | ".article" gets any and all elements with a class="article" 43 | More examples: http://www.w3schools.com/jquery/jquery_ref_selectors.asp 44 | 45 | */ -------------------------------------------------------------------------------- /archive/10-server-side/00-servi-static-files/faq.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | FAQ 5 | 6 | 7 | 8 |

FAQ

9 |

Q: What is Servi?

10 |

A: servi.js is a JavaScript node.js microframework for creating web servers. It is inspired by Processing and p5.js.

11 |
12 |

Q: Where do I find documentation?

13 |

A: For some Servi basics, see the servi.js github wiki

14 |
15 |

Q: How do I do this in Servi?

16 |

A: For more info on how to do this assingment, see Using Servi in the Networked Media class wiki

17 | 18 | -------------------------------------------------------------------------------- /archive/10-server-side/00-servi-static-files/server.js: -------------------------------------------------------------------------------- 1 | // every servi application must have these 2 lines 2 | var servi = require('servi'); 3 | var app = new servi(true); 4 | 5 | // set the port (defaults to 3000 if you leave out this line) 6 | port(3001); // make sure "port()" line comes before "start()" 7 | start(); 8 | // set up the routes 9 | route('/',showHome); 10 | route('/about',myAboutPage); 11 | route('/faq',viewFaq); 12 | 13 | function showHome(request){ 14 | // serve a simple string 15 | request.respond("This is the home page."); 16 | } 17 | 18 | function myAboutPage(request){ 19 | // build a string with some HTML in it 20 | var myHtml = "

About Me!!!

"; 21 | myHtml += "

I am a person from earth.

"; 22 | // serve the HTML string 23 | request.respond(myHtml); 24 | } 25 | 26 | function viewFaq(request){ 27 | // serve a static HTML file 28 | request.serveFile('faq.html'); 29 | } 30 | 31 | -------------------------------------------------------------------------------- /archive/10-server-side/01-servi-userprofiles/server.js: -------------------------------------------------------------------------------- 1 | // every servi application must have these 2 lines 2 | var servi = require('servi'); 3 | var app = new servi(true); 4 | 5 | // set the port (defaults to 3000 if you leave out this line) 6 | port(3111); // make sure "port()" line comes before "start()" 7 | start(); 8 | // set up the routes 9 | route('/',showHome); 10 | route('/about',myAboutPage); 11 | 12 | function showHome(request){ 13 | request.respond("This is the home page."); 14 | } 15 | 16 | function myAboutPage(request){ 17 | request.respond("

About Me!!!

"); 18 | } 19 | 20 | route('/profile/:username',showProfile); 21 | 22 | function showProfile(request){ 23 | var content = "

" + request.params.username + "

"; 24 | content += "

All the user's info here

"; 25 | request.respond(content); 26 | } 27 | 28 | -------------------------------------------------------------------------------- /archive/10-server-side/02-servi-userprofiles-data/server.js: -------------------------------------------------------------------------------- 1 | // every servi application must have these 2 lines 2 | var servi = require('servi'); 3 | var app = new servi(true); 4 | 5 | // set the port (defaults to 3000 if you leave out this line) 6 | port(7777); //make sure this comes before "start()" 7 | start(); 8 | // set up the routes 9 | route('/',showHome); 10 | route('/profile/:userid',showProfile); 11 | 12 | var users = [ 13 | { 14 | "name": "Joe", 15 | "about": "I like cats and kittens." 16 | }, 17 | { 18 | "name": "Jane", 19 | "about": "I live in Alberta and like to code." 20 | }, 21 | { 22 | "name": "Morgan", 23 | "about": "Craft beer and pickles and kale!" 24 | } 25 | ]; 26 | 27 | function showHome(request){ 28 | request.respond("This is the home page."); 29 | } 30 | 31 | function showProfile(request){ 32 | var id = request.params.userid; 33 | if (id in users){ 34 | var name = users[id].name; 35 | var about = users[id].about; 36 | var content = "

" + name + "

"; 37 | content += "

" + about + "

"; 38 | request.respond(content); 39 | } else { 40 | request.respond("

Could not find that user id

"); 41 | } 42 | } 43 | 44 | 45 | -------------------------------------------------------------------------------- /archive/10-server-side/03-servi-form-get/form.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 |

Who are you and where are you from?

6 |
7 | 8 | 9 | 10 |
11 | 12 | -------------------------------------------------------------------------------- /archive/10-server-side/03-servi-form-get/server.js: -------------------------------------------------------------------------------- 1 | var servi = require('servi'); 2 | var app = new servi(true); 3 | 4 | port(3000); 5 | start(); 6 | 7 | // --- routes --- // 8 | route('/', showForm); 9 | 10 | // the route here must match the URL in the form element 11 | // eg,
12 | route('/submitform', handleForm); 13 | 14 | // --- handlers --- // 15 | function showForm(request){ 16 | // Show the form file 17 | request.serveFile('form.html'); 18 | } 19 | 20 | function handleForm(request) { 21 | console.log(request.params); // check what came in 22 | 23 | // params correspond to the name of the form fields 24 | // for example, 25 | var content = "

The name submitted was: " + request.params.name + "

"; 26 | content += "

The city submitted was: " + request.params.city + "

"; 27 | request.respond(content); 28 | } -------------------------------------------------------------------------------- /archive/10-server-side/04-servi-form-post/form.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 |

What's your name?

7 | 8 | 9 |

Cats or Dogs?

10 | Cats
11 | Dogs
12 | 13 |
14 | 15 | -------------------------------------------------------------------------------- /archive/10-server-side/04-servi-form-post/server.js: -------------------------------------------------------------------------------- 1 | var servi = require('servi'); 2 | var app = new servi(true); 3 | 4 | port(3000); 5 | start(); 6 | 7 | // --- routes --- // 8 | route('/', showForm); 9 | 10 | // the route here must match the URL in the form element 11 | // eg,
12 | route('/submitform', handleForm); 13 | 14 | // --- handlers --- // 15 | function showForm(request){ 16 | // Show the form file 17 | request.serveFile('form.html'); 18 | } 19 | 20 | function handleForm(request) { 21 | // for post requests, the values come in the request.fields object 22 | 23 | console.log(request.fields); // check what came in 24 | 25 | var content = "

The name submitted was: " + request.fields.name + "

"; 26 | content += "

Preferred pet: " + request.fields.pet + "

"; 27 | request.respond(content); 28 | } -------------------------------------------------------------------------------- /archive/10-server-side/05-servi-template/server.js: -------------------------------------------------------------------------------- 1 | // every servi application must have these 2 lines 2 | var servi = require('servi'); 3 | var app = new servi(true); 4 | 5 | // set the port (defaults to 3000 if you leave out this line) 6 | port(8080); 7 | 8 | // set up the routes 9 | route('/',viewHome); 10 | route('/:page',viewPage); 11 | 12 | // make an object to hold data to feed our template 13 | var content = { 14 | pageTitle: "Cats on Mars", 15 | intro: "Cats on Mars explores the mysteries of space cats." 16 | }; 17 | 18 | function viewHome(request){ 19 | request.render("templates/page.template.html",content); 20 | } 21 | 22 | // an object with content for different pages 23 | var pages = { 24 | work: { 25 | pageTitle: "Cats at Work", 26 | intro: "Martian cats work extremely hard all day long." 27 | }, 28 | play: { 29 | pageTitle: "Play time for Cats on Mars!", 30 | intro: "A cat on Mars knows how to play like nobody's watching." 31 | }, 32 | sleep:{ 33 | pageTitle: "Asleep on the Red Planet", 34 | intro: "Even Martian cats sleep 18 hours a day." 35 | } 36 | }; 37 | 38 | function viewPage(request){ 39 | var pageName = request.params.page; // 'work','play', or 'sleep' 40 | if (pageName in pages){ 41 | request.render("templates/page.template.html",pages[pageName]); 42 | } else { 43 | request.respond("Page not found"); 44 | } 45 | 46 | } 47 | // --- START THE SERVER --- // 48 | start(); -------------------------------------------------------------------------------- /archive/10-server-side/05-servi-template/templates/page.template.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | <%= pageTitle %> 5 | 6 | 7 | 8 |

<%= pageTitle %>

9 | 10 |

<%= intro %>

11 | 12 |

the end of the page.

13 | 14 | -------------------------------------------------------------------------------- /archive/10-server-side/05a-servi-template-loop/server.js: -------------------------------------------------------------------------------- 1 | // every servi application must have these 2 lines 2 | var servi = require('servi'); 3 | var app = new servi(true); 4 | 5 | // set the port (defaults to 3000 if you leave out this line) 6 | port(3010); 7 | // --- START THE SERVER --- // 8 | start(); 9 | 10 | // set up the route 11 | route('/',viewPeople); 12 | 13 | // An object with an array of data that the template will use 14 | var data = { 15 | people: [ 16 | { 17 | "name": "Brad", 18 | "city": "London" 19 | }, 20 | { 21 | "name": "Jill", 22 | "city": "Tokyo" 23 | }, 24 | { 25 | "name": "Kate", 26 | "city": "New York" 27 | } 28 | ] 29 | }; 30 | 31 | function viewPeople(request){ 32 | request.render("templates/people_list.html",data); 33 | } 34 | -------------------------------------------------------------------------------- /archive/10-server-side/05a-servi-template-loop/templates/people_list.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | People 4 | 5 | 6 |

Where people live

7 | 8 | <% for (i = 0; i < people.length; i++) { %> 9 | 10 |
  • <%= people[i].name %> lives in <%= people[i].city %>
    • 11 | 12 | <% } %> 13 | 14 | 15 | -------------------------------------------------------------------------------- /archive/10-server-side/06-servi-db/people.db: -------------------------------------------------------------------------------- 1 | {"name":"Joe","_id":"1DlDQu55m85dqNQJ"} 2 | {"name":"Opal","_id":"MKuf4cy0ElnxVDRI"} 3 | {"name":"Robyn","_id":"hBrMzG83zwZCAocA"} 4 | {"name":"Bob","city":"New York City","_id":"w405kds0Gu1DLLm5"} 5 | {"name":"Jane","city":"New York City","_id":"sPdZltYd9jRsdclL"} 6 | -------------------------------------------------------------------------------- /archive/10-server-side/06-servi-db/server.js: -------------------------------------------------------------------------------- 1 | var servi = require('servi'); 2 | var app = new servi(true); 3 | 4 | // set up a database 5 | // looks for a file called "people.db" or creates one if it doesn't exist 6 | var namesDB = useDatabase("people"); 7 | 8 | // set up the routes 9 | route('/', showAll); 10 | route('/add/:person',addName); 11 | 12 | /* 13 | ==== Add a new name to the database ==== 14 | 15 | If the URL is http://123.com/add/Jane, then the name "Jane" gets added to the DB 16 | The text "Jane" is added in an object with a property called "name", like this: 17 | { 18 | name: "Jane" 19 | } 20 | Notice the flow of events and data: 21 | 1. Define a route, '/add/:person', where ':person' is a variable 22 | 2. User visits that URL, as in http://123.com/add/Jane 23 | 3. Grab the variable used in place of ':person', using 'request.params.person'. 24 | In this example, 'request.params.person' is equal to 'Jane' 25 | */ 26 | function addName(request){ 27 | var personName = request.params.person; //Bob 28 | var personObject = { 29 | name: personName, 30 | city: 'New York City' 31 | } 32 | namesDB.add(personObject); 33 | request.respond("Added "+request.params.person); 34 | } 35 | 36 | // show all the names 37 | function showAll(request){ 38 | namesDB.getAll(gotNames); 39 | function gotNames(names){ 40 | namestext = ""; 41 | for (i =0; i < names.length; i++) { 42 | namestext += names[i].name + "
    "; 43 | } 44 | request.respond( namestext ); 45 | } 46 | } 47 | 48 | start(); -------------------------------------------------------------------------------- /archive/10-server-side/07-servi-db-search/html/searchform.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 |

    Search Users By Name

    6 | 7 |

    Name

    8 | 9 |
    10 | 11 |
    12 |

    Return home

    13 | 14 | -------------------------------------------------------------------------------- /archive/10-server-side/07-servi-db-search/people.db: -------------------------------------------------------------------------------- 1 | {"name":"Dan","date_added":"Sun Nov 30 2014 22:00:04 GMT-0500 (EST)","_id":"DGW46VG8N1kCsOXH"} 2 | {"name":"Annabelle","date_added":"Sun Nov 30 2014 21:59:26 GMT-0500 (EST)","_id":"S0hQsabVo80Rw7Ln"} 3 | {"name":"Julia","date_added":"Sun Nov 30 2014 21:59:07 GMT-0500 (EST)","_id":"jG2eAyNxMUrCbzqp"} 4 | {"name":"Diego","date_added":"Sun Nov 30 2014 21:56:30 GMT-0500 (EST)","_id":"t5GLbvx9qyRiJHW7"} 5 | {"name":"Janet","date_added":"Sun Nov 30 2014 21:56:15 GMT-0500 (EST)","_id":"yaZf0BFknoNXYcVA"} 6 | {"name":"Ziggy","date_added":"Sun Nov 30 2014 22:01:33 GMT-0500 (EST)","_id":"t32vvLCPk8xYXTwD"} 7 | {"name":"Dan","date_added":"Sun Nov 30 2014 22:01:51 GMT-0500 (EST)","_id":"WR9a7FDWcEapmXB3"} 8 | -------------------------------------------------------------------------------- /archive/10-server-side/09-servi-toads/serve-toad.js: -------------------------------------------------------------------------------- 1 | var servi = require('servi'); 2 | var app = new servi(true); 3 | port(3002); 4 | start(); 5 | route('/',showHome); 6 | route('/toads/:toadName',getToad); 7 | 8 | myToadCollection = { 9 | yosemite: { 10 | common_name: 'Yosemite Toad', 11 | scientific_name: 'Anaxyrus canorus', 12 | description: 'A robust and stocky toad with dry, uniformly warty skin.', 13 | photo: 'http://www.californiaherps.com/frogs/images/acanorusac7116.jpg', 14 | sounds: 'http://www.californiaherps.com/sounds/bcanorus7.mp3' 15 | }, 16 | boreal: { 17 | common_name: 'Boreal Toad', 18 | scientific_name: 'Anaxyrus boreas boreas', 19 | description: 'A large and robust toad with dry, warty skin.', 20 | photo: 'http://www.californiaherps.com/frogs/images/bbboreasrnphumboldt.jpg', 21 | sounds: 'http://www.californiaherps.com/sounds/bbboreasfl406solo.mp3' 22 | } 23 | }; 24 | 25 | function showHome(request){ 26 | var toadListText = ''; 27 | for (shortname in myToadCollection){ 28 | //console.log(i); 29 | var toad = myToadCollection[shortname]; 30 | //
  • Name
    • 31 | toadListText += '
  • ' + toad.common_name + '
    • '; 32 | } 33 | var title = "

    My Toads

    "; 34 | request.respond(title + toadListText); 35 | } 36 | function getToad(request){ 37 | var tname = request.params.toadName; // 'yosemite' or 'boreal' 38 | var currentToad = myToadCollection[tname]; // indiv. toad object 39 | request.render('toad_profile.html',currentToad); 40 | } -------------------------------------------------------------------------------- /archive/10-server-side/09-servi-toads/toad_profile.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | <%= common_name %> 5 | 6 | 7 | 8 |

    Toads R Us

    9 |

    <%= common_name %>

    10 | 11 |

    Common Name: <%= common_name %>

    12 |

    Scientific Name: <%= scientific_name %>

    13 |

    Description: <%= description %>

    14 | 15 |
    16 |

    Home

    17 | 18 | -------------------------------------------------------------------------------- /archive/10-server-side/10-servi-load-json/server.js: -------------------------------------------------------------------------------- 1 | /* 2 | Example loading a local JSON file in Servi.js 3 | and using it as a Javascript object 4 | 5 | */ 6 | var servi = require('servi'); 7 | var app = new servi(true); 8 | // IMPORTANT! Make sure to add this line to require 'http': 9 | var http = require('http'); 10 | port(3000); 11 | start(); 12 | 13 | // routes 14 | route('/', fromFileDemo); 15 | route('/jsonurl',fromUrlDemo); 16 | function fromFileDemo(request){ 17 | var content = ''; 18 | 19 | // OPTION 1. Load a local JSON file 20 | loadJSON('weather.json',function(dataObj){ 21 | // now you can use the contents of the JSON file as a regular JS Object 22 | var temp = dataObj.main.temp; 23 | var city = dataObj.name; 24 | 25 | console.log('loaded from file'); 26 | content += "

    The temperature in " + city + " was once " + temp + "F

    "; 27 | content += '

    try loading JSON from url

    '; 28 | request.respond(content); 29 | }); 30 | 31 | /* === Note: === 32 | These examples use an anonymous function as the 2nd parameter in loadJSON(). 33 | If you prefer, you could instead use a named function, like this: 34 | 35 | loadJSON('weather.json',gotWeather); 36 | function gotWeather(dataObj){ 37 | // do stuff 38 | } 39 | 40 | */ 41 | } 42 | 43 | function fromUrlDemo(request){ 44 | var content = ''; 45 | 46 | // OPTION 2. Load JSON from a URL 47 | var myUrl = "http://api.openweathermap.org/data/2.5/weather?q=London,uk"; 48 | loadJSON(myUrl,function(dataObj){ 49 | // get data points from the object 50 | var temp = dataObj.main.temp; 51 | var city = dataObj.name; 52 | 53 | console.log("loaded from URL"); 54 | content += "

    The temperature in " + city + " right now is " + temp + "K

    "; 55 | content += '

    try loading JSON from file

    '; 56 | request.respond(content); 57 | }); 58 | } 59 | 60 | /* 61 | === 62 | === To work with JSON, add these 2 utility functions in your script === 63 | === Then call loadJSON() as in the demos above. 64 | === 65 | */ 66 | 67 | // load text from a url 68 | function loadURL(url,onSuccess){ 69 | var str = ''; 70 | http.get(url, function(res) { 71 | res.on("data", function(chunk) { 72 | str += chunk.toString(); 73 | }); 74 | res.on("end",function(){ 75 | onSuccess(str); 76 | }); 77 | }).on('error', function(e) { 78 | console.log("Got error: " + e.message); 79 | // use an onError() callback here? 80 | }); 81 | } 82 | 83 | // load JSON from a local file or a URL 84 | function loadJSON(path,callback){ 85 | // is it a URL ? 86 | if (path.indexOf('http') === 0){ 87 | loadURL(path, function(res){ 88 | callback(JSON.parse(res)); 89 | }); 90 | } else { // assume it's a file 91 | callback(JSON.parse(loadFile(path))); 92 | } 93 | } -------------------------------------------------------------------------------- /archive/10-server-side/10-servi-load-json/weather.json: -------------------------------------------------------------------------------- 1 | 2 | { 3 | "coord": { 4 | "lon": -74.01, 5 | "lat": 40.71 6 | }, 7 | "sys": { 8 | "type": 1, 9 | "id": 1980, 10 | "message": 0.115, 11 | "country": "US", 12 | "sunrise": 1416311222, 13 | "sunset": 1416346537 14 | }, 15 | "weather": [ 16 | { 17 | "id": 500, 18 | "main": "Rain", 19 | "description": "light rain", 20 | "icon": "10n" 21 | }, 22 | { 23 | "id": 701, 24 | "main": "Mist", 25 | "description": "mist", 26 | "icon": "50n" 27 | }, 28 | { 29 | "id": 300, 30 | "main": "Drizzle", 31 | "description": "light intensity drizzle", 32 | "icon": "09n" 33 | } 34 | ], 35 | "base": "cmc stations", 36 | "main": { 37 | "temp": 47.84, 38 | "pressure": 1000, 39 | "humidity": 93, 40 | "temp_min": 42.8, 41 | "temp_max": 57.2 42 | }, 43 | "wind": { 44 | "speed": 3.24, 45 | "deg": 270 46 | }, 47 | "clouds": { 48 | "all": 90 49 | }, 50 | "dt": 1416267540, 51 | "id": 5128581, 52 | "name": "New York", 53 | "cod": 200 54 | } -------------------------------------------------------------------------------- /archive/10-server-side/11-servi-file-uploads/form.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | Upload 4 | 5 | 6 |
    7 | 8 | 9 |
    10 | 11 | 12 | -------------------------------------------------------------------------------- /archive/10-server-side/11-servi-file-uploads/upload.js: -------------------------------------------------------------------------------- 1 | /* 2 | 3 | Adapted from: 4 | https://github.com/antiboredom/servi-ide/tree/master/examples/file-uploads 5 | */ 6 | var servi = require('servi'); 7 | var app = new servi(true); 8 | port(3003); 9 | start(); 10 | 11 | serveFiles('uploads'); 12 | 13 | route('/', form); 14 | function form(request){ 15 | request.serveFile('form.html'); 16 | } 17 | 18 | route('/upload', upload); 19 | function upload(request) { 20 | var file = request.files.file; 21 | uploadFile(file, "uploads"); 22 | request.respond(''); 23 | } -------------------------------------------------------------------------------- /archive/10-server-side/12-servi-blog-templates-db-uploads/public/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | font: 16px sans-serif; 3 | background-color: #eee; 4 | width: 600px; 5 | margin: auto; 6 | line-height: 1.4; 7 | } 8 | 9 | a { 10 | color: #ff0046; 11 | text-decoration: none; 12 | } 13 | 14 | h2 { 15 | padding:0; 16 | margin:0; 17 | } 18 | 19 | .entry { 20 | border-bottom: 1px dashed #ccc; 21 | padding: 20px 0; 22 | } 23 | 24 | .entry img { 25 | max-width: 600px; 26 | margin-bottom: 10px; 27 | } 28 | 29 | textarea, input { 30 | display: block; 31 | width: 100%; 32 | font: 16px sans-serif; 33 | padding: 5px; 34 | border: 1px solid #ccc; 35 | margin-bottom: 10px; 36 | } 37 | 38 | textarea { 39 | height: 200px; 40 | } 41 | 42 | input[type=submit] { 43 | background-color: 0; 44 | color: #fff; 45 | } 46 | 47 | input[type=file] { 48 | border: 0; 49 | } 50 | -------------------------------------------------------------------------------- /archive/10-server-side/12-servi-blog-templates-db-uploads/server.js: -------------------------------------------------------------------------------- 1 | /* 2 | 3 | Adapted from: 4 | https://github.com/antiboredom/servi-ide/tree/master/examples/blog 5 | 6 | */ 7 | var servi = require('servi'); 8 | var app = new servi(true); 9 | port(3002); 10 | start(); 11 | 12 | var database = useDatabase('blog'); 13 | serveFiles('public'); 14 | 15 | route('/', home); 16 | route('/new', newEntry); 17 | route('/entries/:id', showEntry); 18 | 19 | function home(request) { 20 | var data = database.find({}); 21 | data.sort({ date: -1 }); 22 | data.exec(function(err, entries){ 23 | request.render('templates/home.html', {entries: entries}); 24 | }); 25 | } 26 | 27 | function newEntry(request) { 28 | if (request.method == GET) { 29 | request.render('templates/form.html'); 30 | } 31 | 32 | else if (request.method == POST) { 33 | var image = request.files.image; 34 | uploadFile(image, "public/uploads"); 35 | 36 | var blogEntry = { 37 | content: request.fields.content, 38 | title: request.fields.title, 39 | date: new Date(), 40 | image: image.name 41 | } 42 | database.insert(blogEntry); 43 | request.redirect('/'); 44 | } 45 | } 46 | 47 | function showEntry(request) { 48 | var id = request.params.id; 49 | database.findOne({'_id': id}, function(err, theEntry){ 50 | request.render('templates/blogpost.html', {entry: theEntry}); 51 | }); 52 | } -------------------------------------------------------------------------------- /archive/10-server-side/12-servi-blog-templates-db-uploads/templates/.tmpscript: -------------------------------------------------------------------------------- 1 | var servi = require('/Users/sam/Dropbox/school/spring_2014/servi/app/servi.js');var app = new servi(); 2 | 3 | 4 | <% include head.html %> 5 | <% posts.forEach(function(post){ %> 6 |
    7 |

    <%= post.title %>

    8 |
    9 | <%= post.content %> 10 |
    11 |
    12 | <% }) %> 13 | <% include foot.html %> 14 | 15 | 16 | 17 | if (typeof run === 'function') app.defaultRoute(run);start(); -------------------------------------------------------------------------------- /archive/10-server-side/12-servi-blog-templates-db-uploads/templates/blogpost.html: -------------------------------------------------------------------------------- 1 | <% include head.html %> 2 |
    3 |

    <%= entry.title %>

    4 | <% if (entry.image) { %> 5 | 6 | <% } %> 7 |
    8 | <%= entry.content %> 9 |
    10 |
    11 | <% include foot.html %> 12 | -------------------------------------------------------------------------------- /archive/10-server-side/12-servi-blog-templates-db-uploads/templates/foot.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /archive/10-server-side/12-servi-blog-templates-db-uploads/templates/form.html: -------------------------------------------------------------------------------- 1 | <% include head.html %> 2 |
    3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 |
    11 | <% include foot.html %> 12 | -------------------------------------------------------------------------------- /archive/10-server-side/12-servi-blog-templates-db-uploads/templates/head.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | My Blog 5 | 6 | 7 |

    My Blog

    8 |

    New Entry

    9 | -------------------------------------------------------------------------------- /archive/10-server-side/12-servi-blog-templates-db-uploads/templates/home.html: -------------------------------------------------------------------------------- 1 | <% include head.html %> 2 | <% entries.forEach(function(entry){ %> 3 |
    4 |

    <%= entry.title %>

    5 | <% if (entry.image) { %> 6 | 7 | <% } %> 8 |
    9 | <%= entry.content %> 10 |
    11 |
    12 | <% }) %> 13 | <% include foot.html %> 14 | -------------------------------------------------------------------------------- /archive/10-server-side/readme.md: -------------------------------------------------------------------------------- 1 | The examples in this directory all use servi.js **without** the Servi IDE. 2 | 3 | See https://github.com/antiboredom/servi.js/wiki/Setting-up-a-servi.js-project-without-the-servi-editor -------------------------------------------------------------------------------- /docs/img/cyberduck_2files.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/robynitp/networkedmedia/3406f7744631d03e2ec72d0553cfe038eac9054e/docs/img/cyberduck_2files.png -------------------------------------------------------------------------------- /docs/img/cyberduck_connect.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/robynitp/networkedmedia/3406f7744631d03e2ec72d0553cfe038eac9054e/docs/img/cyberduck_connect.png -------------------------------------------------------------------------------- /docs/img/cyberduck_connected.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/robynitp/networkedmedia/3406f7744631d03e2ec72d0553cfe038eac9054e/docs/img/cyberduck_connected.png -------------------------------------------------------------------------------- /docs/img/cyberduck_node_modules.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/robynitp/networkedmedia/3406f7744631d03e2ec72d0553cfe038eac9054e/docs/img/cyberduck_node_modules.png -------------------------------------------------------------------------------- /docs/img/cyberduck_open_connection.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/robynitp/networkedmedia/3406f7744631d03e2ec72d0553cfe038eac9054e/docs/img/cyberduck_open_connection.png -------------------------------------------------------------------------------- /docs/img/digital_ocean_create_droplet.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/robynitp/networkedmedia/3406f7744631d03e2ec72d0553cfe038eac9054e/docs/img/digital_ocean_create_droplet.png -------------------------------------------------------------------------------- /docs/img/servi-browser.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/robynitp/networkedmedia/3406f7744631d03e2ec72d0553cfe038eac9054e/docs/img/servi-browser.png -------------------------------------------------------------------------------- /docs/img/servi-exported.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/robynitp/networkedmedia/3406f7744631d03e2ec72d0553cfe038eac9054e/docs/img/servi-exported.png -------------------------------------------------------------------------------- /docs/img/servi-file-server.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/robynitp/networkedmedia/3406f7744631d03e2ec72d0553cfe038eac9054e/docs/img/servi-file-server.png -------------------------------------------------------------------------------- /docs/img/servi-hello.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/robynitp/networkedmedia/3406f7744631d03e2ec72d0553cfe038eac9054e/docs/img/servi-hello.png -------------------------------------------------------------------------------- /docs/img/servi-other-page.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/robynitp/networkedmedia/3406f7744631d03e2ec72d0553cfe038eac9054e/docs/img/servi-other-page.png -------------------------------------------------------------------------------- /docs/img/servi-run.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/robynitp/networkedmedia/3406f7744631d03e2ec72d0553cfe038eac9054e/docs/img/servi-run.png -------------------------------------------------------------------------------- /docs/img/week1/html_table.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/robynitp/networkedmedia/3406f7744631d03e2ec72d0553cfe038eac9054e/docs/img/week1/html_table.png -------------------------------------------------------------------------------- /docs/img/week2/console_browser_elements.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/robynitp/networkedmedia/3406f7744631d03e2ec72d0553cfe038eac9054e/docs/img/week2/console_browser_elements.png -------------------------------------------------------------------------------- /docs/img/week2/console_detail.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/robynitp/networkedmedia/3406f7744631d03e2ec72d0553cfe038eac9054e/docs/img/week2/console_detail.png -------------------------------------------------------------------------------- /docs/img/week2/console_in_browser.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/robynitp/networkedmedia/3406f7744631d03e2ec72d0553cfe038eac9054e/docs/img/week2/console_in_browser.png -------------------------------------------------------------------------------- /docs/img/week2/openDevTools.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/robynitp/networkedmedia/3406f7744631d03e2ec72d0553cfe038eac9054e/docs/img/week2/openDevTools.png -------------------------------------------------------------------------------- /docs/img/week4/instagramAPI.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/robynitp/networkedmedia/3406f7744631d03e2ec72d0553cfe038eac9054e/docs/img/week4/instagramAPI.png -------------------------------------------------------------------------------- /docs/img/week4/instagramAPI_response.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/robynitp/networkedmedia/3406f7744631d03e2ec72d0553cfe038eac9054e/docs/img/week4/instagramAPI_response.png -------------------------------------------------------------------------------- /week1/01servi/00-serve-static-file/home.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Home 5 | 6 | 7 | 8 |

    Static Home Page

    9 |

    This is an HTML page served up with Servi.js

    10 | 11 | -------------------------------------------------------------------------------- /week1/01servi/00-serve-static-file/server.js: -------------------------------------------------------------------------------- 1 | // every servi application must have these 2 lines 2 | var servi = require('servi'); 3 | var app = new servi(true); 4 | 5 | // set the port (defaults to 3000 if you leave out this line) 6 | port(3001); // make sure "port()" line comes before "start()" 7 | 8 | // serve a static HTML file 9 | // notice the method name is serveFile(), not serveFileS() 10 | request.serveFile('home.html'); 11 | 12 | 13 | // start the server 14 | start(); 15 | -------------------------------------------------------------------------------- /week1/01servi/01-routing/faq.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | FAQ 5 | 6 | 7 | 8 |

    FAQ

    9 |

    Q: What is Servi?

    10 |

    A: servi.js is a JavaScript node.js microframework for creating web servers. It is inspired by Processing and p5.js.

    11 |
    12 |

    Q: Where do I find documentation?

    13 |

    A: For some Servi basics, see the servi.js github wiki

    14 |
    15 |

    Q: How do I do this in Servi?

    16 |

    A: For more info on how to do this assingment, see Using Servi in the Networked Media class wiki

    17 | 18 | -------------------------------------------------------------------------------- /week1/01servi/01-routing/server.js: -------------------------------------------------------------------------------- 1 | // every servi application must have these 2 lines 2 | var servi = require('servi'); 3 | var app = new servi(true); 4 | 5 | // set the port (defaults to 3000 if you leave out this line) 6 | port(3001); // make sure "port()" line comes before "start()" 7 | start(); 8 | // set up the routes 9 | route('/',showHome); 10 | route('/about',showAboutPage); 11 | route('/faq',viewFaq); 12 | 13 | function showHome(request){ 14 | // serve a simple string 15 | request.respond("This is the home page."); 16 | } 17 | 18 | function showAboutPage(request){ 19 | // build a string with some HTML in it 20 | var myHtmlString = "

    About Me!!!

    "; 21 | myHtmlString += "

    I am a person from earth.

    "; 22 | // serve the HTML string 23 | request.respond(myHtmlString); 24 | } 25 | 26 | function viewFaq(request){ 27 | // serve a static HTML file 28 | request.serveFile('faq.html'); 29 | } 30 | 31 | -------------------------------------------------------------------------------- /week1/02javascript/object.js: -------------------------------------------------------------------------------- 1 | // the object allColors has 3 properties, "red", "green", and "blue" 2 | // each property contains an object with 2 properties, "title" and "hexcode" 3 | var allColors = { 4 | red: { 5 | title: "Red as in Crimson", 6 | hexcode: "#ff0000" 7 | }, 8 | green: { 9 | title: "Green as in Kale", 10 | hexcode: "#00ff00" 11 | }, 12 | blue: { 13 | title: "Blue as in Sky", 14 | hexcode: "#0000ff" 15 | }, 16 | }; 17 | 18 | console.log("The object containing all the color objects:"); 19 | console.log(allColors); // outputs the entire object 20 | 21 | // when the name of the property is a string, use the dot (.) syntax 22 | console.log(allColors.blue); // outputs the object associated with the property "blue" 23 | 24 | // when the property name is the value of a variable, use square brackets, [] 25 | var color = "red"; 26 | 27 | var chosenColorObject = allColors[color]; 28 | 29 | console.log("The object with the property name, " + color + ":"); 30 | console.log(chosenColorObject); // outputs the object associated with the property "red" 31 | -------------------------------------------------------------------------------- /week2/01-servi/serve-files-from-directory/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Hello World 5 | 6 | 7 | 8 |

    I am HTML.

    9 | 10 | -------------------------------------------------------------------------------- /week2/01-servi/serve-files-from-directory/server.js: -------------------------------------------------------------------------------- 1 | /* 2 | 3 | This script allows you to set up a directory (aka, folder) where servi will look for static files. 4 | This means you don't have to serve each file individually, as in: 5 | request.serveFile('home.html'); 6 | 7 | Here, it will automatically serve any file that is: 8 | 1. Contained in the folder you specify 9 | 2. Requested via the URL. 10 | 11 | For example, if you tell Servi to use the directory called "public_html", 12 | and inside it, you have a filed called "bio.html", 13 | when someone visits YOUR_IP_ADDRESS/bio.html, the file bio.html will be displayed. 14 | 15 | Notice that you don't need to put the name of the directory in the URL. 16 | Servi handles that part for you. 17 | 18 | NICE TO KNOW: Servi is set up so that if you include a file called "index.html", 19 | it will show up automatically as your home page. 20 | 21 | */ 22 | 23 | // every servi application must have these 2 lines 24 | var servi = require('servi'); 25 | var app = new servi(true); 26 | 27 | // set the port (defaults to 3000 if you leave out this line) 28 | port(3222); 29 | 30 | 31 | 32 | // serve files from a directory named "public" 33 | serveFiles("public"); 34 | 35 | /* NOTE: 36 | Make sure you have a directory called "public" 37 | that resides on the same level as your server.js file 38 | and that "public" has at least one HTML file in it. 39 | 40 | (fwiw, you don't have to call it "public", just make sure it matches the folder name) 41 | */ 42 | 43 | // start it! 44 | start(); 45 | 46 | -------------------------------------------------------------------------------- /week2/02-html-css/README.md: -------------------------------------------------------------------------------- 1 | ## HTML and CSS Examples 2 | 3 | * _basic.html_ Skeleton HTML page. Handy to use as a template when you start a new page. 4 | 5 | * _index.html_ Simple HTML page with a few tags, including a link (``) tag. 6 | 7 | * _html-css-embedded.html_ The CSS is in the HTML file itself, within the ` 13 | 44 | 45 | 46 | Enter your name 47 |
    48 | 49 |
      50 | 51 | 52 | -------------------------------------------------------------------------------- /week3/06listeners/button_listener.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Button Listener 5 | 6 | 23 | 24 | 25 | 26 |
      27 | 28 | 29 | 30 | -------------------------------------------------------------------------------- /week3/06listeners/keyboard_listener.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Keyboard Listener 5 | 20 | 71 | 72 | 73 |
      74 |

      use the keyboard arrows to move me

      75 |
      76 | 77 | 78 | -------------------------------------------------------------------------------- /week3/06listeners/mouse_listener.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Mouse Listener 5 | 20 | 38 | 39 | 40 |
      41 |

      Click the mouse to re-position the box

      42 |
      43 | 44 | 45 | -------------------------------------------------------------------------------- /week3/07game_example/css/style.css: -------------------------------------------------------------------------------- 1 | #gameboard{ 2 | width: 1150px; 3 | margin: auto; 4 | } 5 | .gamecard{ 6 | border:1px solid #333; 7 | background-color: pink; 8 | width:250px; 9 | height:250px; 10 | margin: 10px; 11 | float:left; 12 | } 13 | /* all images inside gamecard classes */ 14 | .gamecard img{ 15 | display:none; 16 | } 17 | h1{ 18 | text-align: center; 19 | 20 | } -------------------------------------------------------------------------------- /week3/07game_example/images/boat.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/robynitp/networkedmedia/3406f7744631d03e2ec72d0553cfe038eac9054e/week3/07game_example/images/boat.png -------------------------------------------------------------------------------- /week3/07game_example/images/cat.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/robynitp/networkedmedia/3406f7744631d03e2ec72d0553cfe038eac9054e/week3/07game_example/images/cat.png -------------------------------------------------------------------------------- /week3/07game_example/images/drink.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/robynitp/networkedmedia/3406f7744631d03e2ec72d0553cfe038eac9054e/week3/07game_example/images/drink.png -------------------------------------------------------------------------------- /week3/07game_example/images/shoes.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/robynitp/networkedmedia/3406f7744631d03e2ec72d0553cfe038eac9054e/week3/07game_example/images/shoes.png -------------------------------------------------------------------------------- /week3/07game_example/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Matching Game 5 | 6 | 7 | 8 | 9 | 10 |

      Turn over 2 cards at a time to find matches

      11 |
      12 | 13 |
      14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /week4/00-canvas/README.md: -------------------------------------------------------------------------------- 1 | If you're curious as to what `` looks like without p5.js, take a look at this demo. Lots of lines of code to make a few simple shapes! -------------------------------------------------------------------------------- /week4/00-canvas/canvas-basic.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Canvas Example 6 | 11 | 12 | 13 | 14 | 15 | 28 | 29 | 30 | -------------------------------------------------------------------------------- /week4/01-p5js/01-empty_example/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /week4/01-p5js/01-empty_example/sketch.js: -------------------------------------------------------------------------------- 1 | function setup() { 2 | // put setup code here 3 | } 4 | 5 | function draw() { 6 | // put drawing code here 7 | } -------------------------------------------------------------------------------- /week4/01-p5js/02-simple_example/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /week4/01-p5js/02-simple_example/sketch.js: -------------------------------------------------------------------------------- 1 | // Runs once at the start 2 | function setup() { 3 | 4 | console.log('setup.'); 5 | createCanvas(600, 400); 6 | 7 | } 8 | 9 | // Runs in a loop, over and over again 10 | function draw() { 11 | 12 | console.log('draw!'); 13 | 14 | // background 15 | background(42, 169, 217); 16 | 17 | // ellipse 18 | fill(242, 228, 21); 19 | ellipse(100,100,100,100); 20 | 21 | //rectangle 22 | fill(162, 217, 39); 23 | rect(300,100,150,150); 24 | 25 | } -------------------------------------------------------------------------------- /week4/01-p5js/03-shapes_array/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /week4/01-p5js/03-shapes_array/sketch.js: -------------------------------------------------------------------------------- 1 | // from Lauren McCarthy, https://github.com/lmccart/itp-networked-media 2 | // Adapted from Getting Started with Processing 3 | 4 | 5 | var x = []; 6 | 7 | function setup() { 8 | 9 | createCanvas(600, 400); 10 | noStroke(); 11 | fill(255, 152, 0); 12 | 13 | for (var i=0; i<100; i++) { 14 | x.push(random(0, width)); 15 | //x[i] = random(0, width); // works the same 16 | } 17 | } 18 | 19 | function draw() { 20 | 21 | background(126, 138, 162); 22 | 23 | for (var i=0; i width + 5) { 27 | x[i] = -5; 28 | } 29 | 30 | ellipse (x[i], i*5, 10, 10); 31 | } 32 | 33 | } 34 | -------------------------------------------------------------------------------- /week4/01-p5js/04-images_array/burger.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/robynitp/networkedmedia/3406f7744631d03e2ec72d0553cfe038eac9054e/week4/01-p5js/04-images_array/burger.png -------------------------------------------------------------------------------- /week4/01-p5js/04-images_array/chickens.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/robynitp/networkedmedia/3406f7744631d03e2ec72d0553cfe038eac9054e/week4/01-p5js/04-images_array/chickens.jpg -------------------------------------------------------------------------------- /week4/01-p5js/04-images_array/fish.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/robynitp/networkedmedia/3406f7744631d03e2ec72d0553cfe038eac9054e/week4/01-p5js/04-images_array/fish.png -------------------------------------------------------------------------------- /week4/01-p5js/04-images_array/flower.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/robynitp/networkedmedia/3406f7744631d03e2ec72d0553cfe038eac9054e/week4/01-p5js/04-images_array/flower.png -------------------------------------------------------------------------------- /week4/01-p5js/04-images_array/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /week4/01-p5js/04-images_array/sketch.js: -------------------------------------------------------------------------------- 1 | // from Lauren McCarthy, https://github.com/lmccart/itp-networked-media 2 | // Using a for loop to initialize values. 3 | // Using a for loop to draw. 4 | // Adapted from Getting Started with Processing. 5 | 6 | // ** NOTE: You will need to run this from a server. It will not work locally. 7 | 8 | var images = []; 9 | var curImage = 0; 10 | 11 | function setup() { 12 | 13 | createCanvas(500, 500); 14 | imageMode(CENTER); 15 | 16 | // Add some more images to the array 17 | 18 | var fish = loadImage("fish.png"); 19 | 20 | images.push(fish); 21 | 22 | var burger = loadImage("burger.png"); 23 | images.push(burger); 24 | 25 | images.push(loadImage("chickens.jpg")); 26 | 27 | } 28 | 29 | function draw() { 30 | 31 | background(120, 204, 50); 32 | 33 | // Draw image 34 | image(images[curImage], width/2, height/2, images[curImage].width, images[curImage].height); 35 | 36 | }; 37 | 38 | 39 | function mousePressed() { 40 | 41 | // Increment curImage 42 | curImage = curImage + 1; 43 | 44 | // Make sure curImage is still in range, loop around if necessary 45 | if (curImage == images.length) { 46 | curImage = 0; 47 | print("curimage "+curImage); 48 | } 49 | }; 50 | -------------------------------------------------------------------------------- /week4/01-p5js/05-objects_array/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /week4/01-p5js/05-objects_array/sketch.js: -------------------------------------------------------------------------------- 1 | // from Lauren McCarthy, https://github.com/lmccart/itp-networked-media 2 | 3 | var bugs = []; // array of Jitter objects 4 | 5 | function setup() { 6 | createCanvas(710, 400); 7 | // Create objects 8 | for (var i=0; i<50; i++) { 9 | bugs.push(new Jitter()); 10 | } 11 | } 12 | 13 | function draw() { 14 | background(50, 89, 100); 15 | for (var i=0; i 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 |
      canvas div
      10 | 11 |
      another div
      12 | 13 | -------------------------------------------------------------------------------- /week4/02-p5_dom/00_canvas_parent/sketch.js: -------------------------------------------------------------------------------- 1 | // ITP Networked Media, Fall 2014 2 | // DOM Manipulation 3 | // https://github.com/shiffman/itp-networked-media 4 | // Daniel Shiffman 5 | 6 | // These are adapted from https://github.com/lmccart/itp-creative-js 7 | 8 | function setup() { 9 | // Here we can store a reference to the canvas DOM element 10 | var canvas = createCanvas(300, 200); 11 | // And do things like place it in a div by its id (see the HTML file) 12 | canvas.parent("canvasContainer"); 13 | } 14 | 15 | // A simple animation 16 | function draw() { 17 | background(51); 18 | stroke(255); 19 | line(frameCount % width, 0, frameCount % width, height); 20 | } -------------------------------------------------------------------------------- /week4/02-p5_dom/01_position_canvas/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | The canvas below is absolute positioned. 10 | 11 | -------------------------------------------------------------------------------- /week4/02-p5_dom/01_position_canvas/sketch.js: -------------------------------------------------------------------------------- 1 | // ITP Networked Media, Fall 2014 2 | // DOM Manipulation 3 | // https://github.com/shiffman/itp-networked-media 4 | // Daniel Shiffman 5 | 6 | // These are adapted from https://github.com/lmccart/itp-creative-js 7 | 8 | function setup() { 9 | // Here we can store a reference to the canvas DOM element 10 | var canvas = createCanvas(600, 400); 11 | // And do things like give it an absolute position on the page 12 | canvas.position(50, 50); 13 | } 14 | 15 | // A simple animation 16 | function draw() { 17 | background(51); 18 | stroke(255); 19 | line(frameCount % width, 0, frameCount % width, height); 20 | } -------------------------------------------------------------------------------- /week4/02-p5_dom/03_add_p_element/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /week4/02-p5_dom/03_add_p_element/sketch.js: -------------------------------------------------------------------------------- 1 | // ITP Networked Media, Fall 2014 2 | // DOM Manipulation 3 | // https://github.com/shiffman/itp-networked-media 4 | // Daniel Shiffman 5 | 6 | // These are adapted from https://github.com/lmccart/itp-creative-js 7 | 8 | function setup() { 9 | 10 | // In addition to making a canvas we can make other DOM elements 11 | // Like here is a paragraph element:

      This is a paragraph element.

      12 | // By default these elements are appended to the 13 | // Try reversing these two lines of code and see the difference 14 | var text = createP("This is a paragraph element."); 15 | var canvas = createCanvas(300, 200); 16 | 17 | // Here we call methods of each element to set the position and id, try changing these values. 18 | // Use the inspector to look at the HTML generated from this code when you load the sketch in your browser. 19 | text.id("apple"); 20 | // If we wanted absolute positioning, if not the elements just "float" in the order they are created 21 | // canvas.position(300, 50); 22 | canvas.id("pear"); 23 | } 24 | 25 | // A simple animation 26 | function draw() { 27 | background(51); 28 | stroke(255); 29 | line(frameCount % width, 0, frameCount % width, height); 30 | } 31 | -------------------------------------------------------------------------------- /week4/02-p5_dom/04_parent_child/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /week4/02-p5_dom/04_parent_child/sketch.js: -------------------------------------------------------------------------------- 1 | // ITP Networked Media, Fall 2014 2 | // DOM Manipulation 3 | // https://github.com/shiffman/itp-networked-media 4 | // Daniel Shiffman 5 | 6 | // These are adapted from https://github.com/lmccart/itp-creative-js 7 | 8 | function setup() { 9 | 10 | // We can put other HTML stuff inside our DOM elements 11 | var text = createP("Here is some text and       this is an HTML link! "); 12 | 13 | // But p5 also has some functions to create specific elements like a link 14 | var link = createA("http://i.imgur.com/WXaUlrK.gif","We can also create a link this way.") 15 | 16 | var canvas = createCanvas(300, 200); 17 | 18 | // We can put the link element inside the paragraph one with child() 19 | text.child(link); 20 | // link.parent(child); // this is the equivalent 21 | } 22 | 23 | 24 | 25 | // A simple animation 26 | function draw() { 27 | background(51); 28 | stroke(255); 29 | line(frameCount % width, 0, frameCount % width, height); 30 | } 31 | 32 | -------------------------------------------------------------------------------- /week4/02-p5_dom/05_style_functions/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /week4/02-p5_dom/05_style_functions/sketch.js: -------------------------------------------------------------------------------- 1 | // ITP Networked Media, Fall 2014 2 | // DOM Manipulation 3 | // https://github.com/shiffman/itp-networked-media 4 | // Daniel Shiffman 5 | 6 | // These are adapted from https://github.com/lmccart/itp-creative-js 7 | 8 | function setup() { 9 | 10 | // If we don't want a canvas (p5 creates one by default even if you don't ask) 11 | noCanvas(); 12 | 13 | // Make a paragraph element 14 | var text = createP("This is some stuff in a paragraph that is dynamically styled with style()"); 15 | 16 | // With the style method we can pass in CSS directly in our code 17 | text.style("font-family", "monospace"); 18 | text.style("background-color", "#FF69B4"); 19 | text.style("color", "#FFFFFF"); 20 | text.style("font-size", "18pt"); 21 | text.style("padding", "10px"); 22 | } 23 | -------------------------------------------------------------------------------- /week4/02-p5_dom/06_style_css/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /week4/02-p5_dom/06_style_css/sketch.js: -------------------------------------------------------------------------------- 1 | // ITP Networked Media, Fall 2014 2 | // DOM Manipulation 3 | // https://github.com/shiffman/itp-networked-media 4 | // Daniel Shiffman 5 | 6 | // These are adapted from https://github.com/lmccart/itp-creative-js 7 | 8 | function setup() { 9 | noCanvas(); 10 | 11 | // Make a paragraph element 12 | var text = createP("This is some stuff in a paragraph that pulls its style from CSS via an id set by p5."); 13 | 14 | // Set its id (for which the styles are specified in style.css) 15 | text.id("apple"); 16 | } 17 | -------------------------------------------------------------------------------- /week4/02-p5_dom/06_style_css/style.css: -------------------------------------------------------------------------------- 1 | #apple { 2 | font-family: monospace; 3 | background-color: #FF69B4; 4 | color: #FFFFFF; 5 | font-size: 18pt; 6 | padding: 10px; 7 | } -------------------------------------------------------------------------------- /week4/02-p5_dom/07_setting_class/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /week4/02-p5_dom/07_setting_class/sketch.js: -------------------------------------------------------------------------------- 1 | // ITP Networked Media, Fall 2014 2 | // DOM Manipulation 3 | // https://github.com/shiffman/itp-networked-media 4 | // Daniel Shiffman 5 | 6 | // These are adapted from https://github.com/lmccart/itp-creative-js 7 | 8 | // Three elements 9 | var elt0; 10 | var elt1; 11 | var elt2; 12 | 13 | function setup() { 14 | 15 | noCanvas(); 16 | 17 | // Three floating elements 18 | elt0 = createDiv("Here's a div."); 19 | elt1 = createDiv("Here's another div."); 20 | elt2 = createDiv("Oh and even another one!"); 21 | 22 | // Let's give the first two elements class donkey, and the third class yogurt. 23 | elt0.class('donkey'); 24 | elt1.class('donkey'); 25 | elt2.class('yogurt'); 26 | }; 27 | 28 | 29 | 30 | 31 | 32 | 33 | -------------------------------------------------------------------------------- /week4/02-p5_dom/07_setting_class/style.css: -------------------------------------------------------------------------------- 1 | .donkey { 2 | font-family: monospace; 3 | background-color: #FF69B4; 4 | color: #FFFFFF; 5 | font-size: 18pt; 6 | padding: 10px; 7 | margin: 20px; 8 | } 9 | 10 | .yogurt { 11 | font-family: monospace; 12 | font-size: 18pt; 13 | } 14 | 15 | /* We're about to deal with events, but here's a quick way to get a mouse rollover with CSS */ 16 | /* this is mostly used with a href */ 17 | .yogurt:hover { 18 | margin: 20px; 19 | background-color: #FF69B4; 20 | } -------------------------------------------------------------------------------- /week4/02-p5_dom/08_mousepressed/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /week4/02-p5_dom/08_mousepressed/sketch.js: -------------------------------------------------------------------------------- 1 | // ITP Networked Media, Fall 2014 2 | // DOM Manipulation 3 | // https://github.com/shiffman/itp-networked-media 4 | // Daniel Shiffman 5 | 6 | // These are adapted from https://github.com/lmccart/itp-creative-js 7 | 8 | // Using p5 DOM element mouse listeners, mousePressed. 9 | 10 | // Global variable for background color 11 | var bg; 12 | 13 | function setup() { 14 | createCanvas(400, 400); 15 | bg = color(51); 16 | 17 | var link = createA("#","Click me"); 18 | // The function changeBG becomes a callback for when the mouse is pressed 19 | // On this DOM element (different than mousePressed() anywhere on page) 20 | link.mousePressed(changeBG); 21 | 22 | } 23 | 24 | function draw() { 25 | background(bg); 26 | } 27 | 28 | // This function is triggered when the mouse is pressed on the link 29 | function changeBG() { 30 | bg = color(random(255)); 31 | } 32 | -------------------------------------------------------------------------------- /week4/02-p5_dom/09_mouseover_mouseout/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /week4/02-p5_dom/09_mouseover_mouseout/rainbow.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/robynitp/networkedmedia/3406f7744631d03e2ec72d0553cfe038eac9054e/week4/02-p5_dom/09_mouseover_mouseout/rainbow.png -------------------------------------------------------------------------------- /week4/02-p5_dom/09_mouseover_mouseout/sketch.js: -------------------------------------------------------------------------------- 1 | // ITP Networked Media, Fall 2014 2 | // DOM Manipulation 3 | // https://github.com/shiffman/itp-networked-media 4 | // Daniel Shiffman 5 | 6 | // These are adapted from https://github.com/lmccart/itp-creative-js 7 | 8 | // Using p5 DOM element mouse listeners, mouseOver and mouseOut. 9 | 10 | // We define the variables outside of setup so we can access them from anywhere in the sketch. 11 | var img; 12 | var canvas; 13 | 14 | 15 | function setup() { 16 | 17 | createP("The image appears only when the mouse is over the canvas element.") 18 | 19 | // Make the canvas 20 | canvas = createCanvas(320, 240); 21 | // Make an HTML image element (different from loadImage()!) 22 | img = createImg("rainbow.png"); 23 | 24 | // Here we call methods of DOM Image element to set the size and style. 25 | // Note the use of "AUTO" to keep the aspect ration 26 | img.size(200, AUTO); 27 | img.style("padding","10px"); 28 | 29 | // Attach listeners for mouse events related to canvas 30 | canvas.mouseOver(uniShow); 31 | canvas.mouseOut(uniHide); 32 | }; 33 | 34 | 35 | // A simple animation 36 | function draw() { 37 | background(51); 38 | stroke(255); 39 | line(frameCount % width, 0, frameCount % width, height); 40 | } 41 | 42 | // Create functions for hiding and showing uni image. 43 | // These will be hooked into mouse events related to canvas above. 44 | function uniHide() { 45 | img.hide(); 46 | } 47 | 48 | function uniShow() { 49 | img.show(); 50 | } 51 | 52 | -------------------------------------------------------------------------------- /week4/02-p5_dom/10_getElement/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 27 | 28 | 29 | 30 |

      Press 'a', 'b', or 'p' to hide an element.
      Press space to show all elements.

      31 |

      apple

      32 |

      banana

      33 |

      pear

      34 | 35 | 36 | -------------------------------------------------------------------------------- /week4/02-p5_dom/10_getElement/sketch.js: -------------------------------------------------------------------------------- 1 | // ITP Networked Media, Fall 2014 2 | // DOM Manipulation 3 | // https://github.com/shiffman/itp-networked-media 4 | // Daniel Shiffman 5 | 6 | // These are adapted from https://github.com/lmccart/itp-creative-js 7 | 8 | // Three variables to hold our DOM elements 9 | var apple; 10 | var banana; 11 | var pear; 12 | 13 | function setup() { 14 | noCanvas(); 15 | // Instead of making the elements here we can just grab them 16 | // via their id (see index.html) 17 | apple = getElement('apple'); 18 | banana = getElement('banana'); 19 | pear = getElement('pear'); 20 | } 21 | 22 | // Hide and show them depending on what key was pressed 23 | function keyPressed() { 24 | if (key == 'A') { 25 | apple.hide(); 26 | } else if (key == 'B') { 27 | banana.hide(); 28 | } else if (key == 'P') { 29 | pear.hide(); 30 | } else if (key == ' ') { 31 | apple.show(); 32 | banana.show(); 33 | pear.show(); 34 | } 35 | } 36 | 37 | -------------------------------------------------------------------------------- /week4/02-p5_dom/11_getElements/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 18 | 19 | 20 | 21 | 22 |

      Move the apples around.

      23 |

      1 apple

      24 |

      2 apples

      25 |

      3 apples

      26 | 27 | 28 | -------------------------------------------------------------------------------- /week4/02-p5_dom/11_getElements/sketch.js: -------------------------------------------------------------------------------- 1 | // ITP Networked Media, Fall 2014 2 | // DOM Manipulation 3 | // https://github.com/shiffman/itp-networked-media 4 | // Daniel Shiffman 5 | 6 | // These are adapted from https://github.com/lmccart/itp-creative-js 7 | // Creating other HTML elements, adding style. 8 | 9 | function setup() { 10 | noCanvas(); 11 | 12 | var link = getElement("clicky"); 13 | link.mousePressed(shuffle); 14 | } 15 | 16 | 17 | function shuffle() { 18 | // Get an array of elements of the same class 19 | var apples = getElements("apple"); 20 | // Do something to all of them 21 | for (var i=0; i 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /week4/02-p5_dom/13_animateDOM/sketch.js: -------------------------------------------------------------------------------- 1 | // ITP Networked Media, Fall 2014 2 | // DOM Manipulation 3 | // https://github.com/shiffman/itp-networked-media 4 | // Daniel Shiffman 5 | 6 | // Let's look at something that resembles a Processing sketch 7 | // but animations a DOM element instead 8 | 9 | // This is our DOM element 10 | var words; 11 | 12 | // Variables to move it around 13 | var x; 14 | var y; 15 | var xspeed = 5; 16 | var yspeed = -2; 17 | 18 | // Size 19 | var fsize = 32; 20 | 21 | var w = 280; 22 | var h = 100; 23 | 24 | function setup() { 25 | noCanvas(); 26 | 27 | // Make a DIV with some styling 28 | words = createDiv("Bouncing Shaking Words"); 29 | words.style("padding","10px"); 30 | words.style("background-color","pink"); 31 | words.style("text-align","center"); 32 | words.style("vertical-align","center"); 33 | words.size(w,h); 34 | words.style("line-height","100px"); 35 | 36 | // Start it in the middle 37 | x = windowWidth/2; 38 | y = windowHeight/2; 39 | 40 | } 41 | 42 | function draw() { 43 | 44 | // Set position and style 45 | words.position(x,y); 46 | words.style("font-size",fsize); 47 | 48 | // Manipulate the size 49 | fsize = floor(fsize + random(-2,2)); 50 | fsize = constrain(fsize,24,36); 51 | 52 | // Bouncing ball algorithm! 53 | x += xspeed; 54 | y += yspeed; 55 | 56 | if (x > windowWidth - w || x < 0) { 57 | xspeed *= -1; 58 | } 59 | if (y > windowHeight - h || y < 0) { 60 | yspeed *= -1; 61 | } 62 | } 63 | 64 | 65 | -------------------------------------------------------------------------------- /week4/02-p5_dom/14_button_slider/ball.js: -------------------------------------------------------------------------------- 1 | // ITP Networked Media, Fall 2014 2 | // DOM Manipulation 3 | // https://github.com/shiffman/itp-networked-media 4 | // Daniel Shiffman 5 | 6 | function Ball(tempX, tempY, tempW) { 7 | this.x = tempX; 8 | this.y = tempY; 9 | this.w = tempW; 10 | this.speed = 0; 11 | 12 | this.gravity = function() { 13 | // Add gravity to speed 14 | this.speed = this.speed + gravity; 15 | } 16 | 17 | this.move = function() { 18 | // Add speed to y location 19 | this.y = this.y + this.speed; 20 | // If square reaches the bottom 21 | // Reverse speed 22 | if (this.y > height) { 23 | this.speed = this.speed * -0.95; 24 | this.y = height; 25 | } 26 | } 27 | 28 | this.display = function() { 29 | // Display the circle 30 | fill(255, 100); 31 | stroke(255); 32 | ellipse(this.x,this.y,this.w,this.w); 33 | } 34 | } 35 | -------------------------------------------------------------------------------- /week4/02-p5_dom/14_button_slider/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /week4/02-p5_dom/14_button_slider/sketch.js: -------------------------------------------------------------------------------- 1 | // ITP Networked Media, Fall 2014 2 | // DOM Manipulation 3 | // https://github.com/shiffman/itp-networked-media 4 | // Daniel Shiffman 5 | 6 | // Let's look at a simple sketch that adds some buttons 7 | // and sliders! 8 | 9 | var balls = []; // We start with an empty array 10 | var gravity = 0.1; 11 | 12 | // All of the DOM elements we need 13 | var counter; 14 | var button; 15 | var slider; 16 | var sliderVal; 17 | 18 | function setup() { 19 | createCanvas(640,360); 20 | 21 | // Dom elements 22 | counter = createP(""); 23 | 24 | // A button 25 | button = createButton("Add a new ball."); 26 | // Attach the button to a function! 27 | button.mousePressed(newBall); 28 | button.position(20,340); 29 | 30 | // A slider 31 | // Min and max values and where to start 32 | slider = createSlider(10,100,50); 33 | // A dom element to show us the value 34 | sliderVal = createDiv(""); 35 | 36 | // Initialize ball index 0 37 | balls.push(new Ball(50,0,24)); 38 | 39 | } 40 | 41 | function draw() { 42 | background(51); 43 | 44 | // Update and display all balls 45 | for (var i = 0; i < balls.length; i ++ ) { // Whatever the length of that array, update and display all of the objects. 46 | balls[i].gravity(); 47 | balls[i].move(); 48 | balls[i].display(); 49 | } 50 | 51 | // Updating the DOM elements that show us info: 52 | counter.html("Total objects: " + balls.length); 53 | sliderVal.html("Size: " + slider.value()); 54 | } 55 | 56 | function newBall() { 57 | // A new ball object 58 | var b = new Ball(random(width),random(height),slider.value()); // Make a new object at the mouse location. 59 | // Here, the function push() adds an element to the end of the array. 60 | balls.push(b); 61 | } 62 | -------------------------------------------------------------------------------- /week4/02-p5_dom/14a_canvas_p5_dom/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 |

      Resize the box

      12 |
      13 |
      14 |
      15 | 16 | 17 | -------------------------------------------------------------------------------- /week4/02-p5_dom/14a_canvas_p5_dom/sketch.js: -------------------------------------------------------------------------------- 1 | /* 2 | --------------- 3 | jsfiddle version: http://jsfiddle.net/rover/0r7ydo1s/ 4 | --------------- 5 | */ 6 | var canvas; 7 | var sliderElement; 8 | // canvas w x h 9 | var canvasW = 600; 10 | var canvasH = 400; 11 | 12 | function setup() { 13 | 14 | canvas = createCanvas(canvasW,canvasH); 15 | // put the canvas in the
      with id "canvas-container" (see html) 16 | canvas.parent('canvas-container'); 17 | // createSlider(lowValue,highValue,width) 18 | sliderElement = createSlider(10,canvasW - 20,canvasW/4); 19 | sliderElement.size(canvasW - 20); 20 | // put the slider in the
      with id "slider-container" 21 | sliderElement.parent('slider-container'); 22 | } 23 | 24 | 25 | function draw() { 26 | 27 | console.log('draw!'); 28 | 29 | // background 30 | background(42, 169, 217); 31 | 32 | sliderValue = sliderElement.value(); 33 | //rectangle 34 | fill(162, 217, 39); 35 | rect(10,100,sliderValue,150); 36 | 37 | } -------------------------------------------------------------------------------- /week4/02-p5_dom/14a_canvas_p5_dom/style.css: -------------------------------------------------------------------------------- 1 | body{ 2 | padding: 0 10px; 3 | margin:0; 4 | } 5 | #canvas-container{ 6 | border:1px solid #333; 7 | } 8 | li{ 9 | background-color: #453243; 10 | } -------------------------------------------------------------------------------- /week4/02-p5_dom/15_wordscrambler/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 |
      9 |

      Please enter some text:

      10 |

      11 |

      12 |
      13 | 14 | -------------------------------------------------------------------------------- /week4/02-p5_dom/15_wordscrambler/sketch.js: -------------------------------------------------------------------------------- 1 | // ITP Networked Media, Fall 2014 2 | // DOM Manipulation 3 | // https://github.com/shiffman/itp-networked-media 4 | // Daniel Shiffman 5 | 6 | // Let's look an example that messes with user input text 7 | // A ton more here! https://github.com/shiffman/Programming-from-A-to-Z-F14 8 | 9 | // The scrambled text 10 | var scrambled = ''; 11 | 12 | // The user input 13 | var input; 14 | 15 | function setup() { 16 | noCanvas(); 17 | 18 | // Grab the text field 19 | input = getElement('input'); 20 | 21 | // A Grab the button 22 | var go = getElement('button'); 23 | // Set up a function to handle when the button is pressed 24 | go.mousePressed(generate); 25 | 26 | // A paragraph element for the scrambled text 27 | scrambled = getElement('scrambled'); 28 | } 29 | 30 | function generate() { 31 | // Clear the scrambled text 32 | var scrambledtext = ''; 33 | 34 | // What has the user entered? 35 | var text = input.value(); 36 | // Check to see if they entered something 37 | var len = text.length; 38 | if (text.length === 0) { 39 | alert('Enter something!'); 40 | } else { 41 | // If they did, scramble up the text using string parsing 42 | for (var i = 0; i < len; i++) { 43 | var which = floor(random(text.length)); 44 | scrambledtext += text.charAt(which); 45 | // Remove what was already used 46 | text = text.substring(0,which) + text.substring(which+1,text.length); 47 | } 48 | // Update the result 49 | scrambled.html(scrambledtext); 50 | } 51 | } 52 | -------------------------------------------------------------------------------- /week4/02-p5_dom/README.md: -------------------------------------------------------------------------------- 1 | p5 dom examples from Lauren McCarthy: https://github.com/lmccart/itp-creative-js 2 | 3 | https://github.com/lmccart/itp-creative-js/tree/master/week3/04_dom_p5 -------------------------------------------------------------------------------- /week5/00-json/00-javascript-object.js: -------------------------------------------------------------------------------- 1 | var allColors = { 2 | red: { 3 | title: "Red as in Crimson", 4 | hexcode: "#ff0000" 5 | }, 6 | green: { 7 | title: "Green as in Kale", 8 | hexcode: "#00ff00" 9 | }, 10 | blue: { 11 | title: "Blue as in Sky", 12 | hexcode: "#0000ff" 13 | }, 14 | }; 15 | 16 | console.log("The object containing all the color objects:"); 17 | console.log(allColors); 18 | 19 | var color = "red"; 20 | 21 | var chosenColorObject = allColors[color]; 22 | 23 | console.log("The object with the property name, " + color + ":"); 24 | console.log(chosenColorObject); -------------------------------------------------------------------------------- /week5/00-json/common_names.json: -------------------------------------------------------------------------------- 1 | { 2 | "last_names":[ 3 | "Smith", 4 | "Johnson", 5 | "Williams", 6 | "Jones", 7 | "Brown", 8 | "Davis", 9 | "Miller", 10 | "Wilson", 11 | "Moore", 12 | "Taylor", 13 | "Anderson", 14 | "Thomas", 15 | "Jackson", 16 | "White", 17 | "Harris", 18 | "Martin", 19 | "Thompson", 20 | "Garcia", 21 | "Martinez", 22 | "Robinson", 23 | "Clark", 24 | "Rodriguez", 25 | "Lewis", 26 | "Lee", 27 | "Walker", 28 | "Hall" 29 | ], 30 | "traditionally_male_names":[ 31 | "James", 32 | "Steven", 33 | "Robert", 34 | "Michael", 35 | "William", 36 | "David", 37 | "Richard", 38 | "Charles", 39 | "Joseph", 40 | "Thomas", 41 | "Christopher", 42 | "Daniel", 43 | "Paul", 44 | "Mark", 45 | "Donald", 46 | "George", 47 | "Kenneth", 48 | "John", 49 | "Edward", 50 | "Brian", 51 | "Ronald", 52 | "Anthony", 53 | "Kevin", 54 | "Jason", 55 | "Matthew", 56 | "Gary" 57 | ], 58 | "traditionally_female_names":[ 59 | "Mary", 60 | "Patricia", 61 | "Linda", 62 | "Barbara", 63 | "Elizabeth", 64 | "Jennifer", 65 | "Maria", 66 | "Susan", 67 | "Margaret", 68 | "Dorothy", 69 | "Lisa", 70 | "Nancy", 71 | "Karen", 72 | "Betty", 73 | "Helen", 74 | "Sandra", 75 | "Donna", 76 | "Carol", 77 | "Ruth", 78 | "Sharon", 79 | "Michelle", 80 | "Laura", 81 | "Sarah", 82 | "Kimberly", 83 | "Deborah", 84 | "Jessica" 85 | ] 86 | } -------------------------------------------------------------------------------- /week5/00-json/movie.json: -------------------------------------------------------------------------------- 1 | { 2 | "Title": "The Graduate", 3 | "Year": "1967", 4 | "Rated": "Approved", 5 | "Released": "22 Dec 1967", 6 | "Runtime": "106 min", 7 | "Genre": [ 8 | "Comedy", 9 | "Drama", 10 | "Romance" 11 | ], 12 | "Director": "Mike Nichols", 13 | "Writers": [ 14 | "Calder Willingham (screenplay)", 15 | "Buck Henry (screenplay)", 16 | "Charles Webb (based on the novel by)" 17 | ], 18 | "Actors": [ 19 | "Anne Bancroft", 20 | "Dustin Hoffman", 21 | "Katharine Ross", 22 | "William Daniels" 23 | ], 24 | "Plot": "Ben has recently graduated college, with his parents now expecting great things from him. At his \"Homecoming\" party, Mrs. Robinson, the wife of his father's business partner, has Ben drive her home, which leads to an affair between the two. The affair eventually ends, but comes back to haunt him when he finds himself falling for Elaine, Mrs. Robinson's daughter.", 25 | "Language": "English", 26 | "Country": "USA", 27 | "Awards": "Won 1 Oscar. Another 22 wins & 13 nominations.", 28 | "Poster": "http://ia.media-imdb.com/images/M/MV5BMTQ0ODc4MDk4Nl5BMl5BanBnXkFtZTcwMTEzNzgzNA@@._V1_SX300.jpg", 29 | "imdbRating": "8.1", 30 | "imdbVotes": "183,131", 31 | "imdbID": "tt0061722" 32 | } -------------------------------------------------------------------------------- /week5/00-json/readme.md: -------------------------------------------------------------------------------- 1 | For an example of parsing JSON data see http://jsfiddle.net/rover/d6gN5/ -------------------------------------------------------------------------------- /week5/00-json/student_urls.json: -------------------------------------------------------------------------------- 1 | {"students": [ 2 | { 3 | "name": "Ainsley O'Connell", 4 | "url": "http://www.ainsleyoc.com/category/netmedia/" 5 | }, 6 | 7 | { 8 | "name": "Ashley Cortez", 9 | "url": "http://www.ashleyaplomb.com/category/netmedia/" 10 | }, 11 | 12 | { 13 | "name": "Caroline Chiu", 14 | "url": "http://www.crispythought.com/category/itp-2015/netmedia/" 15 | }, 16 | 17 | { 18 | "name": "Chrisanthy Surya", 19 | "url": "http://alilsegue.net/category/networked-media/" 20 | }, 21 | 22 | { 23 | "name": "Clare Carroll", 24 | "url": "http://networkedmedia2015.tumblr.com/" 25 | }, 26 | 27 | { 28 | "name": "Dinos Koumoussis", 29 | "url": "http://www.constantinekoumoussis.com/networked-media/" 30 | }, 31 | 32 | { 33 | "name": "Hochien Shih", 34 | "url": "http://hs1718.blogspot.com/" 35 | }, 36 | 37 | { 38 | "name": "Jaclyn Wickham", 39 | "url": "http://www.jaclynwickham.com/?cat=12" 40 | }, 41 | 42 | { 43 | "name": "Jie Ding", 44 | "url": "http://jiedingdesign.wordpress.com" 45 | }, 46 | 47 | { 48 | "name": "Jie Dong", 49 | "url": "https://jiedong.wordpress.com/category/networked-media/" 50 | }, 51 | 52 | { 53 | "name": "Julian K Hyde", 54 | "url": "http://itp-thejhyde.tumblr.com/" 55 | }, 56 | 57 | { 58 | "name": "Pierre Depaz", 59 | "url": "http://networked-pierre.tumblr.com/" 60 | }, 61 | 62 | { 63 | "name": "Sisa B. Holguín", 64 | "url": "http://www.itp.sisabueno.com/category/networked-media/" 65 | }, 66 | 67 | { 68 | "name": "Tanya Campbell", 69 | "url": "http://www.tanyacampbell.org/category/comm-lab-networked-media" 70 | }, 71 | 72 | { 73 | "name": "Yang Xu", 74 | "url": "https://yangnetmedia.wordpress.com/" 75 | } 76 | ] 77 | } -------------------------------------------------------------------------------- /week5/00-json/weather.json: -------------------------------------------------------------------------------- 1 | { 2 | "coord": { 3 | "lon": -76.61, 4 | "lat": 39.29 5 | }, 6 | "sys": { 7 | "message": 0.0441, 8 | "country": "United States of America", 9 | "sunrise": 1396953525, 10 | "sunset": 1397000248 11 | }, 12 | "weather": [ 13 | { 14 | "id": 500, 15 | "main": "Rain", 16 | "description": "light rain", 17 | "icon": "10d" 18 | } 19 | ], 20 | "base": "cmc stations", 21 | "main": { 22 | "temp": 59.99, 23 | "humidity": 58, 24 | "pressure": 999, 25 | "temp_min": 57, 26 | "temp_max": 62.6 27 | }, 28 | "wind": { 29 | "speed": 3.33, 30 | "gust": 7.2, 31 | "deg": 269 32 | }, 33 | "rain": { 34 | "1h": 0.25 35 | }, 36 | "clouds": { 37 | "all": 12 38 | }, 39 | "dt": 1396974326, 40 | "id": 4347778, 41 | "name": "Baltimore", 42 | "cod": 200 43 | } -------------------------------------------------------------------------------- /week5/01-apis/00static/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /week5/01-apis/00static/sketch.js: -------------------------------------------------------------------------------- 1 | function setup() { 2 | noCanvas(); 3 | loadJSON('student_urls.json', doStuff); 4 | } 5 | 6 | /* The parameter "data" is the content of the json file, as a Javascript object. 7 | loadJSON() takes care of sending the object to your function -- 8 | you just have to give it a name. Here, it's called "data", but could be anything. 9 | */ 10 | function doStuff(data){ 11 | // Debug: inspect the json object 12 | console.log(data); 13 | 14 | // loop through the array of names and URLs 15 | for (var i = 0; i < data.length; i++){ 16 | 17 | // each element of the array is an object. 18 | // just to make that point, i'm storing each temporarily in a variable called personObject 19 | var personObject = data[i]; 20 | 21 | // Debug: see what's in each object 22 | console.log(personObject); 23 | //console.log(personObject.name); 24 | 25 | // create a new

      with the person's name 26 | createP(personObject.name); 27 | 28 | 29 | } 30 | } 31 | -------------------------------------------------------------------------------- /week5/01-apis/00static/student_urls.json: -------------------------------------------------------------------------------- 1 | [ 2 | { 3 | "name": "Ainsley O'Connell", 4 | "url": "http://www.ainsleyoc.com/category/netmedia/" 5 | }, 6 | 7 | { 8 | "name": "Ashley Cortez", 9 | "url": "http://www.ashleyaplomb.com/category/netmedia/" 10 | }, 11 | 12 | { 13 | "name": "Caroline Chiu", 14 | "url": "http://www.crispythought.com/category/itp-2015/netmedia/" 15 | }, 16 | 17 | { 18 | "name": "Chrisanthy Surya", 19 | "url": "http://alilsegue.net/category/networked-media/" 20 | }, 21 | 22 | { 23 | "name": "Clare Carroll", 24 | "url": "http://networkedmedia2015.tumblr.com/" 25 | }, 26 | 27 | { 28 | "name": "Dinos Koumoussis", 29 | "url": "http://www.constantinekoumoussis.com/networked-media/" 30 | }, 31 | 32 | { 33 | "name": "Hochien Shih", 34 | "url": "http://hs1718.blogspot.com/" 35 | }, 36 | 37 | { 38 | "name": "Jaclyn Wickham", 39 | "url": "http://www.jaclynwickham.com/?cat=12" 40 | }, 41 | 42 | { 43 | "name": "Jie Ding", 44 | "url": "http://jiedingdesign.wordpress.com" 45 | }, 46 | 47 | { 48 | "name": "Jie Dong", 49 | "url": "https://jiedong.wordpress.com/category/networked-media/" 50 | }, 51 | 52 | { 53 | "name": "Julian K Hyde", 54 | "url": "http://itp-thejhyde.tumblr.com/" 55 | }, 56 | 57 | { 58 | "name": "Pierre Depaz", 59 | "url": "http://networked-pierre.tumblr.com/" 60 | }, 61 | 62 | { 63 | "name": "Sisa B. Holguín", 64 | "url": "http://www.itp.sisabueno.com/category/networked-media/" 65 | }, 66 | 67 | { 68 | "name": "Tanya Campbell", 69 | "url": "http://www.tanyacampbell.org/category/comm-lab-networked-media" 70 | }, 71 | 72 | { 73 | "name": "Yang Xu", 74 | "url": "https://yangnetmedia.wordpress.com/" 75 | } 76 | ] -------------------------------------------------------------------------------- /week5/01-apis/01_weather/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /week5/01-apis/01_weather/sketch.js: -------------------------------------------------------------------------------- 1 | /* 2 | from: 3 | Lauren McCarthy 4 | https://github.com/lmccart/p5.js/wiki/Loading-external-files:-AJAX,-XML,-JSON 5 | 6 | */ 7 | 8 | function setup() { 9 | createCanvas(600, 400); 10 | noStroke(); 11 | loadJSON('http://api.openweathermap.org/data/2.5/weather?q=NewYork,USA', drawWeather); 12 | } 13 | 14 | function drawWeather(weather) { 15 | 16 | // Get the loaded JSON data 17 | console.log(weather); // inspect the weather JSON 18 | var humidity = weather.main.humidity; // get the main.humidity out of the loaded JSON 19 | console.log(humidity); // inspect the humidity in the console 20 | 21 | background(40, 90, 200); 22 | fill(0, 255, 255, humidity); // use the humidity value to set the alpha 23 | for (var i = 0; i < 50; i++) { 24 | ellipse(random(width), random(height), 30, 30); 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /week5/01-apis/01_weather_p5_dom/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 |

      Hello p5.js and p5.dom.js

      11 |
      12 | 13 | -------------------------------------------------------------------------------- /week5/01-apis/01_weather_p5_dom/sketch.js: -------------------------------------------------------------------------------- 1 | // jsfiddle version: http://jsfiddle.net/rover/bnz198Lv/ 2 | 3 | function setup() { 4 | noCanvas(); 5 | loadJSON('http://api.openweathermap.org/data/2.5/weather?q=New+York&units=imperial',parseStuff); 6 | } 7 | 8 | function parseStuff(data){ 9 | //console.log(data); // the whole thing 10 | //console.log(data.weather[0].main); // the first weather condition (eg, Rain) 11 | 12 | for (i in data.weather){ 13 | console.log(data.weather[i].main); 14 | createP(data.weather[i].main); 15 | } 16 | 17 | } -------------------------------------------------------------------------------- /week5/01-apis/02_capitol_words/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 |
      Favorite words of NY legislators, from Capitol Words. Click anywhere to redraw.
      11 | 12 | -------------------------------------------------------------------------------- /week5/01-apis/02_capitol_words/sketch.js: -------------------------------------------------------------------------------- 1 | var baseUrl = "http://capitolwords.org/api/1/phrases.json?entity_type=state&entity_value=NY&apikey="; 2 | var apiKey = "3e16c02bbb374110b558027c6adb189d"; // this is my api key, but you can borrow it. 3 | var fullUrl = baseUrl+apiKey; 4 | var words; 5 | 6 | function setup() { 7 | createCanvas(windowWidth, windowHeight); 8 | noStroke(); 9 | loadJSON(fullUrl, getWords); 10 | // set up text size 11 | textSize(32); 12 | // fill style for "loading" text 13 | fill(100); 14 | text("Loading Capitol Words ...", 100,100); 15 | } 16 | /* 17 | // You could also use the draw function to make the words re-render continuously 18 | function draw(){ 19 | renderWords(); 20 | }*/ 21 | 22 | function mousePressed(){ 23 | renderWords(); 24 | } 25 | 26 | function getWords(json){ 27 | console.log(json); // for debugging, to view the full json result 28 | words = json; 29 | renderWords(); 30 | } 31 | 32 | function renderWords(){ 33 | background(255); 34 | // don't start drawing until there are words in the array 35 | if (words.length > 0){ 36 | console.log('got words'); 37 | // words is an array of objects 38 | for (var i=0; i 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /week5/01-apis/03_instagram/sketch.js: -------------------------------------------------------------------------------- 1 | // Daniel Shiffman 2 | // Programming from A to Z, Fall 2014 3 | // https://github.com/shiffman/Programming-from-A-to-Z-F14 4 | 5 | // Instagram requires oAuth, but the old API does not seem to 6 | // https://api.instagram.com/v1/ 7 | 8 | // To get a search query 9 | var input; 10 | 11 | // An array of images 12 | var imgs = []; 13 | 14 | function setup() { 15 | noCanvas(); 16 | 17 | // Set up a search query and button for searching 18 | var form = createDiv(''); 19 | input = createInput('love'); 20 | input.parent(form); 21 | var button = createButton('search'); 22 | button.mousePressed(search); 23 | button.parent(form); 24 | } 25 | 26 | // This function will execute the search 27 | function search() { 28 | 29 | // Clear all the previous divs 30 | for (var i = 0; i < imgs.length; i++) { 31 | imgs[i].remove(); 32 | } 33 | 34 | // Start over 35 | imgs = []; 36 | 37 | // Form a URL 38 | var part1 = 'https://api.instagram.com/v1/tags/'; 39 | // add your client ID into the ________ 40 | var part2 = '/media/recent?client_id=_______'; 41 | var query = part1 + input.value() + part2; 42 | 43 | // Execute the API query 44 | loadJSON(query, gotData); 45 | } 46 | 47 | // The API query is done 48 | function gotData(data) { 49 | // Get the image data 50 | var images = data.data; 51 | for (var i = 0; i < images.length; i++) { 52 | // Make an image element for each one 53 | var img = createImg(images[i].images.thumbnail.url); 54 | imgs.push(img); 55 | } 56 | } 57 | 58 | -------------------------------------------------------------------------------- /week5/01-apis/04_nytimes/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /week5/01-apis/04_nytimes/sketch.js: -------------------------------------------------------------------------------- 1 | /* 2 | Adapted from 3 | https://github.com/lmccart/itp-creative-js/tree/master/week4/01_p5_examples/07_external_API_nytimes 4 | 5 | For information on the NYTimes Article Search API, see: 6 | http://developer.nytimes.com/docs/read/article_search_api_v2 7 | */ 8 | 9 | function setup() { 10 | createCanvas(1200, 400); 11 | noLoop(); 12 | noStroke(); 13 | fill(0); 14 | 15 | var baseUrl = "http://api.nytimes.com/svc/search/v2/articlesearch.jsonp?callback=svc_search_v2_articlesearch&q="; 16 | var apiKey = "sample-key"; //this key works 17 | var searchTerm = "net+neutrality"; // "obama", "middle+east", "net+neutrality", "earthquake", etc 18 | var url = baseUrl + searchTerm + "&api-key=" + apiKey; 19 | loadJSON(url, drawDocs); 20 | } 21 | 22 | function draw() { 23 | } 24 | 25 | function drawDocs(data) { 26 | var docs = data.response.docs; 27 | for (var i=0; i 2 | 3 | 4 | 5 | 6 | 7 | 8 |
      9 | 10 | -------------------------------------------------------------------------------- /week5/02-jquery/ajax_get/script.js: -------------------------------------------------------------------------------- 1 | $(document).ready(function() { //jQuery's method of listening for the DOM to load 2 | // Put all your code INSIDE this function 3 | var url = "http://api.openweathermap.org/data/2.5/weather?q=New+York&units=imperial"; 4 | // get the content of the URL into the variable "response" 5 | $.get(url, function (response) { 6 | console.log(response); // see everything 7 | 8 | //drill down and get the data you want 9 | console.log(response.weather[0].description); 10 | 11 | //jQuery makes it easy to grab a DOM element. 12 | // Use CSS syntax, "#" for id and "." for class 13 | $("#info").html("The temperature is " + response.main.temp + "° F"); 14 | 15 | }); 16 | 17 | }); 18 | 19 | /* 20 | === NOTES === 21 | * Most functions in jQuery start with "$". Yeah, it looks weird at first. 22 | 23 | * The $.get() function is similar to p5's loadJSON() function. It takes 2 paramaters: 24 | 1. The URL to load 25 | 2. A function to handle the content of the URL. 26 | 27 | In this example, the function is inline, as an anonymous function. You could also write it like: 28 | $.get(url,nameOfFunctionDefinedSomewhereElse); 29 | 30 | and then, of course, you'd have to define that function: 31 | function nameOfFunctionDefinedSomewhereElse(response){ 32 | 33 | } 34 | 35 | Like in p5, the parameter is sent to the function automatically. 36 | You just have to name it something. Here it's called "response" 37 | More info: http://api.jquery.com/jquery.get/ 38 | 39 | * Access DOM elements in jQuery using $("CSS SYNTAX HERE"). 40 | Inside the quotes, write the path to the element using CSS selectors like "#" and "." 41 | For example, "#info" gets any element with an id="info" 42 | ".article" gets any and all elements with a class="article" 43 | More examples: http://www.w3schools.com/jquery/jquery_ref_selectors.asp 44 | 45 | */ -------------------------------------------------------------------------------- /week6/00-servi-static-files/faq.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | FAQ 5 | 6 | 7 | 8 |

      FAQ

      9 |

      Q: What is Servi?

      10 |

      A: servi.js is a JavaScript node.js microframework for creating web servers. It is inspired by Processing and p5.js.

      11 |
      12 |

      Q: Where do I find documentation?

      13 |

      A: For some Servi basics, see the servi.js github wiki

      14 |
      15 |

      Q: How do I do this in Servi?

      16 |

      A: For more info on how to do this assingment, see Using Servi in the Networked Media class wiki

      17 | 18 | -------------------------------------------------------------------------------- /week6/00-servi-static-files/server.js: -------------------------------------------------------------------------------- 1 | // every servi application must have these 2 lines 2 | var servi = require('servi'); 3 | var app = new servi(true); 4 | 5 | // set the port (defaults to 3000 if you leave out this line) 6 | port(3001); // make sure "port()" line comes before "start()" 7 | start(); 8 | // set up the routes 9 | route('/',showHome); 10 | route('/about',myAboutPage); 11 | route('/faq',viewFaq); 12 | 13 | function showHome(request){ 14 | // serve a simple string 15 | request.respond("This is the home page."); 16 | } 17 | 18 | function myAboutPage(request){ 19 | // build a string with some HTML in it 20 | var myHtml = "

      About Me!!!

      "; 21 | myHtml += "

      I am a person from earth.

      "; 22 | // serve the HTML string 23 | request.respond(myHtml); 24 | } 25 | 26 | function viewFaq(request){ 27 | // serve a static HTML file 28 | request.serveFile('faq.html'); 29 | } 30 | 31 | -------------------------------------------------------------------------------- /week6/01-servi-userprofiles/server.js: -------------------------------------------------------------------------------- 1 | // every servi application must have these 2 lines 2 | var servi = require('servi'); 3 | var app = new servi(true); 4 | 5 | // set the port (defaults to 3000 if you leave out this line) 6 | port(3111); // make sure "port()" line comes before "start()" 7 | start(); 8 | // set up the routes 9 | route('/',showHome); 10 | route('/about',myAboutPage); 11 | 12 | function showHome(request){ 13 | request.respond("This is the home page."); 14 | } 15 | 16 | function myAboutPage(request){ 17 | request.respond("

      About Me!!!

      "); 18 | } 19 | 20 | route('/profile/:username',showProfile); 21 | 22 | function showProfile(request){ 23 | var content = "

      " + request.params.username + "

      "; 24 | content += "

      All the user's info here

      "; 25 | request.respond(content); 26 | } 27 | 28 | -------------------------------------------------------------------------------- /week6/02-servi-userprofiles-data/server.js: -------------------------------------------------------------------------------- 1 | // every servi application must have these 2 lines 2 | var servi = require('servi'); 3 | var app = new servi(true); 4 | 5 | // set the port (defaults to 3000 if you leave out this line) 6 | port(7777); //make sure this comes before "start()" 7 | start(); 8 | // set up the routes 9 | route('/',showHome); 10 | route('/profile/:userid',showProfile); 11 | 12 | var users = [ 13 | { 14 | "name": "Joe", 15 | "about": "I like cats and kittens." 16 | }, 17 | { 18 | "name": "Jane", 19 | "about": "I live in Alberta and like to code." 20 | }, 21 | { 22 | "name": "Morgan", 23 | "about": "Craft beer and pickles and kale!" 24 | } 25 | ]; 26 | 27 | function showHome(request){ 28 | request.respond("This is the home page."); 29 | } 30 | 31 | function showProfile(request){ 32 | var id = request.params.userid; 33 | if (id in users){ 34 | var name = users[id].name; 35 | var about = users[id].about; 36 | var content = "

      " + name + "

      "; 37 | content += "

      " + about + "

      "; 38 | request.respond(content); 39 | } else { 40 | request.respond("

      Could not find that user id

      "); 41 | } 42 | } 43 | 44 | 45 | -------------------------------------------------------------------------------- /week6/03-servi-form-get/form.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 |

      Who are you and where are you from?

      6 |
      7 | 8 | 9 | 10 |
      11 | 12 | -------------------------------------------------------------------------------- /week6/03-servi-form-get/server.js: -------------------------------------------------------------------------------- 1 | var servi = require('servi'); 2 | var app = new servi(true); 3 | 4 | port(3000); 5 | start(); 6 | 7 | // --- routes --- // 8 | route('/', showForm); 9 | 10 | // the route here must match the URL in the form element 11 | // eg,
      12 | route('/submitform', handleForm); 13 | 14 | // --- handlers --- // 15 | function showForm(request){ 16 | // Show the form file 17 | request.serveFile('form.html'); 18 | } 19 | 20 | function handleForm(request) { 21 | console.log(request.params); // check what came in 22 | 23 | // params correspond to the name of the form fields 24 | // for example, 25 | var content = "

      The name submitted was: " + request.params.name + "

      "; 26 | content += "

      The city submitted was: " + request.params.city + "

      "; 27 | request.respond(content); 28 | } -------------------------------------------------------------------------------- /week6/04-servi-form-post/form.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 |

      What's your name?

      7 | 8 | 9 |

      Cats or Dogs?

      10 | Cats
      11 | Dogs
      12 | 13 |
      14 | 15 | -------------------------------------------------------------------------------- /week6/04-servi-form-post/server.js: -------------------------------------------------------------------------------- 1 | var servi = require('servi'); 2 | var app = new servi(true); 3 | 4 | port(3000); 5 | start(); 6 | 7 | // --- routes --- // 8 | route('/', showForm); 9 | 10 | // the route here must match the URL in the form element 11 | // eg,
      12 | route('/submitform', handleForm); 13 | 14 | // --- handlers --- // 15 | function showForm(request){ 16 | // Show the form file 17 | request.serveFile('form.html'); 18 | } 19 | 20 | function handleForm(request) { 21 | // for post requests, the values come in the request.fields object 22 | 23 | console.log(request.fields); // check what came in 24 | 25 | var content = "

      The name submitted was: " + request.fields.name + "

      "; 26 | content += "

      Preferred pet: " + request.fields.pet + "

      "; 27 | request.respond(content); 28 | } -------------------------------------------------------------------------------- /week6/05-servi-template/server.js: -------------------------------------------------------------------------------- 1 | // every servi application must have these 2 lines 2 | var servi = require('servi'); 3 | var app = new servi(true); 4 | 5 | // set the port (defaults to 3000 if you leave out this line) 6 | port(8080); 7 | 8 | // set up the routes 9 | route('/',viewHome); 10 | route('/:page',viewPage); 11 | 12 | // make an object to hold data to feed our template 13 | var content = { 14 | pageTitle: "Cats on Mars", 15 | intro: "Cats on Mars explores the mysteries of space cats." 16 | }; 17 | 18 | function viewHome(request){ 19 | request.render("templates/page.template.html",content); 20 | } 21 | 22 | // an object with content for different pages 23 | var pages = { 24 | work: { 25 | pageTitle: "Cats at Work", 26 | intro: "Martian cats work extremely hard all day long." 27 | }, 28 | play: { 29 | pageTitle: "Play time for Cats on Mars!", 30 | intro: "A cat on Mars knows how to play like nobody's watching." 31 | }, 32 | sleep:{ 33 | pageTitle: "Asleep on the Red Planet", 34 | intro: "Even Martian cats sleep 18 hours a day." 35 | } 36 | }; 37 | 38 | function viewPage(request){ 39 | var pageName = request.params.page; // 'work','play', or 'sleep' 40 | if (pageName in pages){ 41 | request.render("templates/page.template.html",pages[pageName]); 42 | } else { 43 | request.respond("Page not found"); 44 | } 45 | 46 | } 47 | // --- START THE SERVER --- // 48 | start(); -------------------------------------------------------------------------------- /week6/05-servi-template/templates/page.template.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | <%= pageTitle %> 5 | 6 | 7 | 8 |

      <%= pageTitle %>

      9 | 10 |

      <%= intro %>

      11 | 12 |

      the end of the page.

      13 | 14 | -------------------------------------------------------------------------------- /week6/06-servi-template-loop/server.js: -------------------------------------------------------------------------------- 1 | // every servi application must have these 2 lines 2 | var servi = require('servi'); 3 | var app = new servi(true); 4 | 5 | // set the port (defaults to 3000 if you leave out this line) 6 | port(3010); 7 | // --- START THE SERVER --- // 8 | start(); 9 | 10 | // set up the route 11 | route('/',viewPeople); 12 | 13 | // An object with an array of data that the template will use 14 | var data = { 15 | people: [ 16 | { 17 | "name": "Brad", 18 | "city": "London" 19 | }, 20 | { 21 | "name": "Jill", 22 | "city": "Tokyo" 23 | }, 24 | { 25 | "name": "Kate", 26 | "city": "New York" 27 | } 28 | ] 29 | }; 30 | 31 | function viewPeople(request){ 32 | request.render("templates/people_list.html",data); 33 | } 34 | -------------------------------------------------------------------------------- /week6/06-servi-template-loop/templates/people_list.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | People 4 | 5 | 6 |

      Where people live

      7 | 8 | <% for (i = 0; i < people.length; i++) { %> 9 | 10 |
    • <%= people[i].name %> lives in <%= people[i].city %>
      • 11 | 12 | <% } %> 13 | 14 | 15 | -------------------------------------------------------------------------------- /week6/07-servi-template-data/serve-toad.js: -------------------------------------------------------------------------------- 1 | var servi = require('servi'); 2 | var app = new servi(true); 3 | port(3002); 4 | start(); 5 | route('/',showHome); 6 | route('/toads/:toadName',getToad); 7 | 8 | myToadCollection = { 9 | yosemite: { 10 | common_name: 'Yosemite Toad', 11 | scientific_name: 'Anaxyrus canorus', 12 | description: 'A robust and stocky toad with dry, uniformly warty skin.', 13 | photo: 'http://www.californiaherps.com/frogs/images/acanorusac7116.jpg', 14 | sounds: 'http://www.californiaherps.com/sounds/bcanorus7.mp3' 15 | }, 16 | boreal: { 17 | common_name: 'Boreal Toad', 18 | scientific_name: 'Anaxyrus boreas boreas', 19 | description: 'A large and robust toad with dry, warty skin.', 20 | photo: 'http://www.californiaherps.com/frogs/images/bbboreasrnphumboldt.jpg', 21 | sounds: 'http://www.californiaherps.com/sounds/bbboreasfl406solo.mp3' 22 | } 23 | }; 24 | 25 | function showHome(request){ 26 | var toadListText = ''; 27 | for (shortname in myToadCollection){ 28 | //console.log(i); 29 | var toad = myToadCollection[shortname]; 30 | //
    • Name
      • 31 | toadListText += '
    • ' + toad.common_name + '
      • '; 32 | } 33 | var title = "

      My Toads

      "; 34 | request.respond(title + toadListText); 35 | } 36 | function getToad(request){ 37 | var tname = request.params.toadName; // 'yosemite' or 'boreal' 38 | var currentToad = myToadCollection[tname]; // indiv. toad object 39 | request.render('toad_profile.html',currentToad); 40 | } -------------------------------------------------------------------------------- /week6/07-servi-template-data/toad_profile.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | <%= common_name %> 5 | 6 | 7 | 8 |

      Toads R Us

      9 |

      <%= common_name %>

      10 | 11 |

      Common Name: <%= common_name %>

      12 |

      Scientific Name: <%= scientific_name %>

      13 |

      Description: <%= description %>

      14 | 15 |
      16 |

      Home

      17 | 18 | -------------------------------------------------------------------------------- /week6/08-servi-db/people.db: -------------------------------------------------------------------------------- 1 | {"name":"Joe","_id":"1DlDQu55m85dqNQJ"} 2 | {"name":"Opal","_id":"MKuf4cy0ElnxVDRI"} 3 | {"name":"Robyn","_id":"hBrMzG83zwZCAocA"} 4 | {"name":"Bob","city":"New York City","_id":"w405kds0Gu1DLLm5"} 5 | {"name":"Jane","city":"New York City","_id":"sPdZltYd9jRsdclL"} 6 | -------------------------------------------------------------------------------- /week6/08-servi-db/server.js: -------------------------------------------------------------------------------- 1 | var servi = require('servi'); 2 | var app = new servi(true); 3 | 4 | // set up a database 5 | // looks for a file called "people.db" or creates one if it doesn't exist 6 | var namesDB = useDatabase("people"); 7 | 8 | // set up the routes 9 | route('/', showAll); 10 | route('/add/:person',addName); 11 | 12 | /* 13 | ==== Add a new name to the database ==== 14 | 15 | If the URL is http://123.com/add/Jane, then the name "Jane" gets added to the DB 16 | The text "Jane" is added in an object with a property called "name", like this: 17 | { 18 | name: "Jane" 19 | } 20 | Notice the flow of events and data: 21 | 1. Define a route, '/add/:person', where ':person' is a variable 22 | 2. User visits that URL, as in http://123.com/add/Jane 23 | 3. Grab the variable used in place of ':person', using 'request.params.person'. 24 | In this example, 'request.params.person' is equal to 'Jane' 25 | */ 26 | function addName(request){ 27 | var personName = request.params.person; //Bob 28 | var personObject = { 29 | name: personName, 30 | city: 'New York City' 31 | } 32 | namesDB.add(personObject); 33 | request.respond("Added "+request.params.person); 34 | } 35 | 36 | // show all the names 37 | function showAll(request){ 38 | namesDB.getAll(gotNames); 39 | function gotNames(names){ 40 | namestext = ""; 41 | for (i =0; i < names.length; i++) { 42 | namestext += names[i].name + "
      "; 43 | } 44 | request.respond( namestext ); 45 | } 46 | } 47 | 48 | start(); -------------------------------------------------------------------------------- /week6/09-servi-db-search/html/searchform.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 |

      Search Users By Name

      6 | 7 |

      Name

      8 | 9 |
      10 | 11 |
      12 |

      Return home

      13 | 14 | -------------------------------------------------------------------------------- /week6/09-servi-db-search/people.db: -------------------------------------------------------------------------------- 1 | {"name":"Dan","date_added":"Sun Nov 30 2014 22:00:04 GMT-0500 (EST)","_id":"DGW46VG8N1kCsOXH"} 2 | {"name":"Annabelle","date_added":"Sun Nov 30 2014 21:59:26 GMT-0500 (EST)","_id":"S0hQsabVo80Rw7Ln"} 3 | {"name":"Julia","date_added":"Sun Nov 30 2014 21:59:07 GMT-0500 (EST)","_id":"jG2eAyNxMUrCbzqp"} 4 | {"name":"Diego","date_added":"Sun Nov 30 2014 21:56:30 GMT-0500 (EST)","_id":"t5GLbvx9qyRiJHW7"} 5 | {"name":"Janet","date_added":"Sun Nov 30 2014 21:56:15 GMT-0500 (EST)","_id":"yaZf0BFknoNXYcVA"} 6 | {"name":"Ziggy","date_added":"Sun Nov 30 2014 22:01:33 GMT-0500 (EST)","_id":"t32vvLCPk8xYXTwD"} 7 | {"name":"Dan","date_added":"Sun Nov 30 2014 22:01:51 GMT-0500 (EST)","_id":"WR9a7FDWcEapmXB3"} 8 | -------------------------------------------------------------------------------- /week6/10-servi-load-json/server.js: -------------------------------------------------------------------------------- 1 | /* 2 | Example loading a local JSON file in Servi.js 3 | and using it as a Javascript object 4 | 5 | */ 6 | var servi = require('servi'); 7 | var app = new servi(true); 8 | // IMPORTANT! Make sure to add this line to require 'http': 9 | var http = require('http'); 10 | port(3000); 11 | start(); 12 | 13 | // routes 14 | route('/', fromFileDemo); 15 | route('/jsonurl',fromUrlDemo); 16 | function fromFileDemo(request){ 17 | var content = ''; 18 | 19 | // OPTION 1. Load a local JSON file 20 | loadJSON('weather.json',function(dataObj){ 21 | // now you can use the contents of the JSON file as a regular JS Object 22 | var temp = dataObj.main.temp; 23 | var city = dataObj.name; 24 | 25 | console.log('loaded from file'); 26 | content += "

      The temperature in " + city + " was once " + temp + "F

      "; 27 | content += '

      try loading JSON from url

      '; 28 | request.respond(content); 29 | }); 30 | 31 | /* === Note: === 32 | These examples use an anonymous function as the 2nd parameter in loadJSON(). 33 | If you prefer, you could instead use a named function, like this: 34 | 35 | loadJSON('weather.json',gotWeather); 36 | function gotWeather(dataObj){ 37 | // do stuff 38 | } 39 | 40 | */ 41 | } 42 | 43 | function fromUrlDemo(request){ 44 | var content = ''; 45 | 46 | // OPTION 2. Load JSON from a URL 47 | var myUrl = "http://api.openweathermap.org/data/2.5/weather?q=London,uk"; 48 | loadJSON(myUrl,function(dataObj){ 49 | // get data points from the object 50 | var temp = dataObj.main.temp; 51 | var city = dataObj.name; 52 | 53 | console.log("loaded from URL"); 54 | content += "

      The temperature in " + city + " right now is " + temp + "K

      "; 55 | content += '

      try loading JSON from file

      '; 56 | request.respond(content); 57 | }); 58 | } 59 | 60 | /* 61 | === 62 | === To work with JSON, add these 2 utility functions in your script === 63 | === Then call loadJSON() as in the demos above. 64 | === 65 | */ 66 | 67 | // load text from a url 68 | function loadURL(url,onSuccess){ 69 | var str = ''; 70 | http.get(url, function(res) { 71 | res.on("data", function(chunk) { 72 | str += chunk.toString(); 73 | }); 74 | res.on("end",function(){ 75 | onSuccess(str); 76 | }); 77 | }).on('error', function(e) { 78 | console.log("Got error: " + e.message); 79 | // use an onError() callback here? 80 | }); 81 | } 82 | 83 | // load JSON from a local file or a URL 84 | function loadJSON(path,callback){ 85 | // is it a URL ? 86 | if (path.indexOf('http') === 0){ 87 | loadURL(path, function(res){ 88 | callback(JSON.parse(res)); 89 | }); 90 | } else { // assume it's a file 91 | callback(JSON.parse(loadFile(path))); 92 | } 93 | } -------------------------------------------------------------------------------- /week6/10-servi-load-json/weather.json: -------------------------------------------------------------------------------- 1 | 2 | { 3 | "coord": { 4 | "lon": -74.01, 5 | "lat": 40.71 6 | }, 7 | "sys": { 8 | "type": 1, 9 | "id": 1980, 10 | "message": 0.115, 11 | "country": "US", 12 | "sunrise": 1416311222, 13 | "sunset": 1416346537 14 | }, 15 | "weather": [ 16 | { 17 | "id": 500, 18 | "main": "Rain", 19 | "description": "light rain", 20 | "icon": "10n" 21 | }, 22 | { 23 | "id": 701, 24 | "main": "Mist", 25 | "description": "mist", 26 | "icon": "50n" 27 | }, 28 | { 29 | "id": 300, 30 | "main": "Drizzle", 31 | "description": "light intensity drizzle", 32 | "icon": "09n" 33 | } 34 | ], 35 | "base": "cmc stations", 36 | "main": { 37 | "temp": 47.84, 38 | "pressure": 1000, 39 | "humidity": 93, 40 | "temp_min": 42.8, 41 | "temp_max": 57.2 42 | }, 43 | "wind": { 44 | "speed": 3.24, 45 | "deg": 270 46 | }, 47 | "clouds": { 48 | "all": 90 49 | }, 50 | "dt": 1416267540, 51 | "id": 5128581, 52 | "name": "New York", 53 | "cod": 200 54 | } -------------------------------------------------------------------------------- /week6/11-servi-file-uploads/form.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | Upload 4 | 5 | 6 |
      7 | 8 | 9 |
      10 | 11 | 12 | -------------------------------------------------------------------------------- /week6/11-servi-file-uploads/upload.js: -------------------------------------------------------------------------------- 1 | /* 2 | 3 | Adapted from: 4 | https://github.com/antiboredom/servi-ide/tree/master/examples/file-uploads 5 | */ 6 | var servi = require('servi'); 7 | var app = new servi(true); 8 | port(3003); 9 | start(); 10 | 11 | serveFiles('uploads'); 12 | 13 | route('/', form); 14 | function form(request){ 15 | request.serveFile('form.html'); 16 | } 17 | 18 | route('/upload', upload); 19 | function upload(request) { 20 | var file = request.files.file; 21 | uploadFile(file, "uploads"); 22 | request.respond(''); 23 | } -------------------------------------------------------------------------------- /week6/12-servi-blog-templates-db-uploads/public/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | font: 16px sans-serif; 3 | background-color: #eee; 4 | width: 600px; 5 | margin: auto; 6 | line-height: 1.4; 7 | } 8 | 9 | a { 10 | color: #ff0046; 11 | text-decoration: none; 12 | } 13 | 14 | h2 { 15 | padding:0; 16 | margin:0; 17 | } 18 | 19 | .entry { 20 | border-bottom: 1px dashed #ccc; 21 | padding: 20px 0; 22 | } 23 | 24 | .entry img { 25 | max-width: 600px; 26 | margin-bottom: 10px; 27 | } 28 | 29 | textarea, input { 30 | display: block; 31 | width: 100%; 32 | font: 16px sans-serif; 33 | padding: 5px; 34 | border: 1px solid #ccc; 35 | margin-bottom: 10px; 36 | } 37 | 38 | textarea { 39 | height: 200px; 40 | } 41 | 42 | input[type=submit] { 43 | background-color: 0; 44 | color: #fff; 45 | } 46 | 47 | input[type=file] { 48 | border: 0; 49 | } 50 | -------------------------------------------------------------------------------- /week6/12-servi-blog-templates-db-uploads/server.js: -------------------------------------------------------------------------------- 1 | /* 2 | 3 | Adapted from: 4 | https://github.com/antiboredom/servi-ide/tree/master/examples/blog 5 | 6 | */ 7 | var servi = require('servi'); 8 | var app = new servi(true); 9 | port(3002); 10 | start(); 11 | 12 | var database = useDatabase('blog'); 13 | serveFiles('public'); 14 | 15 | route('/', home); 16 | route('/new', newEntry); 17 | route('/entries/:id', showEntry); 18 | 19 | function home(request) { 20 | var data = database.find({}); 21 | data.sort({ date: -1 }); 22 | data.exec(function(err, entries){ 23 | request.render('templates/home.html', {entries: entries}); 24 | }); 25 | } 26 | 27 | function newEntry(request) { 28 | if (request.method == GET) { 29 | request.render('templates/form.html'); 30 | } 31 | 32 | else if (request.method == POST) { 33 | var image = request.files.image; 34 | uploadFile(image, "public/uploads"); 35 | 36 | var blogEntry = { 37 | content: request.fields.content, 38 | title: request.fields.title, 39 | date: new Date(), 40 | image: image.name 41 | } 42 | database.insert(blogEntry); 43 | request.redirect('/'); 44 | } 45 | } 46 | 47 | function showEntry(request) { 48 | var id = request.params.id; 49 | database.findOne({'_id': id}, function(err, theEntry){ 50 | request.render('templates/blogpost.html', {entry: theEntry}); 51 | }); 52 | } -------------------------------------------------------------------------------- /week6/12-servi-blog-templates-db-uploads/templates/.tmpscript: -------------------------------------------------------------------------------- 1 | var servi = require('/Users/sam/Dropbox/school/spring_2014/servi/app/servi.js');var app = new servi(); 2 | 3 | 4 | <% include head.html %> 5 | <% posts.forEach(function(post){ %> 6 |
      7 |

      <%= post.title %>

      8 |
      9 | <%= post.content %> 10 |
      11 |
      12 | <% }) %> 13 | <% include foot.html %> 14 | 15 | 16 | 17 | if (typeof run === 'function') app.defaultRoute(run);start(); -------------------------------------------------------------------------------- /week6/12-servi-blog-templates-db-uploads/templates/blogpost.html: -------------------------------------------------------------------------------- 1 | <% include head.html %> 2 |
      3 |

      <%= entry.title %>

      4 | <% if (entry.image) { %> 5 | 6 | <% } %> 7 |
      8 | <%= entry.content %> 9 |
      10 |
      11 | <% include foot.html %> 12 | -------------------------------------------------------------------------------- /week6/12-servi-blog-templates-db-uploads/templates/foot.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /week6/12-servi-blog-templates-db-uploads/templates/form.html: -------------------------------------------------------------------------------- 1 | <% include head.html %> 2 |
      3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 |
      11 | <% include foot.html %> 12 | -------------------------------------------------------------------------------- /week6/12-servi-blog-templates-db-uploads/templates/head.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | My Blog 5 | 6 | 7 |

      My Blog

      8 |

      New Entry

      9 | -------------------------------------------------------------------------------- /week6/12-servi-blog-templates-db-uploads/templates/home.html: -------------------------------------------------------------------------------- 1 | <% include head.html %> 2 | <% entries.forEach(function(entry){ %> 3 |
      4 |

      <%= entry.title %>

      5 | <% if (entry.image) { %> 6 | 7 | <% } %> 8 |
      9 | <%= entry.content %> 10 |
      11 |
      12 | <% }) %> 13 | <% include foot.html %> 14 | -------------------------------------------------------------------------------- /week6/13-servi_get_api/servi_http_get.js: -------------------------------------------------------------------------------- 1 | var servi = require('servi'); 2 | var app = new servi(true); 3 | var http = require('http'); 4 | var url = "http://api.openweathermap.org/data/2.5/weather?q=NewYork,USA"; 5 | http.get(url, function(res) { 6 | var data = ""; 7 | res.on('data', function (chunk) { 8 | data += chunk; 9 | }); 10 | res.on("end", function() { 11 | console.log(data); // <-- this is a JSON string 12 | data = JSON.parse(data); // convert string to JSON object 13 | console.log(data.coord); // do stuff with the JSON data here 14 | }); 15 | }).on("error", function(e) { 16 | console.log("Got error: " + e.message); 17 | }); 18 | 19 | --------------------------------------------------------------------------------