I am working with multiple layers on my stage, each layer containing images enclosed with a bubbly effect (refer to this question). Every bubble is draggable.
Is there a way to detect collisions between the bubbles while moving them? My goal is to prevent overlapping bubbles and instead have them merge if they collide.
Detecting collisions between blobs.
There are two primary methods to achieve this:
The bounding box method is quicker compared to pixel testing.
While pixel-testing may offer more accuracy, it requires greater resources and is considerably slower.
For instance:
Explanation on evaluating collisions between the bounding boxes of 2 blobs.
A demo: http://jsfiddle.net/m1erickson/9tB7d/
Initiate with a Kinetic Blob
var blueBlob = new Kinetic.Line({
points: [73,140,340,23,500,109,300,170],
stroke: 'blue',
strokeWidth: 10,
fill: '#aaf',
tension: 0.8,
closed: true
});
This particular blob comprises multiple Bezier curves.
Extract the Bezier curves composing the blob:
function kineticBlob2Beziers(blob){
var beziers=[];
var start=blob.getPoints();
var pts=blob.getTensionPoints();
var n=0;
var lastN=pts.length-2;
var sx=start[0];
var sy=start[1];
while(n<lastN){
bez={
s: {x:sx,y:sy},
c1:{x:pts[n++],y:pts[n++]},
c2:{x:pts[n++],y:pts[n++]},
e: {x:pts[n++],y:pts[n++]}
};
beziers.push(bez);
sx=pts[n-2];
sy=pts[n-1];
}
return(beziers);
}
Determine the bounding box of the blob using its Bezier curves:
function getBlobBB(beziers){
var minX=1000000;
var minY=1000000;
var maxX=-1000000;
var maxY=-1000000;
for(var i=0;i<beziers.length;i++){
var bez=beziers[i];
for(var t=0.00;t<=1.00;t+=.01){
var pt=getCubicBezierXYatT(bez.s,bez.c1,bez.c2,bez.e,t);
if(pt.x<minX){minX=pt.x;}
if(pt.x>maxX){maxX=pt.x;}
if(pt.y<minY){minY=pt.y;}
if(pt.y>maxY){maxY=pt.y;}
}
}
return({x:minX,y:minY,width:maxX-minX,height:maxY-minY});
}
function getCubicBezierXYatT(startPt,controlPt1,controlPt2,endPt,T){
var x=CubicN(T,startPt.x,controlPt1.x,controlPt2.x,endPt.x);
var y=CubicN(T,startPt.y,controlPt1.y,controlPt2.y,endPt.y);
return({x:x,y:y});
}
// cubic helper formula at T distance
function CubicN(T, a,b,c,d) {
var t2 = T * T;
var t3 = t2 * T;
return a + (-a * 3 + T * (3 * a - a * T)) * T
+ (3 * b + T * (-6 * b + b * 3 * T)) * T
+ (c * 3 - c * 3 * T) * t2
+ d * t3;
}
Check for collision between two bounding boxes (rectangles):
function Colliding(left1,top1,right1,bottom1,left2,top2,right2,bottom2){
return(!(
left1 > right2 ||
right1 < left2 ||
bottom1 < top2 ||
top1 >bottom2
));
}
I need help with a Node.js and mongoose Module project. I want to find a way to count the number of documents a user has and if they have more than 0 documents, I want to edit their existing document by adding the input text to it. Here is what I have so f ...
Currently, I am working on developing a product page that includes a dropdown menu for selecting items and a button to add them to the cart. The products are being retrieved from a MySQL database and then looped through to generate product tables. The drop ...
I previously utilized an Implicit Association Task (IAT) in an experiment conducted on computers. However, I now need to adapt this IAT for use on tablets or mobile devices. Here is how the IAT appears on a cellular device: https://i.stack.imgur.com/kNwo ...
Currently, I have a simple react application that enables users to search for and view movies from the Movie Database API. However, I am facing an issue: I want to connect my custom React Function SearchMovies() to a specific material ui component known a ...
Can anyone provide me with a computer program or algorithm that calculates the distance between a point and a line in a three-dimensional space? The program can be written in JavaScript or any other programming language. In this scenario, P represents th ...
I am working on creating a function that will allow users to change their password. The first step is to compare the old password with the user's current password in the database. I have written code for this inside the router function, but it doesn&a ...
After utilizing the API, I receive an array of objects structured as follows: [ { id: 5, name: "foo" }, { id: 7, name: "bar" } ] My goal is to extract only the ID values and transform the array into this format: [5,7] What approach would be regarded ...
Hey everyone, I'm currently working on a website that includes a home page and a specific 'Brazil' component. To switch between the two, I am using vue router. Within the Brazil component, there is a calculator feature that should take a gra ...
I am currently facing a challenge in downloading all files from a specific folder on an FTP site. The folder, named "IN" (as demonstrated in the example code), contains several .csv files. The requirements for this task are: Download all CSV files presen ...
I am currently working on a solution to toggle dynamically generated rows of data. I have attempted using ng-init and passing it to a function, but I seem to be making a mistake somewhere and struggling to understand if this is even feasible. The issue see ...
I am working on a project that involves two directives, draggable and droppable. These directives use jQuery UI functions to enable drag-and-drop functionality on elements. In my setup, the draggable items are in a controller that has a parent controller c ...
Is there a way to establish global default headers in Axios for dependencies that also utilize Axios? I am currently working on a "react component" (public on npm) which relies on Axios. However, when this component initiates an Ajax call, it is important ...
I have a list of integers which I want to use to create a new Date object, but how can I pass in the numbers without using brackets? Here is what I have: var array = [2015, 3, 18, 2, 0, 0] var newdate = new Date(array) Unfortunately, this won't work ...
In my grid, there is a feature where hovering over a box creates a clone of that box which is positioned directly above it (using z-index/overlay). Once the user moves the cursor away from the box, an animation should play, and at the end of it, the box sh ...
When working with MobX, is there a way to update the values of an observable array without re-setting every value? At first glance, one might think the solution is: let arr = observable([]); autorun(() => { console.log('my array changed!') ...
I am facing an issue with a component that I want to decouple from the data fetching implementation. My goal is to be able to pass a data fetching callback as a prop. The reason for this is so that I can easily mock the data fetching process in storybook. ...
Having trouble with Angular-chart.js and can't seem to get it working. Here is the code I have for my JavaScript and HTML page: (function(){ angular.module("app", ["chart.js"]).controller("BarCtrl", function ($scope) { $scope.labels = ['20 ...
I am currently utilizing Backbone as my JavaScript framework. I have a form where I need the capability to upload up to 10 images simultaneously. To achieve this, I am setting the enctype attribute to "multipart/form-data" in the form tag and including the ...
I am facing an issue while integrating ngTimepicker into my Angular project. It is functioning properly, but I am unable to inline the ngTimepicker inputs with the form input. Check out the plunker here I would like this section of HTML to be displayed in ...
I've come across 3 different ways to convert a Uint8Array to BigInt, but each method seems to produce varying results. Can someone clarify which approach is correct and recommended? Utilizing the bigint-conversion library. The function bigintConversi ...