Make a Christmas tree with swift

Introduction

Merry Christmas! Today is the 24th, so we will use swift's UIBezierPath to create a Christmas tree. It's easy to put an image of a Christmas tree on the storyboard, but this time I'd like to write everything in code. (There are some deviations, but please forgive me.)

Completion drawing for the time being

I made it like this. It seemed difficult to make a Christmas tree at once, so I made it by dividing it into "star", "triangle of tree part", "rectangle of branch part", and "rectangle of pot part".

code

class ViewController: UIViewController {
    var treeFrame: CGRect = .zero
    var starFrame: CGRect = .zero
    var roundRectFrame: CGRect = .zero

    override func viewDidLoad() {
        super.viewDidLoad()
        view.backgroundColor = .black
        starViewSetup()
        treeViewSetup()
        branchViewSetup()
        potViewSetup()
    }

    //Make a star
    func starViewSetup() {
        let starLayer = CAShapeLayer.init()
        let starViewWidth = CGFloat(50)
        starFrame = CGRect(x: (view.bounds.width / 2) - (starViewWidth / 2) , y: 100, width: starViewWidth, height: 50)
        starLayer.frame = starFrame
        starLayer.strokeColor = UIColor.yellow.cgColor
        starLayer.fillColor = UIColor.yellow.cgColor
        let starViewHeight = starFrame.size.height
        let starBezier = UIBezierPath()
        starBezier.move(to: CGPoint.init(x: 0, y: starViewHeight / 3))
        starBezier.addLine(to: CGPoint.init(x: starViewWidth / 3, y: starViewHeight / 3))
        starBezier.addLine(to: CGPoint.init(x: starViewWidth / 2, y: 0))
        starBezier.addLine(to: CGPoint.init(x: starViewWidth * 0.66, y: starViewHeight / 3))
        starBezier.addLine(to: CGPoint.init(x: starViewWidth, y: starViewHeight / 3))
        starBezier.addLine(to: CGPoint.init(x: starViewWidth * 0.75, y: starViewHeight * 0.6))
        starBezier.addLine(to: CGPoint.init(x: starViewWidth * 0.9 , y: starViewHeight))
        starBezier.addLine(to: CGPoint.init(x: starViewWidth / 2, y: starViewHeight * 0.75))
        starBezier.addLine(to: CGPoint.init(x: starViewWidth / 10 , y: starViewHeight))
        starBezier.addLine(to: CGPoint.init(x: starViewWidth / 4, y: starViewHeight * 0.6))
        starBezier.close()
        starLayer.path = starBezier.cgPath
        view.layer.insertSublayer(starLayer, at: 1)
    }
    
    //Make a tree
    func treeViewSetup() {
        let treeLayer = CAShapeLayer.init()
        treeFrame = CGRect(x: starFrame.minX - starFrame.size.height / 2, y: starFrame.minY - starFrame.height + 10, width: 100, height: 300)
        treeLayer.frame = treeFrame
        treeLayer.strokeColor = UIColor.green.cgColor
        treeLayer.fillColor = UIColor.green.cgColor
        let treeViewHeight = treeFrame.height
        let treeViewWidth = treeFrame.width
        let treeBezier = UIBezierPath()
        treeBezier.move(to: CGPoint(x: treeViewWidth / 2, y: treeViewHeight / 5))
        treeBezier.addLine(to: CGPoint(x: treeViewWidth * 1.2, y: treeViewHeight))
        treeBezier.addLine(to: CGPoint(x: 0, y:treeViewHeight))
        treeBezier.close()
        treeLayer.path = treeBezier.cgPath
        view.layer.insertSublayer(treeLayer, at: 0)
    }
    
    //Make a branch
    func branchViewSetup() {
        let roundRectLayer = CAShapeLayer.init()
        roundRectFrame = CGRect.init(x: treeFrame.midX - 5, y: treeFrame.maxY - 10, width: 30, height: 100)
        roundRectLayer.frame = roundRectFrame
        roundRectLayer.strokeColor = UIColor.green.cgColor
        roundRectLayer.fillColor = UIColor.green.cgColor
        roundRectLayer.path = UIBezierPath.init(roundedRect: CGRect.init(x: 0, y: 0, width: roundRectFrame.size.width, height: roundRectFrame.size.height), cornerRadius: 8).cgPath
        view.layer.insertSublayer(roundRectLayer, at: 2)
    }
    
    //Make a pot
    func potViewSetup() {
        let potLayer = CAShapeLayer.init()
        let potFrame = CGRect.init(x: (roundRectFrame.midX) - (roundRectFrame.size.height / 2), y: roundRectFrame.height + roundRectFrame.minY - 10, width: roundRectFrame.size.height, height: 70)
        potLayer.frame = potFrame
        potLayer.strokeColor = UIColor.brown.cgColor
        potLayer.fillColor = UIColor.brown.cgColor
        potLayer.path = UIBezierPath.init(roundedRect: CGRect.init(x: 0, y: 0, width: potFrame.size.width, height: potFrame.size.height), cornerRadius: 8).cgPath
        view.layer.insertSublayer(potLayer, at: 3)
    }
}

Conclusion ・ Finally

It was quite difficult to fine-tune the stars, but it was fun. So ** Storyboard is easy! !! !! !! ** **

I wish I could decorate the tree from the next time onwards ... Until the end Thank you for reading. Have a nice Christmas, New Year holidays!