キャンバス調整

Author: BreadMotion

assets/js/menuAnimation.js

@@ -1,4 +1,6 @@
 let animationCanvas;
+let circleSize = 0;
+let growing = true;
 
 function setup() {
   const parent = document.getElementById(
@@ -9,13 +11,29 @@ function setup() {
     parent.offsetHeight,
   );
   animationCanvas.parent("menuAnimationCanvas");
-  background(22, 27, 34);
+  background(22, 27, 34); // 背景色を一度だけ設定
 }
 
 function draw() {
+  background(22, 27, 34, 50);
   noStroke();
-  fill(255, 255, 255, 50);
-  ellipse(random(width), random(height), 10, 10);
+  fill(255, 255, 255, 150);
+
+  if (growing) {
+    circleSize += 0.5;
+    if (circleSize > 50) {
+      growing = false;
+    }
+  } else {
+    circleSize -= 0.5;
+    if (circleSize < 10) {
+      growing = true;
+    }
+  }
+  ellipse(width / 2, height / 2, circleSize, circleSize);
+
+  fill(255, 255, 255, 80);
+  ellipse(mouseX, mouseY, 15, 15);
 }
 
 function windowResized() {

index.html

@@ -454,10 +454,9 @@ <h3>Contact</h3>
                 </section>
             </main>
         </div>
-        <!-- 共通JS -->
+
         <script src="assets/js/layout.js" defer></script>
         <script src="assets/js/ui.js"></script>
-        <!-- トップページ専用JS（今は空でもOK） -->
         <script src="assets/js/top.js" defer></script>
     </body>
 </html>

partials/header.html

@@ -38,9 +38,9 @@
                 >Contact</a
             >
 
-            <canvas id="menuAnimationCanvas"></canvas>
-            <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.min.js"></script>
-            <script src="assets/js/menuAnimation.js"></script>
+            <!-- <canvas id="menuAnimationCanvas"></canvas> -->
+            <!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.min.js"></script> -->
+            <!-- <script src="assets/js/menuAnimation.js"></script> -->
         </nav>
     </div>
 </header>