I'm trying to implement 2d zoom for a basic game. I have the images scaling. I also have a basic zoom that fails on occasion. Like...it pretty much looks legit until you start testing heavily. Sometimes when I zoom in, and move two objects close to each other, and I zoom back out, the objects now overlap, although the zoomed in version suggests otherwise.
zoom_level starts at 1.
zoomIn():
zoom_level *=1.2;
for sprite in sprites:
//make sprites 1.2 times their current size
sprite.x *= (zoom_level * zoom_level);
sprite.y *= (zoom_level * zoom_level);
It's really hard to give a proper answer, since no engine/platform/language is given.
Explained in a general way:
You will want to scale the x/y coordinates of your sprites by the same factor as you want to scale their dimensions. And the corner closest to your "zoom-point" should be the anchor point for your scaling. [Meaning if you zoom in to the x/y-coordinates of your sprite it will be enough to scale the width/height. But if you want to zoom in to the center of a sprite, the x/y-coordinates will also change since they will be pushed towards the edge of the screen.]
But most of the time you shouldn't handle zooming/transforming by changing the sprites' actual world-positions/dimensions. Most engines use a "Camera" or "Viewport" to project the world-coordinates of object to screen-coordinates. Meaning they scale/transform all images at render-time, leaving the world-coordinates untouched. You should use whatever is the equivalent of that in your engine.
As an example, given a square at (1,1) with dimensions of 1x1, if we zoom in by a factor of 2 (effectively doubling everything) using the coordinate origin as the anchor, we end up with a square rendered at (2,2) and dimensions of 2x2 in screen space.
Specific to your given code snippet:
Why to you square your zoom level in this line?
sprite.x *= (zoom_level * zoom_level);
seems to be wrong, are you sure a simple
sprite.x *= zoom_level;
isn't enough?
And as far as I can tell, this will only scale the position of the sprites but not their dimension, you should probably scale their width/height too.
OTOH, if your engine already handles camera/viewport scaling, you probably don't want to change the x/y-coordinates of your sprites at all or else you might be double transforming them.
Anyway, I'd recommend reading documentation/tutorials specific to your engine.
Related
I'm using aframe for a VR project I'm doing and I'm using checkpoint on the ground to lead the user around the 3D space. I received help before on how to create a checkpoint here
Here is the link to the most current iteration of my project -> https://museum-exhibit-demo.glitch.me/webVR.html
Is it possible to have the animation that takes you to the cylinder also change the view of the camera and height? Basically once I click the cylinder to take me to the position it will also snap my view to the text on the wall even if it is not eye height
Great Demo. I've prepared a candidate solution on glitch (app). This solution changes the height of the camera, and the horizontal direction/yaw of the camera. It does not change the pitch of the camera. Ideally any AR/VR app would minimise forcing a change of camera orientation. If you forcibly change the pitch of the camera that's like permanently tilting the floor of the user. If you just change the yaw then that just permanently changes the horizontal direction they are look. Changing the pitch can be done, but I think from a user perspective that might cause more problems than it is worth, changing the yaw is just about OK. Similar recommendations were previously mentioned in https://stackoverflow.com/a/47667912/10849562.
I'll break down the solution code by how it solves your two issues, to have the animation that takes you to the cylinder also change the height of the camera, and separately how it can change the view/direction? I'll add in line references to the solution were relevant.
Change the height to match the height of the text
First you need to know the height of the text associated with the checkpoint cylinder. One way to do this is to provide the id of the related a-text entity to the goto component. To do that I added a new component property textId to your goto component (L79). Then in each of the places where you have used the goto component the textId property was set. For example for the checkpoint cylinder associated with the Welcome! text, the goto component was changed to goto="textId: welcome" (L298).
The id of the associated a-text enitity can be accessed from methods of the goto component using this.data.textId which will be different for each goto component. Using this information within the component, the position of the a-text enitity can be found in a similar way to how you found the rig position, by finding the a-text element with document.querySelector L83 and then finding the position L93.
let text = document.querySelector(`#${this.data.textId}`);
text.object3D.getWorldPosition(textPos);
Note that instead of using text.getAttribute("position") the getWorldPosition method is used instead. That is because you have wrapped your a-text elements inside a-entity elements that also have positions set. getAttribute("position") only gives you the position relative to its parent entity, but this solution requires the absolute/world position of the text. Of course other solutions might do things different, and it's also possible to change the HTML structure of your demo so that you could use getAttribute("position"). getWorldPosition is a method from THREE.js (which A-Frame is based on) and stores the position in the textPos variable. You can use textPos in the same way as rigPos. Instead of rigPos.y you can now do textPos.y to get the height of the text as the end point of the position animation to change the height of the camera.
Note that 1.6 is taken away from the height in the solution. The default height of the camera in A-Frame is 1.6. You've handled this by reducing the position of the camera by -1.1 in the #pov entity.
Change the direction of the camera match the direction of the text
First we need to know the direction of the text with respect to its associated checkpoint cylinder. Because we now have access to the position of the cylinder the direction vector between from the cylinder to the text can be calculated (L111). From this the azimuthal angle or yaw angle of the direction from the checkpoint cylinder to the text can be calculated (L115). To do this calculation a function getYaw was created (L46) to calculate the yaw angle.
Because you have already applied a yaw rotation of 90 degrees on your #pov entity that wraps your a-camera entity, the yaw angle is calculated from the negative z-axis (0, 0, -1).
Now that you have the direction the text is from the checkpoint cylinder, you need to know the yaw direction the camera is currently pointing in. You can find this out from the rotation component of the a-camera entity. Just like finding the position of any entity, you can find the a-camera element with document.querySelector (L84) and the find its yaw angle camera.getAttribute("rotation").y (L116). You can then calculate the target yaw angle that you should set the rig to by calculating the relative angle from the camera entity to the text entity which is called targetRigYaw in the solution (L117).
Note that there are lots of applications of a mod function. This simply ensures that all yaw angles are always positive and between [0, 360] which helps simplify things when applying angles.
You could now use the targetRigYaw as the angle to set your rig to to change the view direction to look at the text. However depending on the yaw angles of the text direction and camera direction, this angle might be greater than 180 degrees. You can imagine that you could rotate left or right to end up looking in a particular direction. Unless the direction you would like to look in is directly behind you, one of the direction will be a shorted rotation than the other. L120-123 change the targetRigYaw angle so that you are always rotating in the shortest angular direction to end up looking at the text.
In order to animate the yaw in the same way as you animated the position you can add second component to the #pov entity. In the solution this is called animation__rotation (L144). The A-Frame docs describe how you can add multiple animation using the __ notation https://aframe.io/docs/1.0.0/components/animation.html#multiple-animations.
We can then set the animation__rotation component to perform an animation of the rotation of the #pov entity in a similar way to the position. The animation__rotation component is set using setAttribute to rotate from the current yaw angle of the rig to the targetRigYaw angle, and the duration of the animation is set to the same length as the position animation.
I hope this helps solve your two questions. Please let me know if you have any questions. I've added comment to the code, however there were quite a few snippets that I added that might not be obvious what they do.
Every time I create a sprite to use as css background-image, I have to crunch the math and remind myself how to remember the X and the Y coordinates in pixels. How can I remember it or see it visually to keep it straight?
I came up with this graphic, hope it's helpful to someone else as well.
Think 'Y' rhymes with 'SKY' so thats your top measurement (distance in px) from the top. That leaves 'X' as the remaining distance (distance from left in pixels)
When I say distance from left and distance from top, I am referring to the distance in pixels from the side of your overall image to when the part you want to show, begins.
I usually keep the images anywhere on the Sprite sheet and then check out there co-ordinates by clicking on each graphic element in Fireworks(i use fireworks) and then negating the co-ordinates. For eg:if an element is at x=23px and y=20px, then in the CSS, i use background-position:-23px -20px. This always does the work.
I'm working on a full screen image viewer, I'll temporarily open a dev URL here:
http://www.jungledragon.org/apps/jd3/image/704/great_grey_owl.html/zoom
This viewer is responsive and scales to your browser width/height. One of its key features is being able to zoom in and out of the image using your mouse wheel. Rather than a center-based zoom, the idea is to zoom based on origin, meaning the coordinates of your mouse, allowing you to zoom into specific areas of the image.
How to reproduce the issue
If you open the above URL and have a quick play with your mouse wheel, it may appear to be working correctly. However, the math I am using is slightly off. Here is how you can reproduce the issue:
Open the above URL
Hover your mouse over the left eye of the Owl
Zoom one step using your mouse wheel, it should zoom exactly into the eye
Position your mouse on the owl's beak
Zoom one more step using your mouse wheel
You should now notice that the second zoom step did not go into the Owl's beak exactly, it seems to be slightly off, both horizontally and vertically. I'm thinking this is a result of bad math.
How it works
Here is the javascript that handles it all:
http://www.jungledragon.org/apps/jd3/js/jd3-slideshow.js
I am capturing the mousewheel event. Based upon its direction, I am increasing or decreasing the zoom level. The actual zooming is nothing more than applying a CSS class that scales the image using a CSS3 transform:
&.grow1 { #include jd-scale(1); }
&.grow2 { #include jd-scale(1.5); }
&.grow3 { #include jd-scale(2.0); }
&.grow4 { #include jd-scale(2.5); }
&.grow5 { #include jd-scale(3.0); }
Note: the above is a call to a SASS mixin that translates into the right vendor prefixes for transform:scale.
The above accomplishes the basic zooming without issues. To make origin-based zooming possible, however, a few more steps are needed. Upon doing the actual zooming, I first set the origin of the zoom in javascript, using transform-origin. Here is my helper function for setting it:
function zoomOrigin(selector, originStr) {
selector.css({'-webkit-transform-origin': originStr});
selector.css({'-moz-transform-origin': originStr});
selector.css({'-ms-transform-origin': originStr});
selector.css({'-o-transform-origin': originStr});
selector.css({'transform-origin': originStr});
}
The heart of this question is about calculating the correct origin. There are two things worthy to mention in calculating this value:
The absolute coordinates (meaning the X and Y) are relative to the image, not relative to the page
The calculation of the origin should take into account that the image has grown/shrunk based on the current zoom state
The origin calculation happens in realtime, based on the mousemove event. Here is the method that does so, with irrelevant parts removed:
$("#image-container img").mousemove(function(e) {
// user has moved their mouse. in case of zooming or panning, this means that the
// origin (center point) of those interactions need to be recalculated
// calculate the mouse offset within the zoomable object (which is different than the page-level offset)
// this relies on the parent of the element having position:relative set
var parentOffset = $(this).offset();
zoomOriginX = e.pageX - parentOffset.left;
zoomOriginY = e.pageY - parentOffset.top;
// recalculate the width and height of the image given the current zoom level
width = $(this).outerWidth() + (1 + ((zoomLevelCurrent - 1)*0.5) * $(this).outerWidth());
height = $(this).outerHeight() + (1 + ((zoomLevelCurrent - 1)*0.5) * $(this).outerHeight());
// calculate origin percentages based on zoomed width and height
// the zoom methods rely on these variables to be set
zoomOriginPercX = (zoomOriginX / width * 100);
zoomOriginPercY = (zoomOriginY / height * 100);
});
The main purpose of this method is to correctly set the global variables zoomOriginPercX and zoomOriginPercY, which are used to set the origin (percentage) prior to zooming.
From a math perspective, my idea was to simply calculate the zoomed width of the image, and to use the offset X and Y to come to a reliable origin percentage. As the problem statement shows, I am quite close to a correct calculation, yet something is off.
Although the zooming currently works well, I want it to be perfect. It would make for quite a powerful image viewer that is really easy to implement, also for others.
Desired Effect
To start answering your question I think it's worth first clarifying the desired effect. Essentially you're looking for the same effect you'd get if you pinched to zoom on an iPhone - the 'origin' of the pinch stays exactly the same, and everything around it stretches. You can imagine pinning some stretchy fabric at the origin, and pulling the corners.
Problem
This is working fine for you if you don't move the mouse between zooms, but if you do, the origin appears to move. The cause of the problem is exactly that - you are changing the origin of the transform every time you move the mouse. Of course you do need to do this, but you are calculating the origin based on the original (100% zoomed) position of the image. The actual origin needs to be somewhere between the origin of the first zoom and the new mouse position.
In other words, CSS is just doing one transform. If you set the origin to x,y then zoom to zoom level 2, this will give the same result as if you set the origin to x2,y2, zoom to level 1, then move to x,y, and go to level 2.
Solutions
I presume you could solve the issue in several ways:
Calculate a scaling factor for the 'new' origin on each zoom
this is likely a function of zoom level, mouse position and previous origin
Calculate and apply a translation each time the origin is moved
again will depend on the current origin, zoom level and mouse position
Find another way to 'stack' transforms on top of one another.
One way to do this may be to dynamically generate a new containing div each time you and apply a scale transform to that similar to the accepted solution in this question.
Unfortunately I don't have the time to go further than this, but hopefully it points you in the right direction?
I have a rectangle of any arbitrary width and height. I know X,Y, width, and height. How do I solve the upper right hand coordinates when the rectangle is rotated N degrees? I realized if it were axis aligned I would simply solve for (x,y+width). Unforunatly this doesn't hold true when I apply a transform matrix on the rectangle to rotate it around its center.
It's usually easiest and fastest to let Flash's display code do these kinds of things for you. Create an empty Sprite and put it inside the rectangle's display object at the corner you want to track. Then, find the location of that sprite in the coordinate space of your choice:
var p:Point = new Point(0,0);
myRectangle.myCornerSprite.localToGlobal( p );
someDisplayObject.globalToLocal( p ); // for a coord space besides the stage
This gets you out of making any assumptions about the rectangle's design (i.e. registration point), and works even if the rectangle should be skewed or scaled as well as being rotated. Plus, this will be much easier to implement and maintain then a mess of cosines and whatnot.
(Note that the code above assumes that "upper right" refers to a specific corner - if you want to examine whichever corner happens to upper-rightmost at the moment, I'd simply add do the same thing with a sprite at all four corners, and pick whichever is to the upper right in global coords.)
You just have to calculate the point on a circle for the given radius. The center of your rectangle will be the circle's origin and any corner will be a point on the circle's circumference. You need to use trigonometry to calculate the new point using the rotation. I don't have time right now to explain all this, but here is a link to a decent 2D Javascript library I've used in the past and which should give you everything you need (bearing in mind that the math is virtually the same in Javascript and ActionScript) to work it out for yourself.
http://jsdraw2d.jsfiction.com/viewsourcecode.htm
I'm working on an application where I'm drawing some rectangles on the screen, and then will need to manipulate the shapes (change their size, location). I tried to do something with .drawRect and clearing the shape each time I was manipulating it, but the RAM usage was spiking and then falling (presumeably because i keep reinitializing a new component and then removing it, and garbage collection was cleaning it out). This seems like its probably not the most efficient way to do it.
Is there a way for me to just create a shape once, and then move it around on a canvas (and change its width and height without all this RAM usage?
If all you're doing is changing it's offsets, and adjusting it's width and height without needing to fundamentally change the structure of the shape (such as rounding the corners of a rectangle of some such) you should be able to just maintain a reference to the Shape and adjust it's x, y, scaleX, scaleY properties to effect the changes.
You can try Degrafa to draw the rectangle.
To move the rectangle:
Changing the x and y or height and width property of the shape
Using the Flex Move Effect