URL
https://opencores.org/ocsvn/pdp1/pdp1/trunk
Subversion Repositories pdp1
Compare Revisions
- This comparison shows the changes necessary to convert path
/pdp1
- from Rev 11 to Rev 12
- ↔ Reverse comparison
Rev 11 → Rev 12
/trunk/sw/xyplot-nogl.html
0,0 → 1,12
<html> |
<head> |
<meta charset="UTF-8"> |
<title>XY oscilloscope web widget</title> |
<script src="xyplot-nogl.js"></script> |
</head> |
<body onload="start('scope')"> |
<canvas id="scope" width="1024" height="1024"> |
It appears your browser didn't like the canvas tag. |
</canvas> |
</body> |
</html> |
/trunk/sw/xyplot-nogl.js
0,0 → 1,99
/* |
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(); |
} |
|