It tried that. The mask rotated too, so it's a child of the masked layer. I also will be needing some kind of shadow in there to suggest a bit of depth, and my thinking is that should be using the same mask.

I really wish there was a GUI way to build all of this. It seems crazy that there isn't.

There is. It's called PaintCode. It's moderately expensive.

Hmm, I have mixed feelings about things like paint code.

For things like this clock it means that every frame of the animation etc it's going to redraw the entire clock. Face, hands, day night thing, everything.

For something simple this might be fine but for something like this I can't see any benefit.

What you end up with is unchangeable. The code is unintelligible. The numbers used are laughable. Everything is done as one draw so editing it later is difficult. The last time I looked it wasn't really possible tip use images in an effective way.

Also, having everything as one draw process will decrease performance.

It may be worth a try though.

Also, layers have built in shadows. Take a look at the shadowColour, radius, offset etc.

Apply the shadow to the mask layer (i think)

I saw PaintCode - I’m not sure about it. I have iDraw, and that dumps out paths etc., but the numbers are all fixed, so if you’re wanting to scale, it could be a problem.

Anyho, this is where I am with it:
Click for large view - Uploaded with Skitch

I want to change the day/night graphics a bit. Also noticing that on proper analogue clocks, the aperture is not semi-circular:
Click for large view - Uploaded with Skitch

So, in the interests of “doing it properly”, I’ll be changing the mask.

Someone else just asked me if I will be making an Apple Watch face out of it.

How doo you mean not semi circular? Is it less than half but still a circle or not a circle?

You could just change the start and end angle of the path in my code to create less or more of a circle.

Also, looks awesome[WHITE SMILING FACE]

Did you create all the images yourself?

Yes - all my own work. My first thing is graphics and photos, which is why I've been building it like I have - some code, some images, etc. etc.. All the images for my clock were created in Affinity Design.

To answer your second question - if you look at the photo of the silver clock above, you'll see that the day/night thing is a semi-circle, with two smallest ones along the bottom - I've seen this a lot. I've actually got this working, screen shot later when I've finished tinkering with the paths so it looks how I want it to.

Looks like to get what I want, I’m going to have to read my way through this http://www.raywenderlich.com/33193/core ... -and-paths because I’ll need less than full semi circles!

Crap! Made a mistake in my drawing, what I have labelled as "radius" is not the radius.

It's actually half the distance that the arc covers. I'll keep it meaning that as it actually makes it easier to work with. Just be aware of it.

Yeah paths are sometimes a pain but not too hard to work out if you spend time with pen and paper to begin with.

I'm guessing you need the sizes to be relative too (i.e. the circles will be bigger on an iPad than iPhone). So you can't do absolute sizes, you need to calculate absolute sizes at run time.

So...

First thing you need to do is work out how to do the entire path in one stroke.

Then it's just a matter of working out how to get the values for startAngle, endAngle and center when you're drawing the arcs.




The first drawing shows how to think of the path as a single stroke.
The rest of it is working out angles and stuff.
Anyway, the last part of the second image shows how you can do arcs from a certain point with a given angle.

Create a method something like...



This will add a circle with a given angle (where angle * 2 is the angle of the entire arc) from a given startPoint and with a given radius and either clockwise or anti-clockwise.

So your path can be built something like...

Thanks, Oli. I wasn’t asking you to do all the work for me. It’s very good of you to do so, though.

What I found out the other day was the path drawing works very much like it does in apps I am used to - Illustrator, Fontographer, Font Lab, etc.. That is to punch a hole out of something, you use clockwise/anticlockwise directions. So what I have done is something like this:

Click for large view - Uploaded with Skitch

The big semi-circle arc is drawn in one direction, the smaller ones the other. The result is that the smaller ones are subtracted from the larger one, resulting in this:
Click for large view - Uploaded with Skitch

Far from perfect, I know, but it’s something I worked out myself after a pile of reading and Googling. Anyway, Art decrees that those smaller semi circles should be, perhaps, a smaller (say 1/4 circles), so I’m off to do some thinking about that.

I’ll post another screen shot of the app when I’ve done this.

FWIW - this is the furthest I have ever got with am XCode project. I’ve dabbled before in the past, and when Apple had the AppleScript studio as part of it, I used that for a couple of things. This time, I’ve passed anything I’ve ever done before with it.

Ah, I didn't know that about "subtracting" paths. Good to know

No worries though, I was bored so it gave me something to do

Ok - I’m trying to follow the example above, and bend it to my will. What is flooring me is the Radians. I’ve never worked with them before, and I have a real problem trying to see what things like M_PI/2 actually mean. I’m used to Degrees.

So, for example, in your function (which I’ve converted to Swift), it’m calling it like this:



I’m not sure what the angle: CGFloat(M_PI/2) means in this context - firstly, what’s that in degrees, and secondly, I can’t see what it’s doing in the context of the functuon. What I am getting is the semi-circle at a rakish angle, not with the base horizontal. I am assuming that if I can somehow push 180 degrees, I’ll get what I want.

Again in the function that adds the Bezier path, I have this:


I’m not at a loss what that calculation is doing - I just can’t see what it’s doing.

What I have got (and I’ve been using this a little) is a function that converts degrees to radians:


You see my point, I hope. I’ve been trying to substitute the radians function for various PI based calculations, and getting nowhere:


I’ll keep on tinkering with this, but this is stumping me.

Oops, sorry, got that equation wrong, will explain it properly in here.

Trigonometry functions all work in radians. Also, all rotation and transforms in Objective-C and Swift use radians too.

In radians a full circle is 2*pi radians.

This means that half a circle is pi radians.

One quarter of a circle is pi / 2 radians.

And so on.

Your function will convert correctly.

In all my examples, theta is in radians.

Where the equation comes from

The bit where I say startAngle = ((2.0 * CGFloat(M_PI)) / 3.0) - angle comes from the diagram on the left hand side of the second picture.

The diagram here is just the scaffolding part of the arc that is being drawn. I left the arc out purely so I could concentrate on the bit I wanted because we needed to find the center for the function. The center of the arc in the diagram is the point where the two triangles meet at the bottom.

The line coming straight out to the right from that point is where all the angles are measured from in the UIBezierPath functions. So in the UIBezierPath functions 0 radians (0 degrees) is to the right and pi/2 radians (90 degrees) is straight down.

From the diagram the startAngle goes from this "measurement" line to the hypotenuse of the left triangle. But we need to know what that is in terms of theta. You can get that angle by starting at 3pi/2 radians (270degrees) (straight up) and subtracting theta from it.

That's where I get 3pi/2 - angle.

Similarly for the endAngle we can start at 3pi/2 and add the theta angle.

Again though, all you need to do is work in radians. So take your value of theta (the angle) in degrees, convert it to radians and then plug into that function.

It doesn't matter if you think in degrees or radians as long as the input of that function is in radians.

If that makes sense?

OMG, reading through this again I just realised I messed up that function. It should be 3pi/2 not 2pi/3. Sorry

Just to explain what 3pi/2 means...

3pi/2 = 3 * (pi/2)
pi/2 (from above) is quarter of a circle (90 degrees)
so
3 * (pi/2) = 3 * quarter of a circle (270 degrees)

Easier to understand when the moron who wrote it didn't get it wrong in the first place (sorry).

I used Oli’s revised formula, and noticed that it drew the paths upside down. Thjat’s OK - I inverted the startAngle and endAngle variables, and it worked as expected. Thanks for helping on that.

I decided, though, that two smaller semi-circles were a bit too obstructive, so I amended code from this page which draws an arc based on a supplied rectangle.
http://www.raywenderlich.com/33193/core ... -and-paths
This means that I can adjust the width/height of the smaller “bumps” based on coordinates I feed into it. The result:
Click for large view - Uploaded with Skitch

Which is pretty much what I wanted from the start. I need to do a little juggling with numbers so that the height of the arc is calculated relatively to the size of the dial, so that it looks the same on an iPad, though, TBH, it’s not looking too bad as it stands with fixed numbers.

Anyway, I’m happy with how it looks now.

Oli mentioned changing the graphics being as “easy as changing a string” - I’ve got to consider that idea more. Having a couple of options would be nice - it’s something I’ll be considering as this moves along, especially if I decide to push it into an Apple Watch app in the future. I have a couple of ideas I’d like to add - possibly a little more modern looking than this one.