Awesome Html5 canvas animations - part2
Below 6 codes working with ie emulation (i tested on ie11 emulation here). the javascript part is from K3D libraries. Better to download it (its free) and run(links can be broken or moved...) locally on disc.the links are in the codes. the resources used (js files) are on the web, internet must be connected. there is 6 animations with html5 canvas: 1-ultralight animation.can interact with mousedown to deform the animated object. 2-Cube 3d animated 3-Bubbles: sphere objects created and moved throw paths.can create new with the mouse (pick and click on canvas) 4-A rendered sphere with k3D library.(texture images are linked on web) 5-Snowfield with colored polygons.I added sound with WMPlayer embed. 6-HTML5 logo rotating on canvas. All is tested on Windows8.1 only.
*1*yultralight.prg...k3D
set safe off
local m.myvar
text to m.myvar noshow
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=0;" />
<title>UltraLight Demo - Lightsourced 3D rendering in HTML5 Canvas and JavaScript</title>
<script>
var a = navigator.userAgent;
var iPhoneOS = (a.indexOf("iPhone;") != -1 || a.indexOf("iPod;") != -1);
</script>
<script src="http://www.kevs3d.co.uk/dev/canvask3d/scripts/mathlib-min.js"></script>
<script src="http://www.kevs3d.co.uk/dev/canvask3d/scripts/k3d-min.js"></script>
<script src="http://www.kevs3d.co.uk/dev/canvask3d/scripts/ultralight.js"></script>
<style type="text/css">
body { font-family: Arial, Helvetica; color: white }
.title { text-align: center; font-weight: bold; font-size: 1.2em; color: white }
P { padding-left: 2em; padding-top: 0; line-height: 0.75em; font-size: 0.9em; }
P.left { padding-left: 1em; line-height: 0.75em; font-size: 0.9em; }
a, a:visited, a:active, a:hover { color: #ffff88 }
.button-overlay { position: absolute; right: 1em; }
</style>
</head>
<body bgcolor="black" scroll="no" oncontextmenu="window.close();return false;" onload="onloadHandler();">
<div style="text-align:center">
<div style="width:100%">
<center> <canvas id="canvas" width="800" height="700" style="background-color:#000"></canvas></center>
</div>
<div>
<br> <p style="color:white;">Can interact with the mousedown.RightClick to close the window.</p>
<script>
if (!iPhoneOS)
{
}
</script>
</p>
</div>
</div>
</body>
</html>
endtext
local m.lcdest
m.lcdest=addbs(sys(2023))+"test.html"
=strtofile(m.myvar,m.lcdest)
Declare Integer BringWindowToTop In user32 Integer
Declare Integer SetWindowText In user32 Integer HWnd, String lpstring
Declare Integer Sleep In kernel32 Integer
apie=Newobject("internetexplorer.application")
with apie
.Navigate(lcdest)
.menubar=0
.Toolbar=0
.StatusBar=0
*.Height=600
*.Width=800
*.Left=(Sysmetric(1)-.Width)/2
.fullscreen=1
.Visible=.T.
BringWindowToTop(.HWnd)
SetWindowText(.HWnd, "UltraLight animation (F11 set/toggle FULLSCREEN)")
.visible=.t.
Endwith
*2*ycube.prg...k3D
set safe off
local m.myvar
text to m.myvar textmerge noshow
<!DOCTYPE html>
<html>
<head>
<title>K3D - Example 3</title>
<script src="http://www.kevs3d.co.uk/dev/canvask3d/scripts/mathlib.js"></script>
<script src="http://www.kevs3d.co.uk/dev/canvask3d/scripts/k3d_main.js"></script>
<script src="http://www.kevs3d.co.uk/dev/canvask3d/scripts/k3d_controller.js"></script>
<script src="http://www.kevs3d.co.uk/dev/canvask3d/scripts/k3d_object.js"></script>
<script src="http://www.kevs3d.co.uk/dev/canvask3d/scripts/k3d_light.js"></script>
<script src="http://www.kevs3d.co.uk/dev/canvask3d/scripts/k3d_renderer.js"></script>
<script>
// bind to window onload event
window.addEventListener('load', onloadHandler, false);
var bitmaps = [];
function onloadHandler()
{
// get the images loading
bitmaps.push(new Image());
var loader = new Preloader();
loader.addImage(bitmaps[0], 'http://www.kevs3d.co.uk/dev/canvask3d/images/texture5.png');
loader.onLoadCallback(init);
}
function init()
{
// get the canvas DOM element
var canvas = document.getElementById('canvas');
// bind a K3D Controller object to the canvas
// - it is responsible for managing the K3D objects displayed within it
var k3d = new K3D.RequestAnimController(canvas);
// create a K3D object for rendering
var obj = new K3D.K3DObject();
obj.textures.push(bitmaps[0]);
with (obj)
{
drawmode = "solid"; // one of "point", "wireframe", "solid"
shademode = "lightsource"; // one of "plain", "depthcue", "lightsource" (solid drawing mode only)
addtheta = addgamma = 1.0;
scale = 100;
init(
// describe the points of a simple unit cube
[{x:-1,y:1,z:-1}, {x:1,y:1,z:-1}, {x:1,y:-1,z:-1}, {x:-1,y:-1,z:-1}, {x:-1,y:1,z:1}, {x:1,y:1,z:1}, {x:1,y:-1,z:1}, {x:-1,y:-1,z:1}],
// describe the edges of the cube
[{a:0,b:1}, {a:1,b:2}, {a:2,b:3}, {a:3,b:0}, {a:4,b:5}, {a:5,b:6}, {a:6,b:7}, {a:7,b:4}, {a:0,b:4}, {a:1,b:5}, {a:2,b:6}, {a:3,b:7}],
// describe the polygon faces of the cube
[{color:[255,0,0],vertices:[0,1,2,3],texture:0},{color:[0,255,0],vertices:[0,4,5,1],texture:0},{color:[0,0,255],vertices:[1,5,6,2],texture:0},{color:[255,255,0],vertices:[2,6,7,3],texture:0},{color:[0,255,255],vertices:[3,7,4,0],texture:0},{color:[255,0,255],vertices:[7,6,5,4],texture:0}]
);
}
// add the object to the controller
k3d.addK3DObject(obj);
// begin the rendering and animation immediately
k3d.paused = false;
k3d.frame();
}
</script>
</head>
<body bgcolor="black" scroll="no" onload="init()" oncontextmenu="window.close();return false;" >
<center> <canvas id="canvas" width="700" height="700" style="background-color: black"></canvas></center>
</body>
</html>
endtext
local m.lcdest
m.lcdest=addbs(sys(2023))+"test.html"
=strtofile(m.myvar,m.lcdest)
Declare Integer BringWindowToTop In user32 Integer
Declare Integer SetWindowText In user32 Integer HWnd, String lpstring
Declare Integer Sleep In kernel32 Integer
apie=Newobject("internetexplorer.application")
with apie
.Navigate(lcdest)
.menubar=0
.Toolbar=0
.StatusBar=0
*.Height=600
*.Width=800
*.Left=(Sysmetric(1)-.Width)/2
.fullscreen=1
.Visible=.T.
BringWindowToTop(.HWnd)
SetWindowText(.HWnd, "Sphere animation (F11 set/toggle FULLSCREEN)")
sleep(2000)
.document.body.bgcolor="black"
.visible=.t.
Endwith
*3*yBubbles.prg
set safe off
local m.myvar
text to m.myvar textmerge noshow
<!DOCTYPE HTML>
<html>
<head>
<title>Canvas Demo</title>
<script>
var ie = false;
var initBlobs = 30;
var minBlobs = 15;
</script>
<!--[if IE]>
<script type="text/javascript" src="excanvas.compiled.js"></script>
<script>
ie = true;
var initBlobs = 5;
var minBlobs = 3;
</script>
<![endif]-->
</head>
<body bgcolor="black" scroll="no" onload="init()" oncontextmenu="window.close();return false;" >
<center>
<canvas id="canv" class="output" width="<<sysmetric(1)>>" height="<<sysmetric(2)-100>>" style="width:<<sysmetric(1)>>px;height:<<sysmetric(2)-100>>px;" onclick="blobs.push(createBlob(event));">
<p><b>Browser doesn't support canvas</b></p>
</canvas>
<table style="border:1px solid #ccc;"><tr>
<td height="30" width="30" style="border:1px solid #c0c0c0;" align="center" onclick="setColor(null);">
<b><font face="arial" size="-3">RND</font></b></td>
<td height="30" width="30" bgcolor="#ff0000" onclick="setColor(this);"/>
<td height="30" width="30" bgcolor="#00ff00" onclick="setColor(this);"/>
<td height="30" width="30" bgcolor="#0000ff" onclick="setColor(this);"/>
<td height="30" width="30" bgcolor="#ffff00" onclick="setColor(this);"/>
<td height="30" width="30" bgcolor="#663300" onclick="setColor(this);"/>
<td height="30" width="30" bgcolor="#99ff00" onclick="setColor(this);"/>
<td height="30" width="30" bgcolor="#000000" onclick="setColor(this);"/>
</tr></table>
<div id="debug"/>
</center>
<script>
var width = <<sysmetric(1)>>
var height =<<sysmetric(2)-100>>
var curcolor = null;
var blobs = new Array();
var ltime = 0;
var ctx;
function Blob(x,y,r,vx,vy,w,p,c){
this.x = x;
this.y = y;
this.r = r;
this.vx = vx;
this.vy = vy;
this.wobble = w;
this.wperiod = p;
this.color = c;
}
function init() {
ltime = new Date().getTime();
var elt = document.getElementById('canv');
ctx = elt.getContext('2d');
while (blobs.length < initBlobs) {
blobs.push(createBlob(null));
}
setInterval("draw();", 50);
}
function draw() {
// render background
var g = ctx.createLinearGradient(0, 0, 0, height);
g.addColorStop(0, '#00f');
g.addColorStop(1, '#001');
ctx.fillStyle = g;
ctx.fillRect(0, 0, width, height);
var time = new Date().getTime();
var dt = time-ltime;
// render blobs
for (i=0; i<blobs.length; i++) {
var blob = blobs[i];
var tf = time/1000/blob.wperiod;
var wf = (tf-Math.floor(tf))*2*Math.PI;
var xw = blob.wobble*(Math.sin(wf)-0.5);
if (!ie) {
var rg = ctx.createRadialGradient(
blob.x+xw+blob.r/4,blob.y-blob.r/4,blob.r/5,
blob.x+xw,blob.y,blob.r);
rg.addColorStop(0, '#fff');
rg.addColorStop(0.85, blob.color);
rg.addColorStop(1, 'rgba(0,0,128,0)');
ctx.fillStyle = rg;
ctx.fillRect(blob.x+xw-blob.r,blob.y-blob.r,blob.r*2,blob.r*2);
} else { // ie
ctx.fillStyle = blob.color;
ctx.beginPath();
ctx.arc(blob.x+xw,blob.y,blob.r,0,Math.PI*2,true);
ctx.fill();
ctx.fillStyle = 'rgba(255,255,255,1.0)';
ctx.beginPath();
ctx.arc(blob.x+xw+blob.r/4,blob.y-blob.r/2,blob.r/5,0,Math.PI*2,true);
ctx.fill();
ctx.fill();
}
// update blob pos
blob.x += blob.vx;
blob.y += blob.vy;
if (blob.x > width+blob.r || blob.x < -blob.r
|| blob.y > height+blob.r || blob.y < -blob.r) {
delete blob;
if (blobs.length <= minBlobs) {
blobs.splice(i, 1, createBlob(null));
} else {
blobs.splice(i, 1);
if (i>0) i--;
}
}
}
ltime = time;
}
function createBlob(event) {
var r = (Math.random()*31)+10; // 10-40
var x;
var y;
if (event == null) {
x = Math.random()*width; // 0-width;
y = height+r;
} else {
x = event.clientX;
y = event.clientY;
}
var vx = (((Math.random()*21))-10)/10; // -1 to 1
var vy = -((Math.random()*15)+1)/3.0; // -.3 to -5
if (curcolor == null) {
// random color
var clr = "rgba(";
for (j = 0; j < 3; j++) {
var v = Math.floor(Math.random()*256); // 0-255;
clr += v + ",";
}
clr += "1.0)";
} else {
clr = curcolor;
}
var wob = Math.random()*3+0.1; // wobble amount 0.1-3.1
var wp = Math.random()*wob+0.1; // wobble period 0.1-3.1 sec
return new Blob(x, y, r, vx, vy, wob, wp, clr);
// blobs.push(new Blob(x, y, r, vx, vy, wob, wp, clr));
}
function setColor(elt) {
if (elt == null) {
curcolor = null;
} else {
curcolor = elt.bgColor;
}
}
function debug(v) {
document.getElementById('debug').innerHTML = v;
}
</script>
</body>
</html>
endtext
local m.lcdest
m.lcdest=addbs(sys(2023))+"test.html"
=strtofile(m.myvar,m.lcdest)
Declare Integer BringWindowToTop In user32 Integer
Declare Integer SetWindowText In user32 Integer HWnd, String lpstring
Declare Integer Sleep In kernel32 Integer
apie=Newobject("internetexplorer.application")
with apie
.Navigate(lcdest)
.menubar=0
.Toolbar=0
.StatusBar=0
*.Height=600
*.Width=820
*.Left=(Sysmetric(1)-.Width)/2
.fullscreen=1
.Visible=.T.
BringWindowToTop(.HWnd)
SetWindowText(.HWnd, "Sphere animation (F11 set/toggle FULLSCREEN)")
sleep(2000)
.document.body.bgcolor=[black]
&&
.visible=.t.
Endwith
*4*ySphere.prg ..k3D
set safe off
local m.myvar
text to m.myvar noshow
<!DOCTYPE html>
<html>
<head>
<title>K3D - Example 4</title>
<script src="http://www.kevs3d.co.uk/dev/canvask3d/scripts/mathlib.js"></script> 
   
<script src="http://www.kevs3d.co.uk/dev/canvask3d/scripts/k3d_main.js"></script> 
   
<script src="http://www.kevs3d.co.uk/dev/canvask3d/scripts/k3d_controller.js"></script> 
   
<script src="http://www.kevs3d.co.uk/dev/canvask3d/scripts/k3d_object.js"></script> 
   
<script src="http://www.kevs3d.co.uk/dev/canvask3d/scripts/k3d_light.js"></script> 
   
<script src="http://www.kevs3d.co.uk/dev/canvask3d/scripts/k3d_renderer.js"></script> 
   
<script>
// bind to window onload event
window.addEventListener('load', onloadHandler, false);
var bitmaps = [];
function onloadHandler()
{
// get the images loading
bitmaps.push(new Image());
bitmaps.push(new Image());
var loader = new Preloader();
loader.addImage(bitmaps[0], 'http://www.kevs3d.co.uk/dev/canvask3d/images/texture4.png');
loader.addImage(bitmaps[1], 'http://www.kevs3d.co.uk/dev/canvask3d/images/texture5.png');
loader.onLoadCallback(init);
}
function init()
{
// get the canvas DOM element
var canvas = document.getElementById('canvas');
// bind a K3D Controller object to the canvas
// - it is responsible for managing the K3D objects displayed within it
var k3d = new K3D.RequestAnimController(canvas);
// tesselated sphere - strips of tris have been converted to quads
var obj = new K3D.K3DObject();
obj.textures.push(bitmaps[0]);
obj.textures.push(bitmaps[1]);
with (obj)
{
drawmode = "solid";
shademode = "lightsource";
fillmode = "inflate";
addgamma = 0.3; addtheta = 0.25; addphi = -0.2;
ophi = 45; ogamma = 45; otheta = 45;
scale = 200;
init(
[{x:0.0000,y:0.0000,z:1.0000}, {x:0.0000,y:0.3827,z:0.9239}, {x:-0.1464,y:0.3536,z:0.9239},
{x:-0.2706,y:0.2706,z:0.9239}, {x:-0.3536,y:0.1464,z:0.9239}, {x:-0.3827,y:0.0000,z:0.9239},
{x:-0.3536,y:-0.1464,z:0.9239}, {x:-0.2706,y:-0.2706,z:0.9239}, {x:-0.1464,y:-0.3536,z:0.9239},
{x:0.0000,y:-0.3827,z:0.9239}, {x:0.1464,y:-0.3536,z:0.9239}, {x:0.2706,y:-0.2706,z:0.9239},
{x:0.3536,y:-0.1464,z:0.9239}, {x:0.3827,y:0.0000,z:0.9239}, {x:0.3536,y:0.1464,z:0.9239},
{x:0.2706,y:0.2706,z:0.9239}, {x:0.1464,y:0.3536,z:0.9239}, {x:0.0000,y:0.7071,z:0.7071},
{x:-0.2706,y:0.6533,z:0.7071}, {x:-0.5000,y:0.5000,z:0.7071}, {x:-0.6533,y:0.2706,z:0.7071},
{x:-0.7071,y:0.0000,z:0.7071}, {x:-0.6533,y:-0.2706,z:0.7071}, {x:-0.5000,y:-0.5000,z:0.7071},
{x:-0.2706,y:-0.6533,z:0.7071}, {x:0.0000,y:-0.7071,z:0.7071}, {x:0.2706,y:-0.6533,z:0.7071},
{x:0.5000,y:-0.5000,z:0.7071}, {x:0.6533,y:-0.2706,z:0.7071}, {x:0.7071,y:0.0000,z:0.7071},
{x:0.6533,y:0.2706,z:0.7071}, {x:0.5000,y:0.5000,z:0.7071}, {x:0.2706,y:0.6533,z:0.7071},
{x:0.0000,y:0.9239,z:0.3827}, {x:-0.3536,y:0.8536,z:0.3827}, {x:-0.6533,y:0.6533,z:0.3827},
{x:-0.8536,y:0.3536,z:0.3827}, {x:-0.9239,y:0.0000,z:0.3827}, {x:-0.8536,y:-0.3536,z:0.3827},
{x:-0.6533,y:-0.6533,z:0.3827}, {x:-0.3536,y:-0.8536,z:0.3827}, {x:0.0000,y:-0.9239,z:0.3827},
{x:0.3536,y:-0.8536,z:0.3827}, {x:0.6533,y:-0.6533,z:0.3827}, {x:0.8536,y:-0.3536,z:0.3827},
{x:0.9239,y:0.0000,z:0.3827}, {x:0.8536,y:0.3536,z:0.3827}, {x:0.6533,y:0.6533,z:0.3827},
{x:0.3536,y:0.8536,z:0.3827}, {x:0.0000,y:1.0000,z:0.0000}, {x:-0.3827,y:0.9239,z:0.0000},
{x:-0.7071,y:0.7071,z:0.0000}, {x:-0.9239,y:0.3827,z:0.0000}, {x:-1.0000,y:0.0000,z:0.0000},
{x:-0.9239,y:-0.3827,z:0.0000}, {x:-0.7071,y:-0.7071,z:0.0000}, {x:-0.3827,y:-0.9239,z:0.0000},
{x:0.0000,y:-1.0000,z:0.0000}, {x:0.3827,y:-0.9239,z:0.0000}, {x:0.7071,y:-0.7071,z:0.0000},
{x:0.9239,y:-0.3827,z:0.0000}, {x:1.0000,y:0.0000,z:0.0000}, {x:0.9239,y:0.3827,z:0.0000},
{x:0.7071,y:0.7071,z:0.0000}, {x:0.3827,y:0.9239,z:0.0000}, {x:0.0000,y:0.9239,z:-0.3827},
{x:-0.3536,y:0.8536,z:-0.3827}, {x:-0.6533,y:0.6533,z:-0.3827}, {x:-0.8536,y:0.3536,z:-0.3827},
{x:-0.9239,y:0.0000,z:-0.3827}, {x:-0.8536,y:-0.3536,z:-0.3827}, {x:-0.6533,y:-0.6533,z:-0.3827},
{x:-0.3536,y:-0.8536,z:-0.3827}, {x:0.0000,y:-0.9239,z:-0.3827}, {x:0.3536,y:-0.8536,z:-0.3827},
{x:0.6533,y:-0.6533,z:-0.3827}, {x:0.8536,y:-0.3536,z:-0.3827}, {x:0.9239,y:0.0000,z:-0.3827},
{x:0.8536,y:0.3536,z:-0.3827}, {x:0.6533,y:0.6533,z:-0.3827}, {x:0.3536,y:0.8536,z:-0.3827},
{x:0.0000,y:0.7071,z:-0.7071}, {x:-0.2706,y:0.6533,z:-0.7071}, {x:-0.5000,y:0.5000,z:-0.7071},
{x:-0.6533,y:0.2706,z:-0.7071}, {x:-0.7071,y:0.0000,z:-0.7071}, {x:-0.6533,y:-0.2706,z:-0.7071},
{x:-0.5000,y:-0.5000,z:-0.7071}, {x:-0.2706,y:-0.6533,z:-0.7071}, {x:0.0000,y:-0.7071,z:-0.7071},
{x:0.2706,y:-0.6533,z:-0.7071}, {x:0.5000,y:-0.5000,z:-0.7071}, {x:0.6533,y:-0.2706,z:-0.7071},
{x:0.7071,y:0.0000,z:-0.7071}, {x:0.6533,y:0.2706,z:-0.7071}, {x:0.5000,y:0.5000,z:-0.7071},
{x:0.2706,y:0.6533,z:-0.7071}, {x:0.0000,y:0.3827,z:-0.9239}, {x:-0.1464,y:0.3536,z:-0.9239},
{x:-0.2706,y:0.2706,z:-0.9239}, {x:-0.3536,y:0.1464,z:-0.9239}, {x:-0.3827,y:0.0000,z:-0.9239},
{x:-0.3536,y:-0.1464,z:-0.9239}, {x:-0.2706,y:-0.2706,z:-0.9239}, {x:-0.1464,y:-0.3536,z:-0.9239},
{x:0.0000,y:-0.3827,z:-0.9239}, {x:0.1464,y:-0.3536,z:-0.9239}, {x:0.2706,y:-0.2706,z:-0.9239},
{x:0.3536,y:-0.1464,z:-0.9239}, {x:0.3827,y:0.0000,z:-0.9239}, {x:0.3536,y:0.1464,z:-0.9239},
{x:0.2706,y:0.2706,z:-0.9239}, {x:0.1464,y:0.3536,z:-0.9239}, {x:0.0000,y:0.0000,z:-1.0000} ],
[],
[{vertices:[0,1,2]}, {vertices:[0,2,3]}, {vertices:[0,3,4]}, {vertices:[0,4,5]}, {vertices:[0,5,6]}, {vertices:[0,6,7]}, {vertices:[0,7,8]}, {vertices:[0,8,9]}, {vertices:[0,9,10]},
{vertices:[0,10,11]}, {vertices:[0,11,12]}, {vertices:[0,12,13]}, {vertices:[0,13,14]}, {vertices:[0,14,15]}, {vertices:[0,15,16]}, {vertices:[0,16,1]}, {vertices:[1,17,18,2]},
{vertices:[2,18,19,3]}, {vertices:[3,19,20,4]}, {vertices:[4,20,21,5]}, {vertices:[5,21,22,6]}, {vertices:[6,22,23,7]},
{vertices:[7,23,24,8]}, {vertices:[8,24,25,9]}, {vertices:[9,25,26,10]}, {vertices:[10,26,27,11]},
{vertices:[11,27,28,12]}, {vertices:[12,28,29,13]}, {vertices:[13,29,30,14]}, {vertices:[14,30,31,15]}, {vertices:[15,31,32,16]},
{vertices:[16,32,17,1]}, {vertices:[17,33,34,18]}, {vertices:[18,34,35,19]}, {vertices:[19,35,36,20]},
{vertices:[20,36,37,21]}, {vertices:[21,37,38,22]}, {vertices:[22,38,39,23]}, {vertices:[23,39,40,24]}, {vertices:[24,40,41,25]},
{vertices:[25,41,42,26]}, {vertices:[26,42,43,27]}, {vertices:[27,43,44,28]}, {vertices:[28,44,45,29]},
{vertices:[29,45,46,30]}, {vertices:[30,46,47,31]}, {vertices:[31,47,48,32]}, {vertices:[32,48,33,17]},
{vertices:[33,49,50,34],texture:0}, {vertices:[34,50,51,35],texture:0}, {vertices:[35,51,52,36],texture:0}, {vertices:[36,52,53,37],texture:0}, {vertices:[37,53,54,38],texture:0},
{vertices:[38,54,55,39],texture:0}, {vertices:[39,55,56,40],texture:0}, {vertices:[40,56,57,41],texture:0}, {vertices:[41,57,58,42],texture:0}, {vertices:[42,58,59,43],texture:0},
{vertices:[43,59,60,44],texture:0}, {vertices:[44,60,61,45],texture:0}, {vertices:[45,61,62,46],texture:0}, {vertices:[46,62,63,47],texture:0},
{vertices:[47,63,64,48],texture:0}, {vertices:[48,64,49,33],texture:0},
{vertices:[49,65,66,50],texture:1}, {vertices:[50,66,67,51],texture:1}, {vertices:[51,67,68,52],texture:1},
{vertices:[52,68,69,53],texture:1}, {vertices:[53,69,70,54],texture:1}, {vertices:[54,70,71,55],texture:1}, {vertices:[55,71,72,56],texture:1},
{vertices:[56,72,73,57],texture:1}, {vertices:[57,73,74,58],texture:1}, {vertices:[58,74,75,59],texture:1}, {vertices:[59,75,76,60],texture:1}, {vertices:[60,76,77,61],texture:1},
{vertices:[61,77,78,62],texture:1}, {vertices:[62,78,79,63],texture:1}, {vertices:[63,79,80,64],texture:1}, {vertices:[64,80,65,49],texture:1},
{vertices:[65,81,82,66]}, {vertices:[66,82,83,67]}, {vertices:[67,83,84,68]}, {vertices:[68,84,85,69]}, {vertices:[69,85,86,70]},
{vertices:[70,86,87,71]}, {vertices:[71,87,88,72]}, {vertices:[72,88,89,73]}, {vertices:[73,89,90,74]},
{vertices:[74,90,91,75]}, {vertices:[75,91,92,76]}, {vertices:[76,92,93,77]}, {vertices:[77,93,94,78]}, {vertices:[78,94,95,79]},
{vertices:[79,95,96,80]}, {vertices:[80,96,81,65]}, {vertices:[81,97,98,82]}, {vertices:[82,98,99,83]},
{vertices:[83,99,100,84]}, {vertices:[84,100,101,85]}, {vertices:[85,101,102,86]}, {vertices:[86,102,103,87]}, {vertices:[87,103,104,88]},
{vertices:[88,104,105,89]}, {vertices:[89,105,106,90]}, {vertices:[90,106,107,91]}, {vertices:[91,107,108,92]},
{vertices:[92,108,109,93]}, {vertices:[93,109,110,94]}, {vertices:[94,110,111,95]}, {vertices:[95,111,112,96]}, {vertices:[96,112,97,81]},
{vertices:[113,98,97]}, {vertices:[113,99,98]}, {vertices:[113,100,99]}, {vertices:[113,101,100]}, {vertices:[113,102,101]}, {vertices:[113,103,102]}, {vertices:[113,104,103]}, {vertices:[113,105,104]},
{vertices:[113,106,105]}, {vertices:[113,107,106]}, {vertices:[113,108,107]}, {vertices:[113,109,108]}, {vertices:[113,110,109]}, {vertices:[113,111,110]}, {vertices:[113,112,111]}, {vertices:[113,97,112]} ]
);
}
k3d.addK3DObject(obj);
// add lightsource
var light = new K3D.LightSource({x:150,y:150,z:-70}, [0.0,0.75,1.0], 170.0);
light.addgamma = 1.5;
k3d.addLightSource(light);
light = new K3D.LightSource({x:-150,y:-150,z:-70}, [1.0,1.0,0.0], 170.0);
light.addgamma = 1.25;
k3d.addLightSource(light);
// add an object to represent the lightsource so it is visible in the scene
var lightObj = new K3D.K3DObject();
with (lightObj)
{
color = [0,192,255];
drawmode = "point";
shademode = "plain";
addgamma = 2.5;
linescale = 16.0;
init([{x:150,y:150,z:-70}], [], []);
}
k3d.addK3DObject(lightObj);
lightObj = new K3D.K3DObject();
with (lightObj)
{
color = [255,255,0];
drawmode = "point";
shademode = "plain";
addgamma = 1.5;
linescale = 16.0;
init([{x:-150,y:-150,z:-70}], [], []);
}
k3d.addK3DObject(lightObj);
// add the object to the controller
k3d.addK3DObject(obj);
// begin the rendering and animation immediately
k3d.paused = false;
k3d.frame();
}
</script>
</head>
<body bgcolor="black" scroll="no" onload="init()" oncontextmenu="window.close();return false;" >>
<center><canvas id="canvas" width="600" height="600" style="background-color: black"></canvas></center>
</body>
</html>
endtext
local m.lcdest
m.lcdest=addbs(sys(2023))+"test.html"
=strtofile(m.myvar,m.lcdest)
Declare Integer BringWindowToTop In user32 Integer
Declare Integer SetWindowText In user32 Integer HWnd, String lpstring
Declare Integer Sleep In kernel32 Integer
apie=Newobject("internetexplorer.application")
with apie
.Navigate(lcdest)
.menubar=0
.Toolbar=0
.StatusBar=0
.fullscreen=1
.Visible=.T.
BringWindowToTop(.HWnd)
SetWindowText(.HWnd, "Sphere animation (F11 set/toggle FULLSCREEN)")
sleep(2000)
.document.body.bgcolor=[black] &&
.visible=.t.
Endwith
*5*ysnowField_colored.prg
Set Safe Off
Local m.myvar
TEXT to m.myvar textmerge noshow
<!doctype html>
<html>
<head>
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=0;" />
<title>Snowfield Demo - JavaScript (JS1K XMAS) and HTML5 Canvas demo by Kevin Roast</title>
<style>
body { font-family: Arial, Helvetica; color: black; }
.info a, .info a:visited, .info a:active, .info a:hover { color: rgb(200,200,200); font-size: 0.6em; padding: 0px}
</style>
</head>
<body bgcolor="black" scroll="no" oncontextmenu="window.close();return false;" ><br><br><br><br>
<center><canvas " ></canvas></center>
<object id="mediaplayer" classid="clsid:22d6f312-b0f6-11d0-94ab-0080c74c7e95" codebase="http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab#version=5,1,52,701" standby="loading microsoft windows media player components..." type="application/x-oleobject" width="1" height="1">
<param name="filename" value="http://www.amclassical.com/mp3/amclassical_beethoven_fur_elise.mp3">
<param name="animationatstart" value="true">
<param name="transparentatstart" value="true">
<param name="autostart" value="true">
<param name="showcontrols" value="false">
<param name="ShowStatusBar" value="false">
<param name="windowlessvideo" value="true">
<param name='loop' value='true'>
<embed src="http://www.amclassical.com/mp3/amclassical_beethoven_fur_elise.mp3" autostart="true" showcontrols="0" showstatusbar="0" loop="1" bgcolor="white" width="1" height="1">
</object>
<script>
document.getElementById('mediaplayer').style.display="none";
var c = document.getElementsByTagName('canvas')[0];
var b = document.body;
var a = c.getContext('2d');
</script>
<script>
D=b.style,f=window;D.margin=0;D.overflow="hidden";i=f.innerWidth,j=f.innerHeight;c.width=i;c.height=j;
k=Math,l=k.random,n=k.sin,p=k.floor,q=20,r=[],s=k.PI;function t(d){d.b=d.x=(l()*i-i*.5)*q;d.c=d.y=(l()*j-j*.2)*q;
d.a=q;d.d=l()}
for(var v=0,w;v<300;v++){w={};t(w);r.push(w)}setInterval(function(){a.fillStyle="rgba(0,0,0,.8)";
a.fillRect(0,0,i,j);for(var d=0;d<300;d++){var b=r[d],o=n(s)*32-16,u=b.x/b.a,e=u+i/2-o,g=o=b.y/b.a,m=l()*360,x=b.a>q-5?(q-b.a)/5:1,h=q-b.a-4;
a.fillStyle='#'+Math.floor(Math.random()*16777215).toString(16);a.beginPath();
if(b.a<q-6){a.save();a.translate(e,g);a.rotate(b.d*(d%2?1:-1)*(d%3/2+.1));g=0;e=h/(d%4+2);for(m=h/(d%3+1);
g<6;g++){a.lineTo(-e,m);a.lineTo(0,h);a.lineTo(e,m);a.lineTo(0,0);a.rotate(k.PI/3)}a.fill();if(d%2==0){g=0;
for(e=h/(d%5+1);g<6;g++){a.beginPath();a.moveTo(0,h);a.lineTo(-e,h-e);a.lineTo(0,h-e);a.lineTo(e,h-e);a.fill();
a.rotate(k.PI/3)}}a.restore()}else{a.arc(e,g,1/b.a*5+1,0,k.PI*2,true);
a.fill()}b.b=u;b.c=o;b.a-=.15;b.d+=l()/5;if(b.a<.15||b.b<-i/2||b.b>i/2||b.c>j)t(b);s+=k.PI/2}},25);
</script>
</body>
</html>
ENDTEXT
Local m.lcdest
m.lcdest=Addbs(Sys(2023))+"test.html"
=Strtofile(m.myvar,m.lcdest)
Declare Integer BringWindowToTop In user32 Integer
Declare Integer SetWindowText In user32 Integer HWnd, String lpstring
Declare Integer Sleep In kernel32 Integer
apie=Newobject("internetexplorer.application")
With apie
.Navigate(lcdest)
.menubar=0
.Toolbar=0
.StatusBar=0
.fullscreen=1
.Visible=.T.
BringWindowToTop(.HWnd)
SetWindowText(.HWnd, "Snowfield colored animation ")
.Visible=.T.
Endwith
*6*ylogoHTML5.prg
Set Safe Off
Local m.myvar
TEXT to m.myvar textmerge noshow
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=0;" />
<title>The HTML5 logo - K3D demo in HTML5 Canvas and JavaScript (no Flash!)</title>
<script src="http://www.kevs3d.co.uk/dev/canvask3d/scripts/mathlib-min.js"> </script>
<script src="http://www.kevs3d.co.uk/dev/canvask3d/scripts/k3d-min.js"> </script>
<script src="http://www.kevs3d.co.uk/dev/html5logo/scripts/html5logo.js"> </script>
<style>
body { font-family: Arial, Helvetica; color: white; background-color: #ddd; }
.link-overlay a, .link-overlay a:visited, .link-overlay a:active, .link-overlay a:hover { color: rgb(227,76,38); font-size: 0.6em; padding: 0px}
.button-overlay { position: absolute; left:2px; top:2px }
.link-overlay { position: absolute; left:180px; top:0px }
canvas{padding:20px;}
</style>
</head>
<body style="margin:20px; overflow:hidden;background-color:black;" scroll="no" oncontextmenu="window.close();return false;">
<center> <canvas id="canvas" style="background-color:gold";"></canvas></center>
<br><center><p style="color:white;" >RightClick to close window</p></center>
</body>
</html>
ENDTEXT
Local m.lcdest
m.lcdest=Addbs(Sys(2023))+"test.html"
=Strtofile(m.myvar,m.lcdest)
Declare Integer BringWindowToTop In user32 Integer
Declare Integer SetWindowText In user32 Integer HWnd, String lpstring
Declare Integer Sleep In kernel32 Integer
apie=Newobject("internetexplorer.application")
With apie
.Navigate(lcdest)
.menubar=0
.Toolbar=0
.StatusBar=0
.fullscreen=1
.Visible=.T.
BringWindowToTop(.HWnd)
SetWindowText(.HWnd, "LOGO html5 animation ")
.Visible=.T.
Endwith
Note :The new looks of the blog are built from VFP9+CSS .