_javascript Technique of Newton pendulum effect implemented by JS

Newton Pendulum is a 1960-Year-old desktop demo device, five of the same quality of the ball is fixed by the hanging rope, closely aligned with each other. Also called: Newton Pendulum Ball, momentum conservation pendulum ball, moving ball, physical collision, touch the ball and so on.

(function (window,undefined) {window. None | | (Window.
  None = {});
  Gravity acceleration var g=9.8;
  var Pi=math.pi;
 
Frame-frequency Var fps=48; /*//ie angle conversion function Rorateit (node,deg) {//The midpoint of the rectangle before final deformation is var rect = Node.getboundingclientrect (), cx1 = (Rect.right- Rect.left)/2,//center x cy1 = (rect.bottom-rect.top)/2,//center y Deg2rad = math.pi/180,//angle turn radian rad = de
  G * deg2rad, cos = Math.Cos (rad), sin = Math.sin (RAD);
  var ident = "DXImageTransform.Microsoft.Matrix";
  Node.style.filter = "ProgID:" +ident + "(m11= ' 1.0 ', sizingmethod= ' auto expand ')"; http://www.satzansatz.de/cssd/onhavinglayout.html if (!node.currentstyle.haslayout) {//in IE7, if haslayout is not obtained,
  The filter will fail Node.style.writingMode = "TB-RL";
  var filter = Node.filters.item (ident); // +-------+-------+
  // | M11 |
  M12 | // +-------+-------+
  // | M21 |
  M22 | +-------+-------+ filter.     
  M11 = cos; Filter.     
  M12 =-sin; Filter.      
  M21 = sin; Filter.     
  M22 = cos; Get Current Center rect = nOde.getboundingclientrect ();
  var cx = (rect.right-rect.left)/2;
  var cy = (rect.bottom-rect.top)/2;
  Adjust the coordinate system of this element, realize the function of CSS3 transform-origin node.style.marginLeft = cx1-cx + "px";
Node.style.marginTop = cy1-cy + "px";
  }///External function reference//whether IE function Isie () {return navigator.userAgent.indexOf ("MSIE") >-1;  }//Get current style function Returnstyle (obj,stylename) {var myobj = typeof obj = = "string"? document.getElementById (obj) 
    : obj; 
    if (document.all) {return eval ("Myobj.currentstyle." + stylename); 
    else {return eval ("Document.defaultView.getComputedStyle (myobj,null)." + StyleName);
    }//External function reference//Picture method var img=function (src) {var img=new image ();
    IMG.SRC=SRC;
  return img;
    //Direction class, vertical downward to 0 degrees counterclockwise for positive var face=function (Deg,rad) {//0-360 this.unit= ' deg ';
    if (RAD) deg=180/pi*deg;
    This.deg=deg;
  This.rad=pi/180*this.deg; }//Vector class var vector=function (size,fx) {var cstrct=this.constRuctor;
    This.size=size; this.face=fx| |
    New Face (0);
    Fx=this.face;
      This.tohv=function () {var h=new cstrct (Math.sin (Fx.rad) *size,90);
      var v=new cstrct (Math.Cos (Fx.rad) *size,0);    
    return [H,V];
  }//Inheritance, obj: objects that need to inherit from vectors, arg:arguments vector.extend=function (obj,arg) {vector.apply (OBJ,ARG);
    }//Vector merging method vector.merger=function (arrvector) {if (arguments.length>1) arrvector=arguments;
    var cstrct=arrvector[0].constructor;
    var i=0,ilav=arrvector.length;
    var sum=[0,0];
      for (; i<ilav;i++) {var hv=arrvector[i].tohv ();
      Sum[0]+=hv[0].size;
    Sum[1]+=hv[1].size;
    } var size=math.sqrt (sum[0]*sum[0]+sum[1]*sum[1]);
    var fa=new face (Math.atan (sum[0]/sum[1)), ' Rad ';
  return new CSTRCT (SIZE,FA);
    }//Force class, parameter for size and direction var force=function (size,face) {this.unit= ' n ';
  Inherit from Vector vector.apply (this,arguments);
    }//Acceleration class var a=function (size,face) {this.unit= ' m/s^2 '; Vector.extend (this,arguments);
    }//Speed class var speed=function (size,face) {this.unit= ' m/s ';
  Vector.extend (this,arguments); }//Rigid body class, parameter (Body:img object, M for quality) var rigid=function (body,m) {/////General case is an IMG object, so for the moment only a square or rectangular form of two forms This.body=body 
    ;      This.m=m; Quality this.focus= (this.body instanceof Image) point (THIS.BODY.WIDTH/2,THIS.BODY.HEIGHT/2):p oint (
    THIS.BODY.STYLE.WIDTH/2,THIS.BODY.STYLE.HEIGHT/2);  This.axis=point (0,0);
    Axis position (Point object) this.force=new Force (0);
    This.a=new A (this.force.size/this.m,this.force.face);
    This.speed=new speed (0);
    setting, you can reset all parameters above This.set=function (prop,value) {this[prop]=value;
    } this.addforce=function (f) {return This.force=vector.merger (F,this.force); }//Rotate This.rotate=function (face,axis) {axis=axis| | this.axis| |
      This.focus;
      Cx1=returnstyle (This.body, "left");
      Cy1=returnstyle (This.body, "left"); var rect=this.body.getboundingclientrect (),//cx1=rect.left+axis.x,//cy1=rect.top+axis.y, cx1 = (rect.right-rect.left)/2, Cy1 = (rect.bottom-rect.top)/2, R
      Ad=face.rad, cos = Math.Cos (rad), sin = Math.sin (RAD);
        if (Isie ()) {var ident = "DXImageTransform.Microsoft.Matrix";
        This.body.style.filter = "ProgID:" +ident + "(m11= ' 1.0 ', sizingmethod= ' auto expand ')";
        if (!returnstyle (This.body, "Haslayout")) {//in IE7, if haslayout is not obtained, the filter will fail This.body.style.writingMode = "TB-RL";
        var filter = This.body.filters.item (ident); Filter.     
        M11 = cos; Filter.     
        M12 =-sin; Filter.      
        M21 = sin; Filter.  
      M22 = cos;
      } rect = This.body.getBoundingClientRect ();
      var cx=rect.left+axis.x;
      var cy=rect.top+axis.y;
      var cx = (rect.right-rect.left)/2;
      var cy = (rect.bottom-rect.top)/2; Adjust the coordinate system of this element, realize the function of CSS3 transform-origin this.body.style.left=parseint (this.body.style.left,10) + cx1-cx +"PX";
      This.body.style.top=parseint (this.body.style.top,10) + cy1-cy + "px";
      CSS3 var sdeg= "Rotate (" +face.deg+ "deg)";
      var paxis=axis.x+ "px" +axis.y+ "px";
      This.body.style.transformorigin=paxis;
      This.body.style.moztransformorigin=paxis;
      This.body.style.webkittransformorigin=paxis;
      This.body.style.otransformorigin=paxis;
      This.body.style.webkittransform=sdeg;
      This.body.style.moztransform=sdeg;
      This.body.style.otransform=sdeg;
    This.body.style.transform=sdeg; }//Rigid body combination rigid.merger=function () {}//Inelastic rope class var rope=function (Body,length,maxforce) {This.body=bo
    Dy
    This.length=length; This.maxforce=maxforce | | Infinity | |
  Number.MAX_VALUE;
  }//Combo class var comb=function (arrobject) {}//Simple Pendulum class var pendulum=function (Ripe,rigid) {}//class Pendulum
    var likepend=function (rigid,fa,time) {//Rigidbody, initial angle, oscillating frequency var self=this;
    This.rigid=rigid;
    This.body=this.rigid.body; THis.axis=this.rigid.axis;
    This.dom=this.rigid.dom;
    THIS.M=THIS.RIGID.M;
    This.rad=fa?fa.rad:fa=new face (PI/6, ' rad ');
    Swing//Angle var Fx=fa.rad;
    Angle square root var m=math.sqrt (FX); Swing Time 1 sec var atime=time| |
    0.5;
    var fnum=fps*atime;
    Unit increment var fm=m/fnum;
    I: Angle square root to 0 var I=-m,tid;
    var g=new a (g);
    var t=1000/fps; O:{s:1,f:30,t:0,fun:callback}: S: ( -1,1) increase or decrease in speed, F: From how many degrees, T: to how many degrees, fun: After the Run function this.swing=function (o,fun) {/* var a 
      Sps=g.size*math.cos (PI/2-FX)/(24*24*SELF.M);
      var fss=new force (asps,new Face (FX-PI/2));
      THIS.RIGID.FORCE=FSS;
      var a=this.rigid.a; Increment of speed in unit time var a1=math.acos ((asps+this.rigid.speed.size)/2) this.rigid.speed=new speed (a1,new face (FX-PI/2))
      ; a2=a1*2;*///{s:-1,inc:1} o=o| |
      {s:1};
      var Y=-o.s*i*i+fx*o.s;
        if (i>=m) {self.rigid.rotate (new face (0), Self.axis);
        Cleartimeout (TID);
        I=-m;
        if (fun) fun ();Return
      var f=new face (Y, ' rad ');
      Self.rigid.rotate (F,axis=self.axis);
      I+=FM;
    Tid=settimeout (function () {Self.swing.call (self,o,fun)},t);
      } this.moveto=function (P) {self.body.style.left=p.x+ "px";
    self.body.style.top=p.y+ "px"; ///World none.world=function (param) {//param:{force:[multiple force objects]} this.param=param| |
    {};
      this.config={//Global Force g:new A (g), ClassName: ', Width: ' 100% ', Height: ' 100% ', left:0, top:-200, arrnav:[' about ', ' myWork ', ' site ', ' other ', ' MyTools ', imgw:60, Imgn:5, Sdeg:5, H
  Itsound: ' Sounds/hit.wav ', vol:0.1} this.init ();
  };
      none.world.prototype={//Initialization dom:{}, Init:function () {var c=this.config;
      var P=this.param;
      Dom var dom=document.createelement ("div");
      Dom.classname=c.classname;
      dom.style.position= "Absolute"; dom.style.width=p.width| |
     C.width; dom.style.height=p.height| |
      C.height; dom.style.left= (p.left| |
      C.left) + "px"; dom.style.top= (p.top| |
      C.top) + "px";
      This.dom=dom;
    Document.body.appendChild (This.dom); },//Add a rigidbody addrigid:function (rigid,p) {if (!) (
      Rigid instanceof Array)) {Rigid=[rigid];
      if (!p) P=[point (0,0)]; if (!) (
      P instanceof Array)) p=[p];
        for (Var i=0,rl=rigid.length;i<rl;i++) {P[i]=p[i] | | | p[0];
        rigid[i].body.style.position= "Absolute";
        rigid[i].body.style.left=p[i].x+ "px";
        rigid[i].body.style.top=p[i].y+ "px";
      This.dom.appendChild (Rigid[i].body); },//Add an external force addforce:function () {}, Start:function () {var p=this.param, c=this
      . config; var shit=p.hitsound| |
      C.hitsound;
      var sndhit=new none.sounds (shit); sndhit.volume=p.vol| |
      C.vol;
      var w=document.documentelement.offsetwidth; var imgwidth=p.imgw| | c.imgw;//picture width var imgnum=p.imgn| |C.IMGN; Number of pictures var jd=p.sdeg| |   C.sdeg; Max angle var es=p.arrnav| |
      C.arrnav; var time=p.time| |
       
      C.time;
      var basex=w/2-imgwidth*imgnum/2;
      var jiaodu=new face (JD);
      var rig=[],ball=[],pend=[],axis=point (imgwidth/2,0);
        for (Var i=0,el=es.length;i<el;i++) {Rig[i]=document.getelementbyid (es[i]);
        Ball[i]=new rigid (rig[i],1);
        Ball[i].set ("axis", axis);
      Pend[i]=new likepend (ball[i],jiaodu,time);
      } this.addrigid (Pend);
      Resize ();
      if (!isie ()) swing ();
       
      Window.onresize=resize; 
      Function Hit (v) {sndhit.play ();
        function Swing () {var Runfun=arguments.callee;
        var last=pend.length-1;
        if (p.hitsound) hit (0);
          Pend[0].swing ({s:1},function () {if (P.hitsound) hit (1);
        Pend[last].swing ({s:-1},runfun);
      });
        function resize () {var w=document.documentelement.offsetwidth; var Basex=w/2-imgwiDTH*IMGNUM/2;
        var n=pend.length; 
        for (Var i=0;i<n;i++) {Pend[i].moveto (point (basex+imgwidth*i,0));
   
}
      }  
    }
  }; }) (window);

The above is the entire contents of this article, I hope you can enjoy. Can help you learn JavaScript.