目玉のようなグラフィック 2024/05/18

人生ままならないものですね。

自分がこうあって欲しいと思う状況から、ほど遠く。そろそろ真剣にお酒とのお付き合いをしていかないとねー

swiftuiでまず描きます

久々にグラフィックツールを触りました。といってもたいした絵を描くわけではいのですが。使ったツールはSketch, Paintcode。あとはChatGPTですね。Paintcodeで生成されたコードをchatGPTで変換してもらってますが、実は、そんなにすんなりは行きませんでした。ききかたが悪いでしょうね。僕の。

        // Drawing container
        ZStack {
            // First shape with fillColor
            Path { path in
                path.move(to: CGPoint(x: 114, y: 0))
                path.addCurve(to: CGPoint(x: 228, y: 114), control1: CGPoint(x: 176.96, y: 0), control2: CGPoint(x: 228, y: 51.04))
                path.addCurve(to: CGPoint(x: 114, y: 228), control1: CGPoint(x: 228, y: 176.96), control2: CGPoint(x: 176.96, y: 228))
                path.addCurve(to: CGPoint(x: 0, y: 114), control1: CGPoint(x: 51.04, y: 228), control2: CGPoint(x: 0, y: 176.96))
                path.addCurve(to: CGPoint(x: 114, y: 0), control1: CGPoint(x: 0, y: 51.04), control2: CGPoint(x: 51.04, y: 0))
                path.closeSubpath()
                
                path.move(to: CGPoint(x: 114, y: 33))
                path.addCurve(to: CGPoint(x: 33, y: 114), control1: CGPoint(x: 69.26, y: 33), control2: CGPoint(x: 33, y: 69.26))
                path.addCurve(to: CGPoint(x: 114, y: 195), control1: CGPoint(x: 33, y: 158.74), control2: CGPoint(x: 69.26, y: 195))
                path.addCurve(to: CGPoint(x: 195, y: 114), control1: CGPoint(x: 158.74, y: 195), control2: CGPoint(x: 195, y: 158.74))
                path.addCurve(to: CGPoint(x: 114, y: 33), control1: CGPoint(x: 195, y: 69.26), control2: CGPoint(x: 158.74, y: 33))
                path.closeSubpath()
            }
            .fill(Color(red: 0.129, green: 0.129, blue: 0.537))
            
            // Second shape with fillColor2
            Path { path in
                path.move(to: CGPoint(x: 114.5, y: 160))
                path.addCurve(to: CGPoint(x: 161, y: 113.5), control1: CGPoint(x: 140.18, y: 160), control2: CGPoint(x: 161, y: 139.18))
                path.addCurve(to: CGPoint(x: 114.5, y: 67), control1: CGPoint(x: 161, y: 87.82), control2: CGPoint(x: 140.18, y: 67))
                path.addCurve(to: CGPoint(x: 68, y: 113.5), control1: CGPoint(x: 88.82, y: 67), control2: CGPoint(x: 68, y: 87.82))
                path.addCurve(to: CGPoint(x: 114.5, y: 160), control1: CGPoint(x: 68, y: 139.18), control2: CGPoint(x: 88.82, y: 160))
                path.closeSubpath()
            }
            .fill(Color(red: 0.965, green: 0.773, blue: 0.0))
        }.background(Color.black) // VStackの背景を黒に設定

UIImageにしてみたコード

コードで表現できたので、大きくしたり小さくしたり、いろいろできることでしょう。

import UIKit

func createImage() -> UIImage? {
    let size = CGSize(width: 228, height: 228) // 画像のサイズを設定
    UIGraphicsBeginImageContextWithOptions(size, false, 0) // 透明背景のImage Contextを開始

    // 最初のベジェ曲線を描画
    let fillColor = UIColor(red: 0.129, green: 0.129, blue: 0.537, alpha: 1.000)
    fillColor.setFill()
    let bezierPath = UIBezierPath()
    bezierPath.move(to: CGPoint(x: 114, y: 0))
    bezierPath.addCurve(to: CGPoint(x: 228, y: 114), controlPoint1: CGPoint(x: 176.96, y: 0), controlPoint2: CGPoint(x: 228, y: 51.04))
    bezierPath.addCurve(to: CGPoint(x: 114, y: 228), controlPoint1: CGPoint(x: 228, y: 176.96), controlPoint2: CGPoint(x: 176.96, y: 228))
    bezierPath.addCurve(to: CGPoint(x: 0, y: 114), controlPoint1: CGPoint(x: 51.04, y: 228), controlPoint2: CGPoint(x: 0, y: 176.96))
    bezierPath.addCurve(to: CGPoint(x: 114, y: 0), controlPoint1: CGPoint(x: 0, y: 51.04), controlPoint2: CGPoint(x: 51.04, y: 0))
    bezierPath.close()
   

    // 内側のベジェ曲線を描画
    bezierPath.move(to: CGPoint(x: 114, y: 33))
    bezierPath.addCurve(to: CGPoint(x: 33, y: 114), controlPoint1: CGPoint(x: 69.26, y: 33), controlPoint2: CGPoint(x: 33, y: 69.26))
    bezierPath.addCurve(to: CGPoint(x: 114, y: 195), controlPoint1: CGPoint(x: 33, y: 158.74), controlPoint2: CGPoint(x: 69.26, y: 195))
    bezierPath.addCurve(to: CGPoint(x: 195, y: 114), controlPoint1: CGPoint(x: 158.74, y: 195), controlPoint2: CGPoint(x: 195, y: 158.74))
    bezierPath.addCurve(to: CGPoint(x: 114, y: 33), controlPoint1: CGPoint(x: 195, y: 69.26), controlPoint2: CGPoint(x: 158.74, y: 33))
    bezierPath.close()
    bezierPath.fill()

    // 2番目のベジェ曲線を描画
    let fillColor2 = UIColor(red: 0.965, green: 0.773, blue: 0.000, alpha: 1.000)
    fillColor2.setFill()
    let bezier2Path = UIBezierPath()
    bezier2Path.move(to: CGPoint(x: 114.5, y: 160))
    bezier2Path.addCurve(to: CGPoint(x: 161, y: 113.5), controlPoint1: CGPoint(x: 140.18, y: 160), controlPoint2: CGPoint(x: 161, y: 139.18))
    bezier2Path.addCurve(to: CGPoint(x: 114.5, y: 67), controlPoint1: CGPoint(x: 161, y: 87.82), controlPoint2: CGPoint(x: 140.18, y: 67))
    bezier2Path.addCurve(to: CGPoint(x: 68, y: 113.5), controlPoint1: CGPoint(x: 88.82, y: 67), controlPoint2: CGPoint(x: 68, y: 87.82))
    bezier2Path.addCurve(to: CGPoint(x: 114.5, y: 160), controlPoint1: CGPoint(x: 68, y: 139.18), controlPoint2: CGPoint(x: 88.82, y: 160))
    bezier2Path.close()
    bezier2Path.fill()

    let image = UIGraphicsGetImageFromCurrentImageContext() // 画像を取得
    UIGraphicsEndImageContext() // Image Contextを終了

    return image
}