ThreeJS human body painting - javascript

Having been misdiagnosed over the past 6 months, only to find a long overdue pneumothorax (lung-collapse) two weeks ago, I've decided to create a tool to help patients visually describe their pain-related symptoms.
The idea revolves around projecting the human body (only skin layer), and allowing the user to pain radiating/local/stabbing and etc. pain on top of this model.
I've researched the area a bit, but just can't get around theorizing how the user-panting should be facilitated.
My question is therefore, if I (as the user), wants to paint a red area WITHIN, say - the left thie, is the scene required to having rendered selectable objects (imagine 3d pixels) within said thie?
In other words, the user selects to draw, say - 50x50x50 "pixels" within the upper leg, whilst the leg being 100x140x250.
Am I going about this the right way? I've never been around webGL, but I consider myself very comfortable within javascript.
Btw, if any1 is interested in helping me in any way, you are more than welcome - I plan for the tool to be 100% free of use.

Related

Training Neural Network to play flappy bird with genetic algorithm - Why can't it learn?

I have been learning about neural networks and genetic algorithms, and to test my learning, have tried to make an AI that learns to play flappy bird:
I have left it running for at least 10 hours (overnight and longer), but the fittest member still fails to show any significant advancements in intelligence from when I began the simulation apart from avoiding the floor and ceilings.
The inputs are the rays (as you can see above) that act as sight lines, and the network is fed in their lengths, and the birds vertical velocity. It seems that the best bird is essentially ignoring all the sight lines except the horizontal one, and when it is very short, it is jumping.
The output is a number between 0 and 1, if the output is larger than 0.5, then the bird jumps.
There are 4 hidden layers, with 15 neurons each, with the input layer feeding forward to the first hidden layers, then the 1st hidden layer feeding forward to the 2nd one ... and the final hidden layer feeding forward to the output, the dna of a bird is an array of real numbers representing the weights of the neural networks, I have made another project using the same style of neural network, and genetic algorithm, in which ants had to travel to food, and it worked perfectly.
Here is the code: https://github.com/Karan0110/flappy-bird-ai
Please say in the comments if you need any additional information
Please can you say whether my method is flawed or not, as I am almost certain the code works correctly (I got from the previous working project).
I like your idea, but I suggest you change some things.
Don't use a network with a fixed structure. Look up Neural evolution of autgmenting topologies and rather implement it yourself, or use a library like neataptic.
I don't believe your network needs that many inputs. I believe 3-5 sensors (20-50° gaps) would be enough, since many of the input values seem to be very similar.
If you are not sure why exactly your project is not working try this:
Try view an image of your current best network. If the network doesn't take important sensors (like the velocity) into account, you'll see it instantly.
Make sure all of your sensors are working fine (looks fine in the image above) and be sure to nkrmalize the values in a meaningful way.
Check if the maximum & average score increases over time. If it doesn't your GA isn't working properly or your networ receives inputs that are not good enough to solve the problem.
One trick that helped me out a lot, is to keep the elite of the GA in a seperate array. Only replace elite networks if some other network has performed better than the elite. Keep the elite trough all the generations, so once your algorithm finds an extraordinarily good solution, it won't be lost in any future generation if nothing else performs better.

How to Program Parrot AR.Drone to Fly Straight

I am using node.js & node-ar-drone to program my AR.Drone 2.0 to perform some basic flight maneuvers indoors. From what I can tell, the drone seems to never fly straight. It will always sway to the left and right, hover for a few seconds, or crash into a wall regardless of where I set the takeoff point from. In other words, if I run the same program to fly down a hallway 10 times, each time it will do something different.
If it does make it down a hallway it will land somewhere different each time. I would have built-in counter moves to adjust for the random swaying such as if it sways to the right, I would tell it to shift to the left, but it never seems to be enough. No amount of counter moves seems to get it to fly straight. I am using the latest firmware on the drone.
I was told that there is nothing on board the drone that corrects errors during flight, such as a feedback loop. In addition to this I was also told that these drones were primarily made for use outdoors or in very wide open spaces such that it wont crash.
I wanted to see if this held true with anyone else or if anyone had any suggestions to get it to fly straight. Any input or comment would be helpful
The AR.Drone does use feedback from its combination of sensors to improve its flight, as seen in this diagram (from "The Navigation and Control technology inside the AR.Drone micro UAV"):
For your situation, probably the most important thing is how well attitude and speed estimation is working, which uses the accelerometers, gyrometers and cameras. There are a few things you can do to help those systems work:
Make sure you take off from a completely level surface.
Call ftrim to set the flat trim level before taking off.
The vision algorithms are designed to try to do a good job even if the surface under the downward-facing camera doesn't have very much texture, but they still can get confused if the floor/ground is too featureless. Try flying over something with more texture and contrast.
For #3, flying over something like a uniformly colored carpet or a concrete floor can make it harder for the drone to see what it's doing--very similar to the problem of using an optical mouse on a smooth, featureless surface. When you see Parrot showing off the AR.Drone's abilities, you'll notice they often fly over a surface that is obviously chosen to make navigation easier. E.g.,
From https://www.youtube.com/watch?v=IcxBf-kegKo:
From https://www.youtube.com/watch?v=pEMD6P_j5uQ#t=8m25s:
That said, with my drone I've sometimes experienced situations where immediately on takeoff, the drone veers off to the side until it crashes even though I called ftrim and thought I took off from a flat surface. You may need to use trial and error to find a good takeoff point.
The drone is designed to be able to fly indoors (e.g. the styrofoam hull with the propeller protectors is recommended for indoor flight but not recommended for outdoor flight, and the FreeFlight app has indoor & outdoor flight modes), but in my experience the drone still wanders a bit and so you'll have the best results in a larger room.
Here's a demo where my drone flies in a very stable manner indoors, in a large room, with well textured carpet, from a very flat location: https://www.youtube.com/watch?v=uhBa11gdbeU
Even then you can see the drone make a small, quick correction at 0:23.

Looking for help in specifying a textbook format in html5 specifically for tablets which includes notetaking

My 9 year old son has very low vision, 1/10. Currently the support people in his school provide him with pdf scans of the textbooks and provide good training for him to access his textbooks on a PC.
However, I consider that this is less than ideal for a number reasons :
Large file size (One geography book is 300Mb, the people who do the
scanning are not tech people)
The text size is only controlled indirectly via zoom, my boy need
40pt text at least the whole time
Difficult to navigate, i.e. there's lots of scrolling over and back
just to read a phrase making the whole reading thing a bit tiring.
No ability to take notes and/or fill in areas for answers in the
textbook.
No access to a TOC/index/
PC problems (weight/power/totallackofcoolnesscomparedtoatablet)
So, I'm thinking that the world of html5 has an answer for me. The process I'm hoping to move towards is the following :
I scan the textbooks and run them through an OCR program like ABBY
FineReader.
This gives me the raw text and the images
Twist this raw data into html5 format with a structure something like
<div class="book">
<div id="TOC"></div> (This TOC will be built dynamically)
<div class="page" id="1"> (Important to keep the notion of pages to allow him to have the same reference as the rest of the class)
<div class="text"></div>
<div class="img"></div>
<div class="answerzone"></div>
<div class="footer"></div>
</div>
</div>
Next, the javascript kicks in and adds the following functionality
Large, semi-transparent Left and right arrows always on screen on bottom corner
Large, semi transparent page number is always apparent, for example on top right corner
Large, semi-transparent symbol on top left corner which gives access to the following features
Access to the Table of contents
Increase/decrease font size
Add a zone where he can either write text from keyboard or onscreen with a stylus. This zone can have an image as background, e.g. where he needs to draw circles around answers.
Everything he adds (text/images) is stored locally on the tablet
So after all that, here's the question part. Does anyone have any experience of similar requirements that have found a solution ?
I can do the javascript stuff (well I think I can) up to the zone for adding text/images and storing all that locally. Does anyone have pointers to existing html5 solutions that could suit my need ?
Best regards,
Colm
P.S. I've gone away from the whole epub thing since, lets face it, it is only html and why not just use a browser instead of ebook reader solutions ?
Take a look at this article: Building Books with CSS3
That is an excellent article, and it has a lot of techniques that could be very useful. Obviously you're going to have to generate a lot of HTML, but using the techniques shown in that article, you won't have to generate nearly as much useless HTML. That article tells you exactly how to do the page numbers and table of contents, and it won't be hard to use JavaScript to create left and right arrows for changing pages (and style it with CSS, naturally).
As for annotation, I'm a little bit confused about whether you want this for a tablet, or a PC. If it's for a PC, I'd suggest to use pre-built tools, such as Zotero. If it's for a tablet, then you may have to play it by ear a bit, because what you can or cannot do varies greatly from tablet to tablet.
This is a very difficult problem. The biggest issue is getting intelligent text out of the PDF. PDF does not have the structure that you will be used to with HTML. It is essentially an electronic piece of paper that is printed to. Text is laid out in blocks that visually line up, but may not have much relation to each other in the file.
I think probably your best bet is to use Calibre to change the format to something else. The results will be far from perfrect, especially in something as complex as a text book. When you convert a book, make sure to go into the options for Heristic Processing and enable it.
If Calibre doesn't work for you, there are also some libraries that you can use to do this.
itext is free for non commercial uses and has text extraction.
pdfbox is free and also has text extraction.
pdfnet is a commercial product, but may have something you can use.
I'm not sure that you are going to get automated results that are going to be satisfying. Given that you only have to deal with one child's curriculum, and not a huge library of PDF's, it might be worth the time to hand copy each page. This way you can arrange the text in an intelligent way.

Structuring an HTML5 Canvas/JS Game

I'm new to HTML5/Canvas/Game programming, but have been tinkering around with it after reading a couple of books. I THINK I have a fairly good idea of how things work out. This question asks several smaller questions, but in general is basically a "structural approach" question. I'm not expecting verbose responses, but hopefully small pointers here and there :) Here is a link to a non-scrolling, and currently rather boring Super Mario World.
Super Mario World Test
NOTE: Controls are Left/Right and Spacebar to jump. This is only setup for Firefox right now as I'm just learning.
Did I Do Something Wrong at This Point?
Currently I've just focused on how Mario runs and jumps, and think that I've gotten it down fairly okay. The coin box doesn't do anything and the background is just an image loaded in for looks. Here's my approach, please let me know if there is anything entirely wrong with this:
Allows Mario to jump by enacting on 2 Y velocities (Gravity and Jump variables)
Allows Mario to run by enacting on 1 velocity (Left or Right "Friction" + Acceleration)
Sprites are used and positioned according to keypress/keydown
I'm not sure if this is right, but I'm using a constructor function to build an object, then inside the main animation loop I'm calling the prototype.draw function for that object to update all variables and redraw the object.
I'm clearing the entire canvas each Frame
Should I be splitting this into more than just a draw function, like Mario.move()?
I've setup a GroundLevel and a JumpLevel variable to create 2 planes of gameplay. The JumpLevel is setup to allow for controlling how high Mario can jump on the fly. The 2 places would allow for the ground to rise like a hill - keeping the point at which Gravity overrules Mario's jumping force at the same distance from the ground.
For clarity sake, everything is separated into different JS files, but would obviously consolidate.
Moving Forward:
Now that I've finished setting up how Mario moves around (I think there are a couple other minor things I might do like mushroom up/down and shooting fireballs). I think I can figure that out, but I'm really lost when it comes to visualizing the following and how HTML5/Canvas can handle this easily:
Scrolling background (I've tried setting up Ground Tiles and using Screen Wrapping, but that seems to cause a lot of uneven issues since I was moving the tiles in the opposite direction. Unfortunately, since I'm trying to account for acceleration, this threw off the count and was causing gaps in the ground. I ditched this idea. Would a DIV beneath the canvas with a large background image be the best solution?
Enemies: Would I create enemies the same way and run a loop for collision detection on every enemy during each frame?
Background Boxes: I'm trying to allow Mario to stand on the boxes in the background, but am unsure how to approach this. I currently have boundaries setup for Mario to stay on the canvas, do I continue to expand these conditions to setup different boundaries based on the boxes? I can see that having several boxes on the screen and doing it this way would get kind of crazy, especially if I would be doing the same hit testing for enemies? I know I'm missing something here....
Level Movement: This is somewhat related. When the Right key is pressed, basically everything in the level needs to move to the left. Would I need to track out all positions of everything that could touch Mario (boxes for him to stand on and enemies for him to collide with) during every animation frame? This seems like it would get kind of inefficient?
Thanks to all! I'll keep this updated with results/solutions :)
Wow, okay. I really like your question because you've obviously done a lot of thinking on this, but partially because of that it's incredibly broad and conversational. You'd do better to find a forum to ask this question.
...That being said, I'm gonna answer the handful of points I'm qualified to, in no particular order. :)
Level Movement: That's a weird (read: inefficient) way to do it. I wouldn't do any calculations based on onscreen positions: track a canonical, camera-agnostic set of coordinates for everything in your level and update the visuals to match. This will stop you from running into weird niggling problems where framerate impacts what you can and can't walk through, or causing slower computers to let Mario run through enemies without being damaged sometimes. Tracking positions this way will incidentally fix a lot of your other problems.
You should absolutely be splitting this into multiple functions. Having movement code and rendering code in the same place is going to screw you, particularly by interacting malignantly with your update/refresh rate. It's going to essentially mean that every time the player does a tricky jump the game does more updates than usual which will make animation/hit detection/etc much less likely to be even.
Enemies: I'd suggest rolling this in with everything else. Do one hit-detection pass against everything, and if you hit something check to see what it was. You could try to optimize this by only checking any given entity against objects within 100 pixels of itself, but if you do it this way you'll need to run separate collision detection events for every enemy. Letting the enemies clip through each other would be computationally cheaper.
Edit: I'd like to clarify about my first point on 'level movement.' Essentially, what you don't want to do is move every entity onscreen every time the camera does, or to store all entity locations as offsets from the camera location (in which case you're still effectively having to move everything, every time the camera moves.)
Your ideal approach is to store your enemy, block, terrain locations with X/Y coordinates that are offset from the absolute top-left of the level (at the very beginning.) In order to render a frame, you'd do essentially this: (pseudocode because we're talking about a hypothetical level format!)
function GetVisible(x,width,level_entities_array) {
for (i = 0; i < count(level_array); i++){
if (level_entities_array[i][x] > x && level_entities_array[i][x] < x+width) {
visible_elements[] = level_entities_array[i][x];
}
}
return visible_elements;
}
Boom, you've got everything that should be inside the window. Now you subtract the camera's x offset from the entity's x location and ZAP, you've got its position on the canvas. Pose as a team, 'cause things just got real.
You'll note that I'm not bothering to cull on the Y axis. This can be rectified by extrapolation, which I'm guessing you can handle because you've made it this far. This will be necessary if you want to do any Mario-style vertical exploration.
Yes, I know my pseudocode looks like C# and JavaScript's unholy lovechild. I'm sorry, that's just how I roll at 11:30 at night. ;)

Creating a web based "bulletin board pin map" using Jquery; drag/drop/collisions/etc

I'm looking to create a web based "bulletin board" so to speak, where the user can create/delete/drag/drop 'pins'--without being allowed to overlap 'pins.'
Here is a diagram that should help illustrate what I'm trying to create:
'pins' are created, probably upon
double click; they will prompt the user for a label.
'pins' cannot overlap;
(the final shape will be larger, more
oval like.)
'pins' will need to be able to "connect" with other 'pins' with a visual element (i.e. dotted line,) but not all pins will be "connected."
I found GameQuery which allegedly supports bounding box collisions--but it's beyond important that the collisions be detected with ovals, not boxes (I know the above example might suggest otherwise, but that's just a diagram... not a mock up of the intended final design.)
The 'pins' may also vary in size/shape, depending on label size... this should be taken into account as well I imagine, to ensure an approach conducive to all the UX variables.
I've found Quadtree and Collision Detection along with this GameQuery collision demo, but it all sort of looks a little like gibberish. I'm looking to be pointed in the right direction, just so I know that what method I invest my time into, will work for my desired result... rather than busting my balls figuring out Quadtree and GameQuery for example, just to find it they won't work for this project.
...
Also, if any experienced developers are willing to be a mentor for me on this project--I am prepared to offer my extremely refined design experience, for a few "I need help" questions along the way.
How do I adopt an n-sided polygon into the pre-existing bounding box functionality of GameQuery? It doesn't need to be a perfect circle, but at least 8-sided.
I don't think that your problem is really one that relates to jQuery or even Javascript at all. Your problem is, how do I detect when an ellipse overlaps (or does not overlap) another ellipse? It's a math problem, and it's one that has already been asked here.
Be warned that this strikes me as a pretty difficult problem for someone who is new to programming. I'm not at all new to programming and I would see this as challenging, particularly with your other requirements - drag and drop, and so on. You've taken on a pretty advanced problem, and at this point, anything you can do to simplify (such as using bounding boxes) is something I would strongly recommend doing.

Categories

Resources