{"id":279,"date":"2012-04-20T17:16:16","date_gmt":"2012-04-20T17:16:16","guid":{"rendered":"http:\/\/www.phanv.com\/blog\/?p=279"},"modified":"2013-06-30T20:02:59","modified_gmt":"2013-06-30T20:02:59","slug":"visualizing-heartbeat","status":"publish","type":"post","link":"https:\/\/www.phanv.com\/blog\/visualizing-heartbeat\/","title":{"rendered":"Visualizing Heartbeat"},"content":{"rendered":"<span class=\"vvqbox vvqvimeo\" style=\"width:640px;height:400px;\"><iframe loading=\"lazy\" id=\"vvq-279-vimeo-1\" src=\"\/\/player.vimeo.com\/video\/41274910?title=1&#038;byline=1&#038;portrait=0&#038;fullscreen=1\" width=\"640\" height=\"400\" frameborder=\"0\"><a href=\"http:\/\/www.vimeo.com\/41274910\">http:\/\/www.vimeo.com\/41274910<\/a><\/iframe><\/span>\n<p><em>Note: The animation is sped up for demonstration purposes.<\/em><\/p>\n<p>Personal Statement:<\/p>\n<p>After being exposed to the concepts in Nature of code, I got inspired by using organic and real life rhythms to drive natural animations using concepts from the class.<\/p>\n<p>Description:<\/p>\n<p>The user&#8217;s heartbeat is analyzed using a stethoscope. The user&#8217;s heartbeat is used to provide pulse rate and amplitude. A visualization using these two factors is projected for user to experience.<\/p>\n<p>1) pulse rate of the user drives the speed of the animation.<\/p>\n<p>2) the amplitude (or volume of the heartbeat captured) determines the brightness of the visualization.<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>Research:<\/p>\n<p>Using the concepts taught in nature of code, I explored Max\/jitter to learn more about how live amplitude of sound can manipulate 3D animation that appropriately represents the nature and depth of sound.<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<div><\/div>\n<p><a href=\"http:\/\/www.phanv.com\/blog\/wp-content\/uploads\/2012\/04\/heartbeat_vis_00.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-280\" title=\"heartbeat_vis_00\" src=\"http:\/\/www.phanv.com\/blog\/wp-content\/uploads\/2012\/04\/heartbeat_vis_00.png\" alt=\"\" width=\"1920\" height=\"1200\" srcset=\"https:\/\/www.phanv.com\/blog\/wp-content\/uploads\/2012\/04\/heartbeat_vis_00.png 1920w, https:\/\/www.phanv.com\/blog\/wp-content\/uploads\/2012\/04\/heartbeat_vis_00-300x187.png 300w, https:\/\/www.phanv.com\/blog\/wp-content\/uploads\/2012\/04\/heartbeat_vis_00-1024x640.png 1024w, https:\/\/www.phanv.com\/blog\/wp-content\/uploads\/2012\/04\/heartbeat_vis_00-220x137.png 220w\" sizes=\"auto, (max-width: 1920px) 100vw, 1920px\" \/><\/a><\/p>\n<p>&nbsp;<\/p>\n<p>Visualizing Heartbeat in 2d space<\/p>\n<p>&nbsp;<\/p>\n<p><a href=\"http:\/\/www.phanv.com\/blog\/wp-content\/uploads\/2012\/04\/heartbeat_vis_02.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-282\" title=\"heartbeat_vis_02\" src=\"http:\/\/www.phanv.com\/blog\/wp-content\/uploads\/2012\/04\/heartbeat_vis_02.png\" alt=\"\" width=\"1920\" height=\"1200\" srcset=\"https:\/\/www.phanv.com\/blog\/wp-content\/uploads\/2012\/04\/heartbeat_vis_02.png 1920w, https:\/\/www.phanv.com\/blog\/wp-content\/uploads\/2012\/04\/heartbeat_vis_02-300x187.png 300w, https:\/\/www.phanv.com\/blog\/wp-content\/uploads\/2012\/04\/heartbeat_vis_02-1024x640.png 1024w, https:\/\/www.phanv.com\/blog\/wp-content\/uploads\/2012\/04\/heartbeat_vis_02-220x137.png 220w\" sizes=\"auto, (max-width: 1920px) 100vw, 1920px\" \/><\/a><\/p>\n<p>&nbsp;<\/p>\n<p>Transfer to 3d space OpenGL<\/p>\n<p>&nbsp;<\/p>\n<p><a href=\"http:\/\/www.phanv.com\/blog\/wp-content\/uploads\/2012\/04\/heartbeat_vis_03.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-288\" title=\"heartbeat_vis_03\" src=\"http:\/\/www.phanv.com\/blog\/wp-content\/uploads\/2012\/04\/heartbeat_vis_03.png\" alt=\"\" width=\"1920\" height=\"1200\" srcset=\"https:\/\/www.phanv.com\/blog\/wp-content\/uploads\/2012\/04\/heartbeat_vis_03.png 1920w, https:\/\/www.phanv.com\/blog\/wp-content\/uploads\/2012\/04\/heartbeat_vis_03-300x187.png 300w, https:\/\/www.phanv.com\/blog\/wp-content\/uploads\/2012\/04\/heartbeat_vis_03-1024x640.png 1024w, https:\/\/www.phanv.com\/blog\/wp-content\/uploads\/2012\/04\/heartbeat_vis_03-220x137.png 220w\" sizes=\"auto, (max-width: 1920px) 100vw, 1920px\" \/><\/a><\/p>\n<p>&nbsp;<\/p>\n<p>Side View: Rotate X View to 90<\/p>\n<p>&nbsp;<\/p>\n<p><a href=\"http:\/\/www.phanv.com\/blog\/wp-content\/uploads\/2012\/04\/stethoscope_mic_02.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-297\" title=\"stethoscope_mic_02\" src=\"http:\/\/www.phanv.com\/blog\/wp-content\/uploads\/2012\/04\/stethoscope_mic_02.jpg\" alt=\"\" width=\"2370\" height=\"1737\" srcset=\"https:\/\/www.phanv.com\/blog\/wp-content\/uploads\/2012\/04\/stethoscope_mic_02.jpg 2370w, https:\/\/www.phanv.com\/blog\/wp-content\/uploads\/2012\/04\/stethoscope_mic_02-300x219.jpg 300w, https:\/\/www.phanv.com\/blog\/wp-content\/uploads\/2012\/04\/stethoscope_mic_02-1024x750.jpg 1024w, https:\/\/www.phanv.com\/blog\/wp-content\/uploads\/2012\/04\/stethoscope_mic_02-220x161.jpg 220w\" sizes=\"auto, (max-width: 2370px) 100vw, 2370px\" \/><\/a><\/p>\n<p>Implementation:<\/p>\n<p>Stethoscope, Microphone (Sanken COS-11), Macbook Pro with Max\/Jitter, Projector \/LCD screen.<\/p>\n<p>&nbsp;<\/p>\n<p><a href=\"http:\/\/www.phanv.com\/blog\/wp-content\/uploads\/2012\/04\/stethoscope_mic_01.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-296\" title=\"stethoscope_mic_01\" src=\"http:\/\/www.phanv.com\/blog\/wp-content\/uploads\/2012\/04\/stethoscope_mic_01.jpg\" alt=\"\" width=\"1920\" height=\"1608\" srcset=\"https:\/\/www.phanv.com\/blog\/wp-content\/uploads\/2012\/04\/stethoscope_mic_01.jpg 1920w, https:\/\/www.phanv.com\/blog\/wp-content\/uploads\/2012\/04\/stethoscope_mic_01-300x251.jpg 300w, https:\/\/www.phanv.com\/blog\/wp-content\/uploads\/2012\/04\/stethoscope_mic_01-1024x857.jpg 1024w, https:\/\/www.phanv.com\/blog\/wp-content\/uploads\/2012\/04\/stethoscope_mic_01-220x184.jpg 220w\" sizes=\"auto, (max-width: 1920px) 100vw, 1920px\" \/><\/a><\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>References:<\/p>\n<p>Dan Shiffman and Scott Fitzgerald for inspiring the project.<\/p>\n<div id=\"references\">\n<p>Special thanks to Brett Murphy, Dollee Bhatia.<\/p>\n<p>and<\/p>\n<p>&nbsp;<\/p>\n<p>Masato Tsutsui for his Max Tutorials at <a href=\"http:\/\/audiovisualacademy.com\/avin\/en\/\/avlab\/\">AV:lab<\/a>  <\/p>\n<\/div>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>Press:<\/p>\n<ul>\n<li><a href=\"http:\/\/news.discovery.com\/tech\/visualizing-heartbeat-120509.html\">Discovery News: HEARTBEAT RHYTHM DRIVES ANIMATION<\/a><\/li>\n<\/ul>\n<ul>\n<li><a href=\"http:\/\/interactivedesign.it\/blog\/interactive-design\/2012\/05\/02\/phan-v-visualizing-heartbeat\/\">Interactive Design: PHAN V \u2013 VISUALIZING HEARTBEAT<\/a><\/li>\n<\/ul>\n<ul>\n<li><a href=\"http:\/\/www.engadget.com\/2012\/05\/08\/heartbeat-visualizer-lets-your-ticker-power-a-light-show-video\/\">Engadget: Heartbeat visualizer lets your ticker power a light show<\/a><\/li>\n<\/ul>\n<ul>\n<li><a href=\"http:\/\/www.unr.edu\/art\/prospectives12\/Project-Sound.html\">Prospectives&#8217;12: International Festival of Digital Art<\/a><\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p><strong>Visualizing Heartbeat<\/strong>\u00a0was created for Dan Shiffman&#8217;s Spring\u00a02012 Nature of Code class at\u00a0<a href=\"http:\/\/www.nyu.edu\/\">New York University<\/a>&#8216;s\u00a0<a href=\"http:\/\/itp.nyu.edu\/itp\/\">Interactive Telecommunications Program<\/a>\u00a0(NYU ITP).<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Note: The animation is sped up for demonstration purposes. Personal Statement: After being exposed to the concepts in Nature of code, I got inspired by using organic and real life rhythms to drive natural animations using concepts from the class. Description: The user&#8217;s heartbeat is analyzed using a stethoscope. The user&#8217;s heartbeat is used to [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":282,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[12,13,14],"tags":[],"class_list":["post-279","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-boxes-and-lines-for-rods-and-cones","category-max","category-nature-of-code"],"jetpack_sharing_enabled":true,"jetpack_featured_media_url":"https:\/\/www.phanv.com\/blog\/wp-content\/uploads\/2012\/04\/heartbeat_vis_02.png","_links":{"self":[{"href":"https:\/\/www.phanv.com\/blog\/wp-json\/wp\/v2\/posts\/279","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.phanv.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.phanv.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.phanv.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.phanv.com\/blog\/wp-json\/wp\/v2\/comments?post=279"}],"version-history":[{"count":48,"href":"https:\/\/www.phanv.com\/blog\/wp-json\/wp\/v2\/posts\/279\/revisions"}],"predecessor-version":[{"id":286,"href":"https:\/\/www.phanv.com\/blog\/wp-json\/wp\/v2\/posts\/279\/revisions\/286"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.phanv.com\/blog\/wp-json\/wp\/v2\/media\/282"}],"wp:attachment":[{"href":"https:\/\/www.phanv.com\/blog\/wp-json\/wp\/v2\/media?parent=279"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.phanv.com\/blog\/wp-json\/wp\/v2\/categories?post=279"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.phanv.com\/blog\/wp-json\/wp\/v2\/tags?post=279"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}