Long story short I want draw a diagonal grid on CALayerShape. My code instead of straight lines produces some kind of curved craziness. It looks very interesting and I wish it would be desired effect, but no, it's not.
My questions:
1. How can I draw straight lines using CAShapeLayer?
2. Did I discover some kind of black hole that affects gravity of pixels in my simulator?
func drawPath(_view:UIView, phase:CGFloat, segment:CGFloat){
// we need two runs
var height = CGRectGetHeight(view.frame)
let width = CGRectGetWidth(view.frame)
let segment:CGFloat = 40
var currentX:CGFloat = segment
var cgpath = CGPathCreateMutable()
for var y = height; y > 0 ; y = y - segment {
CGPathMoveToPoint(cgpath, nil, 0, y)
CGPathAddLineToPoint(cgpath, nil, currentX, 0)
CGPathCloseSubpath(cgpath)
currentX += segment
}
var layer = CAShapeLayer()
layer.path = cgpath
layer.strokeColor = UIColor.redColor().CGColor
layer.lineWidth = 1
layer.fillColor = UIColor.blackColor().CGColor
view.layer.addSublayer(layer)
}
What you've drawn is actually straight lines. The fact that it looks curved is an optical illusion. You can get this same effect with yarn and a piece of cardboard.
Your code is doing the wrong thing.
You need to map out the diagonal grid you want with graph paper, figure out the endpoints of your diagonal grid, and then come up with a loop that gives you those endpoints.
If you want to draw a diagonal grid in a 5x5 rectangle you'd draw lines like this:
0,1 to 1,0
0,2 to 2,0
0,3 to 3,0
0,4 to 4,0
Your grid spacing is probably more like 20 or 30 points than every point, and your whole grid is probably the full size of the screen, but you get the idea.
Related
I have this on github: https://github.com/evertoncunha/EPCSpinnerView
It does this animations:
There is a glitch in the animation, when the circle is filling and the view is resizing, and I wan't to fix that.
The glitch happens because the way I fill the circle by setting the layer corners, so it looks like a circle, and I increase the lineWidth with the animation progress, and it looks likes it's filling from outside in. From EPCDrawnIconSpinner.swift file:
let ovalPath = UIBezierPath()
ovalPath.addArc(withCenter: CGPoint(x: ovalRect.midX, y: ovalRect.midY),
radius: ovalRect.width / 2,
startAngle: start * CGFloat.pi/180,
endAngle: end * CGFloat.pi/180, clockwise: true)
layer.cornerRadius = rect.size.height/2
ovalPath.lineWidth = 14 + ((frame.size.width) * progress)
Is there a better way that I can achieve this animation without doing the layer cornerRadius thing? If I could only draw this
I can think of two ways to get away from using cornerRadius:
Use a mask to round the corners, and use a shape layer to fill
You can create a CAShapeLayer of a filled circle, and with a frame set to your view's bounds, then assign it to your layer's mask property. You can animate the size of this mask as you animate the size of your view. Secondly, you will need to create an additional shape later (probably similar to your spinning circle), and do the line width animation on this layer. The mask will ensure that the line does not grow outwards, but only inwards.
Animate the line width and radius of the fill shape
You will need to create a circle shape layer similar to the one described in the first option, but instead of just animating the line width, you'll also need to animate the radius. For example: Let's say your view size is 40x40. Of course, at the start of the fill animation, your shape layer will also need to be 40x40. You will then animate the line width to 20pts, and animate the radius of the circle from 20pts to 10pts. A circle with a radius of 10pts and a line width of 20pts will appear to be a filled circle with a radius of 20pts.
Hope this helps.
I ended up with the following solution:
fileprivate func drawPathCompleted(_ ovalRect: CGRect) {
var size: CGFloat = ovalRect.size.width
var current = size*(1-progress)
var pos: CGFloat = lineWidth/2
while size > current {
let ovalPath = UIBezierPath(ovalIn: CGRect(x: pos, y: pos, width: size, height: size))
ovalPath.lineCapStyle = .round
ovalPath.lineWidth = lineWidth
ovalPath.stroke()
let decr = lineWidth/2
size -= decr
pos += decr/2
}
}
At this commit, line 243:
https://github.com/evertoncunha/EPCSpinnerView/commit/87d968846d92aa97e85ff4c58b6664ad7b03f00b#diff-8dc22814328ed859a00acfcf2909854bR242
I'm trying to create a paper folding effect in Swift using CALayers and CATransform3DRotate. There are some libraries out there, but those are pretty outdated and don't fit my needs (they don't have symmetric folds, for example).
My content view controller will squeeze to the right half side of the screen, revealing the menu at the left side.
Everything went well, until I applied perspective: then the dimensions I calculate are not correct anymore.
To explain the problem, I created a demo to show you what I'm doing.
This the content view controller with three squares. I will use three folds, so each square will be on a separate fold.
The even folds will get anchor point (0, 0.5) and the odd folds will get anchor point (1, 0.5), plus they'll receive a shadow.
When fully folded, the content view will be half of the screen's width.
On an iPhone 7, each fold/plane will be 125 points unfolded and 62.5 points fully folded when looked at.
To calculate the rotation needed to achieve this 62.5 points width, we can use a trigonometric function. To illustrate, look at this top-down view:
We know the original plane size (125) and the 2D width (62.5), so we can calculate the angle α using arccos:
let angle = acos(width / originalWidth)
The result is 1.04719755 rad or 60 degrees.
When using this formula with CATransform3DRotate, I get the correct result:
Now for the problem: when I add perspective, my calculation isn't correct anymore. The planes are bigger. Probably because of the now different projection.
You can see the planes are now overlapping and being clipped.
I reconstructed the desired result on the right by playing with the angle, but the correction needed is not consistent, unfortunately.
Here's the code I use. It works perfectly without perspective.
// Loop layers
for i in 0..<self.layers.count {
// Get layer
let layer = self.layers[i]
// Get dimensions
let width = self.frame.size.width / CGFloat(self.numberOfFolds)
let originalWidth = self.sourceView.frame.size.width / CGFloat(self.numberOfFolds)
// Calculate angle
let angle = acos(width / originalWidth)
// Set transform
layer.transform = CATransform3DIdentity
layer.transform.m34 = 1.0 / -500
layer.transform = CATransform3DRotate(layer.transform, angle * (i % 2 == 0 ? -1 : 1), 0, 1, 0)
// Update position
if i % 2 == 0 {
layer.position = CGPoint(x: (width * CGFloat(i)), y: layer.position.y)
} else {
layer.position = CGPoint(x: (width * CGFloat(i + 1)), y: layer.position.y)
}
}
So my question is: how do I achieve the desired result? Do I need to correct the angle, or should I calculate the projected/2D width differently?
Thanks in advance! :)
I have an angle that I am calculating based on the positioning of a view from the centre of the screen. I need a way to move the view from it's current position, off the screen in the direction of the angle.
I'm sure there is a fairly simple way of calculating a new x and y value, but I haven't been able to figure out the maths. I want to do it using an animation, but I can figure that out myself once I have the coordinates.
Anyone have any suggestions?
If you have angle you can calculate new coordinates by getting sine and cosine values. You can try out following code
let pathLength = 50 as Double // total distance view should move
let piFactor = M_PI / 180
let angle = 90 as Double // direction in which you need to move it
let xCoord = outView.frame.origin.x + CGFloat(pathLength * sin(piFactor*angle)) //outView is name of view you want to animate
let yCoord = outView.frame.origin.y + CGFloat(pathLength * cos(piFactor*angle))
UIView.animateWithDuration(1, delay: 0, options: UIViewAnimationOptions.CurveEaseInOut, animations: { () -> Void in
self.outView.frame = CGRectMake(xCoord, yCoord, self.outView.frame.size.width, self.outView.frame.size.height)
}, completion: { (Bool) -> Void in
})
To me it sounds what you need to do is convert a vector from polar representation (angle and radius) to cartesian representation (x and y coordinates) which should be fairly easy.
You already got the angle so you only need to get the radius, which is the length of the vector. In you case (if I understand it correctly) is the distance from the current center of the view that needs to be animated to it's new position. While it may be complex to know that exactly (cause this part of what you are trying to calculate) you can go on the safe side and take a large enough value that will surely throw the view out of its super view frame. The length of the superview diagonal plus the length of the animated view diagonal should do the work, or even more simple just take the sum of the height and width of both views.
Once you have the complete polar representation of the vector (angle and radius) you can use that simple formula to convert to cartesian representation (x = r * cos(a), y = r * sin(a)) and finally add that vector coordinates to the center of the view you need to animate.
I am trying to find a way to create a random closed smooth path (CGPath or UIBezierPath). I have read about the De Casteljau's algorithm and tons other articles about Bezier paths but it does not seem to fit to what I try to achieve.
I thought about creating a circle CGPath. Then I would multiplicate the path by a function that would distort the positions of the points say, sine or cosine. However I don't know if this is the right direction to go since the path would not have a random shape.
CGMutablePathRef circle = CGPathCreateMutable();
CGPathAddArc(circle, nil, 0.0f, 0.0f, 100.0f, 2 * M_PI, 0.0f, true);
...
CGPathRelease(circle);
It would be great if anyone could point me in a right direction how to start implementing it. Example of a path I am trying to generate:
What you've drawn looks like a distorted circle.
Assuming that's what you are after, here is what I would do:
Write code that steps an angle from 0 to 2pi by a fixed number of steps. (Try 8) Have the angle vary by some small random amount less than ± pi/steps.
Pick a base radius that is somewhat less than 1/2 the length of a side of the enclosing square, so there is room to make your points go inside or outside the base radius without going outside your bounding square. Try 3/8 of your bounding box length.
For each slightly randomized angle value along the circle, calculate a radius value that is base radius ± a random value from 0 to base radius/2.
Use sine and cosine to convert your angle and radius values into x and y coordinates for a point.
Add each point to an array. If you use those points to create a closed path, it would give you an 8-sided irregular non-selfintersecting polygon that is a distorted circle.
Now use those points as the control points for a Catmull-Rom spline to turn it into a smooth curve.
EDIT: I created a project on github called RandomBlobs that does what I describe above, as well as another approach:
Break the square area into a 3x3 grid of smaller squares. Ignore the center square.
Walk around the 8 remaining squares clockwise. For each square, pick a random x/y coorindate inside the square (but prevent it from getting too close to the edges.)
Create closed UIBezierPath connecting the 8 points in order.
Use Catmull-Rom smoothing to turn the irregular octagon into a smooth curve.
Yet a third approach would probably be even simpler:
Use a circular layout like in the first approach outlined above. Pick random control points. But then instead of using Catmull-Rom splines, bisect the angle between each pair of endpoints on the distorted circle and add a control point for a quadratic Bezier curve, also with a randomized radius value. So as you walk around the circle, you'd have alternating endpoints and control points. You might need to add some constraints to the bezier control points so you don't have "kinks" in your curved shape (In order to avoid kinks, the control points for neighboring Bezier curves need to follow a line through the shared end-point of the two curves.)
Here are a couple of sample images from the RandomBlobs project. The images I've uploaded are scaled down. The program optionally shows the control points it uses to generate each image, but you can't really see the control points in the scaled-down image.
First, a circle-based blob (using the first method that Josh Caswell and I suggested):
In that picture, the starting circle shape is shown in light gray:
And second, a blob based on the second square-based technique I described:
And in that picture, the grid of squares is shown for reference. The shape is based on a random point in each of the points in the grid (excluding the center square).
I've try to build your path, but it's not perfect... Anyhow, I'll share my test ;-D Hop this can help.
//
// DrawView.h
// test
//
// Created by Armand DOHM on 03/03/2014.
//
//
#import <UIKit/UIKit.h>
#interface DrawView : UIView
#end
//
// DrawView.m
// test
//
// Created by Armand DOHM on 03/03/2014.
//
//
#import "DrawView.h"
#import <math.h>
#implementation DrawView
- (void)drawRect:(CGRect)rect
{
float r; //radius
float rmax = MIN(rect.size.height,rect.size.width) * .5; //max radius
float rmin = rmax * .1; //min radius
NSMutableArray *points = [[NSMutableArray alloc] init];
/*cut a circle into x pies. for each of this pie take a point at a random radius
link all of this point with quadcurve*/
for (double a=0;a < 2 * M_PI;a += M_PI / 10) {
r = rmin + ((arc4random_uniform((int)(rmax - rmin) * 100)) / 100.0f);
CGPoint p = CGPointMake((rect.size.width / 2) + (r * cos (a)) , (rect.size.height / 2) + (r * sin (a)));
[points addObject:[NSValue valueWithCGPoint:p]];
}
UIBezierPath *myPath=[[UIBezierPath alloc]init];
myPath.lineWidth=2;
[myPath strokeWithBlendMode:kCGBlendModeNormal alpha:1.0];
r = rmin + ((arc4random_uniform((int)(rmax - rmin) * 100)) / 100.0f);
[myPath moveToPoint:CGPointMake((rect.size.width / 2) + (r * cos (0)) , (rect.size.height / 2) + (r * sin (0)))];
for (int i = 0; i < points.count; i+=2) {
NSValue *value = [points objectAtIndex:i];
CGPoint p1 = [value CGPointValue];
value = [points objectAtIndex:(i+1)];
CGPoint p2 = [value CGPointValue];
[myPath addQuadCurveToPoint:p2 controlPoint:p1];
}
[myPath closePath];
[myPath stroke];
}
#end
I am drawing a simple grid, and I want the line closest to the center of the screen to be highlighted a different color.
What is the formula to determine what line was drawn that closely resembles the center of the screen?
It doesn't have to be the exact center, just one that appears to be in the middle of the screen. But it must be a line that was drawn. The user can change the size of the grid at anytime, so this line must move with it.
I am drawing a new line on the screen using a different stroke color, but I can't determine which line to overlap. I can get close but I am always off by a few pixels.
Take a look at this picture in Photoshop. The green line represents the true center of the image. While the pink line is the desired result (center line) because the grid isn't even to the screen size (look at the last grid on the right) The grid is 34x34 and the screen size is 320 x 480.
How to draw the grid:
int xStart = 0, yStart = 0;
int gsX = 19; //Distance between lines
int gsY = 25;
// draw vertical lines
for(int xId=0; xId<=(screenWidth/gsX); xId++) {
int x = xStart + xId * gsX;
[gPath moveToPoint:CGPointMake(x, yStart)];
[gPath addLineToPoint:CGPointMake(x, yStart+screenHeight)];
}
// draw horizontal lines
for(int yId=0; yId<=(screenHeight/gsY); yId++) {
int y = yStart + yId * gsY;
[gPath moveToPoint:CGPointMake(xStart, y)];
[gPath addLineToPoint:CGPointMake(xStart+screenWidth, y)];
}
My centerline code:
This moves the line based upon the grid spacing value, but it isn't drawn over one of the lines near the center.
int x = (screenWidth/gsX) /2;
NSLog(#"New X: %i gsX: %i",x, gsX);
//Veritical
[centerLines moveToPoint:CGPointMake(x, 0)];
[centerLines addLineToPoint:CGPointMake(x, screenHeight)];
Actually every one is right. I ran into something similar not to long ago actually. I couldn't explain it but it felt like the order of operations wasn't being followed correctly. So I broke your equation down so that you can follow the order of the operations. Any way your solution is as followed.
int centerX = (screenWidth/gsX);
int tempA = ( centerX / 2 );
int tempB = tempA * gsX;
NSLog(#"screenwidth / gsX = %i", centerX);
NSLog(#"Temp A: %i ", tempA);
NSLog(#"Temp B: %i ", tempB);
//Veritical
[centerLines moveToPoint:CGPointMake(tempB, 0)];
[centerLines addLineToPoint:CGPointMake(tempB, screenHeight)];
Here's whats happening. You're already drawing this line at one point in your grid code. You just have to figure out which one it is.You know that screenWidth/gsX is the last "line that will be drawn. So that number divided by 2 is the middle line. It's already a factor of the screenSize. Then just multiply that number by how big your grid is. Since it is the 'middle line' closest to the center (screenWidth/gsX) your line should show up on top of the grid
That should always draw a middle line. I don't see any code where you are changing the color. So you will have to take it on blind faith that it is being drawn. If you can change your line color you should be able to see it.
I'll leave it to you to figure out horizontal. (hint: it deals with y value ;-) )
I hope this helps!
Have fun and good luck Mr. Bourne!
Center is
int centerX = ((screenWidth/2) / gsX )* gsX;
int centerY = ((screenHeight/2) / gsY ) * gsY;
Just make sure you are doing integer math above! no floats. It should work out fine.
int x = xStart + (screenWidth/gsX)/2 * gsX;