index.html

<!doctype html>
<html class="no-js" lang="">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <title></title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <link rel="stylesheet" href="css/normalize.min.css">
        <link rel="stylesheet" href="css/main.css">
    </head>
    <body>

        
        <img id="startImage" src="img/background.jpg">


        <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.3/TweenMax.min.js"></script>
        <script src="js/blueWave.js"></script>
        <script type="text/javascript">
            var pixelwave = new BlueWave({
                canvasTop: 50,
                speedIn: 3,
                speedOut: 1,
                autoCalculateSquaresSize: true,
                color: '#000000'
            });

            function example () {
                console.log("dope");
            }

            document.getElementById('startImage').addEventListener('click', function() {
                bluewave.start(example);
            })

            
        </script>
        
    </body>
</html>