Đã đăng vào thg 10 26, 2017 11:35 SA 4 phút đọc

243

Lập trình visual trên iOS với ProcessingKit

Bài đăng này đã không được cập nhật trong 6 năm

Chào các bạn. Hôm nay mình xin giới thiệu đến các bạn ProcessingKit sau khi đã dùng thử thư viện này!!!

Background

Các bạc có biết đến ngôn ngữ lập trình Visual Design Processing không?

Processing là một open source computer programing language được xây dựng dựa trên Open Project Casey Reas và Benjamin Fry - được phát triển bởi MIT Media Lab. Với mục đích phục vụ Electronic art, và Visual design → đươcj xây dựng thành môi trường phát triển tích hợp (IDE) với mục tiêu để giảng dạy cơ bản về computer programming trong môi trường ảo, và được sử dụng như là nền tảng của electronic sketchbooks. Ngôn ngữ Processing được xây dựng trên Java nhưng có cú pháp đơn giản hơn và có giao diện sử dụng (Graphics user interface) - Wikipedia Processing

Nói một cách đơn giản thì Processing chính là ngôn ngữ Java được đơn giản và Graphic hoá

Nhìn chung khi code mình thường dùng hai loại hàm đó là setup function và draw function , và các cấu trúc hàm đơn giản, dễ sử dụng. Ở bài viết này, do thời gian ngâm cứu không có nhiều nên mình chỉ thực hiện các nghiệm vụ Visual Programming dễ. Sử dụng các câu lệnh dễ để tạo nên thư viện

Sản phẩm đã tạo

ProcessingKit: https://github.com/natmark/ProcessingKit

Với việc áp dụng Processing vào, hai hàm setup và draw được sử dụng để code như ví dụ trên đây

So sánh thực hiện bằng Processing và ProcessingKit

Ở dưới đây là hình ảnh vào code để so sánh việc thực hiện bằng Processing và ProcessingKit. Qua đó ta có thể thấy được thay vì vất vả viết bằng cả Processing và Swift, ta chỉ cần dùng ProcessingKit

Screenshot

Chuyển động như bên trên sẽ được thực thi bằng Processing và ProcessingKit như bên dưới

Processing

class Ripple {
    float x = 0.0;
    float y = 0.0;
    float size = 0.0;
    Ripple(float x, float y, float size) {
        this.x = x;
        this.y = y;
        this.size = size;
    }
}

ArrayList<Ripple> ripples = new ArrayList<Ripple>();

void setup() {
  size(375, 667);
}

void draw() {
    background(255, 255, 255);

    noFill();
    stroke(255, 0, 0);
    strokeWeight(1.0);

    ArrayList<Ripple> removes = new ArrayList<Ripple>() ;

    for(Ripple ripple : ripples){
        ripple.size = ripple.size + 5;
        ellipse(ripple.x, ripple.y, ripple.size, ripple.size);
        if(ripple.size >= 1000){
          removes.add(ripple);
        }
    }

    for(Ripple ripple : removes){
        ripples.remove(ripple);
    }

    fill(0);
    textAlign(CENTER);
    textSize(20);
    text("Touch Me !!", width / 2, height / 2);
}

void mousePressed() {
    Ripple ripple = new Ripple(mouseX, mouseY, 0);
    ripples.add(ripple);
}

ProcessingKit

import ProcessingKit

class Ripple {
    var x: CGFloat = 0.0
    var y: CGFloat = 0.0
    var size: CGFloat = 0.0
    init(x: CGFloat, y: CGFloat, size: CGFloat) {
        self.x = x
        self.y = y
        self.size = size
    }
}

class RippleView: ProcessingView {

    var ripples: [Ripple] = []

    func setup() {
        // The setup() function is run once, when the program starts.
    }

    func draw(){
        // Called directly after setup(), the draw() function continuously executes the lines of code contained inside its block until the program is stopped or noLoop() is called.
        background(255, 255, 255)

        noFill()
        stroke(255, 0, 0)
        strokeWeight(1.0)

        for ripple in ripples {
            ripple.size = ripple.size + 5
            ellipse(ripple.x, ripple.y, ripple.size, ripple.size)
        }
        ripples = ripples.filter { $0.size < 1_000 }

        fill(UIColor.black) //UIColorも使える
        textAlign(.center)
        textSize(20)
        text("Touch Me !!", width / 2, height / 2)
    }

    func fingerTapped() {
        let ripple = Ripple(x: touchX, y: touchY, size: 0)
        ripples.append(ripple)
    }
}

Cài đặt

Sử dùng Carthage hay CocoaPods đều có thể cài đặt được thư viện ProcessingKit

Trường hợp sử dùng Carthage


github "natmark/ProcessingKit" ~> 0.4.0

$ carthage update --platform iOS --no-use-binaries

Ta có thể xem thêm ở project sample sử dụng Carthage : PKExample

Khi sử dụng CocoaPods

$ pod init

Podfile

# Uncomment the next line to define a global platform for your project
# platform :ios, '9.0'

target 'PKPodsExample' do
  # Comment the next line if you're not using Swift and don't want to use dynamic frameworks
  use_frameworks!

  # Pods for PKPodsExample
  pod "ProcessingKit","0.4.0"
end

# do chua hỗ trợ Swift4 nên lúc build chú ý build với swift3 nhé 
post_install do |installer|
  installer.pods_project.targets.each do |target|
    target.build_configurations.each do |config|
      config.build_settings['SWIFT_VERSION'] = '3.0'
    end
  end
end

Install

$ pod install

Ví dụ về project sử dụng CocoaPods : PKPodExample

Thực thi

1. Sau khi thừa kế `ProcessingView` ta tạo View cho việc sử dụng Sketch

CustomView.swift

import ProcessingKit

class CustomView: ProcessingView {
    func setup() {
        // code chỉ chạy 1 lần đầu ở đây 
    }

    func draw() {
        // phần chạy trên các frame 
    }
}

2-a. Nếu sử dụng Storyboard để tạo

Ở Custom Class của UIImageView ta chỉ định vào vào CustomView đã tạo
Kéo dây IBOutlet đến code

 ViewController.swift

 @IBOutlet weak var sampleView: SampleView!

2-b. Nếu sử dụng code để tạo

 ViewController.swift

  override func viewDidLoad() {
     super.viewDidLoad()     
     let customView = CustomView(frame: self.view.frame)
     self.view.addSubView(customView)
 }

Sau đó ở trong các hàm setup() và draw() của CustomView đã tạo vừa nãy chúng ta viết phần code chuyển động vào, nó sẽ được phản ánh lên màn hình

Về sample

Ở bản thân trong Library cũng đã có một số sample được viết nên các bạn có thể tham khảo ngay trong đó ^^

ProcessingKitExample: https://github.com/natmark/ProcessingKit/tree/master/ProcessingKitExample

Về Playground

Nếu bạn muốn chạy thử ngay ProcessingKit thì ở trong thư viện có file Demo.playground các bạn có thể tham khảo và chạy thử.

Demo.playground: https://github.com/natmark/ProcessingKit/tree/master/ProcessingKit/Demo.playground

Tổng kết

Với mục đích dễ cài đặt, dễ sử dụng trên iOS để lập trình Visual tôi đã viết ra thư viện này. Tuy nhiên so với Processing gốc thì vẫn còn thiếu khá nhiều hàm. Ở version mới nhất 0.4.0 thì các hàm cơ bản cũng đang khá là đầy đủ. Về sau tôi sẽ cố gắng tiếp tục hoàn thiện để thư viện này được đầy đủ hơn. Mong các bạn giúp đỡ :man_bowing:

Tham Khảo Qiita

Swift iOS