logglsl-livecoderを正常に使えるようにするまでglsl-livecoderはglslでライブコーディングを行うためのAtomパッケージである。正常に動作できるようになるまでにやや手こずったのでメモしておく。Atomの設定でglslangValidatorのパスを指定しないと正常に動かない。自分はglslangValidatorをインストールしてなかったので、次のステップで方法を紹介。基本的にリポジトリに記載されているビルドステップ通りにやれば良いわけだが、わかりづらい。以下に自分がやったステップを紹介する。CMakeはクロスプラットフォームのビルドツール。自分は、ダウンロードページからcmake-3.9.0-Darwin-x86_64.dmgをインストールした。cmakeが使えるようになる。Useに記載されている。クローンしてるのでスキップ。必要なステップだったか正直わからないが、一応1)で作ったディレクトリ内にクローンしておいた。Mac上での作業だったが、wnidow向けとして書かれていたステップで実行。glslangをクローンしたディレクトリ上で下記コマンドを実行。Windowsと書かれている方で実行。ドキュメントに記載されてた上記コマンドだと諸々のコマンドが見つからない旨のエラーが出た。congif指定を外して実行。google-services.jsonはFirebaseなどのgoogleサービスと連携するために必要なファイルだが、これはプライベートな情報であるためGithub等のpublicリポジトリの管理下に置くべきではない。単純にファイルを除外するだけだとCIサービスからファイルを参照できなくなり、ビルドに失敗する。CIで正常にビルドできるようにするまでをメモしておく。.gitignoreにgoogle-services.jsonを追加すればok。ターミナルから以下コマンドを実行。Variablesに追加する。設定した環境変数のテキストをjsonファイルにデコードする処理を書く。directory的なエラーが出るので、プロジェクト名とモジュール名(Firebaseで利用する際にはこの直下にjsonファイルを置くことになるので)も指定する必要がある。appまで指定しないとデコード処理は通るが、アプリのビルド処理でファイルが見つからずコケることになる。ちなみに、${HOME}は/home/ubuntu、${CIRCLE_PROJECT_REPONAME}はプロジェクト名が返る。これで正常にビルドできるようになった。Thingsで作ったアプリを表示する画面を縦向きにしたかったので調査してみた。Piの画面を縦にするのはできない(表示がぐちゃぐちゃになる)。上下逆さまにするのは可能。4.1では改善されていた。20日目の投稿である。毎日30分、決めたテーマに沿ってスケッチをする。自分の場合はopenFrameworksを使うのだが、processingでもjavascriptでも何でも良いと思う。30分1テーマってところがポイントで、毎日継続することに意味がある。Processing」というブログ。インスタレーション問わず目に見える部分に凝りたいと思っているので、動きの学習をすることはカッコよく気持ち良いモノをつくるのに重要だ。自分は普段はアプリをつくる仕事をしているのだが、クリエイティブコーディングのアルゴリズムは他のプラットフォーム(アプリ、web)のインタラクション実装にも活かせると思う。この辺りは別の機会にまとめたい。カッコイイもの、気持ち良いものをつくるのは単純に楽しい。やり方ってほどでもないが、自分がいつもやっていることを書く。テーマを決めてやることでその実装のみに集中できる。Transformといった感じ。テーマを決めることで一つ一つの実装量がシンプルになるので、実装方法を忘れた時に検索しやすくなるのも良いポイントである。短時間に制限することで継続できるようにする。30分という時間は正直短いが、前につくったスケッチを元にブラッシュアップしていくと30分でもそれなりに大きな作品にできる。継続することが大事なのだ。コードベースでスケッチを保存する場として、Github等のリポジトリにまとめておくと良い。視覚的にスケッチを見れるよう、最初はトップのREADMEにGIF画像を貼っていったが次第に重くなっていったので、視覚的なスケッチの保存は別の箇所で行うことにした。同じテーマでブラッシュアップしていく場合でも各スケッチごとにプロジェクトをつくっておくとそれそれの違いがわかって良い。ブログなど視覚的に成果を見れるページにあげておく。後から視覚的に見て実装を確認できるのと、溜まっていく感が楽しいからだ。自分の場合はTumblrに上げていっている。GIF画像とそのコードへのリンクを貼っておけばあとで参照できる。これはおまけなのだが、モチベーションを維持する意味でつくったスケッチはSNSにシェアするようにしてる。因みに、oFの父Zach氏も定期的にTwitterにスケッチをポストしている。issueとかにストックしておくと良いと思う。一連の流れは以下の通り。以前のスケッチをブラッシュアップする場合は、ファイルをコピペ。filesでファイル追加。SNSでシェア2016-12-20減衰のインタラクションアルゴリズムマウスの移動量に応じて値が大きくなり、徐々に値が0に戻っていく減衰のアルゴリズムを紹介する。コードはopenFrameworks。参考:https://github.com/ofZach/funkyForms/blob/e79b4728eac983530a16e7ebae33ed2f52fb5e13/sketches/Character/src/ofApp.cpp#L112016-09-07oFからAndroidのメソッドを呼ぶoFからAndroidのメソッドを呼ぶにはofxAndroidUtils内のいつくかのメソッドを使う必要がある。プロジェクトフォルダがsampleProjectの場合、ofApp.cppからcc.openframeworks.sampleProject.OFActivity#getIdメソッドを呼ぶ処理を以下に書く。TINYSHIELDを使ってTinyScreenにGIFを表示するTinyScreenというとても小さなArduino互換のディスプレイがあるのだが、今回はこれにGIF画像を表示する方法をメモしておく。冒頭でも述べたが、親指サイズの非常に小さなArduino互換デバイスである。詳しくは、公式サイトをみると良い。いうモジュールが必要になる。こちらは、文字通りMicroSD内のファイルを読み込めるようにするモジュールで、今回はこの中に保存されているGIFを表示する方法を紹介する。紹介といっても、すでにコードと解説はこちらに載っているので、重複する部分も多々あるがもう少し細かく説明しておこうと思う。TSVとはデータとデータの間がタブで区切られているテキストファイル。表示するGIF画像はこのTSV形式に変換しておかないとプログラムで表示できないので、ここではその変換を行う。こちらからTSVconverter.pyファイルをDLする。GIFファイルをTSVconverter.pyファイルと同階層においておく。TSVconverter.pyファイルをpythonコマンドで実行すればTSVファイルが生成される。TSVconverter.pyを実行する場合、おそらくこんなエラーが出る。PILがインストールされてないらしい。pipをインストール。パーミッションエラーが出たらsudoで実行。Art風TextEditorアニメーションする文字を生成するTextEditorぽいもの(TextEditorなんて大層なものじゃない)をつくった。ポイントはPGraphicsを使う点だろう。PGraphicsとは別画面のようなもの。テキストやグラフィックを描画することができるのだが、その結果は画面上には反映されない。裏側で仮の描画を行ったり、描画を保存しておいたりする際に使うそう。今回はこのPGraphicsを用いてTextEditorをつくる。これで以下のように描画される。以下に実際のコードを抜粋していく。h2015-07-11【Processing】眼球を描くこちらの記事を参考に眼球を描いてみた。眼球はマウスカーソルに追従するようになってる。球体の描き方は↑に丁寧にまとめられてるのでそちらを参照すると良い。球体はpoint()で円上に配置した点をZ軸の上に半径を変えて重ねている。ボールを輪切りにしたようなイメージかも。目ん玉の部分は塗りを有効にするためにbeginShape()とendShape()を用いており、vertex()によって点を描画している。眼球描画部分のコードを以下に載せておく。