So I am trying to make a website in which I can place these NATO units on a map. It's all been going well so far until I started to work on the zoom function. The goal is to zoom the map canvas by a constant factor of either 2 or 0.5 and all of the units would retain their center position in relation to the map. However, these units will all remain the same size due to the inability to see small units.
I am currently having difficulties understanding why the zoom doesn't currently work. A quick run through the website reveals some major flaws. I suspect it has to do something with these two lines, lines 177 and 178 of the zoom(level) function in draw.js:
draggableElementsA[i].style.top = (draggableElementsA[i].getBoundingClientRect().top + (draggableElementsA[i].getBoundingClientRect().height / 2) - c1) * level - (draggableElementsA[i].getBoundingClientRect().height / 2) + canvas.getBoundingClientRect().top + "px";
draggableElementsA[i].style.left = (draggableElementsA[i].getBoundingClientRect().left + (draggableElementsA[i].getBoundingClientRect().width / 2) - c2) * level - (draggableElementsA[i].getBoundingClientRect().width / 2) + canvas.getBoundingClientRect().left + "px";
The context should be made clear on the actual file. This function performs an odd operation: it moves the units off the screen, far greater than any of the individual measurements. Any help is greatly appreciated!
I believe the issue arises when scrolling while in the zoomed state. Specifically, zooming in, moving an object, and unzooming results in the item being offset.
When recording the XY coordinates, specifically in these two lines:
pos3 = parseInt(e.clientX);
pos4 = parseInt(e.clientY);
record the position relative to the top of the game board, not simply the position of the mouse cursor on the screen.
Related
I'm currently working on a mini map for a game in which keeps track of different items of importance on and off the screen. When I first created the mini map through a secondary camera rendered onto a texture and displayed on screen in a miniature display, it was rectangle shape. I was able to ensure when the item of importance left the view of the map, an arrow pointing to the target showed up and remained on the edge of the map. It was basically clamping the x & y positions of the arrow to half the camera view's width and length (with some suitable margin space).
Anyway. Now I am trying to make the mini map circular and while I have the proper render mask on to guarantee that shape of the mini map, I am having difficulties in clamping the arrows to the shape of the new mini-map. In the rectangular mini map, the arrows stayed in the corners while clamped, but obviously, circles don't have corners.
I am thinking clamping the arrow's x & y positions have to do with the radius of the circle (half of the height of the screen/minimap), but because I'm a little weak on the math side, I am kindly requesting some help. How would I clamp the arrows to the edge of a new circle shape?
The code I have now is as follows:
let {width: canvasWidth, height: canvasHeight} = cc.Canvas.instance.node, // 960, 640
targetScreenPoint = cc.Camera.main.getWorldToScreenPoint(this.targetNode.position)
// other code for rotation of arrow, etc...
// FIXME: clamp the the edge of the minimap mask which is circular
// This is the old clamping code for a rectangle shape.
let arrowPoint = targetScreenPoint;
arrowPoint.x = utils.clamp(arrowPoint.x, (-canvasWidth / 2) + this.arrowMargin,
(canvasWidth / 2) - this.arrowMargin);
arrowPoint.y = utils.clamp(arrowPoint.y, (-canvasHeight / 2) + this.arrowMargin,
(canvasHeight /2) - this.arrowMargin);
this.node.position = cc.v2(arrowPoint.x, arrowPoint.y);
I should probably also note that all mini-map symbols and arrows technically are on screen but only are displayed in on the secondary camera through a culling mask... you know, just in case it helps.
Just for anyone else looking to do the same, I basically normalized the direction from the target node that the arrow points at and multiplied it by the radius of the image mask (with appropriate margin space).
Since the player node and the centre of the mask is at origin, I just got the difference from the player. The (640/2) is the diameter, which of course, shouldn't be hardcoded, but meh for now. Thanks to those who commented and got me thinking in the right direction.
let direction = this.targetNode.position.sub(this.playerNode.position).normalize();
let arrowPos = direction.mul((640/2) - this.arrowMargin);
this.node.position = arrowPos;
I'm working on a script that will move a layer, right, left, up, or down. This depends upon which edge of the layer is inside the canvas.
I've managed to get the layer moving left and right (x-axis) using bounds[0] and bounds[2].
But when I try to get it to move up or down, it still moves left/right. Is it the bounds number I've got wrong?
var Y1 = bounds[3].as('px');
var Height = app.activeDocument.height.as('px');
//move down
if (Y1 < Height) {
activeDocument.activeLayer.translate(Height-Y1);
}
The first thing you probably want to do in a situation like this is to check the documentation. For .translate() we can find the following:
so to move horizontally we would use deltaX and to move vertically deltaY, in your code you're giving to .translate() only deltaX, so as expected your layer is being moved horizontally. To fix this pass 0 as a first argument and your Height-Y1 as a second one:
activeDocument.activeLayer.translate(0, Height - Y1);
I have a JSON string that I'm reading from, and it has a list of x and y coords I'm using for the positions of some BoxGeometry.
I have a raycaster setup so that when I mouse over the mesh with the voxels, it returns of position the raycast hit. Then it rounds the hit point x and z to the nearest int, and gets the additional data from the JSON string for that x and z and displays it in a popup.
My issue is that the raycast says it's hitting stuff when it's over blank areas, and doesn't say it's hitting them mesh when it is over some of the mesh areas.
You can see a demo here: https://sleepy-bayou-1572.herokuapp.com/ (it can take about 20 seconds to load the visualizer, it has standard orbit mouse controls).
And here is the source for the browser side javascript: https://sleepy-bayou-1572.herokuapp.com/bundle.js (the THREE stuff is at the bottom of the file)
In the demo you can see it's showing thepopup when your mouse is not over the mesh, and in some spots it won't show when it is.
My one guess is that the raycast isn't casting in the correct direction, but I don't know of any way to check where it's casting as I'm still new to the raycasting stuff.
Update #1
The answer by #6502 was partially the issue, when I fixed that I started getting the correct values.
Now I have a new issue with it, I just fixed the CSS on the page so that the canvas for three is placed below that header, I changed all references to window.innerHeight to a variable with the height minus the navbar size (52px) and it's way off again. It looks like something isn't being adjusted to the height correctly.
Update #2
Is it possible to set the aspect ratio, normalized mouse coordinates, etc to use the size of the renderer.domElement? I'm creating this in an instance where the page size and layout will probably change a bit, so it would be good to not have to manually set the offset of the window each time.
This is probably going to be embedded in an iframe so this would be important.
The problem is that you have a typo in the normalized mouse coordinates computation (uses windowHeight twice instead of width and height):
function onDocumentMouseMove(event) {
event.preventDefault();
mouse.x = (event.clientX / windowHeight) * 2 - 1;
mouse.y = -(event.clientY / windowHeight) * 2 + 1;
}
the code should be instead
mouse.x = ( event.clientX / window.innerWidth ) * 2 - 1;
mouse.y = - ( event.clientY / window.innerHeight ) * 2 + 1;
I'm working in my new portfolio, and I want to do a effect like this, in the site:
http://nizoapp.com/
The effect of the iPhone and parts appearing from the sides when we scroll. It's a kind of parallax scrolling.
I tried to search how to do but I can't find. So I "stole" the code saving the page and adapting the code but seems to have many unnecessary things.
Someone know how can I do this?
Parallax: the apparent displacement of an observed object due to a change in the position of the observer.
Parallax is one particular scroll effect, simulating depth with relative scrolling, for example.
If you're interested in scroll effects more generally, then a simple search yields many plugins and round-ups.
The image here shows how the idea works, according to me. The basic idea is that all the elements that move have some distance from a central/non-motile element. As you scroll more, their distance from the this central element reduces - inverse proportion. In the image here, elements are marked with circles and a name given to them (only one moving element given for simplicity, others too can be added). The details follow.
The central element here is called 'A' and the moving one - 'C'. The variables used here:
D => distance of moving element from A
k => any constant > 1 (experiment for good results)
y => distance scrolled (document.body.scrollTop)
dy => vertical distance between A, C
dx => horizontal dist bet. A and C
theta => (predermined) angle between A, C
There's an angle between C and A which depends upon you - set it to any number (radians is the preferable unit). Now, as y increases, D decreases. So, D is given by the relation/formula shown in the figure. Every time you scroll down/up, D is recalculated. From that, dy, dx are calculated and are set as the top, left properties of css for C (which is absolutely positioned). In case you're wondering how to find dy, dx, here's how to do that.
dy = Math.sin(theta) * D
dx = Math.cos(theta) * D
I hope I've given the idea. I could've given the full code, but I wanted you to do something...If you want further help, ask that in comments...:)
basically it uses scroll event, and then on certain points it animates the boxes.
Manipulating the slider until the end, the circle that represents the star disappears or does a different motion. See: jsfiddle.net/NxNXJ/13 Unlike this: astro.unl.edu/naap/hr/animations/hrExplorer.html
Can you help me?? Thanks
When you supply a big luminosity, You're rendering a circle which is millions of pixels tall. The broswer might not render it because it's so big.
However, you are really only interested in a small slice of that big circle - namely, the bit that fits in your tiny window.
At some point, it doesn't make sense to increase the size of the circle, since you can't observe a change in the curvature of the circle - it just looks like a straight vertical line.
This apparent verticality occurs around when x^2 + y^2 = R^2, where R is the radius of the star, Y is half the height of your window, and x is R-1. Solve for R in terms of Y, and you get
function maximumNecessaryRadius(windowHeight){
y = windowHeight / 2;
maxRadius = (y*y - 1)/2;
return Math.round(maxRadius);
}
When resizing the star, check to make sure that its radius doesn't exceed the maximum necessary radius. Rendering it any larger than that is overkill.
Example Implementation