{"id":1313,"date":"2023-04-14T10:02:07","date_gmt":"2023-04-14T07:02:07","guid":{"rendered":"https:\/\/notes.profidev.online\/?p=1313"},"modified":"2023-04-14T10:02:10","modified_gmt":"2023-04-14T07:02:10","slug":"text-animation-2","status":"publish","type":"post","link":"https:\/\/notes.profidev.online\/ru\/elements\/1313\/","title":{"rendered":"Text animation"},"content":{"rendered":"\n<figure class=\"wp-block-video\"><video height=\"889\" style=\"aspect-ratio: 1643 \/ 889;\" width=\"1643\" controls src=\"https:\/\/notes.profidev.online\/wp-content\/uploads\/2023\/04\/vokoscreenng-2023-04-14_08-56-21.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;canvas id=&quot;canvas&quot;&gt;&lt;\/canvas&gt;\n  &lt;canvas id=&quot;sCanvas&quot;&gt;&lt;\/canvas&gt;<\/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;}\">\n*{\n  margin: 0;\n}\n\nbody {\n  background-color: antiquewhite\u0415\u0443\n}\ncanvas{\n  position: fixed;\n}<\/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;}\">class Circle {\n   constructor(x, y, ctx) {\n      this.x = x;\n      this.y = y;\n      this.r = 1;\n      this.ctx = ctx;\n      this.isGrowing = true;\n   }\n   growing() {\n      if (this.isGrowing) {\n         this.r++;\n      }\n   }\n   show() {\n      ctx.beginPath();\n      ctx.arc(this.x, this.y, this.r, 0, 2 * Math.PI);\n      ctx.stroke();\n      ctx.closePath();\n   }\n}\n\nlet words = [&quot;HTML&quot;, &quot;CSS&quot;, &quot;JS&quot;, &quot;REACT&quot;, &quot;VUE&quot;, &quot;PHP&quot;];\n\nfunction dist(x1, y1, x2, y2) {\n   return Math.sqrt(Math.pow(x1 - x2, 2) + Math.pow(y1 - y2, 2));\n}\n\nfunction gRA(min, max) {\n   min = Math.ceil(min);\n   max = Math.floor(max);\n   return Math.floor(Math.random() * (max - min + 1)) + min;\n}\n\nlet canvas = document.getElementById(&quot;canvas&quot;);\nlet ctx = canvas.getContext(&quot;2d&quot;);\n\nlet sCanvas = document.getElementById(&quot;sCanvas&quot;);\nlet sCtx = sCanvas.getContext(&quot;2d&quot;);\n\nlet w = window.innerWidth;\nlet h = window.innerHeight;\n\ncanvas.style.width = w + &quot;px&quot;;\ncanvas.style.height = h + &quot;px&quot;;\ncanvas.setAttribute(&quot;height&quot;, h);\ncanvas.setAttribute(&quot;width&quot;, w);\n\nsCanvas.style.width = w + &quot;px&quot;;\nsCanvas.style.height = h + &quot;px&quot;;\nsCanvas.setAttribute(&quot;height&quot;, h);\nsCanvas.setAttribute(&quot;width&quot;, w);\n\nsCtx.textAlign = &quot;center&quot;;\nsCtx.textBaseline = &quot;middle&quot;;\n\nlet quality = 10;\n\/\/ ----------------------------------------\nfunction replay() {\n   let drawNext = true;\n   window.addEventListener(&quot;click&quot;, reverse);\n   function reverse() {\n      window.removeEventListener(&quot;click&quot;, reverse);\n      drawNext = false;\n   }\n\n   sCtx.clearRect(0, 0, w, h);\n   ctx.clearRect(0, 0, w, h);\n\n   let word = words[gRA(0, words.length - 1)];\n\n   sCtx.font = &quot;normal  900 &quot; + (w \/ word.length + 2) + &quot;px sans-serif&quot;;\n   sCtx.fillText(word, w \/ 2, h \/ 2);\n\n   let possibleSpots = [];\n   let circles = [];\n\n   for (let i = 0; i &lt; sCanvas.width; i += 5) {\n      for (let g = 0; g &lt; sCanvas.height; g += 5) {\n         let imgData = sCtx.getImageData(i, g, 1, 1).data;\n         if (\n            imgData[0] &gt; 0 ||\n            imgData[1] &gt; 0 ||\n            imgData[2] &gt; 0 ||\n            imgData[3] &gt; 0\n         ) {\n            possibleSpots.push({ x: i, y: g });\n            for (let l = 0; l &lt; 5; l++) {\n               for (let h = 0; h &lt; 5; h++) {\n                  possibleSpots.push({ x: i + l, y: g + h });\n               }\n            }\n         }\n      }\n   }\n\n   sCtx.clearRect(0, 0, w, h);\n   let counter = 0;\n   function loop() {\n      ctx.clearRect(0, 0, w, h);\n      counter++;\n\n      for (let i = 0; i &lt; quality; i++) {\n         newCircle();\n      }\n\n      for (circle of circles) {\n         for (circle1 of circles) {\n            if (circle != circle1) {\n               if (\n                  dist(circle.x, circle.y, circle1.x, circle1.y) &lt;\n                  circle.r + circle1.r\n               ) {\n                  \/\/ checking intersection\n                  circle.isGrowing = false;\n                  break;\n               }\n            }\n         }\n         circle.show();\n         circle.growing();\n      }\n\n      if (drawNext) {\n         window.requestAnimationFrame(function() {\n            loop();\n         });\n      }\n   }\n\n   function newCircle() {\n      let newSpot = possibleSpots[gRA(0, possibleSpots.length - 1)];\n      let draw = true;\n      for (circle2 of circles) {\n         if (dist(circle2.x, circle2.y, newSpot.x, newSpot.y) &lt;= circle2.r) {\n            draw = false;\n            break;\n         }\n      }\n      if (draw) {\n         circles.push(new Circle(newSpot.x, newSpot.y, ctx));\n      }\n   }\n   loop();\n}\nreplay();\nwindow.onclick = replay;<\/pre><\/div>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":1314,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[19],"tags":[38,40],"class_list":["post-1313","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-elements","tag-canvas","tag-text"],"_links":{"self":[{"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/posts\/1313","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=1313"}],"version-history":[{"count":1,"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/posts\/1313\/revisions"}],"predecessor-version":[{"id":1316,"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/posts\/1313\/revisions\/1316"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/media\/1314"}],"wp:attachment":[{"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/media?parent=1313"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/categories?post=1313"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/tags?post=1313"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}