add best version

QC20 · Jul 25, 2024 · 7780645 · 7780645
1 parent 44c134c
commit 7780645
Show file tree

Hide file tree

Showing 2 changed files with 162 additions and 1 deletion.
diff --git a/index.html b/index.html
@@ -9,6 +9,6 @@
 </head>
 <body>
     <main></main>
-    <script src="src/javascript/basic-heatmap.js"></script>
+    <script src="src/javascript/sketch.js"></script>
 </body>
 </html>
diff --git a/src/javascript/best-version-heatmap.js b/src/javascript/best-version-heatmap.js
@@ -0,0 +1,161 @@
+    /**
+     * 
+     * EmojiHeatmap: A dynamic, interactive display of emojis that shift 
+     * with mouse movement, creating a detailed color-coordinated heatmap.
+     *
+     * Based on original work by Jonas Kjeldmand Jensen, July 2024
+     *
+     */ 
+
+    // Global variables
+    let xOffset = 0;
+    let yOffset = 0;
+    const FONT_SIZE = 16;
+    const NOISE_SCALE = 0.005;
+    const EMOJI_CATEGORIES = {
+      purple: [],
+      blue: [],
+      cyan: [],
+      green: [],
+      yellow: [],
+      orange: [],
+      red: [],
+    };
+
+    /**
+     * Setup function to initialize the canvas and categorize emojis
+     */
+    function setup() {
+      createCanvas(windowWidth, windowHeight);
+      textSize(FONT_SIZE);
+      textAlign(CENTER, CENTER);
+      categorizeEmojis();
+    }
+
+    /**
+     * Categorize emojis based on their prominent colors
+     */
+    function categorizeEmojis() {
+      const emojiRanges = [
+        [0x1F300, 0x1F5FF],
+        [0x1F600, 0x1F64F],
+        [0x1F680, 0x1F6FF],
+        [0x1F900, 0x1F9FF],
+        [0x2600, 0x26FF],
+        [0x2700, 0x27BF],
+        [0x1F400, 0x1F4FF]
+      ];
+
+      for (let range of emojiRanges) {
+        for (let code = range[0]; code <= range[1]; code++) {
+          const emoji = String.fromCodePoint(code);
+          const category = getEmojiCategory(emoji);
+          if (category) {
+            EMOJI_CATEGORIES[category].push(emoji);
+          }
+        }
+      }
+
+      // Ensure each category has at least one emoji
+      for (let category in EMOJI_CATEGORIES) {
+        if (EMOJI_CATEGORIES[category].length === 0) {
+          EMOJI_CATEGORIES[category].push('❓');
+        }
+      }
+    }
+
+    /**
+     * Determine the category of an emoji based on its prominent color
+     * This is a simplified version and may not be 100% accurate
+     * @param {string} emoji - The emoji character
+     * @returns {string|null} The category name or null if not categorized
+     */
+    function getEmojiCategory(emoji) {
+      const purpleEmojis = '😈🔮👿🧕🤷‍♀️🎆🪁🤰🧞🕺🌸🌷';
+      const blueEmojis = '🌊🌎🐟💙🔵🧢👖🧵👔🥏🟦🔹🧿🔷🚙🥶🌀🩻📘💎🛋️👕💠🎽🧊🛗';
+      const cyanEmojis = '🐬🦋🧞‍♂️🐋🐳🐟🐬🦕🛼🪣🧼🧬👗🧤🩱🩴';
+      const greenEmojis = '🌿🍀🌱🐲🌲🥬🤢🥦🧩🐍🐉🐸💚🔋🤮🪀🧃📗🥭🟢🔫🛣️🧪🦚🩲🦖🥝🍏🦎🐊🐢🦜🍃🥗🧑‍🌾';
+      const yellowEmojis = '🌻🌟🍋🍌🐥🚌🦁💛🎗️🚡🟨🏆🎫🌕🌞🛎️🍯📒🐤🚕🛵🍍🍺⭐🌼🧀';
+      const orangeEmojis = '🍊🎃🦁🔶🟧🟠🦊🍑⛺🥕🏺🦊🍁📙🧡🧶💥🔥🎁🚚🍁🦧🐅🍂🦺🏀🚼';
+      const redEmojis = '🍎🍓🌹❤️🔴🟥🏮💢🚗🚨🦀🤬⛽🛢️🍉⛩️🛑🥊🏓🚩🚒🩸🧰🥩💃🧞‍♀️👹🦐🏎️🌺🌹🐞🥵👺🥫💋😡💯💔🍅❤️‍🔥🌶️🍒🦞🦀🆘🧨🏥🚗';
+
+      if (purpleEmojis.includes(emoji)) return 'purple';
+      if (blueEmojis.includes(emoji)) return 'blue';
+      if (cyanEmojis.includes(emoji)) return 'cyan';
+      if (greenEmojis.includes(emoji)) return 'green';
+      if (yellowEmojis.includes(emoji)) return 'yellow';
+      if (orangeEmojis.includes(emoji)) return 'orange';
+      if (redEmojis.includes(emoji)) return 'red';
+      return null;
+    }
+
+    /**
+     * Draw function to render emojis on the canvas
+     */
+    function draw() {
+      background(220);
+
+      const time = frameCount * 0.01;
+
+      for (let x = 0; x < width; x += FONT_SIZE) {
+        for (let y = 0; y < height; y += FONT_SIZE) {
+          const noiseValue = calculateNoiseValue(x, y, time);
+          const emoji = getEmojiFromNoiseValue(noiseValue);
+          text(emoji, x, y);
+        }
+      }
+    }
+
+    /**
+     * Calculate Perlin noise value for given coordinates and time
+     * @param {number} x - X coordinate
+     * @param {number} y - Y coordinate
+     * @param {number} time - Time factor for animation
+     * @returns {number} Noise value between 0 and 1
+     */
+    function calculateNoiseValue(x, y, time) {
+      return noise((x + xOffset) * NOISE_SCALE, (y + yOffset) * NOISE_SCALE, time);
+    }
+
+    /**
+     * Get emoji character based on noise value
+     * @param {number} noiseValue - Perlin noise value between 0 and 1
+     * @returns {string} Emoji character
+     */
+    function getEmojiFromNoiseValue(noiseValue) {
+      let category;
+      if (noiseValue < 0.25) {  // Added purple category as the lowest value
+        category = 'purple';
+      } else if (noiseValue < 0.3) {
+        category = 'blue';
+      } else if (noiseValue < 0.40) {
+        category = 'cyan';
+      } else if (noiseValue < 0.50) {
+        category = 'green';
+      } else if (noiseValue < 0.60) {
+        category = 'yellow';
+      } else if (noiseValue < 0.70) {
+        category = 'orange';
+      } else {
+        category = 'red';
+      }
+
+      const categoryEmojis = EMOJI_CATEGORIES[category];
+      const index = floor(map(noiseValue, 0, 1, 0, categoryEmojis.length));
+      return categoryEmojis[index];
+    }
+
+    /**
+     * Handle mouse dragging to update offsets
+     */
+    function mouseDragged() {
+      xOffset += (pmouseX - mouseX) * 0.1;
+      yOffset += (pmouseY - mouseY) * 0.1;
+    }
+
+    /**
+     * Handle window resizing
+     */
+    function windowResized() {
+      resizeCanvas(windowWidth, windowHeight);
+    }