0 Replies Latest reply on Oct 15, 2012 10:06 PM by mikelowery1109

    Javascript in Edge


      I am no expert in javascript, but in trying to move some of what I have created over and understand the new Edge features I can't figure out how these things quite equate to what the code input field is telling me. Maybe someone can reccommend a good tutorial if they know of one, but I can't find any triggers such as 'onload', and all the functions start with 'sym'.

      Is it possible to get code to load right from the initial load and work on just one image layer? Or is this a little much?


      I found this code that waves an image like a flag, and I can get it to work and load just fine on a page I just code by hand, but I cannot get it to load in the program and work at all. I have tried removing the entier first part of the script and using defined variables to simplify, but I feel I am just missing something here.


      Thank you in advance for any help.


      <script type="text/javascript">

      var h = new Image;

      h.onload = function(){

                var flag = document.getElementById('flag');

                var amp = 20;

                flag.width  = h.width;

                flag.height = h.height + amp*2;


                flag.style.marginLeft = -(flag.width/2)+'px';

                flag.style.marginTop  = -(flag.height/2)+'px';

                var timer = waveFlag( flag, h.width/10, amp );


      h.src = '\image01.jpg';



      function waveFlag( canvas, wavelength, amplitude, period, shading, squeeze ){

                if (!squeeze)    squeeze    = 0;

                if (!shading)    shading    = 100;

                if (!period)     period     = 200;

                if (!amplitude)  amplitude  = 10;

                if (!wavelength) wavelength = canvas.width/10;



                var fps = 30;

                var ctx = canvas.getContext('2d');

                var   w = canvas.width, h = canvas.height;

                var  od = ctx.getImageData(0,0,w,h).data;

                // var ct = 0, st=new Date;

                return setInterval(function(){

                          var id = ctx.getImageData(0,0,w,h);

                          var  d = id.data;

                          var now = (new Date)/period;

                          for (var y=0;y<h;++y){

                                    var lastO=0,shade=0;

                                    var sq = (y-h/2)*squeeze;

                                    for (var x=0;x<w;++x){

                                              var px  = (y*w + x)*4;

                                              var pct = x/w;

                                              var o   = Math.sin(x/wavelength-now)*amplitude*pct;

                                              var y2  = y + (o+sq*pct)<<0;

                                              var opx = (y2*w + x)*4;

                                              shade = (o-lastO)*shading;

                                              d[px  ] = od[opx  ]+shade;

                                              d[px+1] = od[opx+1]+shade;

                                              d[px+2] = od[opx+2]+shade;

                                              d[px+3] = od[opx+3];

                                              lastO = o;




                          // if ((++ct)%100 == 0) console.log( 1000 * ct / (new Date - st));