Your IP : 216.73.217.62
{"version":3,"sources":["../../src/js/app.js"],"names":["document","addEventListener","trianglesAmount","randomColors","defaultTrianglesColor","backgroundColor","Triangle","x1","y1","x2","y2","x3","y3","color","x1V","x2V","x3V","y1V","y2V","y3V","ctx","fillStyle","beginPath","moveTo","lineTo","closePath","fill","cWidth","cHeight","drawTriangle","random","maxNumber","Math","floor","animateSingleTriangle","requestAnimationFrame","fillRect","trianglesArray","forEach","singleTriangle","animateTriangle","canvasEl","querySelector","getContext","width","height","i","R","G","B","A","toPrecision","newTriangle","push"],"mappings":"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","file":"app.js","sourcesContent":["document.addEventListener('DOMContentLoaded', () => {\r\n\t//pseudo config\r\n\tconst trianglesAmount = 10;\r\n\tconst randomColors = true;\r\n\tconst defaultTrianglesColor = \"rgba(205,205,0,.5)\";\r\n\tconst backgroundColor = \"#000\";\r\n\r\n\tclass Triangle {\r\n\t\tconstructor(x1, y1, x2, y2, x3, y3, color) {\r\n\t\t\tthis.x1 = x1;\r\n\t\t\tthis.x2 = x2;\r\n\t\t\tthis.x3 = x3;\r\n\t\t\tthis.y1 = y1;\r\n\t\t\tthis.y2 = y2;\r\n\t\t\tthis.y3 = y3;\r\n\t\t\tthis.color = color;\r\n\t\t\tthis.x1V = this.x2V = this.x3V = this.y1V = this.y2V = this.y3V = 1;\r\n\t\t}\r\n\r\n\t\tdrawTriangle() {\r\n\t\t\tctx.fillStyle = this.color;\r\n\t\t\tctx.beginPath();\r\n\t\t\tctx.moveTo(this.x1, this.y1);\r\n\t\t\tctx.lineTo(this.x2, this.y2);\r\n\t\t\tctx.lineTo(this.x3, this.y3);\r\n\t\t\tctx.closePath();\r\n\t\t\tctx.fill();\r\n\t\t}\r\n\t\tanimateTriangle() {\r\n\t\t\tctx.fillStyle = this.color;\r\n\r\n\t\t\tif (this.x1 == cWidth || this.x1 == 0) {\r\n\t\t\t\tthis.x1V = -this.x1V;\r\n\t\t\t}\r\n\t\t\tif (this.x2 == cWidth || this.x2 == 0) {\r\n\t\t\t\tthis.x2V = -this.x2V;\r\n\t\t\t}\r\n\t\t\tif (this.x3 == cWidth || this.x3 == 0) {\r\n\t\t\t\tthis.x3V = -this.x3V;\r\n\t\t\t}\r\n\r\n\t\t\tif (this.y1 == cHeight || this.y1 == 0) {\r\n\t\t\t\tthis.y1V = -this.y1V;\r\n\t\t\t}\r\n\t\t\tif (this.y2 == cHeight || this.y2 == 0) {\r\n\t\t\t\tthis.y2V = -this.y2V;\r\n\t\t\t}\r\n\t\t\tif (this.y3 == cHeight || this.y3 == 0) {\r\n\t\t\t\tthis.y3V = -this.y3V;\r\n\t\t\t}\r\n\t\t\tthis.x1 -= this.x1V;\r\n\t\t\tthis.x2 -= this.x2V;\r\n\t\t\tthis.x3 -= this.x3V;\r\n\t\t\tthis.y1 -= this.y1V;\r\n\t\t\tthis.y2 -= this.y2V;\r\n\t\t\tthis.y3 -= this.y3V;\r\n\t\t\tthis.drawTriangle();\r\n\t\t}\r\n\t}\r\n\r\n\tfunction random(maxNumber) {\r\n\t\treturn Math.floor(Math.random() * maxNumber) + 1;\r\n\t}\r\n\r\n\tfunction animateSingleTriangle() {\r\n\t\trequestAnimationFrame(animateSingleTriangle);\r\n\t\tctx.fillStyle = backgroundColor;\r\n\t\tctx.fillRect(0, 0, cWidth, cHeight);\r\n\t\ttrianglesArray.forEach((singleTriangle) => {\r\n\t\t\tsingleTriangle.animateTriangle();\r\n\t\t});\r\n\t}\r\n\tconst canvasEl = document.querySelector('canvas');\r\n\tconst ctx = canvasEl.getContext('2d');\r\n\tconst cWidth = canvasEl.width;\r\n\tconst cHeight = canvasEl.height;\r\n\tconst trianglesArray = []\r\n\r\n\tfor (let i = 0; i < trianglesAmount; i++) {\r\n\r\n\t\tlet color = defaultTrianglesColor;\r\n\t\tif (randomColors) {\r\n\t\t\tconst R = Math.floor(Math.random() * 255) + 1;\r\n\t\t\tconst G = Math.floor(Math.random() * 255) + 1;\r\n\t\t\tconst B = Math.floor(Math.random() * 255) + 1;\r\n\t\t\tconst A = (Math.random()).toPrecision(2);\r\n\t\t\tcolor = `rgba(${R}, ${G}, ${B}, ${A})`;\r\n\t\t}\r\n\r\n\t\tconst newTriangle = new Triangle(\r\n\t\t\trandom(cWidth),\r\n\t\t\trandom(cHeight),\r\n\t\t\trandom(cWidth),\r\n\t\t\trandom(cHeight),\r\n\t\t\trandom(cWidth),\r\n\t\t\trandom(cHeight),\r\n\t\t\tcolor\r\n\t\t);\r\n\t\ttrianglesArray.push(newTriangle);\r\n\t}\r\n\r\n\tanimateSingleTriangle();\r\n\r\n});\r\n"]}