Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
We don’t allow questions seeking recommendations for books, tools, software libraries, and more. You can edit the question so it can be answered with facts and citations.
Closed 4 years ago.
Improve this question
I'm currently writing a 2D game in Javascript using the HTML5 <canvas> element. It's coming along very nicely, but i have run into a problem.
The level design for my game is a grid (so path cost moving from one cell to the north/south/east/west cell is 1) with various obstacles occupying various locations in the grid – a lot like a maze, but with a lot more wiggle room. Each individual level is on the order of 400 × 200 cells.
I'm trying to implement an enemy that will seek out the player no matter where they might be, but i'm having trouble trying to translate one of the various path-finding algorithms to fit my situation. Most of the ones i've come across (like A* and Dijkstra) seem to be best suited to 3D or much more complicated 2D situations. I was wondering if it is possible to dramatically simplify these algorithms to better suit my purposes, or if something like the depth-first search would be a more efficient alternative given the level size.
A* is a very common 2D pathfinding algorithm. It might take a little time to wrap your head around what's happening if pathfinding is unfamiliar, but it's not terribly complex. You may just be looking at someone else's example code that's been developed for a more complex application than you intend. There's a good tutorial for understanding the algorithm here.
Check this out https://github.com/qiao/PathFinding.js It has a lot of demos and path finding algothms.
EasyStar.js is a nice looking library that appears to do what you'd like to. I haven't used it myself, but the documentation on the project's github page looks pretty good, and it's probably what I would choose in your position.
Related
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
We don’t allow questions seeking recommendations for books, tools, software libraries, and more. You can edit the question so it can be answered with facts and citations.
Closed 6 years ago.
Improve this question
I am building a web page dedicated to explaining Math and other topics. I'd like to animate the process of doing certain mathematical steps like adding numbers and solving an equation. I know I can create an animated .gif but this comes with the draw back of having to find some way of drawing the symbols in a picture or maybe exporting a LaTeX rendering, etc. I'm wondering if there is some more programmable, systematic solution.
Suppose for concreteness that I want to animate the solution to 2(x-1)=10 and then several other similar equations, and the process of dividing 123 by 45.
For some context, I have some decent but non-pro skills with HTML, CSS, JavaScript, other C-like languages, Python, and similar stuff.
What I'd do (this is broad) is take the input of each number or symbol a person types and moves them to a specific area on a canvas with JavaScript. For example, every time a person enters in a number it will move that input into a small box or something. From there you can just use the symbols to add/subtract/multiply etc. If you wanted to make this smooth so that it goes in multiple steps you could always you the setTimeout function with JavaScript so it shows each part of the equation step by step. Also an added tip would be to check on websites that have similar functions like Cymath
I will choose Canvas with HTML5 and Javascript to create the animations, the good point with Canvas is that you have full control of pixels, the cons is that you will have to deal with all the stuff to create and render every single function.
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
We don’t allow questions seeking recommendations for books, tools, software libraries, and more. You can edit the question so it can be answered with facts and citations.
Closed 4 years ago.
Improve this question
I've found myself from the monstrous JavaScript-project. I haven't seen any references to known design patterns and code files consists of 5000+ rows of messy code. Usual length of the function is about 100 lines. Also namespaces are messy. Any ideas how to get any sense for this project?
I've been trying to read the source code, but there are no comments whatsoever. Also there are no tests, so making changes is a matter of luck.
Abandoning the project is not a choice.
Are there any nice tools for helping? At the moment I'm using sublime & Chrome.
If you have the specs you could write tests then refactor safely. Your tests will tell you if you break anything.
On the other hand if you don't have specs, you can write your tests by generating a bunch of random values and record the associated results. With your current code, you know (by definition) that they are correct.
I have seen the latter approach at a conference about refactoring ugly, legacy code. The speaker generated lots of random value/result pairs, turned them into unit tests, and started refactoring ultra-quickly. The results were quite amazing and you knew for sure that nothing had broken in the process.
Of course, if your application is more complex than the "give me an input, i'll tell you the output" style, this is trickier. But maybe it will get you started !
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
We don’t allow questions seeking recommendations for books, tools, software libraries, and more. You can edit the question so it can be answered with facts and citations.
Closed 4 years ago.
Improve this question
I need to generate a swim lanes chart similar to the following but with the addition of showing dates on the Y-axis. All of the nodes I need to show are activities with dependencies, no flow control elements.
Is this possible using something like d3 or is there a better javascript library to use for this type of chart? I haven't seen any examples like it, so if it is possible using d3 I'm not sure where I would start. Any tips would be greatly appreciated.
Based on the previous answer and comments, I started down the path of implementing the chart using Raphael.js. After writing 600+ lines of code (mostly framework stuff to make up for its bare bones nature) I discovered that Raphael.js is extremely slow at rendering text. Not sure exactly why, but it's apparently a known issue. In the end it was taking 3.5s to render a chart with 300 items with 80% of the time spent rendering text.
I then started over with d3.js. I found that d3.js is the much better choice when creating data bound charts when legacy browser support isn't a concern. Creating a swim lane chart in d3.js took me about 100 lines of code vs the 600+ for Raphael.js. The d3.js version also has more functionality, looks nicer, and is more responsive.
While the declarative style of d3.js takes some getting used to, it makes working with data super easy. As an added bonus, my chart now renders in about 250 ms :)
See http://bl.ocks.org/1962173 for the final swim lane chart that I created.
In my opinion raphael.js is suitable here. It provides support for all browsers including IE6-8, while d3 works in SVG-enabled browsers only.
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
We don’t allow questions seeking recommendations for books, tools, software libraries, and more. You can edit the question so it can be answered with facts and citations.
Closed 5 years ago.
Improve this question
Does anyone have experience with a JavaScript library for Augmented Reality?
If so, can you recommend one?
EDIT:
Not sure how to better clarify this... By Augmented Reality I mean using device webcam (laptop, smartphone, tablet) and overlapping elements over the video feed on screen. Ofen, the overlapping is done based on a marker the algorithm searches for within each frame and makes calculations about its position in space.
Hope that's enough.
Thanks.
I think this is what you might be looking for. JSARToolkit is a direct port of Flash FLARToolkit from Ilmari Heikkinen. Great tutorial you may also want to check out and a link to the Git repo.
http://weblog.bocoup.com/javascript-augmented-reality/
https://github.com/kig/JSARToolKit
You can try skarf.js, a framework that I have created for handling JavaScript augmented reality libraries in Three.js.
It currently integrates JSARToolKit and js-aruco, so you can easily switch between these two libraries to decide on the more suitable one to use.
This framework takes care of a number of things for you, including automatic loading of models when the associated markers are detected (association is specified in a JSON file). There is also a GUI marker system which allows users to control settings using AR markers.
Integration with Three.js is just one line of code to create a Skarf instance and another line of code to update.
There are videos, live demos, source codes, examples and documentation available. Check out http://cg.skeelogy.com/skarfjs/ for more info.
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
We don’t allow questions seeking recommendations for books, tools, software libraries, and more. You can edit the question so it can be answered with facts and citations.
Closed 7 years ago.
Improve this question
Does any one know of any good javascript 3d graphing utility? I know that every site ever recommends Canvas 3d Graph but it is actually quite limiting. For one it only allows graphing with datasets that are within the 1000. Though it does have some capability (with a bit of code modifying) to graph data that are a bit out of its range, nothing out of a complete revamp will allow graphing of data based on time or with values hugely larger than 1000. (I have data values that range into the billions.)
Or should I abandon all hope and either write one myself or look to other technology?
Google O3D is a library for producing 3d-graphics using Javascript. It also has a deprecated plugin, but the newest version uses WebGL.
Check it out here: http://code.google.com/p/o3d/
You'll definitely need to build a small graphing-shell around it, but it shouldn't be hard, especially not if you look closely to the examples provided on the Google-code website.
It uses OpenGL as a backend-technology: rendering lots of polygons, on reasonable hardware, is not a problem at all.