メニュー 閉じる

054. p5.jsで球のテクスチャに動画を使ってTwitterのユーザー画像表示

TouchDesignerで映像を作っているのですが、その映像をp5.jsでウェブ上に載せてみました。
052のエフェクトを使ってTwitterのユーザー画像と一緒に表示しています。
動画の読み込みにちょっと時間がかかりますが、面白い感じになったように思います。

http://www.velvet-number.com/p5_test/test037/

var video;

var tw_count = 100;
var tw_word = '#minecraft';

var twmeta;
var tweets = [];

var options = {
	version:              '1.0',
	signature:            'HMAC-SHA1',
	method:               'GET',
	lang:                 'ja',
	api_url:              'https://api.twitter.com/1.1/search/tweets.json',
	// 以下の4項目はTwitterから取得するキーを入れます。
	consumer_key:         '******************************',
	consumer_secret:      '******************************',
	access_token:         '******************************',
	access_token_secret:  '******************************',
	callback:             'data_setting'
};

var posx;
var posy;
var targetx;
var targety;

var next_id;

var init;

var twpg_z;

var step_z;

var max_z;

var eyesetx;
var eyesety;
var eyesetz;

var camsetx;
var camsety;
var camsetz;

var offsetx;
var offsety;
var offsetz;

var targetx;
var targety;
var targetz;

var wheel_pos;

var twpgs = [];

var is_press;

function setup () {

	pixelDensity (displayDensity ());
	createCanvas (windowWidth, windowHeight, WEBGL);
	colorMode (RGB, 100);

	video = createVideo ('assets/movie.mov');

	posx = mouseX;
	posy = mouseY;
	targetx = 0.0;
	targety = 0.0;

	diff_z = 400.0;

	eyesetx = width / 2.0;
	eyesety = height / 2.0;
	eyesetz = 0.0;

	camsetx = width / 2.0;
	camsety = height / 2.0;
	camsetz = eyesetz - diff_z;

	offsetx = width / 2.0;
	offsety = height / 2.0;
	offsetz = 0.0;

	twpg_z = camsetz;

	step_z = diff_z / 4.0;

	max_z = eyesetz - (step_z * tw_count);

	wheel_pos = eyesetz;

	count = 0;

	init = true;

	is_press = false;

	get_twitter ();

	video.loop ();

}

function draw () {

	background (100, 100, 100);

	targetx = mouseX;
	targety = mouseY;

	posx += (targetx - posx) * 0.08;
	posy += (targety - posy) * 0.08;

	targetx = -(mouseX - width);
	targety = -(mouseY - height);
	targetz = wheel_pos * 2.0;

	eyesetx += (targetx - eyesetx) * 0.042;
	eyesety += (targety - eyesety) * 0.042;
	eyesetz += (targetz - eyesetz) * 0.060;

	//camsetx += (targetx - camsetx) * 0.060;
	//camsety += (targety - camsety) * 0.060;
	camsetz = eyesetz - diff_z;

	ambientLight (100);

	camera (eyesetx, eyesety, eyesetz,
			camsetx, camsety, camsetz,
			0.0, 1.0, 0.0);

	push ();
	translate (camsetx, camsety, camsetz);
	scale (-1.0, 1.0);
	texture (video);
	sphere (width);
	pop ();

	translate (offsetx, offsety, offsetz);

	for (var i = 0; i < twpgs.length; i++) {
		if (twpgs[i].spz < eyesetz && twpgs[i].spz > eyesetz - (step_z * tw_count) - 2000.0) {
			twpgs[i].render ();
		}
	}

	if (eyesetz < max_z) {
		max_z -= (step_z * tw_count);
		get_twitter ();
	}

}

function mousePressed () {

	if (is_press) {
		noLoop ();
	} else {
		loop ();
	}

	is_press = !is_press;

}

function mouseWheel (event) {

	event.preventDefault();
	wheel_pos += event.delta;

}

function windowResized () {

	resizeCanvas (windowWidth, windowHeight, WEBGL);

}

function TweetObject (x, y, z, s) {

	this.spx = x;
	this.spy = y;
	this.spz = z;

	var img = loadImage (s);

	this.render = function () {

		push ();
		translate (this.spx, this.spy, this.spz);
		texture (img);
		sphere (100, 100);
		pop ();

	}

}

function get_twitter () {

	var accessor = {
		consumerSecret: options.consumer_secret,
		tokenSecret: options.access_token_secret
	};

	if (init == true) {
		var message = {
			method: options.method,
			action: options.api_url,
			parameters: {
				q: tw_word,
				count: tw_count,
				lang: options.lang,
				oauth_version: options.version,
				oauth_signature_method: options.signature,
				oauth_consumer_key: options.consumer_key,
				oauth_token: options.access_token,
				callback: options.callback,
			}
		};
		init = false;
	} else {
		var message = {
			method: options.method,
			action: options.api_url,
			parameters: {
				q: tw_word,
				count: tw_count,
				lang: options.lang,
				max_id: next_id,
				oauth_version: options.version,
				oauth_signature_method: options.signature,
				oauth_consumer_key: options.consumer_key,
				oauth_token: options.access_token,
				callback: options.callback,
			}
		};
	}

	OAuth.setTimestampAndNonce (message);
	OAuth.SignatureMethod.sign (message, accessor);

	var url = OAuth.addToURL (message.action, message.parameters);

	$.ajax ({
		type: message.method,
		url: url,
		dataType: "jsonp",
		jsonp: false,
		cache: true
	});

}

function data_setting (data) {

	twmeta = data.search_metadata;
	tweets = data.statuses;

	var tmp_id = twmeta.max_id;

	next_id = parseInt (tmp_id);

	for (var i = 0; i < tweets.length; i++) {
		var s = tweets[i].user.profile_image_url;
		twpg_z -= step_z;
		twpgs.push (new TweetObject (random (-offsetx, offsetx), random (-offsety, offsety), twpg_z, s));
	}

}

function console_log () {

	for (var i = 0; i < tweets.length; i++) {
		console.log ('====================================================');
		console.log (tweets[i].created_at);
		console.log (tweets[i].user.name);
		console.log (tweets[i].user.screen_name);
		console.log (tweets[i].user.profile_image_url);
		console.log (tweets[i].text);
		console.log ('====================================================');
	}

}

 

 

Posted in p5.js , processing , touchdesigner