目玉のようなグラフィック
2024/05/18
![](https://resources.blogblog.com/img/icon18_edit_allbkg.gif)
人生ままならないものですね。
自分がこうあって欲しいと思う状況から、ほど遠く。そろそろ真剣にお酒とのお付き合いをしていかないとねー
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
}
: