ProcessingのコードをSwiftで写経する - その1: Solar System
こういう本とかこういう本とかこういう本とか、ついつい買ってしまうのですが、なかなか開いて勉強する機会がありません。理由を考えてみると、
1. 仕事でこういう表現が必要になる機会がない
2. 仕事でProcessingを使う機会がない
等々ありますが、1に関してはチキン・エッグの関係で、表現の引き出しさえ自分にあれば、なんとなくそういう引き出しを使う機会もあるんじゃないの、と。
そして2に関しては、じゃあ自分のメイン言語であるSwiftで写経すればいいのでは?と。
というわけで、やってみました。
(今回の成果物。まずは円を描いて動かすシンプルなところから)
写経元: Coding Challenge #7 : Solar System
冒頭に本を挙げて積読を問題提起しておいてなんですが、写経の教材は次の動画で解説されているProcessingのソースコードです。(これを思いついたときが外出先で、本は家にあったので。)
完成図
こんな感じになりました。ロジックほぼ完コピで、パラメータだけ画面サイズに合わせて少し変えています。
SpriteKit
ProcessingのコードをどのようにSwiftで(というかiOSで)実現するかですが、SpriteKitをチョイスしました。理由は、Processingに比較的近い書き方で図形を描いたりアニメーションを描画したりできそうだなと。
たとえばレンダリングループ内で呼ばれるメソッドがあらかじめSKSceneに用意されてるところとか。
override func update(_ currentTime: TimeInterval) {
// 毎フレーム行う処理
}
実際のところ今回ぐらいの描画負荷であればUIKitでも良かったのですが、SpriteKitはもともと2Dゲーム制作を想定してつくられたフレームワークなので、今後もっと複雑なProcessingのサンプルを移植するとすると、こちらのほうがグラフィックス処理的に優れているかなと。
ProcessingコードをSpriteKitコードに移植する
Processingの関数名そのままではありませんが、以下のようにほとんど単純置き換えでSpriteKitコードに移植できます。
translate
(Processing)
translate(distance, 0);
(Swift)
position = CGPoint(x: distance, y: 0)
fill
(Processing)
fill(255, 100);
(Swift)
fillColor = UIColor(white: 1, alpha: 100/255)
rotate
(Processing)
rotate(angle);
(Swift)
let action = SKAction.rotate(byAngle: angle, duration: 0)
run(action)
(楕)円の描画
(Processing)
ellipse(0, 0, radius*2, radius*2);
(Swift)
// 楕円
SKShapeNode(ellipseIn: CGRect(x: 0, y: 0, width: radius*2, height: radius*2))
// 円
SKShapeNode(circleOfRadius: radius)
etc...
足りないメソッドを補う
とはいえSpriteKitはProcessingとは用途が違うので、用意されてないメソッドもあります。
たとえばProcessingのrandom関数に相当するものがないので、次のように実装しておきます。
func random(min: Float = 0, max: Float) -> Float {
return (Float(arc4random_uniform(UINT32_MAX)) / Float(UINT32_MAX)) * (max - min) + min
}
ソースコードのダウンロード
Xcode 9.3、iOS 11.3で動作確認しています。なお、基本的にトラブルシューティング等のサポートは行っていません。ご容赦ください。
ここから先は
¥ 100
最後まで読んでいただきありがとうございます!もし参考になる部分があれば、スキを押していただけると励みになります。 Twitterもフォローしていただけたら嬉しいです。 https://twitter.com/shu223/