I have an array of Vector3 that will make up/draw a path.
From every point onwards I want to see which direction the next point will be. Straight or left or right if the angle is steep enough.
What I tried
I creating an Object3D on every vector of the array and then pointing that (with lookAt) to the next vector. But the rotation of the tempObject is NaN when I do.
I created two Object3D to get the second object's world position.
What I expect
I want to store the angle in radians or degrees of every Object3D to determine its direction.
const path = [
{ "x": -2.47, "y": 0, "z": 7.61 },
{ "x": -2.14, "y": 0, "z": 6.63 },
{ "x": -1.09, "y": 0, "z": 2.33 },
{ "x": -1.06, "y": 0, "z": 0.8 },
{ "x": -1.83, "y": 0, "z": 0.71 },
{ "x": -9.12, "y": 0, "z": 0.39 },
{ "x": -9.48, "y": 0, "z": -0.66 }
];
if (path.length > 2) {
let index = 0;
const pathSegments = Math.floor(path.length / 2);
for (let i = 0; i<pathSegments; i++) {
const v1 = path[index];
const v2 = path[index+1];
// Fake object
const tempObject = new THREE.Object3D();
tempObject.position.set(v1);
tempObject.lookAt(v2);
console.log(tempObject.rotation);
}
}
I might be going about this the wrong way. Any help or points would be great!
The objects in your path array have to be of type THREE.Vector3. Beside, Vector3.set() does not accept an instance of THREE.Vector3 as an argument. So use the following or THREE.Vector3.copy():
tempObject.position.set(v1.x, v1.y, v1.z);
This should solve the NaN issue.
Related
I am having trouble reformatting an Object array in Javascript. I have an array that looks like this:
[
{
"deviceid": 42,
"x": "2022-03-26T00:00:18",
"y": 17.8,
},
{
"deviceid": 42,
"x": "2022-03-26T00:01:18",
"y": 17.8,
},
{
"deviceid": 43,
"x": "2022-03-26T00:02:18",
"y": 17.8,
{
"deviceid": 43,
"x": "2022-03-26T00:02:18",
"y": 17.8,
}]
I want to re-shape it so the new form will be one record per device id and all x and y values in the same row.
[
{
"deviceid": 42,
"x": ["2022-03-26T00:00:18","2022-03-27T00:00:18"],
"y": [17.8, 15.6],
},
{
"deviceid": 43,
"x": ["2022-03-26T00:01:18","2022-03-27T00:00:18"],
"y": [17.8, 19.1],
}]
How can I make this happen?
You can use reduce() to do the reduction of your values using a JavaScript object. After the reduction get the values of the object using Object.values().
const data = [
{
deviceid: 42,
x: "2022-03-26T00:00:18",
y: 17.8,
},
{
deviceid: 42,
x: "2022-03-26T00:01:18",
y: 15.6,
},
{
deviceid: 43,
x: "2022-03-26T00:02:18",
y: 17.8,
},
{
deviceid: 43,
x: "2022-03-26T00:02:18",
y: 19.1,
},
];
const result = data.reduce((devices, device) => {
// check if we have encountered this decive before using the deviceId
if (!devices.hasOwnProperty(device.deviceid)) {
// we have not: create an key-value pair using device ID as key and device info as value
// use an array for x and y
devices[device.deviceid] = {
deviceId: device.deviceid,
x: [device.x],
y: [device.y],
};
} else {
// we have seen this device before
// get the device value using the key (deviceId) and push new x and y values to it
const curDev = devices[device.deviceid];
curDev.x.push(device.x);
curDev.y.push(device.y);
}
// return JS object of devices for next iteration/ result
return devices;
}, {});
console.log(Object.values(result));
Please note: I think the input you have provided in your question contains some errors probably from copy/ pasting as the expected output contains values that are not in the input at all. I have changed values of y in the input to show you that output is actually what you expect.
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 1 year ago.
Improve this question
I have 2 arrays already setup within the js:
varDepth:
[0.5, 1.75, 2.38, 2.74, 2.89]
varMins:
[0, 1, 2, 3, 4]
I'm looking to create an object (chartData1) to push and this is the format of the array:
chartData1.push({'x': varDepth[i][0], 'y': varMins[i][1]});
But I cannot get this to work, I think I'm missing the setting up of the object, Any assistance would be greatly appreciated. Thanks!
Since you're trying to create multiple objects who's data are from the same indexes in both arrays; you can;
Loop over one of the arrays (I'm using map() so we can return the created objects into an array)
Add value to a new object
Add value of the other array, on the same index
const depths = [ 0.5, 1.75, 2.38, 2.74, 2.89 ];
const mins = [ 0, 1, 2, 3, 4 ];
let result = depths.map((depth, index) => ({ x: depth, y: mins[index]}))
console.log(result);
[
{
"x": 0.5,
"y": 0
},
{
"x": 1.75,
"y": 1
},
{
"x": 2.38,
"y": 2
},
{
"x": 2.74,
"y": 3
},
{
"x": 2.89,
"y": 4
}
]
I have a small issue with the parameter direction of the function getConnectedNodes() based on the Vis.js documentation (search for "getConnectedNodes" in the link)
Any idea to get the direction of the edges using the parameter (i don't know how to)?
JSON Example
[
{ "x": 0, "y": 0, "id": "0", "connections": [ 2 ] // i think here should be a from?},
{ "x": 200, "y": 0, "id": "1", "connections": [ 3, 2 ] },
{ "x": 500, "y": 500, "id": "2", "connections": [ 0, 1 ] },
{ "x": 300, "y": -200, "id": "3", "connections": [ 1 ] }
]
Here part of the code
google.script.run.withSuccessHandler(([nodes, edges]) => new vis.Network(container, {nodes: nodes, edges: edges}, options)).sample();
let network;
function init() {
container = document.getElementById('mynetwork');
exportArea = document.getElementById('input_output');
network = google.script.run.withSuccessHandler(([nodes, edges]) => {network = new vis.Network(container, {nodes: nodes, edges: edges}, options);}).sample();
};
function addConnections(elem, index) {
elem.connections = network.getConnectedNodes(index); < I THINK THE PROBLEM IS HERE
}
function exportNetwork() {
var nodes = objectToArray(network.getPositions());
nodes.forEach(addConnections);
var exportValue = JSON.stringify(nodes, undefined, 2);
exportArea.innerHTML = exportValue;
}
function objectToArray(obj) {
return Object.keys(obj).map(function(key) {
obj[key].id = key;
return obj[key];
});
}
Before hand, thanks a lot!
index is the index of the array like 0, 1, 2,,,. The start index is 0. On the other hand, elem is the object like {x: ###, y: ###, id: ###}. From these situation, I thought that index of getConnectedNodes(index) might be elem.id. So how about the following modification?
From:
elem.connections = network.getConnectedNodes(index);
To:
elem.connections = network.getConnectedNodes(elem.id, "from");
From the document, if you want to retrieve "parent", you can retrieve it by adding from to the argument.
For a node id, returns an array with the id's of the connected nodes.
If optional parameter direction is set to string 'from', only parent nodes are returned.
If direction is set to 'to', only child nodes are returned.
Any other value or undefined returns both parent and child nodes.
When you want to retrieve "child", please add to to the argument instead of from.
I am trying to write a function that can take a field name as an argument and return an array of corresponding values from a bit of JSON.
Example object:
var myObject = [
{"x": 10, "y": 10},
{"x": 20, "y": 10},
{"x": 20, "y": 20},
{"x": 10, "y": 20}
];
My function looks something like this:
function getValues(desiredValue) {
var values = [];
for (i = 0; i < myObject.length; i++) {
values[i] = myObject[i].desiredValue;
}
return values;
}
getValues(x);
Ideally, I would have the argument x passed to the getValues which, instead of looking for a field name called desiredValue would look for a field name called x.
The returned array should look like this:
[10,20,20,10]
As the problem with this code is obvious, how can I get the desired result?
Also, I am trying to avoid unnecessary dependencies, so please don’t give me any JQuery unless absolutely necessary.
You can use map() to return desired result.
var myObject = [
{"x": 10, "y": 10},
{"x": 20, "y": 10},
{"x": 20, "y": 20},
{"x": 10, "y": 20}
];
function getValues(desiredValue) {
return myObject.map(e => e[desiredValue]);
}
console.log(getValues('x'))
You actually need to parse the given JSON string (not the array that you have given here) by using JSON.parse(). See: http://jsbin.com/kevoqe/edit?js,console
a simple utility
//also accepts a path like "foo.bar.baz"
//returns undefined if path can't be resolved
function fetch(path){
var keys = path.split(".");
return function( target ){
for(var t = target, i = 0; i < keys.length; t = t[ keys[ i++ ] ])
if(t == null) return void 0;
return t;
}
}
and it's usage
var myObject = [
{"x": 10, "y": 10},
{"x": 20, "y": 10},
{"x": 20, "y": 20},
{"x": 10, "y": 20}
];
var result = myObject.map( fetch("y") );
this version is a bit more flexible than one hardwired with Array.map() because it can easily be composed with other functions.
Although, especially in this particular case, this already is a little bit of overkill. here you can easily write:
var result = myObject.map(pt => pt.y);
you can't get any shorter and simpler. Or if for some reason the property really is dynamic, you'll have some variable containing it:
var dynamicPropertyName = "y";
//...
var result = myObject.map(pt => pt[ dynamicPropertyName ]);
Use array map method to do manipulation in an array of objects.
Try this code :
var myObject = [
{"x": 10, "y": 10},
{"x": 20, "y": 10},
{"x": 20, "y": 20},
{"x": 10, "y": 20}
];
var output = getValues("x");
console.log(output);
function getValues(desiredValue) {
return myObject.map(function(item) {
return item[desiredValue];
});
}
Output :
Working fiddle : https://jsfiddle.net/ffyjyzjb/
I'm using jqPlot and I need to turn this JSON which I receive from a WCF service:
[{ "x": 2, "y": 3 }, { "x": 25, "y": 34 }]
into this array or arrays:
[[2,3],[25,34]]
I've tried JSON.parse & eval but to no avail.
thanks
You can use $.map() to do that:
var data = [{ "x": 2, "y": 3 }, { "x": 25, "y": 34 }]
var flattenedResult = $.map(data, function(point) {
return [[ point.x, point.y ]];
});
Parse the string into an array of objects:
var json = '[{ "x": 2, "y": 3 }, { "x": 25, "y": 34 }]';
var o = $.parseJSON(json);
Then replace each object in the array with an array:
for (var i=0; i<o.length; i++) o[i] = [o[i].x, o[i].y];