I am animating a UIView along a circle using a CAKeyframeAnimation that follows a CGPathAddEllipseInRect. However, the view always seems to start in the same place regardless of the frame it is originally positioned in. Is there some way to adjust the starting position of the view on the path?
Thanks!
CAKeyframeAnimation *myAnimation = [CAKeyframeAnimation animationWithKeyPath:#"position"];
myAnimation.fillMode = kCAFillModeForwards;
myAnimation.repeatCount = 5;
myAnimation.calculationMode = kCAAnimationPaced;
myAnimation.duration = 10.0;
CGMutablePathRef animationPath = CGPathCreateMutable();
CGPathAddEllipseInRect(animationPath, NULL, rect);
myAnimation.path = animationPath;
CGPathRelease(animationPath);
[view.layer addAnimation:myAnimation forKey:#"changeViewLocation"];
I don't think it's possible to set a start point for CGPathAddEllipseInRect. (At least i wasn't successful)
instead of using: CGPathAddEllipseInRect,
You should use: CGPathAddArc! For example:
CAKeyframeAnimation *myAnimation = [CAKeyframeAnimation animationWithKeyPath:#"position"];
myAnimation.fillMode = kCAFillModeForwards;
myAnimation.repeatCount = 5;
myAnimation.calculationMode = kCAAnimationPaced;
myAnimation.duration = 10.0;
CGMutablePathRef animationPath = CGPathCreateMutable();
NSInteger startVal = M_PI / 2;
//seventh value (end point) must be always 2*M_PI bigger for a full circle rotation
CCGPathAddArc(animationPath, NULL, 100, 100, 100, startVal, startVal + 2*M_PI, NO);
myAnimation.path = animationPath;
CGPathRelease(animationPath);
[view.layer addAnimation:myAnimation forKey:#"changeViewLocation"];
will rotate full circle starting from bottom - clockwise. Change startVal value to change rotation start position. (full rotation is 2*M_PI).
Previous answer is correct and works, but there should be
CGFloat startVal = M_PI / 2;
instead of
NSInteger startVal = M_PI / 2;
Otherwise, M_PI will be rounded to integer and you won't be able to achieve accurate angle.
P.S. has low reputation to comment the previous answer, sorry.
Related
In my simulator I am trying to check every pixel of an arc. There are fixed coordinated of the center ( x & y), radius and the angles of the arc (radius, currentAngle & newAngle), so I am able to fill it with color to represent it to user. But moreover I need to execute some actions over the covered pixels.
What I have tried is:
for (int i = 0; i < newAngle; i++)
for (int j = 0; j < radius; j++) {
Point point = new Point((int)(x + j * Math.cos(currentAngle - Math.toRadians(i))), (int)( y + j * Math.sin(currentAngle - Math.toRadians(i))));
check(point.x, point.y);
I thought it was fine to go changing angles and radiuses, however, as I understood later, many pixels are missed due to the fact that on the border of an arc every degree out of 360 contains more than 1 pixel.
I tried searching the web and found some ways to go through every pixel of the circle. Didn't manage to transform it into the arc pixels.
You can switch from polar coordinates to cartesian and iterate points belonging to segment:
double curCos = Math.cos(currentAngle);
double curSin = Math.sin(currentAngle);
double curTan = curSin/curCos;
double newCos = Math.cos(newAngle);
double newSin = Math.sin(newAngle);
double newTan = newSin/newCos;
double xMax = curCos*radius
double r2 = radius*radius
for(int i=0; i < xMax; i++) {
for(int j=curTan*x; j < newTan*x; j++) {
if(i*i + j*j > r2) {
continue;
}
Point point = new Point(x + i, y + j);
}
}
This code snippet covers only case when newAngle>currentAngle and whole segment lies in first quadrant (area where x>0 and y>0), but you can get the idea how to iterate points and how to generalize the solution for any angles combination.
You need to rasterize you arc - get all colored pixels in order. Famous Bresenham algorithm for circle is intended to do it. Just adapt it for drawing only needed part of the circle.
Yet another option - Midpoint circle algo
I'm trying to create loading bar for my game. I create basic rectangle and added to the stage and caluclated size acording to the number of files so I get fixed width. Everything works, but for every step (frame) it creates another rectangle, how do I get only one object?
this is my code:
function test(file) {
r_width = 500;
r_height = 20;
ratio = r_width / manifest.length;
if (file == 1) {
new_r_width = 0
// Draw
r = new createjs.Shape();
r_x = (width / 2) - (r_width / 2);
r_y = (height / 2) - (r_height / 2);
new_r_width += ratio;
r.graphics.beginFill("#222").drawRect(r_x, r_y, new_r_width, r_height);
stage.addChild(r);
} else {
stage.clear();
new_r_width += ratio;
r.graphics.beginFill("#" + file * 100).drawRect(r_x, r_y + file * 20, new_r_width, r_height);
stage.addChild(r);
}
stage.update();
}
https://space-clicker-c9-zoranf.c9.io/loading/
If you want to redraw the rectangle, you will have to clear the graphics first, and then ensure the stage is updated. In your code it looks like you are clearing the stage, which is automatically handled by the stage.update() unless you manually turn off updateOnTick.
There are some other approaches too. If you just use a rectangle, you can set the scaleX of the shape. Draw your rectangle at 100% of the size you want it at, and then scale it based on the progress (0-1).
r.scaleX = 0.5; // 50%
A new way that is supported (only in the NEXT version of EaselJS, newer than 0.7.1 in GitHub), you can save off the drawRect command, and modify it.
var r = new createjs.Shape();
r.graphics.beginFill("red");
var rectCommand = r.graphics.drawRect(0,0,100,10).command; // returns the command
// Later
rectCommand.w = 50; // Modify the width of the rectangle
Hope that helps!
At the moment I'm using the dot product of the mouse position and (0, 1) to generate radians to rotate an object, in three.js
Code below, works ok but the object 'jumps' because the radian angle skips from positive to negative when the clientX value goes between window.innerWidth / 2
onDocumentMouseMove : function(event) {
// rotate circle relative to current mouse pos
var oldPos = new THREE.Vector2(0, 1);
Template.Main.mouseCurrPos = new THREE.Vector2((event.clientX / window.innerWidth ) * 2 - 1, - (event.clientY / window.innerHeight) * 2 + 1);
Template.Main.mouseCurrPos.normalize();
//Template.Main.projector.unprojectVector(Template.Main.mouseCurrPos, Template.Main.scene);
var angle = oldPos.dot(Template.Main.mouseCurrPos);
Template.Main.mousePrevPos.x = event.clientX;
Template.Main.mousePrevPos.y = event.clientY;
if (event.clientX < window.innerWidth / 2) {
Template.Main.circle.rotation.z = -angle;
}
else {
Template.Main.circle.rotation.z = angle;
}
console.log(Template.Main.circle.rotation.z);
}
However if I add this to assign the value to oldPos:
if (event.clientX < window.innerWidth / 2) {
oldPos = new THREE.Vector2(0, -1);
}
else {
oldPos = new THREE.Vector2(0, 1);
}
Then the "jumping" goes but the effect of rotation is inverted when the mouse is on the left of the window.
I.e. mouse going up rotates anti-clockwise and vice-versa which is not desired.
It's frustrating.
Also if I keep the oldPos conditional assignment and leave out the conditional negation of the angle instead, the jumping comes back.
You can see a demo here: http://theworldmoves.me/rotation-demo/
Many thanks for any tips.
Why are you using the result of the dot product as the angle (radians)? The dot product gives you the cosine of the angle (times the magnitude of the vectors, but these are a unit vector and a normalized vector, so that doesn't matter).
You could change your angle computation to
var angle = Math.acos(oldPos.dot(Template.Main.mouseCurrPos));
However, you may get the wrong quadrant, since there can be two values of theta that satisfy cos(theta) = n. The usual way to get the angle of a vector (origin to mouse position) in the right quadrant is to use atan2():
var angle = Math.atan2(Template.Main.mouseCurrPos.y,
Template.Main.mouseCurrPos.x);
This should give the angle of the mouse position vector, going counterclockwise from (1, 0). A little experimentation can determine for sure where the zero angle is, and which direction is positive rotation.
I check CIVignette of Core Image Filter Reference at
http://developer.apple.com/library/mac/#documentation/graphicsimaging/reference/CoreImageFilterReference/Reference/reference.html#//apple_ref/doc/filter/ci/CIColorControls
and play around a with the parameters:
inputRadius
inputIntensity
and still have not exactly understood what each parameter effects. Could please someone explain?
Take a look at wiki understand what vignetting in photography means.
It is the fall of of light starting from the center of an image towards the corner.
Apple does not explain much about the the params.
obviously the radius specifies somehow where the vignetitting starts
the param intensity i expect to be how fast the light goes down after vignetting starts.
The radius may not be given in points, a value of 1.0 relates to your picture size.
Intensity is definitely something like 1 to 10 or larger number. 1 has some effects, 10 is rather dark already.
The radius seems to be in pixel (or points). I use a portion of image size (says 1/10th of width) and the effect is pretty good! However, if the intensity is strong (says 10), the radius can be small (like 1) and you can still see the different.
Turns out there is an attributes property on CIFilter that explains its properties and ranges.
let filter = CIFilter(name: "CIVignette")!
print("\(filter.attributes)")
Generates the following output:
[
"CIAttributeFilterDisplayName": Vignette,
"CIAttributeFilterCategories": <__NSArrayI 0x6000037020c0>(
CICategoryColorEffect,
CICategoryVideo,
CICategoryInterlaced,
CICategoryStillImage,
CICategoryBuiltIn
),
"inputRadius": {
CIAttributeClass = NSNumber;
CIAttributeDefault = 1;
CIAttributeDescription = "The distance from the center of the effect.";
CIAttributeDisplayName = Radius;
CIAttributeMax = 2;
CIAttributeMin = 0;
CIAttributeSliderMax = 2;
CIAttributeSliderMin = 0;
CIAttributeType = CIAttributeTypeScalar;
},
"CIAttributeFilterName": CIVignette,
"inputImage": {
CIAttributeClass = CIImage;
CIAttributeDescription = "The image to use as an input image. For filters that also use a background image, this is the foreground image.";
CIAttributeDisplayName = Image;
CIAttributeType = CIAttributeTypeImage;
},
"inputIntensity": {
CIAttributeClass = NSNumber;
CIAttributeDefault = 0;
CIAttributeDescription = "The intensity of the effect.";
CIAttributeDisplayName = Intensity;
CIAttributeIdentity = 0;
CIAttributeMax = 1;
CIAttributeMin = "-1";
CIAttributeSliderMax = 1;
CIAttributeSliderMin = "-1";
CIAttributeType = CIAttributeTypeScalar;
},
"CIAttributeFilterAvailable_Mac": 10.9,
"CIAttributeFilterAvailable_iOS": 5,
"CIAttributeReferenceDocumentation": http://developer.apple.com/library/ios/documentation/GraphicsImaging/Reference/CoreImageFilterReference/index.html#//apple_ref/doc/filter/ci/CIVignette
]
inputRadius is a float between 0 and 2 that affects the 'size' of the shadow.
inputIntensity is a float between -1 and 1 that affects the 'darkness' of the filter.
I am currently working on a simple Silverlight app that will allow people to upload an image, crop, resize and rotate it and then load it via a webservice to a CMS.
Cropping and resizing is done, however rotation is causing some problems. The image gets cropped and is off centre after the rotation.
WriteableBitmap wb = new WriteableBitmap(destWidth, destHeight);
RotateTransform rt = new RotateTransform();
rt.Angle = 90;
rt.CenterX = width/2;
rt.CenterY = height/2;
//Draw to the Writeable Bitmap
Image tempImage2 = new Image();
tempImage2.Width = width;
tempImage2.Height = height;
tempImage2.Source = rawImage;
wb.Render(tempImage2,rt);
wb.Invalidate();
rawImage = wb;
message.Text = "h:" + rawImage.PixelHeight.ToString();
message.Text += ":w:" + rawImage.PixelWidth.ToString();
//Finally set the Image back
MyImage.Source = wb;
MyImage.Width = destWidth;
MyImage.Height = destHeight;
The code above only needs to rotate by 90° at this time so I'm just setting destWidth and destHeight to the height and width of the original image.
It looks like your target image is the same size as your source image. If you want to rotate over 90 degrees, your width and height should be exchanged:
WriteableBitmap wb = new WriteableBitmap(destHeight, destWidth);
Also, if you rotate about the centre of the original image, part of it will end up outside the boundaries. You could either include some translation transforms, or simply rotate the image about a different point:
rt.CenterX = rt.CenterY = Math.Min(width / 2, height / 2);
Try it with a piece of rectangular paper to see why that makes sense.
Many thanks to those above.. they helped a lot. I include here a simple example which includes the additional transform necessary to move the rotated image back to the top left corner of the result.
int width = currentImage.PixelWidth;
int height = currentImage.PixelHeight;
int full = Math.Max(width, height);
Image tempImage2 = new Image();
tempImage2.Width = full;
tempImage2.Height = full;
tempImage2.Source = currentImage;
// New bitmap has swapped width/height
WriteableBitmap wb1 = new WriteableBitmap(height,width);
TransformGroup transformGroup = new TransformGroup();
// Rotate around centre
RotateTransform rotate = new RotateTransform();
rotate.Angle = 90;
rotate.CenterX = full/2;
rotate.CenterY = full/2;
transformGroup.Children.Add(rotate);
// and transform back to top left corner of new image
TranslateTransform translate = new TranslateTransform();
translate.X = -(full - height) / 2;
translate.Y = -(full - width) / 2;
transformGroup.Children.Add(translate);
wb1.Render(tempImage2, transformGroup);
wb1.Invalidate();
If the image isn't square you will get cropping.
I know this won't give you exactly the right result, you'll need to crop it afterwards, but it will create a bitmap big enough in each direction to take the rotated image.
//Draw to the Writeable Bitmap
Image tempImage2 = new Image();
tempImage2.Width = Math.Max(width, height);
tempImage2.Height = Math.Max(width, height);
tempImage2.Source = rawImage;
You need to calculate the scaling based on the rotation of the corners relative to the centre.
If the image is a square only one corner is needed, but for a rectangle you need to check 2 corners in order to see if a vertical or horizontal edge is overlapped. This check is a linear comparison of how much the rectangle's height and width are exceeded.
Click here for the working testbed app created for this answer (image below):
double CalculateConstraintScale(double rotation, int pixelWidth, int pixelHeight)
The pseudo-code is as follows (actual C# code at the end):
Convert rotation angle into Radians
Calculate the "radius" from the rectangle centre to a corner
Convert BR corner position to polar coordinates
Convert BL corner position to polar coordinates
Apply the rotation to both polar coordinates
Convert the new positions back to Cartesian coordinates (ABS value)
Find the largest of the 2 horizontal positions
Find the largest of the 2 vertical positions
Calculate the delta change for horizontal size
Calculate the delta change for vertical size
Return width/2 / x if horizontal change is greater
Return height/2 / y if vertical change is greater
The result is a multiplier that will scale the image down to fit the original rectangle regardless of rotation.
**Note: While it is possible to do much of the maths using matrix operations, there are not enough calculations to warrant that. I also thought it would make a better example from first-principles.*
C# Code:
/// <summary>
/// Calculate the scaling required to fit a rectangle into a rotation of that same rectangle
/// </summary>
/// <param name="rotation">Rotation in degrees</param>
/// <param name="pixelWidth">Width in pixels</param>
/// <param name="pixelHeight">Height in pixels</param>
/// <returns>A scaling value between 1 and 0</returns>
/// <remarks>Released to the public domain 2011 - David Johnston (HiTech Magic Ltd)</remarks>
private double CalculateConstraintScale(double rotation, int pixelWidth, int pixelHeight)
{
// Convert angle to radians for the math lib
double rotationRadians = rotation * PiDiv180;
// Centre is half the width and height
double width = pixelWidth / 2.0;
double height = pixelHeight / 2.0;
double radius = Math.Sqrt(width * width + height * height);
// Convert BR corner into polar coordinates
double angle = Math.Atan(height / width);
// Now create the matching BL corner in polar coordinates
double angle2 = Math.Atan(height / -width);
// Apply the rotation to the points
angle += rotationRadians;
angle2 += rotationRadians;
// Convert back to rectangular coordinate
double x = Math.Abs(radius * Math.Cos(angle));
double y = Math.Abs(radius * Math.Sin(angle));
double x2 = Math.Abs(radius * Math.Cos(angle2));
double y2 = Math.Abs(radius * Math.Sin(angle2));
// Find the largest extents in X & Y
x = Math.Max(x, x2);
y = Math.Max(y, y2);
// Find the largest change (pixel, not ratio)
double deltaX = x - width;
double deltaY = y - height;
// Return the ratio that will bring the largest change into the region
return (deltaX > deltaY) ? width / x : height / y;
}
Example of use:
private WriteableBitmap GenerateConstrainedBitmap(BitmapImage sourceImage, int pixelWidth, int pixelHeight, double rotation)
{
double scale = CalculateConstraintScale(rotation, pixelWidth, pixelHeight);
// Create a transform to render the image rotated and scaled
var transform = new TransformGroup();
var rt = new RotateTransform()
{
Angle = rotation,
CenterX = (pixelWidth / 2.0),
CenterY = (pixelHeight / 2.0)
};
transform.Children.Add(rt);
var st = new ScaleTransform()
{
ScaleX = scale,
ScaleY = scale,
CenterX = (pixelWidth / 2.0),
CenterY = (pixelHeight / 2.0)
};
transform.Children.Add(st);
// Resize to specified target size
var tempImage = new Image()
{
Stretch = Stretch.Fill,
Width = pixelWidth,
Height = pixelHeight,
Source = sourceImage,
};
tempImage.UpdateLayout();
// Render to a writeable bitmap
var writeableBitmap = new WriteableBitmap(pixelWidth, pixelHeight);
writeableBitmap.Render(tempImage, transform);
writeableBitmap.Invalidate();
return writeableBitmap;
}
I released a Test-bed of the code on my website so you can try it for real - click to try it
P.S. Yes this is my answer from another question, duplicated exactly, but the question does require the same answer as that one to be complete.