A CRT emulator library for CODEF.

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

You can also see a live version of the zip by clicking here.


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.

codefCRTemulator.draw();
requestAnimFrame(go);

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!


Additional switches

codefCRTemulator.set.gamma(1.2);
codefCRTemulator.set.contrast(1.2);
codefCRTemulator.set.saturation(1.2);
codefCRTemulator.set.brightness(1.2);

Adjust color balance.


codefCRTemulator.set.curvature(false);

Enable/disable screen curvature.


codefCRTemulator.set.scanlines(false);

Enable/disable screen scanlines.


codefCRTemulator.set.light(0.);

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.


codefCRTemulator.set.gaussian(1.5);

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.


codefCRTemulator.set.showFPS(true);

Show current FPS in the document title.


console.log(codefCRTemulator.get.version());

Returns the library version number.


console.log(codefCRTemulator.get.fps());

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.

codefCRTemulator.set.fragmentShader("my-replacement-shader-fs");

Downloads

Here is a zip download of everything you need to use this library, including a CODEF screen written by Mellow Man.

You can also see a live version of the zip by clicking here.

2 thoughts on “A CRT emulator library for CODEF.”

    1. iGlobalTime contains the duration the shader has been running, and is updated every frame the shader renders. It isn’t needed for the stock shader, but is a nice to have for customised user shaders, as you can use the incrementing time value for post effects – for instance adding static, distorting the horizontal hold, or rolling the display vertically etc.

Leave a Reply

Your email address will not be published. Required fields are marked *