my console.log demo

[rich]

I won't post a screen shot as I don't want to spoil it

 

But it's just a fun little thing I made tonight.

 

http://sandbox.photonstorm.com/console.log/

[Chris]

By the way, its not 

intro(250)

in the console, but 

init(250)

Funny idea; I smiled
Sadly, its lagging so hard ^^

[p01]

rich: I sent you this by mail, but better post this here:

The idea is really cool. Too bad it's so slow to render.

At work your canvasToConsole() method takes at 15-25ms on my i7 @ 3.4Ghz.
The following version takes 12ms max.
 

var canvasToConsole = (function(){  var txt = "";  for (var i = 50*30; i--  {    txt += "%c  ";    if(!(i%50))     txt += "\n";  }  return function()  {    var then = Date.now();    var id = mycanvas.contex.getImageData(0,0,50,30).data;    var bah = [txt];    for (var i = 50*30; i--     bah.push("background: rgb("+id[i*4]+","+id[i*4+1]+","+id[i*4+2]+")");    console.clear();    console.log.apply(console,bah);    console.log(Date.now()-then);  }})();

This also get rid of the blank/whitespace between each row of pixels.

The go() method only needs to process the frame if (Date.now > t)

I haven't been convinced by CODEF yet :\

But at such a low resolution, you can probably use any framework. The

bottleneck is in console.log()

Maybe a slightly lower resolution, and sharper graphics, would improve
the framerate and legibility.Or maybe, but that might be seen as "cheating", go for a simple:
 

var canvasToConsole = function(){  var foo = "width: 150px; height: 90px; background: url("+canvas.toDataURL() +") 150px 90px";  console.clear();  console.log("%c ", foo);} // or anything similar. I haven't tried this, but I'm pretty surethis can work.

Anyways, kudos for exploring new territories!

[mwatt]

This is so.... creative, I guess is the best word.  Cool is another good one.

[rich]

Ok brand new version uploaded. This one includes p01's method of getting rid of the white lines! (looks MUCH better now) and I also added RLE so it's faster too as it has to generate a lot smaller logs. Also added option to toggle white/colour background - the white version helps visually. Added new refresh rate, instructions, music toggle.

 

And... I'm done

[mentuat]

no idea what epilepsy inducing madness I just experienced but I suddenly feel the need for a glow stick

[p01]

This one combines your RLE and my single getImageData + rgb colors, thus getting rid of a tons of functions calls.var canvasToConsole3 = function(){  var txt = "";  var prev;  var args = [""];  var lfb = mycanvas.contex.getImageData(0, 0, 50, 30).data;  for (var i = 0, j = 0; i < 1500; i++, j++)  {    if (!(i % 50)) // if(i && !(i % 50)) if don't like to start with a "\n"    	txt += prev = "\n";    var col = "background: rgb(" + [lfb[j++], lfb[j++], lfb[j++]] + ")";    if (col == prev)    {      txt += "  ";    }    else    {      txt += "%c  ";      args.push(col);      prev = col;    }  }  args[0] = txt;  console.clear();  console.log.apply(console, args);};

[rich]

Nice. Still flickers like a bad-ass though

[triptych]

I dare you to use this example in a bug to the chrome folks to help fix the flickering.

[rich]

 

I've literally just uploaded a new build, thanks to some feedback from twitter, which has got rid of the flickering almost entirely. Win!