Winamp Visualization Tutorial

1. Winamp Visualization Tutorial Hadi Fadaifard

2. 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

3. 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

4. Overview • Plugin format and calling mechanism • Drawing mechanism • Conclusions and Results

5. Calling Mechanism Plugin Module 1

6. Calling Mechanism Plugin Module 1 winampVisHeader

7. Calling Mechanism Plugin Module 1

8. Calling Mechanism Plugin Module 1

9. Calling Mechanism Plugin Module 1 2 winampVisHeader

10. Calling Mechanism Plugin Module 1 2 winampVisHeader winampVisModule

11. Calling Mechanism Plugin Module 1 2

12. Calling Mechanism Plugin Module 1 2

13. Calling Mechanism Plugin Module 1 2

14. 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.

15. Render Function (simplified)

16. Drawing The Waveform

17. 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.

18. 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).

19. Improving Render Function

20. Improving Render Function

21. Improving Render Function

22. Improving Render Function

23. Improving Render Function

24. Improving Render Function

25. Render Function (improved)

26. Drawing the Background Draw the Texture-mapped Grid Transform the Grid (Rotate, Scale, Translate, etc)

27. Results • Winamp demo