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 .