{"id":1762,"date":"2011-09-05T17:15:32","date_gmt":"2011-09-06T00:15:32","guid":{"rendered":"http:\/\/mcclanahoochie.com\/blog\/?post_type=portfolio&p=1762"},"modified":"2023-06-10T10:32:43","modified_gmt":"2023-06-10T17:32:43","slug":"music-visualization-with-processing","status":"publish","type":"post","link":"https:\/\/mcclanahoochie.com\/blog\/2011\/09\/music-visualization-with-processing\/","title":{"rendered":"Music Visualization with Processing"},"content":{"rendered":"

Live Spectrogram<\/h2>\n

Re-Inspired by the awesome artistic works in\u00a0<\/span>Resonance the Film<\/a>, a TED talk on <\/span>generative music videos<\/a>,\u00a0and then remembering the good ol’ days of <\/span>MilkDrop<\/a>\u00a0magic, I found myself captivated and wanting to learn more about <\/span>music visualization<\/a>\u00a0and how I could create my own.<\/span><\/span><\/p>\n

Since I will be using Processing for the first time this semester in my computer graphics\u00a0class<\/a>, I chose to jump start my learning by exploring music visualization in the language\u00a0Processing<\/em>. Doing some very minor<\/em> research on the subject of music visualization,\u00a0I discovered that spectrograms<\/a>\u00a0are pretty neat and simple to program.<\/span><\/p>\n

So, starting with a base spectrogram application by\u00a0Dan Ellis<\/a>, I started modifying his\u00a0“LiveSpectrogram” Processing code and\u00a0created my own version. My changes include<\/em>: HSV color mode, mp3 file chooser dialog, code cleanup and code\u00a0optimizations. There is\u00a0much<\/em> more to be done, but this is a good start that already looks pretty cool.<\/p>\n

While nothing special or original, this is a fun side project that will grow into better things as I find the time.\u00a0Here are some screen shots of my simple Processing app<\/a> in action, playing two different Black Moth Super Rainbow<\/em> songs, enjoy!<\/p>\n

Sample Images<\/h2>\n

\"\"<\/a>\"\"<\/a><\/p>\n

\u00a0The 2 above = “Milk Skates<\/em>” \u00a0 \u00a0| \u00a0 \u00a0The 2 below = “Forever Heavy<\/em>“<\/p>\n

\"\"<\/a>\"\"<\/a><\/p>\n

I just find it so neat to watch and attempt to understand the patterns that form while listening!<\/p>\n

Again, it’s nothing fancy, but I found this app to be a nice and fun intro into the world of\u00a0algorithmically\u00a0generating visualizations for songs. There is a lot more<\/a> to be done here, and I’m way far behind<\/a> the latest and greatest, but I’ll\u00a0try to make more updates for fun as free time<\/a> allows…<\/p>\n

Download!<\/h2>\n

* Source code<\/a>\u00a0****<\/strong><\/em><\/h3>\n

 <\/p>\n

Update<\/strong> (9\/25\/11):
\nHow cool and clever<\/em> – a circular spectrogram<\/a>!<\/p>\n

Update<\/strong>\u00a0(11\/20\/12):
\nTweaked colors a bit, now wit more RED!…<\/p>\n

\"\"<\/a>
Tame Impala – It is not Meant to Be<\/figcaption><\/figure>\n
\"Screen<\/a>
Aphex Twin – Windowlicker<\/figcaption><\/figure>\n

Update<\/strong>\u00a0(12\/13\/12):
\n—-> Converted this to HARDWARE<\/a>\u00a0<\/em><\/strong>with an Arduino!<\/strong><\/em>\u00a0 <—-<\/p>\n","protected":false},"excerpt":{"rendered":"

Live Spectrogram Re-Inspired by the awesome artistic works in\u00a0Resonance the Film, a TED talk on generative music videos,\u00a0and then remembering the good ol’ days of MilkDrop\u00a0magic, I found myself captivated and wanting to learn more about music visualization\u00a0and how I could create my own. Since I will be using Processing for the first time this … Read more<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"advanced_seo_description":"","jetpack_seo_html_title":"","jetpack_seo_noindex":false,"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2}},"categories":[1],"tags":[80,115,101,29,81],"class_list":["post-1762","post","type-post","status-publish","format-standard","hentry","category-uncategorized","tag-music","tag-processing","tag-programming","tag-projects","tag-visualization"],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/pZdXI-sq","jetpack-related-posts":[{"id":2514,"url":"https:\/\/mcclanahoochie.com\/blog\/2012\/12\/music-visualization-with-an-arduino\/","url_meta":{"origin":1762,"position":0},"title":"Music Visualization with an Arduino","author":"mcclanahoochie","date":"December 13, 2012","format":false,"excerpt":"Audio Frequency Spectrum Analyzer &\u00a0Spectrogram As a followup to a previous post on Music Visualization with Processing (and a good excuse to play with my Arduino), I decided to convert my Processing music visualizer into hardware. The project is not finished yet, but I wanted to post a quick update\u2026","rel":"","context":"In \"arduino\"","block_context":{"text":"arduino","link":"https:\/\/mcclanahoochie.com\/blog\/tag\/arduino\/"},"img":{"alt_text":"_DSC2334","src":"https:\/\/i0.wp.com\/mcclanahoochie.com\/blog\/wp-content\/uploads\/2012\/12\/DSC2334-229x300.jpg?resize=350%2C200","width":350,"height":200},"classes":[]},{"id":882,"url":"https:\/\/mcclanahoochie.com\/blog\/2011\/01\/uroc-gpgpu-poster\/","url_meta":{"origin":1762,"position":1},"title":"UROC GPGPU Poster","author":"mcclanahoochie","date":"January 1, 2011","format":false,"excerpt":"April 2010 I find\u00a0graphics card programming fascinating. I presented a\u00a0UROC Poster on GPGPU Molecular Dynamics\u00a0analysis and visualization on the GPU at the 2010 Georgia Tech Undergraduate\u00a0Research\u00a0Symposium. I also had a cool demo set up of the system running (above), along with my Android bonds\u00a0visualization client. \u00a0 \u00a0","rel":"","context":"In \"bonds\"","block_context":{"text":"bonds","link":"https:\/\/mcclanahoochie.com\/blog\/tag\/bonds\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/mcclanahoochie.com\/blog\/wp-content\/uploads\/2011\/01\/bonds.png?resize=350%2C200","width":350,"height":200},"classes":[]},{"id":2872,"url":"https:\/\/mcclanahoochie.com\/blog\/2014\/06\/word-cloud-resume-hack\/","url_meta":{"origin":1762,"position":2},"title":"Word Cloud R\u00e9sum\u00e9 Improvement","author":"mcclanahoochie","date":"June 12, 2014","format":false,"excerpt":"Preface By no means do I claim have an impressive r\u00e9sum\u00e9, but I did want to share a trick I thought of to help me improve it. Unfortunately, like most ideas that I come up with on my own\u00a0that I think are original, doing a few Google searches proves me\u2026","rel":"","context":"In \"data\"","block_context":{"text":"data","link":"https:\/\/mcclanahoochie.com\/blog\/tag\/data\/"},"img":{"alt_text":"before using wordcloud optimization","src":"https:\/\/i0.wp.com\/mcclanahoochie.com\/blog\/wp-content\/uploads\/2014\/06\/resume_wordcloud_before-1024x640.png?resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/mcclanahoochie.com\/blog\/wp-content\/uploads\/2014\/06\/resume_wordcloud_before-1024x640.png?resize=350%2C200 1x, https:\/\/i0.wp.com\/mcclanahoochie.com\/blog\/wp-content\/uploads\/2014\/06\/resume_wordcloud_before-1024x640.png?resize=525%2C300 1.5x"},"classes":[]},{"id":1201,"url":"https:\/\/mcclanahoochie.com\/blog\/2011\/05\/ai-learning-portfolio\/","url_meta":{"origin":1762,"position":3},"title":"AI Learning Portfolio","author":"mcclanahoochie","date":"May 4, 2011","format":false,"excerpt":"As a final assignment\/write-up for my CS6601 Artificial Intelligence class at Georgia Tech, this\u00a0learning portfolio was made to summarize what I had learned throughout the course... CS 6601 Learning Portfolio This page constitutes my learning portfolio for CS 6601, Artificial Intelligence, taken in Spring 2011. In it, I discuss what\u2026","rel":"","context":"In \"ai\"","block_context":{"text":"ai","link":"https:\/\/mcclanahoochie.com\/blog\/tag\/ai\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/mcclanahoochie.com\/blog\/wp-content\/uploads\/2011\/05\/Chris2-d%2B_copy_-1.jpg?resize=350%2C200","width":350,"height":200},"classes":[]},{"id":2614,"url":"https:\/\/mcclanahoochie.com\/blog\/2012\/12\/last-post-of-2012\/","url_meta":{"origin":1762,"position":4},"title":"Last Post of 2012","author":"mcclanahoochie","date":"December 31, 2012","format":false,"excerpt":"Nothing important here, just a few highlights reflecting back on 2012... January\u00a0- Started my first 365 photo project February\u00a0- My photo on display in a random art show on campus March\u00a0- Went to SXSW in Austin TX April\u00a0- Upgraded to a Nikon D7000\u00a0\u00a0| \u00a0created PyrDetail May\u00a0- Finished\u00a0MSCS degree from GaTech\u2026","rel":"","context":"In \"life\"","block_context":{"text":"life","link":"https:\/\/mcclanahoochie.com\/blog\/tag\/life\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":1731,"url":"https:\/\/mcclanahoochie.com\/blog\/2011\/08\/image-processing-with-libjacket-opencv\/","url_meta":{"origin":1762,"position":5},"title":"Image processing with LibJacket + OpenCV","author":"mcclanahoochie","date":"August 24, 2011","format":false,"excerpt":"Update: one year later:\u00a0ArrayFire+OpenCV The OpenCV library is the de-facto standard for doing computer vision and image processing research projects. OpenCV includes several hundreds of computer vision algorithms, aimed for use in real-time vision applications. LibJacket is a matrix library built on CUDA. LibJacket offers hundreds of general matrix and\u2026","rel":"","context":"In \"arrayfire\"","block_context":{"text":"arrayfire","link":"https:\/\/mcclanahoochie.com\/blog\/tag\/arrayfire\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/mcclanahoochie.com\/blog\/wp-content\/uploads\/2011\/08\/Screen-shot-2011-08-24-at-2.42.52-PM-1024x640.png?resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/mcclanahoochie.com\/blog\/wp-content\/uploads\/2011\/08\/Screen-shot-2011-08-24-at-2.42.52-PM-1024x640.png?resize=350%2C200 1x, https:\/\/i0.wp.com\/mcclanahoochie.com\/blog\/wp-content\/uploads\/2011\/08\/Screen-shot-2011-08-24-at-2.42.52-PM-1024x640.png?resize=525%2C300 1.5x"},"classes":[]}],"jetpack_likes_enabled":false,"_links":{"self":[{"href":"https:\/\/mcclanahoochie.com\/blog\/wp-json\/wp\/v2\/posts\/1762","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/mcclanahoochie.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/mcclanahoochie.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/mcclanahoochie.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/mcclanahoochie.com\/blog\/wp-json\/wp\/v2\/comments?post=1762"}],"version-history":[{"count":0,"href":"https:\/\/mcclanahoochie.com\/blog\/wp-json\/wp\/v2\/posts\/1762\/revisions"}],"wp:attachment":[{"href":"https:\/\/mcclanahoochie.com\/blog\/wp-json\/wp\/v2\/media?parent=1762"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/mcclanahoochie.com\/blog\/wp-json\/wp\/v2\/categories?post=1762"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/mcclanahoochie.com\/blog\/wp-json\/wp\/v2\/tags?post=1762"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}