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 want to animate these two things at the same time, and not one by one.
t1.fromTo(searchForm, { scaleX: 0 }, { duration: 1, autoAlpha: 1, scaleX: 1 });
t1.fromTo(loupe, {x: '-=0'}, {duration: 1, x: '+=265'})
I want to move them together; how can I do that?
Just use the position parameter to position your tween(s) wherever you want in the timeline.
t1.fromTo(searchForm, { scaleX: 0 }, { duration: 1, autoAlpha: 1, scaleX: 1 });
t1.fromTo(loupe, {x: '-=0'}, {duration: 1, x: '+=265'}, 0);
There's more info about the position parameter at https://greensock.com/position-parameter.
Also, there's no reason to use a .fromTo() in the second case because x: "-=0" does absolutely nothing, so you can just to a normal .to() tween and omit that whole object.
Happy tweening!
I have prepared a tab bar which has a square shape rectangle but I can't able to prepare a rectangle type shape of a tab bar button or UIButton or View. How can I prepare a tab bar or button or view as following gif file?
You can try something like given below for each button:
let tabBar1Path = UIBezierPath()
let tabBar1Layer = CAShapeLayer()
tabBar1Path.move(to: CGPoint(x: 0, y: 0))
tabBar1Path.addLine(to: CGPoint(x: self.view!.frame.size.width * 0.25, y: 0))
tabBar1Path.addLine(to: CGPoint(x: self.view!.frame.size.width * 0.2, y: tabBarHeight))
tabBar1Path.addLine(to: CGPoint(x: 0, y: tabBarHeight))
tabBar1Path.addLine(to: CGPoint(x: 0, y: 0))
tabBar1Layer.path = trianglePath.cgPath
tabBar1Layer.fillColor = UIColor.black.cgColor
tabBarButton1.layer.addSublayer(triangleLayer)
See a jsfiddle here
I am tweening along a bézier path with 3 points.
// bezier data
var bezierData = {
curviness: 1,
autoRotate: false,
values: [
{x: 0, y: 0, rotation:"40_cw"}, /* <-- The desired state of the object before any animation has happened */
{x: 20, y: 0, rotation:"0_ccw"},
{x: 40, y:0, rotation:"-20_ccw"}
]
};
// build tween
var tween = new TimelineMax()
.add(TweenMax.to("#testobj", 1, {css:{bezier: bezierData}, ease:Power1.easeInOut}));
// create scene
var scene = new ScrollMagic.Scene({
triggerElement: "#testobj",
duration: 100,
offset: 10
})
.setTween(tween)
.addTo(ctrl)
.addIndicators();
What I want: The initial state of my object (i.e. before any animation has happened) should be the first bézier point, {x: 0, y: 0, rotation:"40_cw"}.
What's happening: The initial state is the object's default style, i.e. the equivalent of {x: 0, y: 0, rotation:"0"}. Note how in the jsfiddle the green square starts out upright while I want it to start rotated 40° clock-wise.
Tahir Ahmed's answer works!
perhaps you can use .set() before doing the .to() tween? something like this.
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?