{"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_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_feature_clip_id":0,"_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},"jetpack_post_was_ever_published":false},"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":1731,"url":"https:\/\/mcclanahoochie.com\/blog\/2011\/08\/image-processing-with-libjacket-opencv\/","url_meta":{"origin":1762,"position":4},"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":[]},{"id":950,"url":"https:\/\/mcclanahoochie.com\/blog\/2011\/01\/computer-vision-on-android\/","url_meta":{"origin":1762,"position":5},"title":"Computer Vision on Android in Java","author":"mcclanahoochie","date":"January 4, 2011","format":false,"excerpt":"January 2010 \u00a0 Over the holiday break, I finally created an Android\u00a0app that allows image processing on the camera's raw data, and displays it back on the screen. It only uses\u00a0Java on the CPU for now, but in my free time I'll be porting the code to OpenGL ES to\u2026","rel":"","context":"In \"android\"","block_context":{"text":"android","link":"https:\/\/mcclanahoochie.com\/blog\/tag\/android\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/mcclanahoochie.com\/blog\/wp-content\/uploads\/2011\/01\/device-sobel-2-small.png?resize=350%2C200","width":350,"height":200},"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}]}}