document.addEventListener("DOMContentLoaded", function() {
                                        var spiralPattern = document.getElementById("spiralPattern");
                                        var context = spiralPattern.getContext("2d");
                                        var centerX = spiralPattern.width / 2;
                                        var centerY = spiralPattern.height / 2;
                                        var separation = 5;
                                        var numPointsInput = document.getElementById("numPoints");
                                        var angleIncrementInput = document.getElementById("angleIncrement");
                                        var radiusIncrementInput = document.getElementById("radiusIncrement");
                                        var colorInput = document.getElementById("colorInput");
                                        var useRandomColor = true;
                                        var animationId;
                                        var animationRunning = false;
                                        var toggleButton = document.getElementById("toggleButton");
                                        var resetButton = document.getElementById("resetButton");

                                        function drawSpiral() {
                                            context.clearRect(0, 0, spiralPattern.width, spiralPattern.height);
                                            var numPoints = parseInt(numPointsInput.value, 10);
                                            var angleIncrement = parseFloat(angleIncrementInput.value);
                                            var radiusIncrement = parseFloat(radiusIncrementInput.value);
                                            var angle = 0;
                                            var radius = 1;

                                            for (var i = 0; i < numPoints; i++) {
                                                var x = centerX + radius * Math.cos(angle);
                                                var y = centerY + radius * Math.sin(angle);
                                                if (useRandomColor) {
                                                    context.fillStyle = "rgb(" +
                                                        Math.floor(Math.random() * 256) + "," +
                                                        Math.floor(Math.random() * 256) + "," +
                                                        Math.floor(Math.random() * 256) + ")";
                                                } else {
                                                    context.fillStyle = colorInput.value;
                                                }
                                                context.fillRect(x, y, separation, separation);
                                                angle += angleIncrement;
                                                radius += radiusIncrement;
                                            }
                                        }

                                        function toggleAnimation() {
                                            if (animationRunning) {
                                                cancelAnimationFrame(animationId);
                                                animationRunning = false;
                                            } else {
                                                animationId = requestAnimationFrame(function animate() {
                                                    drawSpiral();
                                                    if (animationRunning) {
                                                        animationId = requestAnimationFrame(animate);
                                                    }
                                                });
                                                animationRunning = true;
                                            }
                                        }

                                        function resetValues() {
                                            numPointsInput.value = 1500;
                                            angleIncrementInput.value = 0.02;
                                            radiusIncrementInput.value = 0.05;
                                            animationRunning = false;
                                            useRandomColor = true;
                                            drawSpiral();
                                        }

                                        resetButton.addEventListener("click", resetValues);

                                        numPointsInput.addEventListener("input", function() {
                                            if (!animationRunning) {
                                                drawSpiral();
                                            }
                                        });

                                        angleIncrementInput.addEventListener("input", function() {
                                            if (!animationRunning) {
                                                drawSpiral();
                                            }
                                        });

                                        radiusIncrementInput.addEventListener("input", function() {
                                            if (!animationRunning) {
                                                drawSpiral();
                                            }
                                        });

                                        colorInput.addEventListener("input", function() {
                                            useRandomColor = false;
                                            if (!animationRunning) {
                                                drawSpiral();
                                            }
                                        });

                                        toggleButton.addEventListener("click", function() {
                                            useRandomColor = true;
                                            toggleAnimation();
                                        });

                                        drawSpiral();
                                    });