swift UIViewでグラデーション

Question

import UIKit
class ViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view.
        
        var colorArr:[UIColor] = []      
        for i in 1 ..< 33{
            let theta = CGFloat(i) * CGFloat.pi / 66
            colorArr.append(UIColor(red: cos(theta), green: sin(theta), blue: 0, alpha: 1))
        }
        
        for i in 1 ..< 33{
            let theta = CGFloat(i) * CGFloat.pi / 66
            colorArr.append(UIColor(red: 0, green: cos(theta), blue: sin(theta), alpha: 1))
        }
        
        for i in 1 ..< 33{
            let theta = CGFloat(i) * CGFloat.pi / 66
            colorArr.append(UIColor(red: sin(theta), green: 0, blue: cos(theta), alpha: 1))
        }
        
        let radius = self.view.bounds.width / 4
        let center = self.view.center
        
        let theta = 2 * CGFloat.pi / CGFloat(colorArr.count)
        
        for i in 0 ..< colorArr.count{
            let colorView = UIView(frame: CGRect(x: 0, y: 0, width: 30, height: 30))
            colorView.backgroundColor = colorArr[i]
            colorView.center.x = center.x + radius * cos(CGFloat(i) * theta)
            colorView.center.y = center.y + radius * sin(CGFloat(i) * theta)
            view.addSubview(colorView)
        }
       
    }
}

UIView99個で円のグラデーションを作るときになぜlet theta = CGFloat(i) * CGFloat.pi / 66
ここは66で割るのでしょうか？

Answer 1

このコードは、

        for i in 1 ..< 33{
            let theta = CGFloat(i) * CGFloat.pi / 66
            colorArr.append(UIColor(red: cos(theta), green: sin(theta), blue: 0, alpha: 1))
        }

i の範囲は 1 〜 32 ですが、これに円周率 π をかけて 66 で割ることで、0 〜 π / 2 つまり 0 〜 90 度の範囲 (厳密にはちょっと狭い) の角度のラジアン値を計算しています。それを使って、以下の図で丸をつけたところの色を求めてグラデーションしています。

上の 3 つの正方形は、それぞれ横と縦に赤と緑、緑と青、青と赤のグラデーションになってます。以下の Swift コード (Playground で動きます) で描きました。

import UIKit
import PlaygroundSupport

public class MyView : UIView {
    public var getColor: ((CGFloat, CGFloat) -> CGColor)!
    public override func draw(_ rect: CGRect) {
        if getColor == nil { return }
        let ctx = UIGraphicsGetCurrentContext()!
        for y in 0..<256 {
            for x in 0..<256 {
                ctx.setFillColor(getColor(CGFloat(x) / 255, CGFloat(y) / 256))
                ctx.fill(CGRect(x: CGFloat(x), y: CGFloat(y), width: 1, height: 1))
            }
        }
        for i in 1 ..< 33 {
            let theta = CGFloat(i) * CGFloat.pi / 66
            ctx.addEllipse(in: CGRect(x: cos(theta) * 256 - 4, y: sin(theta) * 256 - 4, width: 6, height: 6))
            ctx.drawPath(using: .stroke)
        }
    }
}

let view = UIView(frame: CGRect(x: 0, y: 0, width: 768, height: 256))
view.backgroundColor = UIColor.white
let rgView = MyView(frame: CGRect(x: 0, y: 0, width: 256, height: 256))
rgView.getColor = { CGColor(red: $0, green: $1, blue: 0, alpha: 1) }
view.addSubview(rgView)
let gbView = MyView(frame: CGRect(x: 256, y: 0, width: 256, height: 256))
gbView.getColor = { CGColor(red: 0, green: $0, blue: $1, alpha: 1) }
view.addSubview(gbView)
let brView = MyView(frame: CGRect(x: 512, y: 0, width: 256, height: 256))
brView.getColor = { CGColor(red: $1, green: 0, blue: $0, alpha: 1) }
view.addSubview(brView)
PlaygroundPage.current.liveView = view