r21nomi.log

Art & Tech log

git管理下から除外したgoogle-services.jsonをCircle CIから読み込む

TL;DR jsonファイルをbase64化してテキストにする それをCircle CIの環境変数に設定 circle.ymlでjsonファイルにデコードする命令を書く 概要 google-services.jsonはFirebaseなどのgoogleサービスと連携するために必要なファイルだが、これはプライベートな情報であるためGithub等のpublicリポジトリの管理下に置くべきではない。 だが、単純にファイルを除外するだけだとCIサービスからファイルを参照できなくなり、ビルドに失敗する。 Circle CIではドキュメントに方法が記載されているが、Firebaseの場合、単純にこの通りではうまくいかないので、本記事ではファイルを除外し、Circle CIで正常にビルドできるようにするまでをメモしておく。 手順 google-services.jsonの除外 .gitignoreにgoogle-services.jsonを追加すればok。 google-services.jsonをbase64化 ターミナルから以下コマンドを実行。 $ openssl base64 -in <SOURCE_FILE_NAME> -out <OUT_FILE_NAME> Circle CIの環境変数に登録 Circle CIプロジェクト設定のEnvironment Variablesに追加する。 例えば、こんな感じ。 GOOGLE_SERVICES_JSON xxxxxxxxx... circle.ymlの設定 設定した環境変数のテキストをjsonファイルにデコードする処理を書く。 dependencies: pre: ... - echo $GOOGLE_SERVICES_JSON | base64 --decode --ignore-garbage > ${HOME}/${CIRCLE_PROJECT_REPONAME}/app/google-services.json CircleCIのドキュメントでは${HOME}/gcloud-service-key.jsonとなっているが、これだとno such file or directory的なエラーが出るので、プロジェクト名とモジュール名(Firebaseで利用する際にはこの直下にjsonファイルを置くことになるので)も指定する必要がある。 appまで指定しないとデコード処理は通るが、アプリのビルド処理でファイルが見つからずコケることになる。 ちなみに、${HOME}は/home/ubuntu、${CIRCLE_PROJECT_REPONAME}はプロジェクト名が返る。 これで正常にビルドできるようになった。


Raspberry Piで動かすAndroid Thingsの画面を回転させる

Android Thingsで作ったアプリを表示する画面を縦向きにしたかったので調査してみた。 結論から先に言うと、Android ThingsでRaspberry Piの画面を縦にするのはできない(表示がぐちゃぐちゃになる)。 上下逆さまにするのは可能。 準備 任意のディレクトリにmnt/diskフォルダを作成 マウントするディスク名を確認 $ diskutil listで確認。 $ diskutil list /dev/disk0 (internal): #: TYPE NAME SIZE IDENTIFIER 0: GUID_partition_scheme 251.0 GB disk0 1: EFI EFI 314.6 MB disk0s1 2: Apple_CoreStorage Macintosh HD 250.0 GB disk0s2 3: Apple_Boot Recovery HD 650.0 MB disk0s3 /dev/disk1 (internal, virtual): #: TYPE NAME SIZE IDENTIFIER 0: Apple_HFS Macintosh HD +249.7 GB disk1 Logical Volume on disk0s2 1B8724D6-D1C3-4B9E-81D2-2044A29AB042 Unlocked Encrypted /dev/disk2


1日1スケッチのススメ

この記事はクリエイティブコーディング Advent Calendar 2016 20日目の投稿である。 TL;DR 1日1個スケッチをする 1テーマに決めてやる 30分でやる 1日1スケッチ 毎日30分、決めたテーマに沿ってスケッチをする。 自分の場合はopenFrameworksを使うのだが、processingでもjavascriptでも何でも良いと思う。 30分1テーマってところがポイントで、毎日継続することに意味がある。 この活動のインスパイア元は「30 min. Processing」というブログ。 目的 動きの学習のため アプリ, web, インスタレーション問わず目に見える部分に凝りたいと思っているので、動きの学習をすることはカッコよく気持ち良いモノをつくるのに重要だ。 また、自分は普段はアプリをつくる仕事をしているのだが、クリエイティブコーディングのアルゴリズムは他のプラットフォーム(アプリ、web)のインタラクション実装にも活かせると思う。 この辺りは別の機会にまとめたい。 楽しい カッコイイもの、気持ち良いものをつくるのは単純に楽しい。 やり方 やり方ってほどでもないが、自分がいつもやっていることを書く。 1テーマを決めてやる テーマを決めてやることでその実装のみに集中できる。 例えば、BlobやPattern, Transformといった感じ。 また、テーマを決めることで一つ一つの実装量がシンプルになるので、実装方法を忘れた時に検索しやすくなるのも良いポイントである。 30分でやる 短時間に制限することで継続できるようにする。 30分という時間は正直短いが、前につくったスケッチを元にブラッシュアップしていくと30分でもそれなりに大きな作品にできる。 継続することが大事なのだ。 Githubにまとめておく コードベースでスケッチを保存する場として、Github等のリポジトリにまとめておくと良い。 視覚的にスケッチを見れるよう、最初はトップのREADMEにGIF画像を貼っていったが次第に重くなっていったので、視覚的なスケッチの保存は別の箇所で行うことにした。 また、同じテーマでブラッシュアップしていく場合でも各スケッチごとにプロジェクトをつくっておくとそれそれの違いがわかって良い。 GIFを一覧できるページにあげる ブログなど視覚的に成果を見れるページにあげておく。 後から視覚的に見て実装を確認できるのと、溜まっていく感が楽しいからだ。 自分の場合はTumblrに上げていっている。 GIF画像とそのコードへのリンクを貼っておけばあとで参照できる。 シェアする これはおまけなのだが、モチベーションを維持する意味でつくったスケッチはSNSにシェアするようにしてる。 因みに、oFの父Zach氏も定期的にTwitterにスケッチをポストしている。 porcupine font pic.twitter.com/ftQtytlWyQ — zach lieberman (@zachlieberman) 2016年12月19日 アイデアはissueにまとめておく いざスケッチをしようと思っても何やろうかなかなか思いつかないこともあるので、実装してみたいアイデアを issueとかにストックしておくと良いと思う。 まとめ 一連の流れは以下の通り。 テーマのディレクトリを作成 テーマディレクトリ配下にoFのprojectGeneratorでprojectを作成 以前のスケッチをブラッシュアップする場合は、ファイルをコピペ。Xcodeにもadd filesでファイル追加。 30分でスケッチ GIF画像で記録(自分はLICEcap使ってる) Githubのリポジトリにpush TumblrにGIFをポスト SNSでシェア


減衰のインタラクションアルゴリズム

マウスの移動量に応じて値が大きくなり、徐々に値が0に戻っていく減衰のアルゴリズムを紹介する。 コードはopenFrameworks。 ofApp.h class ofApp : public ofBaseApp{ public: float velocity = 0; float smooth = 0.9; ofVec2f pMouse; }; ofApp.cpp void ofApp::update(){ ofVec2f m(mouseX, mouseY); ofVec2f dir = m - pMouse; velocity = smooth * velocity + smooth * dir.x; pMouse.set(mouseX, mouseY); } void ofApp::draw(){ ofDrawRectangle(mouseX - velocity, 0, 30 - velocity, ofGetHeight()); } コード 参考:https://github.com/ofZach/funkyForms/blob/e79b4728eac983530a16e7ebae33ed2f52fb5e13/sketches/Character/src/ofApp.cpp#L11


oFからAndroidのメソッドを呼ぶ

oFからAndroidのメソッドを呼ぶにはofxAndroidUtils内のいつくかのメソッドを使う必要がある。 例えば、プロジェクトフォルダがsampleProjectの場合、ofApp.cppからcc.openframeworks.sampleProject.OFActivity#getIdメソッドを呼ぶ処理を以下に書く。 OFActivity.java public class OFActivity extends cc.openframeworks.OFActivity{ ... // ofApp.cppからこのメソッドを呼びたい public int getId() { return 10; } } ofApp.h #include "ofxAndroidUtils.h" ... ofApp.cpp void ofApp::setup(){ // setup()は一度しか呼ばれないっぽい(バックボタンで戻った後に再度立ち上げても呼ばれない) ofLog(OF_LOG_NOTICE, "ID : " + ofToString(getId())); // 10 } // 2回目の起動以降はreloadTextures()が呼ばれるので、ここにも設定しておく必要がある // resume()も2回目以降の起動で呼ばれるが、ここでofImage.load()とかすると画像が正しく設定されないので、reloadTextures()で処理するのが良い void ofApp::reloadTextures(){ ofLog(OF_LOG_NOTICE, "ID : " + ofToString(getId())); // 10 } // OFActivity#getIdを呼んで返り値のintを取得するメソッド int ofApp::getId() { // Get env. JNIEnv *env = ofGetJNIEnv(); if (!env) { ofLogError() << "Couldn't get environment using GetEnv()." << endl; return -1; } // Find reference for OFActivity.


MICROSD TINYSHIELDを使ってTinyScreenにGIFを表示する

TinyScreenというとても小さなArduino互換のディスプレイがあるのだが、今回はこれにGIF画像を表示する方法をメモしておく。 TinyScreenとは 冒頭でも述べたが、親指サイズの非常に小さなArduino互換デバイスである。 詳しくは、公式サイトをみると良い。 MICROSD TINYSHIELDを使ってGIFを表示する GIFの表示には、TinyScreen本体に加えてMICROSD TINYSHIELDと いうモジュールが必要になる。 こちらは、文字通りMicroSD内のファイルを読み込めるようにするモジュールで、今回はこの中に保存されているGIFを表示する方法を紹介する。 紹介といっても、すでにコードと解説はこちらに載っているので、重複する部分も多々あるがもう少し細かく説明しておこうと思う。 Gif -> TSVファイルへの変換 TSVとはデータとデータの間がタブで区切られているテキストファイル。 表示するGIF画像はこのTSV形式に変換しておかないとプログラムで表示できないので、ここではその変換を行う。 準備 こちらからTSVconverter.pyファイルをDLする。 GIFファイルをTSVconverter.pyファイルと同階層においておく。 変換 TSVconverter.pyファイルをpythonコマンドで実行すればTSVファイルが生成される。 $ python TSVconverter.py エラーが出た時の対応 初めてpython TSVconverter.pyを実行する場合、おそらくこんなエラーが出る。 Traceback (most recent call last): File "TSVconverter.py", line 2, in <module> from PIL import Image ImportError: No module named PIL PILがインストールされてないらしい。 PIL(pillow)のインストール まずは、pipをインストール。 $ curl -kL https://bootstrap.pypa.io/get-pip.py | python ※Permission denied: '/Library/Python/2.7/site-packages/pip'エラーが出るかもなのでsudoつける必要あるかも $ curl -kL https://bootstrap.pypa.io/get-pip.py | sudo python 実行 $ ./gradlew lint && android-resource-remover --xml app/build/outputs/lint-results.xml 次に、PILのforkプロジェクトであるpillowをインストール $ pip install pillow パーミッションエラーが出たらsudoで実行。 正常にインストールされてることを確認 $ pip list ...


【Processing】Generative Art風TextEditor

アニメーションする文字を生成するTextEditorぽいもの(TextEditorなんて大層なものじゃない)をつくった。 解説 ポイントはPGraphicsを使う点だろう。 PGraphicsとは別画面のようなもの。 テキストやグラフィックを描画することができるのだが、その結果は画面上には反映されない。 裏側で仮の描画を行ったり、描画を保存しておいたりする際に使うそう。 今回はこのPGraphicsを用いてTextEditorをつくる。 PGraphicsの生成サンプル PGraphics pg; void setup() { size(400, 400); background(0); rectMode(CENTER); pg = createGraphics(width, height, JAVA2D); pg.beginDraw(); pg.textSize(12); pg.textAlign(CENTER, CENTER); pg.fill(255); pg.text("Hello", pg.width/2, pg.height/2); pg.endDraw(); // 描画 image(pg, 0, 0); } これで以下のように描画される。 シンプルである。 以下に実際のコードを抜粋していく。 初期パーティクルの生成 // 画面の分割数 // この値が大きいと点の間隔が狭くなり、細かいパーティクルができる int gridX = 100; int gridY = 130; void initParticles() { particles = new ArrayList(); // 点同士の間隔 float w = float(width) / gridX; float h


【Processing】眼球を描く

こちらの記事を参考に眼球を描いてみた。 眼球はマウスカーソルに追従するようになってる。 ざっくり解説 球体の描き方は↑に丁寧にまとめられてるのでそちらを参照すると良い。 球体はpoint()で円上に配置した点をZ軸の上に半径を変えて重ねている。 ボールを輪切りにしたようなイメージかも。 目ん玉の部分は塗りを有効にするためにbeginShape()とendShape()を用いており、vertex()によって点を描画している。 眼球描画部分のコードを以下に載せておく。 EyeBall.pde class EyeBall { float radius = 200; float dir = 1; float val = 0; float lastX; float lastY; float lastZ; EyeBall() {} void display() { val += 5; for(int s = 0; s <= 180; s += 10){ float radianS = s == 0 ? radians(3) : radians(s); float expansion = map(sin(radians(val)), -1, 1, 1, 1.5); float z = radius


【Processing】蜘蛛の巣っぽいビジュアルを描く

流れは以下 多角形の頂点を作成 多角形になるように頂点を結ぶ線分を作成 外側から内側の多角形へ頂点を結ぶ線分を作成 各頂点座標にランダム値をプラスすることで微弱な揺れを表現してる spider.pde ArrayList<ArrayList<Particle>> particleGeneration; // 各点の位置用 ArrayList<ArrayList<Connection>> connectionGeneration; // 各点を繋ぐ線用 ArrayList<ArrayList<Connection>> boneGeneration; // 外から内に向かう線用 int count = 12; int radius; int distance = 360 / count; void setup() { size(displayWidth, displayHeight); radius = displayHeight / 2; particleGeneration = new ArrayList(); connectionGeneration = new ArrayList(); boneGeneration = new ArrayList(); for (int k = 0; radius > 0; k++) { ArrayList<Particle> particles = new ArrayList(); ArrayList<Connection> connections =


【Processing】水中に落ちるボールを再現してみる

空中から落としたボールの速度が、水の中に入った瞬間にゆっくりになる様子を再現。 水中での流体抵抗はThe Nature of Code Examplesのfluidresistanceを流用し、これに着水時の気泡を加えた。 コードはこちら