https://tahsintariq.github.io/category/ai/AIWowchemy (https://wowchemy.com)en-usSun, 25 Oct 2020 00:00:00 +0000https://tahsintariq.github.io/media/logo_hu05f0f36ce171b899b64ba629782702e3_51428_300x300_fit_lanczos_3.pnghttps://tahsintariq.github.io/category/ai/https://tahsintariq.github.io/blog/eight-puzzle/Sun, 25 Oct 2020 00:00:00 +0000https://tahsintariq.github.io/blog/eight-puzzle/<p>This is a JavaScript implementation of the classic 8-puzzle game. I&rsquo;ve also built in an AI to solve the puzzle if you are stuck.</p> <h3 id="features">Features</h3> <ul> <li>Uses the A* algorithm to find the shortest way to solve the puzzle</li> <li>You can choose any image to show in the tiles. It will replace the numbers though.</li> <li>The blank tile can also be controlled using hand gestures. It was trained using supervised learning on a custom dataset of over 5000 photos (all the photos are of me showing my hand to the camera 😄).</li> </ul> <h3 id="controls">Controls</h3> <div style="display:flex"> <div style="flex:1;padding:0 1% 0 0"> <h1> <div ALIGN=Center> ↑ </div> <div ALIGN=Center> ← ↓ → </div> </h1> <!-- <h3> --> <div ALIGN=Center> Arrow keys </div> <!-- </h3> --> </div> <div style="flex:1;padding:0 1% 0 0"> <h1> <div ALIGN=Center> ✋ </div> <div ALIGN=Center> 👈 👇 👉 </div> </h1> <!-- <h3> --> <div ALIGN=Center> Hand Gestures (using camera) </div> <!-- </h3> --> </div> <div style="flex:1;padding:0 1% 0 0"> <h1> <div ALIGN=Center> W </div> <div ALIGN=Center> A S D </div> </h1> <!-- <h3> --> <div ALIGN=Center> Keyboard keys </div> <!-- </h3> --> </div> </div> <style> *.videoWrapper { position: relative; padding-bottom: 56.25%; /* 16:9 */ height: 0; } *.videoWrapper iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } *.grid{ display: grid; place-items:center; width: 100%; } </style> <h3 id="game">Game</h3> <style> iframe{ border: none; } </style> <div class="videoWrapper" style="--aspect-ratio: 3 / 4;"> <iframe src="https://tahsintariq.github.io/p5js/P5_Sketches/P5_Web_Collection/EightPuzzle" data-position="center center"> </iframe> </div> <!-- <div class="videoWrapper" style="--aspect-ratio: 3 / 4;"> <iframe src="https://tahsintariq.github.io/p5js/P5_Sketches/P5_Web_Collection/EightPuzzle" data-position="center center"> </iframe> </div> --> <h3 id="code">Code</h3> <p>Here&rsquo;s the code for A* path finding algorithm that solves the puzzle:</p> <!-- <div class="alert alert-note"> <div> A Markdown callout is useful for displaying notices, hints, or definitions to your readers. </div> </div> --> <!-- <style> @import url('https://cdn.rawgit.com/lonekorean/gist-syntax-themes/848d6580/stylesheets/monokai.css'); @import url('https://fonts.googleapis.com/css?family=Open+Sans'); /* .gist-file */ /* .gist-data {max-height: 700px; max-width: auto;} */ .gistContainer {width: 75%; margin: 0 auto;} </style> --> <!-- <div class = "gistContainer"> <script src="https://gist.github.com/TahsinTariq/5c4ba6b74dd1279f6d4bcfea6a3cbefd.js"></script> </div> --> <!-- <script src="https://gist.github.com/TahsinTariq/5c4ba6b74dd1279f6d4bcfea6a3cbefd.js"></script> --> <script type="application/javascript" src="https://gist.github.com/TahsinTariq/5c4ba6b74dd1279f6d4bcfea6a3cbefd.js"></script> <!-- ```js function AStar(v1, v2){ function route(v1, v2){ if (parents[v2] != 'NONE'){route(v1, parents[v2])} path.push(v2) } parents = {} searched = [] fcost = {} queue = {} parents[v1] = "NONE" gcost[v1] = 0 fcost[v1] = h(v1) queue[v1] = fcost[v1] while (queue.length != 0){ x = sortProperties(queue); node = x[0][0]; delete queue[node]; searched.push(node); if (node == v2){ try{print("found"); route(v1, v2);} catch{print('No path exists');} return 0; } hash_ = generatechild(node); for(let[n, c] of Object.entries(hash_)){ if (c + gcost[node] < gcost[n]){ if (searched.includes(n)){continue;} else{ gcost[n] = c + gcost[node]; fcost[n] = (gcost[n] + h(n)); parents[n] = node; if (!queue.hasOwnProperty(n)){queue[n] = fcost[n]} } } } } print('NO path Found') } ``` --> <!-- <div class="gallery-grid"> <div class="gallery-item gallery-item--medium"> <a data-fancybox="gallery-artworks" href="https://tahsintariq.github.io/media/albums/artworks/ComfyUI_00012_.png" > <img src="https://tahsintariq.github.io/media/albums/artworks/ComfyUI_00012__huc445cd5ad83025868edfc18b6cc1de2c_1802432_750x750_fit_q75_h2_lanczos_3.webp" loading="lazy" alt="ComfyUI_00012_.png" width="750" height="421"> </a> </div> <div class="gallery-item gallery-item--medium"> <a data-fancybox="gallery-artworks" href="https://tahsintariq.github.io/media/albums/artworks/ComfyUI_00018_.png" > <img src="https://tahsintariq.github.io/media/albums/artworks/ComfyUI_00018__hu26bf9a1a94be4fa17eeaa173d2be47a8_1766519_750x750_fit_q75_h2_lanczos_3.webp" loading="lazy" alt="ComfyUI_00018_.png" width="750" height="421"> </a> </div> <div class="gallery-item gallery-item--medium"> <a data-fancybox="gallery-artworks" href="https://tahsintariq.github.io/media/albums/artworks/ComfyUI_00022_.png" > <img src="https://tahsintariq.github.io/media/albums/artworks/ComfyUI_00022__hu402c86523824341693e48a5d479aaa85_1796260_750x750_fit_q75_h2_lanczos_3.webp" loading="lazy" alt="ComfyUI_00022_.png" width="750" height="421"> </a> </div> <div class="gallery-item gallery-item--medium"> <a data-fancybox="gallery-artworks" href="https://tahsintariq.github.io/media/albums/artworks/ComfyUI_00029_.png" > <img src="https://tahsintariq.github.io/media/albums/artworks/ComfyUI_00029__hu4b2cbb9f7b260be52d9f263b28eb7bc7_1742824_750x750_fit_q75_h2_lanczos_3.webp" loading="lazy" alt="ComfyUI_00029_.png" width="750" height="421"> </a> </div> </div> -->