Visual JS -zoomIn , zoomOut image effect

visual JS

by Nikola Lukic

HTML

<script src="https://maximumroulette.com/visual-js/manifest/manifest_jsfiddle.js"></script>
<script src="https://maximumroulette.com/visual-js/lib/build.js"></script>
<body style="margin:0;padding:0;border:none;background-color:black;">
<div id="UPLOAD_BOX" style="display:block" >
</div>
<div id="experiment" style="display:block" >
<video id="webcam" autoplay width="640" height="480" style="display:none;position:absolute;left:0;top:0;"></video>
<canvas id="canvas-blended" width="640" height="480" style="position:absolute;left:0;top:0;display:none;"></canvas>
<canvas id="canvas-render" width="640" height="480" style="position:absolute;left:0;top:0;display:none;"></canvas>
</div>
<canvas tabindex='1' width="1" height="1" id="HELLO_WORLD"></canvas>
<div style="display:block;"> 
<!--audio controls id="audio_ambient"  >
<source src="http://radio.nessradio.net:8000/nessradio.mp3" type="audio/mpeg">
<source src="http://radio.nessradio.net:8000/nessradio.ogg" type="audio/ogg">
</audio-->
</div>


</body>

JavaScript

// visual js 0.7 comes with one lib build . 
 // You can make build with windows GUI visual js tools (makeBuild.exe)
 // will be posted as soon as i commit 
  
 // Basic example , add new game_object add image with absolute path 
 // nice ofr distribution system of image res loading
 
 // In this example program is in the edit mode but only for make look 
 //right click and choose "Exit edit mode"
 
 // you cant use rigth contex menu at this page 
 // See https://bitbucket.org/nikola_l/visual-js
 
 
 // This is first you will need : 
 // make surface draws and update functions 
SYS.DOM.CREATE_SURFACE( "SURF" , "HELLO_WORLD" , 100 , 99.4 , "DIAMETRIC" );

//One program have a one engine , engine runs modules 
//One modul have a gameobjects , use more modules for composition 
HELLO_WORLD.ENGINE.CREATE_MODUL("STARTER");

// if you setup in manifest 
// IMAGE_LOADER_PREFIX : false , you can put full url
// if you setup true , path have prefix /res/animations/
RESOURCE.Enemies1 = {source : [ "https://maximumroulette.com/framework/res/animations/Enemies1/0.png" ]};
//HELLO_WORLD.ENGINE.MODULES.ACCESS_MODULE("STARTER").NEW_OBJECT("IamWebCam" , 65 , 15 , 22 , 22 , 10);


/////////////////

function ANY_NAME_HERE_NEW_STAGE( H , V , step , w  , h , Ani_speed ) {
for (var y=0;y<V;y = y + step){
for (var x=0;x<H;x = x + step){
var name = "IamfutureEnemy" + x + y;

HELLO_WORLD.ENGINE.MODULES.ACCESS_MODULE("STARTER").NEW_OBJECT( name , x   , y , w , h , 1 )
HELLO_WORLD.ENGINE.MODULES.ACCESS_MODULE("STARTER").GAME_OBJECTS.ACCESS(name).CREATE_ANIMATION( SURF , "LOOP" , 0 , RESOURCE.Enemies1  , 1221212 , "no" , 1,11,1,Ani_speed,1) 


window[name].DRAG = false;

//window[name].POSITION.DIMENSION.HEIGHT = window[name].POSITION.DIMENSION.WIDTH /VIEW.ASPECT();

window[name].POSITION.DIMENSION.W = window[name].POSITION.DIMENSION.H / VIEW.ASPECT();

window[name].TAP = function(){  

this.DESTROY_ME_AFTER_X_SECUND( 1 );
console.log("THIS MUST BE TERMINATED ON CLICK : " +...