Js-implemented Newton pendulum effect, js-Newton Pendulum

Source: Internet
Author: User

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.

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.