{"id":19806200,"url":"https://github.com/cubical22/path-finder","last_synced_at":"2025-02-28T12:20:12.626Z","repository":{"id":246493084,"uuid":"821295203","full_name":"Cubical22/Path-Finder","owner":"Cubical22","description":"This is a project I made a long time ago, but it was a mess (it still is honestly), so I did some edits to upload it since someone asked me to","archived":false,"fork":false,"pushed_at":"2024-07-06T21:25:17.000Z","size":50,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-01-11T06:13:31.964Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Cubical22.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-06-28T08:17:20.000Z","updated_at":"2024-07-06T21:25:21.000Z","dependencies_parsed_at":"2024-06-28T09:42:13.081Z","dependency_job_id":"aa0ec2fe-c331-45ec-8d29-269e2363c0f0","html_url":"https://github.com/Cubical22/Path-Finder","commit_stats":null,"previous_names":["cubical22/path-finder"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Cubical22%2FPath-Finder","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Cubical22%2FPath-Finder/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Cubical22%2FPath-Finder/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Cubical22%2FPath-Finder/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Cubical22","download_url":"https://codeload.github.com/Cubical22/Path-Finder/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":241150246,"owners_count":19918335,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-12T09:06:40.923Z","updated_at":"2025-02-28T12:20:12.585Z","avatar_url":"https://github.com/Cubical22.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Basic Path Finder\nhi! glad you are here. let me explain to you some stuff.\u003cbr\u003e\nthis is a project that I made a rather long time ago, but the code was pretty bad\nand kind of unreadable (not that it's any better now) but well, I fixed some stuff\nand added (A LOT!) more comments to it for better readability.\u003cbr\u003e\u003cbr\u003e\nnow if you are just checking this out, simply, open the \"index.html\" file.\notherwise, let me guide you through some stuff and how this mess works.\u003cbr\u003e\nI've explained a lot of the small little things inside the files themselves.\nso, I'll be talking a little more general here! \u003cbr\u003e\u003cbr\u003e\n\nlet's get started...\n\n## Cells\nthe cells are the start of it all. for the display, it is nothing but a\nsimple canvas plus some fancy math and calculations done. as for the algo\nitself, it's a lot more complicated. Cells, are each of the squares you see\non the canvas! they handle two things only:\n- holding info\n- drawing themselves and keeping a relation with the \"effect cells\"\n\nso it's more like, rather than handling bigger processes, they more like\na tool, or a database.\nHere's a couple important values that are stored inside the cell class:\n- state: which tells us what is the cell exactly. it can vary from the following ones:\n  - wall\n  - empty\n  - start\n  - end\n- row and col: they hold the place of the cell on the board\n- x and y: they hold the position of the cell on the screen\n\u003cbr\u003e\n\u003e now, we need some explanation on this section.\nthroughout the code, wherever I use the term 'before', it means\nall the data that is stored, is related to the path from start to end.\nbut whenever there's mention of 'after', it is related to the path\ngoing from the end to start. Here's some of the use cases:\n- layerBefore: the indexes stored from start to end\n- layerAfter: the indexes stored from end to start\n\u003e more explained on this layer\n\n- beforeCell or afterCell: the cell it was explored from, going from start to end or other way around.\n- isPath, show and pathShow: variables used for setting the color of the cell based on.\n\nand that's about it for the cells!\n\n## Board\nan array holding rows, holdings cells that form the entirety of the canvas.\nthe number of rows and cols are defined using the `count` variable,\nin a way that the number of all cells is `count * count` or `count ^ 2`.\nIn the code, this is defined as the `cells` array, and it's accessed from\nalmost anywhere inside the project. displaying the cells, or running different algorithms,\npretty much all, involve the use of this variable.\n\nThe `addCells()` function in `page.js` handles adding the cells to the array at first.\nit also places the start and ending cells.\n\n## Clicks \u0026 Touches\nthe web supports both mouse and keyboard, and touches, meaning that you\ncan get almost the same experience on your mobile device as long as it opens web pages.\nto achieve this accessibility, the followings were performed:\n- handling input using 'mousedown', 'mousemove' and 'mouseup'\n- handling input using 'touchstart', 'touchmove' and 'touchend'\n\nThere is an acceptable amount of similarities between the two methods\nthat are performed at the same time. Let me explain a little about them.\n\u003e The `mouse` variable is used to handle the actions performed by input.\n\u003e despite its name, it is used for the functionality of both touch devices\n\u003e and also the use of mouse and keyboard. `mouse.down` is used\n\u003e to see whether input should be considered on the cells or not.\n\u003e `mouse.state` defines what sort of action should be done!\n\u003e 'wall' to place wall, 'empty' to clear cells, 'start' to move start\n\u003e and 'end' to move the end cell. how these values are set and used\n\u003e is deeply explained the code, specially the `page.js` file.\n\nnow, how do the cells understand if they were pressed? it's really simple.\nthe position of the click or touch is saved inside `mouse.x` and `mouse.y`.\nthen, if the mouse or touch is down (`mouse.down`) then we will go through\nevery single cell and check for a certain condition:\n- `cell.x  \u003c mouse.x` and `cell.x + cellSize \u003e mouse.x`\n- `cell.y  \u003c mouse.y` and `cell.y + cellSize \u003e mouse.y`\n\nwhich makes perfect sense! we are simply checking if the touch is\ninside the boundaries defined for every cell.\n[/media/boundaries.png][]\n\n## The Finder\nNow, here comes the main section of the project! The finder.\u003cbr\u003e\nThat's the algorithm doing all the work in the background! Basically\nthe entire functionality is done using the algo. Let's get into how it works.\nThere's basically two sides to the algo:\n- The animated version\n- The quick version\n\nAs the name's suggest, it's all about speed! (well, not really)\u003cbr\u003e\nThe most important difference is how they are used and when they are used\nThe animated version is the original one, and the one I made first.\nIt's simply almost the same as the second faze, but instead running it\nusing loops, it's ran with recursive calls with dilay, using the\njavascript functions: `setTimeout` and `setInterval`\u003cbr\u003e\nWhilst it would have been possible to make it with the `setInterval`\nmethod (which would make more sense), but I made it all with the first option\n(being `setTimeout`).\u003cbr\u003e\nThe reason I went for that option, is that it lets me know what I'm exactly doing!\nIt also allows me to make rather complicated logic without confusing myself out!\nSo, it's a win.\u003cbr\u003e\n\nThat was the animated version, now let's talk about the quicker version!\nThe quicker version is done using nested for loops and while loops, which\nmeans there is basically no delay in between, just the matter of speed.\nOther than that, there are some other differences to consider as well!\nFor example:\n- The animated version, also make the path blocks form slowly\n(using the `formingCell` class) But the quick version does not\n- The animated version is only used for forward finding! \n(more will be explained) whilst the quick run version handles both!\n\nnow, **What was the question?**\nRight! what is exactly *forwards*?!?!?!\u003cbr\u003e\nSimple, remember we used Before and After names for the `Cell` class?\nThat's the same! The `Before` name is used instead of `forwards` and\nthe `After` name is used instead of `backwards`.\u003cbr\u003e\nThe reason which I did that will be clean in a bit after I explain what\nis exactly going on!\n\n## Relation Between Cells\nThis is the cool part! I will explain this quick!\u003cbr\u003e\nLet's focus on start to finish first. In the process we will be\nusing the names `beforeCell` and `LayerBefore`. We will also be using the terms `openCells` and `exploredCells`,\nboth of which referring to an array, used throughout the algorithm. Here's a step by step explanation of everything.\nThe `exploredCells` array holds all the cells that have already gone through the algo and been explored.\nBasically cells that their main properties are already set and no need for setting them or updating them again.\nHowever, the `openCells` are a little more complicated!\u003cbr\u003e\nThey simply hold two functionalities:\n- Having themselves explored\n- Adding the neighboring cells to the `openCells` array as well!\u003cbr\u003e\n\nThe one important to remember is the second one, you know, since the first one just makes one.\nWhich neighbor cells???? well, assuming diagonals is off, that would be the ones on the top, left, right and bottom\nof the current cell being explored! With the diagonals on, you can probably guess what would happen.\nThe main idea is to explore every cell this way, one by one, using other cells. The starting point being basically the\nfirst cell inside the `openCells`, from which point every other cell is explored. If at any point we run into cells\nbeing inside `exploredCells`, we will just skip them. What's really important for you to know are the following items:\n- `layerBefore` property on cell, defines by which generation they were explored. There's an index which is updated for\neach generation and the cells explored on that generation. this is used to make the brown looking effect when you move\nthe end cell. it basically shows all the cells which were explored until the generation with the ending cell came up.\n- `beforeCell` property on cell, refers to the position of the cell the current one was explored by. Basically whenever\na cell is explored, it's source of exploration is also saved inside the cell itself (it's coordinate is).\n- Going the other way around, the same is done but using the `afterCell` and `LayerAfter` variables.\n- Walls, are a little weird. Since I am allowing placing the start or end cells on the walls, it means they need to be\nexplored as well, but, here's the catch, we don't want to add them to `openCells`. If we do add them, the issue we will\nface is that their neighboring cells will also be explored, however since you can't go through walls, they shouldn't be\nadded.\n\n\u003e A little problem I should take care of is how I handle walls being explored. Not sure if the way I'm doing it with \n\u003e `openCells` is the best way, I might change it into a better approach later.\n\nAfter it's all done with the properties, we will display the path!\n\n## Path\nHow we approach finding the path is using the `beforeCell` and `afterCell` properties. For example, going from start to\nfinish, we first start with the end cell, and make our way back using the `beforeCell` value, to find the cell it was\nexplored by, then we keep doing the same thing as many times we have to, until we reach the start cell, as we store all\nthe cells in the line, inside the `path` array. And done! The path variable is your path right there! The only thing \nleft is displaying it, which is done simply. And there you have it!\n\n## Challenges\n- Can you make it take as few turns or as many turns as possible?\n- Can you try making some other path finding algorithms?\n- Can you also consider things like, if it was a 3d surface, keep you path with the least amount of ups and downs?\n- Maybe try adding places to explore before getting to the end!\n\nPossibilities are literally endless. So, have fun exploring! ","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcubical22%2Fpath-finder","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcubical22%2Fpath-finder","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcubical22%2Fpath-finder/lists"}