Swift dynamic color change from a range of Colors - ios

Question

I'm working on a donut-chart that needs to be able to support a huge amount of sections.
For this, each section of course needs it's own color. For this I need a way to dynamically make a new color for each section. This is easy. But it also needs to take a startColor and an EndColor, so it can use e.g. only blue colors.
I did manage to this using the following code:
var rStartValue: CGFloat = 16
var gStartValue: CGFloat = 177
var bStartValue: CGFloat = 216
var rEndValue: CGFloat = 30
var gEndValue: CGFloat = 30
var bEndValue: CGFloat = 38
for percentFill in percentFills {
let progressLine = CAShapeLayer()
if rStartValue < rEndValue {
rStartValue += 1
} else if rStartValue > rEndValue {
rStartValue -= 1
}
if gStartValue < gEndValue {
gStartValue += 1
} else if gStartValue > gEndValue {
gStartValue -= 1
}
if bStartValue < bEndValue {
bStartValue += 1
} else if bStartValue > bEndValue {
bStartValue -= 1
}
}
However. It's not the desired result yet.
I need it to step appropiately. Right now it just steps by 1 value in each loop. Which is okay if there's a ton of sections, but sometimes there's only maybe 17 or so.
So I need it to calculate how much to step based on the amount of sections.
After messing around with various versions of percentFills/various related variables.
I ended up here, hoping someone can help me figure out how to make these colours step correctly.
Here's an example of what I've been trying:
var rJump = CGFloat(percentFills.count)/(rStartValue-rEndValue)
var gJump = CGFloat(percentFills.count)/(gStartValue-gEndValue)
var bJump = CGFloat(percentFills.count)/(bStartValue-bEndValue)
Then replacing 1 in the loop with rJump, gJump or bJump. But Every variable I have tried to divide with the percentFills.count (total number of sections) doesn't provide the desired result.
The startValue should always be the first color, and the endValue should always be the last color. Then step from start to end, as evenly as possible.
Any help getting past this barrier would be greatly appreciated!

Answer 1

Instead of using RGB, you will probably be better off using HSL where the H is hue which is essentially the color.
You can use:
Swift:
init(hue hue: CGFloat, saturation saturation: CGFloat, brightness brightness: CGFloat, alpha alpha: CGFloat)
ObjectiveC:
+ (UIColor *)colorWithHue:(CGFloat)hue saturation:(CGFloat)saturation brightness:(CGFloat)brightness alpha:(CGFloat)alpha
all values are in the range 0.0 - 1.0.
See Apple Docs.
HSL is close to the way we experience color, RGB is the way most hardware displays color.
Here is an example from Interface Builder, the values are 0 - 360:

Answer 2

I figured it out.
It was a "little" problem with my math. Instead of doing:
var rJump = CGFloat(percentFills.count)/(rStartValue-rEndValue)
var gJump = CGFloat(percentFills.count)/(gStartValue-gEndValue)
var bJump = CGFloat(percentFills.count)/(bStartValue-bEndValue)
I simply needed to change it to this:
var rJump = (rStartValue-rEndValue)/CGFloat(percentFills.count)
var gJump = (gStartValue-gEndValue)/CGFloat(percentFills.count)
var bJump = (bStartValue-bEndValue)/CGFloat(percentFills.count)
That takes the difference in values. E.g. if you are starting red color is 100, and your end red color is 200, and you have 10 sections (or steps), it would look like this:
100-50 = 50 (This is the difference between the two)
50/10 (Then 50 is divided by the amount of sections (steps). = 5
Where 5 is the amount the red color needs to change for each step:
if rStartValue < rEndValue {
rStartValue += 5
} else if rStartValue > rEndValue {
rStartValue -= 5
}
Of course variable rJump should be used instead of the number.
Hoped that helped someone else if anyone runs into a similar issue.
Also Check out Zaph's answer. Using HBS as he mentions, you might only have to change 1 value and not 3, for each loop.