umischief ちゃれんじんぐ

Distance between two objects

Sketch and Toonを使用してのオブジェクトの隠線を表示するのに苦労したのでメモ。

オブジェクトウィンドウの、オブジェクト右横の”Sketchスタイルタグ”を選択

↓

属性ウィンドウの　“線”タブ　→　“隠線のえり分け”　の “自己”を”オブジェクト”に変更し、右横の”自己”のチェックを外す。下の”オブジェクト”を入れるスペースに、目的のオブジェクトをつっこむ。

これで隠線が表示されるようになった。

ExtendScript Toolkitを使って、After Effectsで画像置き換えとレンダーキューに追加の自動化に挑戦してみました。

http://umischief.tumblr.com/post/140497499976

Extend Script ToolKitの基本的な使い方はこちらを参考にしました。

AfterEffectsをスクリプトで制御(1) – ESTKから制御する - プログラミングがわからない人のためのAfter Effectsスクリプト入門。その2

//replace images for(var i=1; i<5; i++) { var fileName = "/Users/xxxx/xxxx/AE_script_test1/import/" + i +".JPG"; //フルパスを指定 //$.writeln(fileName); fileObj = new File(fileName); app.project.item(i).replace(fileObj); } //render var myComp = new Array(); for(var i=1; i<=app.project.items.length; i++) { if (app.project.items[i] instanceof CompItem) { if ((app.project.items[i].name.indexOf("Render")) != -1) { myComp.push(app.project.items[i]); } } } var shouldAdd = confirm("Add to Render Queue?"); if (shouldAdd == true && myComp.length != 0) { for(var i=0; i<myComp.length; i++) { var RQ = app.project.renderQueue.items.add(myComp[i]); //キュー追加 RQ.applyTemplate("現在の設定"); //レンダリング設定 var OM = RQ.outputModule(1); OM.applyTemplate("Photo-JPEG_90"); //出力モジュール OM.file = new File("/Users/xxxx/xxxx/AE_script_test1/Delivery/render_test1"); //出力先 } } else { alert("名前にRenderを含むコンポはありません。"); }

内容としては、AEのコンポジションに４枚の画像を配置してある状態で、別の画像を読み込み各画像を新しく読み込んだ画像に置き換えるということをやっています。 そして指定の出力設定でレンダーキューに追加されるようになっています。 OM.applyTemplate("Photo-JPEG_90"); //出力モジュール の"Photo-JPEG_90"は自分で作成したテンプレートを指定しています。 JavaScriptがよく分からないので間違いがあるかもしれませんが、とにかく動きました。

フッテージファイルの置き換えで参考にしたのはこちら フッテージファイルを置換する

レンダーキューへの追加方法で参考にしたのはこちら AEスクリプトで自分だけのレンダー設定ツールをつくって効率化する！

QuayolaさんのStrata #4のように静止画でも三角分割してみる試み。 とりあえずいったん頭の中を整理するため処理工程を整理してみました。

画像を読み込む

グレースケールにする

輪郭を抽出

輪郭線を間引き頂点をつくる

三角分割する

ofApp.h

#pragma once #include "ofMain.h" #include "ofxCv.h" #include "ofxDelaunay.h" class ofApp : public ofBaseApp{ public: void setup(); void update(); void draw(); ofImage rgb, gray, edge; ofVboMesh mesh; ofxDelaunay delaunay; int w = 320; int h = 394; };

ofApp.cpp

#include "ofApp.h" using namespace ofxCv; //-------------------------------------------------------------- void ofApp::setup(){ rgb.loadImage("reni.jpg"); } //-------------------------------------------------------------- void ofApp::update(){ delaunay.reset(); // mesh.clear(); convertColor(rgb, gray, CV_RGB2GRAY); blur(gray, 4); Canny(gray, edge, 20, 100); gray.update(); edge.update(); dilate(edge); unsigned char *edgeData = edge.getPixels(); int up = 45; for (int i=0; i < w*h; i+=up) { if (edgeData[i] == 0) { continue; } else { int coordY = floor(i/w); mesh.addVertex(ofVec2f(i-w*coordY, coordY)); delaunay.addPoint(ofVec2f(i-w*coordY, coordY)); } } delaunay.addPoint(ofPoint(0, 0)); delaunay.addPoint(ofPoint(0, h)); delaunay.addPoint(ofPoint(w, h)); delaunay.addPoint(ofPoint(w, 0)); delaunay.triangulate(); } //-------------------------------------------------------------- void ofApp::draw(){ rgb.draw(0, 0); gray.draw(330, 0); edge.draw(660, 0); ofPushMatrix(); ofTranslate(0, 410); rgb.draw(0, 0); mesh.drawVertices(); ofPopMatrix(); ofPushMatrix(); ofTranslate(330, 410); rgb.draw(0, 0); ofNoFill(); delaunay.draw(); ofPopMatrix(); } //--------------------------------------------------------------

これをもとにさらにランダムな点を追加したもの

ポリゴンの色の付け方などは参考にさせていただいた https://www.honeycomb-lab.co.jp/lab/blog/?p=1038 と同じ方法でかいてます。

現状、追加したランダム頂点だけアニメーションしちゃってますが、、、。 Strata #4のように動かしたいがまだそこまでいっていないので引き続き要研究。

my challenge https://vimeo.com/157898367

I made this a year ago.(device: xtion pro live) https://vimeo.com/118416830 I was not happy with the result because every polygon has the same size.I wanted small polygons for detail. So I focused on solving the problem this time.

Reference https://www.honeycomb-lab.co.jp/lab/blog/?p=1038

detect edges the image using canny and triangulate with ofxDelaunay. I didn’t change the reference code much except the addon. from “ofxOpenCv” to “ofxCv”. By using ofxCv::Canny() solved the problem of polygon size.

Here is the result. Polygons are small on the detail area such as printing of the plastic bottle.

AfterEffectsCCでaecファイルの読み込みができなくなっていたので、解決策をメモ (Mac OS 10.10.1環境)

Cinema 4D R16　→　aecファイルを書き出し　→　AfterEffectsCCにaecを読み込み　→　エラーが起こり読み込めない

これを参考にしたら解決　↓

I loaded a 3d model(Alembic file) with ofxAlembic addon, and tried manipulating those vertices.

And I also set key operation with the method ofGetLastFrameTime() to change the animation speed.

Like “stop”, “play backwards”, and “Fast-forward”.

Reference:

http://yoppa.org/geidai_graphb11/3458.html

openframeworksのaddon ofxAlembic を使って3Dmodelデータを読み込み、ofVboMeshで各頂点情報をgetし位置をぐしゃっと移動してみました。

今回気づいたこと

ofxAlembicを使用するとき、3Dモデルは一体化された状態でC4DなどからAlembicにexportしないとすべてのobjectが読み込まれない。

今後の課題

modelデータの形をくずした時のparticleの動きを、After EffectsのTrapcode　Particularのようにいいかんじの動きを表現できる方法を研究したい

センサーの値をopenFrameworksのofxBox2Dにも使ってみました。前回のとは違い、転がりを表現できてよかった。 今回は加速度センサーのxとyの値を取得して割り当ててみました。

加速度センサーの値をoFに利用するテスト

Arduino初心者がoFとの連携を試みた。

http://umischief.tumblr.com/post/135515649759

どこに何をさせば良いのか抵抗器はどこに何Ωのものが必要なのかもよくわからない状態で半分カンで繋いだのでアホな繋ぎ方になっている可能性大です。

今回は加速度センサーのxの値のみを取得し、その値を画面上のピンクの円のx位置に割り当てました。

加速度センサーを傾けたらちゃんと動きました。

何も傾けていない状態の時に左右どちらかに動いていってしまうのを静止するように調整もしてみました。