├── .gitignore ├── README.md ├── Spring-2014 ├── McCarthy-Tues-2014.md ├── Shiffman-Fri-2014.md ├── ideas.md ├── week1 │ ├── array_of_images │ │ ├── burger.png │ │ ├── chickens.jpg │ │ ├── fish.png │ │ ├── flower.png │ │ ├── index.html │ │ └── sketch.js │ ├── array_of_numbers │ │ ├── index.html │ │ └── sketch.js │ ├── basics │ │ ├── index.html │ │ └── sketch.js │ ├── empty_example │ │ ├── index.html │ │ └── sketch.js │ ├── p5_simple_example │ │ ├── index.html │ │ └── sketch.js │ ├── processing_p5_conversion_0 │ │ ├── examples-basics-form-bezier.pde │ │ ├── index.html │ │ └── sketch.js │ ├── processing_p5_conversion_1 │ │ ├── examples-topics-interaction-follow3.pde │ │ ├── index.html │ │ └── sketch.js │ └── shiffman_demo_inclass │ │ └── hello_world │ │ ├── index.html │ │ └── sketch.js ├── week2 │ ├── 00_JS_objects_walkthrough │ │ ├── index.html │ │ ├── sketch_bubbleobject1.js │ │ ├── sketch_bubbleobject2_method.js │ │ ├── sketch_bubbleobject3_multiple.js │ │ ├── sketch_bubbleobject4_constructor.js │ │ ├── sketch_bubbleobject5_constructor_arguments.js │ │ └── sketch_bubbleobject6_prototypeadd.js │ ├── 01_object_example │ │ ├── index.html │ │ └── sketch.js │ ├── 02_parameterized_objects │ │ ├── index.html │ │ └── sketch.js │ ├── 03_array_of_objects │ │ ├── index.html │ │ └── sketch.js │ ├── 04_array_interactive_objects │ │ ├── index.html │ │ ├── sketch.js │ │ └── stripe.js │ ├── 05_array_of_objects_push │ │ ├── ball.js │ │ ├── index.html │ │ └── sketch.js │ └── 06_inheritance │ │ ├── ball.js │ │ ├── index.html │ │ ├── sketch.js │ │ └── superball.js ├── week3 │ ├── 00_preload │ │ ├── index.html │ │ ├── large.jpg │ │ ├── sketch.js │ │ └── small.jpg │ ├── 01_position_canvas │ │ ├── index.html │ │ └── sketch.js │ ├── 02_html_css │ │ ├── one.html │ │ ├── style.css │ │ └── two.html │ ├── 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_mousepressed │ │ ├── index.html │ │ └── sketch.js │ ├── 07_setting_class │ │ ├── index.html │ │ └── sketch.js │ ├── 08_mouseover_mouseout │ │ ├── index.html │ │ └── sketch.js │ ├── 09_getElements │ │ ├── index.html │ │ └── sketch.js │ ├── 09_mousepressed │ │ ├── index.html │ │ └── sketch.js │ ├── 10_getElement │ │ ├── index.html │ │ └── sketch.js │ ├── 10_mouseover_mouseout │ │ ├── index.html │ │ └── sketch.js │ ├── 11_animateDOM │ │ ├── index.html │ │ └── sketch.js │ ├── 12_button_slider │ │ ├── ball.js │ │ ├── index.html │ │ └── sketch.js │ ├── 13_wordscrambler │ │ ├── index.html │ │ └── sketch.js │ ├── document_tests │ │ └── one.html │ └── shiffman_inclass │ │ ├── canvas_dom │ │ ├── index.html │ │ └── sketch.js │ │ ├── htmlElement │ │ ├── index.html │ │ └── sketch.js │ │ └── html_blah │ │ └── index.html ├── week4 │ ├── 00_preload_loadImage │ │ ├── index.html │ │ ├── large.jpg │ │ ├── sketch.js │ │ └── small.jpg │ ├── 01_preload_loadStrings │ │ ├── index.html │ │ ├── lines.txt │ │ └── sketch.js │ ├── 01_preload_loadStrings_DOM │ │ ├── index.html │ │ ├── lines.txt │ │ └── sketch.js │ ├── 02_json │ │ ├── index.html │ │ └── sketch.js │ ├── 03_preload_loadJSON │ │ ├── data.json │ │ ├── index.html │ │ └── sketch.js │ ├── 03_preload_loadJSON_OOP │ │ ├── data.json │ │ ├── index.html │ │ └── sketch.js │ ├── 04_callback │ │ ├── index.html │ │ └── sketch.js │ ├── 05_callback_anonymous │ │ ├── index.html │ │ └── sketch.js │ ├── 06_callback_loadImage │ │ ├── index.html │ │ ├── large.jpg │ │ ├── sketch.js │ │ └── small.jpg │ ├── 06_callback_loadImage_OOP │ │ ├── index.html │ │ ├── large.jpg │ │ ├── sketch.js │ │ └── small.jpg │ ├── 07_callback_loadStrings │ │ ├── index.html │ │ ├── lines.txt │ │ └── sketch.js │ ├── 07_callback_loadStrings_DOM │ │ ├── index.html │ │ ├── lines.txt │ │ └── sketch.js │ ├── 08_callback_loadJSON │ │ ├── data.json │ │ ├── index.html │ │ └── sketch.js │ ├── 08_callback_loadJSON_OOP │ │ ├── data.json │ │ ├── index.html │ │ └── sketch.js │ ├── 09_external_API_weather0 │ │ ├── index.html │ │ └── sketch.js │ ├── 10_external_API_weather1 │ │ ├── index.html │ │ └── sketch.js │ ├── 11_external_API_weather2_14day_forecast │ │ ├── index.html │ │ ├── sketch.js │ │ └── sketch_bind.js │ ├── 12_external_API_nytimes │ │ ├── index.html │ │ └── sketch.js │ ├── callback_clock │ │ ├── index.html │ │ └── sketch.js │ ├── class │ │ ├── data.json │ │ ├── index.html │ │ ├── large.jpg │ │ ├── sketch.js │ │ ├── small.jpg │ │ └── test.csv │ ├── inclass │ │ ├── callbacks │ │ │ ├── index.html │ │ │ └── sketch.js │ │ └── json │ │ │ ├── index.html │ │ │ └── sketch.js │ ├── nytimes_experiments │ │ ├── index.html │ │ └── sketch.js │ └── resize_window │ │ ├── index.html │ │ └── sketch.js ├── week5 │ ├── 00_instance_default_append │ │ ├── index.html │ │ └── sketch.js │ ├── 01_instance_canvas_id │ │ ├── index.html │ │ └── sketch.js │ ├── 02_instance_element_id │ │ ├── index.html │ │ └── sketch.js │ ├── 03_instance_canvas_node │ │ ├── index.html │ │ └── sketch.js │ ├── 04_instance_element_node │ │ ├── index.html │ │ └── sketch.js │ ├── 05_instance_anonymous │ │ ├── index.html │ │ └── sketch.js │ ├── 06_two_instances_diff_sketch │ │ ├── index.html │ │ └── sketch.js │ ├── 07_two_instances_same_sketch │ │ ├── index.html │ │ └── sketch.js │ ├── 08_two_instances_listeners │ │ ├── index.html │ │ └── sketch.js │ ├── 09_buzz_global │ │ ├── buzz.js │ │ ├── dingdong.wav │ │ ├── index.html │ │ ├── rhodes_loop.wav │ │ └── sketch.js │ ├── 10_buzz_instance │ │ ├── buzz.js │ │ ├── index.html │ │ ├── rhodes_loop.wav │ │ └── sketch.js │ ├── 11_popcorn_play_pause │ │ ├── fingers.mov │ │ ├── index.html │ │ ├── popcorn.js │ │ └── sketch.js │ ├── 12_popcorn_end_event │ │ ├── fingers.mov │ │ ├── index.html │ │ ├── popcorn.js │ │ └── sketch.js │ ├── 13_popcorn_events │ │ ├── index.html │ │ ├── particle.js │ │ └── sketch.js │ ├── 14_facetracker │ │ ├── fingers.mov │ │ ├── headtrackr.js │ │ ├── index.html │ │ └── sketch.js │ ├── simple_audio │ │ ├── dingdong.wav │ │ ├── index.html │ │ └── sketch.js │ ├── simple_video │ │ ├── fingers.mov │ │ ├── index.html │ │ └── sketch.js │ ├── simple_webcam │ │ ├── index.html │ │ └── sketch.js │ └── toxiclibs │ │ ├── NOC_5_10_SimpleSpring │ │ ├── index.html │ │ ├── particle.js │ │ └── sketch.js │ │ ├── NOC_5_11_SoftString │ │ ├── chain.js │ │ ├── index.html │ │ ├── particle.js │ │ └── sketch.js │ │ ├── NOC_5_12_SimpleCluster │ │ ├── cluster.js │ │ ├── index.html │ │ ├── node.js │ │ └── sketch.js │ │ ├── NOC_5_13_AttractRepel │ │ ├── index.html │ │ ├── particle.js │ │ └── sketch.js │ │ └── lib │ │ ├── toxichelper.js │ │ └── toxiclibs.js └── week6 │ ├── 01_node_helloworld │ ├── 0_hello.js │ ├── 1_hello.js │ ├── 2_counter.js │ └── 3_paths.js │ ├── 02_node_servefile │ ├── index.html │ └── server.js │ ├── 03_node_servep5 │ ├── index.html │ ├── server.js │ └── sketch.js │ ├── 04_socket_server │ ├── index.html │ ├── package.json │ ├── server.js │ ├── sketch.js │ └── socket.io-1.4.5.js │ ├── 10_touchX_touchY │ ├── index.html │ └── sketch.js │ ├── 11_touch_events │ ├── index.html │ └── sketch.js │ ├── 12_mouse_touch │ ├── index.html │ └── sketch.js │ ├── 13_multi_finger_touch │ ├── index.html │ └── sketch.js │ ├── 20_hammerjs_doubletap │ ├── hammer.js │ ├── index.html │ ├── sketch.js │ └── style.css │ ├── 21_hammerjs_tap_hold │ ├── hammer.js │ ├── index.html │ ├── sketch.js │ └── style.css │ ├── 22_hammerjs_pinch_rotate │ ├── hammer.js │ ├── index.html │ └── sketch.js │ ├── 23_hammerjs_swipe_directions │ ├── hammer.js │ ├── index.html │ ├── sketch.js │ └── style.css │ ├── 24_hammerjs_swipe │ ├── hammer.js │ ├── index.html │ └── sketch.js │ ├── hammerjs_instance │ ├── hammer.js │ ├── index.html │ ├── sketch.js │ └── style.css │ └── p5.js ├── week1 ├── 00_empty_html_js_example │ └── index.html ├── 01_p5_empty_example │ ├── index.html │ ├── p5.js │ └── sketch.js ├── 02_p5_simple_example │ ├── index.html │ └── sketch.js ├── 03_processing_p5_conversion_0 │ ├── examples-basics-form-bezier.pde │ ├── index.html │ └── sketch.js ├── 04_processing_p5_conversion_1 │ ├── examples-basics-form-bezier.pde │ ├── index.html │ └── sketch.js ├── 05_processing_p5_conversion_2 │ ├── examples-topics-interaction-follow3.pde │ ├── index.html │ └── sketch.js ├── 06_array_of_numbers │ ├── index.html │ └── sketch.js ├── 07_array_of_images │ ├── burger.png │ ├── chickens.jpg │ ├── fish.png │ ├── flower.png │ ├── index.html │ └── sketch.js └── p5 │ ├── addons │ ├── p5.dom.js │ └── p5.sound.js │ ├── empty-example │ ├── index.html │ └── sketch.js │ └── p5.min.js ├── week2 ├── 00_objects │ ├── index.html │ ├── p5.js │ └── sketch.js ├── 01_multiple_objects │ ├── index.html │ ├── p5.js │ └── sketch.js ├── 02_objects_2 │ ├── index.html │ ├── p5.js │ └── sketch.js ├── 03_array_of_objects │ ├── index.html │ ├── p5.js │ └── sketch.js ├── 04_objects_without_p5.html ├── 05_basic_html.html ├── 06_servi_hello_world │ ├── .tmpscript │ ├── package.json │ └── server.js ├── 07_servi_serve_static │ ├── .tmpscript │ ├── package.json │ ├── public │ │ ├── index.html │ │ └── other.html │ ├── server-exported.js │ └── server.js └── bubbles.jpg ├── week3 ├── 01_css │ ├── 00_simple_css.html │ └── 01_external_css_file │ │ ├── index.html │ │ └── style.css ├── 02_dom_pure_js │ ├── 01_DOM_basics.html │ ├── 02_setTimeout.html │ ├── 03_setInterval.html │ ├── 04_rotating_text.html │ ├── 05_rotating_src.html │ ├── 06_addEventListener.html │ ├── 07_addEventListener_with_this.html │ ├── 08_mouseover_mouseout copy.html │ ├── 09_window_resize.html │ ├── 10_window_load.html │ └── images │ │ ├── colors.jpg │ │ ├── cookies.jpg │ │ ├── people.jpg │ │ ├── princess.jpg │ │ └── sander.jpg ├── 03_dom_jquery │ ├── index.html │ └── sketch.js ├── 04_dom_p5 │ ├── 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 │ └── 15_wordscrambler │ │ ├── index.html │ │ └── sketch.js └── 05_objects │ ├── 01_objects_p5 │ ├── index.html │ ├── p5.js │ └── sketch.js │ ├── 02_multiple_objects_p5 │ ├── index.html │ ├── p5.js │ └── sketch.js │ ├── 03_objects_2_p5 │ ├── index.html │ ├── p5.js │ └── sketch.js │ ├── 04_array_of_objects_p5 │ ├── index.html │ ├── p5.js │ └── sketch.js │ └── 05_objects_without_p5.html ├── week4 └── servi_serve_static │ ├── .tmpscript │ ├── package.json │ ├── public │ ├── index.html │ └── other.html │ ├── server-exported.js │ └── server.js ├── week5 ├── 00_callback_setTimeout.html ├── 01_p5_examples │ ├── 00_loadStrings │ │ ├── index.html │ │ ├── lines.txt │ │ └── sketch.js │ ├── 01_loadStrings_p5.dom │ │ ├── index.html │ │ ├── lines.txt │ │ ├── p5.dom.js │ │ └── sketch.js │ ├── 02_loadJSON │ │ ├── data.json │ │ ├── index.html │ │ └── sketch.js │ ├── 03_loadJSON_OOP │ │ ├── data.json │ │ ├── index.html │ │ └── sketch.js │ ├── 04_loadXML │ │ ├── data.xml │ │ ├── index.html │ │ └── sketch.js │ ├── 05_external_API_weather0 │ │ ├── index.html │ │ └── sketch.js │ ├── 06_external_API_weather1 │ │ ├── index.html │ │ └── sketch.js │ ├── 07_external_API_nytimes │ │ ├── index.html │ │ └── sketch.js │ ├── 08_preload_loadStrings │ │ ├── index.html │ │ ├── lines.txt │ │ └── sketch.js │ ├── 09_preload_loadJSON │ │ ├── data.json │ │ ├── index.html │ │ └── sketch.js │ ├── 10_callback_clock │ │ ├── index.html │ │ ├── p5.dom.js │ │ └── sketch.js │ ├── 11_resize_window │ │ ├── index.html │ │ ├── p5.dom.js │ │ └── sketch.js │ ├── 12_weekly_weather_viz │ │ ├── index.html │ │ ├── p5.js │ │ └── sketch.js │ └── 13_weather_motion_input │ │ ├── index.html │ │ ├── p5.dom.js │ │ ├── p5.js │ │ └── sketch.js ├── 02_jquery_examples │ ├── 00_ajax_text │ │ ├── index.html │ │ ├── lines.txt │ │ └── sketch.js │ ├── 01_ajax_json │ │ ├── data.json │ │ ├── index.html │ │ └── sketch.js │ ├── 02_ajax_json_external_API │ │ ├── index.html │ │ └── sketch.js │ ├── 03_getJSON_json │ │ ├── data.json │ │ ├── index.html │ │ └── sketch.js │ └── 04_getJSON_json_external_API │ │ ├── index.html │ │ └── sketch.js ├── 03_servi_examples │ ├── .tmpscript │ └── 01_serve_json │ │ ├── .tmpscript │ │ ├── package.json │ │ ├── public │ │ ├── index.html │ │ └── other.html │ │ └── server.js └── 04_instagram_example │ ├── index.html │ ├── p5.dom.js │ ├── p5.js │ └── sketch.js └── week6 ├── 00_serve_static ├── public │ ├── index.html │ └── other.html └── server.js ├── 01_programmatic_response └── server.js ├── 02_server_variables └── server.js ├── 03_routing └── server.js ├── 04_routing_multiple_paths └── server.js ├── 05_routing_multiple_paths2 └── server.js ├── 06_routing_with_params └── server.js ├── 07_routing_with_params_data └── server.js ├── 08_routing_with_params_data2 └── server.js ├── 09_create_db ├── people.db └── server.js ├── 10_create_db2 ├── people.db └── server.js ├── 11_db_add ├── people.db └── server.js ├── 12_db_search ├── people.db └── server.js ├── 13_serve_json ├── people.db └── server.js ├── 16_template_loop ├── mytemplate.html └── server.js └── extra ├── 03-servi-form-get ├── form.html └── server.js └── 04-servi-form-post ├── form.html └── server.js /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules -------------------------------------------------------------------------------- /Spring-2014/ideas.md: -------------------------------------------------------------------------------- 1 | ###prior workshops and classes (p5) 2 | * http://is.gd/dm7021 - RISD F13 3 | * http://p5js.org/workshop/ - UCLA workshop W13 4 | 5 | ###ideas for "weekly" topics for syllabus 6 | 1. INTRO 7 | * basic intro to JS and JS syntax (from Processing -> JS) - variables, conditionals, loops, simple objects, functions arrays 8 | * intro to workflow with p5.js: sublime, python SimpleHTTPServer, JS console 9 | * what is p5.js behind the scenes? 10 | * assignment: recreate an ICM homework in p5.js 11 | 2. OOP / "functional" stuff 12 | 3. p5.js with DOM elements 13 | 4. p5.js with data / APIs (callbacks) 14 | 5. p5.js reveal -- namespacing, p5.js with other JS frameworks and things? 15 | * JQuery 16 | * box2d, toxiclibs? 17 | * html5 video / popcorn.js 18 | * webrtc / video? 19 | 6. something about connecting to hardware and stuff with node?, mobile? debugging techniques for js 20 | 7. final project presentions 21 | -------------------------------------------------------------------------------- /Spring-2014/week1/array_of_images/burger.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lmccart/itp-creative-js/1f9a0dfd2262e2003698e93edb7825efa95f8c65/Spring-2014/week1/array_of_images/burger.png -------------------------------------------------------------------------------- /Spring-2014/week1/array_of_images/chickens.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lmccart/itp-creative-js/1f9a0dfd2262e2003698e93edb7825efa95f8c65/Spring-2014/week1/array_of_images/chickens.jpg -------------------------------------------------------------------------------- /Spring-2014/week1/array_of_images/fish.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lmccart/itp-creative-js/1f9a0dfd2262e2003698e93edb7825efa95f8c65/Spring-2014/week1/array_of_images/fish.png -------------------------------------------------------------------------------- /Spring-2014/week1/array_of_images/flower.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lmccart/itp-creative-js/1f9a0dfd2262e2003698e93edb7825efa95f8c65/Spring-2014/week1/array_of_images/flower.png -------------------------------------------------------------------------------- /Spring-2014/week1/array_of_images/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /Spring-2014/week1/array_of_images/sketch.js: -------------------------------------------------------------------------------- 1 | // Using a for loop to initialize values. 2 | // Using a for loop to draw. 3 | // Adapted from Getting Started with Processing. 4 | 5 | var images = []; 6 | var curImage = 0; 7 | 8 | function setup() { 9 | 10 | createCanvas(500, 500); 11 | imageMode(CENTER); 12 | 13 | // Add some more images to the array 14 | 15 | var fish = loadImage("fish.png"); 16 | 17 | images.push(fish); 18 | 19 | var burger = loadImage("burger.png"); 20 | images.push(burger); 21 | 22 | images.push(loadImage("chickens.jpg")); 23 | 24 | } 25 | 26 | function draw() { 27 | 28 | background(120, 204, 50); 29 | 30 | // Draw image 31 | image(images[curImage], width/2, height/2, images[curImage].width, images[curImage].height); 32 | 33 | }; 34 | 35 | 36 | function mousePressed() { 37 | 38 | // Increment curImage 39 | curImage = curImage + 1; 40 | 41 | // Make sure curImage is still in range, loop around if necessary 42 | if (curImage == images.length) { 43 | curImage = 0; 44 | print("curimage "+curImage); 45 | } 46 | }; 47 | -------------------------------------------------------------------------------- /Spring-2014/week1/array_of_numbers/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /Spring-2014/week1/array_of_numbers/sketch.js: -------------------------------------------------------------------------------- 1 | // Adapted from Getting Started with Processing 2 | 3 | 4 | var x = []; 5 | 6 | function setup() { 7 | 8 | createCanvas(600, 400); 9 | noStroke(); 10 | fill(255, 152, 0); 11 | 12 | for (var i=0; i<100; i++) { 13 | x.push(random(0, width)); 14 | //x[i] = random(0, width); // works the same 15 | } 16 | } 17 | 18 | function draw() { 19 | 20 | background(126, 138, 162); 21 | 22 | for (var i=0; i width + 5) { 26 | x[i] = -5; 27 | } 28 | 29 | ellipse (x[i], i*5, 10, 10); 30 | } 31 | 32 | } 33 | -------------------------------------------------------------------------------- /Spring-2014/week1/basics/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /Spring-2014/week1/basics/sketch.js: -------------------------------------------------------------------------------- 1 | 2 | var x; // variables 3 | var y; 4 | 5 | function setup() { // function declaration 6 | createCanvas(600, 400); // instead of size() 7 | x = width/2; 8 | y = height/2; 9 | } 10 | 11 | function draw() { 12 | 13 | background(51); 14 | 15 | 16 | fill(255); 17 | ellipse(x, y, 64, 64); 18 | 19 | y = y + random(-1, 1); 20 | 21 | if (mouseX > x) { 22 | x = x + random(0,1); 23 | } else { 24 | x = x - random(0,1); 25 | } 26 | 27 | } 28 | -------------------------------------------------------------------------------- /Spring-2014/week1/empty_example/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /Spring-2014/week1/empty_example/sketch.js: -------------------------------------------------------------------------------- 1 | 2 | 3 | function setup() { 4 | } 5 | 6 | function draw() { 7 | } -------------------------------------------------------------------------------- /Spring-2014/week1/p5_simple_example/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /Spring-2014/week1/p5_simple_example/sketch.js: -------------------------------------------------------------------------------- 1 | function setup() { 2 | 3 | createCanvas(600, 400); 4 | 5 | } 6 | 7 | function draw() { 8 | 9 | // background 10 | background(42, 169, 217); 11 | 12 | // ellipse 13 | fill(242, 228, 21); 14 | ellipse(100,100,100,100); 15 | 16 | //rectangle 17 | fill(162,217, 39); 18 | rect(300,100,150,150); 19 | 20 | } -------------------------------------------------------------------------------- /Spring-2014/week1/processing_p5_conversion_0/examples-basics-form-bezier.pde: -------------------------------------------------------------------------------- 1 | /** 2 | * Bezier. 3 | * 4 | * The first two parameters for the bezier() function specify the 5 | * first point in the curve and the last two parameters specify 6 | * the last point. The middle parameters set the control points 7 | * that define the shape of the curve. 8 | */ 9 | 10 | void setup() { // **change** var setup = function() to void setup() 11 | size(640, 360); // **change** createGraphics() to size() 12 | stroke(255); 13 | noFill(); 14 | } 15 | 16 | void draw() { // **change** var setup = draw() to void draw() 17 | background(0); 18 | for (int i = 0; i < 200; i += 20) { // **change** var i to int i 19 | bezier(mouseX-(i/2.0), 40+i, 410, 20, 440, 300, 240-(i/16.0), 300+(i/8.0)); 20 | } 21 | } -------------------------------------------------------------------------------- /Spring-2014/week1/processing_p5_conversion_0/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /Spring-2014/week1/processing_p5_conversion_0/sketch.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Processing > Ex > Basics > Form > Bezier 3 | * 4 | * Bezier. 5 | * 6 | * The first two parameters for the bezier() function specify the 7 | * first point in the curve and the last two parameters specify 8 | * the last point. The middle parameters set the control points 9 | * that define the shape of the curve. 10 | * 11 | */ 12 | 13 | function setup() { // **change** void setup() to var setup = function() 14 | createCanvas(640, 360); // **change** size() to createCanvas() 15 | stroke(255); // stroke() is the same 16 | noFill(); // noFill() is the same 17 | } 18 | 19 | function draw() { // **change** void draw() to var setup = draw() 20 | background(0); // background() is the same 21 | for (var i = 0; i < 200; i += 20) { // **change** int i to var i 22 | bezier(mouseX-(i/2.0), 40+i, 410, 20, 440, 300, 240-(i/16.0), 300+(i/8.0)); // bezier() is the same 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /Spring-2014/week1/processing_p5_conversion_1/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /Spring-2014/week1/shiffman_demo_inclass/hello_world/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /Spring-2014/week1/shiffman_demo_inclass/hello_world/sketch.js: -------------------------------------------------------------------------------- 1 | 2 | var r = 255; 3 | var g = 0; 4 | var b = 0; 5 | 6 | function setup() { 7 | createCanvas(640,360); 8 | } 9 | 10 | function draw() { 11 | background(r,g,b); 12 | 13 | if (mouseIsPressed) { 14 | background(255); 15 | } 16 | 17 | if (mouseX > 100) { 18 | fill(0,0,255); 19 | rect(100,50,50,25); 20 | } 21 | 22 | for (var i = 0; i < width; i+= 100) { 23 | ellipse(i, 50,20,20); 24 | } 25 | 26 | } 27 | 28 | ///////////////////// 29 | // cd /path/to/directory/with/files 30 | // python -m SimpleHTTPServer 31 | 32 | // Type in browser: 33 | // localhost:8000 34 | 35 | -------------------------------------------------------------------------------- /Spring-2014/week2/00_JS_objects_walkthrough/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /Spring-2014/week2/00_JS_objects_walkthrough/sketch_bubbleobject1.js: -------------------------------------------------------------------------------- 1 | //var x,y; 2 | 3 | var bubble; 4 | 5 | function setup() { 6 | createCanvas(600,400); 7 | //x = width/2; 8 | //y = height; 9 | 10 | bubble = { 11 | x : width/2, 12 | y : height, 13 | w : 100 14 | }; 15 | } 16 | 17 | function draw() { 18 | background(50); 19 | 20 | fill(125); 21 | stroke(255); 22 | ellipse(bubble.x,bubble.y,bubble.w,bubble.w); 23 | 24 | bubble.y = bubble.y - 1; 25 | bubble.x = bubble.x + random(-1,1); 26 | } 27 | 28 | 29 | 30 | -------------------------------------------------------------------------------- /Spring-2014/week2/00_JS_objects_walkthrough/sketch_bubbleobject2_method.js: -------------------------------------------------------------------------------- 1 | var bubble; 2 | 3 | function setup() { 4 | createCanvas(600,400); 5 | 6 | bubble = { 7 | x : width/2, 8 | y : height, 9 | w : 100, 10 | move : function() { 11 | this.x = this.x + random(-1,1); 12 | this.y = this.y - 1; 13 | } 14 | }; 15 | 16 | } 17 | 18 | function draw() { 19 | background(50); 20 | 21 | fill(125); 22 | stroke(255); 23 | ellipse(bubble.x,bubble.y,bubble.w,bubble.w); 24 | bubble.move(); 25 | 26 | //bubble.y = bubble.y - 1; 27 | //bubble.x = bubble.x + random(-1,1); 28 | } 29 | 30 | 31 | 32 | -------------------------------------------------------------------------------- /Spring-2014/week2/00_JS_objects_walkthrough/sketch_bubbleobject3_multiple.js: -------------------------------------------------------------------------------- 1 | var bubble1; 2 | var bubble2; 3 | 4 | function setup() { 5 | createCanvas(600,400); 6 | 7 | bubble1 = { 8 | x : 300, 9 | y : height, 10 | w : 100, 11 | move : function() { 12 | this.x = this.x + random(-1,1); 13 | this.y = this.y - 1; 14 | } 15 | }; 16 | 17 | bubble2 = Object.create(bubble1); 18 | bubble2.x = 100; 19 | bubble2.y = height; 20 | 21 | /*bubble2 = { 22 | x : 100, 23 | y : height, 24 | w : 100, 25 | move : function() { 26 | this.x = this.x + random(-1,1); 27 | this.y = this.y - 1; 28 | } 29 | };*/ 30 | 31 | } 32 | 33 | function draw() { 34 | background(50); 35 | 36 | fill(125); 37 | stroke(255); 38 | ellipse(bubble1.x,bubble1.y,bubble1.w,bubble1.w); 39 | bubble1.move(); 40 | 41 | ellipse(bubble2.x,bubble2.y,bubble2.w,bubble2.w); 42 | bubble2.move(); 43 | 44 | 45 | } 46 | 47 | 48 | 49 | -------------------------------------------------------------------------------- /Spring-2014/week2/00_JS_objects_walkthrough/sketch_bubbleobject4_constructor.js: -------------------------------------------------------------------------------- 1 | var bubble1; 2 | var bubble2; 3 | 4 | function Bubble() { 5 | this.x = 300; 6 | this.y = height; 7 | this.w = 100; 8 | this.move = function() { 9 | this.x = this.x + random(-1,1); 10 | this.y = this.y - 1; 11 | }; 12 | } 13 | 14 | function setup() { 15 | createCanvas(600,400); 16 | 17 | bubble1 = new Bubble(); 18 | 19 | bubble2 = new Bubble(); //Object.create(bubble1); 20 | bubble2.x = 100; 21 | 22 | /*bubble2 = { 23 | x : 100, 24 | y : height, 25 | w : 100, 26 | move : function() { 27 | this.x = this.x + random(-1,1); 28 | this.y = this.y - 1; 29 | } 30 | };*/ 31 | 32 | } 33 | 34 | function draw() { 35 | background(50); 36 | 37 | fill(125); 38 | stroke(255); 39 | ellipse(bubble1.x,bubble1.y,bubble1.w,bubble1.w); 40 | bubble1.move(); 41 | 42 | ellipse(bubble2.x,bubble2.y,bubble2.w,bubble2.w); 43 | bubble2.move(); 44 | 45 | 46 | } 47 | 48 | 49 | 50 | -------------------------------------------------------------------------------- /Spring-2014/week2/00_JS_objects_walkthrough/sketch_bubbleobject5_constructor_arguments.js: -------------------------------------------------------------------------------- 1 | var bubble1; 2 | var bubble2; 3 | 4 | function Bubble(x_) { 5 | this.x = x_; 6 | this.y = height; 7 | this.w = 100; 8 | this.move = function() { 9 | this.x = this.x + random(-1,1); 10 | this.y = this.y - 1; 11 | }; 12 | } 13 | 14 | function setup() { 15 | createCanvas(600,400); 16 | 17 | bubble1 = new Bubble(300); 18 | bubble2 = new Bubble(100); //Object.create(bubble1); 19 | 20 | } 21 | 22 | function draw() { 23 | background(50); 24 | 25 | fill(125); 26 | stroke(255); 27 | ellipse(bubble1.x,bubble1.y,bubble1.w,bubble1.w); 28 | bubble1.move(); 29 | 30 | ellipse(bubble2.x,bubble2.y,bubble2.w,bubble2.w); 31 | bubble2.move(); 32 | 33 | 34 | } 35 | 36 | 37 | 38 | -------------------------------------------------------------------------------- /Spring-2014/week2/00_JS_objects_walkthrough/sketch_bubbleobject6_prototypeadd.js: -------------------------------------------------------------------------------- 1 | var bubble1; 2 | var bubble2; 3 | 4 | var Bubble = function (x_) { 5 | this.x = x_; 6 | this.y = height; 7 | this.w = 100; 8 | } 9 | 10 | Bubble.prototype.move = function() { 11 | this.x = this.x + random(-1,1); 12 | this.y = this.y - 1; 13 | }; 14 | 15 | function setup() { 16 | createCanvas(600,400); 17 | 18 | bubble1 = new Bubble(300); 19 | bubble2 = new Bubble(100); //Object.create(bubble1); 20 | 21 | } 22 | 23 | function draw() { 24 | background(50); 25 | 26 | fill(125); 27 | stroke(255); 28 | ellipse(bubble1.x,bubble1.y,bubble1.w,bubble1.w); 29 | bubble1.move(); 30 | 31 | ellipse(bubble2.x,bubble2.y,bubble2.w,bubble2.w); 32 | bubble2.move(); 33 | 34 | 35 | } 36 | 37 | 38 | 39 | -------------------------------------------------------------------------------- /Spring-2014/week2/01_object_example/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /Spring-2014/week2/02_parameterized_objects/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /Spring-2014/week2/03_array_of_objects/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /Spring-2014/week2/04_array_interactive_objects/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /Spring-2014/week2/04_array_interactive_objects/sketch.js: -------------------------------------------------------------------------------- 1 | // Learning Processing 2 | // Daniel Shiffman 3 | // http://www.learningprocessing.com 4 | 5 | // Example 9-10: Interactive stripes 6 | 7 | // An array of stripes 8 | var stripes = new Array(10); 9 | 10 | function setup() { 11 | createCanvas(640,360); 12 | 13 | // Initialize all Stripe objects 14 | for (var i = 0; i < stripes.length; i ++ ) { 15 | stripes[i] = new Stripe(); 16 | } 17 | } 18 | 19 | function draw() { 20 | 21 | background(100); 22 | // Move and display all Stripe objects 23 | for (var i = 0; i < stripes.length; i++ ) { 24 | // Check if mouse is over the Stripe 25 | stripes[i].rollover(mouseX,mouseY); // Passing the mouse coordinates into an object. 26 | stripes[i].move(); 27 | stripes[i].display(); 28 | } 29 | } 30 | -------------------------------------------------------------------------------- /Spring-2014/week2/05_array_of_objects_push/ball.js: -------------------------------------------------------------------------------- 1 | // Learning Processing 2 | // Daniel Shiffman 3 | // http://www.learningprocessing.com 4 | 5 | // Example 9-11 ported to p5.js 6 | 7 | function Ball(tempX, tempY, tempW) { 8 | this.x = tempX; 9 | this.y = tempY; 10 | this.w = tempW; 11 | this.speed = 0; 12 | } 13 | 14 | Ball.prototype.gravity = function() { 15 | // Add gravity to speed 16 | this.speed = this.speed + gravity; 17 | } 18 | 19 | Ball.prototype.move = function() { 20 | // Add speed to y location 21 | this.y = this.y + this.speed; 22 | // If square reaches the bottom 23 | // Reverse speed 24 | if (this.y > height) { 25 | this.speed = this.speed * -0.95; 26 | this.y = height; 27 | } 28 | } 29 | 30 | Ball.prototype.display = function() { 31 | // Display the circle 32 | fill(101); 33 | stroke(255); 34 | ellipse(this.x,this.y,this.w,this.w); 35 | } 36 | 37 | -------------------------------------------------------------------------------- /Spring-2014/week2/05_array_of_objects_push/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /Spring-2014/week2/05_array_of_objects_push/sketch.js: -------------------------------------------------------------------------------- 1 | // Learning Processing 2 | // Daniel Shiffman 3 | // http://www.learningprocessing.com 4 | 5 | // Example 9-11 ported to p5.js 6 | // Resizing an array is JS is as easy as "push()" 7 | 8 | var balls = []; // We start with an empty array 9 | var gravity = 0.1; 10 | 11 | function setup() { 12 | createCanvas(640,360); 13 | 14 | // Initialize ball index 0 15 | balls.push(new Ball(50,0,24)); 16 | } 17 | 18 | function draw() { 19 | background(51); 20 | 21 | // Update and display all balls 22 | for (var i = 0; i < balls.length; i ++ ) { // Whatever the length of that array, update and display all of the objects. 23 | balls[i].gravity(); 24 | balls[i].move(); 25 | balls[i].display(); 26 | } 27 | } 28 | 29 | function mousePressed() { 30 | // A new ball object 31 | var b = new Ball(mouseX,mouseY,24); // Make a new object at the mouse location. 32 | // Here, the function push() adds an element to the end of the array. 33 | balls.push(b); 34 | } 35 | -------------------------------------------------------------------------------- /Spring-2014/week2/06_inheritance/ball.js: -------------------------------------------------------------------------------- 1 | function Ball(x, y, gray) { 2 | this.xpos = x; 3 | this.ypos = y; 4 | this.radius = 30; 5 | this.gray = gray; 6 | } 7 | 8 | Ball.prototype.display = function() { 9 | ellipseMode(CENTER); 10 | fill(this.gray); 11 | ellipse(this.xpos, this.ypos, this.radius, this.radius); 12 | }; 13 | 14 | Ball.prototype.move = function() { 15 | this.xpos++; 16 | if (this.xpos > width - this.radius) { 17 | this.xpos = -this.radius; 18 | } 19 | }; -------------------------------------------------------------------------------- /Spring-2014/week2/06_inheritance/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /Spring-2014/week2/06_inheritance/superball.js: -------------------------------------------------------------------------------- 1 | function SuperBall(x, y, gray) { 2 | // Call the parent constructor 3 | Ball.call(this, x, y, gray); 4 | console.log(this); 5 | } 6 | 7 | SuperBall.prototype = new Ball(); 8 | 9 | SuperBall.prototype.constructor = SuperBall; 10 | 11 | // This overwrites the Ball move method 12 | SuperBall.prototype.move = function() { 13 | this.xpos += 2; 14 | if (this.xpos > width - this.radius) { 15 | this.xpos = -this.radius; 16 | } 17 | }; 18 | 19 | // This adds a new method that only SuperBall has 20 | SuperBall.prototype.change = function() { 21 | this.gray = sin(frameCount*0.1)*125+125; 22 | }; 23 | 24 | -------------------------------------------------------------------------------- /Spring-2014/week3/00_preload/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /Spring-2014/week3/00_preload/large.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lmccart/itp-creative-js/1f9a0dfd2262e2003698e93edb7825efa95f8c65/Spring-2014/week3/00_preload/large.jpg -------------------------------------------------------------------------------- /Spring-2014/week3/00_preload/sketch.js: -------------------------------------------------------------------------------- 1 | // In this example, we want to load a *large* (2MegaPixels) 2 | // image and display it in setup(). 3 | // 4 | // Since setup() happens quickly at the beginning, the image doesn't 5 | // have time to properly load before setup() is done. 6 | // 7 | // We are introducing preload() where you can run load 8 | // operations that are guaranteed to complete by setup(). 9 | // This is called asynchronous loading, because it happens whenever 10 | // the computer is done and ready, not necessarily when you call it. 11 | 12 | var largeImage; 13 | 14 | 15 | 16 | function preload() { 17 | largeImage = loadImage('large.jpg'); // loading the image here is too slow 18 | println("PRELOAD!"); 19 | } 20 | 21 | function setup() { 22 | createCanvas(1300, 600); 23 | image(largeImage, 0, 0); 24 | println("SETUP!"); 25 | } 26 | 27 | function draw() { 28 | 29 | } 30 | 31 | window.onload = function() { 32 | println("DOM LOADED!"); 33 | } 34 | 35 | console.log("WINDOW NONSENSE"); 36 | 37 | 38 | 39 | 40 | 41 | 42 | -------------------------------------------------------------------------------- /Spring-2014/week3/00_preload/small.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lmccart/itp-creative-js/1f9a0dfd2262e2003698e93edb7825efa95f8c65/Spring-2014/week3/00_preload/small.jpg -------------------------------------------------------------------------------- /Spring-2014/week3/01_position_canvas/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /Spring-2014/week3/01_position_canvas/sketch.js: -------------------------------------------------------------------------------- 1 | 2 | function setup() { 3 | var canvas = createCanvas(600, 400); 4 | canvas.position(50, 50); 5 | } 6 | 7 | function draw() { 8 | background(250, 120, 200); 9 | fill(255); 10 | ellipse(width/2, height/2, 100, 100); 11 | ellipse(width/4, height/2, 50, 50); 12 | fill(50, 100, 200); 13 | ellipse(mouseX, mouseY, 25, 25); 14 | } -------------------------------------------------------------------------------- /Spring-2014/week3/02_html_css/one.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | JS<3 6 | 7 | 8 | 9 | 10 | Hooray for JavaScript!! 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /Spring-2014/week3/02_html_css/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | font-size: 18px; 3 | padding: 40px; 4 | } -------------------------------------------------------------------------------- /Spring-2014/week3/02_html_css/two.html: -------------------------------------------------------------------------------- 1 | 2 | Hello HTML! 3 | 15 | 16 | 17 | 18 |

This is a paragraph

19 |

This is a paragraph

20 |

This is a paragraph

21 | 22 |
    23 |
  1. This is one
    2. 24 |
  2. This is two
    3. 25 |
26 | -------------------------------------------------------------------------------- /Spring-2014/week3/03_add_p_element/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /Spring-2014/week3/03_add_p_element/sketch.js: -------------------------------------------------------------------------------- 1 | 2 | function setup() { 3 | 4 | // We are still calling createCanvas like in the past, but now we are storing the result as a variable. 5 | // This way we can call methods of the element, to set the position for instance. 6 | 7 | var text = createP("This is an HTML string!"); 8 | var canvas = createCanvas(600, 400); 9 | 10 | // Here we call methods of each element to set the position and id, try changing these values. 11 | // Use the inspector to look at the HTML generated from this code when you load the sketch in your browser. 12 | text.position(50, 50); 13 | text.id("apple"); 14 | canvas.position(300, 50); 15 | canvas.id("pear"); 16 | 17 | } 18 | 19 | 20 | function draw() { 21 | 22 | background(250, 120, 200); 23 | ellipse(width/2, height/2, 100, 100); 24 | ellipse(width/4, height/2, 50, 50); 25 | 26 | } 27 | -------------------------------------------------------------------------------- /Spring-2014/week3/04_parent_child/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /Spring-2014/week3/04_parent_child/sketch.js: -------------------------------------------------------------------------------- 1 | function setup() { 2 | 3 | // Now let's try putting some more HTML in. 4 | var text = createP("Here is some text and this is an HTML link! "); 5 | var link = createA("http://i.imgur.com/WXaUlrK.gif","We can also create a link this way.") 6 | var canvas = createCanvas(600, 400); 7 | 8 | // We are letting the elements float (no absolute positioning) 9 | // Also ids and classes 10 | text.id("apple"); 11 | link.id("pear"); 12 | canvas.class("lemon"); 13 | 14 | // We can put the link element inside the paragraph one with child() 15 | text.child("pear"); 16 | } 17 | 18 | 19 | function draw() { 20 | background(250, 120, 200); 21 | ellipse(width/2, height/2, 100, 100); 22 | ellipse(width/4, height/2, 50, 50); 23 | } 24 | -------------------------------------------------------------------------------- /Spring-2014/week3/05_style_functions/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /Spring-2014/week3/05_style_functions/sketch.js: -------------------------------------------------------------------------------- 1 | // Creating other HTML elements, adding style. 2 | 3 | function setup() { 4 | noCanvas(); 5 | var text = createP("This is an HTML string with style!"); 6 | // With the style method we can pass in CSS directly in our code 7 | text.style("font-family", "monospace"); 8 | text.style("background-color", "#FF0000"); 9 | text.style("color", "#FFFFFF"); 10 | text.style("font-size", "18pt"); 11 | text.style("padding", "10px"); 12 | } 13 | 14 | 15 | // Temporary until https://github.com/lmccart/p5.js/pull/354 16 | function noCanvas() { 17 | var c = document.getElementById('defaultCanvas'); 18 | if (c) { 19 | c.parentNode.removeChild(c); 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /Spring-2014/week3/06_style_css/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /Spring-2014/week3/06_style_css/sketch.js: -------------------------------------------------------------------------------- 1 | // Creating other HTML elements, adding style. 2 | 3 | 4 | function setup() { 5 | noCanvas(); 6 | var text = createP("This is an HTML string with style!"); 7 | text.id("apple"); 8 | } 9 | 10 | 11 | // Temporary until https://github.com/lmccart/p5.js/pull/354 12 | function noCanvas() { 13 | var c = document.getElementById('defaultCanvas'); 14 | if (c) { 15 | c.parentNode.removeChild(c); 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /Spring-2014/week3/06_style_css/style.css: -------------------------------------------------------------------------------- 1 | #apple { 2 | font-family: monospace; 3 | background-color: #FF0000; 4 | color: #FFFFFF; 5 | font-size: 18pt; 6 | padding: 10px; 7 | } -------------------------------------------------------------------------------- /Spring-2014/week3/07_mousepressed/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /Spring-2014/week3/07_mousepressed/sketch.js: -------------------------------------------------------------------------------- 1 | // Using HTML element specific mouse listeners, mousePressed. 2 | 3 | // We define the variables outside of setup so we can access them from anywhere in the sketch. 4 | var link; 5 | var bg; 6 | 7 | function setup() { 8 | createCanvas(400, 400); 9 | bg = color(51); 10 | 11 | link = createA("#","Click me"); 12 | // Attach listeners for mouse events related to img. 13 | link.mousePressed(changeBG); 14 | 15 | } 16 | 17 | function draw() { 18 | background(bg); 19 | } 20 | 21 | function changeBG() { 22 | bg = color(random(255)); 23 | } 24 | -------------------------------------------------------------------------------- /Spring-2014/week3/07_setting_class/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /Spring-2014/week3/07_setting_class/sketch.js: -------------------------------------------------------------------------------- 1 | // Using find. 2 | 3 | var elt0; 4 | var elt1; 5 | var elt2; 6 | 7 | function setup() { 8 | 9 | elt0 = createHTML("element 0"); 10 | elt1 = createHTML("element 1"); 11 | elt2 = createHTML("element 2"); 12 | 13 | // Let's give the first two elements class donkey, and the third class yogurt. 14 | elt0.position(50, 50); 15 | elt0.class('donkey'); 16 | elt1.position(300, 50); 17 | elt1.class('donkey'); 18 | elt2.position(550, 50); 19 | elt2.class('yogurt'); 20 | }; 21 | 22 | 23 | function draw() { 24 | 25 | 26 | }; 27 | 28 | // On key press, hide all elements with class donkey. 29 | function keyPressed() { 30 | var donkeys = getClass('donkey'); 31 | for (var i=0; i 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /Spring-2014/week3/09_getElements/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /Spring-2014/week3/09_getElements/sketch.js: -------------------------------------------------------------------------------- 1 | // Creating other HTML elements, adding style. 2 | 3 | function setup() { 4 | 5 | // Create three elements 6 | var text0 = createP("red"); 7 | var text1 = createP("blue"); 8 | var text2 = createP("green"); 9 | 10 | text0.style("color","red"); 11 | text0.style("font-size","50px"); 12 | // Set the class for an element 13 | text0.class("apple"); 14 | 15 | text1.style("color","blue"); 16 | text1.style("font-size","50px"); 17 | // This one has the same class 18 | text1.class("apple"); 19 | 20 | text2.style("color","green"); 21 | text2.style("font-size","50px"); 22 | // This one has a different class 23 | text2.class("pear"); 24 | 25 | }; 26 | 27 | 28 | function mousePressed() { 29 | // Get an array of elements of the same class 30 | var apples = getElements("apple"); 31 | // Hid them all! 32 | for (var i=0; i 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /Spring-2014/week3/10_getElement/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /Spring-2014/week3/10_mouseover_mouseout/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /Spring-2014/week3/11_animateDOM/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /Spring-2014/week3/12_button_slider/ball.js: -------------------------------------------------------------------------------- 1 | // Learning Processing 2 | // Daniel Shiffman 3 | // http://www.learningprocessing.com 4 | 5 | // Example 9-11 ported to p5.js 6 | 7 | function Ball(tempX, tempY, tempW) { 8 | this.x = tempX; 9 | this.y = tempY; 10 | this.w = tempW; 11 | this.speed = 0; 12 | } 13 | 14 | Ball.prototype.gravity = function() { 15 | // Add gravity to speed 16 | this.speed = this.speed + gravity; 17 | } 18 | 19 | Ball.prototype.move = function() { 20 | // Add speed to y location 21 | this.y = this.y + this.speed; 22 | // If square reaches the bottom 23 | // Reverse speed 24 | if (this.y > height) { 25 | this.speed = this.speed * -0.95; 26 | this.y = height; 27 | } 28 | } 29 | 30 | Ball.prototype.display = function() { 31 | // Display the circle 32 | fill(101); 33 | stroke(255); 34 | ellipse(this.x,this.y,this.w,this.w); 35 | } 36 | 37 | -------------------------------------------------------------------------------- /Spring-2014/week3/12_button_slider/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /Spring-2014/week3/13_wordscrambler/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /Spring-2014/week3/shiffman_inclass/canvas_dom/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /Spring-2014/week3/shiffman_inclass/canvas_dom/sketch.js: -------------------------------------------------------------------------------- 1 | 2 | // Two canvases! 3 | var canvas1; 4 | var canvas2; 5 | 6 | // Location of one canvas 7 | var x = 0; 8 | var speed = 5; 9 | 10 | // Location of circle on canvas 11 | var ballx = 0; 12 | 13 | function setup() { 14 | // Make both canvases 15 | canvas1 = createCanvas(300,200); 16 | canvas2 = createCanvas(300,200); 17 | } 18 | 19 | function draw() { 20 | // Canvas one is on one side 21 | canvas1.position(x,100); 22 | // Canvas two is on the other side 23 | canvas2.position(displayWidth-x-300,100); 24 | 25 | // logic 26 | x = x + speed; 27 | ballx = ballx + speed; 28 | 29 | if (ballx > width || ballx < 0) { 30 | speed *= -1; 31 | } 32 | 33 | // Now deal with drawing on canvas 1 34 | context(canvas1); 35 | background(0); 36 | fill(255); 37 | ellipse(ballx,100,40,40); 38 | 39 | // No wdeal with drawing on canvas 2 40 | context(canvas2); 41 | background(255,0,0); 42 | } 43 | 44 | function keyPressed() { 45 | //canvas.hide(); 46 | } 47 | -------------------------------------------------------------------------------- /Spring-2014/week3/shiffman_inclass/htmlElement/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 15 | 16 | 17 | 18 |

This is a paragraph

19 |

This is a paragraph

20 |

This is a paragraph

21 | 22 |
    23 |
  1. This is one
    2. 24 |
  2. This is two
    3. 25 |
26 | -------------------------------------------------------------------------------- /Spring-2014/week4/00_preload_loadImage/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /Spring-2014/week4/00_preload_loadImage/large.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lmccart/itp-creative-js/1f9a0dfd2262e2003698e93edb7825efa95f8c65/Spring-2014/week4/00_preload_loadImage/large.jpg -------------------------------------------------------------------------------- /Spring-2014/week4/00_preload_loadImage/sketch.js: -------------------------------------------------------------------------------- 1 | // In this example, we want to load a *large* (2MegaPixels) 2 | // image and display it in setup(). 3 | // 4 | // Since setup() happens quickly at the beginning, the image doesn't 5 | // have time to properly load before setup() is done. 6 | // 7 | // We are introducing preload() where you can run load 8 | // operations that are guaranteed to complete by setup(). 9 | // This is called asynchronous loading, because it happens whenever 10 | // the computer is done and ready, not necessarily when you call it. 11 | 12 | var largeImage; 13 | 14 | function preload() { 15 | largeImage = loadImage('large.jpg'); // preloading the image guarantees it will be ready by setup() 16 | } 17 | 18 | function setup() { 19 | createCanvas(1300, 600); 20 | // largeImage = loadImage('large.jpg'); // loading the image here is too slow 21 | noLoop(); 22 | } 23 | 24 | function draw() { 25 | // do nothing 26 | image(largeImage, 0, 0); 27 | } 28 | 29 | 30 | 31 | 32 | 33 | -------------------------------------------------------------------------------- /Spring-2014/week4/00_preload_loadImage/small.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lmccart/itp-creative-js/1f9a0dfd2262e2003698e93edb7825efa95f8c65/Spring-2014/week4/00_preload_loadImage/small.jpg -------------------------------------------------------------------------------- /Spring-2014/week4/01_preload_loadStrings/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /Spring-2014/week4/01_preload_loadStrings/sketch.js: -------------------------------------------------------------------------------- 1 | var lines; 2 | 3 | function preload() { 4 | lines = loadStrings("lines.txt"); 5 | } 6 | 7 | function setup() { 8 | createCanvas(600, 400); 9 | //lines = loadStrings("lines.txt"); // doesn't load in time 10 | textSize(20); 11 | fill(0); 12 | noLoop(); 13 | } 14 | 15 | function draw() { 16 | for (var i=0; i 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /Spring-2014/week4/01_preload_loadStrings_DOM/sketch.js: -------------------------------------------------------------------------------- 1 | var lines; 2 | 3 | var htmls = []; 4 | 5 | function preload() { 6 | lines = loadStrings("lines.txt"); 7 | } 8 | 9 | function setup() { 10 | createCanvas(displayWidth, displayHeight); 11 | for (var i=0; i 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /Spring-2014/week4/02_json/sketch.js: -------------------------------------------------------------------------------- 1 | 2 | var foo = { 3 | bar: "new property", 4 | baz: 3 5 | }; 6 | 7 | var JSONfoo = JSON.stringify(foo); 8 | var backToFoo; 9 | 10 | 11 | function setup() { 12 | print(foo); 13 | print(JSONfoo); 14 | } 15 | 16 | function draw() { 17 | 18 | } 19 | 20 | function mousePressed() { 21 | backToFoo = JSON.parse(JSONfoo); 22 | print(backToFoo); 23 | } 24 | 25 | 26 | 27 | 28 | 29 | -------------------------------------------------------------------------------- /Spring-2014/week4/03_preload_loadJSON/data.json: -------------------------------------------------------------------------------- 1 | { "person1" : { 2 | "name": "Morgan", 3 | "age": "30", 4 | "location": "Boston", 5 | "desire": "Singing", 6 | "fear": "Violence" 7 | }, 8 | "person2": { 9 | "name": "Joss", 10 | "age": "42", 11 | "location": "Boston", 12 | "desire": "Hiking", 13 | "fear": "Irrationality" 14 | } 15 | } -------------------------------------------------------------------------------- /Spring-2014/week4/03_preload_loadJSON/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /Spring-2014/week4/03_preload_loadJSON/sketch.js: -------------------------------------------------------------------------------- 1 | var data; 2 | 3 | function preload() { 4 | data = loadJSON("data.json"); 5 | } 6 | 7 | function setup() { 8 | createCanvas(600, 400); 9 | noLoop(); 10 | noStroke(); 11 | textSize(20); 12 | } 13 | 14 | function draw() { 15 | console.log(data); 16 | background(120, 180, 200); 17 | 18 | 19 | // 20 | // You can access JSON values by using a '.' followed by the key 21 | // 22 | // data.person1.name = "Morgan" 23 | // data.person2.name = "Joss" 24 | // 25 | 26 | // person 1 bubble 27 | fill(155, 30, 180, 180); 28 | ellipse(250, 200, data.person1.age * 5, data.person1.age * 5); // person1.age = 30 29 | fill(255); 30 | text(data.person1.name, 210, 200); // person1.name = Morgan 31 | 32 | // person 2 bubble 33 | fill(180, 180, 34, 180); 34 | ellipse(350, 200, data.person2.age * 5, data.person2.age * 5); // person2.age = 32 35 | fill(255); 36 | text(data.person2.name, 330, 200); // person2.name = Joss 37 | } 38 | -------------------------------------------------------------------------------- /Spring-2014/week4/03_preload_loadJSON_OOP/data.json: -------------------------------------------------------------------------------- 1 | [ { 2 | "name": "Morgan", 3 | "age": "30", 4 | "location": "Boston", 5 | "desire": "Singing", 6 | "fear": "Violence" 7 | }, 8 | { 9 | "name": "Joss", 10 | "age": "42", 11 | "location": "Boston", 12 | "desire": "Hiking", 13 | "fear": "Irrationality" 14 | } 15 | ] -------------------------------------------------------------------------------- /Spring-2014/week4/03_preload_loadJSON_OOP/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /Spring-2014/week4/04_callback/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /Spring-2014/week4/04_callback/sketch.js: -------------------------------------------------------------------------------- 1 | var elt; 2 | 3 | function setup() { 4 | elt = createHTML("hello world"); 5 | elt.style("padding:50px; font-size:50px;"); 6 | elt.mousePressed(changeText); 7 | } 8 | 9 | function changeText() { 10 | elt.html("goodbye world"); 11 | } -------------------------------------------------------------------------------- /Spring-2014/week4/05_callback_anonymous/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /Spring-2014/week4/05_callback_anonymous/sketch.js: -------------------------------------------------------------------------------- 1 | var elt; 2 | 3 | function setup() { 4 | elt = createHTML("hello world"); 5 | elt.style("padding:50px; font-size:50px;"); 6 | elt.mousePressed(function() { 7 | elt.html("goodbye world"); 8 | }); 9 | } 10 | -------------------------------------------------------------------------------- /Spring-2014/week4/06_callback_loadImage/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /Spring-2014/week4/06_callback_loadImage/large.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lmccart/itp-creative-js/1f9a0dfd2262e2003698e93edb7825efa95f8c65/Spring-2014/week4/06_callback_loadImage/large.jpg -------------------------------------------------------------------------------- /Spring-2014/week4/06_callback_loadImage/sketch.js: -------------------------------------------------------------------------------- 1 | function setup() { 2 | createCanvas(1300, 600); 3 | noLoop(); 4 | 5 | loadImage('large.jpg', drawImage); 6 | setTimeout(smaller,500); 7 | } 8 | 9 | function smaller() { 10 | loadImage('small.jpg', drawImage); 11 | 12 | } 13 | 14 | function draw() { 15 | background(255, 0, 0); 16 | } 17 | 18 | function drawImage(img) { 19 | image(img, 0, 0); 20 | } 21 | 22 | 23 | 24 | 25 | -------------------------------------------------------------------------------- /Spring-2014/week4/06_callback_loadImage/small.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lmccart/itp-creative-js/1f9a0dfd2262e2003698e93edb7825efa95f8c65/Spring-2014/week4/06_callback_loadImage/small.jpg -------------------------------------------------------------------------------- /Spring-2014/week4/06_callback_loadImage_OOP/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /Spring-2014/week4/06_callback_loadImage_OOP/large.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lmccart/itp-creative-js/1f9a0dfd2262e2003698e93edb7825efa95f8c65/Spring-2014/week4/06_callback_loadImage_OOP/large.jpg -------------------------------------------------------------------------------- /Spring-2014/week4/06_callback_loadImage_OOP/sketch.js: -------------------------------------------------------------------------------- 1 | // This example does not work at the moment 2 | // See: https://github.com/lmccart/p5.js/issues/186 3 | 4 | var a; 5 | var b; 6 | 7 | function setup() { 8 | createCanvas(1300, 600); 9 | //noLoop(); 10 | a = new ImageThing(0,0,'large.jpg'); 11 | b = new ImageThing(100,100,'small.jpg'); 12 | } 13 | 14 | function draw() { 15 | background(255, 0, 0); 16 | a.update(); 17 | a.display(); 18 | 19 | b.update(); 20 | b.display(); 21 | } 22 | 23 | function ImageThing(x,y,s) { 24 | this.x = x; 25 | this.y = y; 26 | this.img = null; 27 | 28 | var self = this; 29 | var loaded = function(incoming) { 30 | self.img = incoming; 31 | }; 32 | loadImage(s, loaded); 33 | } 34 | 35 | ImageThing.prototype.update = function() { 36 | this.x += random(-2,2); 37 | this.y += random(-2,2); 38 | }; 39 | 40 | ImageThing.prototype.display = function() { 41 | if (!this.img) { 42 | fill(0); 43 | text("LOADING",this.x,this.y); 44 | } else { 45 | image(this.img,this.x,this.y); 46 | } 47 | }; -------------------------------------------------------------------------------- /Spring-2014/week4/06_callback_loadImage_OOP/small.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lmccart/itp-creative-js/1f9a0dfd2262e2003698e93edb7825efa95f8c65/Spring-2014/week4/06_callback_loadImage_OOP/small.jpg -------------------------------------------------------------------------------- /Spring-2014/week4/07_callback_loadStrings/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /Spring-2014/week4/07_callback_loadStrings/sketch.js: -------------------------------------------------------------------------------- 1 | // var lines; 2 | 3 | // function preload() { 4 | // lines = loadStrings("lines.txt"); 5 | // } 6 | 7 | function setup() { 8 | createCanvas(600, 400); 9 | textSize(20); 10 | fill(0); 11 | noLoop(); 12 | 13 | loadStrings("lines.txt", doText); 14 | } 15 | 16 | function draw() { 17 | background(255, 0, 0); 18 | 19 | } 20 | 21 | function doText(data) { 22 | for (var i=0; i 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /Spring-2014/week4/07_callback_loadStrings_DOM/sketch.js: -------------------------------------------------------------------------------- 1 | // var lines; 2 | 3 | // function preload() { 4 | // lines = loadStrings("lines.txt"); 5 | // } 6 | 7 | function setup() { 8 | noLoop(); 9 | loadStrings("lines.txt", doText); 10 | } 11 | 12 | function doText(data) { 13 | for (var i=0; i 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /Spring-2014/week4/08_callback_loadJSON/sketch.js: -------------------------------------------------------------------------------- 1 | 2 | function setup() { 3 | createCanvas(600, 400); 4 | noLoop(); 5 | noStroke(); 6 | textSize(20); 7 | 8 | loadJSON("data.json", drawData); 9 | } 10 | 11 | function draw() { 12 | background(255, 0, 0); 13 | } 14 | 15 | 16 | function drawData(data) { 17 | 18 | background(120, 180, 200); 19 | 20 | // person 1 bubble 21 | fill(155, 30, 180, 180); 22 | ellipse(250, 200, data.person1.age * 5, data.person1.age * 5); // person1.age = 30 23 | fill(255); 24 | text(data.person1.name, 210, 200); // person1.name = Morgan 25 | 26 | // person 2 bubble 27 | fill(180, 180, 34, 180); 28 | ellipse(350, 200, data.person2.age * 5, data.person2.age * 5); // person2.age = 32 29 | fill(255); 30 | text(data.person2.name, 330, 200); // person2.name = Joss 31 | 32 | } -------------------------------------------------------------------------------- /Spring-2014/week4/08_callback_loadJSON_OOP/data.json: -------------------------------------------------------------------------------- 1 | [ { 2 | "name": "Morgan", 3 | "age": "30", 4 | "location": "Boston", 5 | "desire": "Singing", 6 | "fear": "Violence" 7 | }, 8 | { 9 | "name": "Joss", 10 | "age": "42", 11 | "location": "Boston", 12 | "desire": "Hiking", 13 | "fear": "Irrationality" 14 | } 15 | ] -------------------------------------------------------------------------------- /Spring-2014/week4/08_callback_loadJSON_OOP/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /Spring-2014/week4/09_external_API_weather0/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /Spring-2014/week4/09_external_API_weather0/sketch.js: -------------------------------------------------------------------------------- 1 | var bubbles = []; 2 | 3 | function setup() { 4 | 5 | loadJSON('http://api.openweathermap.org/data/2.5/weather?q=NewYork,USA', drawWeather); 6 | 7 | createCanvas(600, 400); 8 | noLoop(); 9 | noStroke(); 10 | 11 | } 12 | 13 | function draw() { 14 | 15 | } 16 | 17 | function drawWeather(weather) { 18 | 19 | // Get the loaded JSON data 20 | print(weather); // inspect the weather JSON 21 | var humidity = weather.main.humidity; // get the main.humidity out of the loaded JSON 22 | print(humidity); // inspect the humidity in the console 23 | 24 | background(40, 90, 200); 25 | fill(0, 255, 255, humidity); // use the humidity value to set the alpha 26 | for (var i = 0; i < 50; i++) { 27 | ellipse(random(width), random(height), 30, 30); 28 | } 29 | } -------------------------------------------------------------------------------- /Spring-2014/week4/10_external_API_weather1/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /Spring-2014/week4/10_external_API_weather1/sketch.js: -------------------------------------------------------------------------------- 1 | // http://openweathermap.org/API 2 | 3 | function setup() { 4 | createCanvas(1200, 400); 5 | noLoop(); 6 | textAlign(CENTER); 7 | loadJSON("http://api.openweathermap.org/data/2.5/forecast/daily?q=London&mode=json&units=metric&cnt=7", drawData); 8 | } 9 | 10 | function draw() { 11 | } 12 | 13 | function drawData(data) { 14 | 15 | print(data.list); 16 | for (var i=0; i 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /Spring-2014/week4/12_external_API_nytimes/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /Spring-2014/week4/12_external_API_nytimes/sketch.js: -------------------------------------------------------------------------------- 1 | // http://developer.nytimes.com 2 | 3 | var data; 4 | 5 | function preload() { 6 | data = loadJSON("http://api.nytimes.com/svc/search/v2/articlesearch.jsonp?callback=svc_search_v2_articlesearch&q=obama&api-key=sample-key"); 7 | } 8 | 9 | 10 | function setup() { 11 | createCanvas(1200, 400); 12 | noLoop(); 13 | } 14 | 15 | function draw() { 16 | var docs = data.response.docs; 17 | for (var i=0; i 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /Spring-2014/week4/callback_clock/sketch.js: -------------------------------------------------------------------------------- 1 | var elt; 2 | 3 | var counter = 0; 4 | 5 | function setup() { 6 | elt = createHTML(counter); 7 | elt.style("padding:50px; font-size:50px;"); 8 | 9 | // setInterval() triggers a function at the number of milliseconds later over and over 10 | setInterval(next,1000); 11 | } 12 | 13 | // Here is the function that is triggered 14 | function next() { 15 | elt.html(counter); 16 | counter++; 17 | 18 | // If we used setTimeout, we could recursively ask for this function to be triggered again one second later 19 | // setTimeout(next,1000); 20 | } -------------------------------------------------------------------------------- /Spring-2014/week4/class/data.json: -------------------------------------------------------------------------------- 1 | [{ 2 | "name": "John", 3 | "lastName": "Smith", 4 | "age": 59, 5 | "eyeColor": "black", 6 | "favFoods": ["apple", "cupcake", "coffee"] 7 | }, 8 | { 9 | "name": "Bob", 10 | "lastName": "Smith", 11 | "age": 30, 12 | "eyeColor": "black", 13 | "favFoods": ["apple", "cupcake", "coffee"] 14 | }] -------------------------------------------------------------------------------- /Spring-2014/week4/class/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /Spring-2014/week4/class/large.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lmccart/itp-creative-js/1f9a0dfd2262e2003698e93edb7825efa95f8c65/Spring-2014/week4/class/large.jpg -------------------------------------------------------------------------------- /Spring-2014/week4/class/sketch.js: -------------------------------------------------------------------------------- 1 | 2 | function setup() { 3 | } 4 | 5 | function draw() { 6 | doThisThenThat(drawEllipse, drawRect); 7 | } 8 | 9 | function drawEllipse() { 10 | ellipse(100, 100, 50, 50); 11 | } 12 | 13 | function drawRect() { 14 | rect(300, 300, 50, 50); 15 | } -------------------------------------------------------------------------------- /Spring-2014/week4/class/small.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lmccart/itp-creative-js/1f9a0dfd2262e2003698e93edb7825efa95f8c65/Spring-2014/week4/class/small.jpg -------------------------------------------------------------------------------- /Spring-2014/week4/class/test.csv: -------------------------------------------------------------------------------- 1 | Item,Cost,Sold,Profit 2 | Keyboard,$10.00,$16.00,$6.00 3 | Monitor,$80.00,$120.00,$40.00 4 | Mouse,$5.00,$7.00,$2.00 -------------------------------------------------------------------------------- /Spring-2014/week4/inclass/callbacks/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /Spring-2014/week4/inclass/callbacks/sketch.js: -------------------------------------------------------------------------------- 1 | 2 | var counter = 0; 3 | 4 | 5 | function setup() { 6 | setTimeout( 7 | function() { 8 | counter = counter + 1; 9 | println(counter); 10 | }, 11 | 1000 12 | ); 13 | } 14 | -------------------------------------------------------------------------------- /Spring-2014/week4/inclass/json/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /Spring-2014/week4/inclass/json/sketch.js: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | function setup() { 5 | var pos = { 6 | x: 100, 7 | y: 50 8 | }; 9 | 10 | println(pos); 11 | 12 | var json = JSON.stringify(pos); 13 | println(json); 14 | 15 | var objagain = JSON.parse(json); 16 | println(objagain); 17 | 18 | createCanvas(600,400); 19 | background(175); 20 | fill(0); 21 | ellipse(objagain.x,objagain.y,50,50); 22 | 23 | } 24 | -------------------------------------------------------------------------------- /Spring-2014/week4/nytimes_experiments/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /Spring-2014/week4/resize_window/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /Spring-2014/week4/resize_window/sketch.js: -------------------------------------------------------------------------------- 1 | var canvas; 2 | 3 | function setup() { 4 | canvas = createCanvas(window.innerWidth, window.innerHeight); 5 | } 6 | 7 | function draw() { 8 | background(51); 9 | fill(255); 10 | ellipse(width/2,height/2,100,100); 11 | } 12 | 13 | window.onresize = function() { 14 | var w = window.innerWidth; 15 | var h = window.innerHeight; 16 | canvas.size(w,h); 17 | width = w; 18 | height = h; 19 | }; -------------------------------------------------------------------------------- /Spring-2014/week5/00_instance_default_append/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /Spring-2014/week5/00_instance_default_append/sketch.js: -------------------------------------------------------------------------------- 1 | // CASE 0: no node specified 2 | // Canvas is auto-generated and appended to body. 3 | var s = function( sketch ) { 4 | 5 | var gray = 0; 6 | 7 | sketch.setup = function() { 8 | sketch.createCanvas(400, 400); 9 | }; 10 | 11 | sketch.draw = function() { 12 | sketch.background(gray); 13 | sketch.rect(sketch.width/2, sketch.height/2, 50, 50); 14 | } 15 | 16 | sketch.mousePressed = function() { 17 | gray += 10; 18 | } 19 | 20 | }; 21 | 22 | var myp5 = new p5(s); -------------------------------------------------------------------------------- /Spring-2014/week5/01_instance_canvas_id/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /Spring-2014/week5/01_instance_canvas_id/sketch.js: -------------------------------------------------------------------------------- 1 | // CASE 1: node specified, node is a CANVAS ELEMENT ID 2 | // p5 will attach to canvas node specified. 3 | var s = function( sketch ) { 4 | 5 | var gray = 0; 6 | 7 | sketch.setup = function() { 8 | sketch.createCanvas(400, 400); 9 | }; 10 | 11 | sketch.draw = function() { 12 | sketch.background(gray); 13 | sketch.rect(sketch.width/2, sketch.height/2, 50, 50); 14 | } 15 | 16 | sketch.mousePressed = function() { 17 | gray += 10; 18 | } 19 | 20 | }; 21 | 22 | var myp5 = new p5(s, 'p5-canvas'); -------------------------------------------------------------------------------- /Spring-2014/week5/02_instance_element_id/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 |
8 | -------------------------------------------------------------------------------- /Spring-2014/week5/02_instance_element_id/sketch.js: -------------------------------------------------------------------------------- 1 | // CASE 2: node specified, node is a DIV ELEMENT ID 2 | // A canvas with p5 attached will be inserted inside of it. 3 | var s = function( sketch ) { 4 | 5 | var gray = 0; 6 | 7 | sketch.setup = function() { 8 | sketch.createCanvas(400, 400); 9 | }; 10 | 11 | sketch.draw = function() { 12 | sketch.background(gray); 13 | sketch.rect(sketch.width/2, sketch.height/2, 50, 50); 14 | } 15 | 16 | sketch.mousePressed = function() { 17 | gray += 10; 18 | } 19 | 20 | }; 21 | 22 | var myp5 = new p5(s, 'p5-container'); -------------------------------------------------------------------------------- /Spring-2014/week5/03_instance_canvas_node/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /Spring-2014/week5/03_instance_canvas_node/sketch.js: -------------------------------------------------------------------------------- 1 | // CASE 2: node specified, node is a CANVAS ELEMENT 2 | // A canvas with p5 attached will be inserted inside of it. 3 | var s = function( sketch ) { 4 | 5 | var gray = 0; 6 | 7 | sketch.setup = function() { 8 | sketch.createCanvas(400, 400); 9 | console.log(sketch.DEGREES); 10 | }; 11 | 12 | sketch.draw = function() { 13 | sketch.background(gray); 14 | sketch.rect(sketch.width/2, sketch.height/2, 50, 50); 15 | } 16 | 17 | sketch.mousePressed = function() { 18 | gray += 10; 19 | } 20 | 21 | }; 22 | 23 | window.onload = function() { 24 | var canvasNode = document.getElementById( 'p5-canvas' ); 25 | var myp5 = new p5(s, canvasNode); 26 | }; -------------------------------------------------------------------------------- /Spring-2014/week5/04_instance_element_node/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 |
8 | -------------------------------------------------------------------------------- /Spring-2014/week5/04_instance_element_node/sketch.js: -------------------------------------------------------------------------------- 1 | // CASE 2: node specified, node is a DIV ELEMENT 2 | // A canvas with p5 attached will be inserted inside of it. 3 | var s = function( sketch ) { 4 | 5 | var gray = 0; 6 | 7 | sketch.setup = function() { 8 | sketch.createCanvas(400, 400); 9 | }; 10 | 11 | sketch.draw = function() { 12 | sketch.background(gray); 13 | sketch.rect(sketch.width/2, sketch.height/2, 50, 50); 14 | } 15 | 16 | sketch.mousePressed = function() { 17 | gray += 10; 18 | } 19 | 20 | }; 21 | 22 | window.onload = function() { 23 | var containerNode = document.getElementById( 'p5-container' ); 24 | var myp5 = new p5(s, containerNode); 25 | }; -------------------------------------------------------------------------------- /Spring-2014/week5/05_instance_anonymous/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /Spring-2014/week5/05_instance_anonymous/sketch.js: -------------------------------------------------------------------------------- 1 | // CASE 3: alternate syntax 2 | // Canvas is auto-generated and appended to body. 3 | var myp5 = new p5(function( sketch ) { 4 | 5 | var gray = 0; 6 | 7 | sketch.setup = function() { 8 | sketch.createCanvas(400, 400); 9 | }; 10 | 11 | sketch.draw = function() { 12 | sketch.background(gray); 13 | sketch.rect(sketch.width/2, sketch.height/2, 50, 50); 14 | } 15 | 16 | sketch.mousePressed = function() { 17 | gray += 10; 18 | } 19 | 20 | }); -------------------------------------------------------------------------------- /Spring-2014/week5/06_two_instances_diff_sketch/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /Spring-2014/week5/06_two_instances_diff_sketch/sketch.js: -------------------------------------------------------------------------------- 1 | var s0 = function( sketch ) { 2 | 3 | var gray = 0; 4 | 5 | sketch.setup = function() { 6 | sketch.createCanvas(400, 400); 7 | }; 8 | 9 | sketch.draw = function() { 10 | sketch.background(gray); 11 | sketch.rect(sketch.width/2, sketch.height/2, 50, 50); 12 | } 13 | 14 | sketch.mousePressed = function() { 15 | gray += 10; 16 | } 17 | 18 | }; 19 | 20 | var myp5_0 = new p5(s0, 'canvas0'); 21 | 22 | 23 | 24 | var s1 = function( sketch ) { 25 | 26 | var gray = 0; 27 | 28 | sketch.setup = function() { 29 | sketch.createCanvas(400, 400); 30 | }; 31 | 32 | sketch.draw = function() { 33 | sketch.background(255, 0, 100); 34 | sketch.fill(gray); 35 | sketch.noStroke(); 36 | sketch.rect(sketch.width/2, sketch.height/2, 50, 50); 37 | } 38 | 39 | sketch.mousePressed = function() { 40 | gray += 10; 41 | } 42 | }; 43 | 44 | 45 | var myp5_1 = new p5(s1, 'canvas1'); 46 | 47 | -------------------------------------------------------------------------------- /Spring-2014/week5/07_two_instances_same_sketch/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /Spring-2014/week5/07_two_instances_same_sketch/sketch.js: -------------------------------------------------------------------------------- 1 | var s = function( sketch ) { 2 | 3 | var gray = 0; 4 | 5 | var x = 0; 6 | 7 | sketch.setup = function() { 8 | sketch.createCanvas(400, 400); 9 | }; 10 | 11 | sketch.draw = function() { 12 | sketch.background(gray); 13 | sketch.rect(x, sketch.height/2, 50, 50); 14 | 15 | x = x + 5; 16 | if (x > sketch.width) { 17 | x = 0; 18 | } 19 | } 20 | 21 | sketch.mousePressed = function() { 22 | gray += 10; 23 | } 24 | 25 | }; 26 | 27 | var myp5_0 = new p5(s, 'canvas0'); 28 | 29 | 30 | var myp5_1 = new p5(s, 'canvas1'); -------------------------------------------------------------------------------- /Spring-2014/week5/08_two_instances_listeners/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /Spring-2014/week5/09_buzz_global/dingdong.wav: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lmccart/itp-creative-js/1f9a0dfd2262e2003698e93edb7825efa95f8c65/Spring-2014/week5/09_buzz_global/dingdong.wav -------------------------------------------------------------------------------- /Spring-2014/week5/09_buzz_global/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /Spring-2014/week5/09_buzz_global/rhodes_loop.wav: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lmccart/itp-creative-js/1f9a0dfd2262e2003698e93edb7825efa95f8c65/Spring-2014/week5/09_buzz_global/rhodes_loop.wav -------------------------------------------------------------------------------- /Spring-2014/week5/10_buzz_instance/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /Spring-2014/week5/10_buzz_instance/rhodes_loop.wav: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lmccart/itp-creative-js/1f9a0dfd2262e2003698e93edb7825efa95f8c65/Spring-2014/week5/10_buzz_instance/rhodes_loop.wav -------------------------------------------------------------------------------- /Spring-2014/week5/10_buzz_instance/sketch.js: -------------------------------------------------------------------------------- 1 | var mySketch = function(sketch) { 2 | 3 | var mySound = new buzz.sound('rhodes_loop.wav'); 4 | var radius = 50; 5 | 6 | sketch.setup = function() { 7 | sketch.createCanvas(300, 300); 8 | sketch.noStroke(); 9 | sketch.fill(0); 10 | }; 11 | 12 | sketch.draw = function() { 13 | sketch.background(255, 0, 200); 14 | sketch.ellipse(sketch.width/2, sketch.height/2, 2*radius, 2*radius); 15 | }; 16 | 17 | sketch.mousePressed = function() { 18 | if (sketch.dist(sketch.mouseX, sketch.mouseY, sketch.width/2, sketch.height/2) <= radius) { 19 | mySound.play(); 20 | mySound.loop(); 21 | } 22 | }; 23 | 24 | sketch.mouseReleased = function() { 25 | mySound.stop(); 26 | }; 27 | }; 28 | 29 | 30 | var myp5 = new p5(mySketch); 31 | -------------------------------------------------------------------------------- /Spring-2014/week5/11_popcorn_play_pause/fingers.mov: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lmccart/itp-creative-js/1f9a0dfd2262e2003698e93edb7825efa95f8c65/Spring-2014/week5/11_popcorn_play_pause/fingers.mov -------------------------------------------------------------------------------- /Spring-2014/week5/11_popcorn_play_pause/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 11 | -------------------------------------------------------------------------------- /Spring-2014/week5/11_popcorn_play_pause/sketch.js: -------------------------------------------------------------------------------- 1 | // http://popcornjs.org/ 2 | // http://popcornjs.org/popcorn-docs/ 3 | 4 | var pop; 5 | var radius = 50; 6 | 7 | function setup() { 8 | createCanvas(320, 240); 9 | noStroke(); 10 | fill(0); 11 | 12 | // Create a popcorn instance by calling Popcorn("#id-of-my-video") 13 | pop = Popcorn("#vid"); 14 | pop.loop(true); // Lopp not working, see: http://stackoverflow.com/questions/8088364/html5-video-will-not-loop 15 | 16 | createHTML("Hold mouse down on circle to play video."); 17 | 18 | }; 19 | 20 | function draw() { 21 | background(255, 0, 200); 22 | ellipse(width/2, height/2, 2*radius, 2*radius); 23 | }; 24 | 25 | function mousePressed() { 26 | if (dist(mouseX, mouseY, width/2, height/2) <= radius) { 27 | pop.play(); 28 | } 29 | }; 30 | 31 | function mouseReleased() { 32 | pop.pause(); 33 | }; -------------------------------------------------------------------------------- /Spring-2014/week5/12_popcorn_end_event/fingers.mov: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lmccart/itp-creative-js/1f9a0dfd2262e2003698e93edb7825efa95f8c65/Spring-2014/week5/12_popcorn_end_event/fingers.mov -------------------------------------------------------------------------------- /Spring-2014/week5/12_popcorn_end_event/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 13 | 14 |

Hold the mouse down over the circle to play the video. Wait for the end!

15 | -------------------------------------------------------------------------------- /Spring-2014/week5/13_popcorn_events/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /Spring-2014/week5/13_popcorn_events/particle.js: -------------------------------------------------------------------------------- 1 | // Learning Processing 2 | // Daniel Shiffman 3 | // http://www.learningprocessing.com 4 | 5 | // Example 9-11 ported to p5.js 6 | 7 | function Particle() { 8 | this.x = random(width); 9 | this.y = random(height); 10 | this.w = 16; 11 | this.speed = 0; 12 | } 13 | 14 | Particle.prototype.gravity = function() { 15 | // Add gravity to speed 16 | this.speed = this.speed + gravity; 17 | }; 18 | 19 | Particle.prototype.move = function() { 20 | // Add speed to y location 21 | this.y = this.y + this.speed; 22 | // If square reaches the bottom 23 | // Reverse speed 24 | if (this.y > height) { 25 | this.speed = this.speed * -0.95; 26 | this.y = height; 27 | } 28 | }; 29 | 30 | Particle.prototype.display = function() { 31 | // Display the circle 32 | fill(101); 33 | stroke(255); 34 | ellipse(this.x,this.y,this.w,this.w); 35 | }; 36 | 37 | -------------------------------------------------------------------------------- /Spring-2014/week5/14_facetracker/fingers.mov: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lmccart/itp-creative-js/1f9a0dfd2262e2003698e93edb7825efa95f8c65/Spring-2014/week5/14_facetracker/fingers.mov -------------------------------------------------------------------------------- /Spring-2014/week5/14_facetracker/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /Spring-2014/week5/14_facetracker/sketch.js: -------------------------------------------------------------------------------- 1 | // https://github.com/auduno/headtrackr 2 | // http://auduno.github.io/headtrackr/documentation/reference.html 3 | 4 | var x,y,w,h; 5 | 6 | function setup() { 7 | createCanvas(320, 240); 8 | 9 | var videoInput = document.getElementById('inputVideo'); 10 | var canvasInput = document.getElementById('debugCanvas'); 11 | 12 | var htracker = new headtrackr.Tracker({ui: false, debug: canvasInput}); 13 | htracker.init(videoInput, canvasInput); 14 | htracker.start(); 15 | 16 | // drawFace() is a callback for when facetracker finds the face 17 | document.addEventListener('facetrackingEvent', drawFace); 18 | } 19 | 20 | function draw() { 21 | background(255, 0, 200); 22 | noStroke(); 23 | fill(0); 24 | ellipse(x,y,w,h); 25 | } 26 | 27 | // Taking the face data and copying over to global variables 28 | // This will only work for one face 29 | function drawFace(event) { 30 | x = event.x; 31 | y = event.y; 32 | w = event.width; 33 | h = event.height; 34 | } -------------------------------------------------------------------------------- /Spring-2014/week5/simple_audio/dingdong.wav: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lmccart/itp-creative-js/1f9a0dfd2262e2003698e93edb7825efa95f8c65/Spring-2014/week5/simple_audio/dingdong.wav -------------------------------------------------------------------------------- /Spring-2014/week5/simple_audio/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /Spring-2014/week5/simple_audio/sketch.js: -------------------------------------------------------------------------------- 1 | // Sound 2 | var sound; 3 | 4 | 5 | function setup() { 6 | createCanvas(320,240); 7 | 8 | sound = createHTML(''); 9 | sound = document.getElementById('doorbell'); 10 | 11 | createHTML('

Click mouse to play sound.

'); 12 | } 13 | 14 | function draw() { 15 | background(51); 16 | } 17 | 18 | function mousePressed() { 19 | sound.play(); 20 | } 21 | 22 | 23 | -------------------------------------------------------------------------------- /Spring-2014/week5/simple_video/fingers.mov: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lmccart/itp-creative-js/1f9a0dfd2262e2003698e93edb7825efa95f8c65/Spring-2014/week5/simple_video/fingers.mov -------------------------------------------------------------------------------- /Spring-2014/week5/simple_video/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /Spring-2014/week5/simple_webcam/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /Spring-2014/week5/toxiclibs/NOC_5_10_SimpleSpring/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | NOC_5_02_Boxes 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /Spring-2014/week5/toxiclibs/NOC_5_10_SimpleSpring/particle.js: -------------------------------------------------------------------------------- 1 | // The Nature of Code 2 | // Daniel Shiffman 3 | // http://natureofcode.com 4 | 5 | // Child class constructor 6 | function Particle(position) { 7 | VerletParticle2D.call(this,position); 8 | } 9 | 10 | // Inherit from the parent class 11 | Particle.prototype = Object.create(VerletParticle2D.prototype); 12 | Particle.prototype.constructor = Particle; 13 | 14 | // Override the display method 15 | Particle.prototype.display = function(){ 16 | fill(127); 17 | stroke(200); 18 | strokeWeight(2); 19 | ellipse(this.x,this.y,32,32); 20 | } 21 | -------------------------------------------------------------------------------- /Spring-2014/week5/toxiclibs/NOC_5_11_SoftString/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | The Nature of Code 5.11 Soft String 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /Spring-2014/week5/toxiclibs/NOC_5_11_SoftString/particle.js: -------------------------------------------------------------------------------- 1 | // The Nature of Code 2 | // Daniel Shiffman 3 | // http://natureofcode.com 4 | 5 | // Child class constructor 6 | function Particle(x,y) { 7 | VerletParticle2D.call(this,x,y); 8 | this.radius = 4; 9 | } 10 | 11 | // Inherit from the parent class 12 | Particle.prototype = Object.create(VerletParticle2D.prototype); 13 | Particle.prototype.constructor = Particle; 14 | 15 | // Override the display method 16 | Particle.prototype.display = function(){ 17 | fill(127); 18 | stroke(200); 19 | strokeWeight(2); 20 | ellipse(this.x,this.y,this.radius*2,this.radius*2); 21 | } 22 | -------------------------------------------------------------------------------- /Spring-2014/week5/toxiclibs/NOC_5_12_SimpleCluster/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | The Nature of Code 5.12 Simple Cluster 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /Spring-2014/week5/toxiclibs/NOC_5_12_SimpleCluster/node.js: -------------------------------------------------------------------------------- 1 | // The Nature of Code 2 | // Daniel Shiffman 3 | // http://natureofcode.com 4 | 5 | // Force directed graph 6 | // Heavily based on: http://code.google.com/p/fidgen/ 7 | 8 | // Notice how we are using inheritance here! 9 | // We could have just stored a reference to a VerletParticle object 10 | // inside the Node object, but inheritance is a nice alternative 11 | 12 | function Node(pos) { 13 | VerletParticle2D.call(this,pos); 14 | } 15 | 16 | // Inherit from the parent class 17 | Node.prototype = Object.create(VerletParticle2D.prototype); 18 | Node.prototype.constructor = Node; 19 | 20 | // Override the display method 21 | Node.prototype.display = function(){ 22 | fill(127); 23 | stroke(200); 24 | strokeWeight(2); 25 | ellipse(this.x,this.y,16,16); 26 | } 27 | -------------------------------------------------------------------------------- /Spring-2014/week5/toxiclibs/NOC_5_13_AttractRepel/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | The Nature of Code 5.13 Attraction / Repulsion Toxiclibs 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /Spring-2014/week5/toxiclibs/NOC_5_13_AttractRepel/particle.js: -------------------------------------------------------------------------------- 1 | // The Nature of Code 2 | // Daniel Shiffman 3 | // http://natureofcode.com 4 | 5 | // Child class constructor 6 | function Particle(position, radius, range, strength) { 7 | VerletParticle2D.call(this,position); 8 | this.r = radius; 9 | physics.addParticle(this); 10 | physics.addBehavior(new AttractionBehavior(this, range, strength)); 11 | } 12 | 13 | // Inherit from the parent class 14 | Particle.prototype = Object.create(VerletParticle2D.prototype); 15 | Particle.prototype.constructor = Particle; 16 | 17 | // Override the display method 18 | Particle.prototype.display = function(){ 19 | fill(127); 20 | stroke(200); 21 | strokeWeight(2); 22 | ellipse(this.x,this.y,this.r*2,this.r*2); 23 | } 24 | -------------------------------------------------------------------------------- /Spring-2014/week5/toxiclibs/lib/toxichelper.js: -------------------------------------------------------------------------------- 1 | // The Nature of Code 2 | // Daniel Shiffman 3 | // http://natureofcode.com 4 | 5 | // Making it easier to use all these classes 6 | // Maybe this is a bad idea? 7 | var VerletPhysics2D = toxi.physics2d.VerletPhysics2D; 8 | var GravityBehavior = toxi.physics2d.behaviors.GravityBehavior; 9 | var AttractionBehavior = toxi.physics2d.behaviors.AttractionBehavior; 10 | var VerletParticle2D = toxi.physics2d.VerletParticle2D; 11 | var VerletSpring2D = toxi.physics2d.VerletSpring2D; 12 | var VerletMinDistanceSpring2D = toxi.physics2d.VerletMinDistanceSpring2D; 13 | var Vec2D = toxi.geom.Vec2D; 14 | var Rect =toxi.geom.Rect; 15 | -------------------------------------------------------------------------------- /Spring-2014/week6/01_node_helloworld/0_hello.js: -------------------------------------------------------------------------------- 1 | // This is a JS program that we can run 2 | // from the command line saying 3 | // $ node hello0.js 4 | 5 | console.log("hello"); -------------------------------------------------------------------------------- /Spring-2014/week6/01_node_helloworld/1_hello.js: -------------------------------------------------------------------------------- 1 | // This function handles an incoming "request" 2 | // And sends back out a "response"; 3 | var handleRequest = function (request, response) { 4 | //console.log('Server has received a request from' + request); 5 | response.writeHead(200, {'Content-Type': 'text/plain'}); 6 | response.end('Hello World\n'); 7 | }; 8 | 9 | // HTTP module 10 | var http = require('http'); 11 | 12 | // Create a server with the handleRequest callback 13 | var server = http.createServer(handleRequest); 14 | // Listen on port 8080 15 | server.listen(8080); 16 | 17 | console.log('Server started on port 8080'); 18 | 19 | -------------------------------------------------------------------------------- /Spring-2014/week6/01_node_helloworld/2_counter.js: -------------------------------------------------------------------------------- 1 | // Let's keep track of the # of requests 2 | var counter = 0; 3 | 4 | // This function handles an incoming "request" 5 | // And sends back out a "response"; 6 | var handleRequest = function (request, response) { 7 | // Incremement the counter 8 | counter++; 9 | response.writeHead(200, {'Content-Type': 'text/plain'}); 10 | response.end('This is how many requests I\'ve handled: ' + counter); 11 | // Note that counter goes up by 2 if browser requests favicon 12 | }; 13 | 14 | // HTTP module 15 | var http = require('http'); 16 | 17 | // Create a server with the handleRequest callback 18 | var server = http.createServer(handleRequest); 19 | // Listen on port 8080 20 | server.listen(8080); 21 | 22 | console.log('Server started on port 8080'); 23 | 24 | -------------------------------------------------------------------------------- /Spring-2014/week6/01_node_helloworld/3_paths.js: -------------------------------------------------------------------------------- 1 | // HTTP module 2 | var http = require('http'); 3 | // URL module 4 | var url = require('url'); 5 | 6 | // This function handles an incoming "request" 7 | // And sends back out a "response"; 8 | var handleRequest = function (request, response) { 9 | response.writeHead(200, {'Content-Type': 'text/plain'}); 10 | // Grab the path from the request's url 11 | var pathname = url.parse(request.url).pathname; 12 | // Test if it's equal to one 13 | if (pathname == '/one') { 14 | response.end('One\n'); 15 | } else if (pathname == '/two') { 16 | response.end('Two\n'); 17 | } else { 18 | response.end('Hello World\n'); 19 | } 20 | }; 21 | 22 | 23 | // Create a server with the handleRequest callback 24 | var server = http.createServer(handleRequest); 25 | // Listen on port 8080 26 | server.listen(8080); 27 | 28 | console.log('Server started on port 8080'); 29 | 30 | 31 | 32 | -------------------------------------------------------------------------------- /Spring-2014/week6/02_node_servefile/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Hello World! 7 | 8 | -------------------------------------------------------------------------------- /Spring-2014/week6/02_node_servefile/server.js: -------------------------------------------------------------------------------- 1 | 2 | // HTTP Portion 3 | var http = require('http'); 4 | 5 | // Using the filesystem module 6 | var fs = require('fs'); 7 | 8 | // Start our server 9 | var server = http.createServer(handleRequest); 10 | server.listen(8080); 11 | 12 | function handleRequest(req, res) { 13 | // User file system module to read index.html file 14 | fs.readFile(__dirname + '/index.html', 15 | // Callback function for reading 16 | function (err, data) { 17 | // if there is an error 18 | if (err) { 19 | res.writeHead(500); 20 | return res.end('Error loading index.html'); 21 | } 22 | // Otherwise, send the data, the contents of the file 23 | res.writeHead(200); 24 | res.end(data); 25 | } 26 | ); 27 | } -------------------------------------------------------------------------------- /Spring-2014/week6/03_node_servep5/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /Spring-2014/week6/03_node_servep5/sketch.js: -------------------------------------------------------------------------------- 1 | function setup() { 2 | 3 | createCanvas(600, 400); 4 | 5 | } 6 | 7 | function draw() { 8 | 9 | // background 10 | background(42, 169, 217); 11 | 12 | // ellipse 13 | fill(242, 228, 21); 14 | ellipse(100,100,100,100); 15 | 16 | //rectangle 17 | fill(162,217, 39); 18 | rect(300,100,150,150); 19 | 20 | } -------------------------------------------------------------------------------- /Spring-2014/week6/04_socket_server/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /Spring-2014/week6/04_socket_server/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "04_socket_server", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "server.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1", 8 | "start": "node server.js" 9 | }, 10 | "author": "", 11 | "license": "ISC", 12 | "dependencies": { 13 | "socket.io": "^1.3.7" 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /Spring-2014/week6/10_touchX_touchY/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 8 | 9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /Spring-2014/week6/10_touchX_touchY/sketch.js: -------------------------------------------------------------------------------- 1 | // touch events are very similar to mouse events 2 | 3 | var red = 0; 4 | 5 | function setup() { 6 | createCanvas(windowWidth, windowHeight); 7 | noStroke(); 8 | fill(255, 255, 255); 9 | } 10 | 11 | function draw() { 12 | background(red, 0, 255); 13 | rect(300, 200, 200, 600); // simulated button 14 | 15 | if((touchX > 300) && (touchX < 500) && (touchY > 200) && (touchY < 800)){ // if touch inside rectangle 16 | red = 255; 17 | } else { 18 | red = 0; 19 | } 20 | } -------------------------------------------------------------------------------- /Spring-2014/week6/11_touch_events/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 8 | 9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /Spring-2014/week6/11_touch_events/sketch.js: -------------------------------------------------------------------------------- 1 | // touch events are very similar to mouse events 2 | 3 | function setup() { 4 | createCanvas(windowWidth, windowHeight); 5 | noStroke(); 6 | fill(255, 255, 255); 7 | background(200, 190, 190); 8 | } 9 | 10 | // mousePressed 11 | function touchStarted() { 12 | fill(0, 255, 0); 13 | print('pressed or started'); 14 | ellipse(touchX, touchY, 80, 80); 15 | } 16 | 17 | // mouseDragged 18 | function touchMoved() { 19 | fill(0, 0, 255); 20 | ellipse(touchX, touchY, 80, 80); 21 | } 22 | 23 | // mouseReleased 24 | function touchEnded() { 25 | fill(255, 0, 0); 26 | ellipse(touchX, touchY, 80, 80); 27 | } 28 | -------------------------------------------------------------------------------- /Spring-2014/week6/12_mouse_touch/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /Spring-2014/week6/13_multi_finger_touch/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 8 | 9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /Spring-2014/week6/13_multi_finger_touch/sketch.js: -------------------------------------------------------------------------------- 1 | // touch events are very similar to mouse events 2 | 3 | function setup() { 4 | createCanvas(windowWidth, windowHeight); 5 | noStroke(); 6 | fill(255, 255, 255); 7 | background(200, 190, 190); 8 | } 9 | 10 | function touchStarted() { 11 | fill(0, 255, 0); 12 | for(var i = 0; i < touches.length; i++) { 13 | ellipse(touches[i].x, touches[i].y, 80, 80); 14 | } 15 | } 16 | 17 | function touchMoved() { 18 | for(var i = 0; i < touches.length; i++) { 19 | fill(i*50); 20 | ellipse(touches[i].x, touches[i].y, 80, 80); 21 | } 22 | } 23 | 24 | function touchEnded() { 25 | fill(255, 0, 0); 26 | for(var i = 0; i < touches.length; i++) { 27 | ellipse(touches[i].x, touches[i].y, 80, 80); 28 | } 29 | } 30 | -------------------------------------------------------------------------------- /Spring-2014/week6/20_hammerjs_doubletap/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /Spring-2014/week6/20_hammerjs_doubletap/sketch.js: -------------------------------------------------------------------------------- 1 | var r = 0; 2 | var g = 0; 3 | var b = 0; 4 | 5 | function setup() { 6 | createCanvas(windowWidth, windowHeight); 7 | 8 | // set options to prevent default behaviors for swipe, pinch, etc 9 | var options = { 10 | preventDefault: true 11 | }; 12 | 13 | // document.body registers gestures anywhere on the page 14 | var hammer = new Hammer(document.body, options); 15 | 16 | // register listener for doubletap gesture, calls function and passes event object in 17 | hammer.on("doubletap", changeBackground); 18 | } 19 | 20 | 21 | function draw() { 22 | background(r, g, b); 23 | } 24 | 25 | 26 | function changeBackground(event) { 27 | //console.log(event); 28 | r = round(random(255)); 29 | g = round(random(255)); 30 | b = round(random(255)); 31 | } -------------------------------------------------------------------------------- /Spring-2014/week6/20_hammerjs_doubletap/style.css: -------------------------------------------------------------------------------- 1 | 2 | body { 3 | margin:0; 4 | } 5 | 6 | #button { 7 | width:100px; 8 | height:100px; 9 | background:purple; 10 | top: 20px; 11 | left: 20px; 12 | position: absolute; 13 | } -------------------------------------------------------------------------------- /Spring-2014/week6/21_hammerjs_tap_hold/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /Spring-2014/week6/21_hammerjs_tap_hold/style.css: -------------------------------------------------------------------------------- 1 | 2 | body { 3 | margin:0; 4 | } 5 | 6 | #button { 7 | width:100px; 8 | height:100px; 9 | background:white; 10 | top: 20px; 11 | left: 20px; 12 | position: absolute; 13 | } -------------------------------------------------------------------------------- /Spring-2014/week6/22_hammerjs_pinch_rotate/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 14 | 15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /Spring-2014/week6/22_hammerjs_pinch_rotate/sketch.js: -------------------------------------------------------------------------------- 1 | var s = 1.0; 2 | var r = 0; 3 | 4 | function setup() { 5 | console.log("HI"); 6 | createCanvas(windowWidth, windowHeight); 7 | noStroke(); 8 | rectMode(CENTER); 9 | 10 | // set options to prevent default behaviors for swipe, pinch, etc 11 | var options = { 12 | preventDefault: true 13 | }; 14 | 15 | // document.body registers gestures anywhere on the page 16 | var hammer = new Hammer(document.body, options); 17 | 18 | hammer.on("pinch", scaleRect); 19 | hammer.on("rotate", rotateRect); 20 | } 21 | 22 | 23 | function draw() { 24 | background(150); 25 | 26 | fill(0); 27 | ellipse(width/2, height/2, windowWidth*0.5, windowWidth*0.5); 28 | 29 | fill(255); 30 | translate(width/2, height/2); 31 | rotate(r); 32 | scale(s); 33 | rect(0, 0, windowWidth*0.1, windowWidth*0.1); 34 | } 35 | 36 | 37 | function rotateRect(event) { 38 | r = radians(event.gesture.rotation); 39 | } 40 | 41 | 42 | function scaleRect(event) { 43 | s = event.gesture.scale; 44 | } -------------------------------------------------------------------------------- /Spring-2014/week6/23_hammerjs_swipe_directions/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /Spring-2014/week6/23_hammerjs_swipe_directions/sketch.js: -------------------------------------------------------------------------------- 1 | var str = ""; 2 | 3 | function setup() { 4 | 5 | createCanvas(windowWidth, windowHeight); 6 | 7 | textAlign(CENTER); 8 | textSize(30); 9 | noStroke(); 10 | 11 | // set options to prevent default behaviors for swipe, pinch, etc 12 | var options = { 13 | preventDefault: true 14 | }; 15 | 16 | // document.body registers gestures anywhere on the page 17 | var hammer = new Hammer(document.body, options); 18 | 19 | hammer.on("swipeup", swipeUp); 20 | hammer.on("swipedown", swipeDown); 21 | hammer.on("swipeleft", swipeLeft); 22 | hammer.on("swiperight", swipeRight); 23 | } 24 | 25 | 26 | function draw() { 27 | background(250, 10, 100); 28 | text(str, width/2, height/2); 29 | } 30 | 31 | 32 | function swipeUp(event) { 33 | str = "you swiped up!"; 34 | } 35 | 36 | function swipeDown(event) { 37 | str = "you swiped down!"; 38 | } 39 | 40 | function swipeLeft(event) { 41 | str = "you swiped left!"; 42 | } 43 | 44 | function swipeRight(event) { 45 | str = "you swiped right!"; 46 | } -------------------------------------------------------------------------------- /Spring-2014/week6/23_hammerjs_swipe_directions/style.css: -------------------------------------------------------------------------------- 1 | 2 | body { 3 | margin:0; 4 | } 5 | 6 | #button { 7 | width:100px; 8 | height:100px; 9 | background:white; 10 | top: 20px; 11 | left: 20px; 12 | position: absolute; 13 | } -------------------------------------------------------------------------------- /Spring-2014/week6/24_hammerjs_swipe/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 18 | 19 | 20 | 21 | 22 | 23 | -------------------------------------------------------------------------------- /Spring-2014/week6/hammerjs_instance/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /Spring-2014/week6/hammerjs_instance/style.css: -------------------------------------------------------------------------------- 1 | 2 | body { 3 | margin:0; 4 | } 5 | 6 | #button { 7 | width:100px; 8 | height:100px; 9 | background:white; 10 | top: 20px; 11 | left: 20px; 12 | position: absolute; 13 | } -------------------------------------------------------------------------------- /week1/00_empty_html_js_example/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /week1/01_p5_empty_example/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /week1/01_p5_empty_example/sketch.js: -------------------------------------------------------------------------------- 1 | function setup() { 2 | 3 | } 4 | 5 | function draw() { 6 | 7 | } -------------------------------------------------------------------------------- /week1/02_p5_simple_example/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /week1/02_p5_simple_example/sketch.js: -------------------------------------------------------------------------------- 1 | function setup() { 2 | 3 | createCanvas(600, 400); 4 | 5 | } 6 | 7 | function draw() { 8 | 9 | // background 10 | background(42, 169, 217); 11 | 12 | // ellipse 13 | fill(242, 228, 21); 14 | ellipse(100,100,100,100); 15 | 16 | //rectangle 17 | fill(162,217, 39); 18 | rect(300,100,150,150); 19 | 20 | } -------------------------------------------------------------------------------- /week1/03_processing_p5_conversion_0/examples-basics-form-bezier.pde: -------------------------------------------------------------------------------- 1 | /** 2 | * Bezier. 3 | * 4 | * The first two parameters for the bezier() function specify the 5 | * first point in the curve and the last two parameters specify 6 | * the last point. The middle parameters set the control points 7 | * that define the shape of the curve. 8 | */ 9 | 10 | void setup() { // **change** var setup = function() to void setup() 11 | size(640, 360); // **change** createGraphics() to size() 12 | stroke(255); 13 | noFill(); 14 | } 15 | 16 | void draw() { // **change** var setup = draw() to void draw() 17 | background(0); 18 | for (int i = 0; i < 200; i += 20) { // **change** var i to int i 19 | bezier(mouseX-(i/2.0), 40+i, 410, 20, 440, 300, 240-(i/16.0), 300+(i/8.0)); 20 | } 21 | } -------------------------------------------------------------------------------- /week1/03_processing_p5_conversion_0/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /week1/03_processing_p5_conversion_0/sketch.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Processing > Ex > Basics > Form > Bezier 3 | * 4 | * Bezier. 5 | * 6 | * The first two parameters for the bezier() function specify the 7 | * first point in the curve and the last two parameters specify 8 | * the last point. The middle parameters set the control points 9 | * that define the shape of the curve. 10 | * 11 | */ 12 | 13 | function setup() { // **change** void setup() to var setup = function() 14 | createCanvas(640, 360); // **change** size() to createCanvas() 15 | stroke(255); // stroke() is the same 16 | noFill(); // noFill() is the same 17 | } 18 | 19 | function draw() { // **change** void draw() to var setup = draw() 20 | background(0); // background() is the same 21 | for (var i = 0; i < 200; i += 20) { // **change** int i to var i 22 | bezier(mouseX-(i/2.0), 40+i, 410, 20, 440, 300, 240-(i/16.0), 300+(i/8.0)); // bezier() is the same 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /week1/04_processing_p5_conversion_1/examples-basics-form-bezier.pde: -------------------------------------------------------------------------------- 1 | /** 2 | * Bezier. 3 | * 4 | * The first two parameters for the bezier() function specify the 5 | * first point in the curve and the last two parameters specify 6 | * the last point. The middle parameters set the control points 7 | * that define the shape of the curve. 8 | */ 9 | 10 | void setup() { // **change** var setup = function() to void setup() 11 | size(640, 360); // **change** createGraphics() to size() 12 | stroke(255); 13 | noFill(); 14 | } 15 | 16 | void draw() { // **change** var setup = draw() to void draw() 17 | background(0); 18 | for (int i = 0; i < 200; i += 20) { // **change** var i to int i 19 | bezier(mouseX-(i/2.0), 40+i, 410, 20, 440, 300, 240-(i/16.0), 300+(i/8.0)); 20 | } 21 | } -------------------------------------------------------------------------------- /week1/04_processing_p5_conversion_1/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /week1/05_processing_p5_conversion_2/index.html: -------------------------------------------------------------------------------- 1 | 2 | e="javascript" type="text/javascript" src="//cdn.jsdelivr.net/p5.js/0.3.5/p5.min.js"> 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /week1/06_array_of_numbers/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /week1/06_array_of_numbers/sketch.js: -------------------------------------------------------------------------------- 1 | // Adapted from Getting Started with Processing 2 | 3 | 4 | var x = []; 5 | 6 | function setup() { 7 | 8 | createCanvas(600, 400); 9 | noStroke(); 10 | fill(255, 152, 0); 11 | 12 | for (var i=0; i<100; i++) { 13 | x.push(random(0, width)); 14 | //x[i] = random(0, width); // works the same 15 | } 16 | } 17 | 18 | function draw() { 19 | 20 | background(126, 138, 162); 21 | 22 | for (var i=0; i width + 5) { 26 | x[i] = -5; 27 | } 28 | 29 | ellipse (x[i], i*5, 10, 10); 30 | } 31 | 32 | } 33 | -------------------------------------------------------------------------------- /week1/07_array_of_images/burger.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lmccart/itp-creative-js/1f9a0dfd2262e2003698e93edb7825efa95f8c65/week1/07_array_of_images/burger.png -------------------------------------------------------------------------------- /week1/07_array_of_images/chickens.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lmccart/itp-creative-js/1f9a0dfd2262e2003698e93edb7825efa95f8c65/week1/07_array_of_images/chickens.jpg -------------------------------------------------------------------------------- /week1/07_array_of_images/fish.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lmccart/itp-creative-js/1f9a0dfd2262e2003698e93edb7825efa95f8c65/week1/07_array_of_images/fish.png -------------------------------------------------------------------------------- /week1/07_array_of_images/flower.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lmccart/itp-creative-js/1f9a0dfd2262e2003698e93edb7825efa95f8c65/week1/07_array_of_images/flower.png -------------------------------------------------------------------------------- /week1/07_array_of_images/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /week1/07_array_of_images/sketch.js: -------------------------------------------------------------------------------- 1 | // Using a for loop to initialize values. 2 | // Using a for loop to draw. 3 | // Adapted from Getting Started with Processing. 4 | 5 | var images = []; 6 | var curImage = 0; 7 | 8 | function setup() { 9 | 10 | createCanvas(500, 500); 11 | imageMode(CENTER); 12 | 13 | // Add some more images to the array 14 | 15 | var fish = loadImage("fish.png"); 16 | 17 | images.push(fish); 18 | 19 | var burger = loadImage("burger.png"); 20 | images.push(burger); 21 | 22 | images.push(loadImage("chickens.jpg")); 23 | 24 | } 25 | 26 | function draw() { 27 | 28 | background(120, 204, 50); 29 | 30 | // Draw image 31 | image(images[curImage], width/2, height/2, images[curImage].width, images[curImage].height); 32 | 33 | }; 34 | 35 | 36 | function mousePressed() { 37 | 38 | // Increment curImage 39 | curImage = curImage + 1; 40 | 41 | // Make sure curImage is still in range, loop around if necessary 42 | if (curImage == images.length) { 43 | curImage = 0; 44 | print("curimage "+curImage); 45 | } 46 | }; 47 | -------------------------------------------------------------------------------- /week1/p5/empty-example/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /week1/p5/empty-example/sketch.js: -------------------------------------------------------------------------------- 1 | function setup() { 2 | // put setup code here 3 | } 4 | 5 | function draw() { 6 | // put drawing code here 7 | } -------------------------------------------------------------------------------- /week2/00_objects/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /week2/00_objects/sketch.js: -------------------------------------------------------------------------------- 1 | var bug; // Declare object 2 | 3 | function setup() { 4 | createCanvas(710, 400); 5 | // Create object 6 | bug = new Jitter(); 7 | } 8 | 9 | function draw() { 10 | background(50, 89, 100); 11 | bug.move(); 12 | bug.display(); 13 | } 14 | 15 | // Jitter class 16 | function Jitter() { 17 | this.x = random(width); 18 | this.y = random(height); 19 | this.diameter = random(10, 30); 20 | this.speed = 1; 21 | 22 | this.move = function() { 23 | this.x += random(-this.speed, this.speed); 24 | this.y += random(-this.speed, this.speed); 25 | }; 26 | 27 | this.display = function() { 28 | ellipse(this.x, this.y, this.diameter, this.diameter); 29 | }; 30 | } -------------------------------------------------------------------------------- /week2/01_multiple_objects/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /week2/01_multiple_objects/sketch.js: -------------------------------------------------------------------------------- 1 | var a; 2 | var b; 3 | 4 | function setup() { 5 | createCanvas(400, 400); 6 | a = new Apple(200, 300); 7 | b = new Apple(50, 100); 8 | } 9 | 10 | var draw = function() { 11 | background(255, 100, 0); 12 | a.update(); 13 | a.display(); 14 | b.update(); 15 | b.display(); 16 | } 17 | 18 | function Apple(a, b) { 19 | this.x = a; 20 | this.y = b; 21 | this.update = function() { 22 | this.x += 3; 23 | if (this.x > width) { 24 | this.x = 0; 25 | } 26 | } 27 | } 28 | 29 | // alternative way to add methods (instead of this.update...) 30 | // Apple.prototype.update = function() { 31 | // this.x += 3; 32 | // if (this.x > width) { 33 | // this.x = 0; 34 | // } 35 | // } 36 | 37 | 38 | -------------------------------------------------------------------------------- /week2/02_objects_2/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /week2/03_array_of_objects/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /week2/03_array_of_objects/sketch.js: -------------------------------------------------------------------------------- 1 | var bugs = []; // array of Jitter objects 2 | 3 | function setup() { 4 | createCanvas(710, 400); 5 | // Create objects 6 | for (var i=0; i<50; i++) { 7 | bugs.push(new Jitter()); 8 | } 9 | } 10 | 11 | function draw() { 12 | background(50, 89, 100); 13 | for (var i=0; i 2 | 27 | 28 | 29 | 30 | -------------------------------------------------------------------------------- /week2/06_servi_hello_world/.tmpscript: -------------------------------------------------------------------------------- 1 | var servi = require('servi'); 2 | 3 | var app = new servi(true); 4 | 5 | 6 | serveFiles("public"); 7 | 8 | 9 | 10 | if (typeof run === 'function') { 11 | app.defaultRoute(run); 12 | } 13 | start(); -------------------------------------------------------------------------------- /week2/06_servi_hello_world/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "dependencies": { 3 | "servi": "0.0.7" 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /week2/06_servi_hello_world/server.js: -------------------------------------------------------------------------------- 1 | function run(request) { 2 | request.respond("Hello World"); 3 | } -------------------------------------------------------------------------------- /week2/07_servi_serve_static/.tmpscript: -------------------------------------------------------------------------------- 1 | var servi = require('servi'); 2 | 3 | var app = new servi(true); 4 | 5 | 6 | serveFiles("public"); 7 | 8 | 9 | if (typeof run === 'function') { 10 | app.defaultRoute(run); 11 | } 12 | start(); -------------------------------------------------------------------------------- /week2/07_servi_serve_static/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "dependencies": { 3 | "servi": "0.0.7" 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /week2/07_servi_serve_static/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Hello World 5 | 6 | 7 | 8 |

hellooo

9 | 10 | -------------------------------------------------------------------------------- /week2/07_servi_serve_static/public/other.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Hello World 5 | 6 | 7 | 8 |

I am the other page.

9 | 10 | -------------------------------------------------------------------------------- /week2/07_servi_serve_static/server-exported.js: -------------------------------------------------------------------------------- 1 | var servi = require('servi'); 2 | 3 | var app = new servi(true); 4 | 5 | 6 | serveFiles("public"); 7 | 8 | 9 | if (typeof run === 'function') { 10 | app.defaultRoute(run); 11 | } 12 | start(); -------------------------------------------------------------------------------- /week2/07_servi_serve_static/server.js: -------------------------------------------------------------------------------- 1 | serveFiles("public"); -------------------------------------------------------------------------------- /week2/bubbles.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lmccart/itp-creative-js/1f9a0dfd2262e2003698e93edb7825efa95f8c65/week2/bubbles.jpg -------------------------------------------------------------------------------- /week3/01_css/00_simple_css.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 17 | 18 | 19 | 20 |
21 | I'm in the first section 22 |

I'm a paragraph in the first section.

23 |

I'm a paragraph in the first section with class donkeys.

24 |
25 | 26 |
27 | I'm in the second section 28 |

I'm a paragraph in the second section.

29 |

I'm a paragraph in the second section with class donkeys.

30 |
31 | 32 | -------------------------------------------------------------------------------- /week3/01_css/01_external_css_file/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 |
7 | I'm in the first section 8 |

I'm a paragraph in the first section.

9 |

I'm a paragraph in the first section with class donkeys.

10 |
11 | 12 |
13 | I'm in the second section 14 |

I'm a paragraph in the second section.

15 |

I'm a paragraph in the second section with class donkeys.

16 |
17 | 18 | -------------------------------------------------------------------------------- /week3/01_css/01_external_css_file/style.css: -------------------------------------------------------------------------------- 1 | p { 2 | color: green; 3 | font-size: 20px; 4 | } 5 | 6 | .donkeys { 7 | background: pink; 8 | } 9 | 10 | #first-section { 11 | font-family: monospace; 12 | } -------------------------------------------------------------------------------- /week3/02_dom_pure_js/02_setTimeout.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 |

I love gargoyles.

5 | 6 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /week3/02_dom_pure_js/03_setInterval.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 |

I see 0 gargoyles.

5 | 6 | 26 | 27 | 28 | -------------------------------------------------------------------------------- /week3/02_dom_pure_js/06_addEventListener.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 |

I love pandas.

5 | 6 | 22 | 23 | -------------------------------------------------------------------------------- /week3/02_dom_pure_js/08_mouseover_mouseout copy.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 9 | 10 | 11 | 12 |
I love pandas.
13 | 14 | 35 | 36 | -------------------------------------------------------------------------------- /week3/02_dom_pure_js/09_window_resize.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 |

I love pandas.

5 | 6 | 21 | 22 | -------------------------------------------------------------------------------- /week3/02_dom_pure_js/10_window_load.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 16 | 17 | 18 |

I love pandas.

19 | 20 | -------------------------------------------------------------------------------- /week3/02_dom_pure_js/images/colors.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lmccart/itp-creative-js/1f9a0dfd2262e2003698e93edb7825efa95f8c65/week3/02_dom_pure_js/images/colors.jpg -------------------------------------------------------------------------------- /week3/02_dom_pure_js/images/cookies.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lmccart/itp-creative-js/1f9a0dfd2262e2003698e93edb7825efa95f8c65/week3/02_dom_pure_js/images/cookies.jpg -------------------------------------------------------------------------------- /week3/02_dom_pure_js/images/people.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lmccart/itp-creative-js/1f9a0dfd2262e2003698e93edb7825efa95f8c65/week3/02_dom_pure_js/images/people.jpg -------------------------------------------------------------------------------- /week3/02_dom_pure_js/images/princess.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lmccart/itp-creative-js/1f9a0dfd2262e2003698e93edb7825efa95f8c65/week3/02_dom_pure_js/images/princess.jpg -------------------------------------------------------------------------------- /week3/02_dom_pure_js/images/sander.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lmccart/itp-creative-js/1f9a0dfd2262e2003698e93edb7825efa95f8c65/week3/02_dom_pure_js/images/sander.jpg -------------------------------------------------------------------------------- /week3/03_dom_jquery/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 |

This is an h1

9 | 10 |

This is a paragraph. and a link.

11 | 12 | -------------------------------------------------------------------------------- /week3/03_dom_jquery/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 quickly at some JQuery for comparison 7 | 8 | // This is like the 'load' window event 9 | $(document).ready(function() { 10 | console.log("the dom is loaded!"); 11 | 12 | // Elements are selected via '$' 13 | // css() sets a stytle 14 | $('#stuff').css('background-color','pink'); 15 | $('#stuff').css('width','50%'); 16 | $('#stuff').css('padding','10px'); 17 | // This is assigning a mouse downevent 18 | $('#clicky').mousedown(function() { 19 | console.log("clickedme!"); 20 | // innerHTML changed with html() 21 | $('h1').html('You clicked it!'); 22 | }); 23 | }); -------------------------------------------------------------------------------- /week3/04_dom_p5/00_canvas_parent/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 |
canvas div
10 | 11 |
another div
12 | 13 | -------------------------------------------------------------------------------- /week3/04_dom_p5/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 | } -------------------------------------------------------------------------------- /week3/04_dom_p5/01_position_canvas/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | The canvas below is absolute positioned. 10 | 11 | -------------------------------------------------------------------------------- /week3/04_dom_p5/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 | } -------------------------------------------------------------------------------- /week3/04_dom_p5/03_add_p_element/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /week3/04_dom_p5/04_parent_child/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /week3/04_dom_p5/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 | -------------------------------------------------------------------------------- /week3/04_dom_p5/05_style_functions/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /week3/04_dom_p5/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 | -------------------------------------------------------------------------------- /week3/04_dom_p5/06_style_css/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /week3/04_dom_p5/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 | -------------------------------------------------------------------------------- /week3/04_dom_p5/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 | } -------------------------------------------------------------------------------- /week3/04_dom_p5/07_setting_class/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /week3/04_dom_p5/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 | -------------------------------------------------------------------------------- /week3/04_dom_p5/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 | } -------------------------------------------------------------------------------- /week3/04_dom_p5/08_mousepressed/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /week3/04_dom_p5/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 | -------------------------------------------------------------------------------- /week3/04_dom_p5/09_mouseover_mouseout/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /week3/04_dom_p5/09_mouseover_mouseout/rainbow.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lmccart/itp-creative-js/1f9a0dfd2262e2003698e93edb7825efa95f8c65/week3/04_dom_p5/09_mouseover_mouseout/rainbow.png -------------------------------------------------------------------------------- /week3/04_dom_p5/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 | -------------------------------------------------------------------------------- /week3/04_dom_p5/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 | -------------------------------------------------------------------------------- /week3/04_dom_p5/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 | -------------------------------------------------------------------------------- /week3/04_dom_p5/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 | -------------------------------------------------------------------------------- /week3/04_dom_p5/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 | -------------------------------------------------------------------------------- /week3/04_dom_p5/14_button_slider/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /week3/04_dom_p5/15_wordscrambler/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 |
9 |

Please enter some text:

10 |

11 |

12 |
13 | 14 | -------------------------------------------------------------------------------- /week3/05_objects/01_objects_p5/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /week3/05_objects/01_objects_p5/sketch.js: -------------------------------------------------------------------------------- 1 | var bug; // Declare object 2 | 3 | function setup() { 4 | createCanvas(710, 400); 5 | // Create object 6 | bug = new Jitter(); 7 | } 8 | 9 | function draw() { 10 | background(50, 89, 100); 11 | bug.move(); 12 | bug.display(); 13 | } 14 | 15 | // Jitter class 16 | function Jitter() { 17 | this.x = random(width); 18 | this.y = random(height); 19 | this.diameter = random(10, 30); 20 | this.speed = 1; 21 | 22 | this.move = function() { 23 | this.x += random(-this.speed, this.speed); 24 | this.y += random(-this.speed, this.speed); 25 | }; 26 | 27 | this.display = function() { 28 | ellipse(this.x, this.y, this.diameter, this.diameter); 29 | }; 30 | } -------------------------------------------------------------------------------- /week3/05_objects/02_multiple_objects_p5/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /week3/05_objects/02_multiple_objects_p5/sketch.js: -------------------------------------------------------------------------------- 1 | var a; 2 | var b; 3 | 4 | function setup() { 5 | createCanvas(400, 400); 6 | a = new Apple(200, 300); 7 | b = new Apple(50, 100); 8 | } 9 | 10 | var draw = function() { 11 | background(255, 100, 0); 12 | a.update(); 13 | a.display(); 14 | b.update(); 15 | b.display(); 16 | } 17 | 18 | function Apple(a, b) { 19 | this.x = a; 20 | this.y = b; 21 | this.update = function() { 22 | this.x += 3; 23 | if (this.x > width) { 24 | this.x = 0; 25 | } 26 | } 27 | } 28 | 29 | // alternative way to add methods (instead of this.update...) 30 | // Apple.prototype.update = function() { 31 | // this.x += 3; 32 | // if (this.x > width) { 33 | // this.x = 0; 34 | // } 35 | // } 36 | 37 | 38 | -------------------------------------------------------------------------------- /week3/05_objects/03_objects_2_p5/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /week3/05_objects/04_array_of_objects_p5/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /week3/05_objects/04_array_of_objects_p5/sketch.js: -------------------------------------------------------------------------------- 1 | var bugs = []; // array of Jitter objects 2 | 3 | function setup() { 4 | createCanvas(710, 400); 5 | // Create objects 6 | for (var i=0; i<50; i++) { 7 | bugs.push(new Jitter()); 8 | } 9 | } 10 | 11 | function draw() { 12 | background(50, 89, 100); 13 | for (var i=0; i 2 | 27 | 28 | 29 | 30 | -------------------------------------------------------------------------------- /week4/servi_serve_static/.tmpscript: -------------------------------------------------------------------------------- 1 | var servi = require('servi'); 2 | 3 | var app = new servi(true); 4 | 5 | 6 | serveFiles("public"); 7 | 8 | 9 | if (typeof run === 'function') { 10 | app.defaultRoute(run); 11 | } 12 | start(); -------------------------------------------------------------------------------- /week4/servi_serve_static/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "dependencies": { 3 | "servi": "0.0.7" 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /week4/servi_serve_static/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Hello World 5 | 6 | 7 | 8 |

hellooo

9 | 10 | -------------------------------------------------------------------------------- /week4/servi_serve_static/public/other.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Hello World 5 | 6 | 7 | 8 |

I am the other page.

9 | 10 | -------------------------------------------------------------------------------- /week4/servi_serve_static/server-exported.js: -------------------------------------------------------------------------------- 1 | var servi = require('servi'); 2 | 3 | var app = new servi(true); 4 | 5 | 6 | serveFiles("public"); 7 | 8 | 9 | if (typeof run === 'function') { 10 | app.defaultRoute(run); 11 | } 12 | start(); -------------------------------------------------------------------------------- /week4/servi_serve_static/server.js: -------------------------------------------------------------------------------- 1 | serveFiles("public"); -------------------------------------------------------------------------------- /week5/00_callback_setTimeout.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 |

I love pandas.

5 | 6 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /week5/01_p5_examples/00_loadStrings/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /week5/01_p5_examples/00_loadStrings/sketch.js: -------------------------------------------------------------------------------- 1 | function setup() { 2 | createCanvas(600, 400); 3 | fill(0); 4 | noLoop(); 5 | 6 | loadStrings("lines.txt", doText); 7 | } 8 | 9 | function draw() { 10 | background(0, 150, 250); 11 | 12 | } 13 | 14 | function doText(data) { 15 | for (var i=0; i 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /week5/01_p5_examples/01_loadStrings_p5.dom/sketch.js: -------------------------------------------------------------------------------- 1 | // var lines; 2 | 3 | // function preload() { 4 | // lines = loadStrings("lines.txt"); 5 | // } 6 | 7 | function setup() { 8 | noLoop(); 9 | loadStrings("lines.txt", doText); 10 | } 11 | 12 | function doText(data) { 13 | for (var i=0; i 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /week5/01_p5_examples/02_loadJSON/sketch.js: -------------------------------------------------------------------------------- 1 | 2 | function setup() { 3 | createCanvas(600, 400); 4 | noLoop(); 5 | noStroke(); 6 | textSize(20); 7 | 8 | loadJSON("data.json", drawData); 9 | } 10 | 11 | function draw() { 12 | background(255, 0, 0); 13 | console.log(int(random(0, 2))); 14 | } 15 | 16 | 17 | function drawData(data) { 18 | 19 | background(120, 180, 200); 20 | 21 | // person 1 bubble 22 | fill(155, 30, 180, 180); 23 | ellipse(250, 200, data.person1.age * 5, data.person1.age * 5); // person1.age = 30 24 | fill(255); 25 | text(data.person1.name, 210, 200); // person1.name = Morgan 26 | 27 | // person 2 bubble 28 | fill(180, 180, 34, 180); 29 | ellipse(350, 200, data.person2.age * 5, data.person2.age * 5); // person2.age = 32 30 | fill(255); 31 | text(data.person2.name, 330, 200); // person2.name = Joss 32 | 33 | } -------------------------------------------------------------------------------- /week5/01_p5_examples/03_loadJSON_OOP/data.json: -------------------------------------------------------------------------------- 1 | [ { 2 | "name": "Morgan", 3 | "age": "30", 4 | "location": "Boston", 5 | "desire": "Singing", 6 | "fear": "Violence" 7 | }, 8 | { 9 | "name": "Joss", 10 | "age": "42", 11 | "location": "Boston", 12 | "desire": "Hiking", 13 | "fear": "Irrationality" 14 | } 15 | ] -------------------------------------------------------------------------------- /week5/01_p5_examples/03_loadJSON_OOP/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /week5/01_p5_examples/04_loadXML/data.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | Belgian Waffles 4 | $5.95 5 | 6 | Two of our famous Belgian Waffles with plenty of real maple syrup 7 | 8 | 650 9 | 10 | 11 | Strawberry Belgian Waffles 12 | $7.95 13 | 14 | Light Belgian waffles covered with strawberries and whipped cream 15 | 16 | 900 17 | 18 | 19 | French Toast 20 | $4.50 21 | 22 | Thick slices made from our homemade sourdough bread 23 | 24 | 600 25 | 26 | -------------------------------------------------------------------------------- /week5/01_p5_examples/04_loadXML/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /week5/01_p5_examples/04_loadXML/sketch.js: -------------------------------------------------------------------------------- 1 | 2 | function setup() { 3 | createCanvas(600, 400); 4 | noLoop(); 5 | noStroke(); 6 | textSize(20); 7 | 8 | loadXML("data.xml", drawData); 9 | } 10 | 11 | function draw() { 12 | background(255, 0, 0); 13 | } 14 | 15 | 16 | function drawData(data) { 17 | 18 | console.log(data); 19 | 20 | var foods = data.getElementsByTagName("food"); 21 | for (var i=0; i 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /week5/01_p5_examples/05_external_API_weather0/sketch.js: -------------------------------------------------------------------------------- 1 | function setup() { 2 | 3 | loadJSON('http://api.openweathermap.org/data/2.5/weather?q=NewYork,USA', drawWeather); 4 | 5 | createCanvas(600, 400); 6 | noLoop(); 7 | noStroke(); 8 | 9 | } 10 | 11 | function drawWeather(weather) { 12 | 13 | // Get the loaded JSON data 14 | console.log(weather); // inspect the weather JSON 15 | var humidity = weather.main.humidity; // get the main.humidity out of the loaded JSON 16 | console.log(humidity); // inspect the humidity in the console 17 | 18 | background(40, 90, 200); 19 | fill(0, 255, 255, humidity); // use the humidity value to set the alpha 20 | for (var i = 0; i < 50; i++) { 21 | ellipse(random(width), random(height), 30, 30); 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /week5/01_p5_examples/06_external_API_weather1/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /week5/01_p5_examples/06_external_API_weather1/sketch.js: -------------------------------------------------------------------------------- 1 | // http://openweathermap.org/API 2 | 3 | function setup() { 4 | createCanvas(1200, 400); 5 | noLoop(); 6 | textAlign(CENTER); 7 | ellipseMode(CENTER); 8 | noStroke(); 9 | fill(0); 10 | loadJSON("http://api.openweathermap.org/data/2.5/forecast/daily?q=London&mode=json&units=metric&cnt=7", drawData); 11 | } 12 | 13 | function draw() { 14 | } 15 | 16 | function drawData(data) { 17 | 18 | print(data.list); 19 | for (var i=0; i 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /week5/01_p5_examples/07_external_API_nytimes/sketch.js: -------------------------------------------------------------------------------- 1 | // http://developer.nytimes.com 2 | 3 | function setup() { 4 | createCanvas(1200, 400); 5 | noLoop(); 6 | noStroke(); 7 | fill(0); 8 | var url = "http://api.nytimes.com/svc/search/v2/articlesearch.jsonp?callback=svc_search_v2_articlesearch&q=obama&api-key=sample-key"; 9 | loadJSON(url, drawDocs); 10 | } 11 | 12 | function draw() { 13 | } 14 | 15 | function drawDocs(data) { 16 | var docs = data.response.docs; 17 | for (var i=0; i 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /week5/01_p5_examples/08_preload_loadStrings/sketch.js: -------------------------------------------------------------------------------- 1 | var lines; 2 | 3 | function preload() { 4 | lines = loadStrings("lines.txt"); 5 | } 6 | 7 | function setup() { 8 | createCanvas(600, 400); 9 | //lines = loadStrings("lines.txt"); // doesn't load in time 10 | textSize(20); 11 | fill(0); 12 | noLoop(); 13 | } 14 | 15 | function draw() { 16 | for (var i=0; i 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /week5/01_p5_examples/09_preload_loadJSON/sketch.js: -------------------------------------------------------------------------------- 1 | var data; 2 | 3 | function preload() { 4 | data = loadJSON("data.json"); 5 | } 6 | 7 | function setup() { 8 | createCanvas(600, 400); 9 | noLoop(); 10 | noStroke(); 11 | textSize(20); 12 | } 13 | 14 | function draw() { 15 | console.log(data); 16 | background(120, 180, 200); 17 | 18 | 19 | // 20 | // You can access JSON values by using a '.' followed by the key 21 | // 22 | // data.person1.name = "Morgan" 23 | // data.person2.name = "Joss" 24 | // 25 | 26 | // person 1 bubble 27 | fill(155, 30, 180, 180); 28 | ellipse(250, 200, data.person1.age * 5, data.person1.age * 5); // person1.age = 30 29 | fill(255); 30 | text(data.person1.name, 210, 200); // person1.name = Morgan 31 | 32 | // person 2 bubble 33 | fill(180, 180, 34, 180); 34 | ellipse(350, 200, data.person2.age * 5, data.person2.age * 5); // person2.age = 32 35 | fill(255); 36 | text(data.person2.name, 330, 200); // person2.name = Joss 37 | } 38 | -------------------------------------------------------------------------------- /week5/01_p5_examples/10_callback_clock/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /week5/01_p5_examples/10_callback_clock/sketch.js: -------------------------------------------------------------------------------- 1 | var elt; 2 | 3 | var counter = 0; 4 | 5 | function setup() { 6 | elt = createP(counter); 7 | elt.style("padding:50px; font-size:50px;"); 8 | 9 | // setInterval() triggers a function at the number of milliseconds later over and over 10 | setInterval(next,1000); 11 | } 12 | 13 | // Here is the function that is triggered 14 | function next() { 15 | elt.html(counter); 16 | counter++; 17 | 18 | // If we used setTimeout, we could recursively ask for this function to be triggered again one second later 19 | // setTimeout(next,1000); 20 | } -------------------------------------------------------------------------------- /week5/01_p5_examples/11_resize_window/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /week5/01_p5_examples/11_resize_window/sketch.js: -------------------------------------------------------------------------------- 1 | 2 | function setup() { 3 | createCanvas(windowWidth, windowHeight); 4 | } 5 | 6 | function draw() { 7 | background(51); 8 | fill(255); 9 | ellipse(width/2,height/2,100,100); 10 | } 11 | 12 | function windowResized() { 13 | resizeCanvas(windowWidth, windowHeight); 14 | }; -------------------------------------------------------------------------------- /week5/01_p5_examples/12_weekly_weather_viz/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 |
8 | -------------------------------------------------------------------------------- /week5/01_p5_examples/12_weekly_weather_viz/sketch.js: -------------------------------------------------------------------------------- 1 | 2 | var url = "http://api.openweathermap.org/data/2.5/forecast/daily?lat=35&lon=139&cnt=10&mode=json" 3 | 4 | function setup() { 5 | createCanvas(windowWidth, windowHeight); 6 | loadJSON(url, handleData); 7 | } 8 | 9 | function handleData(data) { 10 | console.log(data.list); 11 | 12 | for (var i=0; i 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /week5/01_p5_examples/13_weather_motion_input/sketch.js: -------------------------------------------------------------------------------- 1 | var x = 300; 2 | var y = 300; 3 | var speed = 0; 4 | var input; 5 | var button; 6 | var url = "http://api.openweathermap.org/data/2.5/weather?q="; 7 | 8 | function setup() { 9 | createCanvas(windowWidth, windowHeight); 10 | background(200); 11 | 12 | input = createInput(); 13 | input.position(50, 50); 14 | 15 | button = createButton("submit"); 16 | button.position(50, 80); 17 | button.mousePressed(updateData); 18 | } 19 | 20 | function draw() { 21 | background(200); 22 | ellipse(x, y, 50, 50); 23 | x += speed; 24 | } 25 | 26 | function handleData(weatherData) { 27 | speed = weatherData.wind.speed; 28 | } 29 | 30 | function updateData() { 31 | var city = input.value(); // text in the box 32 | console.log(city); 33 | //var city = "NewYork,USA"; 34 | loadJSON(url+city, handleData); 35 | x = 300; 36 | } 37 | 38 | -------------------------------------------------------------------------------- /week5/02_jquery_examples/00_ajax_text/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 |

8 | -------------------------------------------------------------------------------- /week5/02_jquery_examples/00_ajax_text/sketch.js: -------------------------------------------------------------------------------- 1 | $(document).ready(function(){ 2 | $.ajax({ 3 | url: "lines.txt", 4 | dataType: 'text', 5 | success: function(data) { 6 | $("#sentences").html(data); 7 | }, 8 | error: function() { 9 | alert("error"); 10 | } 11 | }); 12 | }); -------------------------------------------------------------------------------- /week5/02_jquery_examples/01_ajax_json/data.json: -------------------------------------------------------------------------------- 1 | [ { 2 | "name": "Morgan", 3 | "age": "30", 4 | "location": "Boston", 5 | "desire": "Singing", 6 | "fear": "Violence" 7 | }, 8 | { 9 | "name": "Joss", 10 | "age": "42", 11 | "location": "Boston", 12 | "desire": "Hiking", 13 | "fear": "Irrationality" 14 | } 15 | ] -------------------------------------------------------------------------------- /week5/02_jquery_examples/01_ajax_json/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /week5/02_jquery_examples/01_ajax_json/sketch.js: -------------------------------------------------------------------------------- 1 | $(document).ready(function(){ 2 | $.ajax({ 3 | url: "data.json", 4 | dataType: 'json', 5 | success: function(data) { 6 | alert("First person is: " + data[0].name ); 7 | }, 8 | error: function() { 9 | alert("error"); 10 | } 11 | }); 12 | }); -------------------------------------------------------------------------------- /week5/02_jquery_examples/02_ajax_json_external_API/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /week5/02_jquery_examples/02_ajax_json_external_API/sketch.js: -------------------------------------------------------------------------------- 1 | $(document).ready(function(){ 2 | $.ajax({ 3 | url: "http://api.openweathermap.org/data/2.5/weather?id=5128581&units=imperial", 4 | dataType: 'json', 5 | success: function(data) { 6 | alert("Temperature is: " + data.main.temp ); 7 | }, 8 | error: function() { 9 | alert("error"); 10 | } 11 | }); 12 | }); -------------------------------------------------------------------------------- /week5/02_jquery_examples/03_getJSON_json/data.json: -------------------------------------------------------------------------------- 1 | [ { 2 | "name": "Morgan", 3 | "age": "30", 4 | "location": "Boston", 5 | "desire": "Singing", 6 | "fear": "Violence" 7 | }, 8 | { 9 | "name": "Joss", 10 | "age": "42", 11 | "location": "Boston", 12 | "desire": "Hiking", 13 | "fear": "Irrationality" 14 | } 15 | ] -------------------------------------------------------------------------------- /week5/02_jquery_examples/03_getJSON_json/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /week5/02_jquery_examples/03_getJSON_json/sketch.js: -------------------------------------------------------------------------------- 1 | $(document).ready(function(){ 2 | $.getJSON("data.json", function(data) { 3 | alert("First person name is: " + data[0].name ); 4 | }); 5 | }); -------------------------------------------------------------------------------- /week5/02_jquery_examples/04_getJSON_json_external_API/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /week5/02_jquery_examples/04_getJSON_json_external_API/sketch.js: -------------------------------------------------------------------------------- 1 | $(document).ready(function(){ 2 | $.getJSON("http://api.openweathermap.org/data/2.5/weather?id=5128581&units=imperial", function(data) { 3 | alert("Temperature is: " + data.main.temp ); 4 | }); 5 | }); -------------------------------------------------------------------------------- /week5/03_servi_examples/.tmpscript: -------------------------------------------------------------------------------- 1 | var servi = require('servi'); 2 | 3 | var app = new servi(true); 4 | 5 | 6 | serveFiles("public"); 7 | 8 | 9 | if (typeof run === 'function') { 10 | app.defaultRoute(run); 11 | } 12 | start(); -------------------------------------------------------------------------------- /week5/03_servi_examples/01_serve_json/.tmpscript: -------------------------------------------------------------------------------- 1 | var servi = require('servi'); 2 | 3 | var app = new servi(true); 4 | 5 | 6 | serveFiles("public"); 7 | 8 | 9 | if (typeof run === 'function') { 10 | app.defaultRoute(run); 11 | } 12 | start(); -------------------------------------------------------------------------------- /week5/03_servi_examples/01_serve_json/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "dependencies": { 3 | "servi": "0.0.7" 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /week5/03_servi_examples/01_serve_json/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Hello World 5 | 6 | 7 | 8 |

hellooo

9 | 10 | -------------------------------------------------------------------------------- /week5/03_servi_examples/01_serve_json/public/other.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Hello World 5 | 6 | 7 | 8 |

I am the other page.

9 | 10 | -------------------------------------------------------------------------------- /week5/03_servi_examples/01_serve_json/server.js: -------------------------------------------------------------------------------- 1 | var servi = require('servi'); 2 | 3 | var app = new servi(true); 4 | 5 | port(8080); 6 | 7 | 8 | var data = { 9 | firstName: "John", 10 | lastName: "Smith", 11 | age: 25, 12 | address: { 13 | streetAddress: "21 2nd Street", 14 | city: "New York", 15 | state: "NY", 16 | postalCode: "10021" 17 | }, 18 | phoneNumber: [ 19 | { 20 | type: "home", 21 | number: "212 555-1234" 22 | }, 23 | { 24 | type: "fax", 25 | number: "646 555-4567" 26 | } 27 | ], 28 | gender:{ 29 | type:"male" 30 | } 31 | }; 32 | 33 | function run(request) { 34 | 35 | request.header("application/json"); 36 | request.respond(JSON.stringify(data)); 37 | } 38 | 39 | 40 | if (typeof run === 'function') { 41 | app.defaultRoute(run); 42 | } 43 | start(); -------------------------------------------------------------------------------- /week5/04_instagram_example/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /week5/04_instagram_example/sketch.js: -------------------------------------------------------------------------------- 1 | 2 | function setup() { 3 | var url = "https://api.instagram.com/v1/media/search?lat=40.7127&lng=74.0059&client_id=41fc508443ae4954adbf453ec6265f1e"; 4 | loadJSON(url, handleData); 5 | } 6 | 7 | function handleData(jsonData) { 8 | console.log(jsonData.data.length); 9 | 10 | var pics = jsonData.data; 11 | 12 | for (var i=0; i 2 | 3 | 4 | Hello World 5 | 6 | 7 | 8 |

hellooo

9 | 10 | -------------------------------------------------------------------------------- /week6/00_serve_static/public/other.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Hello World 5 | 6 | 7 | 8 |

I am the other page.

9 | 10 | -------------------------------------------------------------------------------- /week6/00_serve_static/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); 7 | 8 | // tell the server to serve static files from a folder called public 9 | // the word 'public' should match a folder of the same name you create 10 | // in this directory 11 | serveFiles('public'); 12 | 13 | 14 | // start the server 15 | start(); -------------------------------------------------------------------------------- /week6/01_programmatic_response/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); 7 | 8 | // tell the server to response with "Hello World" 9 | function run(request) { 10 | request.respond("Hello World"); 11 | } 12 | 13 | // tell the server to run the "run" function on each request 14 | app.defaultRoute(run); 15 | 16 | 17 | // start the server 18 | start(); 19 | -------------------------------------------------------------------------------- /week6/02_server_variables/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); 7 | 8 | // have the server keep track of a variable "count" 9 | var count = 0; 10 | 11 | // tell the server to response with "Hello World" 12 | function run(request) { 13 | 14 | // print which path is requested 15 | // console.log(request.pathname); 16 | 17 | count++; 18 | request.respond("Hello World "+count); 19 | } 20 | 21 | // tell the server to run the "run" function on each request 22 | app.defaultRoute(run); 23 | 24 | 25 | // start the server 26 | start(); 27 | -------------------------------------------------------------------------------- /week6/03_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); 7 | 8 | // tell the server to response with "Hello World" 9 | function run(request) { 10 | request.respond("Hello World "); 11 | } 12 | 13 | // tell the server to run the "run" function on main url request 14 | route('/',run); 15 | 16 | 17 | // start the server 18 | start(); 19 | -------------------------------------------------------------------------------- /week6/04_routing_multiple_paths/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); 7 | 8 | // set up routes 9 | route('/', run); 10 | route('/one',handleOne); 11 | route('/two',handleTwo); 12 | route('/buckle/my/shoe',buckleMyShoe); 13 | 14 | // define route handler functions 15 | function run(request) { 16 | console.log("hellow world"); 17 | request.respond("hello world"); 18 | } 19 | 20 | function handleOne(request) { 21 | console.log("one"); 22 | request.respond("thanks one"); 23 | } 24 | 25 | function handleTwo(request) { 26 | console.log("two"); 27 | request.respond("thanks two"); 28 | } 29 | 30 | function buckleMyShoe(request) { 31 | console.log("buckle my shoe"); 32 | request.respond("buckle my shoe"); 33 | } 34 | 35 | 36 | // start the server 37 | start(); 38 | -------------------------------------------------------------------------------- /week6/05_routing_multiple_paths2/server.js: -------------------------------------------------------------------------------- 1 | // adapted from https://github.com/robynitp/networkedmedia 2 | 3 | // every servi application must have these 2 lines 4 | var servi = require('servi'); 5 | var app = new servi(true); 6 | 7 | // set the port (defaults to 3000 if you leave out this line) 8 | port(3001); 9 | 10 | // set up routes 11 | route('/', showHome); 12 | route('/about', showAboutPage); 13 | 14 | // define route handler functions 15 | function showHome(request){ 16 | request.respond("This is the home page."); 17 | } 18 | 19 | function showAboutPage(request){ 20 | request.respond("

About Me!!!

"); 21 | } 22 | 23 | // start the server 24 | start(); 25 | -------------------------------------------------------------------------------- /week6/06_routing_with_params/server.js: -------------------------------------------------------------------------------- 1 | // adapted from https://github.com/robynitp/networkedmedia 2 | 3 | // every servi application must have these 2 lines 4 | var servi = require('servi'); 5 | var app = new servi(true); 6 | 7 | // set the port (defaults to 3000 if you leave out this line) 8 | port(3001); 9 | 10 | // set up routes 11 | route('/', showHome); 12 | route('/about', showAboutPage); 13 | route('/profile/:username',showProfile); 14 | 15 | // define route handler functions 16 | function showHome(request){ 17 | request.respond("This is the home page."); 18 | } 19 | 20 | function showAboutPage(request){ 21 | request.respond("

About Me!!!

"); 22 | } 23 | 24 | function showProfile(request){ 25 | // grab the username 26 | var username = request.params.username; 27 | 28 | // create the content for the response 29 | var content = "

" + username + "

"; 30 | content += "

All the user's info here

"; 31 | 32 | // respond with the content 33 | request.respond(content); 34 | } 35 | 36 | 37 | // start the server 38 | start(); 39 | -------------------------------------------------------------------------------- /week6/09_create_db/people.db: -------------------------------------------------------------------------------- 1 | {"name":"Alejandro","_id":"mFSx6tzhdPw2ykEm"} 2 | {"name":"Mimi","_id":"7wvpqSJHLcaTIMFY"} 3 | {"name":"Gregor","_id":"ctgyB61GwzdWJwsq"} 4 | {"name":"Ramie","_id":"QZeHPm8JX0yaT6Ya"} 5 | -------------------------------------------------------------------------------- /week6/09_create_db/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); 7 | 8 | 9 | // set up a database 10 | // looks for a file called "people.db" or creates one if it doesn't exist 11 | var namesDB = useDatabase("people"); 12 | 13 | // add some people to the db 14 | namesDB.add({name:"Alejandro"}); 15 | namesDB.add({name:"Mimi"}); 16 | namesDB.add({name:"Gregor"}); 17 | namesDB.add({name:"Ramie"}); 18 | 19 | // each of these lines could also be written: 20 | // var p = { 21 | // name: "Alexjandro" 22 | // }; 23 | // namesDB.add(p); 24 | 25 | 26 | // set up the routes 27 | route('/', showAll); 28 | 29 | 30 | // show all the names 31 | function showAll(request){ 32 | namesDB.getAll(gotNames); 33 | 34 | function gotNames(names){ 35 | var namestext = ""; 36 | for (i =0; i < names.length; i++) { 37 | namestext += names[i].name + "
"; 38 | } 39 | request.respond( namestext ); 40 | } 41 | 42 | } 43 | 44 | start(); -------------------------------------------------------------------------------- /week6/10_create_db2/people.db: -------------------------------------------------------------------------------- 1 | {"name":"Alejandro","age":19,"_id":"Io4H25hotJdvKIih"} 2 | {"name":"Mimi","age":20,"_id":"8LKEjZ0oplKnOU5M"} 3 | {"name":"Gregor","age":85,"_id":"awcnSLVuVzfxRrnM"} 4 | {"name":"Ramie","age":9,"_id":"d2yVXHycFBCz0kSt"} 5 | -------------------------------------------------------------------------------- /week6/11_db_add/people.db: -------------------------------------------------------------------------------- 1 | {"name":"lauren","_id":"mOXVinELTFflAjRw"} 2 | -------------------------------------------------------------------------------- /week6/16_template_loop/mytemplate.html: -------------------------------------------------------------------------------- 1 |

Where people live

2 | 3 | <% for (i = 0; i < people.length; i++) { %> 4 | 5 |
  • <%= people[i].name %> lives in <%= people[i].city %>
    • 6 | 7 | <% } %> -------------------------------------------------------------------------------- /week6/16_template_loop/server.js: -------------------------------------------------------------------------------- 1 | // adapted from https://github.com/robynitp/networkedmedia 2 | 3 | 4 | // every servi application must have these 2 lines 5 | var servi = require("servi"); 6 | var app = new servi(true); 7 | 8 | // set the port (defaults to 3000 if you leave out this line) 9 | port(3001); 10 | 11 | var data = { 12 | people: [ 13 | { 14 | "name": "Brad", 15 | "city": "London" 16 | }, 17 | { 18 | "name": "Jill", 19 | "city": "Tokyo" 20 | }, 21 | { 22 | "name": "Kate", 23 | "city": "New York" 24 | } 25 | ] 26 | }; 27 | route('/', showPage); 28 | 29 | function showPage(request) { 30 | request.render("mytemplate.html",mydata); 31 | } 32 | 33 | start(); 34 | -------------------------------------------------------------------------------- /week6/extra/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/extra/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/extra/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/extra/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 | } --------------------------------------------------------------------------------