Im trying to apply a force to an object. To get it to move in the angle that my mouseposition is generating relative to the object.
I have the angle
targetAngle = Matter.Vector.angle(myBody.pos, mouse.position);
Now I need to apply a force, to get the body to move along that angle.
What do I put in the values below for the applyForce method?
// applyForce(body, position, force)
Body.applyForce(myBody, {
x : ??, y : ??
},{
x:??, y: ?? // how do I derive this force??
});
What do I put in the x and y values here to get the body to move along the angle between the mouse and the body.
To apply a force to move your object in that direction you need to take the sine and cosine of the angle in radians. You'll want to just pass the object's position as the first vector to not apply torque (rotation).
var targetAngle = Matter.Vector.angle(myBody.pos, mouse.position);
var force = 10;
Body.applyForce(myBody, myBody.position, {
x: cos(targetAngle) * force,
y: sin(targetAngle) * force
});
Also if you need it, the docs on applyForce() are here.
(I understand this question is old, I'm more or less doing this for anyone who stumbles across it)
You can rely on the Matter.Vector module and use it to substract, normalize and multiply positions vectors:
var force = 10;
var deltaVector = Matter.Vector.sub(mouse.position, myBody.position);
var normalizedDelta = Matter.Vector.normalise(deltaVector);
var forceVector = Matter.Vector.mult(normalizedDelta, force);
Body.applyForce(myBody, myBody.position, forceVector);
Related
I'm new in this and I'm making a small game in JS, the problem that I have now is when I create enemies it sometimes overlaps, creating this:
The way that use to create them is simple,
resetShip(enemy_spaceship) {
enemy_spaceship.y = 0;
enemy_spaceship.x = Phaser.Math.Between(10,globalThis.config.width);
}
In X each sprite will have a random number from 10 to the width of the screen (canvas), the problem is that if a sprite has 440 in X and another one has 450 in X, those 10px aren't enough to separate them, some people told me to create a grid, but like I said I'm new and searching about grid can't find any example that I can use to this, thanks if you can help me :)
One option is for each enemy ship to be allocated a specific region in which it may start. If you have 2 ships, that means the first ship can be anywhere in the first half of the X axis, and the second ship can be anywhere in the second half of the X axis.
To do this, you should update your resetShip function to also take in a minX and maxX, and use that when defining it's location:
resetShip (enemy_spaceship, minX, maxX) {
enemy_spaceship.y = 0;
enemy_spaceship.x = Phaser.Math.Between(minX, maxX);
}
Then, you need to find a way to rest the group of ships, providing valid regions for each ship. Something like this:
resetEnemies(ships) {
//Each ship may be in a region that is 1/Nth of the width
let regionWidth = globalThis.config.width / ships.length
//We need to know the shipWidth so we don't let ships get too
//close to the left edge.
let shipWidth = 64
ships.forEach((ship, i) => {
//Assuming you just want padding on the left so it is no closer than 10px,
//this will define the minX for the Nth ship
const minX = Math.min(10, i*regionWidth)
//The maxX should not let a ship overlap the next region. So, we subtract the shipWidth
//to ensure that, at worst, it is right next to the next ship
const maxX = (i+1)*regionWidth-shipWidth
//Use the updated restShip to put it in a valid location for it's region
resetShip(ship, minX, maxX)
})
}
I'm trying to create a 2D graph visualization using WebGL (regl, to be more specific). With my current implementation I can already see the force layout being applied to each node, which is good. The problem comes when I try to zoom with respect to the current mouse position. According to my research, to achieve this behavior, it is necessary to apply matrix transformations in the following order:
translate(nodePosition, mousePosition)
scale(scaleFactor)
translate(nodePosition, -mousePosition)
So, every time the wheel event is fired, the mouse position is recalculated and the transform matrix is updated with the new mouse position information.
The current behavior is weird and I can't seem to understand what is wrong. Here is a live example.
Apparently, if I zoom in and out with the mouse fixed at the initial position, everything works just fine. However, if I move the mouse and try to focus on another node, then it fails.
The function for retrieving the mouse position is:
const getMousePosition = (event) => {
var canvas = event.currentTarget
var rect = canvas.getBoundingClientRect()
var x = event.clientX - rect.left
var y = event.clientY - rect.top
var projection = mat3.create()
var pos = vec2.fromValues(x,y)
// this converts the mouse coordinates from
// pixel space to WebGL clipspace
mat3.projection(projection, canvas.clientWidth, canvas.clientHeight)
vec2.transformMat3(pos, pos, projection)
return(pos)
}
The wheel event listener callback:
var zoomFactor = 1.0
var mouse = vec2.fromValues(0.0, 0.0)
options.canvas.addEventListener("wheel", (event) => {
event.preventDefault()
mouse = getMousePosition(event)
var direction = event.deltaY < 0 ? 1 : -1
zoomFactor = 1 + direction * 0.1
updateTransform()
})
And the function that updates the transform:
var transform = mat3.create()
function updateTransform() {
var negativeMouse = vec2.create()
vec2.negate(negativeMouse, mouse)
mat3.translate(transform, transform, mouse)
mat3.scale(transform, transform, [zoomFactor, zoomFactor])
mat3.translate(transform, transform, negativeMouse)
}
This transform matrix is made available as an uniform in the vertex shader:
precision highp float;
attribute vec2 position;
uniform mat3 transform;
uniform float stageWidth;
uniform float stageHeight;
vec2 normalizeCoords(vec2 position) {
float x = (position[0]+ (stageWidth / 2.0));
float y = (position[1]+ (stageHeight / 2.0));
return vec2(
2.0 * ((x / stageWidth ) - 0.5),
-(2.0 * ((y / stageHeight) - 0.5))
);
}
void main () {
gl_PointSize = 7.0;
vec3 final = transform * vec3(normalizeCoords(position), 1);
gl_Position = vec4(final.xy, 0, 1);
}
where, position is the attribute holding the node position.
What I've tried, so far:
I already tried changing the order of the transformations. The result is even weirder.
When I apply either translation or scaling independently, everything looks ok.
This is my first interaction with something that is not the usual SVG/canvas stuff. The solution is probably obvious, but I really don't know where to look anymore. What am I doing wrong?
Update 06/11/2018
I followed #Johan's suggestions and implemented it on the live demo. Although the explanation was rather convincing, the result is not quite what I was expecting. The idea of inverting the transform to get the mouse position in the model space makes sense to me, but my intuition (which is probably wrong) says that applying the transform directly on the screen space should also work. Why can't I project both the nodes and the mouse in the screen space and apply the transform directly there?
Update 07/11/2018
After struggling a little, I decided to take a different approach and adapt the solution from this answer for my use case. Although things are working as expected for the zoom (with the addition of panning as well), I still believe there are solutions that do not depend on d3-zoom at all. Maybe isolating the view matrix and controlling it independently to achieve the expected behavior, as suggested in the comments. To see my current solution, check my answer bellow.
Alright, after failing with the original approach, I managed to make this solution work for my use case.
The updateTransform function is now:
var transform = mat3.create();
function updateTransform(x, y, scale) {
mat3.projection(transform, options.canvas.width, options.canvas.height);
mat3.translate(transform, transform, [x,y]);
mat3.scale(transform, transform, [scale,scale]);
mat3.translate(transform, transform, [
options.canvas.width / 2,
options.canvas.height / 2
]);
mat3.scale(transform, transform, [
options.canvas.width / 2,
options.canvas.height / 2
]);
mat3.scale(transform, transform, [1, -1]);
}
And is called by d3-zoom:
import { zoom as d3Zoom } from "d3-zoom";
import { select } from "d3-selection";
var zoom = d3Zoom();
d3Event = () => require("d3-selection").event;
select(options.canvas)
.call(zoom.on("zoom", () => {
var t = d3Event().transform
updateTransform(t.x, t.y, t.k)
}));
Here is the live demonstration with this solution.
Your transformation maps the model to the target view-port. If you want to correct for a translation due to scaling (say delta), which is a distance in target coordinates, you need to transform this delta in model coordinates. That is, determine the inverse of your transformation and calculate with that the correction in model coordinates
Simple example preparing the transformation for scaling around a center in view-port coordinates is given below:
function map (a, p) {
return [a[0] * p[0] + a[3] * p[1] + a[6],a[1] * p[0] + a[4] * p[1] + a[7]];
}
function scale(transform,scale,viewCenter1) {
var inverted = mat3.create();
mat3.invert(inverted,transform);
var modelCenter1 = map(inverted,viewCenter1); // scale from this point in model
mat3.scale(transform,transform,[scale,scale]);
var viewCenter2 = map(transform,modelCenter1); // map model center to screen
var viewShift = [viewCenter1[0]-viewCenter2[0],viewCenter1[1]-viewCenter2[1]];
mat3.invert(inverted,transform);
var modelShift = map(inverted,viewShift) - map(inverted,[0,0]);
mat3.translate(transform,[-modelShift[0],-modelShift[1]]); // correct for the shift
}
// pass the transformation to webgl environment
Using fabric.js (1.7.11) , I am trying to have one object follow the rotation of another without grouping them, and while maintaining the relative position of the child object to the parent. So I believe I need to (1) set the rotation center of the "child" object to that of the "parent", then (2) as the parent object is rotating, apply that rotation delta to the child ( which may already start in a rotated state ). The end result is such that the child appears "stuck" to the parent ( like a sticky-note on a game-board, and you then rotate the game-board )
Here is the pseudo-code
canvas.on('object:rotating', canvasEvent_ObjectRotating);
function canvasEvent_ObjectRotating(e)
{
// set r2'2 center of rotation = r1's center of rotation
// r2.angle += ( delta of rotation of r1 angle )
}
Here is a fiddle:
https://jsfiddle.net/emaybert/bkb5awj6/
Any help with 1 or 2 would be appreciated. Either how to get the angle delta in the object:rotating callback, and/or how to pivot a object around an arbitrary point. I've seen the reference to fabric.util.rotatePoint and an example of how to rotate a Line using it, but not an object, and couldn't make that mental transformation.
Is this something that you're trying to do?
https://jsfiddle.net/logie17/ofr8e6qd/1/
function canvasEvent_ObjectRotating(e)
{
origX = r2.getCenterPoint().x;
origY = r2.getCenterPoint().y;
let topLeftPoint = new fabric.Point(origX, origY);
if (!previousAngle) {
previousAngle = r1.getAngle();
}
let angle = fabric.util.degreesToRadians(r1.getAngle() - previousAngle);
previousAngle = r1.getAngle();
let center = r1.getCenterPoint();
let origin = new fabric.Point(r1.left, r1.top);
let newCoords = fabric.util.rotatePoint(topLeftPoint,origin,angle);
r2.set({ left: newCoords.x, top: newCoords.y }).setCoords();
}
I am attempting to distort an image displayed within a canvas, so it looks like a "planet". However I am struggling to find away to deal with a distortion issue. The only solution coming to mind is to find a way to reduce the radiusDistance variable, the bigger it is. That said, I am unsure how to achieve this. Any suggestions?
Below is the math and objects I am currently using to achieve this:
polarArray = [];
var polar = function(a,r,c){ //polar object, similar to pixel object.
this.a = a; //angle
this.r = r; //radius (distance)
this.color = c; //color, stored using an object containg r,g,b,a variables
};
loopAllPixels(function(loop){//loop through every pixel, stored in a pixel array
var pixel = loop.pixel;
/*each pixel object is structured like this:
pixel {
x,
y,
color {
r,
g,
b,
a
}
}
*/
var angle = pixel.x/360*Math.PI;
var radiusDistance = pixel.y/Math.PI;
polarArray.push(new polar(angle,radiusDistance,pixel.color));//store polar coordinate pixel + colour.
pixel.color = new colorRGBA(255,255,255,255);//set background as white.
});
for (var i=0;i<polarArray.length;i++){//loop through polarArray (polar coordinate pixels + colour)
var p = polarArray[i]; //polar pixel
var x = (p.r*Math.cos(p.a))+(canvas.width/2); //x coordinate
var y = (p.r*Math.sin(p.a))+(canvas.height/2); //y coordinate
if (setpixel(x,y,p.color)==true){ //set pixel at location.
continue;
}
break;
}
updatePixelsToContext();//draw to canvas
And here is the effect it currently produces (note that I flip the image horizontally before applying it to the canvas, and in this example, I set the background with a magenta kind of colour, for better clarity of the issue):
Note:
I am intending for the warping effect, just not the "ripping" of the pixels, caused by not obtaining all the neccessary pixel data required.
Also bear in mind that speed and effeciency isn't my priority here as of yet.
How can I get the position of an object in Raphael? I can get the size using getBBox(), but there appears to be no way to get the position?
getBBox() should give you position as well as x and y properties.
var bbox = el.getBBox();
alert([bbox.x, bbox.y]);
getBBox() returns an object with 5 properties. they are:
x
y
width
height
toString()
if you set getBBox( false ) it will return coordinate data for the object's position AFTER a transformation. set it to getBBox( true ) to return coordinates for the object prior to transformation
use like this ...
paper.Raphael(10,10,300,300);
circle.paper( 30, 55, 15 );
var circleBBox = circle.getBBox( false );
edit: just downloaded R 2.1 and i believe it has added x2 and y2 to the properties returned by getBBox()
Depending on what kind of shape it is, the documentation seems to say it can be accessed using the .attr() function. So, if it's a circle...
var x = myCircle.attr('cx'); //cx is the center-x-coordinate of the circle
var y = myCircle.attr('cy'); //same, for y
var r = myCircle.attr('r'); //Radius of circle.
A square would have attrs of x, y, width, height. Check the documentation for more info.
you may also access the x and y values this way:
var x = myCircle.attrs.x;
var y = myCircle.attrs.y
attributes x, y are those within the set. The issue here is that if the set gets translated somewhere else, the x and y given in by .getBBOx() do not account for the translation.
Raphael.transformPath(path, transform) can help by applying the same transforms that the set has...
to translate that point you can:
tp = Raphael.transformPath("M"+x+","+y, set.attr('transform'))
x = tp[0][1]
y = tp[0][2]