{"id":3412,"date":"2021-03-04T14:14:24","date_gmt":"2021-03-04T14:14:24","guid":{"rendered":"https:\/\/rengga.dev\/blog\/?p=3412"},"modified":"2023-02-28T05:17:30","modified_gmt":"2023-02-28T05:17:30","slug":"js-tutorial-fireflies","status":"publish","type":"post","link":"https:\/\/rengga.dev\/blog\/js-tutorial-fireflies\/","title":{"rendered":"JS Tutorial &#8211; Fireflies"},"content":{"rendered":"<p><span style=\"color: #ef3207;\"><a style=\"color: #ef3207;\" href=\"https:\/\/rengga.dev\/\" target=\"_blank\" rel=\"noopener\"><strong>Rengga Dev<\/strong><\/a> <\/span>&#8211; Try playing with the parameters on the gui to the right. The Metaballs is just one effect of WebGL.<\/p>\n<p><iframe style=\"width: 100%;\" title=\"Untitled\" src=\"https:\/\/codepen.io\/renggagumilar\/embed\/eYrYogz?default-tab=result&amp;theme-id=dark\" height=\"500\" frameborder=\"no\" scrolling=\"no\" allowfullscreen=\"allowfullscreen\"><br \/>\nSee the Pen <a href=\"https:\/\/codepen.io\/renggagumilar\/pen\/eYrYogz\"><br \/>\nUntitled<\/a> by Rengga Gumilar (<a href=\"https:\/\/codepen.io\/renggagumilar\">@renggagumilar<\/a>)<br \/>\non <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<br \/>\n<\/iframe><\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"js\">let c = init(\"canvas\"),\r\n  w = (canvas.width = window.innerWidth),\r\n  h = (canvas.height = window.innerHeight);\r\n\/\/initiation\r\n\r\nclass firefly{\r\n  constructor(){\r\n    this.x = Math.random()*w;\r\n    this.y = Math.random()*h;\r\n    this.s = Math.random()*2;\r\n    this.ang = Math.random()*2*Math.PI;\r\n    this.v = this.s*this.s\/4;\r\n  }\r\n  move(){\r\n    this.x += this.v*Math.cos(this.ang);\r\n    this.y += this.v*Math.sin(this.ang);\r\n    this.ang += Math.random()*20*Math.PI\/180-10*Math.PI\/180;\r\n  }\r\n  show(){\r\n    c.beginPath();\r\n    c.arc(this.x,this.y,this.s,0,2*Math.PI);\r\n    c.fillStyle=\"#fddba3\";\r\n    c.fill();\r\n  }\r\n}\r\n\r\nlet f = [];\r\n\r\nfunction draw() {\r\n  if(f.length &lt; 100){\r\n    for(let j = 0; j &lt; 10; j++){\r\n     f.push(new firefly());\r\n  }\r\n     }\r\n  \/\/animation\r\n  for(let i = 0; i &lt; f.length; i++){\r\n    f[i].move();\r\n    f[i].show();\r\n    if(f[i].x &lt; 0 || f[i].x &gt; w || f[i].y &lt; 0 || f[i].y &gt; h){\r\n       f.splice(i,1);\r\n       }\r\n  }\r\n}\r\n\r\nlet mouse = {};\r\nlet last_mouse = {};\r\n\r\ncanvas.addEventListener(\r\n  \"mousemove\",\r\n  function(e) {\r\n    last_mouse.x = mouse.x;\r\n    last_mouse.y = mouse.y;\r\n\r\n    mouse.x = e.pageX - this.offsetLeft;\r\n    mouse.y = e.pageY - this.offsetTop;\r\n  },\r\n  false\r\n);\r\nfunction init(elemid) {\r\n  let canvas = document.getElementById(elemid),\r\n    c = canvas.getContext(\"2d\"),\r\n    w = (canvas.width = window.innerWidth),\r\n    h = (canvas.height = window.innerHeight);\r\n  c.fillStyle = \"rgba(30,30,30,1)\";\r\n  c.fillRect(0, 0, w, h);\r\n  return c;\r\n}\r\n\r\nwindow.requestAnimFrame = (function() {\r\n  return (\r\n    window.requestAnimationFrame ||\r\n    window.webkitRequestAnimationFrame ||\r\n    window.mozRequestAnimationFrame ||\r\n    window.oRequestAnimationFrame ||\r\n    window.msRequestAnimationFrame ||\r\n    function(callback) {\r\n      window.setTimeout(callback);\r\n    }\r\n  );\r\n});\r\n\r\nfunction loop() {\r\n  window.requestAnimFrame(loop);\r\n  c.clearRect(0, 0, w, h);\r\n  draw();\r\n}\r\n\r\nwindow.addEventListener(\"resize\", function() {\r\n  (w = canvas.width = window.innerWidth),\r\n  (h = canvas.height = window.innerHeight);\r\n  loop();\r\n});\r\n\r\nloop();\r\nsetInterval(loop, 1000 \/ 60);<\/pre>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Rengga Dev &#8211; Try playing with the parameters on the gui to <a class=\"read-more\" href=\"https:\/\/rengga.dev\/blog\/js-tutorial-fireflies\/\" title=\"JS Tutorial &#8211; Fireflies\" itemprop=\"url\"><\/a><\/p>\n","protected":false},"author":1,"featured_media":3829,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[20],"tags":[325,333,264,263,103,227],"newstopic":[],"class_list":{"0":"post-3412","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-javascript","8":"tag-background-effects","9":"tag-fireflies","10":"tag-javascript-tutorial","11":"tag-js-tutorial","12":"tag-web-design","13":"tag-web-designer"},"_links":{"self":[{"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/posts\/3412","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/comments?post=3412"}],"version-history":[{"count":1,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/posts\/3412\/revisions"}],"predecessor-version":[{"id":3414,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/posts\/3412\/revisions\/3414"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/media\/3829"}],"wp:attachment":[{"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/media?parent=3412"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/categories?post=3412"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/tags?post=3412"},{"taxonomy":"newstopic","embeddable":true,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/newstopic?post=3412"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}