Recently I have been furthering my knowledge of Javascript, by combining the Processing.js and Box2D.js libraries to make some neat browser-based simulations.
With my current idea, I am trying to allow the user to click and drag a shape, and then let it drop once the mouse is released. So far I have been able to figure out how to use the b2MouseJoint object to manipulate a body with mouseX/mouseY coordinates, but it doesn't quite work to the full extent.
All that happens when a shape is clicked is it gets pinned and revolves around what ever mouseX/mouseY point was current at the time of the click.
void mousePressed(){
for(int i = 0; i < circles.size(); i++){
//Get body objects from ArrayList
var obj = circles[i];
// Retrieve shapes from body
var innerShape = obj.GetShapeList();
var rad = innerShape.m_radius;
// Create mouseJoint and add attributes
var mouseJoint = new b2MouseJointDef();
mouseJoint.body1 = world.GetGroundBody();
// Detect body
if(dist(mouseX,mouseY,obj.m_position.x,obj.m_position.y) < rad){
Vec2 p = new b2Vec2(mouseX,mouseY);
mouseJoint.body2 = obj;
mouseJoint.target = p;
mouseJoint.maxForce = 10000.0f * obj.GetMass();
mouseJoint.collideConnected = true;
mouseJoint.dampingRatio = 0;
mouseJoint.frequencyHz = 100;
world.CreateJoint(mouseJoint);
}
}
}
So basically my question is, how can this be written so the Body/Shape follows my mouse's coordinates while I have the mouse held down, instead of just pinning the shape in place.
Cheers
Basically all you have to do is add the code you're using now to set the coordinate in mousePressed to a mouseDragged() method, as well, as this is the event method that gets called while the mouse is moved with one or more buttons depressed:
void mouseDragged()
{
// update obj with mouseX and mouseY in this method
}
You may also want to do a bit more administration by setting up "initial click" mark variables during mousePressed(), updating a set of "offset" variables during mouseDragged() and committing the offsets to the marks in mouseReleased(), so that you can do things like snapping back to the original position, etc.
Related
I use the keypress event listener in a lot of animations in processing js and here is a problem that consistently plagues me. In this example I made, when I press the 'd' button, a ball moves to the right. Actually, the ball is stationary, and the ground moves left below it.
The problem is this: When I press and hold 'd', the ball lurches right at the correct speed almost instantly, but then stops for an instant, then reaches the correct speed and then continues at that speed for as long as I hold 'd'. I don't know why the ball doesn't hit that speed and stay there, but that is what I'd like it to do.
Here is a fiddle which may show what I mean:
https://jsfiddle.net/4s14wq4d/
The method is quite simple:
hill.prototype.moveRight = function() {
this.x -= 5;
};
And here is the event listener in action:
var myCanvas = document.getElementById("myCanvas");
myCanvas.addEventListener("keypress", functionMove);
function functionMove(e) {
if (e.keyCode == "100") {
for (var i = 0; i < hillArray.length; i++) {
hillArray[i].moveRight();
}
}
};
First off, you should not be adding your own event listeners. Processing gives you functions like keyPressed() and keyReleased(). Use those instead.
Secondly, what you probably want to do is create variables that keep track of whether a key is pressed or not. Something like this:
var wPressed = false;
var sPressed = false;
var aPressed = false;
var dPressed = false;
Then in the keyPressed() function, you would set the corresponding variable to true, and in the keyReleased() function, you'd set it to false.
Finally, in the draw() function, you'd check each of the variable and do the right thing. Something like this:
if(dPressed){
for (var i = 0; i < hillArray.length; i++) {
hillArray[i].moveRight();
}
}
(Side note: If you're moving all of the elements by the same distance, you might just want to use a single xOffset variable or something that you use, that way you don't have to loop over every item to move it individually.)
Shameless self promotion: I wrote a tutorial on user input (including the above approach) available here. It's for regular Processing, but all of the ideas are the same in Processing.js.
I'm wanting to get some sprites moving between two points in my (very basic) javascript game. Each sprite is randomly placed in the level, so I want them to move back and forth between their base position. I have the code below
function Taniwha(pos) {
this.basePos = this.pos;
this.size = new Vector(0.6, 1);
this.move = basePos + moveDist(5,0));
}
Taniwha.prototype.type = "taniwha"
var moveSpeed = 4;
Taniwha.prototype.act = function(step) {
this.move = ???
and this is where I get stuck. I'm not sure how to tell it to go left, back to base pos, right then back to base pos again (I plan to loop this). Does anyone have any advice? (also using Eloquen Javascript's example game as an outline/guide for this, if how I'm doing things seems odd!)
For horizontal movement, change x coordinate of the position.
var pos = { x: 1, y: 2 };
pos.x++ ; // This will move right
pos.x-- ; // This will move left
Likewise for vertical movement. You also need to update the coordinates after change for the object which you are drawing.
In truth ,there are lots of library to develop a game.
Use those, control a sprite is very easy.
Like:
Pixijs
CreateJS
Both of them are opensource project, you can watch and learn the source.
And have lots of examples and document.
I'm creating a Pentomino puzzle game for a final project in a class I'm taking. I've created all dozen of the required puzzle pieces and can drag those around here. And I've tried this code to rotate the array (without using canvas.rotate() & located at the very bottom of the fiddle), it basically swaps the X & Y coordinates when drawing the new piece:
var newPiece = targetPiece;
pieces.splice(pieces.indexOf(targetPiece), 1);
targetPiece = null;
console.log(newPiece);
var geometry = [];
for (var i = 0; i < newPiece.geometry.length; i++) {
geometry.push([newPiece.geometry[i][3], newPiece.geometry[i][0]]);
}
var offset = [newPiece.offset[1], newPiece.offset[0]];
console.log(geometry);
console.log(offset);
newPiece.geometry = geometry;
newPiece.position = geometry;
newPiece.offset = offset;
pieces.push(newPiece);
console.log(pieces);
for (var j = 0; j < pieces.length; j++) {
draw(pieces[j]);
}
This doesn't work properly, but has promise.
In this fiddle, I've isolated the problem down to a single piece and tried to use canvas.rotate() to rotate the array by double clicking, but what's actually happening is it's rotating each piece of the array (I think), which results in nothing happening because each block of the array is just a 50x50 rectangle and when you rotate a square, it still looks just like a square.
function doubleClickListener(e) {
var br = canvas.getBoundingClientRect();
mouse_x = (e.clientX - br.left) * (canvas.width / br.width);
mouse_y = (e.clientY - br.top) * (canvas.height / br.height);
var pieceToggle = false;
for (var i = 0; i < pieces.length; i++) {
if (onTarget(pieces[i], mouse_x, mouse_y)) {
targetPiece = pieces[i];
rotate(targetPiece);
}
}
}
function rotate() {
targetPiece.rotationIndex = targetPiece.rotationIndex === 0 ?
1 : targetPiece.rotationIndex === 1 ?
2 : targetPiece.rotationIndex === 2 ?
3 : 0;
for (var j = 0; j < pieces.length; j++) {
draw(pieces[j]);
}
}
Just FYI, I've tried creating the puzzle pieces as individual polygons, but could not figure out how to capture it with a mousedown event and move it with mousemove, so I abandoned it for the canvas rectangle arrays which were relatively simple to grab & move.
There's a brute force solution to this, and a total rewrite solution, both of which I'd rather avoid (I'm up against a deadline-ish). The brute force solution is to create geometry for all possible pieces (rotations & mirroring), which requires 63 separate geometry variants for the 12 pieces and management of those states. The rewrite would be to use fabric.js (which I'll probably do after class is over because I want to have a fully functional puzzle).
What I'd like to be able to do is rotate the array of five blocks with a double click (don't care which way it goes as long as it's sequential 90° rotations).
Approaching a usable puzzle:
With lots of help from #absolom, here's what I have, you can drag with a mouse click & drag, rotate a piece by double clicking it, and mirror a piece by right clicking it (well, mostly, it won't actually rotate until you next move the piece, I'm working on that). The Z-order of the pieces are manipulated so that the piece you're working with is always on top (it has to be the last one in the array to appear on top of all the other pieces):
Pentominoes II
The final solution
I've just handed the game in for grading, thanks for all the help! There was a lot more tweaking to be done, and there are still some things I'd change if I rewrite it, but I'm pretty happy with the result.
Pentominoes Final
Quick & Dirty:
The quick & dirty solution is when 2+ pieces are assembled you create a single image of them (using an in-memory canvas). That way you can move / rotate the 2-piece-as-1-image as a single entity.
More Proper:
If the 2+ piece assembly must later be disassembled, then you will need the more proper way of maintaining transformation state per piece. That more proper way is to assign a transformation matrix to each piece.
Stackoverflow contributor Ken Fyrstenberg (K3N) has coded a nice script which allows you to track individual polygons (eg your rects) using transformation matrices: https://github.com/epistemex/transformation-matrix-js
Does this code do what you need? The rotate method looks like this now:
function rotate(piece) {
for (i = 0; i < piece.geometry.length; i++) {
var x = piece.geometry[i][0];
var y = piece.geometry[i][2];
piece.geometry[i][0] = -y;
piece.geometry[i][3] = x;
}
drawAll();
}
I simplified how your geometry and positioning was handled too. It's not perfect, but it can gives you some hints on how to handle your issues.
Please note that this solution works because each piece is composed of blocks with the same color and your rotations are 90 degrees. I only move the blocks around to simulate the rotation but nothing is rotated per-se. If you build your pieces differently or if you need to rotate at different angles, then you would need to go with another approach like transformation matrices.
UPDATE
Here is a better solution: fiddle
I am populating the canvas with small circles to form a shape and would like to destroy some of the circles where ever user clicks on the screen using the following function.
dotsArray : is the array of all circles
dot.ball: is the circle being drawn
bomb: is the circle drawn using user input being taken by the mouse click and hold.The bomb scales up in size as the mouse is pressed
function onMouseDown(event){
bomb.x = event.stageX;
bomb.y = event.stageY;
bomb.active = true;
}
function decimateBalls(){
for (var i = 0; i < dotsArray.length; i++){
for ( var j = 0; j < dotsArray[i].length; j++){
var dot = dotsArray[i][j];
var pt = dot.ball.localToLocal(dot.ball.x, dot.ball.y,bomb);
if(bomb.hitTest(pt.x,pt.y)){
dot.setType("empty"); // this changes dot's circle to white making it seem invisible
}
}
}
}
When I use the above code, even though i calculate the location of the small dots with respect to the bomb circle being drawn, the dots that disappear are the ones that are a lot offset from the bomb circle being drawn.
Am i doing something obviously wrong? Is there a better way to approach this problem?
Thanks a lot for your time.
I used the following work around to get the desired result.
made sure everything is added to stage. got rid of containers.
Use if(bomb.hitTest(dot.ball.x - bomb.x,dot.ball.y - bomb.y)) and got rid of localToLocal() function provided by createjs to find local coordinates of an object with respect to another object.
Hope this helps someone who comes across a similar issue.
I am working on a server side physics experiment where the user controls an object through a socket. The problem I am running into results when the user moves the object outside the boundaries of the world.
I am using Box2Djs as installed through npm.
I create world 500x500 and then attach the following listener to it:
var boundaryListener = new b2d.b2BoundaryListener();
boundaryListener.Violation = function (body) {
//we will move this body to the opposite side
var position = body.GetWorldCenter();
//snap to opposite side
if (position.x < 0) {
position.x = worldAABB.upperBound.x + position.x;
}
if (position.y < 0) {
position.y = worldAABB.upperBound.y + position.y;
}
if (position.x > worldAABB.upperBound.x) {
position.x -= worldAABB.upperBound.x;
}
if (position.y > worldAABB.upperBound.y) {
position.y -= worldAABB.upperBound.y;
}
body.m_flags = body.m_flags & (~b2d.b2Body.e_frozenFlag); //does nothing :(
}
this.world.SetBoundaryListener(boundaryListener);
worldAABB is the b2AABB that the world uses as a boundary.
The problem is that I have noticed that when the boundary listener is fired, the flags are set to 22 which is allowSleep, frozen, and island flags. It would seem that when a b2Body passes outside the world boundary, it is frozen. That last line is an attempt to unfreeze the body by messing with the internal flags, but I have a distinct feeling that's the wrong way to do it.
How can I unfreeze the body? There are no functions that clear the frozen flags that I can see (the javascript is over 10,000 lines long so I honestly haven't read the whole thing) and placing some bodies as walls seems to have no effect (the user's object passes right through them).
My walls are created like so:
//create walls
var wallShape = new b2d.b2PolygonDef();
wallShape.SetAsBox(500, 10);
wallShape.density = 0.0;
wallShape.friction = 0.3;
var bodyDef = new b2d.b2BodyDef();
bodyDef.position.Set(250, 20);
var north = this.world.CreateBody(bodyDef);
north.CreateShape(wallShape);
bodyDef = new b2d.b2BodyDef();
bodyDef.position.Set(250, 499);
var south = this.world.CreateBody(bodyDef);
south.CreateShape(wallShape);
bodyDef = new b2d.b2BodyDef();
bodyDef.position.Set(499,250);
bodyDef.angle = Math.PI / 2;
var east = this.world.CreateBody(bodyDef);
east.CreateShape(wallShape);
bodyDef = new b2d.b2BodyDef();
bodyDef.position.Set(1, 250);
bodyDef.angle = Math.PI / 2;
var west = this.world.CreateBody(bodyDef);
west.CreateShape(wallShape);
Does anyone have any insights on how to fix this? There is very very little documentation I can find on using Box2D in javascript aside from the flash documentation that the website points to (which doesn't match half the time) and the C++ documentation which doesn't even talk about freezing.
It would probably be helpful to mention that the world has no gravity and all the objects have some linear and angular damping (its supposed to be a psuedo-in-space feel).
I had investigated Box2Djs source, and found next thing. Every time step Box2Djs checks if the body is inside the world boundaries. If body is out of range, then it "frozing", i.e. its excluding from collision detection. There this code (Body.js line 414):
Freeze: function(){
this.m_flags |= b2Body.e_frozenFlag;
this.m_linearVelocity.SetZero();
this.m_angularVelocity = 0.0;
for (var s = this.m_shapeList; s != null; s = s.m_next)
{
s.DestroyProxy();
}
}
Pay attention, this check performs every time step (b2Island.js 244). So, if you set e_frozenFlag at boundary listener, it will do nothing: flag will be set up at next time step. Thats more, after body had frozen, it losses its veolcity and its shapes looses theirs proxies in broad phase (as you can see from code above). Looks like proxies are not restroing automaticly, so, reseting flag is not enough.
I also not found somewhere in Box2Djs interface or logic for unfreezing bodies. Doing this manually is some kind of dirty trick, because you should acces BroadPhase, which is Box2Djs internal. Thats more, it dont help you, because on freezing body losses its velociy. But, as I see, you need continue body moving.
Solution is next. You should prevent body frozing at all in order to keep body in simulation after it moved out of world boundaries. It may be done by next trick. First, set world boundary with some large value. Then, set contact listener, and when body touches the walls, perform your boundary violation logic.
How to set contact listener in C++ you can see there: https://www.iforce2d.net/b2dtut/collision-callbacks Sory, I dont know java script and can't say, how to do this in Box2Djs.