session04.js

        const canvas = document.getElementById('canvas');
        const ctx = canvas.getContext('2d');
        const startButton = document.getElementById('startButton');
        const contentDiv = document.getElementById('content');
        canvas.width = window.innerWidth;
        canvas.height = window.innerHeight;

        let elapsedTime, lastTime, firstPassTime, isFirstLoop, sawtoothValue, animationFrameId, t1, player;
        t1 = 135000;  // 2 min 15 sec
        lastTime = 0;
        isFirstLoop = 1;
        firstPassTime = 0;


        // Add a custom button to the player
        // Load and play a specific video
        function onYouTubeIframeAPIReady() {
            //console.log("api is loaded");
            player = new YT.Player('player',{
            videoId: 'uQqpec3dV08',
            events: {
              'onReady': onPlayerReady
              }
           });
        }

        function onPlayerReady(event) {
            startButton.style.display = 'block'; // show the button now that hidden video is ready
            startButton.addEventListener('click', function() {
            event.target.playVideo();
            });
        }

        function startFlashing() {
            contentDiv.style.display = 'none'; // Hide the text content
            canvas.style.display = 'block'; // Show the canvas
            startButton.style.display = 'none'; // Hide the button

            // Play flashing lights signals with requestAnimationFrame
            function playSignals(timestamp) {
                //start counting time when "start" button pressed, not when webpage opened
                if (isFirstLoop == 1){
                  firstPassTime = timestamp;
                  lastTime = timestamp;
                  isFirstLoop = 0;
                }
                elapsedTime = lastTime - firstPassTime;
                //console.log(elapsedTime);
                //elapsedTime is measured in milliseconds.
                //For example, 2 minutes = 2 min x 60sec/min x 1000 milliseconds/sec = 120,000 milliseconds
                //Total duration of song is 9 min, 41 sec = 581,000 milliseconds
                if (elapsedTime < t1){
                  signal01(elapsedTime);
                }

                if (elapsedTime >= t1){
                  signal02(elapsedTime);

                }

                ctx.fillRect(0, 0, canvas.width, canvas.height);
                lastTime = timestamp;

                animationFrameId = requestAnimationFrame(playSignals);

            }
            animationFrameId = requestAnimationFrame(playSignals);

            // Prepare to stop
            startButton.removeEventListener('click', startFlashing);
            startButton.addEventListener('click', stopFlashing);
            startButton.textContent = 'Stop';
            startButton.style.display = 'block';

            // Add global event listeners for stopping
            document.addEventListener('click', stopHandler);
            document.addEventListener('keydown', stopHandler);
        }
        //combine "patterns" into "signals"
        function signal01(elapsedTime){
             let periodColor1, slopeColor1, dcOffsetColor1;
             periodColor1 = 2500;
             slopeColor1 = 200/periodColor1;
             dcOffsetColor1 = -100;
             pattern04(elapsedTime, periodColor1, slopeColor1, dcOffsetColor1);
        }

        function signal02(elapsedTime){
             let periodColor1, slopeColor1, dcOffsetColor1;
             periodColor1 = 1;
             slopeColor1 = 200/periodColor1; //Height of sawtooth arbitrary decision. Choose 200, so when duty cycle = 50%, sawtooth goes from -100 to 100
             dcOffsetColor1 = -100; //dcOffset controls duty cycle.
             //dcOffset duty cycle ranges from 0 to -200. -100 = 50% duty cycle,
             //dutyCycle = (dcOffset/MAXdcOffset)*100%
             //Note: duty cycles too far from 50% look a little glitchy.
             pattern05(elapsedTime, periodColor1, slopeColor1, dcOffsetColor1);
        }



        function pattern01(elapsedTime, period, slope, dcOffset) {
             let sawtoothValue, triangleValue, scaleRed, scaleGreen, scaleBlue;
             sawtoothValue = slope*(elapsedTime % period) + dcOffset;
             triangleValue = Math.abs(Math.abs(sawtoothValue) + dcOffset);
             //console.log("triangleValue", triangleValue);
             //rgb value of dark orchid is: (153, 50, 204)
             //(triangleValue/dcOffset) goes from 0 to 1, and then back to 0, during one period
             //Smoothly transition from black to dark orchid, rgb(153,50,204), back to black, rgb(0,0,0)
             scaleRed = Math.round(Math.abs(triangleValue/dcOffset)*153);
             scaleGreen = Math.round(Math.abs(triangleValue/dcOffset)*50);
             scaleBlue = Math.round(Math.abs(triangleValue/dcOffset)*204);
             ctx.fillStyle = "rgb("+scaleRed+", "+scaleGreen+", "+scaleBlue+")";
        }

        function pattern02(elapsedTime, period, slope, dcOffset) {
             let sawtoothValue, triangleValue, scaleRed, scaleGreen, scaleBlue;
             sawtoothValue = slope*(elapsedTime % period) + dcOffset;
             triangleValue = Math.abs(Math.abs(sawtoothValue) + dcOffset);
             //rgb value of spring green is: rgb(0,255,127)
             //(triangleValue/dcOffset) goes from 0 to 1, and then back to 0, during one period
             //Smoothly transition from black to spring green, rgb(0,255,127), back to black, rgb(0,0,0)
             scaleRed = Math.round(Math.abs(triangleValue/dcOffset)*0);
             scaleGreen = Math.round(Math.abs(triangleValue/dcOffset)*255);
             scaleBlue = Math.round(Math.abs(triangleValue/dcOffset)*127);
             ctx.fillStyle = "rgb("+scaleRed+", "+scaleGreen+", "+scaleBlue+")";
        }

         function pattern03(elapsedTime, period, slope, dcOffset) {
             let sawtoothValue, triangleValue, scaleRed, scaleGreen, scaleBlue;
             sawtoothValue = slope*(elapsedTime % period) + dcOffset;
             triangleValue = Math.abs(Math.abs(sawtoothValue) + dcOffset);
             //rgb value of sky blue is: rgb(135,206,235)
             //(triangleValue/dcOffset) goes from 0 to 1, and then back to 0, during one period
             //Smoothly transition from black to sky blue, rgb(135,206,235), back to black, rgb(0,0,0)
             scaleRed = Math.round(Math.abs(triangleValue/dcOffset)*135);
             scaleGreen = Math.round(Math.abs(triangleValue/dcOffset)*206);
             scaleBlue = Math.round(Math.abs(triangleValue/dcOffset)*235);
             ctx.fillStyle = "rgb("+scaleRed+", "+scaleGreen+", "+scaleBlue+")";
        }

        function pattern04(elapsedTime, period, slope, dcOffset) {
             let sawtoothValue, triangleValue, scaleRed, scaleGreen, scaleBlue;
             sawtoothValue = slope*(elapsedTime % period) + dcOffset;
             triangleValue = Math.abs(Math.abs(sawtoothValue) + dcOffset);
             //rgb value of custom orange is: rgb(248,196,113)
             //(triangleValue/dcOffset) goes from 0 to 1, and then back to 0, during one period
             //Smoothly transition from black to custom orange, rgb(248,196,113), back to black, rgb(0,0,0)
             scaleRed = Math.round(Math.abs(triangleValue/dcOffset)*248);
             scaleGreen = Math.round(Math.abs(triangleValue/dcOffset)*196);
             scaleBlue = Math.round(Math.abs(triangleValue/dcOffset)*113);
             ctx.fillStyle = "rgb("+scaleRed+", "+scaleGreen+", "+scaleBlue+")";
        }

         function pattern05(elapsedTime, period, slope, dcOffset) {
             //let sawtoothValue;
             //sawtoothValue = slope*(elapsedTime % period) + dcOffset;
             ctx.fillStyle = 'black';
        }

        function stopFlashing() {


            if (animationFrameId) cancelAnimationFrame(animationFrameId);
            startButton.textContent = 'Begin Flashing';
            startButton.removeEventListener('click', stopFlashing);
            startButton.addEventListener('click', startFlashing);
            isFirstLoop = 1;

            // Remove global event listeners
            document.removeEventListener('click', stopHandler);
            document.removeEventListener('keydown', stopHandler);

            // Resetting the page to its initial state
            contentDiv.style.display = 'block';
            startButton.style.display = 'block';
            canvas.style.display = 'none';
            //location.reload(true); //refresh the webpage
        }

        function stopHandler(event) {
            // Preventing the event from re-triggering start
            if (event.target !== startButton) {
                stopFlashing();
                //location.reload(true); //refresh the webpage
                //console.log(player.getPlayerState());
            }
        }

        startButton.addEventListener('click', startFlashing);

        window.addEventListener('resize', () => {
            canvas.width = window.innerWidth;
            canvas.height = window.innerHeight;
        });