[🧩 Creative Coding] 컬러풀한 물결 웨이브 만들기(feat. Interactive Developer)

안녕하세요 Foma 💻 입니다!

 

오늘은 저번에 줄에 매달려 흔들리는 상자 만들기 에 이어서 인터랙티브 디벨로퍼님의 튜토리얼 움직이는 웨이브를

 

Swift로 구현한 것을 정리해보려고 합니다!

 

바로 시작할게요~

 

아래는 인터랙티브 디벨로퍼 김종민님의 튜토리얼 영상입니다.

 

---

Preview

 

---

1. S자 곡선 그리기

 

S자 곡선을 그리기 위해서 시작과 끝을 정해주고 사이에 두 점이 필요합니다.

 

그리고 사이의 점을 위로 당기거나 아래로 당겨주면 아래와 같은 S자 곡선이 그려집니다.

 

 

2. 움직이는 웨이브 만들기

 

연결된 선의 사이 두 점을 위 아래로 이동시키면 웨이브가 움직이는 것처럼 보이겠죠?

 

 

 

 

3. 여러 웨이브 만들기

 

우선 시작과 끝을 아래와 같이 두 점으로 정해줍니다.

 

그리고 그 사이에 있는 점 4개를 1,2,3,4라고 부르겠습니다.

 

 

사이의 점 두 개를 임의로 골라 곡선을 만들어 줍니다.

 

1과 3으로 골랐을 경우

 

 

2와 4로 골랐을 경우

 

 

1과 4로 골랐을 경우

 

---

코드 구현

 

Line

 

선은 선을 그릴 CAShapeLayer와 사이 두 개의 점 p1,p2와 웨이브를 채울 색을 프로퍼티로 가지고 있습니다.

 

import UIKit

struct Line {
    let layer:CAShapeLayer
    let p1:Int
    let p2:Int
    var color:UIColor
}

---

Point

 

점은 현재 위치인 x와 y

 

점이 위 아래로 이동하는데 한계를 정해줄 max와 min

 

위로 갈지 아래로 갈지를 정해줄 addY를 프로퍼티로 가지고 있습니다.

import UIKit

struct Point {
    var x:CGFloat
    var y:CGFloat
    var max:CGFloat
    var min:CGFloat
    var addY:CGFloat
    var center:CGPoint {
        return CGPoint(x: x, y: y)
    }
}

---

WaveView

 

WaveView에 필요한 프로퍼티는 아래와 같습니다.

 

class WaveView: UIView {
    
    private var timer : Timer?
    private var points:[Point] = []
    private var lines:[Line] = []
    private lazy var centerY:CGFloat = frame.height/2
    private var lineCount:Int = 3
    private var dotCount:Int = 4
    private let colors:[UIColor] = [.systemPink,.systemBlue,.systemCyan,.systemMint,.systemTeal]

 

---

configure

 

 

타이머를 설정해줍니다.

 

 

    private func configure() {
        timer = Timer.scheduledTimer(timeInterval: 0.01, target: self, selector: #selector(timerCallback), userInfo: nil, repeats: true)
        putDots()
        appendLines()
    }

 

그리고 타이머가 호출될 때마다 곡선들은 두 사이의 점의 위치에 맞게 업데이트 됩니다.

 

 @objc func timerCallback() {
        updateLineCuve()
    }
    
    private func updateLineCuve() {
        for i in 0..<points.count {
            points[i].y += points[i].addY
            if points[i].y > centerY + points[i].max  || points[i].y < centerY + points[i].min {
                points[i].addY = -(points[i].addY)
            }
        }
        for i in 0..<lineCount {
            addCurve(line:lines[i],p1:lines[i].p1,p2:lines[i].p2)
        }
    }

 

putDots

 

점은 뷰의 가로를 점 갯수+1만큼으로 나눠 x값을 정하고 최대와 최소,위로 갈지 아래로 갈지를 정해서 넣어줍니다.

 

private func putDots() {
        let w:CGFloat = self.bounds.width/CGFloat(dotCount+1)
        for i in 1...dotCount {
            let x:CGFloat = w*CGFloat(i)
            let max:CGFloat = CGFloat.random(in: centerY/2...centerY)
            let min:CGFloat = CGFloat.random(in: (-centerY)...(-centerY/2))
            let addY:CGFloat = CGFloat(i%2) == 0 ? -1:1
            points.append(Point(x: x, y: centerY, max: max, min: min, addY: addY))
        }
    }

 

appendLines

 

선은 사이의 두 점과 색을 랜덤하게 정해서 원하는 갯수만큼 넣어줍니다.

 

private func appendLines() {
        for _ in 0..<lineCount {
            lines.append(Line(layer:CAShapeLayer(),p1:(0..<dotCount).randomElement()!, p2:(0..<dotCount).randomElement()!, color: (colors.randomElement()!)))
        }
    }

 

addCurve

 

아래와 같이 곡선을 p1,p2에 맞게 연결해주고 그 안을 채울 색을 정해줍니다.

 

    private func addCurve(line:Line,p1:Int,p2:Int) {
        line.layer.removeFromSuperlayer()
        let height:CGFloat = self.frame.height
        let width:CGFloat = self.frame.width
        let linePath = UIBezierPath()
        linePath.move(to:CGPoint(x: 0, y:height))
        linePath.addLine(to:CGPoint(x: 0, y:height/2))
        linePath.addCurve(to:CGPoint(x: width, y:height/2), controlPoint1:points[p1].center, controlPoint2:points[p2].center)
        linePath.addLine(to: CGPoint(x: width, y: height))
        line.layer.path = linePath.cgPath
        line.layer.fillColor = line.color.withAlphaComponent(0.4).cgColor
        layer.addSublayer(line.layer)
    }

---

WaveViewController

 

컨트롤러에서 뷰를 생성하여 확인합니다.

 

class WaveViewController: UIViewController {
    
    var waveView:WaveView!
    
    override func viewDidLoad() {
        super.viewDidLoad()
        configure()
    }
    
    private func configure() {
        self.view.backgroundColor = UIColor(displayP3Red: 55/255, green: 55/255, blue: 55/255, alpha: 1)
        waveView = WaveView(frame:CGRect(x:self.view.center.x-150, y: self.view.center.y-130, width: 300, height: 260))
        self.view.addSubview(waveView)
    }

 

아래처럼 여러 개의 곡선이 웨이브처럼 보이는 것을 볼 수 있습니다.

 

---

Source Code

 

전체 소스 코드는 아래 깃헙에서 확인하실 수 있습니다.

 

(맘에 드셨다면 스타 한번씩만 눌러주세요 ㅜ)

 

GitHub - Art-code-club/Swift-ArtCode: Swift version ArtCode