I have added many of the effects together, with notes identifying all of the specific parts, and you can see the finished screen HERE.
Also to look at the source code below, and then have a play with the parameters of these effects, and see what you can make! Most importantly, have fun with it!
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>DEMO TEST</title>
<script src="http://codef.namwollem.co.uk/JS/CODEF/codef_core.js"></script>
<script src="http://codef.namwollem.co.uk/JS/CODEF/codef_starfield.js"></script>
<script src="http://codef.namwollem.co.uk/JS/CODEF/codef_music.js"></script>
<script src="http://codef.namwollem.co.uk/JS/CODEF/codef_scrolltext.js"></script>
<script src="http://codef.namwollem.co.uk/JS/CODEF/codef_gradient.js"></script>
<script>
// DEFINE OUR MAIN CANVAS
var mycanvas;
// DEFINE OUR MUSIC TYPE
var player = new music("MK");
player.stereo(true);
// DEFINE THE STARFIELD
var mystarfield;
// DEFINE OUR LOGO IMAGE
var logo=new image('../files/logo.gif');
// DEFINE THE BOUNCE POSITION
var sinY=0;
// DEFINE THE TRACKING SPRITE IMAGE
var ball = new image('ball.png');
// DEFINE THE TRACKING SPRITE OFFSET POSITIONS
var ballpos = new Array();
ballpos[0]=0;
ballpos[1]=0.2;
ballpos[2]=0.4;
ballpos[3]=0.6;
ballpos[4]=0.8;
ballpos[5]=1;
ballpos[6]=1.2;
ballpos[7]=1.4;
// DEFINE THE FONT USED FOR OUR SCROLLTEXT
var font = new image('font7.png');
var scrolltext;
// DEFINE THE TEXT CONTAINED WITHIN THE SCROLLTEXT
var text=" TEST MESSAGE...... THIS IS HOW TO MAKE A SIMPLE OLD-SCHOOL DEMOSCREEN USING CODEF WITH HTML5... ";
// DEFINE THE RASTER EFFECT BY CREATING A SMALL CANVAS, WITH A GRADIENT BACKGROUND
var raster;
var mygrad;
var mygradcolor=[
{color: 'rgb(0,0,0)' , offset:0},
{color: 'rgb(0,0,255)', offset:0.5},
{color: 'rgb(0,0,0)' , offset:1}
];
// THIS WILL GIVE US A BLUE RASTER EFFECT (RGB: 0,0,255 = BLUE)
// DEFINE THE RASTER BOUNCE OFFSET POSITIONS
var sinY1=0;
var sinY2=0.1;
var sinY3=0.2;
var sinY4=0.3;
var sinY5=0.4;
function init(){
mycanvas=new canvas(640,480,"main");
// SET THE LOGO TO CENTRAL HANDLE
logo.setmidhandle();
// DEFINE THE STARFIELD AS A CENTRALLY POSITIONED 3D STARFIELD ON THE MAIN CANVAS
mystarfield=new starfield3D(mycanvas,500,2,640,480,320,240,'#FFFFFF',100,0,0);
// DEFINE OUR GRADIENT BACKGROUND ONTO OUR RASTER CANVAS
raster=new canvas(640,48);
mygrad=new grad(raster,mygradcolor);
mygrad.drawH();
// DEFINE THE TILESET FOR THE FONT, DEFINE THE SCROLLTEXT, SPEED AND TEXT SOURCE
font.initTile(32,32,32);
scrolltext = new scrolltext_horizontal();
scrolltext.scrtxt=text;
scrolltext.init(mycanvas,font,4);
// LOAD AND RUN THE MUSIC FILE
player.LoadAndRun('enigma.mod');
go();
}
function go(){
// CLEAR THE SCREEN AND FILL WITH BLACK
mycanvas.fill('#000000');
// DRAW THE 3D STARFIELD
mystarfield.draw();
// INCREMENT ALL OF THE RASTER BAR POSITION OFFSETS
sinY1+=0.02;
sinY2+=0.02;
sinY3+=0.02;
sinY4+=0.02;
sinY5+=0.02;
// DRAW THE RASTERS ONTO THE CANVAS
raster.draw(mycanvas,0,400-Math.abs(Math.sin(sinY1)*300),0.2,0);
raster.draw(mycanvas,0,400-Math.abs(Math.sin(sinY2)*300),0.4,0);
raster.draw(mycanvas,0,400-Math.abs(Math.sin(sinY3)*300),0.6,0);
raster.draw(mycanvas,0,400-Math.abs(Math.sin(sinY4)*300),0.8,0);
raster.draw(mycanvas,0,400-Math.abs(Math.sin(sinY5)*300),1,0);
// DRAW THE SCROLLTEXT ONTO THE CANVAS
scrolltext.draw(380);
// INCREMENT THE POSITION MULTIPLIER OF THE LOGO SWING MOVEMENT, AND DRAW IT ONTO THE CANVAS
sinY+=0.06;
logo.draw(mycanvas,320,240+(100)*Math.cos(sinY));
// CREATE A LOOP, AND DRAW TRACKING SPRITES ONTO THE CANVAS, EACH WITH INCREMENTED OFFSET POSTIONS
for (var counter=0;counter<7;counter++){
ballpos[counter] += 0.035;
ball.draw(mycanvas,319+244*Math.sin(ballpos[counter]),186+154*Math.cos(ballpos[counter]*1.5));
}
// REFRESH THE FRAME
requestAnimFrame( go );
}
</script>
</head>
<body onLoad="init();">
<body bgcolor="#FFFFFF">
<br>
<center>
<div id="main"></div><br><br>
<a href="javascript:window.location='view-source:'+window.location">View Source</a>
</center>
</body>
</html>
No comments:
Post a Comment