東京五輪エンブレム for iOS

東京オリンピックのエンブレム（ロゴ）を Processing や JS で実装してオープンソースに、という記事を見かけて、

• これでみんないつでも描けるね！ 東京五輪エンブレムのコードがオープンソースに - ねとらぼ

確かに、このデザインはコードで再現しやすいし、円・矩形・弧・塗りつぶしといったパス描画の基本要素が揃っていて、描画APIの練習には最適な題材だなーと。

そんなわけで、iOS 用に Swift で描いてみました。

##コード

TOEView.swift

class TOEView: UIView {

    var l: CGFloat!
    var r: CGFloat!
    
    override func awakeFromNib() {
        super.awakeFromNib()

        l = frame.size.width / 3
        r = sqrt(1.5 * 1.5 + 0.5 * 0.5) * l
    }
    
    override func drawRect(rect: CGRect) {
        
        self.drawYellowArc()
        self.drawBlackRect()
        self.drawRedOval()
        self.drawGreyArc()
    }
    
    private func drawYellowArc() {
        let path = UIBezierPath(
            arcCenter: CGPointMake(l * 1.5, l * 1.5),
            radius: r,
            startAngle: CGFloat(-M_PI_2),
            endAngle: CGFloat(-M_PI),
            clockwise: false)
        path.addLineToPoint(CGPointZero)
        
        UIColor(red: 1.0, green: 0.84, blue: 0.0, alpha: 1.0).setFill()
        path.fill()
    }

    private func drawBlackRect() {
        
        let rect = CGRectMake(l, 0, l, l * 3)
        let path = UIBezierPath(rect: rect)
        
        UIColor.blackColor().setFill()
        path.fill()
    }

    private func drawRedOval() {

        let rect = CGRectMake(l * 2, 0, l, l)
        let path = UIBezierPath(ovalInRect: rect)
        
        UIColor.redColor().setFill()
        path.fill()
    }
    
    private func drawGreyArc() {
        
        let path = UIBezierPath(
            arcCenter: CGPointMake(l * 1.5, l * 1.5),
            radius: r,
            startAngle: 0,
            endAngle: CGFloat(M_PI_2),
            clockwise: true)
        path.addLineToPoint(CGPointMake(l * 3, l * 3))
        
        UIColor(white: 0.5, alpha: 1.0).setFill()
        path.fill()
    }
}

##解説

パッと見、長いですが、

• 黄色い円弧を描画
• 黒い長方形を描画
• 赤い円を描画
• グレーの円弧を描画

の4ステップで、各ステップも

• パス（UIBezierPath）生成
• 色をセット setFill()
• 塗りつぶし fill()

をやってるだけなので、とてもシンプルです。

元の Processing のコードでは「黄色い部分とグレーの部分を長方形として描画して、真ん中に白い円を描く」というロジックでしたが、こっちの方が直感的かなーという理由で各色オブジェクトを描画していくようにしました。

あと、正方形しばりは IB 上で Auto Layout でやってます。

##実行結果

（2015.8.7 追記： 実物を見たら色が全然違ったので修正しました！）

##for watchOS

ちなみに UIBezierPath は watchOS 2 でも使えるので、Apple Watch 上でも東京五輪ロゴを楽しめます。ただし UIView は使えず、直接 WKInterfaceObject に描画できないので、いったん UIImage として書き出す、ということをやります。詳細は以前書いたこちらの記事とスライドをご参照ください。

• watchOS 2 の Core Graphics は何ができて何ができないのか
• Core Graphics on watchOS 2

##ソースコードのダウンロード

GitHub に置いてあります。Swift的にいけてない部分のご指摘、パラリンピックサポート等、プルリク大歓迎です！

• https://github.com/shu223/TokyoOlympicEmblem-for-iOS

（2015.8.6 追記： 記事をアップして1時間もしないうちにパラリンピックサポートのプルリクいただきました！詳細はコメント欄にて。）