t-hom’s diary

主にVBAネタを扱っているブログ…とも言えなくなってきたこの頃。

Stormworks初めてみた ~ ブロックパーツで乗り物を設計してレスキュー任務をこなすゲーム

今回は前から気になっていたストームワークスというゲームを買ってみた。

経緯

今回このタイミングでこのゲームを始めた経緯は最近取り組んでいるProcessing言語にさかのぼる。
Processing→ベクトル理解した!→微分も攻略したい!→PID制御→ストームワークス!という流れ。

なんのこっちゃと思われるかと思うのでもうちょっと説明する。

最近Processing言語でベクトルの概念を覚えたのでこのまま調子にのって数学を調べ始めPythonを使った微分の学習を始めた。
ところが今のところ応用先を知らないのでどうにも身が入らない。何か良い応用範囲が無いかなと思って調べていると、PID制御(Proportional:比例・積分:Integral・微分:Differential)という応用があるらしいことを知る。

それでこちらのライントレースロボットのPD制御(積分は入ってないらしい)の動画を見て、あまりの滑らかさに感動する。
youtu.be

もしかして、微分ってすごいのでは?(アホまるだし)

で、微分の学習を始めるかと思いきや、こんなものを見つけてしまったんだ。
youtu.be

なんと、ゲームでPID制御を使った装置を作れる!

こんなん面白いに決まってるやん。。というのが経緯。

やってみた

このゲームは初見殺しで、キャリアモードといういわゆるストーリーモードで始めると多分挫折する。
最初に簡単なレスキュー任務をやらされるんだけど、割と分かりにくいしそれが終わると好きにしろって感じで放り出される。
初期装備のボートをいきなりワークベンチでカスタムできるんだけど、そもそも何をどうすれば良いか不明。

なので最初からカスタムモードで、YouTubeの先駆者の動画を見ながら始めるのが吉。

人助けなど知ったことか!俺は好きにマシンを作るんじゃい!

ということで、人命そっちのけでクラフトシミュレーターとして遊び始める。

導入にはこちらの動画がおススメ。
youtube.com

動画の#3で簡単な電気自動車の作り方を学んだら、そこから電気自動車の装飾ブロックを全部削る。

これでも普通に乗って動かすことが出来てしまう。
分解すると構造がよく分かるので自分でも好きなようにデザインできそうだ。

早速イチからデザインしてみた。

好きなパーツ組み合わせて、

ロジックを組む。

うわぁ。。だいぶ前傾してる。

まぁ細かいことは気にせず、いざ出発!

おお、動く!よし、曲が

れなかった。。

感想

個人的には用意されたボートで単にレスキュー任務をこなすだけならただのクソゲーだけど、パーツを接続して動作させるロジックが分かるとかなり面白い。

エンジニアリングが好きな人はハマると思うので気になる方はぜひ。

ProcessingのPythonモードで色相環を書き直してみた

Processingについて調べていると、こんな書籍を見つけた。

なんと、Pythonの文法でProcessingが使えるのか!?

行きつけの書店の在庫をチェックすると「△」。

これは即断を迫られている気がして早速お出かけした。

中はこんな感じで全く飾り気がないザ・教科書という感じ。

厚さ1cmもないのでPythonもProcessingも経験したことがあればPythonでProcessingを使いはじめる導入には最適だと思う。


先日書いた色相環のプログラムを早速Pythonモードで書き換えてみた。

コード

コード中のnが玉の個数、radiusは玉が環状に配置される際の環の半径で、玉のサイズはこの2点から自動決定される。

import math
n = 16
radius = 230
ball_size = math.pi * 2 * radius / n

size(800, 600)
background(240)
colorMode(HSB, 360, 100, 100, 100)
translate(width/2, height/2)

for i in range(n):
    angle = 360.0/n * i
    x = cos(radians(angle)) * radius
    y = sin(radians(angle)) * radius
    fill(color(angle, 100, 100, 70))
    ellipse(x, y, ball_size, ball_size)

実行結果

n:30、radius:100 の場合

n:8、radius:200 の場合

Pythonモードに切り替えてみた所感

どっちが優れているかなどという野暮な議論はしないけども、個人的に書いていて楽なのはPythonだ。セミコロンや波カッコを多用しないので小指に優しく、書いていてストレスを感じにくいように思う。

あとは個人的にPythonを次の得意言語にしたいという狙いもあるので、今後ProcessingはPythonも併用していこうかなと思う。

以上

Processing 3.5.4 不親切なエラー 「クラス 〇〇 は存在しません」でハマった話

今回はProcessingの学習で開発環境の不親切さによりハマった話。

現在開発環境としてはProcessing 3.5.4を使っているのだが、クラスを作成しているにも関わらず、そのクラスの型を使用しようとコードを書いている途中でクラスが存在しないというエラーが出た。

ちゃんとフォルダー内にはParticleクラスがあるし、

タブにも出ているのにエラー。

結論から述べると、これはメインコードにsetupとdraw関数を書くことで解消する。

え、クラス自体は有るのにそのエラーは違うくない?ということで不親切エラーと認定。
ProcessingはJavaが持つ複雑性をうまく隠してくれている気がするので、その副作用と言って良いかもしれない。

今回は入門書での写経学習中にこのエラーが発生したためdraw関数を書き始める前にトラブルシュートに入ってしまったため、Processingの旧バージョンをダウンロードしてみたり色々とハマってしまったけど、途中のエラーを気にせず書き写しきっていたら解消していたということらしい。

なお、ネット記事を参考にファイルを追加からクラスファイルParticle.pdeを追加してみようとしたところ、折角書いたクラスのコードが全消失するという悲劇に見舞われた。

同じ轍を踏まないよう、危険操作として紹介しておこう。

まず、クラスが無いというエラーを受け、何かインポート操作が必要なのではないかと推測した。
ネット検索でファイル追加してみてはというアドバイスを見かけたのでやってみた。

「スケッチにコピーする画像やその他のデータファイルを選択してください」というタイトルから、インポート操作に相当すると推測。

Particle.pdeを選択したところ「既存のParticle.pdeを置き換えますか?」とメッセージ

からの、全消失。。

こればかりはマジギレ案件。

後で検証してみたところ、ちゃんと外部ファイルからのインポートであればこの操作でうまくいくようだ。

今読み込み中のParticle.pdeを、この操作で再度自己インポートしようとすると全消失が発生するということらしい。

消失した際にコンソールには次のようなエラーが表示されていた。

つまり、Particle.pdeをインポートする際に、今読み込み済みのParticle.pdeを上書きするか尋ねられ、OKを押すとまず今読み込み済みのParticle.pdeが抹消された後に、新しく指定されたParticle.pdeを読み込もうとするものの、読み込もうとしたParticle.pdeが今まさに抹消されたそれだから、「あれ、そんなの無いよ?」というエラーらしい。

ふざけんな。お前が消したんやろがい!!!

ということで、皆さんはちゃんと最初からGitHub使いましょう。。。

現場からは以上です。

Processingでベクトル演算

今回はProcessing入門書に沿ってベクトル演算を使った放物線のアニメーションをやってみたところ、ベクトルの扱いがあまりに簡単で拍子抜けしてしまったのでそのことについて書く。

さて、私は数学が苦手なのでベクトルについては「矢印をこねくり回すややこしい概念」くらいぼやっとした知識である。

Processingの入門書でさらっと解説してくれるけど、まぁなんか難しそうな印象。足し算は分かるけど、引き算の矢印の起点てそこで合ってるのか??

まぁ取り合えずやってみるか。。と写経を始めた。

え。こんな使うの??なんでもかんでもベクトルだな。。


初期化で気づく。これひょっとして、ただの2要素タプルなのでは?

位置ベクトルなどというややこしい概念を持ち出して位置を原点からのベクトルで表せますみたいなことも書いてあったけど、ただの座標だよな。。

なんでベクトルなんてややこしい入れ物を使うのかと思ったけど、ベクトル同士の計算が楽っぽい。

放物線のメインの物理計算としては上記だけで完結していて、このコードがやってるのは以下のような内容。

  1. 加速度に重力を足す
  2. 速度に加速度を足す
  3. 速度に1-摩擦係数を掛ける
  4. 位置に速度を足す
  5. 加速度をリセット
  6. 描画


中身は恐らく結局x同士・y同士を計算してるだけで、プログラマーとしては至極ありふれた処理なんだけど、数学的にするとこれがベクトルという概念になるのか、なるほど。

え、まさか私が学生時代に挫折したベクトルの本質ってこれだけ?まじで?

あ、そもそも授業寝てたから挫折すらしてねぇわ。

以上

Processingと三角関数で滑らかなアニメーション

Processingの学習でアニメーションの基本的なところまで進んだので、動きのあるものを作ってみた。

コード

float diameter;
float radius = 200;
int angle = 0;
float brightness = 0;
float hue;
float x, y;
int count = 8; // 玉の数

// (1)
void setup() { 
  size (800, 600);
  frameRate(30);
  stroke(255);
  colorMode(HSB, 360, 360, 100, 100);
}

// (2)
void draw() {
  translate(width/2, height/2);
  background(0);
  
  diameter = 20 + sin(frameCount * 0.1) * 50; // (3)
  brightness = sin(frameCount * 0.1) * 120; // (4)
  
  radius = sin(frameCount * 0.1) * 200; // (5)
  
  fill(0, 0, brightness);
  for (int i=0; i<count; i+=1) {
    x = radius*cos(radians(angle+360/count*i));
    y = radius*sin(radians(angle+360/count*i));
    ellipse(x, y, diameter, diameter);
  }
  angle += 5;

}

解説

(1) setup、(2)drawについて

アニメーションを作る場合はsetup関数でフレームレート等の初期設定、draw関数でフレームごとの処理を書くという決まりらしい。そうすると自前でループ処理を書かなくても自動的にコマ送りしてくれ、drawにはコマごとの処理を書けば良いということになる。

(3) diameterについて

これは玉の直径を三角関数を使ってなめらかに変化させている。
前回の記事で三角関数を使って円を描けることを説明したが、角度を等間隔で変更していくと三角形の高さと幅の変化量は等間隔ではなく変化量そのまのが変化していることが分かる。この性質を加速・減速として使うことでアニメーションをカクカクさせずに滑らかに変化させることができる。

(4) brightnessについて

これも三角関数の性質を使って明るさを滑らかに変化させている。

(5) radiusについて

これは軌道直径を表す変数。ちょっと名前が雑だったかな。。
こちらも三角関数で滑らかに変化させる。

まさに三角関数のオンパレード。

改造

ちょっと色を付けて更にtranslateの値もいじってみたら面白い動きになった。

改造版のコード

float diameter;
float radius = 200;
int angle = 0;
float brightness = 0;
float hue;
float x, y;
int count = 8;

void setup() {
  size (800, 600);
  frameRate(30);
  stroke(255);
  colorMode(HSB, 360, 100, 100, 100);
}

void draw() {
  translate(width/2, height/2);
  background(0);
  
  diameter = 20 + sin(frameCount * 0.1) * 50;
  brightness = sin(frameCount * 0.1) * 120;
  
  radius = sin(frameCount * 0.1) * 200;
  
  translate(cos(radians(angle))*250, sin(radians(angle))*150);
  fill(frameCount%360, 100, brightness);
  for (int i=0; i<count; i+=1) {
    x = radius*cos(radians(angle+360/count*i));
    y = radius*sin(radians(angle+360/count*i));
    ellipse(x, y, diameter, diameter);
  }
  angle += 5;

}


以上

Processingで三角関数を使った処理 ~ 色相環を作ってみた。

今回はProcessingを使って色相環を作ってみた。
こんなやつ。

前回の記事で簡単にHSB形式(Hue/色相・Saturation/彩度・Brightness/明度)で色を指定できるという話を書いたけど、これを使えば単にループ内で色相の値を増加させていくだけで綺麗な色相グラデーションになる。

コード

int particle_size = 50;
float radius = 200.0;
float x = 0.0;
float y = 0.0;
 
size(800, 600);
background(255);
translate(width/2, height/2);  // (1)

colorMode(HSB, 360, 100, 100, 100); // (2)

float saturation, brightness, alpha;
saturation = 100;
brightness = 200;
alpha = 50;

for (int angle=0; angle < 360; angle += 10) { 
   // (3)
  fill(color(angle, saturation, brightness, alpha));

   // (4)
  x = radius*cos(radians(angle));
  y = radius*sin(radians(angle));
  ellipse(x, y, particle_size, particle_size);
}

説明

(1) translateについて

この命令はネットのサンプルで見つけて感動したのだが、普通は画面の左上が座標(0, 0)となるのに対し、translate命令を出しておくと好きな場所を(0, 0)として扱うことができるようになる。

これを付けないとこうなる。

さすがProcessing。座標のオフセットって自前でやると結構面倒くさくて混乱増長ポイントなのでこれはありがたい。

(2) colorModeについて

ここではHSB形式を指定しているが、ここで凄いのが引数として色相・彩度・明度の諧調を指定できるということ。
例えば普通の言語では0~255で明度を指定するとしよう。ここで0は黒、255が白で中間はグレーになる。
Processingでは100を指定すると0が黒で100が白の100諧調という風に、扱うプログラムの都合に応じて諧調を分かりやすく指定できる。

例えば今回は角度angleが0度~360度でループさせるのでそれに合わせて明度を360諧調で指定すると、0が黒、360が白となり、次のような描画を簡単に作成することができる。

わざわざレート変換しなくて済むのが素晴らしい。

(3) fillについて

ここは次回の描画に備えて塗りつぶしカラーを指定しているだけの文。
前回紹介したように、Processingでは筆に絵具をとるように描画の前に色を指定することができる。
これにより図形描画の際は色のことは忘れて座標やサイズに専念すればよくなり、コードがスッキリする。

(4) 三角関数について

ここでは三角関数を使って環状に色サンプルを配置している。
三角関数の引数には弧度法(Radian)を使うので、角度(Degree)からRadianに変換する必要がある。
Processingではこのためにradiansというシンプルな関数が用意されている。

なんで三角関数でプロット位置(X, Y)が求まるかというと、角度と半径が分かれば結局円に内包される直角三角形の底辺Xと高さYがそのまま座標になるため。

三角関数とは、斜辺の長さと角度が分かれば直角三角形のサイズ(つまり、XとY)が分かるというものなのでコンピューターで円を描くためには必須となる。

数学を真面目にやった人なら常識なんだろうけど、恥ずかしながら私は去年知ったばかり。。


さて、今回はProcessingで簡単に色相環を作ってみた。
簡単じゃないと思った方は、ぜひ自分の得意な言語で同じような描画を試してみて欲しい。
そうするとProcessingのシンプルさ、強力さが見えてくると思う。

追記

ちょっといじったらこんなのもできた。1記事追加するのもアレなので追記ということで。

Processing面白い。

アート作品に最適なプログラミング言語 Processingを触ってみた。

今日は書店でProcessingというプログラミング言語の書籍を買ってきた。

Processingはアートに特化したプログラミング言語である。
そういわれてもあんまりイメージ湧かないと思うので、まずは実際にProcessingで製作された作品をご覧いただきたい。
youtu.be

すごい。。

もちろん一般的なプログラミング言語でもグラフィクスライブラリを用いれば似たようなこともできる。
VBAですら、頑張ればアート作品が作れないこともない。
thom.hateblo.jp


ではProcessingは汎用言語と何が違うのか。
たとえば他の言語だと、アート表現の本質と関係ない部分でけっこう面倒くさい処理をしないといけなかったりする。
Processingではシンプルな言語仕様と充実した描画機能によって創作の本質的な部分に専念できるようになっているのだ。

書籍の最初の方に出てくるサンプル(ちょっといじってる)はこんな感じ。

まず感動したのが特にライブラリを用いなくてもHSB形式の色指定ができること。
もちろんRGBも使えるが、RGBって実は色を扱う上ではかなりコンピューター寄りで、人間にとってはあんまり直感的ではない。

普段パソコンでのRGB色指定に慣れている方からするとあんまりピントこないかもしれないけど、たとえば赤色を濃くしてマルーンにしたり、薄くしてピンクにしたりといった操作をするのにRGBだと面倒くさい。赤を操作したいのに緑と青の値もバランスよくいじらないと実現できない。
HSB形式なら色相は赤で固定なので、あとは明度をいじるだけで直感的に明暗の操作ができる。

あと、色を指定してから図形を描くという文脈依存も面白い特徴だと思う。
他の言語の描画ライブラリは大抵、図形描画に座標と合わせて色の情報も付加するので図形を描く毎に色を指定するのだが、Processingでは一度色を指定するとそのまま同じ色で連続描画することができる。
もちろん途中で色指定を変えればそれ以降は違う色になる。
これって、筆に絵具を取る感覚に近いような気がする。

文脈依存はバグを生みやすいので汎用言語ではなるべく避けたいけれど、直感的で楽なのでアート作品を作る用途だとこういうやり方の方が向いてるのかもしれない。


さて、突然アート作品ってまた突飛なことをやりだしたなと思われるかもしれないが、実は別にアートを作りたいという訳ではない。

プログラミングでグラフ(グラフ理論のアレ)を視覚的に扱いたいという想いが以前からあって、以前こういう記事を書いたのだが、いかんせんこの分野は門外漢なのでなかなかうまくいかずにもどかしい。
thom.hateblo.jp

そこで、図形の扱いに長けたProcessing言語を使うことで余計な複雑さを排して図形を扱うアルゴリズムを考えることに専念できるのではないかと考えた。

Processingで作図系のプログラミング技術を身に付ければ、他の言語にノウハウだけ持ち帰ることができるのではないかという魂胆である。

まぁ実際のところ挫折せずにどこまで行けるかはやってみないと分からないけど、とりあえずこの書籍1冊分くらいはさくっと終わらせたいと思う。

当ブログは、amazon.co.jpを宣伝しリンクすることによってサイトが紹介料を獲得できる手段を提供することを目的に設定されたアフィリエイト宣伝プログラムである、 Amazonアソシエイト・プログラムの参加者です。