Subversion Repositories pdp1

/*
  Canvas 2D version of an XY oscilloscope (real time scatterplot). 
  Goal performance: 5µs point processing time at 60Hz. 
  That's about 3.3k points per frame. 
 
  Next steps: Measure performance drawing 3400 random points.
  Make it read from a pipe of some sort (websocket?). 
  Make a translator that we can pipe into. 
  Why am I not doing this sort of thing in puredata?
 
 
*/
 
var width=1024, height=1024;
var imageData, ctx, frame=0;
 
function renderonce(event) {
    requestAnimationFrame( render );
}
var lastCalledTime, fps;
function renderloop(now) {
    if (render(now))  // Let render() decide if we finished.
	requestAnimationFrame( renderloop );
}
 
function render(now) {
    //    var now = Date.now()
    var delta;
    if(!lastCalledTime) {
	lastCalledTime = now;
	fps = 0;
	delta = 1e6;
    } else {
	delta = (now - lastCalledTime)/1000;
	lastCalledTime = now;
	fps = /*frame*/1/delta;
    }
 
    // Decay hack
    // This isn't nearly as good as an age based exponential falloff.
    // It produces the faint trace effect of digital emulated
    // phosphorous. Still, might be good enough for the moment.
    var alpha = 1-Math.exp(-5*delta);
    ctx.fillStyle = 'rgba(0,0,0,'+alpha+')';
    ctx.fillRect(0,0,width,height);
 
    // Plot colour
    ctx.fillStyle = 'rgba(255,255,255,1)';
    for (var i=0; i<5400; i++) {
	var x = Math.floor(Math.random()*width);
	var y = Math.floor(Math.random()*height);
	ctx.fillRect(x,y,1,1);
	/*
	var s = Math.floor(Math.sin(x/100)*height/2+height/2);
	var miny = Math.max(s-5,0), maxy=Math.min(s+5,height);
	for (var y=miny; y<maxy; y++) {
	    var pi = (y*width+x)*4;
	    imageData.data.fill(255, pi+0, pi+3);
	    //imageData.data[pi+3] = 0;
	}
	*/
    }
    //    ctx.putImageData(imageData, 0, 0);
 
    if (++frame==width) {
	frame=0;
	ctx.font = "48px serif";
	ctx.fillText(fps, width/3, height/3);
	return false;
    }
    return true;
}
 
function startrenderloop(event) {
    requestAnimationFrame( renderloop );
}
 
function start(canvasid) {
    canvas = document.getElementById(canvasid);
    if (!canvas.getContext) {
	alert("Canvas doesn't support contexts?");
	return;
    }
    canvas.onclick = startrenderloop;
    ctx = canvas.getContext("2d");
    /*
    imageData = ctx.createImageData(width,height);
 
    // TODO: Generate new points per frame
 
    imageData.data.fill(0);
    for (var pi = 3; pi < width*height*4; pi+=4)
	imageData.data[pi]=255;  // opaque
    ctx.putImageData(imageData, 0, 0);
    */
 
//    renderloop();
}