2018-07-02

Processingを触ってみる ①

時間が無くて個人開発に手を付けられていませんが、
以前VJをやってくれと言われてProcessingでVJプログラムを組んだことがあったので、今回はそれについて書いていこうとおもいます。

VJとは

Video Jockeyの略で、音楽に合わせて映像を流す（人の）ことです。
エレクトロ系のバンドで使われることが多いような気がします。
↓のdownyなんかはメンバーとしてVJが所属しています。

youtu.be

今回はD.A.N.というバンドのコピーに合わせることになったので
↓こんな感じ映像を作ることを目標に…

youtu.be

Processingとは

デジタルアートとビジュアルデザイン向けのオープンソースプロジェクトで、
Javaベースで作られているため、取っつきやすいかな～と思って採用しました。
どちらかというとC++ベースのopenFrameworksなんかがメジャーだと思います。

描いてみる

円を描いてみます。

void setup() {
  //描画領域サイズ
  size(400, 400);
  //背景色
  background(255);
}

void draw() {
  //線の色
  stroke(0, 0, 200);
  //描画する円（x軸始点, y軸始点, 幅, 高さ）
  ellipse(width/2, height/2, 250, 250);
}

setup()で描画する領域を設定し、draw()で描画します。
実行するとこんな感じ。

f:id:terraria64:20180702154529p:plain

動かしてみる

円だけ描いても仕方ないので動かします。

void setup() {
  //描画領域サイズ
  size(400, 400);
  //背景色
  background(255);
}

float x = 10;

void draw() {
  //画面全体に白い四角を描画
  fill(255);
  noStroke();
  rect(0, 0, 400, 400);
  //円を描画
  noFill();
  stroke(0, 0, 200);
  //描画する円（x軸始点, y軸始点, 幅, 高さ）
  ellipse(x, height/2, 250, 250);
  //x始点をずらす
  x = x + 1;
}

円が右に動くだけのプログラムなのでこんな感じです。

f:id:terraria64:20180702160013g:plain

こんな感じでアニメーションを付けて、影を付けて…ってやっていくと段々とそれっぽくなっていきます。

音に反応させる

せっかくバンド演奏と一緒に流す映像なので、
音に反応して動くようにしたい、ということでMinimというライブラリを導入します。
Minimの導入とオーディオインプットについてはこちらを大いに参考にさせていただきました
yoppa.org

とりあえず、オーディオ入力を波形にして描画してみます。

import ddf.minim.*;

Minim minim;
AudioInput in;

void setup() {
  size(800, 600);
  background(0);
  //minimインスタンスを生成
  Minim minim = new Minim(this);
  in = minim.getLineIn(Minim.STEREO, 512);
}
void draw(){
  background(0);
  stroke(255);
  
  //波形を描画
  for(int i = 0; i < in.bufferSize() - 1; i++){
    float x1 = map( i, 0, in.bufferSize(), 0, width );
    float x2 = map( i+1, 0, in.bufferSize(), 0, width );
    line( x1, height/2 + in.mix.get(i)*50, x2, height/2 + in.mix.get(i+1)*50 );
  }
}

こんな感じになります f:id:terraria64:20180702164107g:plain

さすがにこれだけだとつまらないので、冒頭で紹介したD.A.N.の映像に近づくように
音に合わせて大きさが変わる円なんかも描いていきます。
後はオーディオ入力のゲインを変えて変化量をリアルタイムに変えたり…
というところはまた次回…

2018-06-20

vue-cliでVue.jsのWebアプリケーションを作る ② - transition を触ってみる

だいぶ間が空いてしまいましたが、業務に一区切りついたので今回はVue.jsで要素にアニメーションを付けていきたいと思います。

アニメーションの設定

Vueではtransitionというラッパーコンポーネントで要素をラップすると、その要素の表示、追加、削除時にCSS トランジションを適用するクラスを付けてくれるらしい… （参考：Enter/Leave とトランジション一覧）

初見ではよく分かりませんでしたが、とりあえず触ってみます

要素をフェードインさせてみる

とりあえず

最初なので、単純にpタグをフェードインさせるところから始めます。

<div>
  <p>おはようございます</p>
</div>

ページ表示時に「おはようございます」をフェードインさせるために pタグをtransitionコンポーネントでラップします。

<div>
  <transition name="greeting">
    <p>おはようございます</p>
  </transition>
</div>

name属性でトランジションに名前をつけると便利とのことなので、適当に名前をつけます

トランジションの設定

transitionコンポーネントには、状態に応じて次のようにクラスが付与されるとのこと。 f:id:terraria64:20180620110114p:plain （参考:トランジションクラス） CSSで、このクラス毎にスタイルを設定していきます。先ほどtransitionタグ内で設定したname属性の値がクラス名の先頭に付きます。

今回はフェードインなので透明度100%→0%を1秒かけて実行します。

/* 要素の挿入前、削除後のスタイルを設定 */
.greeting-enter, .greeting-leave-to {
  opacity: 0;
}

/* トランジション中の要素の状態 */
.greeting-enter-active, .greeting-leave-active {
  transition: opacity 1s; 
}

これだけでトランジションの設定ができてしまった…簡単ページ表示時に「おはようございます」がフェードインしてきます

デモは用意できてないですがこんな感じでアニメーションつけてポートフォリオサイトのトップページを作っていきます

次回はJavaScriptフックなども絡めてさらに複雑なアニメーションを作る予定…

2018-05-31

vue-cliでVue.jsのWebアプリケーションを作る

Vue.js

Rails + Vue.jsでWebアプリケーションを作っている途中ですが、その前にVue.jsのお勉強ということでvue-cliを使って簡単なアプリケーションを作ってみます。

何を作るか

大学のアート系学科に在席している知人のポートフォリオサイトを制作します。
就職活動にあたってポートフォリオの提出を求められることが多いtとか。
紙で作る人も多いとのことですが、今回はWebでポートフォリオサイトを作っていきたいと思います。
ついでにそのサイトを自分のポートフォリオにしてしまおう

開発環境

こちらもAWS Cloud9で開発することにしました。
まずはポートフォリオサイト用のディレクトリを作ります。

mkdir terraFolio

ふざけた名前ですが、このディレクトリに構築していきます。

アプリケーションの構築

こちらの記事を参考にさせていただきました。
Cloud9でvue-cli環境を作る

vue-cliをインストール

まずは、npmでvue-cliをインストールします

npm install -g vue-cli

Vue.jsのプロジェクトを作る

作成したプロジェクト用ディレクトリへ移動し、Vue.jsのプロジェクトを作ります。

cd terraFolio
vue init webpack

これでVue.jsのプロジェクトが作成されました。 nodeモジュールをインストールします。

npm install

サーバーを起動する

Cloud9でdevサーバーを動かす場合には、build/webpack.dev.conf.jsの設定を変える必要があるようなので、以下のように変更します。

devServer: {
  clientLogLevel: 'warning',
  historyApiFallback: true,
  hot: true,
  compress: true,
- host: process.env.HOST || config.dev.host,
- port: process.env.PORT || config.dev.port,
+ host: '0.0.0.0',
+ port: '8080',
+ disableHostCheck: true,
　　　　・
　　　　・
　　　　・
}

これでサーバーが立ち上がるようになりました。
devサーバーを立ち上げてみます。

npm run dev

Welcome to Your Vue.js App
とても簡単にできてしまいました。 f:id:terraria64:20180531150439p:plain
次回は中身をいろいろ触ってトップページを作っていこうと思います

2018-05-27

Rails + Vue.jsでWebアプリケーション開発 - 2

Ruby on Rails Vue.js

日が空いてしまいましたが、今回は環境構築をしていきたいと思います。

開発環境

私物のMacにはEclipseとXcodeが入っていますが、今回の開発ではAWS Cloud9を使っていこうと思います。理由としては、インターネット環境さえあればどのPCでも開発できることと、 AWSについても開発しながらお勉強をしていこうと思ったからです。

AWSアカウント作成

登録から12ヶ月無料期間がついてくるとのことで、とてもありがたい話です。下手なことをしていきなり料金請求などされたら怖いので、AWS公式の手順をよく読みながら進めました。

AWS アカウント作成の流れ | AWS

Cloud9 IDE作成

コンソールのサービスからCloud9を選択し、Create Environmentで環境を作っていきます。

ワークスペース名は適当に・・・ f:id:terraria64:20180527120320p:plain

この辺はデフォルトにしておきます。 f:id:terraria64:20180527121056p:plain

できました。かっこいい〜 f:id:terraria64:20180527124717p:plain

Ruby on Rails導入

Cloud9にはあらかじめnodeやnpmが使える状態と聞いたことがあったので、もしかしたらrubyやrailsも導入済みなのでは…と思い一応バージョン確認

$ ruby -v 
ruby 2.4.1p111 (2017-03-22 revision 58053) [x86_64-linux]

入っている…もしかしたらrailsも…？

$ rails -v
Rails 5.2.0

入ってました。Cloud9すごい

Yarnインストール

さすがにYarnは入っていなかったのでインストールします

npm i -g yarn

Railsアプリケーションの構築

こちらの記事を参考に構築していきます。

Vue.jsとRailsでTODOアプリのチュートリアルみたいなものを作ってみたqiita.com

下記コマンドでRails + Vue.jsのアプリケーションを一気に構築できるようです。

rails new appname --webpack=vue

f:id:terraria64:20180527203822p:plain

できてしまった…簡単でビックリ

次回は実際に動かして"Hello Vue"するところまでいきたいと思います。

おしまい

2018-05-24

Rails + Vue.jsでWebアプリケーション開発 - １

Ruby on Rails Vue.js

はじめに

未経験からエンジニアになってから1年ちょっと経ちましたが、HTMLといえばPepperのタブレット画面で、謎ブラウザエンジンの謎挙動に合わせながらCSSやらJSをいじったりしていました。

htmlファイルを大量に作って、ボタン押したらPepperに信号飛ばして別のhtmlに切り替えて… みたいな感じでずっと開発していたのでAngularやVue.jsを使ったSPAの存在を知った時は衝撃でした。

Pepperはハードの制約上そういったフレームワークを使うことはできないので、今回は個人的にWebアプリケーションを作りながら学んでいこうと思います。

作成するアプリケーション

自分が大学の時所属していたバンドサークルでは、PAに渡すQシートなる紙がありましてこれにバンド名やら曲目、機材のセッティングやPAに対する要望なんかが書いてありました。

紙媒体なので追記したり書き直したり、管理するのも大変なので全部Web上でやってしまおうといった感じです。

フレームワーク

タイトルにもある通り、今回はRuby on Rails + Vue.jsで作っていこうと思います。

業務ではSpringを使っているのですが、Ruby on Railsは以前からやってみたいと思っていたので Vue.jsと合わせて実際にアプリケーションを作りながら学んでいきたいと思います。

というわけで

次回は環境構築をしていきます。

おしまい

2018-05-24

はじめました

その他

初めまして

未経験からSIerでエンジニアとして働き始めて、今年が2年目の新米エンジニアです。 PepperアプリからWebシステムまで色々開発をしてきましたがその中で得られたものをアウトプットしていこうかな～とか思ってブログを始めてみました。

よろしくお願いします

PepperやJava、Python、JavaScriptなど、開発する中で気づいたことや発信できそうなことを見つけたらつらつらと書いていきたいと思います。

最近だとProcessingでVJやってみたり、Node.jsとかVue.jsとかAngularとか勉強しはじめて個人的にWebアプリケーションを作っていこうと思っているのでそちらの話題なんかも書いていけたらなと思っております

tera tech ブログ

プログラミング2年目新米エンジニアの日記

Processingを触ってみる ①

VJとは

Processingとは

描いてみる

動かしてみる

音に反応させる

vue-cliでVue.jsのWebアプリケーションを作る ② - transition を触ってみる

アニメーションの設定

要素をフェードインさせてみる

とりあえず

トランジションの設定

vue-cliでVue.jsのWebアプリケーションを作る

何を作るか

開発環境

アプリケーションの構築

vue-cliをインストール

Vue.jsのプロジェクトを作る

サーバーを起動する

Rails + Vue.jsでWebアプリケーション開発 - 2

開発環境

AWSアカウント作成

Cloud9 IDE作成

Ruby on Rails導入

Yarnインストール

Railsアプリケーションの構築

Rails + Vue.jsでWebアプリケーション開発 - １

はじめに

作成するアプリケーション

フレームワーク

というわけで

はじめました

初めまして

よろしくお願いします