Awesome html5 canvas animations - part3
A simple and fast library to allow pseudo 3D graphics to be rendered onto a 2D canvas. The canvas K3D JavaScript programming libraries by Kevin Roast supports wireframes and polygons with depth cue shading, animation with motion blur, and texture mapping with a lighting model in three dimensions using HTML 5 canvas graphics This code uses yet the K3D library to make animations on 6 objects. Click on any object to animate it. 1-snake of flying 3D cubes - wireframe rendering, depth-cued shading 2-Sphere of points - motion blur point rendering, depth-cued shading 3--Sphere spiral - motion blur wireframe rendering, depth-cued shading 4-- Icosahedron - solid rendering, single lightsource shading 5--Tesselated Sphere - solid rendering, multiple colour lightsource textured shading 0-All these 5 objects gathered as original (the 5 objects are also extracted individually ).see how its done in the code. before running the code (tested on ie11 emulation) download the 8 images below and put them in images folder (in the source as this prg). the free libraries (js files) are linked directly to author site.(can download and run all locally on disc.) http://www.kevs3d.co.uk/dev/canvask3d (see download). Internetexplorer.application is used to this demo.(ie11 emulation supports html5 canvas).Select the code and paste into a prg and run. *Internet must be connected to work with web libraries and resources. All is tested on Windows8.1 only. Run vfp9.exe as administrator to avoid some priveleges problems.
*1* *folder images must be in source mandatory-the JS file demo links to it. Local m.xx,m.yy m.xx=Int(Val(Inputbox("ALL(0),Snake(1),sphere (2),iso(3),spirale(4),Tesselated Sphere(5)","K3D library","0"))) If ! Between(m.xx,0,5) m.xx=0 Endi m.yy='' If !m.xx=0 TEXT to m.yy noshow canvas2.width=2*canvas2.width canvas2.height=2*canvas2.height canvas3.width=2*canvas3.width canvas3.height=2*canvas3.height canvas4.width=2*canvas4.width canvas4.height=2*canvas4.height canvas5.width=2*canvas5.width canvas5.height=2*canvas5.height ENDTEXT Endi Local mx1,m.x2,m.x3,m.x4,m.x5 m.x1=[document.getElementById("canvas1").style.display="none";] m.x2=[ document.getElementById("canvas2").style.display="none";] m.x3=[ document.getElementById("canvas3").style.display="none";] m.x4=[ document.getElementById("canvas4").style.display="none";] m.x5=[ document.getElementById("canvas5").style.display="none";] Do Case Case m.xx=0 m.x1=Strtran(m.x1,"none","") m.x2=Strtran(m.x2,"none","") m.x3=Strtran(m.x3,"none","") m.x4=Strtran(m.x4,"none","") m.x5=Strtran(m.x5,"none","") Case m.xx=1 m.x1=Strtran(m.x1,"none","") m.x2=m.x2 m.x3=m.x3 m.x4=m.x4 m.x5=m.x5 Case m.xx=2 m.x1=m.x1 m.x2=Strtran(m.x2,"none","") m.x3=m.x3 m.x4=m.x4 m.x5=m.x5 Case m.xx=3 m.x1=m.x1 m.x2=m.x2 m.x3=Strtran(m.x3,"none","") m.x4=m.x4 m.x5=m.x5 Case m.xx=4 m.x1=m.x1 m.x2=m.x2 m.x3=m.x3 m.x4=Strtran(m.x4,"none","") m.x5=m.x5 Case m.xx=5 m.x1=m.x1 m.x2=m.x2 m.x3=m.x3 m.x4=m.x4 m.x5=Strtran(m.x5,"none","") Endcase TEXT to m.myvar textmerge noshow <!DOCTYPE html> <html><head> <meta http-equiv="content-type" content="text/html; charset=windows-1252"> <title>K3D - 3D rendering in HTML5 Canvas and JavaScript</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/canvask3d/scripts/k3ddemos.js"> </script > <style type="text/css"> body { font-family: Arial, Helvetica; color: black } .title { padding: 8px; text-align: center; font-weight: bold; font-size: 1.2em; color: darkblue } P { padding-left: 2em; padding-top: 0; line-height: 1em; font-size: 0.75em } P.left { padding-left: 1em; line-height: 1em } a, a:visited, a:active, a:hover { color: #000088 } .button-overlay { position: absolute; right: 1em; } </style> </head> <body style="margin:20px; overflow:hidden;background-color:black;" scroll="no" oncontextmenu="window.close();return false;" onload="onloadHandler();"> <div style="text-align:center"> <h2 style="color:white;">K3D HTML5 Canvas Demos</h2> <center> <div style="width:240;display:inline-block"> <canvas id="canvas2" width="240" height="240" title="Sphere of points - motion blur point rendering, depth-cued shading" style="background-color:#000000" > </canvas > <br> <canvas id="canvas3" width="240" height="240" title="Icosahedron - solid rendering, single lightsource shading"> </canvas > </div> <div style="background:url(http://www.kevs3d.co.uk/dev/canvask3d/images/peppers.png) no-repeat 0px 0px;display:inline-block" > <canvas id="canvas1" width="480" height="480" title="A snake of flying 3D cubes - wireframe rendering, depth-cued shading" > </canvas > </div> <div style="width:240;display:inline-block"> <canvas id="canvas4" width="240" height="240" title="Sphere spiral - motion blur wireframe rendering, depth-cued shading" style="background-color:#000000" ></canvas > <br> <canvas id="canvas5" width="240" height="240" title="Tesselated Sphere - solid rendering, multiple colour lightsource textured shading" ></canvas > </div> <div> </center> <center> <p style ="color:white;">Click to animate object-RightClick to exit.</p></center> </div> </div> <script> <<m.x1>> <<m.x2>> <<m.x3>> <<m.x4>> <<m.x5>> <<m.yy>> </script> </body> </html> ENDTEXT Local m.yrep m.yrep=Addbs(Justpath(Sys(16,1))) Set Safe Off lcdest=m.yrep+"ytest.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, "k3D demo animations") .Visible=.T. Endwith
Download these 8 images and put them in images folder (in source).they work as resources for the library.
Below 6 (+1updated) codes for animations on html5 canvas. 1-fireWorks 2-clock (customizable parameters in code) 3-mouse effect circles trails 4-system solar-eath-moon simulation on canvas 5-free drawing with mouse. 6-mouse object creation with lifecycles all use internetexplorer.application (emulated ie11). see some screenshots below.
*2*yfireworks.prg local m.myvar TEXT to m.myvar noshow <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>Fireworks!</title> <style type="text/css"> body { background-color: #000000; margin: 0px; overflow: hidden; } </style> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"> </script> </head> <body bgcolor="black" scroll="no" oncontextmenu="window.close();return false;" > <script> var SCREEN_WIDTH = window.innerWidth, SCREEN_HEIGHT = window.innerHeight, mousePos = { x: 400, y: 300 }, // create canvas canvas = document.createElement('canvas'), context = canvas.getContext('2d'), particles = [], MAX_PARTICLES = 300; // init $(document).ready(function() { document.body.appendChild(canvas); canvas.width = SCREEN_WIDTH; canvas.height = SCREEN_HEIGHT; setInterval(loop, 1000 / 30); }); $(document).mousemove(function(e) { e.preventDefault(); mousePos = { x: e.clientX, y: e.clientY }; }); function loop() { // update screen size if (SCREEN_WIDTH != window.innerWidth) { canvas.width = SCREEN_WIDTH = window.innerWidth; } if (SCREEN_HEIGHT != window.innerHeight) { canvas.height = SCREEN_HEIGHT = window.innerHeight; } // clear canvas context.fillStyle = "rgba(0, 0, 0, 0.1)"; context.fillRect(0, 0, SCREEN_WIDTH, SCREEN_HEIGHT); makeParticle(5); var existingParticles = []; for (var i = 0; i < particles.length; i++) { particles[i].update(); // render and save particles that can be rendered if (particles[i].exists()) { particles[i].render(context); existingParticles.push(particles[i]); } } // update array with existing particles - old particles should be garbage collected particles = existingParticles; while (particles.length > MAX_PARTICLES) { particles.shift(); } } function makeParticle(count) { for (var i = 0; i < count; i++) { var particle = new Particle(mousePos); var angle = Math.random() * Math.PI * 2; var speed = Math.random() * 10 + 2; particle.vel.x = Math.cos(angle) * speed; particle.vel.y = Math.sin(angle) * speed; particle.size = 10; // particle.fade = 0.02; particle.gravity = 0.2; particle.resistance = 0.92; particle.shrink = 0.92; particle.flick = true; particles.push(particle); } } function Particle(pos) { this.pos = { x: pos.x, y: pos.y }; this.vel = { x: 0, y: 0 }; this.shrink = .97; this.size = 2; this.resistance = 1; this.gravity = 0; this.flick = false; this.alpha = 1; this.fade = 0; this.color = Math.floor(Math.random() * 360 / 10) * 10; } Particle.prototype.update = function() { // apply resistance this.vel.x *= this.resistance; this.vel.y *= this.resistance; // gravity down this.vel.y += this.gravity; // update position based on speed this.pos.x += this.vel.x; this.pos.y += this.vel.y; // shrink this.size *= this.shrink; // fade out this.alpha -= this.fade; } Particle.prototype.render = function(c) { if (!this.exists()) { return; } c.save(); c.globalCompositeOperation = 'lighter'; var x = this.pos.x, y = this.pos.y, r = this.size / 2; var gradient = c.createRadialGradient(x, y, 0.1, x, y, r); gradient.addColorStop(0.1, "rgba(255,255,255," + this.alpha + ")"); gradient.addColorStop(0.8, "hsla(" + this.color + ", 100%, 50%, " + this.alpha + ")"); gradient.addColorStop(1, "hsla(" + this.color + ", 100%, 50%, 0.1)"); c.fillStyle = gradient; c.beginPath(); c.arc(this.pos.x, this.pos.y, this.flick ? Math.random() * this.size : this.size, 0, Math.PI * 2, true); c.closePath(); c.fill(); c.restore(); } Particle.prototype.exists = function() { return this.alpha >= 0.01 && this.size >= 1; } </script> <center><p style="color:white;">Mousemove on the screen to see the effect.Rightclick to close the window.</p></CENTER> </body> </html> ENDTEXT m.lcdest=Addbs(Sys(2023))+"test.html" Strtofile(m.myvar,m.lcdest) Declare Integer BringWindowToTop In user32 Integer Local apie apie=Newobject("internetexplorer.application") With apie .Navigate(m.lcdest) .menubar=0 .Toolbar=0 .StatusBar=0 .fullscreen=1 BringWindowToTop(.HWnd) .Visible=.T. Endwith
*3*yclock.prg Declare Integer Sleep In kernel32 Integer Local apie apie=Newobject("internetexplorer.application") Sleep(200) Local colCircle1,colCircle2,gradu,colText &&can customize here these properties colCircle1='#16b' colCircle2='#05a' gradu='gold' colText='white' TEXT to m.myvar textmerge noshow <!DOCTYPE HTML> <html> <body bgcolor="black" scroll="no" oncontextmenu="window.close();return false;" onload="init();"> <canvas id="ycanvas1" width="<<sysmetric(1)>>" height="650" style="background-color:black;"></canvas> <script> function init(){ drawHands(); setInterval('drawHands()',1000); } function drawHands(){ var canvas = document.getElementById('ycanvas1'); var ctx = canvas.getContext('2d'); var x=500; var y=300; var r=x*0.5; var d = new Date(); var h = d.getHours(); var m = d.getMinutes(); var s = d.getSeconds(); ctx.clearRect(0,0,400,400); //draw background ctx.save(); ctx.translate(x,y); var grad = ctx.createLinearGradient(-r,r,r,-r); grad.addColorStop(0,'rgb(128,128,128)'); grad.addColorStop(0.5,'rgb(255,255,255)'); grad.addColorStop(1,'rgb(128,128,128)'); ctx.beginPath(); ctx.fillStyle = grad; ctx.arc(0,0,r,0,Math.PI*2,false); ctx.fill(); grad = ctx.createLinearGradient(-r,-r,r,r); grad.addColorStop(0,'rgb(128,128,128)'); grad.addColorStop(0.5,'rgb(255,255,255)'); grad.addColorStop(1,'rgb(128,128,128)'); ctx.beginPath(); ctx.fillStyle = grad; ctx.arc(0,0,r*0.85,0,Math.PI*2,false); ctx.fill(); ctx.beginPath(); ctx.fillStyle ='<<colCircle1>>'; //cercle 1 ctx.arc(0,0,r*0.8,0,Math.PI*2,false); ctx.fill(); ctx.beginPath(); ctx.fillStyle = 'colCircle2'; //petit cercle 2 ctx.arc(0,0,r*0.4,0,Math.PI*2,false); ctx.fill(); ctx.restore(); //draw index ctx.save(); ctx.translate(x,y); ctx.fillStyle = '<<gradu>>'; //graduations+hours+minutes for(var i=0;i<12;i++){ ctx.rotate(Math.PI/6); ctx.fillRect(-r*0.04/2,-r*0.75,r*0.04,r*0.2); } ctx.restore(); //draw text ctx.save(); ctx.translate(x,y); ctx.fillStyle = '<<colText>>'; //filltext ctx.font = (r*0.45/5)+"px serif"; ctx.textAlign = 'center'; ctx.textBaseline = 'bottom'; ctx.fillText('TIME FOX',0,r*0.45); ctx.restore(); //draw hour hand ctx.save(); ctx.translate(x,y); ctx.beginPath(); ctx.rotate((h/12+m/12/60)*2*Math.PI); ctx.strokeStyle = 'gold'; //'white'; ctx.lineWidth = r*0.02; ctx.moveTo(0,0); ctx.lineTo(0,-r*0.4); ctx.stroke(); ctx.restore(); //draw minute hand ctx.save(); ctx.translate(x,y); ctx.rotate(m*2*Math.PI/60); ctx.beginPath(); ctx.strokeStyle = 'gold'; //'white'; ctx.lineWidth = r*0.02; ctx.moveTo(0,0); ctx.lineTo(0,-r*0.6); ctx.stroke(); ctx.restore(); //draw second hand ctx.save(); ctx.translate(x,y); ctx.beginPath(); ctx.rotate(s*2*Math.PI/60); ctx.strokeStyle = 'red'; ctx.lineWidth = r*0.01; ctx.moveTo(0,r*0.1); ctx.lineTo(0,-r*0.7); ctx.stroke(); ctx.restore(); ctx.save(); ctx.translate(x,y); ctx.beginPath(); ctx.fillStyle = 'red'; ctx.arc(0,0,r*0.02,0,Math.PI*2,false); ctx.fill(); ctx.restore(); } </script> <Center><p Style="color:white;">Can customize many colors,background pict.. .RightClick To Close the Window.</p></Center> </body> </html> ENDTEXT Set Safe Off m.lcdest=Addbs(Sys(2023))+"test.html" Strtofile(m.myvar,m.lcdest) apie.Navigate(m.lcdest) Declare Integer BringWindowToTop In user32 Integer With apie .Navigate(m.lcdest) .menubar=0 .Toolbar=0 .StatusBar=0 .fullscreen=1 BringWindowToTop(.HWnd) .Visible=.T. Endwith
*4*ycircles_trail.prg TEXT to m.myvar textmerge noshow <!DOCTYPE HTML> <html> <body bgcolor="black" scroll="no" oncontextmenu="window.close();return false;" > <canvas id="ycanvas1" width="<<sysmetric(1)>>" height="650" style="background-color:black;"></canvas> <script> var canvas = document.getElementById("ycanvas1"); var ctx = canvas.getContext("2d"); var canvasWidth = canvas.width; var canvasHeight = canvas.height; var dots = []; var r = Math.floor(Math.random() * 255) + 50; var g = Math.floor(Math.random() * 255) + 50; var b = Math.floor(Math.random() * 255) + 50; var radius = Math.floor(Math.random() * 50) + 10; function Dot(xCoordinate, yCoordinate, radiusValue, rValue, gValue, bValue, aValue) { this.x = xCoordinate; this.y = yCoordinate; this.radius = radiusValue; this.r = rValue; this.g = gValue; this.b = bValue; this.a = aValue; } function dotFilter(element) { return element.y >= 0 && element.a >= 0; } function drawDots() { ctx.fillStyle = "rgb(0,0,0)"; ctx.fillRect(0, 0, canvasWidth, canvasHeight); if (dots.length === 0) { return; } dots = dots.filter(dotFilter); for (i = 0; i < dots.length; i = i + 1) { dots[i].y = dots[i].y - 1; dots[i].a = dots[i].a - 0.05; ctx.save(); ctx.beginPath(); ctx.arc(dots[i].x, dots[i].y, dots[i].radius, 0, 2 * Math.PI, true); ctx.fillStyle = "rgba(" + dots[i].r + "," + dots[i].g + "," + dots[i].b + "," + dots[i].a + ")"; ctx.fill(); ctx.restore(); } } canvas.onmousemove = function(e) { var mouseX, mouseY; if (e.offsetX) { mouseX = e.offsetX; mouseY = e.offsetY; } else if (e.layerX) { mouseX = e.layerX; mouseY = e.layerY; } r = Math.floor(Math.random() * 255) + 50; g = Math.floor(Math.random() * 255) + 50; b = Math.floor(Math.random() * 255) + 50; radius = Math.floor(Math.random() * 50) + 10; dots.push(new Dot(mouseX - 4, mouseY - 4, radius, r, g, b, 1)); }; function clearScreen() { ctx.fillStyle = "rgb(0,0,0)"; ctx.fillRect(0, 0, canvasWidth, canvasHeight); } ctx.fillStyle = "rgb(0, 0, 0)"; ctx.fillRect(0, 0, canvasWidth, canvasHeight); window.setInterval(drawDots, 17); </script> <center><p style="color:white;">Click +Mousemove on the screen to see the effect.Rightclick to close the window.</p></CENTER> </body> </html> ENDTEXT m.lcdest=Addbs(Sys(2023))+"test.html" Strtofile(m.myvar,m.lcdest) Declare Integer BringWindowToTop In user32 Integer Local apie apie=Newobject("internetexplorer.application") With apie .Navigate(m.lcdest) .menubar=0 .Toolbar=0 .StatusBar=0 .fullscreen=1 BringWindowToTop(.HWnd) .Visible=.T. Endwith
*5*ysolar.prg Local apie,m.myvar apie=Newobject("internetexplorer.application") TEXT to m.myvar textmerge noshow <!DOCTYPE HTML> <html> <body bgcolor="black" scroll="no" oncontextmenu="window.close();return false;" onload="init();"> <canvas id="ycanvas1" width="<<sysmetric(1)>>" height="650" style="background-color:black;"></canvas> <script> var sun = new Image(); var moon = new Image(); var earth = new Image(); function init(){ sun.src = 'https://mdn.mozillademos.org/files/1456/Canvas_sun.png'; moon.src = 'https://mdn.mozillademos.org/files/1443/Canvas_moon.png'; earth.src = 'https://mdn.mozillademos.org/files/1429/Canvas_earth.png'; window.requestAnimationFrame(draw); } function draw() { var canvas=document.getElementById('ycanvas1') var ctx = canvas.getContext('2d'); canvas.width=640; canvas.height=640; ctx.globalCompositeOperation = 'destination-over'; ctx.clearRect(0,0,canvas.width,canvas.height); // clear canvas ctx.fillStyle = 'rgba(0,0,0,0.4)'; ctx.strokeStyle = 'rgba(0,153,255,0.4)'; ctx.save(); ctx.translate(canvas.width/2,canvas.height/2); // Earth var time = new Date(); ctx.rotate( ((2*Math.PI)/60)*time.getSeconds() + ((2*Math.PI)/60000)*time.getMilliseconds() ); ctx.translate(105,0); ctx.fillRect(0,-12,50,24); // Shadow ctx.drawImage(earth,-12,-12); // Moon ctx.save(); ctx.rotate( ((2*Math.PI)/6)*time.getSeconds() + ((2*Math.PI)/6000)*time.getMilliseconds() ); ctx.translate(0,28.5); ctx.drawImage(moon,-3.5,-3.5); ctx.restore(); ctx.restore(); ctx.beginPath(); ctx.arc(150,150,105,0,Math.PI*2,false); // Earth orbit ctx.stroke(); ctx.drawImage(sun,0,0,canvas.width,canvas.height); window.requestAnimationFrame(draw); } init(); </script> <Center><p Style="color:white;">Solar -Earth-moon system model .RightClick To Close the Window.</p></Center> </body> </html> ENDTEXT Set Safe Off m.lcdest=Addbs(Sys(2023))+"test.html" Strtofile(m.myvar,m.lcdest) apie.Navigate(m.lcdest) Declare Integer BringWindowToTop In user32 Integer With apie .Navigate(m.lcdest) .menubar=0 .Toolbar=0 .StatusBar=0 .fullscreen=1 BringWindowToTop(.HWnd) .Visible=.T. Endwith
*6*yfree_drawing.prg Local apie,m.myvar apie=Newobject("internetexplorer.application") TEXT to m.myvar textmerge noshow <!DOCTYPE HTML> <html> <body bgcolor="black" scroll="no" oncontextmenu="window.close();return false;" onload="draw();"> <canvas id="ycanvas1" width="<<sysmetric(1)>>" height="650" style="background-color:black;"></canvas> <script> var canvas = document.getElementById( 'ycanvas1' ); var ctx = canvas.getContext( '2d' ), mouseX = 0, mouseY = 0, level = 0; function draw(){ ctx.fillStyle = "hsl("+(level*5)+", 100%, 50%)"; ctx.beginPath(); ctx.arc( mouseX, mouseY, 20 , 0, Math.PI*2, true ); ctx.closePath(); ctx.fill(); level++; } canvas.addEventListener( 'mousemove', function( event ) { if(event.offsetX){ mouseX = event.offsetX; mouseY = event.offsetY; } else { mouseX = event.pageX - event.target.offsetLeft; mouseY = event.pageY - event.target.offsetTop; } draw(); }, false ); </script> <Center><p Style="color:white;">Click +MouseMove On the Screen To see the effect.RightClick To Close the Window.</p></Center> </body> </html> ENDTEXT Set Safe Off m.lcdest=Addbs(Sys(2023))+"test.html" Strtofile(m.myvar,m.lcdest) apie.Navigate(m.lcdest) Declare Integer BringWindowToTop In user32 Integer With apie .Navigate(m.lcdest) .menubar=0 .Toolbar=0 .StatusBar=0 .fullscreen=1 BringWindowToTop(.HWnd) .Visible=.T. Endwith
*6bis*yfree_drawing_bis.prg---UPDATED------ *the code above is adapted to make drawing only with mouseDown(mouseUPstop drawing). Local apie,m.myvar apie=Newobject("internetexplorer.application") TEXT to m.myvar textmerge noshow <!DOCTYPE HTML> <html> <body bgcolor="black" scroll="no" oncontextmenu="window.close();return false;" onload="draw();"> <canvas id="ycanvas1" width="<<sysmetric(1)>>" height="650" style="background-color:black;"></canvas> <script> var canvas = document.getElementById( 'ycanvas1' ); var ctx = canvas.getContext( '2d' ), mouseX = 0, mouseY = 0, level = 0, isDrawing; function draw(){ ctx.fillStyle = "hsl("+(level*5)+", 100%, 50%)"; ctx.beginPath(); ctx.arc( mouseX, mouseY, 20 , 0, Math.PI*2, true ); ctx.closePath(); ctx.fill(); level++; } canvas.onmousedown = function(e) { isDrawing = true; ctx.moveTo(e.clientX, e.clientY); }; canvas.onmousemove = function(e) { if(event.offsetX){ mouseX = event.offsetX; mouseY = event.offsetY; } else { mouseX = event.pageX - event.target.offsetLeft; mouseY = event.pageY - event.target.offsetTop; } if (isDrawing) { draw(); } }; canvas.onmouseup = function() { isDrawing = false; }; </script> <Center><p Style="color:white;">MouseDown On the Screen To see the effect.RightClick To Close the Window.</p></Center> </body> </html> ENDTEXT Set Safe Off m.lcdest=Addbs(Sys(2023))+"test.html" Strtofile(m.myvar,m.lcdest) apie.Navigate(m.lcdest) Declare Integer BringWindowToTop In user32 Integer With apie .Navigate(m.lcdest) .menubar=0 .Toolbar=0 .StatusBar=0 .fullscreen=1 BringWindowToTop(.HWnd) .Visible=.T. Endwith
*7*yimgfactors.prg *http://labs.hyperandroid.com/static/CAAT-Samples/demos/demo1/path.html local m.yrep m.yrep=addbs(justpath(sys(16,1))) set defa to (yrep) set safe off local m.myvar text to m.myvar textmerge noshow <!DOCTYPE html> <html> <script src='http://labs.hyperandroid.com/static/caat/lib/caat-min.js'></script> <script src='http://labs.hyperandroid.com/static/caat/lib/template.js' ></script> <body topmargin=0 leftmargin=0 bgcolor="navy" scroll="no" oncontextmenu="window.close();return false;" > <div> <canvas id="_c8"></canvas> </div> <center><div style="color:white;"><span> mouseMove on canvas-RightClick to exit.</span> <span id="_c8_data"></span></div></center> <script> (function() { var _director_8 = new CAAT.Director().initialize( <<sysmetric(1)>>, <<sysmetric(2)-50>>, document.getElementById('_c8')). setClear(false); var _scene_8 = _director_8.createScene(); var colors= [ 'blue', 'red', 'yellow', 'white', 'gray' ,'orange' ]; var color_index=0; // create a container, equals in size to the director. var root = new CAAT.ActorContainer(). create(). setBounds(0, 0, _director_8.canvas.width, _director_8.canvas.height). setFillStyle('#000000') root.mouseEnter = function(mouseEvent) { }; root.mouseExit = function(mouseEvent) { }; _scene_8.addChild(root); // on mouse move over the root Actor root.mouseMove = function(mouseEvent) { var r = 5 + 15 * Math.random(); var bubble; // is pressing control, add a Rectangle-Shaped blue Actor if ( Math.random()<.5 ) { bubble = new CAAT.ShapeActor(). setLocation(mouseEvent.point.x, mouseEvent.point.y). setSize(r, r). setShape(CAAT.ShapeActor.prototype.SHAPE_RECTANGLE). enableEvents(false). setCompositeOp('lighter'). setFillStyle( colors[(color_index++)%colors.length] ); } else { // else, add a Circle-Shaped red Actor bubble = new CAAT.ShapeActor(). setLocation(mouseEvent.point.x, mouseEvent.point.y). setSize(r, r). enableEvents(false). setCompositeOp('lighter'). setFillStyle( colors[(color_index++)%colors.length] ); } root.addChild(bubble); // Add a container behavior, to hold a fading behavior and a moving // behavior. var cb = new CAAT.ContainerBehavior(). setFrameTime(_scene_8.time + 2000 + 1000 * Math.random(), 500). addListener( // when the container behavior is expired, expire and discard // the actor. { behaviorExpired : function(behaviour, time, actor) { actor. setDiscardable(true). setExpired(true); } }); // fade from opacity to total transparency var ab = new CAAT.AlphaBehavior(). setFrameTime(0, 500). setValues(1, 0); cb.addBehavior(ab); // follow a vertical path of at least 100 pixels var tb = new CAAT.PathBehavior(). setFrameTime(0, 500). setPath( new CAAT.Path().setLinear( bubble.x, bubble.y, bubble.x, bubble.y - 100 - 100 * Math.random())); cb.addBehavior(tb); bubble.addBehavior(cb); }; var span = document.getElementById('_c8_data'); _scene_8.onRenderEnd= function() { span.innerText= 'Actors: '+root.getNumChildren(); }; CAAT.loop(20); })(); </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, "CAAT animation ") .visible=.t. Endwith
Feel free to report any bug (this desserves the communauty) or make any comment.