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 ('===================================================='); } }