I'm trying to learn how to use box2dweb and would like to have an object (a circle in this case) follow the mouse at all times, not just when dragging. The idea being it could be used for an air hockey type game where the circle is your paddle.
However circle doesn't attach itself properly to the mouse, instead it swings around the point where the mouse cursor is and behaves more like a distance joint would if one of the objects were the mouse cursor.
I can't tell what I'm doing wrong but I'm still new to this so any help would be appreciated.
You can see the code I have so far (based on the demo code) here: http://jsbin.com/ejafoj/1/edit
Managed to figure this out, my problem was a misunderstanding of the difference between the mousejoint definition target and the mousejoint target. I needed to set the definition target to the center of the ball and not the mouse cursor. Once I did that it worked perfectly.
Related
I'm using Javascript, p5.js, and Daniel Shiffman's tutorial to create a visual representation of an A* search algorithm.
An image of an example grid looks like this:
example grid
Is it possible to click on any cell of the grid, in order to print out it's attributes? Based on Daniel Shiffman's other tutorial on how to click on objects, I understand I have to create 2 functions that activate and execute respectively. I understand how to do this with a circle because a circle has a radius.
But, I don't understand how to do this with a cell because I only have it's coordinates. I can't see how to use coordinates as a metric to calculate length.
I'd appreciate any guidance to my thinking. Thank you so much in advance.
I wrote a tutorial on collision detection available here. That's for regular Processing, but everything is the same in P5.js. You're looking for rectangle-point collision.
Basically, you need to check whether the point is between the left and right edges of the rectangle and between the top and bottom edges of the rectangle. If both are true, then the point is inside the rectangle.
I recommend breaking your problem down into smaller steps and taking those steps on one at a time. For example, try getting it working with a single hard-coded rectangle and point before you try it with multiple cells or with user input.
I'm using d3js and SVG to resize and rotate rectangles, I capture the mouse events on handles that are positioned in each corner of the rectangle, there are two handles in each corner, one for resizing (square) and other to rotate (circle).
When I do the following process, the rectangle "jumps" from its location to another one:
Rotate (it means it's not more in zero degrees)
Resize (any direction)
Rotate again (here is when the shape "jumps")
The jump only occurs when the center of the rectangle is updated, using transform rotate from SVG.
One thing that gave me a lead was updating the rotation center while the shape is being resized, when I do this the shape starts to move to the final position where the "jump" would have placed it.
I can post code examples, it will take some time to do, but if helps to see the problem, no problems.
All I need is some direction from someone that already had this problem.
Edit:
I've made a Plunker with somewhat the current structure that I'm using in my project. All events controls are concentrated in the svgApp.directive.js.
Things I've noticed while developing this example:
The center of the element is not correctly calculated after the angle is not zero, this is my main issue;
If you apply the {{vm.model.image.transform.rotate}} to the ng-attr-transform attribute in the center <circle> element, you are going to notice how it always is in the correct center (the right circle - blue - is commented at the bottom of the main SVG);
I know this is not the perfect version of the tool, it still has some bugs, like the inversion of the mouse direction (resize/rotate handles) while rotated, but it's well documented and structured very close to how I'm working on the project.
The Plnkr: http://plnkr.co/edit/fXT0kZcRwJTPb7wQVHpg?p=preview
Any help with this problem will be very appreciated.
I tried to wrap my head around it for at least a week, but it's too heavy for me.
The problem is that when I click on particular coordinates on the PLANE, i want my 3d model to rotate to face the new coordinates, and then change it's position to match the new coordinates ( it would be nice if you also explain to me how to declare objects' speed and move it with that speed ).
I know it has to do something with THREE.Matrix4() function.
(If You ever played starcraft or similar game, you'll know what I'm up to ;> )
Here is what I have so far:
http://f.cl.ly/items/1u2q463D1Y0K3G1W2g3P/bf.jpg
And here is what I want to achieve:
http://i.stack.imgur.com/Q2vrs.jpg
First, you will need to do raycasting, to calculate the position of the plane that your mouse cursor intersected when you clicked, check out http://stemkoski.github.io/Three.js/Mouse-Over.html for a related example with code. Then, once you know the position, you can use the lookAt function: see http://mrdoob.github.io/three.js/examples/misc_lookat.html for details.
I imagine this would be a pretty common issue I am having. I have one small shape on top of a larger shape. When I enter the large shape, it gets registered as a mouseenter/mouseover. But when I enter the small shape, the large shape registers a mouseleave/mouseout. This would be like if I went to the bathroom at LAX and airport personnel demanding that I go through security again for having left the terminal.
Here is a minimal JSFiddle example illustrating the problem.
This is intended. You are no longer hovering over the circle, you are hovering over the triangle. These are layers, so by your definition you're touching floorboards when standing on the carpet.
If you want the triangle to ignore events, you can call triangle.setListening(false), as shown here: http://jsfiddle.net/YcBNL/19/. This way, events will pass through it to the shape below.
Another approach is to group the circle and triangle using a Kinetic.Group, and add the event listener to the group instead of the circle.
Michael's suggestion above seemed promising, but all it does is either handicap one shape (in this case the triangle), or moves all the functionality up into the group, which is not what I want either.
Temporarily what I have done is use the mouseenter signal for the triangle and mouseleave signal for the circle, which seems to work. However, I doubt this will work for more than two overlapping shapes. If someone comes up with a better solution, I'm all ears =)
I'm my current project I need to draw robots and move them around.
A robot is composed of a circle and a box which shows the current orientation of the robot.
My problem is that I when I animate them, the orientation box moves in a strange way because of its rotation...
Here's what I mean: http://jsfiddle.net/zmunB/
Thanks for your help.
Balzard.
This fiddle shows another option. It may not be quite as elegant as rajkamal's solution, but it may be easier to understand if you are not used to working with matrices. You should be able to add features to it at will (notice the 'eye' I added).
Basically, I am just adding the features to a set, and applying the transformations to each element in the set. Kick off the animations by clicking the colored squares to the right. Note that 'Move relative' will make the set move in the direction it is 'looking'.
Please refer this fiddle. http://jsfiddle.net/apUvX/2/ , for transformed movements.
Here in "onAnimation" method of circle, we are transforming the circle's center coordinate to the
rectangles coordinate system using Matrix.x,Matrix.y and assigning the result to the the x,y of the rectangle.