kimpro82 · kimpro82 · Jan 19, 2024 · Jan 18, 2024 · Jan 18, 2024 · Jan 18, 2024
diff --git a/README.md b/README.md
@@ -3,7 +3,12 @@
 Rock N' Roll Baby!
 
 
-## [Idea Generator](/IdeaGenerator)
+## [Touch-Color-Changing Tiles for Babies](/TouchColorChangingTiles/)
+
+- [Touch-Color-Changing Tiles for Babies (2024.01.18)](/TouchColorChangingTiles/README.md#touch-color-changing-tiles-for-babies-20240118)
+
+
+## [Idea Generator](/IdeaGenerator/)
 
 - [Idea Generator v0.22 (2022.06.06)](/IdeaGenerator/readme.md#idea-generator-v022-20220606)
 - [Idea Generator v0.21 (2022.06.05)](/IdeaGenerator/readme.md#idea-generator-v021-20220605)
@@ -13,7 +18,7 @@ Rock N' Roll Baby!
 - [Idea Generator v0.10 (2022.05.18)](/IdeaGenerator/readme.md#idea-generator-v010-20220518)
 
 
-## [Wedding Anniversary](/WeddingAnniversary)
+## [Wedding Anniversary](/WeddingAnniversary/)
 
 - [8th Wedding Anniversary (2023.03.07)](/WeddingAnniversary/README.md#8th-wedding-anniversary-20230307)
 - [7th Wedding Anniversary (2022.03.07)](/WeddingAnniversary/README.md#7th-wedding-anniversary-20220307)
@@ -22,6 +27,6 @@ Rock N' Roll Baby!
 - [5th Wedding Anniversary (2020.03.07)](/WeddingAnniversary/README.md#5th-wedding-anniversary-20200307)
 
 
-## [Baby Focus Book](/BabyFocusBook)
+## [Baby Focus Book](/BabyFocusBook/)
 
 - [Black & White 1 (2021.06.15)](/BabyFocusBook/README.md#black--white-1-20210615)
diff --git a/TouchColorChangingTiles/Images/TouchColorChangingTiles_Sample.gif b/TouchColorChangingTiles/Images/TouchColorChangingTiles_Sample.gif
diff --git a/TouchColorChangingTiles/Images/TouchColorChangingTiles_Santa.gif b/TouchColorChangingTiles/Images/TouchColorChangingTiles_Santa.gif
diff --git a/TouchColorChangingTiles/Images/sample.png b/TouchColorChangingTiles/Images/sample.png
diff --git a/TouchColorChangingTiles/Images/santa.jpg b/TouchColorChangingTiles/Images/santa.jpg
diff --git a/TouchColorChangingTiles/README.md b/TouchColorChangingTiles/README.md
@@ -0,0 +1,193 @@
+# [Touch-Color-Changing Tiles for Babies](../README.md#)
+
+But the son looked for YouTube before long
+
+
+### List
+
+- [Touch-Color-Changing Tiles for Babies (2024.01.18)](#touch-color-changing-tiles-for-babies-20240118)
+
+
+## [Touch-Color-Changing Tiles for Babies (2024.01.18)](#list)
+
+- Features
+  - Dynamic application of the number and size of cells
+  - Color change while traversing a pastel tone palette with touch input
+  - Apply the same `mousedown` and `touchstart` actions for smooth testing
+
+- Future Improvements
+  - Addition of more dynamic animation effects
+  - Clear conditions such as color uniformity
+  - Additional options such as the number of colors, cell size, and various photos
+
+  ![TouchColorChangingTiles_Santa.gif](./Images/TouchColorChangingTiles_Santa.gif)
+
+- Code
+  <details>
+    <summary>TouchColorChangingTiles.html</summary>
+
+  ```html
+  <!DOCTYPE html>
+
+  <html lang="en">
+
+  <head>
+      <meta charset="UTF-8">
+      <meta name="viewport" content="width=device-width, initial-scale=1.0">
+      <link rel="stylesheet" href="TouchColorChangingTiles.css">
+      <script defer src="TouchColorChangingTiles.js"></script>
+      <title>Touch-Color-Changing Tiles for My Son</title>
+  </head>
+
+  <body>
+      <canvas id="responsiveGridCanvas"></canvas>
+  </body>
+
+  </html>
+  ```
+  </details>
+  <details>
+    <summary>TouchColorChangingTiles.css</summary>
+
+  ```css
+  body, html {
+      background-color: #333;
+      margin: 0;
+      padding: 0;
+      overflow: hidden;
+    }
+  ```
+  ```css
+    canvas {
+      display: block;
+      margin: auto;
+    }
+  ```
+  </details>
+  <details>
+    <summary>TouchColorChangingTiles.ts</summary>
+
+  ```ts
+  let firstRun: boolean = true;
+
+  const canvas = document.getElementById('responsiveGridCanvas') as HTMLCanvasElement;
+  const ctx = canvas.getContext('2d');
+
+  const defaultCellSize = 120;                                // Default cell size
+  let actualCellSizeX: number = defaultCellSize;
+  let actualCellSizeY: number = defaultCellSize;
+  const paddingPercentage = 0.05;                             // 5% padding on each side
+  const sampleImageSrc = './Images/santa.jpg';                // Updated image path
+
+  const pastelColors = [                                      // Pastel tone color palette
+      '#FFB6C1', '#FFF68F', '#98FB98', '#87CEEB'
+  ];
+  const cellColors: string[][] = [];                          // 2D array to store the color of each cell
+
+  const img = new Image();                                    // Image object
+  img.src = sampleImageSrc;
+  const sampleImageAlpha = 0.7;                               // Fixed transparency for the sample image
+  ```
+  ```ts
+  img.onload = function () {
+      updateCanvas();
+  };
+  ```
+  ```ts
+  function updateCanvas() {
+      const numCols = Math.floor(window.innerWidth / defaultCellSize);
+      const numRows = Math.floor(window.innerHeight / defaultCellSize);
+      actualCellSizeX = window.innerWidth / numCols;
+      actualCellSizeY = window.innerHeight / numRows;
+
+      canvas.width = numCols * actualCellSizeX;
+      canvas.height = numRows * actualCellSizeY;
+
+      for (let y = 0; y < numRows; y += 1) {
+          const rowColors: string[] = [];
+
+          for (let x = 0; x < numCols; x += 1) {
+              // Assign color
+              if (firstRun) {
+                  // Assign a random color
+                  const randomColor = pastelColors[Math.floor(Math.random() * pastelColors.length)];
+                  rowColors.push(randomColor);
+                  ctx.fillStyle = randomColor;
+              } else {
+                  ctx.fillStyle = cellColors[y][x];
+              }
+              ctx.globalAlpha = 1; // Do not apply transparency to the background color
+              ctx.fillRect(x * actualCellSizeX, y * actualCellSizeY, actualCellSizeX, actualCellSizeY);
+
+              // Draw the sample image in the grid (apply fixed transparency)
+              const paddingX = actualCellSizeX * paddingPercentage;
+              const paddingY = actualCellSizeY * paddingPercentage;
+
+              const resizedWidth = actualCellSizeX - 2 * paddingX;
+              const resizedHeight = actualCellSizeY - 2 * paddingY;
+
+              // Draw image with padding at the center of each cell
+              const imgX = x * actualCellSizeX + paddingX;
+              const imgY = y * actualCellSizeY + paddingY;
+              ctx.globalAlpha = sampleImageAlpha;
+              ctx.drawImage(img, imgX, imgY, resizedWidth, resizedHeight);
+          }
+
+          if (firstRun) {
+              cellColors.push(rowColors);
+          }
+      }
+      firstRun = false;
+  }
+  ```
+  ```ts
+  function handleInput(event: MouseEvent) {
+      const clickedX = event.clientX - canvas.getBoundingClientRect().left;
+      const clickedY = event.clientY - canvas.getBoundingClientRect().top;
+
+      const colIndex = Math.floor(clickedX / actualCellSizeX);
+      const rowIndex = Math.floor(clickedY / actualCellSizeY);
+
+      // Change the palette order each time you click
+      const currentColorIndex = pastelColors.findIndex(color => color === cellColors[rowIndex][colIndex]);
+      const nextColorIndex = (currentColorIndex + 1) % pastelColors.length;
+
+      // Only change the color of the selected cell
+      cellColors[rowIndex][colIndex] = pastelColors[nextColorIndex];
+
+      // Redraw only the selected cell
+      ctx.fillStyle = cellColors[rowIndex][colIndex];
+      ctx.globalAlpha = 1; // Do not apply transparency to the background color
+      ctx.fillRect(colIndex * actualCellSizeX, rowIndex * actualCellSizeY, actualCellSizeX, actualCellSizeY);
+
+      // Update the image
+      img.src = sampleImageSrc;
+
+      // // Log variables for debugging
+      // console.log('actualCellSizeX:', actualCellSizeX);
+      // console.log('actualCellSizeY:', actualCellSizeY);
+      // console.log('clickedX:', clickedX);
+      // console.log('clickedY:', clickedY);
+      // console.log('colIndex:', colIndex);
+      // console.log('rowIndex:', rowIndex);
+      // console.log('currentColorIndex:', currentColorIndex);
+      // console.log('nextColorIndex:', nextColorIndex);
+      // console.log('cellColors:', cellColors);
+  }
+  ```
+  ```ts
+  canvas.addEventListener('mousedown', handleInput);
+  canvas.addEventListener('touchstart', (event) => {
+      event.preventDefault();
+      handleInput(event);
+  }, { passive: true });
+
+  window.addEventListener('resize', () => {
+      firstRun = true;
+      updateCanvas();
+  });
+  ```
+  </details>
+
+- Sources
+  - `sample.png` : [Child Head With Smiling Face Icon (OnlineWebFonts.COM)](https://www.onlinewebfonts.com/icon/57082)
diff --git a/TouchColorChangingTiles/TouchColorChangingTiles.css b/TouchColorChangingTiles/TouchColorChangingTiles.css
@@ -0,0 +1,14 @@
+/* 2024.01.18 */
+
+body, html {
+    background-color: #333;
+    margin: 0;
+    padding: 0;
+    overflow: hidden;
+  }
+
+  canvas {
+    display: block;
+    margin: auto;
+  }
+
diff --git a/TouchColorChangingTiles/TouchColorChangingTiles.html b/TouchColorChangingTiles/TouchColorChangingTiles.html
@@ -0,0 +1,19 @@
+<!-- 2024.01.18 -->
+
+<!DOCTYPE html>
+
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="TouchColorChangingTiles.css">
+    <script defer src="TouchColorChangingTiles.js"></script>
+    <title>Touch-Color-Changing Tiles for My Son</title>
+</head>
+
+<body>
+    <canvas id="responsiveGridCanvas"></canvas>
+</body>
+
+</html>
diff --git a/TouchColorChangingTiles/TouchColorChangingTiles.js b/TouchColorChangingTiles/TouchColorChangingTiles.js
@@ -0,0 +1,94 @@
+// 2024.01.18
+var firstRun = true;
+var canvas = document.getElementById('responsiveGridCanvas');
+var ctx = canvas.getContext('2d');
+var defaultCellSize = 120; // Default cell size
+var actualCellSizeX = defaultCellSize;
+var actualCellSizeY = defaultCellSize;
+var paddingPercentage = 0.05; // 5% padding on each side
+var sampleImageSrc = './Images/santa.jpg'; // Updated image path
+var pastelColors = [
+    '#FFB6C1', '#FFF68F', '#98FB98', '#87CEEB'
+];
+var cellColors = []; // 2D array to store the color of each cell
+var img = new Image(); // Image object
+img.src = sampleImageSrc;
+var sampleImageAlpha = 0.7; // Fixed transparency for the sample image
+img.onload = function () {
+    updateCanvas();
+};
+function updateCanvas() {
+    var numCols = Math.floor(window.innerWidth / defaultCellSize);
+    var numRows = Math.floor(window.innerHeight / defaultCellSize);
+    actualCellSizeX = window.innerWidth / numCols;
+    actualCellSizeY = window.innerHeight / numRows;
+    canvas.width = numCols * actualCellSizeX;
+    canvas.height = numRows * actualCellSizeY;
+    for (var y = 0; y < numRows; y += 1) {
+        var rowColors = [];
+        for (var x = 0; x < numCols; x += 1) {
+            // Assign color
+            if (firstRun) {
+                // Assign a random color
+                var randomColor = pastelColors[Math.floor(Math.random() * pastelColors.length)];
+                rowColors.push(randomColor);
+                ctx.fillStyle = randomColor;
+            }
+            else {
+                ctx.fillStyle = cellColors[y][x];
+            }
+            ctx.globalAlpha = 1; // Do not apply transparency to the background color
+            ctx.fillRect(x * actualCellSizeX, y * actualCellSizeY, actualCellSizeX, actualCellSizeY);
+            // Draw the sample image in the grid (apply fixed transparency)
+            var paddingX = actualCellSizeX * paddingPercentage;
+            var paddingY = actualCellSizeY * paddingPercentage;
+            var resizedWidth = actualCellSizeX - 2 * paddingX;
+            var resizedHeight = actualCellSizeY - 2 * paddingY;
+            // Draw image with padding at the center of each cell
+            var imgX = x * actualCellSizeX + paddingX;
+            var imgY = y * actualCellSizeY + paddingY;
+            ctx.globalAlpha = sampleImageAlpha;
+            ctx.drawImage(img, imgX, imgY, resizedWidth, resizedHeight);
+        }
+        if (firstRun) {
+            cellColors.push(rowColors);
+        }
+    }
+    firstRun = false;
+}
+function handleInput(event) {
+    var clickedX = event.clientX - canvas.getBoundingClientRect().left;
+    var clickedY = event.clientY - canvas.getBoundingClientRect().top;
+    var colIndex = Math.floor(clickedX / actualCellSizeX);
+    var rowIndex = Math.floor(clickedY / actualCellSizeY);
+    // Change the palette order each time you click
+    var currentColorIndex = pastelColors.findIndex(function (color) { return color === cellColors[rowIndex][colIndex]; });
+    var nextColorIndex = (currentColorIndex + 1) % pastelColors.length;
+    // Only change the color of the selected cell
+    cellColors[rowIndex][colIndex] = pastelColors[nextColorIndex];
+    // Redraw only the selected cell
+    ctx.fillStyle = cellColors[rowIndex][colIndex];
+    ctx.globalAlpha = 1; // Do not apply transparency to the background color
+    ctx.fillRect(colIndex * actualCellSizeX, rowIndex * actualCellSizeY, actualCellSizeX, actualCellSizeY);
+    // Update the image
+    img.src = sampleImageSrc;
+    // // Log variables for debugging
+    // console.log('actualCellSizeX:', actualCellSizeX);
+    // console.log('actualCellSizeY:', actualCellSizeY);
+    // console.log('clickedX:', clickedX);
+    // console.log('clickedY:', clickedY);
+    // console.log('colIndex:', colIndex);
+    // console.log('rowIndex:', rowIndex);
+    // console.log('currentColorIndex:', currentColorIndex);
+    // console.log('nextColorIndex:', nextColorIndex);
+    // console.log('cellColors:', cellColors);
+}
+canvas.addEventListener('mousedown', handleInput);
+canvas.addEventListener('touchstart', function (event) {
+    event.preventDefault();
+    handleInput(event);
+}, { passive: true });
+window.addEventListener('resize', function () {
+    firstRun = true;
+    updateCanvas();
+});