{"id":72,"date":"2011-07-19T10:27:38","date_gmt":"2011-07-19T08:27:38","guid":{"rendered":"http:\/\/esimov.zxq.net\/blog\/?p=72"},"modified":"2013-03-30T06:04:27","modified_gmt":"2013-03-30T06:04:27","slug":"sound-visualisation","status":"publish","type":"post","link":"https:\/\/esimov.com\/blog\/2011\/07\/19\/sound-visualisation\/","title":{"rendered":"Sound visualization"},"content":{"rendered":"

Sound visualization is one thing which I was always fascinated by. I stumbled upon this small Javascript experiment<\/a> and thought would be nice to reproduce it in Actionscript, adding some spicy extra addons like interaction and sounds reacting shapes. So I decided to implement in Actionscript. Actually it went very well, in fact i only retained the core algorithm. The core algorithm consist in just a few lines:<\/p>\n

private function<\/span> createSurface(<\/span>a:<\/span>Number,<\/span> z:<\/span>Number)<\/span>:<\/span>Point3D\r\n{<\/span>\r\n\tvar<\/span> r:<\/span>Number =<\/span> W\/<\/span>10<\/span>;<\/span>\r\n\tvar<\/span> R:<\/span>Number =<\/span> W\/<\/span>3<\/span>;<\/span>\r\n\tvar<\/span> b:<\/span>Number =<\/span> -<\/span>10<\/span>*<\/span>Math.<\/span>cos(<\/span>a*<\/span>5<\/span> +<\/span> T)<\/span>;<\/span>\r\n\r\n\treturn<\/span> new<\/span> Point3D(<\/span>W\/<\/span>2<\/span> +<\/span> (<\/span>R*<\/span>Math.<\/span>cos(<\/span>a)<\/span> +<\/span> r*<\/span>Math.<\/span>sin(<\/span>z+<\/span>2<\/span>*<\/span>T)<\/span>)<\/span>\/<\/span>z +<\/span> Math.<\/span>cos(<\/span>a)<\/span>*<\/span>b,<\/span>\r\n\t\t\t\t\t\t\t   H\/<\/span>2<\/span> +<\/span> (<\/span>R*<\/span>Math.<\/span>sin(<\/span>a)<\/span>)<\/span>\/<\/span>z +<\/span> Math.<\/span>sin(<\/span>a)<\/span>*<\/span>b,<\/span> Z)<\/span>;<\/span>\r\n}<\/span>\r\n\r\nprivate function<\/span> drawQuad(<\/span>a:<\/span>Number,<\/span> da:<\/span>Number,<\/span> z:<\/span>Number,<\/span> dz:<\/span>Number)<\/span>:<\/span>void\r\n{<\/span>\r\n\tvar<\/span> v:<\/span>Array =<\/span> [<\/span>createSurface(<\/span>a,<\/span>z)<\/span>,<\/span>\r\n\t\t\t\t   createSurface(<\/span>a+<\/span>da,<\/span>z)<\/span>,<\/span>\r\n\t\t\t\t   createSurface(<\/span>a+<\/span>da,<\/span> z+<\/span>dz)<\/span>,<\/span>\r\n\t\t\t\t   createSurface(<\/span>a,<\/span> z+<\/span>dz)<\/span>]<\/span>;<\/span>\r\n\r\n\t_points =<\/span> new<\/span> Vector.<\/span>(<\/span>)<\/span>;<\/span>\r\n\t_stroke =<\/span> new<\/span> GraphicsStroke(<\/span>)<\/span>;<\/span>\r\n\t_stroke.<\/span>thickness =<\/span> 1<\/span>;<\/span>\r\n\t_stroke.<\/span>fill =<\/span> new<\/span> GraphicsSolidFill(<\/span>0x102020<\/span>,<\/span>0.95<\/span>)<\/span>;<\/span>\r\n\r\n\t_path =<\/span> new<\/span> GraphicsPath(<\/span>new<\/span> Vector.<\/span>(<\/span>)<\/span>,<\/span> new<\/span> Vector.<\/span>(<\/span>)<\/span>)<\/span>;<\/span>\r\n\t_path.<\/span>moveTo(<\/span>Point3D(<\/span>v[<\/span>0<\/span>]<\/span>)<\/span>.<\/span>x,<\/span> Point3D(<\/span>v[<\/span>0<\/span>]<\/span>)<\/span>.<\/span>y)<\/span>;<\/span>\r\n\r\n\tfor<\/span> (<\/span>var<\/span> i:<\/span>Number =<\/span> 0<\/span>;<\/span> i <<\/span> v.<\/span>length;<\/span> i++<\/span>)<\/span>\r\n\t{<\/span>\r\n\t\t_path.<\/span>lineTo(<\/span>Point3D(<\/span>v[<\/span>i]<\/span>)<\/span>.<\/span>x,<\/span> Point3D(<\/span>v[<\/span>i]<\/span>)<\/span>.<\/span>y)<\/span>;<\/span>\r\n\t}<\/span>\r\n\t_background =<\/span> new<\/span> GraphicsSolidFill(<\/span>0x663399<\/span>,<\/span> 0.95<\/span>)<\/span>;<\/span>\r\n}<\/span><\/code><\/pre>\n
First we create some quads using sine and cosine, multiplying by the radius, which is given as a constant. Then we store these quads on an array, setting their positions by calling the GraphicsPath.lineTo<\/kbd> method. These positions are updated each time we loop through on an EnterFrame<\/kbd> event listener. The fancy things happens here, where we use a fog variable to apply the shading effect by tweaking some depth illusion.<\/p>\n
And this is how it looks after implementation. By the way this is a good example of how robust and fast are <IGraphicsData><\/kbd> and drawGraphicsData<\/kbd> functions combined.<\/p>\n
After implementing the basic structure I thought – following the suggestion of some of the active members of wonderfl<\/a> community – it would be nice to add some extra feature like sound visualization. Initially this little effect consists of some sinusoidally\u00a0 curvy movement modifying the color intensity by the mouse position. You can check the effect by clicking on the image above.<\/p>\n
I was pleasantly surprised by the smoothly frame rate of the effect, so as i mentioned earlier the next step was to implement the algorithm for sound visualization. Thanks to makc3d <\/a>audio API<\/a> it was an easy job to obtain some samples which later could be used for the funky disco effect following the rhythm of the sound. This simple API connects to BeatPort <\/a>portal, and by providing an unique key we can select from a various music genres.\u00a0I opted for dubstep only because the high variation of beats can produce a very differentiated transition (a next step could be to implement an interface for selecting the different music channel).<\/p>\n
This<\/a> is another variation.<\/p>\n
Playing with the values we can obtain different visualization effects. For example scaling up the bass bit rate we can obtain a nice upscaled flowing ring or reducing the radius value we should obtain a perfect circular cube like in the example below.<\/p>\n
Definitely a GUI interface would have been a better choice for playing with values, but because i put together this experiment in almost two hours i didn’t take the effort to polish the code. Maybe in a future time.<\/p>\n
\"\"<\/a>(Scroll the mouse to jump to the next track)<\/p>\n
You can grab the source code here<\/a>!<\/p>\n","protected":false},"excerpt":{"rendered":"
I called this experiment wormhole sound visualization because of procedural content generation, as the whole texture has been created procedurally. Below the fact that i’m absolutely interested in generative algorithm and imaginary i tried to explore Flash new drawing capabilities like the IGraphicsData<\/kbd>.<\/p>\n","protected":false},"author":1,"featured_media":83,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3,47,7,25,21,8],"tags":[10,12,15,18],"class_list":["post-72","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-actionscript-3","category-blog","category-experiments","category-codes","category-tutorials","category-visualization","tag-demo","tag-effect","tag-sound","tag-visualization-2"],"_links":{"self":[{"href":"https:\/\/esimov.com\/blog\/wp-json\/wp\/v2\/posts\/72","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/esimov.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/esimov.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/esimov.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/esimov.com\/blog\/wp-json\/wp\/v2\/comments?post=72"}],"version-history":[{"count":0,"href":"https:\/\/esimov.com\/blog\/wp-json\/wp\/v2\/posts\/72\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/esimov.com\/blog\/wp-json\/wp\/v2\/media\/83"}],"wp:attachment":[{"href":"https:\/\/esimov.com\/blog\/wp-json\/wp\/v2\/media?parent=72"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/esimov.com\/blog\/wp-json\/wp\/v2\/categories?post=72"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/esimov.com\/blog\/wp-json\/wp\/v2\/tags?post=72"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
\"\"<\/a>(Move the mouse to change the color shading intensity)<\/p>\n