Old CRT Monitor Effect

Old CRT Monitor EffectDoes anyone remember the first CRT monitors? Those monochrome ones that had the ugly refresh line, scanlines, etc. This is an attempt to recreate that feel. I got the idea from tutsplus.com. Actually I used the method there almost exactly and changed the image. This effect makes use of RGB shifting, scanlines, animated noise and lastly an ¬†animated “refresh” bar. I liked the effect that was applied to the basic design in the tutorial, which reminded me of some old school games. However, I actually like the effect applied to the image I am using. It reminds me of some kind of horror movie.

I can just imagine some creepy music playing along to this ghostly “painting” hanging on the wall.

The algorithm

  • Create a scene to apply the effect to
  • Slightly shift the RGB layers over each other
  • Add in the scanline overlay
  • Add in a noise overlay, which is generated each frame using BitmapData.noise()
  • Lastly, add in a blurred bar overlay which animates from top to bottom and repeats

The code

package net.avdw.demo
{
	import flash.display.Bitmap;
	import flash.display.BitmapData;
	import flash.display.BlendMode;
	import flash.display.Sprite;
	import flash.filters.BlurFilter;
	import net.avdw.fx.AnimatedNoiseFx;
	import net.avdw.fx.RefreshBarFx;
	import net.avdw.fx.RGBDistortableFx;
	import net.avdw.generate.makeOverlayTextureFromPattern;
	import net.avdw.generate.pattern.scanlinePattern;

	/**
	 * ...
	 * @author Andrew van der Westhuizen
	 */
	public class BrokenCrtDemo extends Sprite
	{
		[Embed(source="../../../../../assets/images/680x495 Misty Pixie.jpg")]
		private const MistyPixie:Class;

		public function BrokenCrtDemo()
		{
			addChild(new Bitmap(new BitmapData(stage.stageWidth, stage.stageHeight, false, 0)));

			var mistyPixie:RGBDistortableFx = new RGBDistortableFx(new MistyPixie());
			addChild(mistyPixie);
			mistyPixie.distort({x: 10, y: 3, alpha: .3, speed: .8});

			addChild(makeOverlayTextureFromPattern(scanlinePattern(), stage.stageWidth, stage.stageHeight));

			new RefreshBarFx(stage);
			new AnimatedNoiseFx(stage);
		}

	}

}