 
          
        
        Collection of old school effects (sinus scroller, raster lines, starfield, etc.). This marks my return to the demo scene after a 22 year hiatus. :D
Z="px Courier";var a=800,c=600,e=0,f=0,g=document,h=g.body,j=g.getElementById("c"),k=h.style,l=j.getContext("2d"),m=h.innerHTML,n=m.length,o=Math,p=o.PI,q=o.sin,r=o.random,s=window,t=[],u="beginPath";k.background="#000";j.width=a;j.height=c;l.strokeStyle="#0f0";l.fillStyle="#000";function v(){k.margin=(s.innerHeight-c)/2+"px 0px 0px "+(s.innerWidth-a)/2+"px"}s.onresize=v;for(i=0;i<c;){t.push({x:r()*400-200,y:r()*200-100});i++}function w(b,d,y,z,A,B,x){l[u]();for(i=0;i<b;){l.moveTo(0,d+q((e+i*y)/A*p)*x);l.lineTo(a,d+q((e+i*z)/B*p)*x);i++}l.stroke()}v();setInterval(function(){l.fillRect(0,0,a,c);w(255,220,0.2,0.1,40,50,111);w(45,470,0.4,0.2,50,30,75);l.font=300+Z;l.fillText("JS1K",q(e/50*p)*c,300);l.font=20+Z;for(i=0;i<n;){var b=a-f*5+i*11;l.fillText(m.charAt(i),b,480+q((e+i)/50*p)*30);if(i==n-1&&b<0)f=0;i++}f++;var d;l[u]();for(i=0;i<c;){t[i].x+=t[i].x/40;t[i].y+=t[i].y/40;b=t[i].x+400;d=t[i].y+200;l.moveTo(b,d);l.lineTo(b+1,d);if(b<0||b>a||d<0||d>c)t[i]={x:r()*400-200,y:r()*200-100};i++}l.stroke();e++},38);Wj0icHggQ291cmllciI7dmFyIGE9ODAwLGM9NjAwLGU9MCxmPTAsZz1kb2N1bWVudCxoPWcuYm9keSxqPWcuZ2V0RWxlbWVudEJ5SWQoImMiKSxrPWguc3R5bGUsbD1qLmdldENvbnRleHQoIjJkIiksbT1oLmlubmVySFRNTCxuPW0ubGVuZ3RoLG89TWF0aCxwPW8uUEkscT1vLnNpbixyPW8ucmFuZG9tLHM9d2luZG93LHQ9W10sdT0iYmVnaW5QYXRoIjtrLmJhY2tncm91bmQ9IiMwMDAiO2oud2lkdGg9YTtqLmhlaWdodD1jO2wuc3Ryb2tlU3R5bGU9IiMwZjAiO2wuZmlsbFN0eWxlPSIjMDAwIjtmdW5jdGlvbiB2KCl7ay5tYXJnaW49KHMuaW5uZXJIZWlnaHQtYykvMisicHggMHB4IDBweCAiKyhzLmlubmVyV2lkdGgtYSkvMisicHgifXMub25yZXNpemU9djtmb3IoaT0wO2k8Yzspe3QucHVzaCh7eDpyKCkqNDAwLTIwMCx5OnIoKSoyMDAtMTAwfSk7aSsrfWZ1bmN0aW9uIHcoYixkLHkseixBLEIseCl7bFt1XSgpO2ZvcihpPTA7aTxiOyl7bC5tb3ZlVG8oMCxkK3EoKGUraSp5KS9BKnApKngpO2wubGluZVRvKGEsZCtxKChlK2kqeikvQipwKSp4KTtpKyt9bC5zdHJva2UoKX12KCk7c2V0SW50ZXJ2YWwoZnVuY3Rpb24oKXtsLmZpbGxSZWN0KDAsMCxhLGMpO3coMjU1LDIyMCwwLjIsMC4xLDQwLDUwLDExMSk7dyg0NSw0NzAsMC40LDAuMiw1MCwzMCw3NSk7bC5mb250PTMwMCtaO2wuZmlsbFRleHQoIkpTMUsiLHEoZS81MCpwKSpjLDMwMCk7bC5mb250PTIwK1o7Zm9yKGk9MDtpPG47KXt2YXIgYj1hLWYqNStpKjExO2wuZmlsbFRleHQobS5jaGFyQXQoaSksYiw0ODArcSgoZStpKS81MCpwKSozMCk7aWYoaT09bi0xJiZiPDApZj0wO2krK31mKys7dmFyIGQ7bFt1XSgpO2ZvcihpPTA7aTxjOyl7dFtpXS54Kz10W2ldLngvNDA7dFtpXS55Kz10W2ldLnkvNDA7Yj10W2ldLngrNDAwO2Q9dFtpXS55KzIwMDtsLm1vdmVUbyhiLGQpO2wubGluZVRvKGIrMSxkKTtpZihiPDB8fGI+YXx8ZDwwfHxkPmMpdFtpXT17eDpyKCkqNDAwLTIwMCx5OnIoKSoyMDAtMTAwfTtpKyt9bC5zdHJva2UoKTtlKyt9LDM4KTs=Z = 'px Courier'; // This prevents CLosure from inlining this string
		var width = 800, 
			height = 600,
			ticks = 0,
			scrollerOffset = 0,
			doc = document,
			body = doc.body,
		    canvas = doc.getElementById('c'),
		    style = body.style,
		    context = canvas.getContext('2d'),
		    scrollerText = body.innerHTML,
		    scrollerLength = scrollerText.length,
		    math = Math,
		    pi = math.PI,
		    sin = math.sin,
		    rnd = math.random,
		    win = window, 
		    stars=[],
		    beginPath = 'beginPath';
		style.background = "#000";
		canvas.width = width;
		canvas.height = height;
		context.strokeStyle = '#0f0';
		context.fillStyle = "#000";
		function resize(){
			style.margin = (win.innerHeight - height) / 2 + 'px 0px 0px ' + (win.innerWidth - width) / 2 + 'px';
		};
		win.onresize = resize;
		function newStar(){
			return {x: (rnd() * 400) - 200,y: (rnd() * 200) - 100 };
		}
		i = 0;
		while(i<height){
			stars.push(newStar());
			i++;
		}
		function renderStars(){
			var newx, newy;
			context[beginPath]();
			i=0;
			while(i<height){
				stars[i].x += stars[i].x / 40;
				stars[i].y += stars[i].y / 40;
				newx = stars[i].x + 400;
				newy = stars[i].y + 200;
				context.moveTo(newx, newy);
				context.lineTo(newx + 1, newy);
				if(newx < 0 || newx > width || newy < 0 || newy > height) stars[i] = newStar();
				i++;
			}
			context.stroke();
		}
		
		function renderLines(numberOflines, top, lineDistanceLeft, lineDistanceRight, sinusFrequencyLeft, sinusFrequencyRight, effectHeight){
			context[beginPath]();
			i = 0;
			while(i < numberOflines){
				context.moveTo(0, top + (sin(( (ticks + (i * lineDistanceLeft)) / sinusFrequencyLeft) * pi) * effectHeight));
				context.lineTo(width, top + (sin(( (ticks + (i * lineDistanceRight)) / sinusFrequencyRight) * pi) * effectHeight));
				i++;
			}
			context.stroke();
		}
		
		function draw(){
			context.fillRect(0,0,width,height);
			renderLines(255,220,0.2,0.1,40,50,111);
			renderLines(45,470,0.4,0.2,50,30,75)
			context.font = 300 + Z;
			context.fillText('JS1K', sin((ticks / 50) * pi) * height , 300);
			context.font = 20 + Z;
			i = 0;
			while(i < scrollerLength){
				var left = (width - (scrollerOffset * 5)) + (i * 11);
				context.fillText(scrollerText.charAt(i), left , 480 + (sin(((ticks + i ) / 50) * pi) * 30));
				if(i == scrollerLength-1 && left < 0) scrollerOffset = 0;
				i++;
			}
			scrollerOffset++;
			renderStars();
			ticks++;
		}
		resize();
		setInterval(draw, 38);