Awesome Html5 canvas animations - part2

Published on by Yousfi Benameur

 

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


 

Awesome Html5 canvas animations - part2

 

*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


 

Awesome Html5 canvas animations - part2

 

*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


 

Awesome Html5 canvas animations - part2

 

*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>&nbsp
&nbsp  &nbsp    

      <script src="http://www.kevs3d.co.uk/dev/canvask3d/scripts/k3d_main.js"></script>&nbsp
&nbsp  &nbsp    

      <script src="http://www.kevs3d.co.uk/dev/canvask3d/scripts/k3d_controller.js"></script>&nbsp
&nbsp &nbsp     

      <script src="http://www.kevs3d.co.uk/dev/canvask3d/scripts/k3d_object.js"></script>&nbsp
      
&nbsp &nbsp
      <script src="http://www.kevs3d.co.uk/dev/canvask3d/scripts/k3d_light.js"></script>&nbsp
      
&nbsp &nbsp
      <script src="http://www.kevs3d.co.uk/dev/canvask3d/scripts/k3d_renderer.js"></script>&nbsp
&nbsp   &nbsp  



      <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


 

Awesome Html5 canvas animations - part2

 

*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


 

Awesome Html5 canvas animations - part2

 

*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


 

Awesome Html5 canvas animations - part2

Note :The new looks of the blog are built from VFP9+CSS .

To be informed of the latest articles, subscribe:

Comment on this post