{"id":556,"date":"2023-03-11T01:15:13","date_gmt":"2023-03-10T22:15:13","guid":{"rendered":"https:\/\/notes.profidev.online\/?p=556"},"modified":"2023-03-28T23:52:56","modified_gmt":"2023-03-28T20:52:56","slug":"interaktivnoe-zvezdnoe-nebo","status":"publish","type":"post","link":"https:\/\/notes.profidev.online\/ru\/effect\/556\/","title":{"rendered":"Interactive starry sky"},"content":{"rendered":"\n<figure class=\"wp-block-video\"><video height=\"525\" style=\"aspect-ratio: 987 \/ 525;\" width=\"987\" controls src=\"https:\/\/notes.profidev.online\/wp-content\/uploads\/2023\/03\/vokoscreenng-2023-03-10_23-11-44.webm\"><\/video><\/figure>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre class=\"CodeMirror\" data-setting=\"{&quot;showPanel&quot;:true,&quot;languageLabel&quot;:&quot;language&quot;,&quot;fullScreenButton&quot;:true,&quot;copyButton&quot;:true,&quot;mode&quot;:&quot;htmlmixed&quot;,&quot;mime&quot;:&quot;text\/html&quot;,&quot;theme&quot;:&quot;cobalt&quot;,&quot;lineNumbers&quot;:true,&quot;styleActiveLine&quot;:true,&quot;lineWrapping&quot;:true,&quot;readOnly&quot;:false,&quot;fileName&quot;:&quot;&quot;,&quot;TrpContentRestriction&quot;:{&quot;restriction_type&quot;:&quot;exclude&quot;,&quot;selected_languages&quot;:[],&quot;panel_open&quot;:true},&quot;language&quot;:&quot;HTML&quot;,&quot;maxHeight&quot;:&quot;400px&quot;,&quot;modeName&quot;:&quot;html&quot;}\">&lt;div class=&quot;starfield&quot;&gt;&lt;\/div&gt;\n&lt;script src=&quot;\/\/cdnjs.cloudflare.com\/ajax\/libs\/jquery\/2.1.3\/jquery.min.js&quot;&gt;&lt;\/script&gt;\n\/\/\u0421\u043a\u0440\u0438\u043f\u0442 js \u043d\u0430\u0434\u043e \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0430\u0442\u044c \u0437\u0434\u0435\u0441\u044c\n\/\/\u0410\u0432\u0442\u043e\u0440: Stephen Scaff. @StephenScaff<\/pre><\/div>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre class=\"CodeMirror\" data-setting=\"{&quot;showPanel&quot;:true,&quot;languageLabel&quot;:&quot;language&quot;,&quot;fullScreenButton&quot;:true,&quot;copyButton&quot;:true,&quot;mode&quot;:&quot;css&quot;,&quot;mime&quot;:&quot;text\/css&quot;,&quot;theme&quot;:&quot;cobalt&quot;,&quot;lineNumbers&quot;:true,&quot;styleActiveLine&quot;:true,&quot;lineWrapping&quot;:true,&quot;readOnly&quot;:false,&quot;fileName&quot;:&quot;&quot;,&quot;TrpContentRestriction&quot;:{&quot;restriction_type&quot;:&quot;exclude&quot;,&quot;selected_languages&quot;:[],&quot;panel_open&quot;:true},&quot;language&quot;:&quot;CSS&quot;,&quot;maxHeight&quot;:&quot;400px&quot;,&quot;modeName&quot;:&quot;css&quot;}\">.starfield { height:100%; left:0; position:absolute; top:0; width:100%; z-index:0;}<\/pre><\/div>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre class=\"CodeMirror\" data-setting=\"{&quot;showPanel&quot;:true,&quot;languageLabel&quot;:&quot;language&quot;,&quot;fullScreenButton&quot;:true,&quot;copyButton&quot;:true,&quot;mode&quot;:&quot;javascript&quot;,&quot;mime&quot;:&quot;text\/javascript&quot;,&quot;theme&quot;:&quot;cobalt&quot;,&quot;lineNumbers&quot;:true,&quot;styleActiveLine&quot;:true,&quot;lineWrapping&quot;:true,&quot;readOnly&quot;:false,&quot;fileName&quot;:&quot;&quot;,&quot;TrpContentRestriction&quot;:{&quot;restriction_type&quot;:&quot;exclude&quot;,&quot;selected_languages&quot;:[],&quot;panel_open&quot;:true},&quot;language&quot;:&quot;JavaScript&quot;,&quot;maxHeight&quot;:&quot;400px&quot;,&quot;modeName&quot;:&quot;js&quot;}\">(function ($, window, document, undefined) {\n  \/\/ Plugin constructor\n  var Starfield = function (el, options) {\n    this.el = el;\n    this.$el = $(el);\n    this.options = options;\n\n    that = this;\n  };\n\n  var isPlaying;\n  var isInited = false;\n  var canCanvas = false;\n  var animId;\n\n  \/\/ http:\/\/paulirish.com\/2011\/requestanimationframe-for-smart-animating\/\n  \/\/ http:\/\/my.opera.com\/emoller\/blog\/2011\/12\/20\/requestanimationframe-for-smart-er-animating\n\n  \/\/ requestAnimationFrame polyfill by Erik M\u00f6ller. fixes from Paul Irish and Tino Zijdel\n\n  \/\/ MIT license\n\n  (function () {\n    var lastTime = 0;\n    var vendors = [&quot;ms&quot;, &quot;moz&quot;, &quot;webkit&quot;, &quot;o&quot;];\n    for (var x = 0; x &lt; vendors.length &amp;&amp; !window.requestAnimationFrame; ++x) {\n      window.requestAnimationFrame =\n        window[vendors[x] + &quot;RequestAnimationFrame&quot;];\n      window.cancelAnimationFrame =\n        window[vendors[x] + &quot;CancelAnimationFrame&quot;] ||\n        window[vendors[x] + &quot;CancelRequestAnimationFrame&quot;];\n    }\n\n    if (!window.requestAnimationFrame)\n      window.requestAnimationFrame = function (callback, element) {\n        var currTime = new Date().getTime();\n        var timeToCall = Math.max(0, 16 - (currTime - lastTime));\n        var id = window.setTimeout(function () {\n          callback(currTime + timeToCall);\n        }, timeToCall);\n        lastTime = currTime + timeToCall;\n        return id;\n      };\n\n    if (!window.cancelAnimationFrame)\n      window.cancelAnimationFrame = function (id) {\n        clearTimeout(id);\n      };\n  })();\n\n  \/\/ Plugin prototype\n  Starfield.prototype = {\n    \/\/ Default settings\n    defaults: {\n      starColor: &quot;rgba(255,255,255,1)&quot;,\n      bgColor: &quot;rgba(0,0,0,1)&quot;,\n      mouseMove: true,\n      mouseColor: &quot;rgba(0,0,0,0.2)&quot;,\n      mouseSpeed: 200,\n      fps: 15,\n      speed: 3,\n      quantity: 512,\n      ratio: 256,\n      divclass: &quot;starfield&quot;\n    },\n\n    \/\/ Resize the canvas\n    resizer: function () {\n      var oldStar = this.star;\n      var initW = this.context.canvas.width;\n      var initH = this.context.canvas.height;\n\n      this.w = this.$el.width();\n      this.h = this.$el.height();\n      this.x = Math.round(this.w \/ 2);\n      this.y = Math.round(this.h \/ 2);\n\n      \/\/ Check if the device is in portrait orientation\n      this.portrait = this.w &lt; this.h;\n\n      \/\/ Get the ratio of the old height to the new height\n      var ratX = this.w \/ initW;\n      var ratY = this.h \/ initH;\n\n      this.context.canvas.width = this.w;\n      this.context.canvas.height = this.h;\n\n      \/\/ Recalculate the position of each star proportionally to new w and h\n      for (var i = 0; i &lt; this.n; i++) {\n        this.star[i][0] = oldStar[i][0] * ratX;\n        this.star[i][1] = oldStar[i][1] * ratY;\n\n        this.star[i][3] =\n          this.x + (this.star[i][0] \/ this.star[i][2]) * this.star_ratio;\n        this.star[i][4] =\n          this.y + (this.star[i][1] \/ this.star[i][2]) * this.star_ratio;\n      }\n\n      that.context.fillStyle = that.settings.bgColor;\n      this.context.strokeStyle = this.settings.starColor;\n    },\n\n    init: function () {\n      \/\/ Get default settings\n      this.settings = $.extend({}, this.defaults, this.options);\n\n      \/\/ Query variables\n      var url = document.location.href;\n      this.n = parseInt(\n        url.indexOf(&quot;n=&quot;) != -1\n          ? url.substring(\n              url.indexOf(&quot;n=&quot;) + 2,\n              url.substring(url.indexOf(&quot;n=&quot;) + 2, url.length).indexOf(&quot;&amp;&quot;) !=\n                -1\n                ? url.indexOf(&quot;n=&quot;) +\n                    2 +\n                    url\n                      .substring(url.indexOf(&quot;n=&quot;) + 2, url.length)\n                      .indexOf(&quot;&amp;&quot;)\n                : url.length\n            )\n          : this.settings.quantity\n      );\n\n      this.flag = true;\n      this.test = true;\n      this.w = 0;\n      this.h = 0;\n      this.x = 0;\n      this.y = 0;\n      this.z = 0;\n      this.star_color_ratio = 0;\n      this.star_x_save = 0;\n      this.star_y_save = 0;\n      this.star_ratio = this.settings.ratio;\n      this.star_speed = this.settings.speed;\n      this.star_speed_save = 0;\n      this.star = new Array(this.n);\n      this.color = this.settings.starColor;\n      this.opacity = 0.1;\n\n      this.cursor_x = 0;\n      this.cursor_y = 0;\n      this.mouse_x = 0;\n      this.mouse_y = 0;\n\n      this.canvas_x = 0;\n      this.canvas_y = 0;\n      this.canvas_w = 0;\n      this.canvas_h = 0;\n\n      this.fps = this.settings.fps;\n\n      \/\/ Check for device orientation support\n      this.desktop = !navigator.userAgent.match(\n        \/(iPhone|iPod|iPad|Android|BlackBerry|BB10|IEMobile)\/\n      );\n      this.orientationSupport = window.DeviceOrientationEvent !== undefined;\n      this.portrait = null;\n\n      \/\/ Inject the canvas element\n      var canvasInit = function () {\n        that.w = that.$el.width();\n        that.h = that.$el.height();\n\n        that.initW = that.w;\n        that.initH = that.h;\n\n        that.portrait = that.w &lt; that.h;\n\n        that.wrapper = $(&quot;&lt;canvas \/&gt;&quot;).addClass(that.settings.divclass);\n\n        that.wrapper.appendTo(that.el);\n\n        that.starz = $(&quot;canvas&quot;, that.el);\n\n        if (that.starz[0].getContext) {\n          \/\/ Can canvas?\n          that.context = that.starz[0].getContext(&quot;2d&quot;);\n          canCanvas = true;\n        }\n\n        that.context.canvas.width = that.w;\n        that.context.canvas.height = that.h;\n      };\n      canvasInit();\n\n      \/\/ Create initial star array and canvas context\n      var starInit = function () {\n        \/\/ Get context for the canvas element\n        if (canCanvas) {\n          \/\/ Check for canvas drawering abilities.\n          that.x = Math.round(that.w \/ 2);\n          that.y = Math.round(that.h \/ 2);\n          that.z = (that.w + that.h) \/ 2;\n          that.star_color_ratio = 1 \/ that.z;\n          that.cursor_x = that.x;\n          that.cursor_y = that.y;\n\n          \/\/ Big bang\n          for (var i = 0; i &lt; that.n; i++) {\n            that.star[i] = new Array(5);\n\n            that.star[i][0] = Math.random() * that.w * 2 - that.x * 2;\n            that.star[i][1] = Math.random() * that.h * 2 - that.y * 2;\n            that.star[i][2] = Math.round(Math.random() * that.z);\n            that.star[i][3] = 0;\n            that.star[i][4] = 0;\n          }\n\n          \/\/ Set the colors\n          that.context.fillStyle = that.settings.bgColor;\n          that.context.strokeStyle = that.settings.starColor;\n        } else {\n          return;\n        }\n      };\n      starInit();\n\n      isInited = true;\n    },\n\n    \/\/ Iterate over every star on the field and move it slightly\n    anim: function () {\n      this.mouse_x = this.cursor_x - this.x;\n      this.mouse_y = this.cursor_y - this.y;\n      this.context.fillRect(0, 0, this.w, this.h);\n\n      for (var i = 0; i &lt; this.n; i++) {\n        this.test = true;\n        this.star_x_save = this.star[i][3];\n        this.star_y_save = this.star[i][4];\n        this.star[i][0] += this.mouse_x &gt;&gt; 4;\n\n        \/\/ X coords\n        if (this.star[i][0] &gt; this.x &lt;&lt; 1) {\n          this.star[i][0] -= this.w &lt;&lt; 1;\n          this.test = false;\n        }\n        if (this.star[i][0] &lt; -this.x &lt;&lt; 1) {\n          this.star[i][0] += this.w &lt;&lt; 1;\n          this.test = false;\n        }\n\n        \/\/ Y coords\n        this.star[i][1] += this.mouse_y &gt;&gt; 4;\n        if (this.star[i][1] &gt; this.y &lt;&lt; 1) {\n          this.star[i][1] -= this.h &lt;&lt; 1;\n          this.test = false;\n        }\n        if (this.star[i][1] &lt; -this.y &lt;&lt; 1) {\n          this.star[i][1] += this.h &lt;&lt; 1;\n          this.test = false;\n        }\n\n        \/\/ Z coords\n        this.star[i][2] -= this.star_speed;\n        if (this.star[i][2] &gt; this.z) {\n          this.star[i][2] -= this.z;\n          this.test = false;\n        }\n        if (this.star[i][2] &lt; 0) {\n          this.star[i][2] += this.z;\n          this.test = false;\n        }\n\n        this.star[i][3] =\n          this.x + (this.star[i][0] \/ this.star[i][2]) * this.star_ratio;\n        this.star[i][4] =\n          this.y + (this.star[i][1] \/ this.star[i][2]) * this.star_ratio;\n\n        if (\n          this.star_x_save &gt; 0 &amp;&amp;\n          this.star_x_save &lt; this.w &amp;&amp;\n          this.star_y_save &gt; 0 &amp;&amp;\n          this.star_y_save &lt; this.h &amp;&amp;\n          this.test\n        ) {\n          this.context.lineWidth =\n            (1 - this.star_color_ratio * this.star[i][2]) * 2;\n          this.context.beginPath();\n          this.context.moveTo(this.star_x_save, this.star_y_save);\n          this.context.lineTo(this.star[i][3], this.star[i][4]);\n          this.context.stroke();\n          this.context.closePath();\n        }\n      }\n    },\n\n    loop: function () {\n      this.anim();\n\n      animId = window.requestAnimationFrame(function () {\n        that.loop();\n      });\n    },\n\n    move: function () {\n      var doc = document.documentElement;\n\n      if (this.orientationSupport &amp;&amp; !this.desktop) {\n        \/\/$('&lt;p class=&quot;output&quot;&gt;&lt;\/p&gt;').prependTo('.content');\n        \/\/var output = document.querySelector('.output');\n        window.addEventListener(&quot;deviceorientation&quot;, handleOrientation, false);\n      } else {\n        window.addEventListener(&quot;mousemove&quot;, handleMousemove, false);\n      }\n\n      function handleOrientation(event) {\n        if (event.beta !== null &amp;&amp; event.gamma !== null) {\n          var x = event.gamma,\n            y = event.beta;\n\n          if (!that.portrait) {\n            x = event.beta * -1;\n            y = event.gamma;\n          }\n\n          that.cursor_x = that.w \/ 2 + x * 5;\n          that.cursor_y = that.h \/ 2 + y * 5;\n\n          \/*var output = document.querySelector('.output');\n\t\t\t\t\toutput.innerHTML = &quot;rotZ : &quot; + Math.round(event.alpha) + &quot;&lt;br \/&gt;\\n&quot;;\n\t\t\t\t\toutput.innerHTML += &quot;rotX: &quot; + Math.round(event.beta) + &quot;&lt;br \/&gt;\\n&quot;;\n\t\t\t\t\toutput.innerHTML += &quot;rotY: &quot; + Math.round(event.gamma) + &quot;&lt;br \/&gt;\\n&quot;;*\/\n        }\n      }\n\n      function handleMousemove(event) {\n        that.cursor_x =\n          event.pageX || event.clientX + doc.scrollLeft - doc.clientLeft;\n        that.cursor_y =\n          event.pageY || event.clientY + doc.scrollTop - doc.clientTop;\n      }\n    },\n\n    stop: function () {\n      window.cancelAnimationFrame(animId);\n\n      isPlaying = false;\n    },\n\n    \/\/ this.start this whole thing\n    start: function () {\n      \/\/ Initialize\n      if (!isInited) {\n        isInited = true;\n        this.init();\n      }\n\n      \/\/ Start the animation loop\n      if (!isPlaying) {\n        isPlaying = true;\n        this.loop();\n      }\n\n      window.addEventListener(\n        &quot;resize&quot;,\n        function () {\n          that.resizer();\n        },\n        false\n      );\n\n      window.addEventListener(\n        &quot;orientationchange&quot;,\n        function () {\n          that.resizer();\n        },\n        false\n      );\n\n      \/\/ Move stars on mouse move\n      if (this.settings.mouseMove) {\n        this.move();\n      }\n\n      return this;\n    }\n  };\n\n  Starfield.defaults = Starfield.prototype.defaults;\n\n  \/\/ Finally, the actual plugin code\n  $.fn.starfield = function (options) {\n    return this.each(function () {\n      new Starfield(this, options).start();\n    });\n  };\n\n  window.Starfield = Starfield;\n})(jQuery, window, document);\n\n$(&quot;.starfield&quot;).starfield();<\/pre><\/div>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":557,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[12],"tags":[38,17],"class_list":["post-556","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-effect","tag-canvas","tag-jquery"],"_links":{"self":[{"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/posts\/556","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/comments?post=556"}],"version-history":[{"count":0,"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/posts\/556\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/media\/557"}],"wp:attachment":[{"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/media?parent=556"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/categories?post=556"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/tags?post=556"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}