2014-01-10 14:14:47

License: MIT License

Fork: 0

Fav: 1

View: 1229

Play
Stop
Reload

Fullscreen

Smart Phone

Readme
JavaScript 241 lines
HTML 8 lines
CSS 1 lines

FirefoxでもなんとかCanvasの内容を動画にしたくて

以前の作品でChromeではWhammyを使うことで、楽勝でVideoタグ要素を動的に生成することに成功していたのだが、WebPをサポートしていない？Firefoxは2014年現在もこいつが動かないので、なんとか、動的に作成したCanvasイメージをpure javascriptで保存したいという熱い思いを実現したw

さらに2014年ちっくな手法の考察

ffmpegをemscriptenでjs化して、こいつを使えば、Firefoxでもvideoタグ要素として動画を作れそう。（WhammyのIssuesでも、そういう案が書き込まれていた。）

Link

antimatter15/jsgif

リアルタイムでレイトレするすごい作品のオリジナル

Real Time Ray Tracing by keim_at_Si

リアルタイムでレイトレして、GIFに記録するヤツ
jQuery v1.4.2

(function(){
// forked from kjunichi's "リアルタイムでレイトレして、WebMに記録するヤツ" http://jsdo.it/kjunichi/edwO
// forked from kjunichi's "forked: Real Time Ray Tracing" http://jsdo.it/kjunichi/jaEd
// forked from keim_at_Si's "Real Time Ray Tracing" http://jsdo.it/keim_at_Si/rtrt
// Flash version here. http://wonderfl.net/c/horg

var size = 256;
var ambient = 0.1;
var diffusion = 0.7;
var specular = 0.6;
var power = 12;
var gFrames = 0;
var myTimerId;

var mainGraphics, canvas, graphics, imageData, pixels;
var focusZ = size, floorY = 100;
var initialDir = new Array(size * size), spheres = new Array();
var ldirX, ldirY, ldirZ;
var smap = new Array(512), fcol = new Array(1024);
var refs = [0, 1, 2, 3, 3];
var reff = [0xffffff, 0x7f7f7f, 0x3f3f3f, 0x1f1f1f, 0x1f1f1f];
var time, prevTime, mx, my, camX, camY, camZ, tcamX, tcamY, tcamZ;

//var video = new Whammy.Video(15);
var encoder = new GIFEncoder();
encoder.setRepeat(0);
encoder.setDelay(50);
encoder.start();

function Sphere(cx, cy, cz, cr, omg, pha, r, mat) {
  this.cx = cx;
  this.cy = cy;
  this.cz = cz;
  this.cr = cr;
  this.omg = omg;
  this.pha = pha;
  this.r2 = r * r;
  this.mat = mat;
  this.update = function() {
    var ang = time * this.omg + this.pha;
     this.x = Math.cos(ang)*(Math.cos(pha)*this.cr+1) +this.cx;
     //this.y = Math.sin(v)*a;
     this.z = Math.sin(ang)*(Math.cos(pha)*this.cr+1)+this.cz;
      
    //this.x = Math.cos(ang)*this.cr+this.cx;
    this.y = time;
    //this.z = Math.sin(ang)*this.cr+this.cz;
  }
}

function setup() {
  canvas = $('#canvas').mousemove(onMouseMove).get(0);
  graphics = canvas.getContext('2d');
  imageData = graphics.createImageData(size, size);
  pixels = imageData.data;

var i, j, idx, l, s, hs = (size - 1) * 0.5;
  for (j=0,idx=0; j<size; j++) for (i=0; i<size; i++) {
    l = 1/Math.sqrt((i - hs)*(i - hs) + (j - hs)*(j - hs) + focusZ*focusZ);
    initialDir[idx] = (i-hs) * l; idx++;
    initialDir[idx] = (j-hs) * l; idx++;
    initialDir[idx] = focusZ * l; idx++;
  }
  for (i=0; i<512; i++) {
    s = (i<256) ? 64 : ((Math.pow((i-256) * 0.00390625, power) * (power + 2) * specular * 0.15915494309189534 * 192 + 64)>>>0);
    if (s > 255) s = 255;
    smap[i] = (0x10101 * s) >>> 0;
    s = (i<256) ? (255-i) : (i-256);
    fcol[i] = (0x10101 * (s - (s>>3) + 31)) >>> 0;
    fcol[i+512] = (0x10101 * ((s>>2) - (s>>5) + 31)) >>> 0;
  }
  spheres.push(new Sphere(100, 40, 600, 200, 0.3, 1.0, 60, new Material(0x8080ff,ambient,diffusion)));
  spheres.push(new Sphere(  0, 50, 300, 100, 0.8, 0.8, 50, new Material(0x80ff80,ambient,diffusion)));
  spheres.push(new Sphere( 50, 60, 200, 200, 0.6, 2.0, 40, new Material(0xff8080,ambient,diffusion)));
  spheres.push(new Sphere(-50, 70, 500, 300, 0.4, 1.4, 30, new Material(0xc0c080,ambient,diffusion)));
  spheres.push(new Sphere(-90, 30, 600, 400, 0.2, 1.5, 70, new Material(0xc080c0,ambient,diffusion)));
  spheres.push(new Sphere( 70, 80, 400, 100, 0.7, 1.2, 20, new Material(0x80c0c0,ambient,diffusion)));
  camX = camY = camZ = tcamX = tcamY = tcamZ = 0;
  
  mx = my = time = 0;
  prevTime = (new Date()).getTime();
    
  myTimerId = setInterval(draw, 33);
}

if (hit) {
          ox += dx * tmin;
          oy += dy * tmin;
          oz += dz * tmin;
          nx = ox - hit.x;
          ny = oy - hit.y;
          nz = oz - hit.z;
          n = 1 / Math.sqrt(nx*nx + ny*ny + nz*nz);
          nx *= n;
          ny *= n;
          nz *= n;
          n = -(nx*dx + ny*dy + nz*dz) * 2;
          dx += nx * n;
          dy += ny * n;
          dz += nz * n;
          ln = (((ldirX * nx + ldirY * ny + ldirZ * nz) * 256) + 256) >>> 0;
          a = hit.mat.lmap[ln];
          a >>= refs[l];
          a &= reff[l];
          pixel += a;
        } else {
          if (dy < 0) {
            ln = (((ldirX * dx + ldirY * dy + ldirZ * dz) * 256) + 256) >>> 0;
            a = smap[ln];
            ln = l - 1;
            a >>= refs[ln];
            a &= reff[ln];
            pixel += a;
            break;
          } else {
            tmin = (floorY-oy)/dy;
            ox += dx * tmin;
            oy += dy * tmin;
            oz += dz * tmin;
            dy = -dy;
            ln = (dy * 256 + ( ( ( (((ox>>>0)+(oz>>>0))>>7) + (((ox>>>0)-(oz>>>0))>>7) ) &1)<<9) +256) >>> 0;
            a = fcol[ln];
            a >>= refs[l];
            a &= reff[l];
            pixel += a;
          }
        }
      }
      
      pixels[pidx] = (pixel>>16)&255; pidx++;
      pixels[pidx] = (pixel>>8)&255; pidx++;
      pixels[pidx] = (pixel)&255; pidx++;
      pixels[pidx] = 255; pidx++;
    }
  }

graphics.putImageData(imageData, 0, 0);
    
    //video.add(graphics);
    // GIFエンコーダーに記録する。
encoder.addFrame(graphics);
    
    gFrames++;
    //console.log(gFrames);
    if(gFrames>100) {
        // 100フレーム記録したらGIFアニメの作成を終了し、再生する。
        document.getElementById('status').innerHTML = "Compiling Video";
        //var output = video.compile();
        encoder.finish();
        var binaryGif = encoder.stream().getData();
        
        //var url = webkitURL.createObjectURL(output);
        var dataUrl = 'data:image/gif;base64,'+encode64(binaryGif);
        
        document.getElementById('awesome').src = dataUrl;
        clearInterval(myTimerId);
    }
    document.getElementById('status').innerHTML = "Drawing Frames";
}

function onMouseMove(e) {
  mx = (e.clientX - 232.5) * 0.00390625;
  my = (232.5 - e.clientY) * 0.00390625;
}

$(setup);

})();

リアルタイムでレイトレして、GIFに記録するヤツ

# FirefoxでもなんとかCanvasの内容を動画にしたくて [以前の作品](http://jsdo.it/kjunichi/edwO)でChromeでは[Whammy](https://github.com/antimatter15/whammy)を使うことで、楽勝でVideoタグ要素を動的に生成することに成功していたのだが、WebPをサポートしていない？Firefoxは2014年現在もこいつが動かないので、なんとか、動的に作成したCanvasイメージをpure javascriptで保存したいという熱い思いを実現したw # さらに2014年ちっくな手法の考察 ffmpegをemscriptenでjs化して、こいつを使えば、Firefoxでもvideoタグ要素として動画を作れそう。（WhammyのIssuesでも、そういう案が書き込まれていた。） # Link - [antimatter15/jsgif](https://github.com/antimatter15/jsgif) # リアルタイムでレイトレするすごい作品のオリジナル - [Real Time Ray Tracing by keim_at_Si](http://jsdo.it/keim_at_Si/rtrt) (function(){ // forked from kjunichi's "リアルタイムでレイトレして、WebMに記録するヤツ" http://jsdo.it/kjunichi/edwO // forked from kjunichi's "forked: Real Time Ray Tracing" http://jsdo.it/kjunichi/jaEd // forked from keim_at_Si's "Real Time Ray Tracing" http://jsdo.it/keim_at_Si/rtrt // Flash version here. http://wonderfl.net/c/horg var size = 256; var ambient = 0.1; var diffusion = 0.7; var specular = 0.6; var power = 12; var gFrames = 0; var myTimerId; var mainGraphics, canvas, graphics, imageData, pixels; var focusZ = size, floorY = 100; var initialDir = new Array(size * size), spheres = new Array(); var ldirX, ldirY, ldirZ; var smap = new Array(512), fcol = new Array(1024); var refs = [0, 1, 2, 3, 3]; var reff = [0xffffff, 0x7f7f7f, 0x3f3f3f, 0x1f1f1f, 0x1f1f1f]; var time, prevTime, mx, my, camX, camY, camZ, tcamX, tcamY, tcamZ; //var video = new Whammy.Video(15); var encoder = new GIFEncoder(); encoder.setRepeat(0); encoder.setDelay(50); encoder.start(); function Material(col, amb, dif) { this.lmap = new Array(512); var r = (col>>16)&255, g = (col>>8)&255, b = col&255, a; for (i=0; i<512; i++) { a = ((i<256) ? amb : ((((i-256) * (dif - amb)) * 0.00390625) + amb)) * 2; if (a<1) this.lmap[i] = ((r*a)<<16)|((g*a)<<8)|((b*a)<<0); else { a = 2-a; this.lmap[i] = ((255-(255-r)*a)<<16)|((255-(255-g)*a)<<8)|((255-(255-b)*a)<<0); } } } function Sphere(cx, cy, cz, cr, omg, pha, r, mat) { this.cx = cx; this.cy = cy; this.cz = cz; this.cr = cr; this.omg = omg; this.pha = pha; this.r2 = r * r; this.mat = mat; this.update = function() { var ang = time * this.omg + this.pha; this.x = Math.cos(ang)*(Math.cos(pha)*this.cr+1) +this.cx; //this.y = Math.sin(v)*a; this.z = Math.sin(ang)*(Math.cos(pha)*this.cr+1)+this.cz; //this.x = Math.cos(ang)*this.cr+this.cx; this.y = time; //this.z = Math.sin(ang)*this.cr+this.cz; } } function setup() { canvas = $('#canvas').mousemove(onMouseMove).get(0); graphics = canvas.getContext('2d'); imageData = graphics.createImageData(size, size); pixels = imageData.data; var i, j, idx, l, s, hs = (size - 1) * 0.5; for (j=0,idx=0; j<size; j++) for (i=0; i<size; i++) { l = 1/Math.sqrt((i - hs)*(i - hs) + (j - hs)*(j - hs) + focusZ*focusZ); initialDir[idx] = (i-hs) * l; idx++; initialDir[idx] = (j-hs) * l; idx++; initialDir[idx] = focusZ * l; idx++; } for (i=0; i<512; i++) { s = (i<256) ? 64 : ((Math.pow((i-256) * 0.00390625, power) * (power + 2) * specular * 0.15915494309189534 * 192 + 64)>>>0); if (s > 255) s = 255; smap[i] = (0x10101 * s) >>> 0; s = (i<256) ? (255-i) : (i-256); fcol[i] = (0x10101 * (s - (s>>3) + 31)) >>> 0; fcol[i+512] = (0x10101 * ((s>>2) - (s>>5) + 31)) >>> 0; } spheres.push(new Sphere(100, 40, 600, 200, 0.3, 1.0, 60, new Material(0x8080ff,ambient,diffusion))); spheres.push(new Sphere( 0, 50, 300, 100, 0.8, 0.8, 50, new Material(0x80ff80,ambient,diffusion))); spheres.push(new Sphere( 50, 60, 200, 200, 0.6, 2.0, 40, new Material(0xff8080,ambient,diffusion))); spheres.push(new Sphere(-50, 70, 500, 300, 0.4, 1.4, 30, new Material(0xc0c080,ambient,diffusion))); spheres.push(new Sphere(-90, 30, 600, 400, 0.2, 1.5, 70, new Material(0xc080c0,ambient,diffusion))); spheres.push(new Sphere( 70, 80, 400, 100, 0.7, 1.2, 20, new Material(0x80c0c0,ambient,diffusion))); camX = camY = camZ = tcamX = tcamY = tcamZ = 0; mx = my = time = 0; prevTime = (new Date()).getTime(); myTimerId = setInterval(draw, 33); } function draw() { var i, j, k, l, idx, t, tmin, n, s, hit, ln, pixel, a, kmax, pidx, ox, oy, oz, dx, dy, dz, nx, ny, nz, dsx, dsy, dsz, B, C, D; t = (new Date()).getTime(); time += (t - prevTime) * 0.001; prevTime = t; ldirX = -Math.cos(time*0.6)*100; ldirY = -Math.sin(time*1.1)*25-100; ldirZ = -Math.sin(time*0.9)*100+100; l = 1/Math.sqrt(ldirX*ldirX + ldirY*ldirY + ldirZ*ldirZ); ldirX *= l; ldirY *= l; ldirZ *= l; tcamX = mx * 400; tcamY = my * 150 - 50; tcamZ = my * 400 - 200; camX += (tcamX - camX) * 0.02; camY += (tcamY - camY) * 0.02; camZ += (tcamZ - camZ) * 0.02; kmax = spheres.length; for (k=0; k<kmax; k++) spheres[k].update(); for (j=0,idx=0,pidx=0; j<size; j++) { for (i=0; i<size; i++) { ox = camX; oy = camY; oz = camZ; dx = initialDir[idx]; idx++; dy = initialDir[idx]; idx++; dz = initialDir[idx]; idx++; pixel = 0; for (l=1; l<5; l++) { tmin = 99999; hit = null; for (k=0; k<kmax; k++) { s = spheres[k]; dsx = ox - s.x; dsy = oy - s.y; dsz = oz - s.z; B = dsx * dx + dsy * dy + dsz * dz; C = dsx * dsx + dsy * dsy + dsz * dsz - s.r2; D = B * B - C; if (D > -1) { t = - B - Math.sqrt(D); if ((t > 0) && (t < tmin)) { tmin = t; hit = s; } } } if (hit) { ox += dx * tmin; oy += dy * tmin; oz += dz * tmin; nx = ox - hit.x; ny = oy - hit.y; nz = oz - hit.z; n = 1 / Math.sqrt(nx*nx + ny*ny + nz*nz); nx *= n; ny *= n; nz *= n; n = -(nx*dx + ny*dy + nz*dz) * 2; dx += nx * n; dy += ny * n; dz += nz * n; ln = (((ldirX * nx + ldirY * ny + ldirZ * nz) * 256) + 256) >>> 0; a = hit.mat.lmap[ln]; a >>= refs[l]; a &= reff[l]; pixel += a; } else { if (dy < 0) { ln = (((ldirX * dx + ldirY * dy + ldirZ * dz) * 256) + 256) >>> 0; a = smap[ln]; ln = l - 1; a >>= refs[ln]; a &= reff[ln]; pixel += a; break; } else { tmin = (floorY-oy)/dy; ox += dx * tmin; oy += dy * tmin; oz += dz * tmin; dy = -dy; ln = (dy * 256 + ( ( ( (((ox>>>0)+(oz>>>0))>>7) + (((ox>>>0)-(oz>>>0))>>7) ) &1)<<9) +256) >>> 0; a = fcol[ln]; a >>= refs[l]; a &= reff[l]; pixel += a; } } } pixels[pidx] = (pixel>>16)&255; pidx++; pixels[pidx] = (pixel>>8)&255; pidx++; pixels[pidx] = (pixel)&255; pidx++; pixels[pidx] = 255; pidx++; } } graphics.putImageData(imageData, 0, 0); //video.add(graphics); // GIFエンコーダーに記録する。 encoder.addFrame(graphics); gFrames++; //console.log(gFrames); if(gFrames>100) { // 100フレーム記録したらGIFアニメの作成を終了し、再生する。 document.getElementById('status').innerHTML = "Compiling Video"; //var output = video.compile(); encoder.finish(); var binaryGif = encoder.stream().getData(); //var url = webkitURL.createObjectURL(output); var dataUrl = 'data:image/gif;base64,'+encode64(binaryGif); document.getElementById('awesome').src = dataUrl; clearInterval(myTimerId); } document.getElementById('status').innerHTML = "Drawing Frames"; } function onMouseMove(e) { mx = (e.clientX - 232.5) * 0.00390625; my = (232.5 - e.clientY) * 0.00390625; } $(setup); })();<script type="text/javascript" src="https://rawgithub.com/antimatter15/jsgif/master/LZWEncoder.js"></script> <script type="text/javascript" src="https://rawgithub.com/antimatter15/jsgif/master/NeuQuant.js"></script> <script type="text/javascript" src="https://rawgithub.com/antimatter15/jsgif/master/GIFEncoder.js"></script> <script type="text/javascript" src="https://rawgithub.com/antimatter15/jsgif/master/Demos/b64.js"></script> <canvas id='canvas' width="256" height="256"></canvas> <img id="awesome" width="256" height="256"> <br> Status: <span id="status">Idle</span>body { background-color: #DDDDDD; font: 30px sans-serif; }

Play on jsdo.it games
- Author
- Share
- ブログに埋め込む
- QR
- Tag
Download

Complete!

Description どんなゲームですか？

Control Device

	スマートフォンコントローラー jsdo.it WebSocket Controller»
	マウス
	キーボード
	タッチデバイス

Fullscreen

有効
無効

jsdo.it games から削除する Submit

kjunichi

URL
http://kjunichi.cocolog-nifty.com/

2011年8月に息子が生まれてからイクメンやってます。 jsdo.itに出会って以来、JavaScriptやHTML5に目覚めて、あれこれ作ってます。 Google App EngineにRingoJSを入れて、そこからJsdo.itのソースをHTTPで読み込ませ、サーバサイドJavaScriptもJsdo.itで作ったりしています。写真は少し前の本人の写真です。息子の写真ではありませんｗ。

Size

Width: px
Height: px

code

<script type="text/javascript" src="http://jsdo.it/blogparts/305h/js"></script>

QR Code

実行画面をスマートフォンで確認できます。

お父さん QR - App Store

Discussion

このコードについて質問してみる！

Favorite by

oimou

リアルタイムでレイトレして、GIFに記録するヤツ

FirefoxでもなんとかCanvasの内容を動画にしたくて

さらに2014年ちっくな手法の考察

Link

リアルタイムでレイトレするすごい作品のオリジナル

Description どんなゲームですか？

Control Device

Fullscreen

Author

Default Panel

Size

code

Discussion

Tags

Favorite by