post Image
iOSでビジュアル表現プログラミング!「ProcessingKit」のご紹介

iOSでビジュアル表現プログラミング!「ProcessingKit」のご紹介

皆さん、こんにちは。natmarkです。
今回、ProcessingKitというライブラリを作ってみたので、そちらの紹介をします!

背景

Processingというビジュアルデザインに使われるプログラミング言語をご存知でしょうか?

『Processing(プロセッシング)は、Casey Reas と Benjamin Fry によるオープンソースプロジェクトであり、かつてはMITメディアラボで開発されていた。電子アートとビジュアルデザインのためのプログラミング言語であり、統合開発環境 (IDE) である。 視覚的なフィードバックが即座に得られるため、初心者がプログラミングを学習するのに適しており、電子スケッチブックの基盤としても利用できる。Javaを単純化し、グラフィック機能に特化した言語といえる。』 - Wikipedia Processing

簡単にいうと、Javaを単純化してグラフィックに特化させた言語がProcessingです。

一般的に 初期化関数( setup 関数)メインループ関数( draw 関数) という2つの関数を使ってプログラムコードを構成するというスタイルが取られ、 文法の簡易さ・使いやすさ からプログラミング学習にもよく用いられています。

自分の所属する大学でも、学部1年生でProcessingの講義があり、
教員がProcessingの本を書いてしまうほど盛んに用いられています。

今回、学習コストが低く、書きやすさを重視したビジュアルプログラミングをiOSで行いたいと思い、このProcessingという言語の、文法の書きやすさを取り入れたライブラリを作成しました。

作ったもの

ProcessingKit-Header.png
ProcessingKit: https://github.com/natmark/ProcessingKit

demo.gif

Processingらしさを取り入れるために、 setupdraw という2つの関数を使ってプログラムコードを構成するスタイルを取り入れました。

Processingでの実装とProcessingKitを用いた実装の比較

以下に、Processingでの実装とProcessingKitを用いた実装の比較を示します。
ProcessingとSwiftを書いたことがあれば、そこまで苦戦せずにProcessingKitを用いた実装ができることがわかると思います。

Screenshot

Screenshot.gif
上のような挙動をするプログラムを、ProcessingProcessingKitそれぞれで実装して見ます

Processing

Ripple.pde
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

Swift.RippleView.swift
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)
    }
}

一部、Swiftらしさを取り入れた実装をしていて、fillstrokeではUIColorが使用できたり、modeの指定でenumを使用していたりします。

導入

CarthageもしくはCocoaPodsを使用して導入することができます。

Carthageを利用する場合

Cartfile
github "natmark/ProcessingKit" ~> 1.0.0
$ carthage update --platform iOS --no-use-binaries

参考: https://qiita.com/yutat93/items/97fe9bc2bf2e97da7ec1

Carthageを使用したサンプルプロジェクト: PKExample

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","1.0.0"
end
$ pod install

CocoaPodsを使用したサンプルプロジェクト: PKPodsExample

実装

1. ProcessingViewを継承した、スケッチ用のViewを作成する

CustomView.swift
import ProcessingKit

class CustomView: ProcessingView {
    func setup() {
        // 初回に1回だけ実行したいコードを記述
    }

    func draw() {
        // 毎フレーム実行したいコードを記述
    }
}

2-a. Storyboardから作成する場合

  • UIImageViewのカスタムクラスに上で作成したCustomViewを指定
    スクリーンショット 2017-10-01 18.41.05.png

  • コードにIBOutletで紐づける

ViewController.swift
 @IBOutlet weak var sampleView: SampleView!

2-b. コードから作成する場合

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

あとは、先ほど作成したCustomViewsetup()draw()内にコードを書くことで、画面に反映されるようになります。

サンプルについて

本体ライブラリにいくつかサンプルを作成して置いてありますので、参考にしていただければと思います。

Example.gif

Playgroundについて

ProcessingKitをすぐ試せるように、Demo.playgroundを本体ライブラリに含めています。こちらも合わせて使っていただければと思います。

Playground.gif

まとめ

比較的簡単に導入でき、iOSで簡易にビジュアルプログラミングができることを目指して開発を始めたProcessingKitですが、本家のProcessingに比べるとまだまだ足りない関数も多く、最新バージョン0.4.0でようやく基本的な関数が揃ったかな?という温度感になっています。

[2018/01/04更新] Swift4・OS X対応した ProcessingKit 1.0.0 を無事公開できました!

学業の傍にはなってしまいますが、今後もちまちま作っていく予定ですので、よろしくお願いします :bow:


『 Swift 』Article List
Category List

Eye Catch Image
Read More

Androidに関する現役のエンジニアのノウハウ・トレンドのトピックなど技術的な情報を提供しています。コード・プログラムの丁寧な解説をはじめ、初心者にもわかりやすいように写真や動画を多く使用しています。

Eye Catch Image
Read More

AWSに関する現役のエンジニアのノウハウ・トレンドのトピックなど技術的な情報を提供しています。コード・プログラムの丁寧な解説をはじめ、初心者にもわかりやすいように写真や動画を多く使用しています。

Eye Catch Image
Read More

Bitcoinに関する現役のエンジニアのノウハウ・トレンドのトピックなど技術的な情報を提供しています。コード・プログラムの丁寧な解説をはじめ、初心者にもわかりやすいように写真や動画を多く使用しています。

Eye Catch Image
Read More

CentOSに関する現役のエンジニアのノウハウ・トレンドのトピックなど技術的な情報を提供しています。コード・プログラムの丁寧な解説をはじめ、初心者にもわかりやすいように写真や動画を多く使用しています。

Eye Catch Image
Read More

dockerに関する現役のエンジニアのノウハウ・トレンドのトピックなど技術的な情報を提供しています。コード・プログラムの丁寧な解説をはじめ、初心者にもわかりやすいように写真や動画を多く使用しています。

Eye Catch Image
Read More

GitHubに関する現役のエンジニアのノウハウ・トレンドのトピックなど技術的な情報を提供しています。コード・プログラムの丁寧な解説をはじめ、初心者にもわかりやすいように写真や動画を多く使用しています。

Eye Catch Image
Read More

Goに関する現役のエンジニアのノウハウ・トレンドのトピックなど技術的な情報を提供しています。コード・プログラムの丁寧な解説をはじめ、初心者にもわかりやすいように写真や動画を多く使用しています。

Eye Catch Image
Read More

Javaに関する現役のエンジニアのノウハウ・トレンドのトピックなど技術的な情報を提供しています。コード・プログラムの丁寧な解説をはじめ、初心者にもわかりやすいように写真や動画を多く使用しています。

Eye Catch Image
Read More

JavaScriptに関する現役のエンジニアのノウハウ・トレンドのトピックなど技術的な情報を提供しています。コード・プログラムの丁寧な解説をはじめ、初心者にもわかりやすいように写真や動画を多く使用しています。

Eye Catch Image
Read More

Laravelに関する現役のエンジニアのノウハウ・トレンドのトピックなど技術的な情報を提供しています。コード・プログラムの丁寧な解説をはじめ、初心者にもわかりやすいように写真や動画を多く使用しています。

Eye Catch Image
Read More

Pythonに関する現役のエンジニアのノウハウ・トレンドのトピックなど技術的な情報を提供しています。コード・プログラムの丁寧な解説をはじめ、初心者にもわかりやすいように写真や動画を多く使用しています。

Eye Catch Image
Read More

Rubyに関する現役のエンジニアのノウハウ・トレンドのトピックなど技術的な情報を提供しています。コード・プログラムの丁寧な解説をはじめ、初心者にもわかりやすいように写真や動画を多く使用しています。

Eye Catch Image
Read More

Scalaに関する現役のエンジニアのノウハウ・トレンドのトピックなど技術的な情報を提供しています。コード・プログラムの丁寧な解説をはじめ、初心者にもわかりやすいように写真や動画を多く使用しています。

Eye Catch Image
Read More

Swiftに関する現役のエンジニアのノウハウ・トレンドのトピックなど技術的な情報を提供しています。コード・プログラムの丁寧な解説をはじめ、初心者にもわかりやすいように写真や動画を多く使用しています。

Eye Catch Image
Read More

Unityに関する現役のエンジニアのノウハウ・トレンドのトピックなど技術的な情報を提供しています。コード・プログラムの丁寧な解説をはじめ、初心者にもわかりやすいように写真や動画を多く使用しています。

Eye Catch Image
Read More

Vue.jsに関する現役のエンジニアのノウハウ・トレンドのトピックなど技術的な情報を提供しています。コード・プログラムの丁寧な解説をはじめ、初心者にもわかりやすいように写真や動画を多く使用しています。

Eye Catch Image
Read More

Wordpressに関する現役のエンジニアのノウハウ・トレンドのトピックなど技術的な情報を提供しています。コード・プログラムの丁寧な解説をはじめ、初心者にもわかりやすいように写真や動画を多く使用しています。

Eye Catch Image
Read More

機械学習に関する現役のエンジニアのノウハウ・トレンドのトピックなど技術的な情報を提供しています。コード・プログラムの丁寧な解説をはじめ、初心者にもわかりやすいように写真や動画を多く使用しています。