i got the following block of code to generate a new enemy each 1.5.
each new enemy is added to an array using scan operator
i did the replace suggested.
i did a small change to be able to replicate
const enemies$ = rxjs.from([0,1])
.pipe(
rxjs.scan( (enemyArray) => {
const enemy = {
x: Math.floor(Math.random() * 100),
y: -30
}
console.log(enemy)
enemyArray.push(enemy);
console.log(enemyArray); //debug.
return enemyArray;
}, [])
);
enemies$.subscribe(
(enemies) => console.log(enemies)
);
The result in the console is the following for the first element (enemy)
{x: 312, y: -30}
But when the enemy is added to enemyArray , the following results are shown in the console
(1)[{...}]
0: {x: NaN, y: 515}
1: {x: NaN, y: 65}
length: 2
[[Prototype]]: Array(0)
parseInt() takes a string as the first argument, so it should be
parseInt(String(Math.random() * 100), 10)
I need to check the orientation of a div with Cypress.
This is the test:
cy
.get('data-test="vertical"')
.should('have.css', 'transform', 'translate(-100%, 0) rotate(270deg)')
The div behaviour is standard in a scenario, or it's rotated with css transform: translate(-100%, 0) rotate(270deg); in the other scenario.
I need a way to check the orientation, but transform is difficult to check, because for example in Cypress test what happens is:
when I expect transform: rotateX(180deg) I actually receive transform: matrix3d(1, 0, 0, 0, 0, -1, 1.22465e-16, 0, 0, -1.22465e-16, -1, 0, 0, 0, 0, 1).
I need to find a smart way to detect the orientation. Suggestions? Tips?
Issue is solved like this, with the creation of a command:
const getTransformRotationAngle = (cssTransformMatrix, absoluteValue) => {
const cssTransformMatrixIndexes = cssTransformMatrix
.split('(')[1]
.split(')')[0]
.split(',')
const cssTransformScale = Math.sqrt(
cssTransformMatrixIndexes[0] * cssTransformMatrixIndexes[0] +
cssTransformMatrixIndexes[1] * cssTransformMatrixIndexes[1]
)
const cssTransformSin = cssTransformMatrixIndexes[1] / cssTransformScale
const cssTransformAngle = Math.round(
Math.asin(cssTransformSin) * (180 / Math.PI)
)
return absoluteValue ? Math.abs(cssTransformAngle) : cssTransformAngle
}
Cypress.Commands.add('getTransformRotationAngle', getTransformRotationAngle)
and its use in the test:
cy
.get('data-test="vertical"')
.invoke('css', 'transform')
.then(cssTransform => {
cy.getTransformRotationAngle(cssTransform, true).should(
'eq',
90 || 270
)
})
With protractor and firefox, I want to drag and drop an element with this:
const plot0 = element(by.id('AnalyseErrors'));
browser.actions().dragAndDrop(plot0, {x: 70, y: 70}).mouseDown().mouseMove({x: 10, y: 10})
.mouseMove({x: 10, y: 10})
.mouseMove({x: 10, y: 10})
.mouseMove({x: 10, y: 10})
.mouseMove({x: 10, y: 10})
.perform();
I also try
browser.actions().dragAndDrop(plot0, {x: 70, y: 70}).perform();
I even try:
const element0 = element(by.id('AnalyseErrors')).getWebElement(); // This is the element to move
const element1 = element(by.css('body > app-root > div > ng-component > div > div.editor-container')).getWebElement(); // This is the content zone to drop the element
browser.actions()
.dragAndDrop(element0, element1).
perform();
The element is located on a side bar, i have to select him and, with the mouse , dragg and drop to a content zone.
Unfortaly doesn't work.
- Failed: POST /session/875dc0ad-4d29-4bff-9efc-98e4d05379f4/moveto did not match a known command
Do you know why?
I'm wondering if it is possible (I hope it is) to set init camera rotation read from onGetPosition?
My onGetPosition function look like this:
function onGetPosition() {
console.log({
Yaw: worldRenderer.camera.rotation.y * 180 / Math.PI,
Pitch: worldRenderer.camera.rotation.x * 180 / Math.PI,
x: worldRenderer.camera.rotation.x,
y: worldRenderer.camera.rotation.y,
z: worldRenderer.camera.rotation.z
});
...
}
https://github.com/googlevr/vrview/blob/4e8e57eaddd8e69c8e032a6b5844d4e96af02156/src/embed/main.js#L357
I use this image as a texture:
Initial view, with default_yaw set to 0 degrees looks like this:
In this position onGetPosition returns:
{Yaw: 0, Pitch: -0, x: -0, y: 0, z: -0}
Then I rotate the scene to see this position (about 90 deg to the left):
onGetPosition returns:
{Yaw: 75.66036892219512, Pitch: -42.97581864568984, x: -0.7500695341072581, y: 1.3205225509658982, z: 0.7343037709331535}
I thought that if I set camera rotation inside setDefaultYaw_ function I would see last view so I did this:
WorldRenderer.prototype.setDefaultYaw_ = function(angleRad) {
...
this.camera.setRotationFromEuler(new THREE.Euler(-0.7500695341072581, 1.3205225509658982, 0.7343037709331535, 'XYZ'));
};
https://github.com/googlevr/vrview/blob/2dd890d147f702b9c561694bda5c86575c2a3d44/src/embed/world-renderer.js#L235
Unfortunately nothing happened I still see the view from second image on init.
How can I solve it?
The general problem I'm trying to solve is to find out what face of a cube faces upwards. The cube can be rolled 90° at a time and in any direction. If a certain face faces up, the cube disappears. I'm working with tweens to rotate the cube and change the position of it.
I'm currently trying to solve this by creating a new ray, with its origin set just above the cube and its direction going downwards for a short distance, so it intersects with the upper face of the cube only.
violet thingy on top of die is ray cast downward into the cube
So far so good. I get my cube as the object of intersection when I check per console.log(), but as soon as I try to access the face of intersection by faceIntersect.face it seems to be undefined.
Function in question:
function checkUpperFace(posX, posZ) {
// get position from passed x- and z-values (y is always above cube)
// and set direction and length of ray
var position = new THREE.Vector3( posX, 3, posZ );
var direction = new THREE.Vector3(0, -1, 0);
var far = 2;
// create ray, that goes downwards from above the cube
var cubeRaycaster = new THREE.Raycaster( position, direction, 0, far );
// get intersection with upper face of rolled cube
var faceIntersect = cubeRaycaster.intersectObject( currentCube );
// add a helper to see the ray
var arrowHelper = new THREE.ArrowHelper( direction, position, far, 0x770077 );
scene.add( arrowHelper );
console.log(faceIntersect); // object is shown with everything I want to know
console.log(faceIntersect.face); // is shown to be undefined
}
In the end I did it in a way #unx recommended but I really wanted to avoid the huge if-else statement, so I did it with an array rotationLibrary that has all possible rotations with the corresponding top face of the die. But because of the tween I use to rotate and move the die its rotation values are not really on point and therefore hard to compare to fixed rotation values as I use them in the array.
So I "normalize" the rotation values of the die to values I can use to compare them to my values in rotationLibrary. The last step is to store/update the result on what face is on top in the cube object itself, so I can get it whenever I want.
// spawn condition:
// 1 on top, 2 facing camera, 3 facing right (seen from camera),
// 4 facing left (see 3), 5 facing away from camera, 6 facing down
var rotationLibrary = [
{x: 0, y: 0, z: 0, face: 1},
{x: 0, y: 90, z: 0, face: 1},
{x: 180, y: 0, z: 180, face: 1},
{x: 0, y: -90, z: 0, face: 1},
{x: -90, y: 0, z: 0, face: 2},
{x: -90, y: 0, z: 90, face: 2},
{x: -90, y: 0, z: 180, face: 2},
{x: -90, y: 0, z: -90, face: 2},
{x: 0, y: 0, z: 90, face: 3},
{x: 90, y: 90, z: 0, face: 3},
{x: -90, y: -90, z: 0, face: 3},
{x: -90, y: 90, z: 180, face: 3},
{x: 180, y: 0, z: -90, face: 3},
{x: 0, y: 0, z: -90, face: 4},
{x: 90, y: -90, z: 0, face: 4},
{x: -90, y: 90, z: 0, face: 4},
{x: 180, y: 0, z: 90, face: 4},
{x: 90, y: 0, z: 0, face: 5},
{x: 90, y: 0, z: -90, face: 5},
{x: 90, y: 0, z: 180, face: 5},
{x: 90, y: 0, z: 90, face: 5},
{x: 90, y: 90, z: 90, face: 5},
{x: 0, y: 0, z: 180, face: 6},
{x: 180, y: -90, z: 0, face: 6},
{x: 180, y: 90, z: 0, face: 6},
{x: 180, y: 0, z: 0, face: 6}
];
function checkRotationsToGetUpperFace(cube) {
// create object with "normalized" (brought to quarter-circle-degree-values) degrees
var normalizedRotation = {
x: 0,
y: 0,
z: 0
};
normalizedRotation.x = getNormalizedDegree(cube.rotation._x);
normalizedRotation.y = getNormalizedDegree(cube.rotation._y);
normalizedRotation.z = getNormalizedDegree(cube.rotation._z);
// go through the library that has all the degrees with the corresponding upper face
for (var i = 0; i < rotationLibrary.length; i++) {
// check if the objects match, then get the face
if (rotationLibrary[i].x == normalizedRotation.x &&
rotationLibrary[i].y == normalizedRotation.y &&
rotationLibrary[i].z == normalizedRotation.z) {
cube.face = rotationLibrary[i].face;
}
}
// reattach cube for correct movement later
THREE.SceneUtils.attach(cube, scene, pivot);
}
function getNormalizedDegree(rotationValue) {
// transform rotation value into degree value
var rotValue = rotationValue / (Math.PI / 180);
// default value is 0, so only check if it should be 90°, 180° or -90°
var normalizedDegree = 0;
// x between 45° and 135° ( ~ 90)
if (rotValue > 45 && rotValue < 135) {
normalizedDegree = 90;
}
// x between -45° and -135° ( ~ -90)
else if (rotValue < -45 && rotValue > -135) {
normalizedDegree = -90;
}
// x between 135° and 215° or x between -135° and -215° ( ~ 180)
else if ((rotValue > 135 && rotValue < 215) || (rotValue < -135 && rotValue > -215)) {
normalizedDegree = 180;
}
return normalizedDegree;
}
(http://jsfiddle.net/b2an3pq7/3/)
Might not be the solution to your raycast problem but another approach: Why don't you simply detect the upper face by comparing the rotation euler angles? E.g. (pseudo code):
if(cube.rotation.x % 360 == 0)
{
// upper face upwards
}
else if(cube.rotation.x % 360 == 90)
{
// left face upwards
}
You would have to deal with value tolerance (85° - 95°) negative rotation values and values out of the range of PI*2 but other than that, isn't that much easier?