290 likes | 548 Views
Winamp Visualization Tutorial. Hadi Fadaifard. Introduction. MP3 has become quite popular in the past 6 years. Good compression Winamp: The most popular MP3 player for Windows Other popular players: XMMS (Linux) iTunes Realplayer Windows Media Player. Introduction.
E N D
Winamp Visualization Tutorial Hadi Fadaifard
Introduction • MP3 has become quite popular in the past 6 years. • Good compression • Winamp: The most popular MP3 player for Windows • Other popular players: • XMMS (Linux) • iTunes • Realplayer • Windows Media Player
Introduction • All players have support for sound visualizations • We will write a visualization plug-in for Winamp: • Free and most popular player • Compact and user friendly
Overview • Plugin format and calling mechanism • Drawing mechanism • Conclusions and Results
Calling Mechanism Plugin Module 1
Calling Mechanism Plugin Module 1 winampVisHeader
Calling Mechanism Plugin Module 1
Calling Mechanism Plugin Module 1
Calling Mechanism Plugin Module 1 2 winampVisHeader
Calling Mechanism Plugin Module 1 2 winampVisHeader winampVisModule
Calling Mechanism Plugin Module 1 2
Calling Mechanism Plugin Module 1 2
Calling Mechanism Plugin Module 1 2
Drawing Mechanism • Winamp calls Render every delayMS msecs. • Data required by Render (e.g. waveformData, spectrumData) is passed to Render as a pointer to the current VisModule. • No restrictions on how Render draws onto the visualization window; it can use any hardware accelerated API (e.g. DirectX or OpenGL) or no API at all. • We will use OpenGL.
Improving Render Function • A more complicated Render function: • Draw the Background. • Draw the Foreground: waveform and/or any other object in the scene • Save the frame buffer. • Add (blend in) the saved image to the background image. • Distort (transform) the background.
Improving Render Function • Problem: Processing the background image (e.g. blending, blurring, etc) is computationally expensive. • Solution: Use the Graphics hardware (through OpenGL): • Create a 2D grid that covers the entire window (Offline). • Texture map the background onto the grid (Online). • Transform the grid (Online).
Drawing the Background Draw the Texture-mapped Grid Transform the Grid (Rotate, Scale, Translate, etc)
Results • Winamp demo