Here is what I have right now with me.This gives me absolute position in pixels
$(this).css({
"left" : ($(this).width() + 5) * (index % 4),
"top" : ($(this).height() + 5) * Math.floor(index / 4)
});
I want this to give the positions in percentage relative to the screen size.
Please help.
Jquery will not return the value in %.
It will always return in px.
So, to get the value in %, you can divide the value with either the top most node [1st parent in dom]
parseFloat($(this).width() / $('#idOfFirstParent').width()) * 100;
, if you want to get the value in reference to the 1st parent in the DOM or by width of the document [this will start with 0,0 of your screen].
(parseFloat($(this).width() / $('window').width()) * 100).toFixed(2);
or
(parseFloat($(this).width() / $('document').width()) * 100).toFixed(2);
Just do a simple calculation using $(window). For example to get the width of the item as a percentage of the window:
var percW = Math.floor(($(this).width / $(window).width()) * 100);
Related
assuming the canvas size is (wx,wy), the exact coordinates of the vertex lower and left is (-1 + 1/wx , -1 + 1/wy).
But when the pointSize is bigger than 1, i dont managed to find a formula.
in this fiddle, https://jsfiddle.net/3u26rpf0/14/ i draw some pixels of size=1 with the following formula for gl_Position :
float p1 = -1.0 + (2.0 * a_position.x + 1.0) / wx ;
float p2 = -1.0 + (2.0 * a_position.y + 1.0) / wy ;
gl_Position=vec4(p1,p2,0.0,1.0);
a_position.x goes from 0 to wx-1 .
a_position.y goes from 0 to wy-1 .
but if you change the value of size in the vertex (see fiddle link)
my formula doesn't work, there is some offset to put.
From the OpenGL ES 2.0 spec section 3.3
Point rasterization produces a fragment for each framebuffer pixel whose center
lies inside a square centered at the point’s (xw, yw), with side length equal to
the point size
I need to get the width and height of an image within a frame. Both the frame and image use the Scale property instead of the Offset property to set the size. I have an UIAspectRatioConstraint on the frame that the image is in. Everything scales with the screen size just fine.
However, I need to be able to get the current width/height of the image (or the frame) so that I can perform some math functions in order to move a marker over the image to a specific position (X, Y). I cannot get the size of the image/frame, and therefore cannot update the position.
Is there a way to get the currently rendered width of an image or frame that is using the Scale size options with the UIAspectRatioConstraint?
I'm sleepy. I hope this makes sense...
My current math for getting a position on another image that uses Offset instead of Size is:
local _x = (_miniMapImageSize.X.Offset / _worldCenterSize.X) * (_playerPos.X - _worldCenterPos.X) + (_miniMapFrameSize.X.Offset / 2)
local _y = (_miniMapImageSize.Y.Offset / _worldCenterSize.Z) * (_playerPos.Z - _worldCenterPos.Z) + (_miniMapFrameSize.Y.Offset / 2)
Which gives me the player position within my mini-map. But that doesn't scale. The actual map does, and I need to position the player's marker on that map as well.
Work-Around
For now (for anyone else looking for a solution), I have created a work-around. I now specify my actual image size:
local _mapSize = Vector2.new(814, 659)
Then I use the screen width and height to decide if I need to scale based off the x-axis or the y-axis. (Scale my math formula, not the image.)
if (_mouse.ViewSizeX / _mouse.ViewSizeY) - (_mapSize.X / _mapSize.Y) <= 0 then
-- If the width of the screen is at the same or smaller ratio with the height of the screen
-- then calculate the new size based off the width
local _smallerByPercent = (_mouse.ViewSizeX * 0.9) / _mapSize.X
_mapWidth = _mapSize.X * _smallerByPercent
mapHeight = _mapSize.Y * _smallerByPercent
else
local _smallerByPercent = (_mouse.ViewSizeY * 0.9) / _mapSize.Y
_mapWidth = _mapSize.X * _smallerByPercent
_mapHeight = _mapSize.Y * _smallerByPercent
end
After that, I can create the position for my marker on my map.
_x = ((_mapWidth / _worldCenterSize.X) * (_playerPos.X - _worldCenterPos.X)) * -1
_y = ((_mapHeight / _worldCenterSize.Z) * (_playerPos.Z - _worldCenterPos.Z)) * -1
_mapCharacterArrow.Position = UDim2.new(0.5, _x, 0.5, _y)
Now my marker is able to be placed where my character is within the larger map opened when I press "M".
HOWEVER
I would still love to know of a way to get the rendered/displayed image size... I was trying to make it to where I did not have to enter the image size into the script manually. I want it to be dynamic.
So it seems there is a property of most GUI elements called AbsoluteSize. This is the actual display size of the element, no matter what it is scaled to. (It is not that it stays the same when scaled, but it changes as it is scaled to give you the new size.)
With this, I was able to re-write my code to:
local _x = (_mapImageSize.X / _worldCenterSize.X) * (_playerPos.X - _worldCenterPos.X) * -1
local _y = (_mapImageSize.Y / _worldCenterSize.Z) * (_playerPos.Z - _worldCenterPos.Z) * -1
_mapCharacterArrow.Position = UDim2.new(0.5, _x, 0.5, _y)
Where _mapImageSize = [my map image].AbsoluteSize.
Much better than before.
I am learning how to make a Julia Set fractal. I am using this as a reference.
I know the math theory behind it very well. I can compute it manually, too. However, what I do not understand is how it is being done in the program mentioned in the reference.
The author has certain variables that determine the zoom and displacement and he performs some calculations on it.
Can someone please explain what they are ?
Let's take a look at this line (the one below it works the same way):
newRe = (x - w / 2) / (0.5 * zoom * w) + moveX;
(Ignore the lack of 1.5 factor, that's just there to make sure it doesn't look "squished.")
It's in a for loop that assigns values between 0 and w to x.[1] So the leftmost and rightmost newRe values are going to be:
Leftmost:
newRe = (0 - w / 2) / (0.5 * zoom * w) + moveX;
= -(w / 2) / w / 0.5 / zoom + moveX;
= -(1 / 2) / 0.5 / zoom + moveX;
= -1 / zoom + moveX;
Rightmost:
newRe = (w - w / 2) / (0.5 * zoom * w) + moveX;
= (w / 2) / w / 0.5 / zoom + moveX;
= (1 / 2) / 0.5 / zoom + moveX;
= 1 / zoom + moveX;
Their difference -- that is, the width of the actual rectangle of the Julia fractal being displayed -- is equal to:
(1 / zoom + moveX) - (-1 / zoom + moveX)
= (1 / zoom) - (-1 / zoom)
= 2 / zoom
(This whole calculation also works for newIm, h, and moveY.)
This is why increasing zoom causes the rectangle we're examining to shrink -- which is exactly what "zooming in" is.
[1] It actually only goes to w-1, but that one-pixel difference makes this calculation a whole lot more difficult.
I want to show the tooltip on the right side of the cursor.
I looked in the documentation/examples but I can't find a way to force the tooltips to stay on the right side of the cursor.
Can anyone tell me how to do it?
With tooltip positioner I only can set a default position.
Tooltip positioner is much more than just default position. The function arguments contain info about your point position & tooltip dimensions, using which it should be fairly simple to position it to the right.
Highchart/stock allows you to define your alternate positioner as follows
tooltip:{
positioner:function(boxWidth, boxHeight, point){
...
}
}
Note that you have three arguments (boxWidth, boxHeight, point) at your disposal, these seem to be sufficient for most of the use cases to calculate a desired tooltip position. boxWidth and boxHeight are the width and height that your tooltip will require, hence you can use them for edge cases to adjust your tooltip and prevent it from spilling out of the chart or even worse getting clipped.
The default tooltip positioner that comes with highstock is as follows (Source)
/**
* Place the tooltip in a chart without spilling over
* and not covering the point it self.
*/
getPosition: function (boxWidth, boxHeight, point) {
// Set up the variables
var chart = this.chart,
plotLeft = chart.plotLeft,
plotTop = chart.plotTop,
plotWidth = chart.plotWidth,
plotHeight = chart.plotHeight,
distance = pick(this.options.distance, 12), // You can use a number directly here, as you may not be able to use pick, as its an internal highchart function
pointX = point.plotX,
pointY = point.plotY,
x = pointX + plotLeft + (chart.inverted ? distance : -boxWidth - distance),
y = pointY - boxHeight + plotTop + 15, // 15 means the point is 15 pixels up from the bottom of the tooltip
alignedRight;
// It is too far to the left, adjust it
if (x < 7) {
x = plotLeft + pointX + distance;
}
// Test to see if the tooltip is too far to the right,
// if it is, move it back to be inside and then up to not cover the point.
if ((x + boxWidth) > (plotLeft + plotWidth)) {
x -= (x + boxWidth) - (plotLeft + plotWidth);
y = pointY - boxHeight + plotTop - distance;
alignedRight = true;
}
// If it is now above the plot area, align it to the top of the plot area
if (y < plotTop + 5) {
y = plotTop + 5;
// If the tooltip is still covering the point, move it below instead
if (alignedRight && pointY >= y && pointY <= (y + boxHeight)) {
y = pointY + plotTop + distance; // below
}
}
// Now if the tooltip is below the chart, move it up. It's better to cover the
// point than to disappear outside the chart. #834.
if (y + boxHeight > plotTop + plotHeight) {
y = mathMax(plotTop, plotTop + plotHeight - boxHeight - distance); // below
}
return {x: x, y: y};
}
With all the above information, I think you have sufficient tools to implement your requirement by simply modifying the function to make float to right instead of the default left.
I will go ahead and give you the simplest implementation of positioning tooltip to right, you should be able to implement the edge cases based on the aftermentioned default tooltip positioner's code
tooltip: {
positioner: function(boxWidth, boxHeight, point) {
return {x:point.plotX + 20,y:point.plotY};
}
}
Read more # Customizing Highcharts - Tooltip positioning
The better solution to get your tooltip always on the right side of the cursor is the following:
function (labelWidth, labelHeight, point) {
return {
x: point.plotX + labelWidth / 2 + 20,
y: point.plotY + labelHeight / 2
};
}
I am attempting to simply make objects orbit around a center point, e.g.
The green and blue objects represent objects which should keep their distance to the center point, while rotating, based on an angle which I pass into method.
I have attempted to create a function, in objective-c, but it doesn't work right without a static number. e.g. (It rotates around the center, but not from the true starting point or distance from the object.)
-(void) rotateGear: (UIImageView*) view heading:(int)heading
{
// int distanceX = 160 - view.frame.origin.x;
// int distanceY = 240 - view.frame.origin.y;
float x = 160 - view.image.size.width / 2 + (50 * cos(heading * (M_PI / 180)));
float y = 240 - view.image.size.height / 2 + (50 * sin(heading * (M_PI / 180)));
view.frame = CGRectMake(x, y, view.image.size.width, view.image.size.height);
}
My magic numbers 160, and 240 are the center of the canvas in which I'm drawing the images onto. 50 is a static number (and the problem), which allows the function to work partially correctly -- without maintaining the starting poisition of the object or correct distance. I don't know what to put here unfortunately.
heading is a parameter that passes in a degree, from 0 to 359. It is calculated by a timer and increments outside of this class.
Essentially what I would like to be able to drop any image onto my canvas, and based on the starting point of the image, it would rotate around the center of my circle. This means, if I were to drop an image at Point (10,10), the distance to the center of the circle would persist, using (10,10) as a starting point. The object would rotate 360 degrees around the center, and reach it's original starting point.
The expected result would be to pass for instance (10,10) into the method, based off of zero degrees, and get back out, (15,25) (not real) at 5 degrees.
I know this is very simple (and this problem description is entirely overkill), but I'm going cross eyed trying to figure out where I'm hosing things up. I don't care about what language examples you use, if any. I'll be able to decipher your meanings.
Failure Update
I've gotten farther, but I still cannot get the right calculation. My new code looks like the following:
heading is set to 1 degree.
-(void) rotateGear: (UIImageView*) view heading:(int)heading
{
float y1 = view.frame.origin.y + (view.frame.size.height/2); // 152
float x1 = view.frame.origin.x + (view.frame.size.width/2); // 140.5
float radius = sqrtf(powf(160 - x1 ,2.0f) + powf(240 - y1, 2.0f)); // 90.13
// I know that I need to calculate 90.13 pixels from my center, at 1 degree.
float x = 160 + radius * (cos(heading * (M_PI / 180.0f))); // 250.12
float y = 240 + radius * (sin(heading * (M_PI / 180.0f))); // 241.57
// The numbers are very skewed.
view.frame = CGRectMake(x, y, view.image.size.width, view.image.size.height);
}
I'm getting results that are no where close to where the point should be. The problem is with the assignment of x and y. Where am I going wrong?
You can find the distance of the point from the centre pretty easily:
radius = sqrt((160 - x)^2 + (240 - y)^2)
where (x, y) is the initial position of the centre of your object. Then just replace 50 by the radius.
http://en.wikipedia.org/wiki/Pythagorean_theorem
You can then figure out the initial angle using trigonometry (tan = opposite / adjacent, so draw a right-angled triangle using the centre mass and the centre of your orbiting object to visualize this):
angle = arctan((y - 240) / (x - 160))
if x > 160, or:
angle = arctan((y - 240) / (x - 160)) + 180
if x < 160
http://en.wikipedia.org/wiki/Inverse_trigonometric_functions
Edit: bear in mind I don't actually know any Objective-C but this is basically what I think you should do (you should be able to translate this to correct Obj-C pretty easily, this is just for demonstration):
// Your object gets created here somewhere
float x1 = view.frame.origin.x + (view.frame.size.width/2); // 140.5
float y1 = view.frame.origin.y + (view.frame.size.height/2); // 152
float radius = sqrtf(powf(160 - x1 ,2.0f) + powf(240 - y1, 2.0f)); // 90.13
// Calculate the initial angle here, as per the first part of my answer
float initialAngle = atan((y1 - 240) / (x1 - 160)) * 180.0f / M_PI;
if(x1 < 160)
initialAngle += 180;
// Calculate the adjustment we need to add to heading
int adjustment = (int)(initialAngle - heading);
So we only execute the code above once (when the object gets created). We need to remember radius and adjustment for later. Then we alter rotateGear to take an angle and a radius as inputs instead of heading (this is much more flexible anyway):
-(void) rotateGear: (UIImageView*) view radius:(float)radius angle:(int)angle
{
float x = 160 + radius * (cos(angle * (M_PI / 180.0f)));
float y = 240 + radius * (sin(angle * (M_PI / 180.0f)));
// The numbers are very skewed.
view.frame = CGRectMake(x, y, view.image.size.width, view.image.size.height);
}
And each time we want to update the position we make a call like this:
[objectName rotateGear radius:radius angle:(adjustment + heading)];
Btw, once you manage to get this working, I'd strongly recommend converting all your angles so you're using radians all the way through, it makes it much neater/easier to follow!
The formula for x and y coordinates of a point on a circle, based on radians, radius, and center point:
x = cos(angle) * radius + center_x
y = sin(angle) * radius + center_y
You can find the radius with HappyPixel's formula.
Once you figure out the radius and the center point, you can simply vary the angle to get all the points on the circle that you'd want.
If I understand correctly, you want to do InitObject(x,y). followed by UpdateObject(angle) where angle sweeps from 0 to 360. (But use radians instead of degrees for the math)
So you need to track the angle and radius for each object.:
InitObject(x,y)
relative_x = x-center.x
relative_y = y-center.y
object.radius = sqrt((relative_x)^2, (relative_y)^2)
object.initial_angle = atan(relative_y,relative_x);
And
UpdateObject(angle)
newangle = (object.initial_angle + angle) % (2*PI )
object.x = cos(newangle) * object.radius + center.x
object.y = sin(newangle) * object.radius + center.y
dx=dropx-centerx; //target-source
dy=-(dropy-centery); //minus = invert screen coords to cartesian coords
radius=sqrt(dy*dy+dx*dx); //faster if your compiler optimizer is bad
if dx=0 then dx=0.000001; //hackpatchfudgenudge*
angle=atan(dy/dx); //set this as start angle for the angle-incrementer
Then go with the code you have and you'll be fine. You seem to be calculating radius from current position each time though? This, like the angle, should only be done once, when the object is dropped, or else the radius might not be constant.
*instead of handling 3 special cases for dx=0, if you need < 1/100 degree precision for the start angle go with those instead, google Polar Arctan.