Develop Reference

Matter.js Apply Force Onto Body Using Angle and Power Level

I am currently trying to apply force to a body using a degree (a float between -90 and 90), and a forceLevel (a float between 0 and 1). Body.applyForce() only allows me to provide x and y power levels.
What I am trying to achieve:
I want to be able to drag back from a position, and have my body launch towards the other directions with the power of the launch based on how much the user dragged back.
Here is my code for getting the angle and the power level.
var cachedPosition = {
x: 0,
y: 0
};
document.addEventListener("mousedown", (e) => {
cachedPosition.x = e.clientX
cachedPosition.y = e.clientY
})
document.addEventListener("mouseup", (e) => {
var degree = "INVALID";
var difX = cachedPosition.x - e.clientX
var difY = cachedPosition.y - e.clientY
if (difX > 0 && difY < 0) {
var degree = getDegree(difX, difY)
} if (difX < 0 && difY < 0) {
var degree = -getDegree(Math.abs(difX), difY); // Negative degree if drag is towards bottom right.
}
var power = Math.sqrt(Math.pow(difX, 2)+Math.pow(difY, 2))/1000
})

How to update line while pressing "Shift" key?

I am trying to draw straight line with pressing key "Shift".After pressing "Shift" i want to set cursor on line at 45/90 degree angle. While drawing a line on Mouse_Move event.
Diagrammatically i want like this.
For that i have written code as below:
if (isShiftKeyPressed) {
endX = evt.X;
endY = evt.Y;
var deltaX = endX -startX;
var deltaY = endY - startY;
var angleInRadian = Math.atan2(deltaY, deltaX);
var angleInDegree = angleInRadian * 180 / Math.PI;//error in this line
if (deltaX > 0 && deltaY > 0) {
if (angleInDegree > 45 && angleInDegree < 90) {
UpdateLastPosition(endX,startY);
}
if (angleInDegree < 45 && angleInDegree > 0) {
UpdateLastPosition(startX,endY);
}
}

I think you're asking how to tell if the shift key is down.
evt.shiftKey will be true if the shift key was down when the event was generated, false if it wasn't.
So your
![if (isShiftKeyPressed) {
would be
if (evt.shiftKey) {
// The shift key was down when the event was generated
}
else {
// It wasn't
}
(I assume the ! before if was a typo.)
Example (source)

Create Dynamic Function Name for Event Listeners in JavaScript

I have this code for a math game. I have a function for a button which defines the location and then draws the button specified in the callback.
The problem is I can only create one of these, since event listeners are, for some baffling reason, referred to by the function they execute, rather than by some other string name.
Unfortunately this means writing a lot of repetitive code instead. Each function called by the eventListener would only differ by the name of the function for that particular button. How do people work around this problem? Is there no way to name the function (see: functAnim & functClick) using a string?
function factsButton(x, y, doFunction, contentCallback)
{
var getID = document.getElementById("canvas_1");
if (getID.getContext)
{
var ctx = getID.getContext("2d");
var btnW = 100;
var btnH = 100;
var cx = x - btnW/2;
var cy = y - btnH/2;
var left = cx;
var right = cx + btnW;
var top = cy;
var bottom = cy + btnH;
function functAnim(event)
{
var mousePos = getMousePos(getID, event);
var rect = getID.getBoundingClientRect();
var mouseX = mousePos.x;
var mouseY = mousePos.y;
if (mouseX >= left
&& mouseX <= right
&& mouseY >= top
&& mouseY <= bottom)
{
contentCallback(cx, cy, btnW, btnH, true);
}
else
{
contentCallback(cx, cy, btnW, btnH, false);
}
}
function functClick(event)
{
var mousePos = getMousePos(getID, event);
var rect = getID.getBoundingClientRect();
var clickX = mousePos.x;
var clickY = mousePos.y;
if (clickX >= left
&& clickX <= right
&& clickY >= top
&& clickY <= bottom)
{
doFunction();
getID.removeEventListener("mousemove", functAnim, false);
getID.removeEventListener("click", functClick, false);
}
}
contentCallback(cx, cy, btnW, btnH, false);
getID.addEventListener("click", functClick, false);
getID.addEventListener("mousemove", functAnim, false);
}
}
EDIT:
For some reason it wasn't as clear as to what I wanted. I'm not wanting to call the functions by string, but rather create them with dynamic names. For instance, since I need 4 buttons created, I would like to call my function like this: factsButton(50, 50, addClicked, "add"); With "add", instead of "functClick" they could be called "addClick" and "addAnim" or say it was "sub" instead of "add", it would create those events and functions as "subAnim" and "subClick". That way I get 8 separate event listeners each with different "names". Otherwise I end up with only 2 despite having 4 buttons.

The wording of your question confuses me for some reason :-\
Anyway,
If you want to call a function by string instead of by function pointer, add your functions as elements in a javascript object.
// a javascript object containing function definitions
var myFunctions={
functAnim: function(event)
{
var mousePos = getMousePos(getID, event);
var rect = getID.getBoundingClientRect();
var mouseX = mousePos.x;
var mouseY = mousePos.y;
if (mouseX >= left
&& mouseX <= right
&& mouseY >= top
&& mouseY <= bottom)
{
contentCallback(cx, cy, btnW, btnH, true);
}
else
{
contentCallback(cx, cy, btnW, btnH, false);
}
},
functClick: function(event)
{
var mousePos = getMousePos(getID, event);
var rect = getID.getBoundingClientRect();
var clickX = mousePos.x;
var clickY = mousePos.y;
if (clickX >= left
&& clickX <= right
&& clickY >= top
&& clickY <= bottom)
{
doFunction();
getID.removeEventListener("mousemove", functAnim, false);
getID.removeEventListener("click", functClick, false);
}
}
}
Then you can call your functions by string.
// useage
myFunctions["functAnim"](eventObject); // calls functAnim
myFunctions["functClick"](eventObject); // calls functClick

Detect if a mouse event occurred inside an element's client area

What is the proper way in Javascript to detect if a mouse event has occurred inside or outside an element's client area?
I have a container with a border and a scrollbar that serves as a control group. I would like to programmatically focus the active element in the group when the user clicks anywhere inside the container's client area but not when they click on the scollbar.

Actually instead of using clientWidth etc you can just use other properties of the rect. This makes the code simple and is more universal (should work for SVG elements too):
/**
* Check whether the event occurred roughly inside (or above) the element.
*
* #param {MouseEvent} event Event to check.
* #param {Node} element Element to check.
*/
function isEventInElement(event, element) {
var rect = element.getBoundingClientRect();
var x = event.clientX;
if (x < rect.left || x >= rect.right) return false;
var y = event.clientY;
if (y < rect.top || y >= rect.bottom) return false;
return true;
}
Note that getBoundingClientRect works even for transformed element and also works with scroll (and with zoom if your are on mobile). And browser support is very good for the basic properties (see MDN).
You could also add some margin to support bigger tap areas.

I figured out how to do that. The code below is probably only going to work on newer browsers that support getBoundingClientRect.
function isMouseEventInClientArea(event)
{
var element = event.currentTarget;
var rect = element.getBoundingClientRect();
var minX = rect.left + element.clientLeft;
var x = event.clientX;
if (x < minX || x >= minX + element.clientWidth) return false;
var minY = rect.top + element.clientTop;
var y = event.clientY;
if (y < minY || y >= minY + element.clientHeight) return false;
return true;
}

Here is working example
http://jsfiddle.net/kYC9u/
and below is code snippet. Hope this helps
<button onclick="doSomething('param');" id="id_button">action</button>
<button onclick="doSomething('param');" id="id_button1">action2</button>
function doSomething(param,e)
{
if (!e) e = window.event;
var source1 = e.target || e.srcElement;
console.log(source1.id);
alert(source1.id);
if(window.event) // IE8 and earlier
{
//doSomething
}
else if(e.which) // IE9/Firefox/Chrome/Opera/Safari
{
//doSomething
}
}

Check if mouse is within element's bounds

Is there a way in javascript to check whether the mouse position currently lies within an element's bounds?
Is there a function you can suggest or a method thats quick?
if ( document.mouse.x > ele.offsetLeft && document.mouse.x < ele.offsetRight ...check y bounds)
{
return true;
}
else return false;

You could store the boundary coordinates and the mouse coordinates. This would let you check it any time you want.
var coords = [0,0];
$(document).mousemove(function(e){
var C = coords; // one global lookup
C[0] = e.pageX;
C[1] = e.pageY;
});
var box_area = {x1:0, y1:0, x2:0, y2:0};
var box = $('#box');
function store_boundary() {
var B = box, O = B.offset();
box_area = {
x1: O.left,
y1: O.top,
x2: O.left + B.width(),
y2: O.top + B.height()
};
}
store_boundary();
function is_mouse_in_area() {
var C = coords, B = box_area;
if (C[0] >= B.x1 && C[0] <= B.x2) {
if (C[1] >= B.y1 && C[1] <= B.y2) {
return true;
}
}
return false;
};
I would like to have given you an answer without jQuery, but I think .offset() (left/top coordinates relative to the document) is really well done and very well tested. You could write your own, however, that totals up offsetLeft and offsetTop up to document. For that matter, you could also replace $.mousemove() with:
document.addEventListener('mousemove',function(e){ ... },false);
One last thing: if you reflow the page, you need to call store_boundary() again.

var t = $("#element");
var mouseX = event.clientX + document.body.scrollLeft;
var mouseY = event.clientY + document.body.scrollTop;
if (mouseX >= t.offset().left && mouseX <= t.offset().left + t.width()
&& mouseY >= t.offset().top && mouseY <= t.offset().top + t.height()) {
return true;
}