Lập trình visual trên iOS với ProcessingKit
Bài đăng này đã không được cập nhật trong 7 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?
Processinglà mộtopen source computer programing languageđược xây dựng dựa trên Open ProjectCasey ReasvàBenjamin Fry- được phát triển bởiMIT 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 programmingtrong 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ênJavanhư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ử.
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
All rights reserved
