メニュー 閉じる

051. p5.jsで球のテクスチャの中にTwitterの検索結果を表示してみる

003と050を組み合わせてみました。ただ、なぜかPC以外のデバイスでちょっと変なので調整します。

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

var img01;

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 preload () {

	img01 = loadImage ('assets/image.jpg');

}

function setup () {

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

	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 ();

}

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 (img01);
	sphere (width);
	pop ();

	translate (offsetx, offsety, offsetz);

	for (var i = 0; i < twpgs.length; i++) {
		if (twpgs[i].planez < eyesetz && twpgs[i].planez > 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, t, s) {

	this.planex = x;
	this.planey = y;
	this.planez = z;

	var planew = 200.0;
	var planeh = 60.0;

	var tweet = t.substring (0, 40) + '....';
	var sname = s;

	var pg = createGraphics (planew, planeh);

	pg.fill (255);
	pg.background (0);
	pg.textSize (8);
	pg.textAlign (LEFT, TOP);
	pg.text (tweet, 10, 10);
	pg.text (sname, 10, 40);

	this.render = function () {

		push ();
		translate (this.planex, this.planey, this.planez);
		texture (pg);
		plane (planew, planeh);
		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 t = tweets[i].text;
		var s = tweets[i].user.screen_name;
		twpg_z -= step_z;
		twpgs.push (new TweetObject (random (-offsetx, offsetx), random (-offsety, offsety), twpg_z, t, 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