{"id":230323,"date":"2014-07-18T13:50:03","date_gmt":"2014-07-18T09:50:03","guid":{"rendered":"http:\/\/savepearlharbor.com\/?p=230323"},"modified":"-0001-11-30T00:00:00","modified_gmt":"-0001-11-29T21:00:00","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=230323","title":{"rendered":"\u041e\u0441\u043e\u0431\u0435\u043d\u043d\u043e\u0441\u0442\u0438 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438 WebGL \u0438\u0433\u0440\u044b Digital Trip<\/span>"},"content":{"rendered":"
\t\"image\"\/<\/p>\n

\u041f\u0440\u0438\u0432\u0435\u0442, \u0445\u0430\u0431\u0440! \u0412 \u044d\u0442\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0435 \u044f \u0445\u043e\u0447\u0443 \u043f\u043e\u0434\u0435\u043b\u0438\u0442\u044c\u0441\u044f \u0441\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u043c \u043e\u043f\u044b\u0442\u043e\u043c \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438 WebGL \u0438\u0433\u0440\u044b Digital Trip. \u041f\u043e\u043c\u0438\u043c\u043e WebGL, \u0432 \u0438\u0433\u0440\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u044b \u0442\u0430\u043a\u0438\u0435 \u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u0438, \u043a\u0430\u043a WebAudio API, WebSockets, getUserMedia, Vibration API, DeviceOrientation, \u0430 \u0442\u0430\u043a\u0436\u0435 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 three.js, hedtrackr.js, sicket.io \u0438 \u043f\u0440. \u0412 \u0441\u0442\u0430\u0442\u044c\u0435 \u0431\u0443\u0434\u0443\u0442 \u043e\u043f\u0438\u0441\u0430\u043d\u044b \u043d\u0430\u0438\u0431\u043e\u043b\u0435\u0435 \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u044b\u0435 \u0434\u0435\u0442\u0430\u043b\u0438 \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438. \u042f \u0440\u0430\u0441\u0441\u043a\u0430\u0436\u0443 \u043e \u0434\u0432\u0438\u0436\u043a\u0435 \u0438\u0433\u0440\u044b, \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0438 \u043f\u0440\u0438 \u043f\u043e\u043c\u043e\u0449\u0438 \u043c\u043e\u0431\u0438\u043b\u044c\u043d\u043e\u0433\u043e, \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0438 \u0432\u0435\u0431-\u043a\u0430\u043c\u0435\u0440\u043e\u0439, \u0441\u043a\u0430\u0436\u0443 \u043f\u0430\u0440\u0443 \u0441\u043b\u043e\u0432 \u043e back-end\u2019e \u043d\u0430 node.js, \u0440\u0430\u0431\u043e\u0442\u0430\u044e\u0449\u0435\u043c \u0432 \u0441\u0432\u044f\u0437\u043a\u0435 \u0441 dogecoin \u0434\u0435\u043c\u043e\u043d\u043e\u043c.
\u0412 \u043a\u043e\u043d\u0446\u0435 \u0441\u0442\u0430\u0442\u044c\u0438 \u043f\u0440\u0438\u0432\u0435\u0434\u0435\u043d\u044b \u0441\u0441\u044b\u043b\u043a\u0438 \u043d\u0430 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u043d\u044b\u0435 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438, \u0438\u0441\u0445\u043e\u0434\u043d\u044b\u0439 \u043a\u043e\u0434 \u043d\u0430 GitHub, \u043e\u043f\u0438\u0441\u0430\u043d\u0438\u0435 \u0438\u0433\u0440\u044b \u0438 \u0441\u0430\u043c\u0443 \u0438\u0433\u0440\u0443.
\u0412\u0441\u0435\u0445, \u043a\u043e\u043c\u0443 \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u043e, \u043f\u0440\u043e\u0448\u0443 \u043f\u043e\u0434 \u043a\u0430\u0442.
<\/a><\/p>\n

\u0413\u0435\u0439\u043c\u043f\u043b\u0435\u0439 \u043e\u0447\u0435\u043d\u044c \u043f\u0440\u043e\u0441\u0442\u043e\u0439: \u043b\u0435\u0442\u0438\u043c \u043f\u043e \u0437\u0430\u0434\u0430\u043d\u043d\u043e\u0439 \u0442\u0440\u0430\u0435\u043a\u0442\u043e\u0440\u0438\u0438, \u0441\u043e\u0431\u0438\u0440\u0430\u0435\u043c \u043c\u043e\u043d\u0435\u0442\u043a\u0438 \u0438 \u0431\u043e\u043d\u0443\u0441\u044b, \u0443\u0432\u043e\u0440\u0430\u0447\u0438\u0432\u0430\u0435\u043c\u0441\u044f \u043e\u0442 \u043a\u0430\u043c\u043d\u0435\u0439. \u041f\u043e\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0438\u0433\u0440\u043e\u043a\u0430 \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0435\u043d\u044b 3 \u0432\u0430\u0440\u0438\u0430\u043d\u0442\u0430\u043c\u0438. \u0411\u043e\u043d\u0443\u0441\u044b \u0431\u044b\u0432\u0430\u044e\u0442 \u0442\u0440\u0435\u0445 \u0442\u0438\u043f\u043e\u0432: \u0449\u0438\u0442 (HTML5), \u0437\u0430\u043c\u0435\u0434\u043b\u0435\u043d\u0438\u0435 (\u043a\u043e\u0442\u0438\u043a) \u0438\u043b\u0438 \u0432\u043e\u0441\u0441\u0442\u0430\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u0435 \u0436\u0438\u0437\u043d\u0435\u0439 (\u0433\u0443\u0431\u044b). \u0412 \u043a\u043e\u043d\u0446\u0435 \u0438\u0433\u0440\u044b \u043c\u043e\u0436\u043d\u043e \u0432\u044b\u0432\u0435\u0441\u0442\u0438 \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u043d\u044b\u0435 \u043c\u043e\u043d\u0435\u0442\u043a\u0438 \u043d\u0430 \u0441\u0432\u043e\u0439 \u043a\u043e\u0448\u0435\u043b\u0435\u043a dogecoin.<\/p>\n

\"image\"\/<\/p>\n

\u0426\u0435\u043b\u044c \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u0438\u0433\u0440\u044b \u2014 \u0440\u0430\u0441\u0441\u043a\u0430\u0437\u0430\u0442\u044c \u043e \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044f\u0445 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u043e\u0432, \u043f\u0440\u043e\u043a\u0430\u0447\u0430\u0442\u044c \u0441\u0432\u043e\u0438 \u043d\u0430\u0432\u044b\u043a\u0438, \u043f\u043e\u0434\u0435\u043b\u0438\u0442\u044c\u0441\u044f \u043e\u043f\u044b\u0442\u043e\u043c \u0438 \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u043e\u0433\u0440\u043e\u043c\u043d\u043e\u0435 \u0443\u0434\u043e\u0432\u043e\u043b\u044c\u0441\u0442\u0432\u0438\u0435 \u043e\u0442 \u043f\u0440\u043e\u0446\u0435\u0441\u0441\u0430.
\u0422\u0435\u043f\u0435\u0440\u044c \u043f\u043e\u0434\u0440\u043e\u0431\u043d\u0435\u0435 \u043e\u0431 \u043e\u0441\u043e\u0431\u0435\u043d\u043d\u043e\u0441\u0442\u044f\u0445 \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438.<\/p>\n

\u0414\u0432\u0438\u0436\u043e\u043a \u0438\u0433\u0440\u044b \u0438 \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0434\u0435\u0442\u0430\u043b\u0438<\/h4>\n

\u0412 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u043f\u0440\u043e\u0441\u0442\u0440\u0430\u043d\u0441\u0442\u0432\u0430 \u0438\u043c\u0435\u043d \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0433\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u0430\u044f \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0430\u044f DT, \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043a\u043e\u0442\u043e\u0440\u043e\u0439 \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u0434\u043e\u0441\u0442\u0443\u043f \u043a \u0441\u043b\u0443\u0436\u0435\u0431\u043d\u044b\u043c \u0444\u0443\u043d\u043a\u0446\u0438\u044f\u043c, \u043a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0442\u043e\u0440\u0430\u043c \u043a\u043b\u0430\u0441\u0441\u043e\u0432 \u0438 \u044d\u043a\u0437\u0435\u043c\u043f\u043b\u044f\u0440\u0430\u043c, \u0430 \u0442\u0430\u043a\u0436\u0435 \u0444\u0443\u043d\u043a\u0446\u0438\u044f\u043c-\u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0430\u043c, \u0440\u0430\u0437\u043b\u0438\u0447\u043d\u044b\u043c \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u0430\u043c \u0438 \u0442.\u0434.<\/p>\n

\u041f\u0440\u0435\u043b\u043e\u0430\u0434\u0435\u0440<\/h5>\n

\u041a \u0441\u0442\u0430\u043d\u0438\u0446\u0435 \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0435\u043d\u044b \u0442\u0440\u0438 \u0441\u043a\u0440\u0438\u043f\u0442\u0430: <\/p>\n

<script src="js\/vendor\/jquery.min.js"><\/script> <script src="js\/vendor\/yepnope.1.5.4-min.js"><\/script> <script src="js\/myYepnope.min.js"><\/script> <\/code><\/pre>\n
  \u0414\u043b\u044f \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u043e\u0441\u0442\u0430\u043b\u044c\u043d\u044b\u0445 \u0441\u043a\u0440\u0438\u043f\u0442\u043e\u0432 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0437\u0430\u0433\u0440\u0443\u0437\u0447\u0438\u043a \u0440\u0435\u0441\u0443\u0440\u0441\u043e\u0432 yepnope<\/a>.
  \u041f\u0440\u0438 \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u0438 myYepnope.js \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442 \u043f\u0440\u043e\u0432\u0435\u0440\u043a\u0430 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0438 WebGL \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u043e\u043c:  <\/p>\n
\u041a\u043e\u0434<\/b><\/p>\n
\n
var isWebGLSupported,     \tcanvas = document.getElementById('checkwebgl'); \tif (!window.WebGLRenderingContext) {     \t\/\/ Browser has no idea what WebGL is         isWebGLSupported = false; \t} else if (canvas.getContext("webgl") ||         canvas.getContext("webGlCanvas") || canvas.getContext("moz-webgl") || canvas.getContext("webkit-3d") || canvas.getContext("experimental-webgl")) {     \t\/\/ Can get context         isWebGLSupported = true; \t} else {    \/\/ Can't get context         isWebGLSupported = false; \t} <\/code><\/pre>\n
  <\/div>\n<\/div>\n
  \u0415\u0441\u043b\u0438 \u0431\u0440\u0430\u0443\u0437\u0435\u0440 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442 WebGL, myYepnope \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u0442 \u0444\u0443\u043d\u043a\u0446\u0438\u044e \u0434\u043b\u044f \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u0440\u0435\u0441\u0443\u0440\u0441\u043e\u0432 \u0438 \u0437\u0430\u0433\u0440\u0443\u0436\u0430\u0435\u0442 \u043e\u0441\u0442\u0430\u043b\u044c\u043d\u044b\u0435 \u0441\u043a\u0440\u0438\u043f\u0442\u044b.<\/p>\n
  \u0417\u0434\u0435\u0441\u044c \u043d\u0430\u0447\u0438\u043d\u0430\u0435\u0442 \u0440\u0430\u0431\u043e\u0442\u0443 \u043f\u0440\u0435\u043b\u043e\u0430\u0434\u0435\u0440. \u0412\u0438\u0437\u0443\u0430\u043b\u044c\u043d\u043e \u043e\u043d \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u0438\u0437 \u0441\u0435\u0431\u044f \u0440\u0430\u0437\u043c\u044b\u0442\u044b\u0439 \u0441\u0442\u0430\u0440\u0442\u043e\u0432\u044b\u0439 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441 \u0438\u0433\u0440\u044b \u0441 \u043f\u043e\u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u043c \u0443\u043c\u0435\u043d\u044c\u0448\u0435\u043d\u0438\u0435\u043c \u0440\u0430\u0434\u0438\u0443\u0441\u0430 \u0440\u0430\u0437\u043c\u044b\u0442\u0438\u044f \u043f\u043e \u043c\u0435\u0440\u0435 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438. <\/p>\n
  <\/p>\n
  \u042d\u0444\u0444\u0435\u043a\u0442 \u0440\u0430\u0437\u043c\u044b\u0442\u0438\u044f \u0434\u043e\u0441\u0442\u0438\u0433\u0430\u0435\u0442\u0441\u044f \u0437\u0430 \u0441\u0447\u0435\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f css-\u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 -webkit-filter: blur()<\/code>. \u0421\u0432\u043e\u0439\u0441\u0442\u0432\u043e \u043f\u0440\u0435\u043a\u0440\u0430\u0441\u043d\u043e \u0430\u043d\u0438\u043c\u0438\u0440\u0443\u0435\u0442\u0441\u044f. \u0414\u043b\u044f Firefox \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f svg filter, \u0440\u0430\u0434\u0438\u0443\u0441 \u043a\u043e\u0442\u043e\u0440\u043e\u0433\u043e \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u0438 \u0438\u0437\u043c\u0435\u043d\u044f\u0435\u0442\u0441\u044f \u0438 \u043f\u0440\u0438\u043c\u0435\u043d\u044f\u0435\u0442\u0441\u044f \u0432 \u0432\u0438\u0434\u0435 css-\u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 filter: 'url()'<\/code>, \u043f\u0440\u0438 \u044d\u0442\u043e\u043c data url<\/code> \u0433\u0435\u043d\u0435\u0440\u0438\u0440\u0443\u0435\u0442\u0441\u044f \u0441\u043a\u0440\u0438\u043f\u0442\u043e\u043c \u0438 \u043e\u0431\u043d\u043e\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043a\u0430\u0436\u0434\u044b\u0435 20% \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438.<\/p>\n
\u041a\u043e\u0434<\/b><\/p>\n
\n
if (isWebGLSupported) {     \tvar $body = $('body'),         \t$cc = $('.choose_control'),         \tmaxBlur = 100,         \tsteps = 4,    \t     isWebkitBlurSupported;       \tif ($body[0].style.webkitFilter === undefined) {             isWebkitBlurSupported = false;             $cc.css({filter: "url('data:image\/svg+xml;utf8,<svg xmlns=\\"http:\/\/www.w3.org\/2000\/svg\\"><filter id=\\"blur-overlay\\"><feGaussianBlur stdDeviation=\\"" + maxBlur + "\\"\/><\/filter><\/svg>#blur-overlay')"});     \t} else {             isWebkitBlurSupported = true;             $body[0].style.webkitFilter = 'blur(' + maxBlur + 'px)';     \t}           $('#loader').css({display: 'table'});         $cc.css({display: 'table'});           yepnope.loadCounter = 0;         yepnope.percent = 0;         yepnope.showLoading = function (n) {             yepnope.percent += maxBlur\/steps;             yepnope.loadCounter += 1;         \t  $(".loader").animate({minWidth: Math.round(yepnope.percent)+"px"}, {                 duration: 1000,                 progress: function () {                     var current = parseInt($(".loader").css("minWidth"), 10) * 100\/maxBlur;                     $("title").html(Math.floor(current) + "% " + "digital trip");                     if (isWebkitBlurSupported) {                         $body[0].style.webkitFilter = 'blur('+ (maxBlur - current)+ 'px)';                     }                     if (!isWebkitBlurSupported && current % 20 === 0) {                         $cc.css({filter: "url('data:image\/svg+xml;utf8,<svg xmlns=\\"http:\/\/www.w3.org\/2000\/svg\\"><filter id=\\"blur-overlay\\"><feGaussianBlur stdDeviation=\\"" + (maxBlur - maxBlur\/(steps+1)*n) + "\\"\/><\/filter><\/svg>#blur-overlay')"});                     }                     if (current === 100) {                         $("title").html("digital trip");                         if (!isWebkitBlurSupported && current % 20 === 0) $cc.css({filter: "url('data:image\/svg+xml;utf8,<svg xmlns=\\"http:\/\/www.w3.org\/2000\/svg\\"><filter id=\\"blur-overlay\\"><feGaussianBlur stdDeviation=\\"" + 0 + "\\"\/><\/filter><\/svg>#blur-overlay')"});                     }             \t},                 complete: function () {   \t              if (n === steps) {                         DT.runApp();                     }             \t}         \t});     \t};     \tyepnope([{         \tload: [                 "js\/vendor\/three.min.js",                 "js\/DT.min.js",   \t          "..\/socket.io\/socket.io.js"         \t],             callback: {}     \t}]); \t} else {         $('#nogame').css({display: 'table'}); \t}  <\/code><\/pre>\n
  <\/div>\n<\/div>\n
  \u041f\u043e\u0441\u043b\u0435 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u043c\u043e\u0436\u043d\u043e \u0432\u044b\u0431\u0440\u0430\u0442\u044c \u043e\u0434\u0438\u043d \u0438\u0437 \u0442\u0440\u0435\u0445 \u0441\u043f\u043e\u0441\u043e\u0431\u043e\u0432 \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u0438 \u043d\u0430\u0447\u0430\u0442\u044c \u0438\u0433\u0440\u0443.<\/p>\n
\u0421\u043e\u0431\u044b\u0442\u0438\u044f<\/h5>\n
  \u0412\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f \u043c\u0435\u0436\u0434\u0443 \u043e\u0431\u044a\u0435\u043a\u0442\u0430\u043c\u0438 \u0432\u043d\u0443\u0442\u0440\u0438 \u0438\u0433\u0440\u044b \u043e\u0441\u043d\u043e\u0432\u0430\u043d\u044b \u043d\u0430 \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u044b\u0445 \u0438 \u043a\u0430\u0441\u0442\u043e\u043c\u043d\u044b\u0445 \u0441\u043e\u0431\u044b\u0442\u0438\u044f\u0445<\/p>\n
\u0421\u043e\u0431\u044b\u0442\u0438\u044f<\/b><\/p>\n
‘blur’ \/\/ \u043f\u043e\u0442\u0435\u0440\u044f \u0444\u043e\u043a\u0443\u0441\u0430
  ‘focus’ \/\/ \u043f\u043e\u044f\u0432\u043b\u0435\u043d\u0438\u0435 \u0444\u043e\u043a\u0443\u0441\u0430
  ‘socketInitialized’ \/\/ \u0438\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f socket.io
  ‘externalObjectLoaded’ \/\/ \u0437\u0430\u0432\u0435\u0440\u0448\u0435\u043d\u0438\u0435 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u0432\u043d\u0435\u0448\u043d\u0435\u0439 \u043c\u043e\u0434\u0435\u043b\u0438<\/p>\n
  ‘startGame’ \/\/ \u0437\u0430\u043f\u0443\u0441\u043a \u0438\u0433\u0440\u044b
  ‘pauseGame’ \/\/ \u043f\u0430\u0443\u0437\u0430
  ‘resumeGame’ \/\/ \u0432\u043e\u0437\u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u0435 \u0438\u0433\u0440\u044b
  ‘gameOver’ \/\/ \u043a\u043e\u043d\u0435\u0446 \u0438\u0433\u0440\u044b
  ‘resetGame’ \/\/ \u0441\u0431\u0440\u043e\u0441 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u043e\u0432 \u0438\u0433\u0440\u044b<\/p>\n
  ‘updatePath’ \/\/ \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u0435 \u043f\u043e\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0432 \u0438\u0433\u0440\u043e\u0432\u043e\u043c \u043f\u0440\u043e\u0441\u0442\u0440\u0430\u043d\u0441\u0442\u0435 (\u0442\u0440\u0443\u0431\u0435)
  ‘update’ \/\/ \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u0435 \u043e\u0431\u044a\u0435\u043a\u0442\u043e\u0432 \u0438\u0433\u0440\u044b<\/p>\n
  ‘changeSpeed’ \/\/ \u0432\u043d\u0435\u0448\u043d\u0435\u0435 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0435 \u0441\u043a\u043e\u0440\u043e\u0441\u0442\u0438 
  ‘showHelth’ \/\/ \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0437\u0434\u043e\u0440\u043e\u0432\u044c\u044f
  ‘showInvulner’ \/\/ \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u043d\u0435\u0443\u044f\u0437\u0432\u0438\u043c\u043e\u0441\u0442\u0438 (\u0449\u0438\u0442)
  ‘showScore’ \/\/ \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u043e\u0447\u043a\u043e\u0432
  ‘showFun’ \/\/ \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0440\u0435\u0436\u0438\u043c\u0430 \u0437\u0430\u043c\u0435\u0434\u043b\u0435\u043d\u0438\u044f (\u043a\u043e\u0442\u0438\u043a\u0430)
  ‘changeHelth’ \/\/ \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0435 \u0437\u0434\u043e\u0440\u043e\u0432\u044c\u044f
  ‘bump’ \/\/ \u0441\u0442\u043e\u043b\u043a\u043d\u043e\u0432\u0435\u043d\u0438\u0435 \u0441 \u043e\u0431\u044a\u0435\u043a\u0442\u043e\u043c
  ‘blink’ \/\/ \u043c\u0438\u0433\u0430\u043d\u0438\u0435 \u0441\u0444\u0435\u0440\u044b
  ‘hit’ \/\/ \u0441\u0442\u043e\u043b\u043a\u043d\u043e\u0432\u0435\u043d\u0438\u0435 \u0441 \u043a\u0430\u043c\u043d\u0435\u043c
  ‘changeScore’ \/\/ \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0435 \u043e\u0447\u043a\u043e\u043c
  ‘catchBonus’ \/\/ \u043f\u043e\u0438\u043c\u043a\u0430 \u0431\u043e\u043d\u0443\u0441\u0430
  ‘makeInvulner’ \/\/ \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0435 \u0440\u0435\u0436\u0438\u043c\u0430 \u043d\u0435\u0443\u044f\u0437\u0432\u0438\u043c\u043e\u0441\u0442\u0438 (\u0449\u0438\u0442\u0430)
  ‘makeFun’ \/\/ \u0432\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435 \u0440\u0435\u0436\u0438\u043c\u0430 \u0437\u0430\u043c\u0435\u0434\u043b\u0435\u043d\u0438\u044f (\u043a\u043e\u0442\u0438\u043a\u0430)
  ‘showBonuses’ \/\/ \u043e\u0431\u043e\u0442\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u043f\u043e\u0439\u043c\u0430\u043d\u043d\u044b\u0445 \u0431\u043e\u043d\u0443\u0441\u043e\u0432
  ‘stopFun’ \/\/ \u0432\u044b\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435 \u0440\u0435\u0436\u0438\u043c\u0430 \u043a\u043e\u0442\u0438\u043a\u0430<\/p>\n
  ‘paymentCheck’ \/\/ \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u043f\u0440\u043e\u0432\u0435\u0440\u043a\u0438 \u043a\u043b\u0438\u0435\u043d\u0442\u0430 \u0434\u043b\u044f \u043e\u043f\u043b\u0430\u0442\u044b
  ‘paymentMessage’ \/\/ \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u0435 \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u044f \u043e \u043f\u043b\u0430\u0442\u0435\u0436\u0435
  ‘transactionMessage’ \/\/ \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u0435 \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u044f \u043e \u0442\u0440\u0430\u043d\u0437\u0430\u043a\u0446\u0438\u0438
  ‘checkup’ \/\/ \u0437\u0430\u043f\u0443\u0441\u043a \u043f\u0440\u043e\u0432\u0435\u0440\u043a\u0438  <\/div>\n<\/div>\n
  \u0421\u043e\u0431\u044b\u0442\u0438\u044f \u0432\u043e\u0437\u043d\u0438\u043a\u0430\u044e\u0442 \u0432 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0435 document<\/code>, \u0432\u044b\u0437\u044b\u0432\u0430\u044f \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u0435 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0438, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440:<\/p>\n
\u041a\u043e\u0434<\/b><\/p>\n
\n
DT.$document.trigger('gameOver', {cause: 'death'}); DT.$document.on('gameOver', function (e, data) {     \tif (data.cause === 'death') {             DT.audio.sounds.gameover.play();     \t} \t}); <\/code><\/pre>\n<\/div>\n<\/div>\n
  \u0421\u043e\u0431\u044b\u0442\u0438\u044f 'blur'<\/code> \u0438 'focus'<\/code> \u0432\u044b\u0437\u044b\u0432\u0430\u044e\u0442\u0441\u044f \u0432 window<\/code> \u0438 \u0441\u043b\u0443\u0436\u0430\u0442 \u0434\u043b\u044f \u043e\u0442\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u044f \u0437\u0432\u0443\u043a\u0430 \u0438 \u0432\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u044f \u043f\u0430\u0443\u0437\u044b \u043f\u0440\u0438 \u043f\u043e\u0442\u0435\u0440\u0435 \u0444\u043e\u043a\u0443\u0441\u0430 \u043e\u043a\u043d\u0430 \u0441 \u0438\u0433\u0440\u043e\u0439.<\/p>\n
\u041a\u043e\u0434<\/b><\/p>\n
\n
DT.$window.on('blur', function() {     \tif (DT.game.wasStarted && !DT.game.wasPaused && !DT.game.wasOver) {             DT.$document.trigger('pauseGame', {});     \t}         DT.setVolume(0); \t}); <\/code><\/pre>\n<\/div>\n<\/div>\n
\u0418\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f \u0438\u0433\u0440\u043e\u0432\u043e\u0433\u043e \u043c\u0438\u0440\u0430
  <\/h5>\n
  \u0417\u0434\u0435\u0441\u044c \u0432\u0441\u0435 \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u043e \u0434\u043b\u044f \u043f\u0440\u043e\u0435\u043a\u0442\u043e\u0432 \u043d\u0430 three.js<\/code>: \u0441\u043e\u0437\u0434\u0430\u0435\u0442\u0441\u044f \u0441\u0446\u0435\u043d\u0430, \u043a\u0430\u043c\u0435\u0440\u0430, \u0438\u0433\u0440\u043e\u0432\u043e\u0435 \u043f\u0440\u043e\u0441\u0442\u0440\u0430\u043d\u0441\u0442\u0432\u043e, \u0438\u0441\u0442\u043e\u0447\u043d\u0438\u043a\u0438 \u0441\u0432\u0435\u0442\u0430, \u0444\u043e\u043d.<\/p>\n
\u0421\u0446\u0435\u043d\u0430<\/h6>\n
  <\/p>\n
\u041a\u043e\u0434<\/b><\/p>\n
\n
DT.scene = new THREE.Scene(); <\/code><\/pre>\n<\/div>\n<\/div>\n
\u041a\u0430\u043c\u0435\u0440\u0430<\/h6>\n
  <\/p>\n
\u041a\u043e\u0434<\/b><\/p>\n
\n
DT.splineCamera = new THREE.PerspectiveCamera( 84, window.innerWidth \/ window.innerHeight, 0.01, 1000 ); <\/code><\/pre>\n<\/div>\n<\/div>\n
\u0418\u0433\u0440\u043e\u0432\u043e\u0435 \u043f\u0440\u043e\u0441\u0442\u0440\u0430\u043d\u0441\u0442\u0432\u043e \u2014 \u0442\u0440\u0443\u0431\u0430, \u0432\u0434\u043e\u043b\u044c \u043a\u0440\u0438\u0432\u043e\u0439 TorusKnot \u0438\u0437 \u043d\u0430\u0431\u043e\u0440\u0430 THREE.Curves<\/h6>\n
  <\/p>\n
\u041a\u043e\u0434<\/b><\/p>\n
\n
var extrudePath = new THREE.Curves.TorusKnot(); DT.tube = new THREE.TubeGeometry(extrudePath, 100, 3, 8, true, true); <\/code><\/pre>\n<\/div>\n<\/div>\n
  \u0418\u0441\u0442\u043e\u0447\u043d\u0438\u043a\u0438 \u0441\u0432\u0435\u0442\u0430  <\/p>\n
\u041a\u043e\u0434<\/b><\/p>\n
\n
DT.lights = {     \tlight: new THREE.PointLight(0xffffff, 0.75, 100),         directionalLight: new THREE.DirectionalLight(0xffffff, 0.5) \t}; <\/code><\/pre>\n<\/div>\n<\/div>\n
  \u0424\u043e\u043d \u0432 \u0432\u0438\u0434\u0435 \u0441\u0444\u0435\u0440\u044b \u0432\u043e\u043a\u0440\u0443\u0433 \u0438\u0433\u0440\u043e\u0432\u043e\u0433\u043e \u043f\u0440\u043e\u0441\u0442\u0440\u0430\u043d\u0441\u0442\u0432\u0430 \u0441 \u043d\u0430\u0442\u044f\u043d\u0443\u0442\u043e\u0439 \u043f\u043e \u0432\u043d\u0443\u0442\u0440\u0435\u043d\u043d\u0435\u0439 \u043f\u043e\u0432\u0435\u0440\u0445\u043d\u043e\u0441\u0442\u0438 \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u043e\u0439 \u0441 \u0433\u0440\u0430\u043d\u0438\u0446\u0430\u043c\u0438 \u043e\u0434\u043d\u043e\u0433\u043e \u0446\u0432\u0435\u0442\u0430 \u0434\u043b\u044f \u0431\u0435\u0441\u0448\u043e\u0432\u043d\u043e\u0433\u043e \u0441\u043e\u0435\u0434\u0438\u043d\u0435\u043d\u0438\u044f.  <\/p>\n
\u041a\u043e\u0434<\/b><\/p>\n
\n
var geomBG = new THREE.SphereGeometry(500, 32, 32), \tmatBG = new THREE.MeshBasicMaterial({         \tmap: THREE.ImageUtils.loadTexture('img\/background5.jpg'),     \t}); var worldBG = new THREE.Mesh(geomBG, matBG);     worldBG.material.side = THREE.BackSide; <\/code><\/pre>\n<\/div>\n<\/div>\n
\u041a\u043b\u0430\u0441\u0441\u044b<\/h5>\n
  \u0412 \u0438\u0433\u0440\u0435 \u0435\u0441\u0442\u044c \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043e\u0441\u043d\u043e\u0432\u043d\u044b\u0445 \u043a\u043b\u0430\u0441\u0441\u043e\u0432: \u0418\u0433\u0440\u0430 (DT.Game<\/code>), \u0418\u0433\u0440\u043e\u043a (DT.Player<\/code>) \u0438 \u0418\u0433\u0440\u043e\u0432\u043e\u0439 \u043e\u0431\u044a\u0435\u043a\u0442 (DT.GameObject<\/code>). \u041e\u043d\u0438 \u0438\u043c\u0435\u044e\u0442 \u0441\u0432\u043e\u0438 \u043c\u0435\u0442\u043e\u0434\u044b (\u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u044f, \u0441\u0431\u0440\u043e\u0441\u0430 \u0438 \u043f\u0440.), \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u043c\u044b\u0435 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u043c\u0438 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0430\u043c\u0438 \u0432 \u043e\u0442\u0432\u0435\u0442 \u043d\u0430 \u0441\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u043d\u0438\u0435 \u0442\u043e\u0433\u043e \u0438\u043b\u0438 \u0438\u043d\u043e\u0433\u043e \u0441\u043e\u0431\u044b\u0442\u0438\u044f. \u041e\u0431\u044a\u0435\u043a\u0442 \u0438\u0433\u0440\u044b \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u0442 \u0440\u0430\u0437\u043b\u0438\u0447\u043d\u044b\u0435 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u044b (\u0441\u043a\u043e\u0440\u043e\u0441\u0442\u044c, \u0443\u0441\u043a\u043e\u0440\u0435\u043d\u0438\u0435), \u043a\u043e\u043d\u0441\u0442\u0430\u043d\u0442\u044b (\u043c\u0438\u043d\u0438\u043c\u0430\u043b\u044c\u043d\u043e\u0435 \u0440\u0430\u0441\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u043c\u0435\u0436\u0434\u0443 \u043a\u0430\u043c\u043d\u044f\u043c\u0438 \u0438 \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044e \u043e \u0441\u0432\u043e\u0435\u043c \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0438 (wasStarted<\/code>, wasPaused<\/code>). \u041e\u0431\u044a\u0435\u043a\u0442 \u0438\u0433\u0440\u043e\u043a\u0430 \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u0442 \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044e \u043e \u0442\u0435\u043a\u0443\u0449\u0435\u043c \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0438 \u0438\u0433\u0440\u043e\u043a\u0430 (\u0441\u0447\u0435\u0442, \u0436\u0438\u0437\u043d\u0438, \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u043d\u0435\u0443\u044f\u0437\u0432\u0438\u043c\u043e\u0441\u0442\u0438), \u0430 \u0442\u0430\u043a\u0436\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u043c\u043e\u0434\u0435\u043b\u0438 \u0438\u0433\u0440\u043e\u043a\u0430 (\u0441\u0444\u0435\u0440\u0430, \u043a\u043e\u043b\u044c\u0446\u0430 (\u043a\u043e\u043d\u0442\u0443\u0440\u044b, \u044f\u0432\u043b\u044f\u044e\u0449\u0438\u0435\u0441\u044f \u0438\u043d\u0434\u0438\u043a\u0430\u0442\u043e\u0440\u0430\u043c\u0438 \u0437\u0434\u043e\u0440\u043e\u0432\u044c\u044f) \u0432\u043e\u043a\u0440\u0443\u0433 \u0441\u0444\u0435\u0440\u044b). \u0412\u0441\u0435 \u043e\u0441\u0442\u0430\u043b\u044c\u043d\u044b\u0435 \u043e\u0431\u044a\u0435\u043a\u0442\u044b \u044f\u0432\u043b\u044f\u044e\u0442\u0441\u044f \u043f\u043e\u0434\u043a\u043b\u0430\u0441\u0441\u0430\u043c\u0438 \u0418\u0433\u0440\u043e\u0432\u043e\u0433\u043e \u043e\u0431\u044a\u0435\u043a\u0442\u0430 (\u0447\u0430\u0441\u0442\u0438\u0446\u044b, \u0449\u0438\u0442 \u043d\u0430 \u0438\u0433\u0440\u043e\u043a\u0435, \u0431\u043e\u043d\u0443\u0441\u044b).<\/p>\n
\u0412\u043d\u0443\u0442\u0440\u0435\u043d\u043d\u0438\u0435 \u0438 \u0432\u043d\u0435\u0448\u043d\u0438\u0435 \u043c\u043e\u0434\u0435\u043b\u0438<\/h5>\n
  \u0412 \u0438\u0433\u0440\u0435 \u0435\u0441\u0442\u044c \u043c\u043e\u0434\u0435\u043b\u0438 \u0434\u0432\u0443\u0445 \u0442\u0438\u043f\u043e\u0432: \u0432\u043d\u0443\u0442\u0440\u0435\u043d\u043d\u0438\u0435 (\u043f\u0440\u043e\u0441\u0442\u044b\u0435) \u043c\u043e\u0434\u0435\u043b\u0438 (\u0441\u0444\u0435\u0440\u0430, \u0438\u043d\u0434\u0438\u043a\u0430\u0442\u043e\u0440 \u0437\u0434\u043e\u0440\u043e\u0432\u044c\u044f (\u043a\u043e\u043b\u044c\u0446\u0430\/\u043a\u043e\u043d\u0442\u0443\u0440\u044b), \u043a\u0430\u043c\u043d\u0438 \u0438 \u043c\u043e\u043d\u0435\u0442\u044b), \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0441\u043e\u0437\u0434\u0430\u044e\u0442\u0441\u044f \u0441\u0440\u0435\u0434\u0441\u0442\u0432\u0430\u043c\u0438 three.js \u0438 \u0432\u043d\u0435\u0448\u043d\u0438\u0435 (\u0441\u043b\u043e\u0436\u043d\u044b\u0435) \u043c\u043e\u0434\u0435\u043b\u0438 (\u0431\u043e\u043d\u0443\u0441\u044b \u0438 HTML5 \u0449\u0438\u0442 \u0432\u043e\u043a\u0440\u0443\u0433 \u0441\u0444\u0435\u0440\u044b) \u043f\u043e\u0434\u0433\u0440\u0443\u0436\u0430\u044e\u0442\u0441\u044f \u0432 .obj \u0444\u043e\u0440\u043c\u0430\u0442\u0435 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u043c \u0437\u0430\u0433\u0440\u0443\u0437\u0447\u0438\u043a\u043e\u043c<\/a>.
  \u0421\u0444\u0435\u0440\u0430 \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0447\u0430\u0441\u0442\u044c\u044e \u043e\u0431\u044a\u0435\u043a\u0442\u0430 \u0438\u0433\u0440\u043e\u043a\u0430 \u0438 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u0441\u043e\u0431\u043e\u0439 2 \u043e\u0431\u044a\u0435\u043a\u0442\u0430: \u0444\u0438\u0437\u0438\u0447\u0435\u0441\u043a\u0430\u044f \u0441\u0444\u0435\u0440\u0430 \u0434\u043b\u044f \u0440\u0430\u0441\u0447\u0435\u0442\u043e\u0432 \u0441\u0442\u043e\u043b\u043a\u043d\u043e\u0432\u0435\u043d\u0438\u0439 \u0441 \u0434\u0440\u0443\u0433\u0438\u043c\u0438 \u043e\u0431\u044a\u0435\u043a\u0442\u0430\u043c (\u043d\u0435 \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0430 \u043d\u0430 \u0441\u0446\u0435\u043d\u0443)<\/p>\n
\u041a\u043e\u0434<\/b><\/p>\n
\n
this.sphere = new THREE.Mesh(new THREE.SphereGeometry(0.5, 32, 32), new THREE.MeshPhongMaterial({})); <\/code><\/pre>\n<\/div>\n<\/div>\n
  \u0438 \u0441\u0438\u0441\u0442\u0435\u043c\u0430 \u0447\u0430\u0441\u0442\u0438\u0446 \u043d\u0430 \u043e\u0441\u043d\u043e\u0432\u0435 \u0434\u0432\u0438\u0436\u043a\u0430 \u0434\u043b\u044f \u0441\u0438\u0441\u0442\u0435\u043c\u044b \u0447\u0430\u0441\u0442\u0438\u0446 Fireworks<\/a>.
  <\/p>\n
\u041a\u043e\u0434<\/b><\/p>\n
\n
this.emitter = Fireworks.createEmitter({nParticles : 100})         .effectsStackBuilder()             .spawnerSteadyRate(30)             .position(Fireworks.createShapePoint(0, 0, 0))             .velocity(Fireworks.createShapePoint(0, 0, 0))             .lifeTime(0.2, 0.7)             .renderToThreejsParticleSystem({ ... })         \t.back()     \t.start(); <\/code><\/pre>\n<\/div>\n<\/div>\n
  \u041c\u043e\u0434\u0435\u043b\u0438 \u0431\u043e\u043d\u0443\u0441\u043e\u0432 \u043f\u043e\u0434\u0433\u0440\u0443\u0436\u0430\u044e\u0442\u0441\u044f \u0432 \u0432\u0438\u0434\u0435 2 \u043e\u0431\u044a\u0435\u043a\u0442\u043e\u0432 \u043a\u0430\u0436\u0434\u0430\u044f \u0441 \u043e\u0434\u0438\u043d\u0430\u043a\u043e\u0432\u044b\u043c \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e\u043c \u0432\u0435\u0440\u0448\u0438\u043d (\u0442\u0430\u043a\u0436\u0435 \u0434\u043b\u044f \u0442\u0440\u0430\u043d\u0441\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u0438).<\/p>\n
\u0421\u043f\u0438\u0441\u043e\u043a \u043c\u043e\u0434\u0435\u043b\u0435\u0439<\/h6>\n
  <\/p>\n
\u041a\u043e\u0434<\/b><\/p>\n
\n
DT.listOfModels = [{         \tname: 'bonusH1',         \tscale: 0.1,             rotaion: new THREE.Vector3(0, 0, 0),         \tcolor: 0xff0000,     \t}, {         \tname: 'bonusI',         \tscale: 0.02,             rotaion: new THREE.Vector3(0, 0, 0),         \tcolor: 0x606060,         \t'5': 0xffffff,         \t'html': 0xffffff,             'orange': 0xD0671F,             'shield': 0xC35020,     \t}, {         \tname: 'bonusE1',         \tscale: 0.75,             rotaion: new THREE.Vector3(0, 0, 0),         \tcolor: 0x606060,     \t}, {         \tname: 'bonusH2',         \tscale: 0.1,             rotaion: new THREE.Vector3(0, 0, 0),         \tcolor: 0xff0000,     \t}, {         \tname: 'shield',         \tscale: 0.16,             rotaion: new THREE.Vector3(0, 0, 0),         \tcolor: 0x606060,     \t}, {         \tname: 'bonusE2',         \tscale: 0.75, \t        rotaion: new THREE.Vector3(0, 0, 0),         \tcolor: 0x606060,     \t} \t]; <\/code><\/pre>\n<\/div>\n<\/div>\n
\u0417\u0430\u0433\u0440\u0443\u0437\u0447\u0438\u043a<\/h6>\n
\u041a\u043e\u0434<\/b><\/p>\n
\n
var manager = new THREE.LoadingManager();       manager.onProgress = function (item, loaded, total) {         console.info('loaded item', loaded, 'of', total, '('+item+')'); \t}; \t \tvar loader = new THREE.OBJLoader(manager);       DT.listOfModels.forEach(function (el, i, a) {         loader.load('objects\/' + el.name + '.obj', function ( object ) {             object.traverse( function ( child ) {             \tvar color = el[child.name] || el.color;                 child.material = new THREE.MeshPhongMaterial({                     color: color,                     shading: THREE.SmoothShading,                     emissive: new THREE.Color(color).multiplyScalar(0.5),                     shininess: 100,             \t}); \t        });         \tif (i === 1) {                 a[i].object = object         \t} else {                 a[i].object = object.children[0];         \t}             DT.$document.trigger('externalObjectLoaded', {index: i});     \t}); \t});  <\/code><\/pre>\n<\/div>\n<\/div>\n
  \u041f\u043e\u0441\u043b\u0435 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u0432\u043d\u0435\u0448\u043d\u0438\u0435 \u043c\u043e\u0434\u0435\u043b\u0438 \u0441\u0442\u0430\u043d\u043e\u0432\u044f\u0442\u0441\u044f \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u044b\u043c\u0438 \u043f\u043e \u0441\u0441\u044b\u043b\u043a\u0435 DT.listOfModels[index].object<\/code> \u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442\u0441\u044f \u0432 \u043a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0442\u043e\u0440\u0435 \u0431\u043e\u043d\u0443\u0441\u0430.<\/p>\n
\u041f\u0440\u0435\u0432\u0440\u0430\u0449\u0435\u043d\u0438\u044f (\u0442\u0440\u0430\u043d\u0441\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u0438) \u0438 \u043f\u043e\u0441\u0442\u043f\u0440\u043e\u0446\u0435\u0441\u0441\u0438\u043d\u0433<\/h5>\n
  \u0412 \u0438\u0433\u0440\u0435 \u0435\u0441\u0442\u044c \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0442\u0440\u0430\u043d\u0441\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u0439: \u0434\u043b\u044f \u0438\u043d\u0434\u0438\u043a\u0430\u0442\u043e\u0440\u043e\u0432 \u0437\u0434\u043e\u0440\u043e\u0432\u044c\u044f, \u0434\u043b\u044f \u0431\u043e\u043d\u0443\u0441\u043e\u0432 \u0438 glitch-\u044d\u0444\u0444\u0435\u043a\u0442 (\u0438\u043b\u0438 \u044d\u0444\u0444\u0435\u043a\u0442 \u0441\u043b\u043e\u043c\u0430\u043d\u043d\u043e\u0433\u043e \u0442\u0435\u043b\u0435\u0432\u0438\u0437\u043e\u0440\u0430) \u0432 \u043a\u043e\u043d\u0446\u0435 \u0438\u0433\u0440\u044b.<\/p>\n
  \u0422\u0440\u0430\u043d\u0441\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u0438 \u0438\u043d\u0434\u0438\u043a\u0430\u0442\u043e\u0440\u0430 \u0437\u0434\u043e\u0440\u043e\u0432\u044c\u044f \u0438 \u0431\u043e\u043d\u0443\u0441\u043e\u0432 \u043e\u0441\u043d\u043e\u0432\u0430\u043d\u044b \u043d\u0430 morphTargets<\/a>. 
  <\/p>\n
  \u041f\u0440\u0438 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0438 \u043e\u0431\u044a\u0435\u043a\u0442\u0430 \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u043e\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u0441\u043e\u0445\u0440\u0430\u043d\u044f\u0435\u0442\u0441\u044f \u0432 \u0433\u0435\u043e\u043c\u0435\u0442\u0440\u0438\u0438 \u044d\u0442\u043e\u0433\u043e \u043e\u0431\u044a\u0435\u043a\u0442\u0430. \u041e\u0441\u0442\u0430\u043b\u044c\u043d\u044b\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u0441\u043e\u0445\u0440\u0430\u043d\u044f\u0442\u0441\u044f \u0432 \u0441\u043f\u0435\u0446\u0438\u0430\u043b\u044c\u043d\u043e\u043c \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0435 \u0433\u0435\u043e\u043c\u0435\u0442\u0440\u0438\u0438 morphTargets<\/code>. \u0422\u0435\u043a\u0443\u0449\u0435\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u043e\u0431\u044a\u0435\u043a\u0442\u0430 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u0442\u0441\u044f \u0443\u0440\u043e\u0432\u043d\u0435\u043c morphTargetInfluences<\/code> \u043e\u0431\u044a\u0435\u043a\u0442\u0430.<\/p>\n
  \u0418\u043d\u0434\u0438\u043a\u0430\u0442\u043e\u0440 \u0437\u0434\u043e\u0440\u043e\u0432\u044c\u044f (\u043a\u043e\u043b\u044c\u0446\u0430\/\u043a\u043e\u043d\u0442\u0443\u0440\u044b) \u0432\u043e\u043a\u0440\u0443\u0433 \u0441\u0444\u0435\u0440\u044b \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f 2 \u043e\u0431\u044a\u0435\u043a\u0442\u0430\u043c\u0438, \u0433\u0435\u043e\u043c\u0435\u0442\u0440\u0438\u044f \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u0438\u0437 \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u0441\u043e\u0441\u0442\u043e\u0438\u0442 \u0438\u0445 180 \u0432\u0435\u0440\u0448\u0438\u043d (\u043f\u043e 60 \u0441 \u0432\u043d\u0443\u0442\u0440\u0435\u043d\u043d\u0435\u0439 \u0438 \u0432\u043d\u0435\u0448\u043d\u0435\u0439 \u0441\u0442\u043e\u0440\u043e\u043d\u044b). <\/p>\n
  \u041a\u043e\u043b\u044c\u0446\u0430\/\u043a\u043e\u043d\u0442\u0443\u0440\u044b \u043c\u043e\u0433\u0443\u0442 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u044f\u0442\u044c \u0441\u043e\u0431\u043e\u0439 \u043e\u043a\u0440\u0443\u0436\u043d\u043e\u0441\u0442\u0438, \u043f\u044f\u0442\u0438-, \u0447\u0435\u0442\u044b\u0440\u0435\u0445- \u0438 \u0442\u0440\u0435\u0443\u0433\u043e\u043b\u044c\u043d\u0438\u043a\u0438, \u043f\u0440\u0438 \u044d\u0442\u043e\u043c \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u0432\u0435\u0440\u0448\u0438\u043d \u0432\u0441\u0435\u0433\u0434\u0430 \u043e\u0441\u0442\u0430\u0435\u0442\u0441\u044f 180.
  \u0412\u0430\u0436\u043d\u043e, \u0447\u0442\u043e\u0431\u044b \u0447\u0438\u0441\u043b\u043e \u0432\u0435\u0440\u0448\u0438\u043d \u0432 \u043a\u0430\u0436\u0434\u043e\u043c \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0438 \u0431\u044b\u043b\u043e \u043e\u0434\u0438\u043d\u0430\u043a\u043e\u0432\u044b\u043c, \u0430 \u0438\u0445 \u0432\u0435\u043a\u0442\u043e\u0440\u044b \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442 \u043c\u0435\u043d\u044f\u043b\u0438\u0441\u044c \u00ab\u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u043e\u00bb (\u0432 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0438\u0438 \u0441 \u0436\u0435\u043b\u0430\u0435\u043c\u043e\u0439 \u0442\u0440\u0430\u043d\u0441\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u0435\u0439), \u0438\u043d\u0430\u0447\u0435 \u0442\u0440\u0430\u043d\u0441\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044f \u0431\u0443\u0434\u0435\u0442 \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u043d\u0435\u043a\u043e\u0440\u0440\u0435\u043a\u0442\u043d\u043e \u0438\u043b\u0438 \u043d\u0435 \u0431\u0443\u0434\u0435\u0442 \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u0432\u043e\u0432\u0441\u0435.<\/p>\n
  \u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u0431\u044b\u043b\u0430 \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u0430 \u0441\u043f\u0435\u0446\u0438\u0430\u043b\u044c\u043d\u0430\u044f \u0444\u0443\u043d\u043a\u0446\u0438\u044f \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0433\u0435\u043e\u043c\u0435\u0442\u0440\u0438\u0438 \u0438\u043d\u0434\u0438\u043a\u0430\u0442\u043e\u0440\u0430 \u0437\u0434\u043e\u0440\u043e\u0432\u044c\u044f (\u043a\u043e\u043b\u0435\u0446\/\u043a\u043e\u043d\u0442\u0443\u0440\u043e\u0432). <\/p>\n
\u041a\u043e\u0434<\/b><\/p>\n
\n
DT.createGeometry = function (circumradius) {     \tvar geometry = new THREE.Geometry(),         \tx,             innerradius = circumradius * 0.97,         \tn = 60;       \tfunction setMainVert (rad, numb) {         \tvar vert = [];         \tfor (var i = 0; i < numb; i++) {             \tvar vec3 = new THREE.Vector3(                     rad * Math.sin((Math.PI \/ numb) + (i * ((2 * Math.PI)\/ numb))),                     rad * Math.cos((Math.PI \/ numb) + (i * ((2 * Math.PI)\/ numb))),                     0             \t);                 vert.push(vec3);         \t}         \treturn vert;     \t}       \tfunction fillVert (vert) {         \tvar nFilled, nUnfilled, result = [];           \tnFilled = vert.length;             nUnfilled = n\/nFilled;             vert.forEach(function (el, i, arr) {             \tvar nextInd = i === arr.length - 1 ? 0 : i + 1;             \tvar vec = el.clone().sub(arr[nextInd]);             \tfor (var j = 0; j < nUnfilled; j++) {                     result.push(vec.clone().multiplyScalar(1\/nUnfilled).add(el));             \t}         \t});         \treturn result;     \t}       \t\/\/ set morph targets     \t[60, 5, 4, 3, 2].forEach(function (el, i, arr) {         \tvar vert,                 vertOuter,                 vertInner;           \tvertOuter = fillVert(setMainVert(circumradius, el).slice(0)).slice(0);             vertInner = fillVert(setMainVert(innerradius, el).slice(0)).slice(0);           \tvert = vertOuter.concat(vertInner);               geometry.morphTargets.push({name: 'vert'+i, vertices: vert});           \tif (i === 0) {                 geometry.vertices = vert.slice(0);         \t}     \t});     \t     \t\/\/ Generate the faces of the n-gon.     \tfor (x = 0; x < n; x++) {         \tvar next = x === n - 1 ? 0 : x + 1;         \tgeometry.faces.push(new THREE.Face3(x, next, x + n));             geometry.faces.push(new THREE.Face3(x + n, next, next + n));     \t}       \treturn geometry; \t}; <\/code><\/pre>\n<\/div>\n<\/div>\n
  \u041f\u043e \u044d\u0442\u043e\u0439 \u0436\u0435 \u043f\u0440\u0438\u0447\u0438\u043d\u0435 \u043c\u043e\u0434\u0435\u043b\u0438 \u0431\u043e\u043d\u0443\u0441\u043e\u0432 \u0438\u043c\u043f\u043e\u0440\u0442\u0438\u0440\u0443\u044e\u0442\u0441\u044f \u0432 \u0432\u0438\u0434\u0435 \u0434\u0432\u0443\u0445 .obj \u043e\u0431\u044a\u0435\u043a\u0442\u043e\u0432, \u0437\u0430\u0440\u0430\u043d\u0435\u0435 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u043d\u044b\u0445 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u043d\u044b\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c \u0432 \u0440\u0435\u0434\u0430\u043a\u0442\u043e\u0440\u0435 (\u043a\u0430\u043a \u044d\u0442\u043e \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0434\u043b\u044f \u043e\u0436\u0438\u0434\u0430\u0435\u043c\u043e\u0439 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 \u043f\u0440\u0435\u0432\u0440\u0430\u0449\u0435\u043d\u0438\u044f (\u0442\u0440\u0430\u043d\u0441\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u0438). \u041c\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043b\u0438 \u0434\u043b\u044f \u044d\u0442\u043e\u0433\u043e 3ds Max \u0438 blender.
  <\/p>\n
  \u0421 \u043c\u043e\u0434\u0435\u043b\u044c\u044e \u0433\u0443\u0431 \u0435\u0441\u0442\u044c \u043e\u0434\u0438\u043d \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u044b\u0439 \u043c\u043e\u043c\u0435\u043d\u0442. \u0412 \u043e\u0431\u044b\u0447\u043d\u043e\u043c \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0438 \u0433\u0443\u0431\u044b \u0430\u043d\u0438\u043c\u0438\u0440\u0443\u044e\u0442\u0441\u044f (\u043f\u0440\u0438\u043e\u0442\u043a\u0440\u044b\u0432\u0430\u044e\u0442\u0441\u044f \u0438 \u0437\u0430\u043a\u0440\u044b\u0432\u0430\u044e\u0442\u0441\u044f). \u041f\u0440\u0438 \u044d\u0442\u043e\u043c \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442 \u043f\u0440\u043e\u0441\u0442\u043e \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0435 \u0441\u0438\u043b\u044b \u0432\u043b\u0438\u044f\u043d\u0438\u044f \u0432\u0435\u0440\u0448\u0438\u043d \u0438\u0437 \u0434\u0432\u0443\u0445 \u043d\u0430\u0431\u043e\u0440\u043e\u0432 \u0432\u0435\u0440\u0448\u0438\u043d (\u043e\u0442\u043a\u0440\u044b\u0442\u044b\u0445 \u0438 \u0437\u0430\u043a\u0440\u044b\u0442\u044b\u0445 \u0433\u0443\u0431). \u0421\u043e\u0433\u043b\u0430\u0441\u043d\u043e \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u0438 three.js<\/a>, \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 morphTargetInfluence<\/code> \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u043d\u0430\u0431\u043e\u0440\u0430 \u0432\u0435\u0440\u0448\u0438\u043d \u0434\u043e\u043b\u0436\u043d\u043e \u043d\u0430\u0445\u043e\u0434\u0438\u0442\u044c\u0441\u044f \u0432 \u0434\u0438\u0430\u043f\u0430\u0437\u043e\u043d\u0435 [0, 1]. \u041f\u0440\u0438 \u044d\u0442\u043e\u043c \u043f\u0440\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0438 \u0441\u0438\u043b\u044b \u0431\u043e\u043b\u044c\u0448\u0435 1 \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442 \u044d\u0444\u0444\u0435\u043a\u0442 \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u043e\u0433\u043e \u00ab\u0433\u0438\u043f\u0435\u0440\u0432\u043b\u0438\u044f\u043d\u0438\u044f\u00bb. \u0422\u0430\u043a, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0435\u0441\u043b\u0438 \u043f\u0440\u0438\u043c\u0435\u043d\u0438\u0442\u044c morphTargetInfluence \u0441\u043e \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435\u043c 5 \u043a \u043d\u0430\u0431\u043e\u0440\u0443 \u0432\u0435\u0440\u0448\u0438\u043d \u0434\u043b\u044f \u043c\u043e\u0434\u0435\u043b\u0438 \u043a\u043e\u0442\u0430, \u043c\u043e\u0434\u0435\u043b\u044c \u043a\u0430\u043a \u0431\u0443\u0434\u0442\u043e \u00ab\u0432\u044b\u0432\u0435\u0440\u043d\u0435\u0442\u0441\u044f \u043d\u0430\u0438\u0437\u043d\u0430\u043d\u043a\u0443\u00bb. \u0423 \u043c\u043e\u0434\u0435\u043b\u0438 \u0433\u0443\u0431 \u044d\u0442\u043e \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u043a\u0430\u043a \u00ab\u043e\u0442\u043a\u0440\u044b\u0442\u0438\u0435 \u0440\u0442\u0430\u00bb. 
  \u041d\u0430 \u044d\u0442\u043e\u043c \u043f\u043e\u0432\u0435\u0434\u0435\u043d\u0438\u0438 \u043e\u0441\u043d\u043e\u0432\u0430\u043d \u044d\u0444\u0444\u0435\u043a\u0442 \u043f\u043e\u0433\u043b\u043e\u0449\u0435\u043d\u0438\u044f \u0431\u043e\u043d\u0443\u0441\u0430 \u00ab\u0433\u0443\u0431\u044b\u00bb, \u0447\u0442\u043e \u043f\u043e\u0437\u0432\u043e\u043b\u0438\u043b\u043e \u0438\u0437\u0431\u0435\u0436\u0430\u0442\u044c \u0438\u043c\u043f\u043e\u0440\u0442\u0430 \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0439 \u0432\u043d\u0435\u0448\u043d\u0435\u0439 \u043c\u043e\u0434\u0435\u043b\u0438.
  Glitch-\u044d\u0444\u0444\u0435\u043a\u0442 (\u0438\u043b\u0438 \u044d\u0444\u0444\u0435\u043a\u0442 \u0441\u043b\u043e\u043c\u0430\u043d\u043d\u043e\u0433\u043e \u0442\u0435\u043b\u0435\u0432\u0438\u0437\u043e\u0440\u0430), \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u044b\u0439 \u0434\u043b\u044f \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 \u043a\u043e\u043d\u0446\u0430 \u0438\u0433\u0440\u044b \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u0441\u043e\u0431\u043e\u0439 \u043f\u0440\u0438\u043c\u0435\u0440 \u043f\u043e\u0441\u0442\u043f\u0440\u043e\u0446\u0435\u0441\u0441\u0438\u043d\u0433\u0430 \u0441 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435\u043c \u0448\u0435\u0439\u0434\u0435\u0440\u043e\u0432<\/a>.
  <\/p>\n
  \u0421\u043e\u0437\u0434\u0430\u0435\u043c \u044d\u0444\u0444\u0435\u043a\u0442  <\/p>\n
\u041a\u043e\u0434<\/b><\/p>\n
\n
DT.effectComposer = new THREE.EffectComposer( DT.renderer );     DT.effectComposer.addPass( new THREE.RenderPass( DT.scene, DT.splineCamera ) );     DT.effectComposer.on = false;      var badTVParams = {         mute:true,         show: true,         distortion: 3.0,         distortion2: 1.0,         speed: 0.3,         rollSpeed: 0.1     }          var badTVPass = new THREE.ShaderPass( THREE.BadTVShader );     badTVPass.on = false;     badTVPass.renderToScreen = true;     DT.effectComposer.addPass(badTVPass); <\/code><\/pre>\n<\/div>\n<\/div>\n
  \u0418 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043c \u0435\u0433\u043e \u043a\u0430\u0436\u0434\u044b\u0439 \u043a\u0430\u0434\u0440  <\/p>\n
\u041a\u043e\u0434<\/b><\/p>\n
\n
 DT.$document.on('update', function (e, data) {         if (DT.effectComposer.on) {             badTVPass.uniforms[ "distortion" ].value = badTVParams.distortion;             badTVPass.uniforms[ "distortion2" ].value = badTVParams.distortion2;             badTVPass.uniforms[ "speed" ].value = badTVParams.speed;             badTVPass.uniforms[ "rollSpeed" ].value = badTVParams.rollSpeed;             DT.effectComposer.render();                 badTVParams.distortion+=0.15;                 badTVParams.distortion2+=0.05;                 badTVParams.speed+=0.015;                 badTVParams.rollSpeed+=0.005;         };     }); <\/code><\/pre>\n<\/div>\n<\/div>\n
  \u042d\u0444\u0444\u0435\u043a\u0442 \u0432\u043a\u043b\u044e\u0447\u0430\u0435\u0442\u0441\u044f \u043f\u043e\u0441\u043b\u0435 \u0432\u043e\u0437\u043d\u0438\u043a\u043d\u043e\u0432\u0435\u043d\u0438\u044f \u0441\u043e\u0431\u044b\u0442\u0438\u044f \u2018gameOver\u2019<\/code>  <\/p>\n
\u041a\u043e\u0434<\/b><\/p>\n
\n
 DT.$document.on('gameOver', function (e, data) {         DT.effectComposer.on = true;     }); <\/code><\/pre>\n<\/div>\n<\/div>\n
  \u0418 \u0441\u0431\u0440\u0430\u0441\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u043f\u0440\u0438 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0435\u043c \u0441\u043e\u0431\u044b\u0442\u0438\u0438  <\/p>\n
\u041a\u043e\u0434<\/b><\/p>\n
\n
 DT.$document.on('resetGame', function (e, data) {         DT.effectComposer.on = false;         badTVParams = {             distortion: 3.0,             distortion2: 1.0,             speed: 0.3,             rollSpeed: 0.1         }     }); <\/code><\/pre>\n<\/div>\n<\/div>\n
  \u0418\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 \u043f\u043e\u0441\u0442\u043f\u0440\u043e\u0446\u0435\u0441\u0441\u0438\u043d\u0433\u0430 \u0437\u043d\u0430\u0447\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u0443\u0432\u0435\u043b\u0438\u0447\u0438\u0432\u0430\u0435\u0442 \u0432\u0440\u0435\u043c\u044f \u043e\u0442\u0440\u0438\u0441\u043e\u0432\u043a\u0438 \u043a\u0430\u0434\u0440\u0430, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u043f\u043e\u0441\u0442\u043f\u0440\u043e\u0446\u0435\u0441\u0441\u0438\u043d\u0433 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u043d\u0435\u043f\u0440\u043e\u0434\u043e\u043b\u0436\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0435 \u0432\u0440\u0435\u043c\u044f \u0438 \u0432 \u043a\u043e\u043d\u0446\u0435 \u0438\u0433\u0440\u044b.<\/p>\n
\u0412\u0438\u0437\u0443\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f \u043c\u0443\u0437\u044b\u043a\u0438<\/h5>\n
  \u041c\u0443\u0437\u044b\u043a\u0430 \u0432\u0438\u0437\u0443\u0430\u043b\u0438\u0437\u0438\u0440\u0443\u0435\u0442\u0441\u044f \u043f\u0443\u043b\u044c\u0441\u0430\u0446\u0438\u0435\u0439 \u0447\u0430\u0441\u0442\u0438\u0446 (\u043f\u044b\u043b\u0438), \u043d\u0430\u0445\u043e\u0434\u044f\u0449\u0438\u0445\u0441\u044f \u0432 \u0438\u0433\u0440\u043e\u0432\u043e\u043c \u043f\u0440\u043e\u0441\u0442\u0440\u0430\u043d\u0441\u0442\u0432\u0435. <\/p>\n
  \u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u0431\u044b\u043b\u0430 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0430 \u0436\u0435\u043b\u0430\u0435\u043c\u0430\u044f \u0447\u0430\u0441\u0442\u043e\u0442\u0430 \u0432\u0438\u0437\u0443\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438. \u0423\u0440\u043e\u0432\u0435\u043d\u044c \u043f\u0440\u0438\u0441\u0443\u0442\u0441\u0442\u0432\u0438\u044f \u0437\u0432\u0443\u043a\u0430 \u043d\u0443\u0436\u043d\u043e\u0439 \u0447\u0430\u0441\u0442\u043e\u0442\u044b (DT.audio.valueAudio<\/code>) \u0432 \u0442\u0435\u043a\u0443\u0449\u0438\u0439 \u043c\u043e\u043c\u0435\u043d\u0442 \u0432 \u0431\u0443\u0444\u0435\u0440\u0435 \u0434\u043b\u044f \u0432\u0438\u0437\u0443\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u0442\u0441\u044f \u0442\u0430\u043a  <\/p>\n
\u041a\u043e\u0434<\/b><\/p>\n
\n
var getFrequencyValue = function(frequency, bufferIndex) {         \tif (!DT.isAudioCtxSupp) return;         \tvar nyquist = DT.audio.context.sampleRate\/2,                 index = Math.round(frequency\/nyquist * freqDomain[bufferIndex].length);         \treturn freqDomain[bufferIndex][index];     \t};   var visualize = function(index) {         \tif (!DT.isAudioCtxSupp) return;             freqDomain[index] = new Uint8Array(analysers[index].frequencyBinCount);             analysers[index].getByteFrequencyData(freqDomain[index]);             DT.audio.valueAudio = getFrequencyValue(DT.audio.frequency[index], index);     \t}; <\/code><\/pre>\n<\/div>\n<\/div>\n
  \u0417\u043d\u0430\u0447\u0435\u043d\u0438\u0435 DT.audio.valueAudio<\/code> \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0434\u043b\u044f \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u044f \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u043f\u0440\u043e\u0437\u0440\u0430\u0447\u043d\u043e\u0441\u0442\u0438 \u0447\u0430\u0441\u0442\u0438\u0446:  <\/p>\n
\u041a\u043e\u0434<\/b><\/p>\n
\n
DT.$document.on('update', function (e, data) {         DT.dust.updateMaterial({             isFun: DT.player.isFun,             valueAudio: DT.audio.valueAudio,             color: DT.player.sphere.material.color         });     }); <\/code><\/pre>\n<\/div>\n<\/div>\n
  \u0421\u0430\u043c \u043c\u0435\u0442\u043e\u0434 updateMaterial<\/code>:  <\/p>\n
\u041a\u043e\u0434<\/b><\/p>\n
\n
DT.Dust.prototype.updateMaterial = function (options) {         if (!this.material.visible) {             this.material.visible = true;         }         this.material.color = options.isFun ? options.color : new THREE.Color().setRGB(1,0,0);         this.material.opacity = 0.5 + options.valueAudio\/255;         return this;     }; <\/code><\/pre>\n<\/div>\n<\/div>\n
  \u041f\u043e\u0434\u0440\u043e\u0431\u043d\u0435\u0435 \u043e WebAudio API \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u0447\u0438\u0442\u0430\u0442\u044c \u0437\u0434\u0435\u0441\u044c<\/a>.<\/p>\n
\u0410\u043d\u0438\u043c\u0430\u0446\u0438\u044f favicon<\/h5>\n
  Favicon \u0432 digital trip \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u0441\u043e\u0431\u043e\u0439 \u0447\u0435\u0440\u043d\u043e-\u0431\u0435\u043b\u043e\u0435 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u043a\u043e\u0442\u0430. 
  \u0412 \u0440\u0435\u0436\u0438\u043c\u0435 \u0437\u0430\u043c\u0435\u0434\u043b\u0435\u043d\u0438\u044f (\u0440\u0435\u0436\u0438\u043c \u043a\u043e\u0442\u0438\u043a\u0430) \u0438\u043a\u043e\u043d\u043a\u0430 \u043d\u0430\u0447\u0438\u043d\u0430\u0435\u0442 \u043c\u0435\u043d\u044f\u0442\u044c \u0446\u0432\u0435\u0442.
  \u0415\u0441\u043b\u0438 \u0432 Firefox \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u0441\u0442\u0430\u0432\u0438\u0442\u044c  <\/p>\n
<link rel="icon" type="image\/gif" href="fav.gif"> <\/code><\/pre>\n
  \u0442\u043e \u0432 Chrome \u0442\u0430\u043a\u043e\u0439 \u0441\u043f\u043e\u0441\u043e\u0431 \u043d\u0435 \u043f\u0440\u043e\u0439\u0434\u0435\u0442. \u0414\u043b\u044f Chrome \u0431\u044b\u043b\u0430 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0430 \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u0430\u044f \u043f\u043e\u0434\u043c\u0435\u043d\u0430 png-\u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f favicon.
  \u041e\u0431\u0449\u0430\u044f \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u0442\u0430\u043a:<\/p>\n
\u041a\u043e\u0434<\/b><\/p>\n
\n
var favicon = document.getElementsByTagName('link')[1],     \tgiffav = document.createElement('link'),     \thead = document.getElementsByTagName('head')[0],     \tisChrome = navigator.userAgent.indexOf('Chrome') !== -1;       giffav.setAttribute('rel', 'icon');     giffav.setAttribute('type', 'image\/gif');     giffav.setAttribute('href', 'img\/fav.gif');       DT.$document.on('update', function (e, data) {     \tif (isChrome && DT.player.isFun && DT.animate.id % 10 === 0) favicon.setAttribute('href', 'img\/' + (DT.animate.id % 18 + 1) + '.png'); \t});     DT.$document.on('showFun', function (e, data) {     \tif (!data.isFun) {    \t     if (isChrome) {                 favicon.setAttribute('href', 'img\/0.png');         \t} else {                 $(giffav).remove();                 head.appendChild(favicon);         \t}     \t} else {         \tif (!isChrome) {             \t$(favicon).remove();                 head.appendChild(giffav);         \t}     \t} \t}); <\/code><\/pre>\n<\/div>\n<\/div>\n
  \u2018update\u2019<\/code> \u2013 \u0441\u043e\u0431\u044b\u0442\u0438\u0435 \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u044f \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u043e\u0431\u044a\u0435\u043a\u0442\u043e\u0432, \u2018showFun\u2019<\/code> \u2013 \u0441\u043e\u0431\u044b\u0442\u0438\u0435 \u043e \u043d\u0430\u0447\u0430\u043b\u0435 \u0440\u0435\u0436\u0438\u043c\u0430 \u043a\u043e\u0442\u0438\u043a\u0430 (\u0437\u0430\u043c\u0435\u0434\u043b\u0435\u043d\u0438\u044f), DT.player.isFun<\/code> \u2014 \u0441\u043e\u0442\u043e\u044f\u043d\u0438\u0435 \u0440\u0435\u0436\u0438\u043c\u0430 \u043a\u043e\u0442\u0438\u043a\u0430, DT.animate.id<\/code> \u2013 \u043d\u043e\u043c\u0435\u0440 \u0442\u0435\u043a\u0443\u0449\u0435\u0433\u043e \u0444\u0440\u0435\u0439\u043c\u0430 (\u043a\u0430\u0434\u0440\u0430). \u0412\u0441\u0435\u0433\u043e \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u044b\u0445 \u0432\u0430\u0440\u0438\u0430\u043d\u0442\u043e\u0432 favicon \u2014 19. \u041a \u0441\u043e\u0436\u0430\u043b\u0435\u043d\u0438\u044e, \u0432 Safari \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 favicon \u043d\u0435\u0442.<\/p>\n
\u041c\u043e\u0431\u0438\u043b\u044c\u043d\u044b\u0439 \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u043b\u0435\u0440<\/h4>\n
  \u0412 \u0438\u0433\u0440\u0435 \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u043d\u0430 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u043c\u043e\u0431\u0438\u043b\u044c\u043d\u044b\u043c \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432\u043e\u043c.
  \u0414\u043b\u044f \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u044f \u043c\u043e\u0431\u0438\u043b\u044c\u043d\u043e\u0433\u043e \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432\u0430 \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u043b\u0435\u0440\u0430 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u043f\u0435\u0440\u0435\u0439\u0442\u0438 \u043f\u043e \u0441\u0441\u044b\u043b\u043a\u0435 \u0438\u043b\u0438 \u0432\u043e\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f QR \u043a\u043e\u0434\u043e\u043c, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0433\u0435\u043d\u0435\u0440\u0438\u0440\u0443\u0435\u0442\u0441\u044f \u043f\u043b\u0430\u0433\u0438\u043d\u043e\u043c<\/a>.<\/p>\n
  \u0423\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u043e\u0441\u0443\u0449\u0435\u0441\u0442\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043f\u0440\u0438 \u043f\u043e\u043c\u043e\u0449\u0438 \u0433\u0438\u0440\u043e\u0441\u043a\u043e\u043f\u0430 \u0438 \u0441\u043e\u0431\u044b\u0442\u0438\u044f \u2018deviceOrientation\u2019<\/code>. \u0412 \u0441\u043b\u0443\u0447\u0430\u0435 \u043e\u0442\u0441\u0443\u0442\u0441\u0442\u0432\u0438\u044f \u0433\u0438\u0440\u043e\u0441\u043a\u043e\u043f\u0430 \u0438\u043b\u0438 \u0434\u043e\u0441\u0442\u0443\u043f\u0430 \u043a \u043d\u0435\u043c\u0443 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u043d\u0430\u0436\u0430\u0442\u0438\u0435\u043c \u043d\u0430 \u043a\u043d\u043e\u043f\u043a\u0438 \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f.<\/p>\n
  Fallback \u0438 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a:  <\/p>\n
\u041a\u043e\u0434<\/b><\/p>\n
\n
\/\/ Technique from Juriy Zaytsev \t\/\/ http:\/\/thinkweb2.com\/projects\/prototype\/detecting-event-support-without-browser-sniffing\/ \tvar eventSupported = function( eventName ) {     \tvar el = document.createElement("div");     \teventName = "on" + eventName;     \tvar isSupported = (eventName in el);     \tif ( !isSupported ) {             el.setAttribute(eventName, "return;");             isSupported = typeof el[eventName] === "function";     \t}     \tel = null;     \treturn isSupported; \t}; \t\/\/ device orientation \tfunction orientationTest (event) {     \tif (!turned && event.gamma) turned = true;         window.removeEventListener('deviceorientation', orientationTest, false);         window.removeEventListener('MozOrientation', orientationTest, false); \t}     window.addEventListener('deviceorientation', orientationTest, false);     window.addEventListener('MozOrientation', orientationTest, false);     setTimeout(function () {     \tif (!turned) {             $("#btnLeft").on('touchstart',function () {                 socket.emit("click", {"click":"toTheLeft"});         \t});             $("#btnRight").on('touchstart',function () {                 socket.emit("click", {"click":"toTheRight"});         \t});             $status.html("push buttons to control");     \t} else {             $status.html("tilt your device to control");     \t}     \tif (!eventSupported('touchstart')) {             $status.html("sorry your device not supported");     \t} \t}, 1000); <\/code><\/pre>\n<\/div>\n<\/div>\n
  \u041f\u0440\u043e\u0432\u0435\u0440\u043a\u0430 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0438 'deviceOrientation'<\/code> \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u043d\u0430 \u0447\u0435\u0440\u0435\u0437 setTimeout<\/code>, \u0430 \u043d\u0435 \u0430\u043d\u0430\u043b\u043e\u0433\u0438\u0447\u043d\u043e eventSupported<\/code>, \u0442\u0430\u043a \u043a\u0430\u043a \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u044e\u0442 \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432\u0430 (\u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, HTC One V), \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u044e\u0442 'deviceOrientation'<\/code> \u043d\u043e\u043c\u0438\u043d\u0430\u043b\u044c\u043d\u043e, \u043d\u043e \u0441\u0430\u043c\u043e \u0441\u043e\u0431\u044b\u0442\u0438\u0435 \u043d\u0435 \u0432\u043e\u0437\u043d\u0438\u043a\u0430\u0435\u0442. \u0424\u0430\u043a\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u043c\u044b \u0432 \u0442\u0435\u0447\u0435\u043d\u0438\u0435 \u043a\u0430\u043a\u043e\u0433\u043e-\u0442\u043e \u0438\u043d\u0442\u0435\u0440\u0432\u0430\u043b\u0430 \u0432\u0440\u0435\u043c\u0435\u043d\u0438 \u0436\u0434\u0435\u043c \u0432\u043e\u0437\u043d\u0438\u043a\u043d\u043e\u0432\u0435\u043d\u0438\u044f \u0441\u043e\u0431\u044b\u0442\u0438\u044f (\u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u0442\u043e\u0447\u043d\u043e \u0434\u043e\u043b\u0436\u043d\u043e \u0432\u043e\u0437\u043d\u0438\u043a\u043d\u0443\u0442\u044c), \u0438 \u0435\u0441\u043b\u0438 \u043e\u043d\u043e \u043d\u0435 \u0432\u043e\u0437\u043d\u0438\u043a\u0430\u0435\u0442, \u0434\u0435\u043b\u0430\u0435\u043c \u0432\u044b\u0432\u043e\u0434, \u0447\u0442\u043e \u0441\u043e\u0431\u044b\u0442\u0438\u0435 \u043d\u0435 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442\u0441\u044f. \u0422\u0430\u043a\u0430\u044f \u043f\u0440\u043e\u0432\u0435\u0440\u043a\u0430 \u0444\u0430\u043a\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0445\u0430\u043a\u043e\u043c.<\/p>\n
  \u0414\u043b\u044f \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u0442\u0435\u043b\u0435\u0444\u043e\u043d\u043e\u0432 (\u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440 HTC c Windows Phone) \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u044b\u0439 \u0431\u0440\u0430\u0443\u0437\u0435\u0440 (mobile IE) \u043d\u0435 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442 \u0441\u043e\u0431\u044b\u0442\u0438\u0435 'touchstart'<\/code>, \u043d\u043e \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442 \u0431\u043e\u043b\u0435\u0435 \u0432\u044b\u0441\u043e\u043a\u043e\u0443\u0440\u043e\u0432\u043d\u0435\u0432\u043e\u0435 \u0441\u043e\u0431\u044b\u0442\u0438\u0435 \u2018click\u2019<\/code>. \u041c\u044b \u043e\u0442\u043a\u0430\u0437\u0430\u043b\u0438\u0441\u044c \u043e\u0442 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0438 \u0442\u0430\u043a\u0438\u0445 \u0434\u0435\u0432\u0430\u0439\u0441\u043e\u0432, \u0442\u0430\u043a \u043a\u0430\u043a \u0432\u0440\u0435\u043c\u044f \u043e\u0442\u043a\u043b\u0438\u043a\u0430 \u043f\u0440\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0438 \u0441\u043e\u0431\u044b\u0442\u0438\u044f \u2018click\u2019<\/code> (300 \u043c\u0441) \u043d\u0430\u043c\u043d\u043e\u0433\u043e \u0431\u043e\u043b\u044c\u0448\u0435, \u0447\u0435\u043c \u0443 'touchstart'<\/code> \u0438 \u043e\u0431\u0435\u0441\u043f\u0435\u0447\u0438\u0442\u044c \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u044b\u0439 \u0443\u0440\u043e\u0432\u0435\u043d\u044c \u043e\u0442\u043a\u043b\u0438\u043a\u0430 \u0434\u043b\u044f \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u044f \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0442\u0430\u043a\u0438\u0445 \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432 \u043d\u0435 \u0443\u0434\u0430\u0435\u0442\u0441\u044f. <\/p>\n
  \u041a\u0441\u0442\u0430\u0442\u0438, \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0438 \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u043c\u043e\u0434\u0435\u043b\u0435\u0439 Macbook Pro c HDD \u043c\u043e\u0433\u0443\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0441\u0432\u043e\u0439 \u043d\u043e\u0443\u0442\u0431\u0443\u043a \u0432 \u0442\u0430\u043a\u043e\u043c \u0440\u0435\u0436\u0438\u043c\u0435, \u0442\u0430\u043a \u043a\u0430\u043a \u0432 \u043d\u0435\u043c \u0435\u0441\u0442\u044c \u0433\u0438\u0440\u043e\u0441\u043a\u043e\u043f.<\/p>\n
  \u0414\u043b\u044f \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0435\u0439 \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432 \u0441 \u041e\u0421 Android 4.0 \u0438 \u0432\u044b\u0448\u0435 \u0435\u0441\u0442\u044c \u043d\u0435\u0431\u043e\u043b\u044c\u0448\u043e\u0439 \u0431\u043e\u043d\u0443\u0441 \u2014 \u043e\u0431\u0440\u0430\u0442\u043d\u044b\u0439 \u043e\u0442\u043a\u043b\u0438\u043a \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u043b\u0435\u0440\u0430 \u0432 \u0432\u0438\u0434\u0435 \u0432\u0438\u0431\u0440\u0430\u0446\u0438\u0438, \u0435\u0441\u043b\u0438 \u0441\u0442\u043e\u043b\u043a\u043d\u0443\u0442\u044c\u0441\u044f \u0441 \u043a\u0430\u043c\u043d\u0435\u043c (\u0432\u0438\u0431\u0440\u0430\u0446\u0438\u044f 100 \u043c\u0441) \u0438\u043b\u0438 \u043f\u043e\u0434\u043e\u0431\u0440\u0430\u0442\u044c \u043c\u043e\u043d\u0435\u0442\u043a\u0443 (\u0432\u0438\u0431\u0440\u0430\u0446\u0438\u044f 10 \u043c\u0441). \u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f Vibration API (\u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u043d\u044b\u0439 \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u044b\u0439 \u0431\u0440\u0430\u0443\u0437\u0435\u0440, \u043c\u043e\u0431\u0438\u043b\u044c\u043d\u044b\u0439 Chrome \u0438\u043b\u0438 Firefox). \u041f\u043e\u0434\u0440\u043e\u0431\u043d\u0435\u0435 \u043e Vibration API \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u0447\u0438\u0442\u0430\u0442\u044c \u0437\u0434\u0435\u0441\u044c<\/a>.<\/p>\n
  \u041f\u0440\u0438 \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0438 \u043d\u0430\u043a\u043b\u043e\u043d\u043e\u043c \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432\u0430 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u043c\u043e\u0436\u0435\u0442 \u0434\u043e\u043b\u0433\u043e\u0435 \u0432\u0440\u0435\u043c\u044f \u043d\u0435 \u043a\u0430\u0441\u0430\u0442\u044c\u0441\u044f \u044d\u043a\u0440\u0430\u043d\u0430, \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432\u043e \u0431\u043b\u043e\u043a\u0438\u0440\u0443\u0435\u0442\u0441\u044f, \u044d\u043a\u0440\u0430\u043d \u0433\u0430\u0441\u043d\u0435\u0442 \u0438 \u0431\u0440\u0430\u0443\u0437\u0435\u0440 \u043f\u0435\u0440\u0435\u0441\u0442\u0430\u0435\u0442 \u043e\u0442\u043f\u0440\u0430\u0432\u043b\u044f\u0442\u044c \u0434\u0430\u043d\u043d\u044b\u0435 \u043e\u0442 \u0433\u0438\u0440\u043e\u0441\u043a\u043e\u043f\u0430. \u0414\u043b\u044f \u043f\u0440\u0435\u0434\u043e\u0442\u0432\u0440\u0430\u0449\u0435\u043d\u0438\u044f \u0442\u0430\u043a\u043e\u0433\u043e \u043f\u043e\u0432\u0435\u0434\u0435\u043d\u0438\u044f \u0431\u044b\u043b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d \u0445\u0430\u043a, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u0441\u043e\u0431\u043e\u0439 \u0430\u0443\u0434\u0438\u043e\u043f\u0435\u0442\u043b\u044e: 10-\u0441\u0435\u043a\u0443\u043d\u0434\u043d\u044b\u0439 \u0431\u0435\u0437\u0437\u0432\u0443\u0447\u043d\u044b\u0439 \u0442\u0440\u0435\u043a, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u0440\u043e\u0438\u0433\u0440\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u0446\u0438\u043a\u043b\u0438\u0447\u043d\u043e \u0438 \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0435\u0442\u0441\u044f \u043f\u0440\u0438 \u043d\u0430\u0436\u0430\u0442\u0438\u0438 \u043a\u043d\u043e\u043f\u043e\u043a: \u0441\u0442\u0430\u0440\u0442, \u0440\u0435\u0441\u0442\u0430\u0440\u0442, \u043f\u0430\u0443\u0437\u0430.<\/p>\n
<audio id="audioloop" src="..\/sounds\/loop.mp3" onended="this.play();" autobuffer><\/audio> <\/code><\/pre>\n
  <\/p>\n
$('#btnSphere').on('touchstart',function () {                 socket.emit('click', {'click':'pause'});                 $('#audioloop').trigger('play');         \t}); <\/code><\/pre>\n
  \u041f\u0440\u0438 \u044d\u0442\u043e\u043c \u043d\u0430 \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432\u0430\u0445 \u0441 \u041e\u0421 Android \u0430\u0443\u0434\u0438\u043e\u043f\u0435\u0442\u043b\u044f \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c 1-\u0441\u0435\u043a\u0443\u043d\u0434\u043d\u043e\u0439, \u0430 \u043d\u0430 \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432\u0430\u0445 \u0441 iOS \u0442\u0440\u0435\u0431\u0443\u0435\u0442\u0441\u044f \u0431\u043e\u043b\u0435\u0435 \u0434\u043b\u0438\u043d\u043d\u044b\u0439 \u0442\u0440\u0435\u043a. \u0412 iOS \u0431\u0440\u0430\u0443\u0437\u0435\u0440 Safari \u043d\u0435 \u043f\u0440\u043e\u0438\u0433\u0440\u044b\u0432\u0430\u0435\u0442 \u0442\u0440\u0435\u043a \u0431\u0435\u0441\u043a\u043e\u043d\u0435\u0447\u043d\u043e, \u0447\u0438\u0441\u043b\u043e \u0446\u0438\u043a\u043b\u043e\u0432 \u2014 \u043e\u043a\u043e\u043b\u043e 100, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u0431\u044b\u043b\u0430 \u0432\u044b\u0431\u0440\u0430\u043d\u0430 \u0434\u043b\u0438\u043d\u0430 \u0442\u0440\u0435\u043a\u0430 \u0432 10 \u0441\u0435\u043a\u0443\u043d\u0434.<\/p>\n
\u0423\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u0432\u0435\u0431-\u043a\u0430\u043c\u0435\u0440\u043e\u0439<\/h4>\n
  \u0423\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u0432\u0435\u0431-\u043a\u0430\u043c\u0435\u0440\u043e\u0439 \u043e\u0441\u043d\u043e\u0432\u0430\u043d\u043e \u043d\u0430 \u043c\u0435\u0442\u043e\u0434\u0435 getUserMedia()<\/code>.
  \u041c\u044b \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0435\u043b\u0438 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043f\u0440\u0438\u043c\u0435\u0440\u043e\u0432 \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u043f\u0440\u0438 \u043f\u043e\u043c\u043e\u0449\u0438 \u0432\u0435\u0431-\u043a\u0430\u043c\u0435\u0440\u044b. \u041e\u0434\u0438\u043d \u0438\u0437 \u0432\u0430\u0440\u0438\u0430\u043d\u0442\u043e\u0432 \u2014 \u043d\u0430\u0436\u0430\u0442\u0438\u0435 \u0432\u0438\u0440\u0442\u0443\u0430\u043b\u044c\u043d\u044b\u0445 \u043a\u043b\u0430\u0432\u0438\u0448, \u043a\u0430\u043a \u0432 \u044d\u0442\u043e\u043c \u043f\u0440\u0438\u043c\u0435\u0440\u0435<\/a>.
   <\/p>\n
  \u041e\u0442 \u043d\u0435\u0433\u043e \u043c\u044b \u043e\u0442\u043a\u0430\u0437\u0430\u043b\u0438\u0441\u044c, \u0442\u0430\u043a \u043a\u0430\u043a \u043e\u043d \u043e\u043a\u0430\u0437\u0430\u043b\u0441\u044f \u043d\u0435\u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u0442\u043e\u0447\u043d\u044b\u043c.<\/p>\n
  \u0414\u0440\u0443\u0433\u043e\u0439 \u0432\u0430\u0440\u0438\u0430\u043d\u0442 \u2014 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0443\u0433\u043e\u043b \u043d\u0430\u043a\u043b\u043e\u043d\u0430 \u0433\u043e\u043b\u043e\u0432\u044b \u0438 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0443 headtrackr.js<\/a>. \u041e\u043d \u043e\u043a\u0430\u0437\u0430\u043b\u0441\u044f \u0431\u043e\u043b\u0435\u0435 \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u044b\u043c \u0438 \u043f\u043e\u043c\u043e\u0433\u0430\u043b \u0440\u0430\u0437\u043c\u044f\u0442\u044c \u0448\u0435\u044e \u0438 \u0441\u043d\u044f\u0442\u044c \u043d\u0430\u043f\u0440\u044f\u0436\u0435\u043d\u0438\u0435, \u043e\u0434\u043d\u0430\u043a\u043e \u0443\u0433\u043e\u043b \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u043b\u0441\u044f \u043d\u0435 \u0432\u0441\u0435\u0433\u0434\u0430 \u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u043e. \u0412 \u0438\u0442\u043e\u0433\u0435 \u0434\u043b\u044f \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u043f\u0440\u0438 \u043f\u043e\u043c\u043e\u0449\u0438 \u0432\u0435\u0431-\u043a\u0430\u043c\u0435\u0440\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u043f\u043e\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0433\u043e\u043b\u043e\u0432\u044b \u0438 \u0435\u0435 \u0434\u0432\u0438\u0436\u0435\u043d\u0438\u0435 \u043e\u0442\u043d\u043e\u0441\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u0441\u0435\u0440\u0435\u0434\u0438\u043d\u044b \u044d\u043a\u0440\u0430\u043d\u0430 (\u0442\u0430\u043a\u0436\u0435 \u043f\u0440\u0438 \u043f\u043e\u043c\u043e\u0449\u0438 headtrackr.js). <\/p>\n
  \u0422\u0430\u043a\u043e\u0439 \u0441\u043f\u043e\u0441\u043e\u0431 \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u043d\u0430 \u043f\u043e\u0440\u044f\u0434\u043e\u043a \u0441\u043b\u043e\u0436\u043d\u0435\u0435 \u043a\u043b\u0430\u0432\u0438\u0430\u0442\u0443\u0440\u044b \u0438\u043b\u0438 \u043c\u043e\u0431\u0438\u043b\u044c\u043d\u043e\u0433\u043e, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u0441\u043a\u043e\u0440\u043e\u0441\u0442\u044c \u0438\u0433\u0440\u044b \u0432 \u0440\u0435\u0436\u0438\u043c\u0435 \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u0432\u0435\u0431-\u043a\u0430\u043c\u0435\u0440\u043e\u0439 \u0441\u043d\u0438\u0436\u0435\u043d\u0430.<\/p>\n
Back-end<\/h4>\n
  \u0421\u0435\u0440\u0432\u0435\u0440 \u0438\u0433\u0440\u044b \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u043d\u0430 node.js. \u0418\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442\u0441\u044f \u043c\u043e\u0434\u0443\u043b\u0438 express, socket.io, mongoose, node-dogecoin \u0438 hookshot.<\/p>\n
  \u0422\u0443\u0442 \u0432\u0441\u0435 \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u0442\u0440\u0438\u0432\u0438\u0430\u043b\u044c\u043d\u043e: socket.io \u043e\u0441\u0443\u0449\u0435\u0441\u0442\u0432\u043b\u044f\u0435\u0442 \u0442\u0440\u0430\u043d\u0441\u043f\u043e\u0440\u0442, express o\u0442\u0432\u0435\u0447\u0430\u0435\u0442 \u0437\u0430 \u043c\u0430\u0440\u0448\u0440\u0443\u0442\u044b \u0438 \u0441\u0442\u0430\u0442\u0438\u043a\u0443, \u0430 mongoose \u0441\u043e\u0445\u0440\u0430\u043d\u044f\u0435\u0442 \u043a\u043b\u0438\u0435\u043d\u0442\u043e\u0432 \u0432 \u0431\u0430\u0437\u0443 \u0434\u0430\u043d\u043d\u044b\u0445. Hookshot \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d \u0434\u043b\u044f \u0431\u044b\u0441\u0442\u0440\u043e\u0433\u043e \u0440\u0430\u0437\u0432\u043e\u0440\u0430\u0447\u0438\u0432\u0430\u043d\u0438\u044f \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0439 \u043d\u0430 VPS.<\/p>\n
app.use('\/webhook', hookshot('refs\/heads\/master', 'git pull')); <\/code><\/pre>\n
  \u041d\u0430\u0438\u0431\u043e\u043b\u0435\u0435 \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u044b\u043c \u0432 back-end\u2019\u0435 \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0432\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0435 \u0441 dogecoin \u0434\u0435\u043c\u043e\u043d\u043e\u043c, \u0440\u0430\u0437\u0432\u0435\u0440\u043d\u0443\u0442\u044b\u043c \u043d\u0430 \u044d\u0442\u043e\u043c \u0436\u0435 \u0441\u0435\u0440\u0432\u0435\u0440\u0435. \u042d\u0442\u043e \u043f\u043e\u043b\u043d\u043e\u0446\u0435\u043d\u043d\u044b\u0439 dogecoin \u043a\u043e\u0448\u0435\u043b\u0435\u043a, \u0432\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0435 \u0441 \u043a\u043e\u0442\u043e\u0440\u044b\u043c \u043e\u0441\u0443\u0449\u0435\u0441\u0442\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043f\u0440\u0438 \u043f\u043e\u043c\u043e\u0449\u0438 \u043c\u043e\u0434\u0443\u043b\u044f node-dogecoin \u043f\u0440\u0438\u043c\u0435\u0440\u043d\u043e \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c:<\/p>\n
dogecoin.exec('getbalance', function(err, balance) { \tconsole.log(err, balance); }); <\/code><\/pre>\n
  \u041a\u0440\u043e\u043c\u0435 \u0442\u043e\u0433\u043e, \u0441\u0435\u0440\u0432\u0435\u0440 \u043e\u0441\u0443\u0449\u0435\u0441\u0442\u0432\u043b\u044f\u0435\u0442 \u043f\u0440\u043e\u0432\u0435\u0440\u043a\u0443 \u043a\u043b\u0438\u0435\u043d\u0442\u0430 \u043d\u0430 \u043f\u0440\u0435\u0434\u043c\u0435\u0442 \u043c\u043e\u0448\u0435\u043d\u043d\u0438\u0447\u0435\u0441\u0442\u0432\u0430. \u0417\u0434\u0435\u0441\u044c \u043f\u0440\u043e\u0432\u0435\u0440\u044f\u0435\u0442\u0441\u044f \u043d\u0430\u0431\u0440\u0430\u043d\u043d\u043e\u0435 \u043a\u043b\u0438\u0435\u043d\u0442\u043e\u043c \u0447\u0438\u0441\u043b\u043e \u043c\u043e\u043d\u0435\u0442 \u0438 \u0441\u0440\u0430\u0432\u043d\u0438\u0432\u0430\u0435\u0442\u0441\u044f \u0441 \u043c\u0430\u043a\u0441\u0438\u043c\u0430\u043b\u044c\u043d\u044b\u043c \u0447\u0438\u0441\u043b\u043e\u043c \u043c\u043e\u043d\u0435\u0442, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u043c\u043e\u0436\u043d\u043e \u043d\u0430\u0431\u0440\u0430\u0442\u044c \u0437\u0430 \u0432\u0440\u0435\u043c\u044f \u0434\u0430\u043d\u043d\u043e\u0439 \u0441\u0435\u0441\u0441\u0438\u0438.<\/p>\n
\u041a\u043e\u0434<\/b><\/p>\n
\n
var checkCoins = function (timeStart, timeEnd, coinsCollect) { \tvar time = (timeEnd - timeStart)\/1000,     \tmaxCoins = calcMaxCoins(time); \t\/\/ if client recieve more coins than it may \treturn coinsCollect <= maxCoins; };   var calcMaxCoins = function (time) { \tvar speedStart = 1\/60,         acceleration = 1\/2500,     \tmaxPath = 0,     \tmaxCoins = 0,     \tt = 0.25, \/\/ coins position in the tube     \tdt = 0.004, \/\/ coins position offset     \tn = 10; \/\/ number of coins in a row   \tmaxPath = (speedStart + acceleration * Math.sqrt(time * 60)) * time;   \tmaxCoins = Math.floor(maxPath \/ (t + dt * (n - 1)) * n)\/10;     console.log('time:' + time, 'maxCoins:' + maxCoins, 'maxPath:' + maxPath); \treturn maxCoins; }; <\/code><\/pre>\n<\/div>\n<\/div>\n
  \u0422\u0430\u043a\u0436\u0435 \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u043d\u0430 \u043f\u0440\u043e\u0432\u0435\u0440\u043a\u0430 \u0447\u0438\u0441\u043b\u0430 \u043f\u043b\u0430\u0442\u0435\u0436\u0435\u0439 \u0441 \u043e\u0434\u043d\u043e\u0433\u043e IP, c \u043e\u0434\u043d\u0438\u043c UID (cookie) \u0438 \u0432\u0440\u0435\u043c\u044f \u043c\u0435\u0436\u0434\u0443 \u0434\u0432\u0443\u043c\u044f \u0431\u043b\u0438\u0436\u0430\u0439\u0448\u0438\u043c\u0438 \u0438\u0433\u0440\u0430\u043c\u0438 \u0441 \u043e\u0434\u043d\u043e\u0433\u043e IP. <\/p>\n
\u041a\u043e\u0434<\/b><\/p>\n
\n
var checkClient = function (clients, currentClient) {     console.log("Handle clients from Array[" + clients.length + "]")     var IPpaymentsCounter = 0,         UIDpaymentsCounter = 0,         IPtimeCounter = 60 * 1000,         checkup = null;      clients.forEach(function(client, i) {         if (client.clientIp === currentClient.clientIp && client.paymentRequest) {             IPpaymentsCounter += client.paymentRequest;              if (currentClient.timeEnd && currentClient.cientId !== client.cientId) {                 Math.min(IPtimeCounter, currentClient.timeEnd - client.timeEnd);             }         }         if (client.cookieUID === currentClient.cookieUID && client.paymentRequest) {             UIDpaymentsCounter += client.paymentRequest;         }         \/\/ console.log("handle client #" + i);     });     console.log('IPtimeCounter', IPtimeCounter);     if (currentClient.checkup === false ||         currentClient.maxCoinsCheck === false ||         IPpaymentsCounter > 1000 ||         UIDpaymentsCounter > 100 ||         IPtimeCounter < 20 * 1000) {         checkup = false;     } else {         checkup = true;     }     return checkup; }; <\/code><\/pre>\n<\/div>\n<\/div>\n
  \u042d\u0442\u043e \u043f\u0440\u043e\u0441\u0442\u0430\u044f \u0437\u0430\u0449\u0438\u0442\u0430, \u043e\u0441\u043d\u043e\u0432\u0430\u043d\u043d\u0430\u044f \u043d\u0430 \u043f\u0440\u0438\u043d\u0446\u0438\u043f\u0435 \u0446\u0435\u043b\u0435\u0441\u043e\u043e\u0431\u0440\u0430\u0437\u043d\u043e\u0441\u0442\u0438.<\/p>\n
\u0417\u0430\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435<\/h4>\n
  \u0412 \u044d\u0442\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0435 \u044f \u043f\u0435\u0440\u0435\u0447\u0438\u0441\u043b\u0438\u043b \u043d\u0430\u0438\u0431\u043e\u043b\u0435\u0435 \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u044b\u0435 \u043c\u043e\u043c\u0435\u043d\u0442\u044b, \u0441 \u043a\u043e\u0442\u043e\u0440\u044b\u043c\u0438 \u044f \u0441\u0442\u043e\u043b\u043a\u043d\u0443\u043b\u0441\u044f \u0432\u043e \u0432\u0440\u0435\u043c\u044f \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438. \u041d\u0430\u0434\u0435\u044e\u0441\u044c, \u044d\u0442\u0430 \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044f \u0431\u0443\u0434\u0435\u0442 \u043f\u043e\u043b\u0435\u0437\u043d\u043e\u0439.<\/p>\n
  \u0412\u0441\u044f \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0430 \u0432\u0435\u043b\u0430\u0441\u044c \u043d\u0430 GitHub, \u043a\u043e\u0434 \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c \u0437\u0434\u0435\u0441\u044c<\/a>.<\/p>\n
  \u0421\u0441\u044b\u043b\u043a\u0438: \u043f\u0440\u043e\u0435\u043a\u0442 \u043d\u0430 github<\/a>, \u043e\u043f\u0438\u0441\u0430\u043d\u0438\u0435 \u0438\u0433\u0440\u044b (\u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u0438\u0433\u0440\u0443 \u0432 \u043f\u043e\u0440\u0442\u0444\u043e\u043b\u0438\u043e), \u0438\u0433\u0440\u0430<\/a><\/p>\n
  \u0418\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u044b\u0435 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u044b \u0438 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438:  <\/p>\n