Develop Reference

Javascript collision of two point array polygons

I have searched all over, and I have found answers for rectangle circle and sprite collisions. Nothing that provides collision detection between two arrays of points like for example,
var poly1=[
[0,0],
[20,50],
[50,70],
[70,20],
[50,0]
];
// each point from one to the next represent a line in the shape, then the last point connects to the first to complete it.
var poly2=[
[50,30],
[40,90],
[70,110],
[90,70],
[80,20]
];
var collided=arraysCollided(poly1,poly2);
Does anyone know of a library that can do just this? My research has come up with nothing that supports just that, and isnt associated with some game engine library.
For example a collision is triggered true when one or more points is inside the polygon of the other.

SAT.js was the anser for me, I just put every point into SAT.Vector then into SAT.Polygon, then test them with SAT.testPolygonPolygon(SAT.Polygon,SAT.Polygon);
var poly1={
name:"poly2",
x:400,
y:60,
rotation:0,
runner:function(){
},
points:[
[20,-50],
[-30,-50],
[-30,30],
[10,60],
[50,20]
]
};
var poly2={
name:"poly2",
x:50,
y:70,
runner:function(){
this.x+=1;
},
points:[
[-20,-40],
[-60,50],
[10,70],
[50,30],
[30,-20]
]
};
pGon=(poly)=>{
var center=SAT.Vector(0,0);
var pts=[];
for(var i in poly.points){
var point=poly.points[i];
// point = [0:x,1:y]
pts[pts.length]=new SAT.Vector(point[0]+poly.x,point[1]+poly.y);
}
var poly_a=new SAT.Polygon(center,pts);
return poly_a;
};
pCollide=(p1,p2)=>{
var p1_poly=pGon(p1);
var p2_poly=pGon(p2);
var res=new SAT.Response();
var collided=SAT.testPolygonPolygon(p1_poly,p2_poly,res);
console.log(collided);
console.log(res);
return collided;
};
var collided=pCollided(poly1,poly2);
With that, it maps each point to a polygon on the coordinate system, then tests it from there. So collided = true

I checked for if each point of each polygon is in the other polygon. This is the code for checking if a point is in a polygon:
function pip(x, y, polygon) {
let odd = false;
let v = polygon.va; //The vertices array
let j = v.length - 2;
for (let i=0; i<v.length-1; i+=2) {
if ((v[i+1]<= y && v[j+1]>=y || v[j+1]<= y && v[i+1]>=y)
&& (v[i]<=x || v[j]<=x)) {
odd ^= (v[i] + (y-v[i+1])*(v[j]-v[i])/(v[j+1]-v[i+1])) < x;
}
j=i;
}
if(odd === false) odd = 0;
return odd;
}
I got this from Here, but modified it to work for an array like this [x1,y1,x2,y2,x3,y3...]. To make it work for x,y pairs, you would just change the for loops modifier thing and look at polygon.va[i][0] as x and polygon[i][1] as y.

meet strange during build up the basic 2D grids for future simulation in javascript?

I am doing one project while stuck at the first step. The idea is to set up a 3D model. The (x,y) is the geometry area and z is the value of interests. I need simulate all area of (x,y) coordinates.Firstly, I try to initiate the z value for all (x,y) coordinate. I met problems at this step by following codes.
<script type="text/javascript">
// use the rectangle as the "unit" of the 2D model.
var x = [];
var y = [];
var z = [];
var R1 = 5;
var dataset = [];
// use function to initiate a row
var rowGen = function(k){
for (j=0;j<10;j++){
x.push(j*5);
y.push(k*2);
z.push(R1);
dataset.push({x:x[j],y:y[j],z:z[j]});
}
}
// initiate 10 rows
for (i=0;i<10;i++){
rowGen(i);
}
This always just initiate the z value for parts of the (x,y) area. Just the first row (y=0). I checked dataset in console, it has the correct numbers(100) of objects （x,y,z）, while all of them have y=0, which shows in the figure only one line, instead of 2D area.
I tried a different loops to do that but just can not find out the solution. Could you please help bring me some light?

Just found the logic bug. I had pushed the wrong value into y.Changed the code as below works.
// use the rectangle as the "unit" of the 2D model.
var x = [];
var y = [];
var z = [];
var R1 = 5;
var dataset = [];
// use function to initiate a row
var rowGen = function(k){
for (j=0;j<10;j++){
x.push(j*5);
y.push(k*2);
z.push(R1);
dataset.push({x:x[j],y:k*2,z:z[j]});
}
}
// initiate 10 rows
for (i=0;i<10;i++){
rowGen(i);
}

Calculating the volume of a mesh in ThreeJS is greater than bounding box volume

The problem:
Bounding box volume is smaller than volume calculated from mesh.
What I've tried:
First I calculate the volume of a bounding box with the following code:
//loaded .obj mesh object:
var sizer = new THREE.Box3().setFromObject(obj);
console.log(sizer.size().x*sizer.size().z*sizer.size().y);
log output: 197112.65382983384
Then I calculate the volume of the mesh using this solution with this solution with the legacy geometry object in the method "calculateVolume" included below:
console.log(scope.calculateVolume(child));
calculateVolume is part of a class. My class methods are as follows:
threeDeeAsset.prototype.signedVolumeOfTriangle = function(p1, p2, p3) {
var v321 = p3.x*p2.y*p1.z;
var v231 = p2.x*p3.y*p1.z;
var v312 = p3.x*p1.y*p2.z;
var v132 = p1.x*p3.y*p2.z;
var v213 = p2.x*p1.y*p3.z;
var v123 = p1.x*p2.y*p3.z;
return (-v321 + v231 + v312 - v132 - v213 + v123)/6;
}
threeDeeAsset.prototype.calculateVolume = function(object){
var volumes = 0;
object.legacy_geometry = new THREE.Geometry().fromBufferGeometry(object.geometry);
for(var i = 0; i < object.legacy_geometry.faces.length; i++){
var Pi = object.legacy_geometry.faces[i].a;
var Qi = object.legacy_geometry.faces[i].b;
var Ri = object.legacy_geometry.faces[i].c;
var P = new THREE.Vector3(object.legacy_geometry.vertices[Pi].x, object.legacy_geometry.vertices[Pi].y, object.legacy_geometry.vertices[Pi].z);
var Q = new THREE.Vector3(object.legacy_geometry.vertices[Qi].x, object.legacy_geometry.vertices[Qi].y, object.legacy_geometry.vertices[Qi].z);
var R = new THREE.Vector3(object.legacy_geometry.vertices[Ri].x, object.legacy_geometry.vertices[Ri].y, object.legacy_geometry.vertices[Ri].z);
volumes += this.signedVolumeOfTriangle(P, Q, R);
}
return Math.abs(volumes);
}
log output: 336896.1562770668
Checking the source of the vertexes:
I also tried buffergeometry and of course, it's really the same array, but a typed Float32Array and predictably gave the same result:
var vol = 0;
scope.mesh.traverse(function (child) {
if (child instanceof THREE.Mesh) {
var positions = child.geometry.getAttribute("position").array;
for(var i=0;i<positions.length; i+=9){
var t1 = {};
t1.x = positions[i+0];
t1.y = positions[i+1];
t1.z = positions[i+2];
var t2 = {};
t2.x = positions[i+3];
t2.y = positions[i+4];
t2.z = positions[i+5];
var t3 = {};
t3.x = positions[i+6];
t3.y = positions[i+7];
t3.z = positions[i+8];
//console.log(t3);
vol += scope.signedVolumeOfTriangle(t1,t2,t3);
}
}
});
console.log(vol);
log output: 336896.1562770668
The question: Why is my bounding box volume smaller than the calculated volume of a closed mesh?
Perhaps I missing something such as an offset position or maybe I am calculating the bounding box volume wrong. I did several searches on google and stack, which is how I came to find the signedVolumeOfTriangle function above. it seems to be the most common accepted approach.

Could be a problem with winding order, you could try negating the result from signed volume, or reordering arguments.
The winding order will be clockwise or counterclockwise and determines the facing (normal) of the polygon,
volumes += this.signedVolumeOfTriangle(P, Q, R);
Swapping P and R inverts the normal,
volumes += this.signedVolumeOfTriangle(R, Q, P);
This can be complicated by storage techniques like triangle strips, where vertices are shared by adjacent triangles, causing winding order to alternate.
Another problem could be - especially if it works correctly for simple meshes - is degenerate vertices. If you're getting your meshes from an editor, and the mesh has been modified and tweaked a million times (usually the case), it's almost guaranteed to have degenerates.
There may be an option to weld close vertices in the editor that can help, or test with a known good mesh e.g. the Stanford bunny.

Javascript, finding first significant figure (values ranging from 87.352 to 0.0002432)

I have created a GPS system using coordinates.
I have found the highest and lowest longitude and latitude coordinates using this function:
var maxLng = 0;
var maxLat = 0;
var minLng = 180;
var minLat = 180;
for(var i=0; i<coordinates.length; i++)
{
//get max coordinates (the +90 is to remove negative numbers)
if (coordinates[i][0]+90 > maxLat)
{
maxLat = coordinates[i][0] + 90;
}
if (coordinates[i][1]+90 > maxLng)
{
maxLng = coordinates[i][1]+ 90;
}
//get min coordinates
if (coordinates[i][0]+90 < minLat)
{
minLat = coordinates[i][0] + 90;
}
if (coordinates[i][1]+90 < minLng)
{
minLng = coordinates[i][1] + 90;
}
}
console.log(maxLat, maxLng,minLat, minLng);
//calculate distance between max and min points
var lngDistance = maxLng - minLng;
var latDistance = maxLat - minLat;
console.log(lngDistance, latDistance);
This outputs the distance between the 2 furthest apart longitude and latitude points, which I then plan to use to create a basic 2d map looking like this:
I need to convert the points, they can be a range of value such as:
0.0009321
19.332
1.9432123
0.0013432423
0.23432423
0.000034324
I want to basically convert all the numbers to 2 significant figures in front of the decimal point and store the result in the array stating how many shifts I have used.
I would want the output to be something like this (original number, converted number, shifts used):
[0.0009321, 93.21, 4]
[19.332, 19.332, 0]
[1.9432123, 19.432123, 1]
[0.0013432423, 13.432423, 3]
...
I am thinking find the first significant figure then count how far away from the decimal point this is. I found a few posts about using REGEX to do this, but I have never used REGEX before.
Can anybody give me some pointers?
Cheers.

That was a fun one figuring out.
Made a basic function for you, and as far as I can see it works.
function change(data){
var ret=new Array();
for(var i=0,len=data.length;i<len;i++){
// make string from number, remove the dot
var st=(''+data[i]).replace('.','');
//remove leading zero's from string
var no_zero=st.replace(/^0+/,'');
//make value
var val=parseInt(no_zero)/(Math.pow(10,no_zero.length-2));
//calculate amount of steps
var steps=Math.round(Math.log(Math.round(val/data[i]))/Math.log(10));
//correction for floating point
if(data[i]<0.01)steps--;
ret.push([data[i],val,steps]);
}
return ret;
}
And a working Fiddle

JavaScript Noise Function Problems

I've been trying to learn about generating noise and find that I understand most of it but I'm having a bit of trouble with a script.
I used this page as a guide to write this script in JavaScript with the ultimate purpose of creating some noise on canvas.
It's definitely creating something but it's tucked all the way over on the left. Also, refreshing the page seems to create the same pattern over and over again.
What have I done wrong that the "noisy" part of the image is smushed on the left? How can I make it look more like the cloudy perlin noise?
I don't really understand why it doesn't produce a new pattern each time. What would I need to change in order to receive a random pattern each time the script is run?
Thank you for your help!
/* NOISE—Tie it all together
*/
function perlin2d(x,y){
var total = 0;
var p = persistence;
var n = octaves - 1;
for(var i = 0; i <= n; i++) {
var frequency = Math.pow(2, i);
var amplitude = Math.pow(p, i);
total = total + interpolatenoise(x * frequency, y * frequency) * amplitude;
}
return total;
}

I've forked your fiddle and fixed a couple things to make it work: http://jsfiddle.net/KkDVr/2/
The main problem was the flawed pseudorandom generator "noise", that always returned 1 for large enough values of x and y. I've replaced it with a random values table that is queried with integer coordinates:
var values = [];
for(var i = 0; i < height; i++) {
values[i] = [];
for(var j = 0; j < width; j++) {
values[i][j] = Math.random() * 2 - 1;
}
}
function noise(x, y) {
x = parseInt(Math.min(width - 1, Math.max(0, x)));
y = parseInt(Math.min(height - 1, Math.max(0, y)));
return values[x][y];
}
However, the implementation provided in the tutorial you followed uses simplified algorithms that are really poorly optimized. I suggest you the excellent real-world noise tutorial at http://scratchapixel.com/lessons/3d-advanced-lessons/noise-part-1.
Finally, maybe you could be interested in a project of mine: http://lencinhaus.github.com/canvas-noise.
It's a javascript app that renders perlin noise on an html5 canvas and allows to tweak almost any parameter visually. I've ported the original noise algorithm implementation by Ken Perlin to javascript, so that may be useful for you. You can find the source code here: https://github.com/lencinhaus/canvas-noise/tree/gh-pages.
Hope that helps, bye!