teenagegoths

cube with drag (2)

Sep 11th, 2021 (edited)
163
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <script>
  2. var events = new Events();
  3. events.add = function(obj) {
  4. obj.events = { };
  5. }
  6. events.implement = function(fn) {
  7. fn.prototype = Object.create(Events.prototype);
  8. }
  9.  
  10. function Events() {
  11. this.events = { };
  12. }
  13. Events.prototype.on = function(name, fn) {
  14. var events = this.events[name];
  15. if (events == undefined) {
  16. this.events[name] = [ fn ];
  17. this.emit('event:on', fn);
  18. } else {
  19. if (events.indexOf(fn) == -1) {
  20. events.push(fn);
  21. this.emit('event:on', fn);
  22. }
  23. }
  24. return this;
  25. }
  26. Events.prototype.once = function(name, fn) {
  27. var events = this.events[name];
  28. fn.once = true;
  29. if (!events) {
  30. this.events[name] = [ fn ];
  31. this.emit('event:once', fn);
  32. } else {
  33. if (events.indexOf(fn) == -1) {
  34. events.push(fn);
  35. this.emit('event:once', fn);
  36. }
  37. }
  38. return this;
  39. }
  40. Events.prototype.emit = function(name, args) {
  41. var events = this.events[name];
  42. if (events) {
  43. var i = events.length;
  44. while(i--) {
  45. if (events[i]) {
  46. events[i].call(this, args);
  47. if (events[i].once) {
  48. delete events[i];
  49. }
  50. }
  51. }
  52. }
  53. return this;
  54. }
  55. Events.prototype.unbind = function(name, fn) {
  56. if (name) {
  57. var events = this.events[name];
  58. if (events) {
  59. if (fn) {
  60. var i = events.indexOf(fn);
  61. if (i != -1) {
  62. delete events[i];
  63. }
  64. } else {
  65. delete this.events[name];
  66. }
  67. }
  68. } else {
  69. delete this.events;
  70. this.events = { };
  71. }
  72. return this;
  73. }
  74.  
  75. var userPrefix;
  76.  
  77. var prefix = (function () {
  78. var styles = window.getComputedStyle(document.documentElement, ''),
  79. pre = (Array.prototype.slice
  80. .call(styles)
  81. .join('')
  82. .match(/-(moz|webkit|ms)-/) || (styles.OLink === '' && ['', 'o'])
  83. )[1],
  84. dom = ('WebKit|Moz|MS|O').match(new RegExp('(' + pre + ')', 'i'))[1];
  85. userPrefix = {
  86. dom: dom,
  87. lowercase: pre,
  88. css: '-' + pre + '-',
  89. js: pre[0].toUpperCase() + pre.substr(1)
  90. };
  91. })();
  92.  
  93. function bindEvent(element, type, handler) {
  94. if(element.addEventListener) {
  95. element.addEventListener(type, handler, false);
  96. } else {
  97. element.attachEvent('on' + type, handler);
  98. }
  99. }
  100.  
  101. function Viewport(data) {
  102. events.add(this);
  103.  
  104. var self = this;
  105.  
  106. this.element = data.element;
  107. this.fps = data.fps;
  108. this.sensivity = data.sensivity;
  109. this.sensivityFade = data.sensivityFade;
  110. this.touchSensivity = data.touchSensivity;
  111. this.speed = data.speed;
  112.  
  113. this.lastX = 0;
  114. this.lastY = 0;
  115. this.mouseX = 0;
  116. this.mouseY = 0;
  117. this.distanceX = 0;
  118. this.distanceY = 0;
  119. this.positionX = 1122;
  120. this.positionY = 136;
  121. this.torqueX = 0;
  122. this.torqueY = 0;
  123.  
  124. this.down = false;
  125. this.upsideDown = false;
  126.  
  127. this.previousPositionX = 0;
  128. this.previousPositionY = 0;
  129.  
  130. this.currentSide = 0;
  131. this.calculatedSide = 0;
  132.  
  133. bindEvent(document, 'mousedown', function() {
  134. self.down = true;
  135. });
  136. bindEvent(document, 'mouseup', function() {
  137. self.down = false;
  138. });
  139.  
  140. bindEvent(document, 'keyup', function() {
  141. self.down = false;
  142. });
  143.  
  144. bindEvent(document, 'mousemove', function(e) {
  145. self.mouseX = e.pageX;
  146. self.mouseY = e.pageY;
  147. });
  148.  
  149. bindEvent(document, 'touchstart', function(e) {
  150.  
  151. self.down = true;
  152. e.touches ? e = e.touches[0] : null;
  153. self.mouseX = e.pageX / self.touchSensivity;
  154. self.mouseY = e.pageY / self.touchSensivity;
  155. self.lastX = self.mouseX;
  156. self.lastY = self.mouseY;
  157. });
  158.  
  159. bindEvent(document, 'touchmove', function(e) {
  160. if(e.preventDefault) {
  161. e.preventDefault();
  162. }
  163.  
  164. if(e.touches.length == 1) {
  165.  
  166. e.touches ? e = e.touches[0] : null;
  167.  
  168. self.mouseX = e.pageX / self.touchSensivity;
  169. self.mouseY = e.pageY / self.touchSensivity;
  170.  
  171. }
  172. });
  173.  
  174. bindEvent(document, 'touchend', function(e) {
  175. self.down = false;
  176. });
  177.  
  178. setInterval(this.animate.bind(this), this.fps);
  179.  
  180. }
  181. events.implement(Viewport);
  182. Viewport.prototype.animate = function() {
  183.  
  184. this.distanceX = (this.mouseX - this.lastX);
  185. this.distanceY = (this.mouseY - this.lastY);
  186.  
  187. this.lastX = this.mouseX;
  188. this.lastY = this.mouseY;
  189.  
  190. if(this.down) {
  191. this.torqueX = this.torqueX * this.sensivityFade + (this.distanceX * this.speed - this.torqueX) * this.sensivity;
  192. this.torqueY = this.torqueY * this.sensivityFade + (this.distanceY * this.speed - this.torqueY) * this.sensivity;
  193. }
  194.  
  195. if(Math.abs(this.torqueX) > 1.0 || Math.abs(this.torqueY) > 1.0) {
  196. if(!this.down) {
  197. this.torqueX *= this.sensivityFade;
  198. this.torqueY *= this.sensivityFade;
  199. }
  200.  
  201. this.positionY -= this.torqueY;
  202.  
  203. if(this.positionY > 360) {
  204. this.positionY -= 360;
  205. } else if(this.positionY < 0) {
  206. this.positionY += 360;
  207. }
  208.  
  209. if(this.positionY > 90 && this.positionY < 270) {
  210. this.positionX -= this.torqueX;
  211.  
  212. if(!this.upsideDown) {
  213. this.upsideDown = true;
  214. this.emit('upsideDown', { upsideDown: this.upsideDown });
  215. }
  216.  
  217. } else {
  218.  
  219. this.positionX += this.torqueX;
  220.  
  221. if(this.upsideDown) {
  222. this.upsideDown = false;
  223. this.emit('upsideDown', { upsideDown: this.upsideDown });
  224. }
  225. }
  226.  
  227. if(this.positionX > 360) {
  228. this.positionX -= 360;
  229. } else if(this.positionX < 0) {
  230. this.positionX += 360;
  231. }
  232.  
  233. if(!(this.positionY >= 46 && this.positionY <= 130) && !(this.positionY >= 220 && this.positionY <= 308)) {
  234. if(this.upsideDown) {
  235. if(this.positionX >= 42 && this.positionX <= 130) {
  236. this.calculatedSide = 3;
  237. } else if(this.positionX >= 131 && this.positionX <= 223) {
  238. this.calculatedSide = 2;
  239. } else if(this.positionX >= 224 && this.positionX <= 314) {
  240. this.calculatedSide = 5;
  241. } else {
  242. this.calculatedSide = 4;
  243. }
  244. } else {
  245. if(this.positionX >= 42 && this.positionX <= 130) {
  246. this.calculatedSide = 5;
  247. } else if(this.positionX >= 131 && this.positionX <= 223) {
  248. this.calculatedSide = 4;
  249. } else if(this.positionX >= 224 && this.positionX <= 314) {
  250. this.calculatedSide = 3;
  251. } else {
  252. this.calculatedSide = 2;
  253. }
  254. }
  255. } else {
  256. if(this.positionY >= 46 && this.positionY <= 130) {
  257. this.calculatedSide = 6;
  258. }
  259.  
  260. if(this.positionY >= 220 && this.positionY <= 308) {
  261. this.calculatedSide = 1;
  262. }
  263. }
  264.  
  265. if(this.calculatedSide !== this.currentSide) {
  266. this.currentSide = this.calculatedSide;
  267. this.emit('sideChange');
  268. }
  269.  
  270. }
  271.  
  272. this.element.style[userPrefix.js + 'Transform'] = 'rotateX(' + this.positionY + 'deg) rotateY(' + this.positionX + 'deg)';
  273.  
  274. if(this.positionY != this.previousPositionY || this.positionX != this.previousPositionX) {
  275. this.previousPositionY = this.positionY;
  276. this.previousPositionX = this.positionX;
  277.  
  278. this.emit('rotate');
  279.  
  280. }
  281.  
  282. }
  283. var viewport = new Viewport({
  284. element: document.getElementsByClassName('cube')[0],
  285. fps: 20,
  286. sensivity: .1,
  287. sensivityFade: .93,
  288. speed: 2,
  289. touchSensivity: 1.5
  290. });
  291.  
  292. function Cube(data) {
  293. var self = this;
  294.  
  295. this.element = data.element;
  296. this.sides = this.element.getElementsByClassName('side');
  297.  
  298. this.viewport = data.viewport;
  299. this.viewport.on('rotate', function() {
  300. self.rotateSides();
  301. });
  302. this.viewport.on('upsideDown', function(obj) {
  303. self.upsideDown(obj);
  304. });
  305. this.viewport.on('sideChange', function() {
  306. self.sideChange();
  307. });
  308. }
  309. Cube.prototype.rotateSides = function() {
  310. var viewport = this.viewport;
  311. if(viewport.positionY > 90 && viewport.positionY < 270) {
  312. this.sides[0].getElementsByClassName('cube-image')[0].style[userPrefix.js + 'Transform'] = 'rotate(' + (viewport.positionX + viewport.torqueX) + 'deg)';
  313. this.sides[5].getElementsByClassName('cube-image')[0].style[userPrefix.js + 'Transform'] = 'rotate(' + -(viewport.positionX + 180 + viewport.torqueX) + 'deg)';
  314. } else {
  315. this.sides[0].getElementsByClassName('cube-image')[0].style[userPrefix.js + 'Transform'] = 'rotate(' + (viewport.positionX - viewport.torqueX) + 'deg)';
  316. this.sides[5].getElementsByClassName('cube-image')[0].style[userPrefix.js + 'Transform'] = 'rotate(' + -(viewport.positionX + 180 - viewport.torqueX) + 'deg)';
  317. }
  318. }
  319. Cube.prototype.upsideDown = function(obj) {
  320.  
  321. var deg = (obj.upsideDown == true) ? '180deg' : '0deg';
  322. var i = 5;
  323.  
  324. while(i > 0 && --i) {
  325. this.sides[i].getElementsByClassName('cube-image')[0].style[userPrefix.js + 'Transform'] = 'rotate(' + deg + ')';
  326. }
  327.  
  328. }
  329. Cube.prototype.sideChange = function() {
  330.  
  331. for(var i = 0; i < this.sides.length; ++i) {
  332. this.sides[i].getElementsByClassName('cube-image')[0].className = 'cube-image';
  333. }
  334. this.sides[this.viewport.currentSide - 1].getElementsByClassName('cube-image')[0].className = 'cube-image active';
  335.  
  336. }
  337.  
  338. new Cube({
  339. viewport: viewport,
  340. element: document.getElementsByClassName('cube')[0]
  341. });
  342. </script>
RAW Paste Data Copied