Cleo | 00ccf36 | 2024-02-29 15:07:31 -0500 | [diff] [blame^] | 1 | const canvas = document.querySelector("canvas"); |
| 2 | const ctx = canvas.getContext("2d"); |
| 3 | |
| 4 | let amplitud = 10; |
| 5 | let speed = 0.025; |
| 6 | let points = []; |
| 7 | |
| 8 | let cw = (canvas.width = 1500), |
| 9 | cx = cw / 2; |
| 10 | let ch = (canvas.height = 1500), |
| 11 | cy = ch / 2; |
| 12 | ctx.fillStyle = "#ffffff"; |
| 13 | ctx.strokeStyle = "transparent"; |
| 14 | |
| 15 | let corners = []; |
| 16 | let n = 15; |
| 17 | let r = cx - amplitud - 100; |
| 18 | for (var i = 0; i < n; i++) { |
| 19 | corners.push([ |
| 20 | cx + r * Math.cos((2 * Math.PI * i) / n), |
| 21 | cy + r * Math.sin((2 * Math.PI * i) / n), |
| 22 | ]); |
| 23 | } |
| 24 | |
| 25 | class Point { |
| 26 | constructor(x, y, hv) { |
| 27 | this.cx = x; |
| 28 | this.cy = y; |
| 29 | this.a = Math.random() * 2 * Math.PI; |
| 30 | this.hv = hv; |
| 31 | |
| 32 | this.update(); |
| 33 | } |
| 34 | |
| 35 | update() { |
| 36 | this.a += speed; |
| 37 | |
| 38 | if (this.hv == 0) { |
| 39 | this.x = this.cx; |
| 40 | this.y = this.cy + amplitud * Math.cos(this.a); |
| 41 | } else { |
| 42 | this.x = this.cx + amplitud * Math.cos(this.a); |
| 43 | this.y = this.cy; |
| 44 | } |
| 45 | } |
| 46 | } |
| 47 | |
| 48 | function divide(n, a, b) { |
| 49 | for (var i = 0; i <= n; i++) { |
| 50 | let p = { |
| 51 | x: ((b[0] - a[0]) * i) / n + a[0], |
| 52 | y: ((b[1] - a[1]) * i) / n + a[1], |
| 53 | hv: b[1] - a[1], |
| 54 | }; |
| 55 | points.push(new Point(p.x, p.y, p.hv)); |
| 56 | } |
| 57 | } |
| 58 | |
| 59 | for (let i = 0; i < corners.length; i++) { |
| 60 | let currentCorner = corners[i]; |
| 61 | let nextCorner = corners[(i + 1) % corners.length]; |
| 62 | divide(10, currentCorner, nextCorner); |
| 63 | points.pop(); |
| 64 | } |
| 65 | |
| 66 | function drawCurves() { |
| 67 | let p = {}; |
| 68 | p.x = (points[points.length - 1].x + points[0].x) / 2; |
| 69 | p.y = (points[points.length - 1].y + points[0].y) / 2; |
| 70 | ctx.beginPath(); |
| 71 | ctx.moveTo(p.x, p.y); |
| 72 | for (var i = 0; i < points.length - 1; i++) { |
| 73 | let mp = {}; |
| 74 | mp.x = (points[i].x + points[i + 1].x) / 2; |
| 75 | mp.y = (points[i].y + points[i + 1].y) / 2; |
| 76 | ctx.quadraticCurveTo(points[i].x, points[i].y, mp.x, mp.y); |
| 77 | } |
| 78 | |
| 79 | ctx.quadraticCurveTo( |
| 80 | points[points.length - 1].x, |
| 81 | points[points.length - 1].y, |
| 82 | p.x, |
| 83 | p.y |
| 84 | ); |
| 85 | ctx.stroke(); |
| 86 | ctx.fill(); |
| 87 | } |
| 88 | |
| 89 | function Draw() { |
| 90 | window.requestAnimationFrame(Draw); |
| 91 | ctx.clearRect(0, 0, cw, ch); |
| 92 | points.map((p) => { |
| 93 | p.update(); |
| 94 | }); |
| 95 | drawCurves(); |
| 96 | } |
| 97 | |
| 98 | Draw(); |