A CRT emulator library for CODEF.
Hi everyone, here is a small library for CODEF to emulate a CRT display. Hopefully it should look something like an old Philips CM8833 monitor.
The library is very easy to use, just two additional includes for your CODEF screen’s HTML file, and two small changes to how you run your animation.
Here is a zip file containing everything you need to use this library + a cool CODEF screen by Mellow Man – codef_crt_emulator_0.9.0.zip
How to add support to your CODEF animation.
OK, down to business. Below I’ll explain how to use the library.
Changes to your HTML.
First add the above to your CODEF animation HTML file to load in the library.
You probably have a div like above to tell CODEF where to place the canvas it creates. You still need one for this CRT emulator. So, make sure something like the above div with an ID is in your HTML.
Optionally you can also add a ‘fullscreen’ button. You can either use your own fullscreen function, or call my version built into the library with codefCRTemulator.toggleFullScreen(‘main’);
CODEF CRT Emulator API.
// mycanvas=new canvas(768,536,"main");
The commented out code above is how you currently create a CODEF main canvas that will be displayed on the screen.
To use my CRT emulator library, all you need to do is substitute the line of code above, for the two replacement lines below.
mycanvas=new canvas(768,536); codefCRTemulator.setup(mycanvas, "main");
The first line creates an off screen CODEF canvas in the normal way. This the canvas that will be displayed in the web browser. So, draw everything in your animation on to this canvas. The second line sets up the CRT emulator’s internals.
Now at the end of your animation loop, before you call requestAnimFrame(go); Call codefCRTemulator.draw(); to tell the CRT emulator it needs to copy your CODEF canvas over to the WebGL canvas shown on screen.
And that’s all you need to do to switch from a displayed CODEF canvas to my CRT emulator!
codefCRTemulator.set.gamma(1.2); codefCRTemulator.set.contrast(1.2); codefCRTemulator.set.saturation(1.2); codefCRTemulator.set.brightness(1.2);
Adjust color balance.
Enable/disable screen curvature.
Enable/disable screen scanlines.
As the CRT screen is curved, I also slightly adjust the brightness in the centre of the screen outwards. A nice value is around 6.
Set the pixel displacement value the gaussian blur in the shader will use to sample the CODEF canvas – usually a value between 1. and 2.
Show current FPS in the document title.
Returns the library version number.
Returns current FPS.
codefCRTemulator.set.scanlines(false); codefCRTemulator.set.gaussian(0); codefCRTemulator.set.light(0); codefCRTemulator.set.curvature(false); codefCRTemulator.set.gamma(1); codefCRTemulator.set.contrast(1); codefCRTemulator.set.saturation(1); codefCRTemulator.set.brightness(1);
Will disable everything, and show the raw CODEF source canvas.
Changing the shader.
You can also supply your own fragment shader. Below is a copy of the stock version built into the library.
Add the above HTML script section to your HTML file, then call the function below to use your own shader instead of the built in one.