欠損したボックスの集合体　openFrameworks

[ Video ]

[ About ]
BoxをNoise関数で表示・非表示をコントロールしています。加えて、Boxのサイズも変動するようにしてあるります。

カドケシという消しゴムがありますが、それみたいに見えますね。

[ Source ]

#pragma once
#include "ofMain.h"

class ofApp : public ofBaseApp {

public:
	void setup();
	void update();
	void draw();

	void keyPressed(int key) {};
	void keyReleased(int key) {};
	void mouseMoved(int x, int y) {};
	void mouseDragged(int x, int y, int button) {};
	void mousePressed(int x, int y, int button) {};
	void mouseReleased(int x, int y, int button) {};
	void windowResized(int w, int h) {};
	void dragEvent(ofDragInfo dragInfo) {};
	void gotMessage(ofMessage msg) {};

	ofEasyCam cam;
	ofLight light;
};

#pragma once

#include "ofMain.h"

class ofApp : public ofBaseApp {

public:

void setup();

void update();

void draw();

void keyPressed(int key) {};

void keyReleased(int key) {};

void mouseMoved(int x, int y) {};

void mouseDragged(int x, int y, int button) {};

void mousePressed(int x, int y, int button) {};

void mouseReleased(int x, int y, int button) {};

void windowResized(int w, int h) {};

void dragEvent(ofDragInfo dragInfo) {};

void gotMessage(ofMessage msg) {};

ofEasyCam cam;

ofLight light;

};

#include "ofApp.h"

//--------------------------------------------------------------
void ofApp::setup() {

	ofSetFrameRate(60);
	ofBackground(0);
	ofSetWindowTitle("Insta");

	ofEnableDepthTest();
	
	ofEnableLighting();
	this->light.enable();
}

//--------------------------------------------------------------
void ofApp::update() { }

//--------------------------------------------------------------
void ofApp::draw() {

	this->cam.begin();
	this->light.setPosition(this->cam.getPosition() * 2.f);

	float assembly_size = ofGetWidth() > ofGetHeight() ? ofGetWidth() : ofGetHeight();
	int box_size = 300 * ofNoise(ofGetFrameNum() * 0.005);
	ofSetColor(255, 0, 0);
	for (int x = -assembly_size / 2; x <= assembly_size / 2; x += box_size) {

		for (int y = -assembly_size / 2; y <= assembly_size / 2; y += box_size) {

			for (int z = -assembly_size / 2; z <= assembly_size / 2; z += box_size) {

				float noise_value = ofNoise(x * 0.005, y * 0.005, z * 0.005, ofGetFrameNum() * 0.0005);
				if (noise_value < 0.5) {

					ofSetColor(255, 0, 0);
					ofFill();
					ofDrawBox(ofPoint(x, y, z), box_size, box_size, box_size);
				}
				else {

				}
				
			}
		}
	}

	this->cam.end();
}

//========================================================================
int main() {

	ofSetupOpenGL(720, 720, OF_WINDOW);
	ofRunApp(new ofApp());
}

#include "ofApp.h"

//--------------------------------------------------------------

void ofApp::setup() {

ofSetFrameRate(60);

ofBackground(0);

ofSetWindowTitle("Insta");

ofEnableDepthTest();

ofEnableLighting();

this->light.enable();

}

//--------------------------------------------------------------

void ofApp::update() { }

//--------------------------------------------------------------

void ofApp::draw() {

this->cam.begin();

this->light.setPosition(this->cam.getPosition() * 2.f);

float assembly_size = ofGetWidth() > ofGetHeight() ? ofGetWidth() : ofGetHeight();

int box_size = 300 * ofNoise(ofGetFrameNum() * 0.005);

ofSetColor(255, 0, 0);

for (int x = -assembly_size / 2; x <= assembly_size / 2; x += box_size) {

for (int y = -assembly_size / 2; y <= assembly_size / 2; y += box_size) {

for (int z = -assembly_size / 2; z <= assembly_size / 2; z += box_size) {

float noise_value = ofNoise(x * 0.005, y * 0.005, z * 0.005, ofGetFrameNum() * 0.0005);

if (noise_value < 0.5) {

ofSetColor(255, 0, 0);

ofFill();

ofDrawBox(ofPoint(x, y, z), box_size, box_size, box_size);

}

else {

}

this->cam.end();

}

//========================================================================

int main() {

ofSetupOpenGL(720, 720, OF_WINDOW);

ofRunApp(new ofApp());

}

[ Link ]
https://github.com/junkiyoshi/insta20180129

[ほしいものリスト]
Amazon

[ Sponsor Link ]

2017年12月13日2017年12月12日

OpenProcessingでLeap Motionを使う

Processing Advent Calendar 2017 – Day13の記事として投稿させて頂きます。

概略

OpenProcessingでLeapMotionを使用してみました。
まずは、成果物の動画です。

Leap Motionとは？

2012年に発売された手のジェスチャーによる入力インターフェース機器です。

赤外線センサーにより下記のような手の座標情報、ジェスチャーを認識する事が可能です。それらの情報を使う事によって、マウスやタッチパネルでは実現出来ない、物に触れないPC操作が可能になります。

手のひらの座標と方向情報が取得できます。

それぞれの指の座標と方向情報も取得可能です。
関節ごとの座標も計算できます。

ジェスチャー　サークル

ジェスチャー　スワイプ

ジェスチャー　キータップ

ジェスチャー　スクリーンタップ

最近だとVRヘッドセットなどに取り付けて使われていたりします。
発売から5年程経過していますが、ソフトウェアもアップデートされ、現役で活躍している珍しい？ガジェットになると思います。

OpenProcessingでの使用方法

1. Leap Motionの開発環境をマシンに準備(Webアプリケーションを許可)

Leap Motion DEVELOPERのWebサイトから開発環境をインストールします。
画面中央の「DOWNLOAD ORION BETA」からダウンロードしてインストールをすれば、ドライバや必要になるソフトウェア一式が手に入ります。

Leap Motion DEVELOPER – Get Started with our SDK –
https://developer.leapmotion.com/get-started/

Webアプリケーションに情報を送信の可否はLeap Motionコントロールパネルで設定します。デフォルトでオンになっているはずですが、接続されているはずなのに送信されない場合などは確認をしてみてください。

また、接続情報の確認などは、このコントロールパネルから可能になっています。

2. OpenProcessingのスケッチでLeap Motionを有効にする

OpenProcessing側では、スケッチの中にあるSettings – Libraries – Leap Motion Controlerのトグルコントロールをオンにしましょう。

自前でライブラリをサーバに置く作業がないので、楽ちんですね！

3. サンプルやリファレンスを参考にする

トグルをオンにしたらリファレンスへのリンクなどが出てきてくれる事を期待していたのですが、何も起こらなかったので、OpenProcessingで「Leap Motion」で検索して他の人のコードを参考にさせて頂きました。他の人のコードと動作を気軽に参照できるのもOpenProcessingの良い所ですね。

コードから公式のLeap.jsを使っている事が分かった(たぶん)ので、そちらのリファレンスやサンプルを確認していきます。

Leap.js (Github)
https://github.com/leapmotion/leapjs

上記のリンク以外にも公式サイトからダウンロードしたZIPファイルの中にLeapSDKというフォルダがあり、そちらも参考になります。

4. コードをかくべし

リファレンス・サンプルを元に実装をしていきます。
「Leap.js」でGoogle検索などをしてもサンプルなどが結構出てくるので、参考にしましょう。

基本的には座標情報が取得可能で、Mouseのx, yにz軸を加えた感じで使う事が出来ます。情報さえ取り出してしまえば、普段のProcessingとあまり変わりはないかと思います。

今回は人差し指の座標を記録して履歴を波のように表示してみました。コメントアウトで、一般的な手のひらの座標と指の座標を取る記述を残しておきました。ジェスチャーを使っていませんが、ジェスチャーを使うとさらに出来る事が広がります。

var y_array;

function setup() {
	createCanvas(600, 800);
	setFrameRate(30);
	fill(0);
	stroke(0);
	
	y_array = new Array(width / 15);
	for(var i = 0; i < y_array.length; i++){
		y_array[i] = height;
	}
	
	Leap.loop(drawHand);
}

function draw() {

}

function drawHand(frame){
	background(255);

	var y;
	if(frame.pointables.length > 1){
			var pointable = frame.pointables[1]; // Index Finger
			y = map(pointable.tipPosition[1], 0, 300, height, 0);
	}
	
	for(var i = 1; i < y_array.length; i++){
			y_array[i - 1] = y_array[i];
	}
	y_array[y_array.length - 1] = y;
	
	for(var i = 0; i < y_array.length; i++){
		ellipse(i * 15, y_array[i], 10, 10);	
		line(i * 15, y_array[i], i * 15, height / 2);
	}
	
	/*
	// Get Palm Position 
	if(frame.hands.length > 0){
		for(var i = 0; i < frame.hands.length; i++){
			var hand = frame.hands[i];
			
			var x = map(hand.palmPosition[0], -150, 150, 0, width);
			var y = map(hand.palmPosition[1], 0, 300, height, 0);
			var z = hand.palmPosition[2];
			ellipse(x, y, z, z);
		}
	}
	*/
	
	/*
	// Get Finger Position
	stroke(255, 255, 0);
	if(frame.pointables.length > 0){
		for(var i = 0; i < frame.pointables.length; i++){
			var pointable = frame.pointables[i];

			var x = map(pointable.tipPosition[0], -150, 150, 0, width);
			var y = map(pointable.tipPosition[1], 0, 300, height, 0);
						
			ellipse(x, y, 3, 3);
		}
	}
	*/
	
}

var y_array;

function setup() {

createCanvas(600, 800);

setFrameRate(30);

fill(0);

stroke(0);

y_array = new Array(width / 15);

for(var i = 0; i < y_array.length; i++){

y_array[i] = height;

}

Leap.loop(drawHand);

}

function draw() {

}

function drawHand(frame){

background(255);

var y;

if(frame.pointables.length > 1){

var pointable = frame.pointables[1]; // Index Finger

y = map(pointable.tipPosition[1], 0, 300, height, 0);

}

for(var i = 1; i < y_array.length; i++){

y_array[i - 1] = y_array[i];

}

y_array[y_array.length - 1] = y;

for(var i = 0; i < y_array.length; i++){

ellipse(i * 15, y_array[i], 10, 10);

line(i * 15, y_array[i], i * 15, height / 2);

}

// Get Palm Position

if(frame.hands.length > 0){

for(var i = 0; i < frame.hands.length; i++){

var hand = frame.hands[i];

var x = map(hand.palmPosition[0], -150, 150, 0, width);

var y = map(hand.palmPosition[1], 0, 300, height, 0);

var z = hand.palmPosition[2];

ellipse(x, y, z, z);

}

// Get Finger Position

stroke(255, 255, 0);

if(frame.pointables.length > 0){

for(var i = 0; i < frame.pointables.length; i++){

var pointable = frame.pointables[i];

var x = map(pointable.tipPosition[0], -150, 150, 0, width);

var y = map(pointable.tipPosition[1], 0, 300, height, 0);

ellipse(x, y, 3, 3);

}

https://www.openprocessing.org/sketch/485934

まとめ

Leap Motionは、まだまだ面白いデバイスだと思います。
Amazonだと1万円ぐらいで購入する事が出来ますし、お正月休みの開発などにいかがでしょう？

OpenProcessingを使えば気軽にチャレンジできますし、SDKが豊富なので本家のProcessing(JAVA)やopenFrameworks(C++),Unity(C#)などでも開発できますよ。

Leap Motion愛好家が増えるといいな。
ありがとうございました。

おまけ

openFrameworksからLeap Motionを呼び出したものも作っています
ソースも併せて載せているので興味あれば、下記タグなどご覧ください。
https://junkiyoshi.com/tag/leapmotion/

このブログを作る前はInstagram + Githubで共有していました。私のInstagaramアカウントを掘って貰えればProcessing + Leap Motionのソースも出てきます。

[ほしいものリスト]
Amazon

[ Sponsor Link ]

2017年12月7日2017年12月7日

初めてのOpenProcessing

[ View / Source ]

[ About ]
Processing Advent Calendar 2017 – Day7の記事として投稿させて頂きます。
普段はopenFrameworks(C++)を使ってプログラミングで落書きをしていますが、Processingな方ともお知り合いになるべく、今まで気になっていても触る機会の無かったOpenProcessing.orgを使用してみました。

毎日、1日1つの動画＆ソースコードをノルマ(縛りプレイ)としてSNSやBlogにあげているのですが、ここ最近で評判が良かったやつをOpenProcessingで書き直してみました。

var frame_number = 0;

function setup() {
	createCanvas(500, 500);
	
	stroke(255);
	strokeWeight(3);
}

function draw() {
	translate(width / 2, height / 2);
	background(0);
	
	for(var radius = 10; radius < 250; radius += 15){
		rotate(radians(frame_number));
		for(var deg = 30; deg < 300; deg += 1){
			var x_1 = radius * cos(radians(deg));
			var y_1 = radius * sin(radians(deg));
			var x_2 = radius * cos(radians(deg + 1));
			var y_2 = radius * sin(radians(deg + 1));
			line(x_1, y_1, x_2, y_2);
		}
	}
	frame_number += 1;
}

var frame_number = 0;

function setup() {

createCanvas(500, 500);

stroke(255);

strokeWeight(3);

}

function draw() {

translate(width / 2, height / 2);

background(0);

for(var radius = 10; radius < 250; radius += 15){

rotate(radians(frame_number));

for(var deg = 30; deg < 300; deg += 1){

var x_1 = radius * cos(radians(deg));

var y_1 = radius * sin(radians(deg));

var x_2 = radius * cos(radians(deg + 1));

var y_2 = radius * sin(radians(deg + 1));

line(x_1, y_1, x_2, y_2);

}

frame_number += 1;

}

Rotate C @ OpenProcessing.org

処理の流れとしては、比較的単純で、sin関数・cos関数を使用して30°-300°までの円弧を、半径の長さ変えながら描写していきます。そこに、一つの円を描くごとにRotate関数を使って、描写エリアをフレーム番号を角度とした回転を加えるという処理を加えています。

バラバラに見えたり、妙な規則性が見えてきたりと眺めてて楽しいです。

初めてOpenProcessingを書いてみましたが、Webブラウザだけで完結しているので良いですね。そのままWebサイトに組み込めるのも便利でした。動画ではなくスクリプトが動いているので、ユーザー操作を取り入れれる所も面白そうです。

LeapMotion用のライブラリもあるようで試してみたいですね。また、触って見たいと思います。
ありがとうございました。

[ Link ]
Processing Advent Calendar 2017

[ほしいものリスト]
Amazon

[ Sponsor Link ]

月	火	水	木	金	土	日
						1
2	3	4	5	6	7	8
9	10	11	12	13	14	15
16	17	18	19	20	21	22
23	24	25	26	27	28	29
30	31