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);