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

Screen Shot 2020-12-20 at 4.01.20.png 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!

Recommended Posts

Make a Christmas tree with swift
Let's make a Christmas card with Processing!
Make a digging maze with Ruby2D
Make a slideshow tool with JavaFX
Make a garbage reminder with line-bot-sdk-java
Make a list map with LazyMap
Make a typing game with ruby
Make a family todo list with Sinatra
Make a family todo list with Sinatra
Let's make a smart home with Ruby!
Make a login function with Rails anyway
[docker] [nginx] Make a simple ALB with nginx
Make a site template easily with Rails
[iOS] I tried to make a processing application like Instagram with Swift
Christmas with Processing
Convert a string to a character-by-character array with swift
Transition to a view controller with Swift WebKit
Let's make a search function with Rails (ransack)
Make System.out a Mock with Spock Test Framework
Run Scala with GraalVM & make it a native image
How to make a factory with a model with polymorphic association
Let's make a LINE Bot with Ruby + Sinatra --Part 2
[Java basics] Let's make a triangle with a for statement
[Personal application work memo] Make a calendar with simple_calendar
[Swift 5] Draw a line.
Make a reflection utility ②
Make a reflection utility ③
Getting Started with Swift
Let's make a LINE Bot with Ruby + Sinatra --Part 1
Starting with Swift Swift UI
Make a reflection utility ①
Add a local Swift Package to your project with Swift PM
Port C code with a lot of typecasts to Swift
[Beginner] Try to make a simple RPG game with Java ①
I want to make a list with kotlin and java!
[Swift 5] Select a date with the IDate Picker on iOS14
I want to make a function with kotlin and java!
Make a simple CRUD with SpringBoot + JPA + Thymeleaf ① ~ Hello World ~
Learning Ruby with AtCoder 13 How to make a two-dimensional array
Let's make a simple API with EC2 + RDS + Spring boot ①
[swift5] Try to make an API client with various methods
Make a simple CRUD with SpringBoot + JPA + Thymeleaf ⑤ ~ Template standardization ~
Execute external command with swift
Progress made with Swift UI
Microservices with DevOps Make Changes
Create a playground with Xcode 12
Draw a gradient with CAGradientLayer
[Java] Make it a constant
[Swift] Apply a gradation filter
[Rails] Make a breadcrumb trail
Compare Java 8 Optional with Swift
Make a rhombus using Java
A story stuck with NotSerializableException
Let's make a book management web application with Spring Boot part1
I want to make a button with a line break with link_to [Note]
I tried to illuminate the Christmas tree in a life game
How to make a jar file with no dependencies in Maven
Let's make a book management web application with Spring Boot part3
[Swift] Create a project with Xcode (ver 12.1) and display "Hello, World!"
Try to make a cross-platform application with JRuby (jar file generation)
Let's make a book management web application with Spring Boot part2