Js-implemented Newton pendulum effect, js-Newton Pendulum

Js-implemented Newton pendulum effect, js-Newton Pendulum

Newton pendulum is a desktop demonstration device invented in the 1960 s. Five sphere of the same quality are fixed by the sling and closely arranged with each other. Also called: Newton swing ball, momentum conservation swing ball, permanent moving ball, physical Hitting Ball, hitting the ball and so on.

(Function (window, undefined) {window. none | (window. none ={}); // gravity acceleration var G = 9.8; var PI = Math. PI; // frame rate var FPS = 48; // * // IE angle Conversion function rorateIt (node, deg) {// obtain the midpoint var rect = node of the rectangle before the last deformation. getBoundingClientRect (), cx1 = (rect. right-rect. left)/2, // center x cy1 = (rect. bottom-rect. top)/2, // center y deg 2rad = Math. PI/180, // converts degrees to radians rad = deg * deg 2rad, 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; // obtain the current center rect = node. getBoundingClientRect (); var cx = (rect. right-rect. left)/2; var cy = (re Ct. bottom-rect. top)/2; // adjust the coordinate system of this element to implement node of CSS3 transform-origin. style. marginLeft = cx1-cx + "px"; node. style. marginTop = cy1-cy + "px";} * // external function reference // whether IE function isIE () {return navigator. userAgent. indexOf ("MSIE")>-1;} // obtain the 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 // Image method var img = function (src) {var img = new Image (); img. src = src; return img;} // direction class, vertical downward to 0 degrees counterclockwise as 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: object to be inherited from the vector, arg: arguments vector. extend = function (obj, arg) {vector. apply (obj, arg);} // vector merge method vector. merger = function (arrvecto R) {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 var force = function (size, face) {this. unit = 'N'; // inherits from the 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 is quality) var rigid = function (body, m) {// generally, the body is an img object, so currently there are only two forms: square or rectangle. this. body = body; this. m = m; // quality this. focus = (this. body instanceof Image )? Point (this. body. width/2, this. body. height/2): point (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); // You can reset all the above parameters. this. set = function (prop, value) {this [prop] = value;} this. addForce = function (f) {return this. force = vector. merger (f, this. force);} // rotate this. rota Te = 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, rad = face. rad, cos = Math. cos (rad), sin = Math. sin (rad); if (isIE () {var ident = "DXImageTransform. microso Ft. 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 expire 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 to implement the CSS3 transform-origin function 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. required transformorigin = paxis; this. body. style. webkitTransformOrigin = paxis; this. body. st Yle. OTransformOrigin = paxis; this. body. style. webkitTransform = sdeg; this. body. style. transform transform = sdeg; this. body. style. OTransform = sdeg; this. body. style. transform = sdeg ;}// rigid of the rigid-body combination. merger = function () {}// non-elastic rope subclass var rope = function (body, length, maxForce) {this. body = body; this. length = length; this. maxForce = maxForce | Infinity | Number. MAX_VALUE;} // combination class var comb = function (arrObject) {}// Single Pendulum class var pen Dulum = function (ripe, rigid) {}// Class Single Pendulum var likePend = function (rigid, fa, time) {// rigid body, initial angle, swing 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 30 var fx = fa. rad; // angle square root var m = Math. sqrt (fx); // Swing time 1 second var atime = time | 0.5; var fnum = FPS * atime; // unit increment var fm = m/fnum; // I: the square root of the angle is 0 var I =-m, tid; var g = new a (G); var t = 1000/FPS; // o: {s: 1, f: 30, t: 0, fun: callback}: s :(-) speed increases or decreases, f: from how many degrees, t: to how many degrees, fun: the function that runs after the pendulum. this. swing = function (o, fun) {/* var asps = 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 var a1 = Math for speed per unit time. 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 + 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 External Force g: new a (G), className: '', width: '000000', height: '000000', left: 0, top: -200, arnav: ['about', 'mywork', 'SITE', 'other', 'mytool'], imgW: 60, imgN: 5, s Deg: 5, hitSound: 'Sounds/hit.wav ', vol: 0.1} this. init () ;}; None. world. prototype = {// initialize 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 rigid body 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); sndH It. volume = p. vol | c. vol; var w=document.doc umentElement. offsetWidth; var imgWidth = p. imgW | c. imgW; // Image Width var imgNum = p. imgN | c. imgN; // number of images var jd = p. sDeg | c. sDeg; // maximum angle var es = p. arnav | c. arnav; 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.doc umentElement. 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 all the content of this article. I hope you will like it. It is helpful for you to learn javascript.