From b47f9b2c0b8faa2344fd934b8076bfbf0f2a44e3 Mon Sep 17 00:00:00 2001 From: HyeokjinKang Date: Fri, 24 Jan 2025 23:17:32 +0900 Subject: [PATCH 1/2] =?UTF-8?q?enhance:=20test=EC=97=90=EC=84=9C=20?= =?UTF-8?q?=ED=81=B4=EB=A6=AD=20=EC=9D=B4=ED=8E=99=ED=8A=B8=20=EA=B0=9C?= =?UTF-8?q?=EC=84=A0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- public/js/test.js | 23 +++++++++++------------ 1 file changed, 11 insertions(+), 12 deletions(-) diff --git a/public/js/test.js b/public/js/test.js index 5369008..e7c04b6 100644 --- a/public/js/test.js +++ b/public/js/test.js @@ -323,10 +323,10 @@ const drawParticle = (n, x, y, j, d) => { //Click Note const raf = (w, s, n) => { ctx.beginPath(); - let width = canvas.width / 60; + let width = canvas.width / 20; if (Date.now() - s >= 800) return; let p = 100 * easeOutQuad((Date.now() - s) / 800); - ctx.lineWidth = ((100 - p) / 100) * (canvas.width / 200); + ctx.lineWidth = ((100 - p) / 100) * (canvas.width / 40); let opacity = parseInt(225 - p * 1.25); if (opacity <= 0) opacity = "00"; if (skin.note[n].circle) { @@ -356,28 +356,27 @@ const drawParticle = (n, x, y, j, d) => { } ctx.arc(cx, cy, w, 0, 2 * Math.PI); ctx.stroke(); - w = canvas.width / 40 + width * (p / 100); + w = canvas.width / 80 + width * (p / 100); requestAnimationFrame(() => { raf(w, s, n); }); }; - raf(canvas.width / 40, Date.now(), d); + raf(canvas.width / 80, Date.now(), d); } else if (n == 2) { //Click Default const raf = (w, s) => { ctx.beginPath(); - let width = canvas.width / 60; - let p = 100 - (s + 300 - Date.now()) / 3; - ctx.lineWidth = ((100 - p) / 100) * 5; + let width = canvas.width / 50; + if (Date.now() - s >= 500) return; + let p = 100 * easeOutQuad((Date.now() - s) / 500); + ctx.lineWidth = ((100 - p) / 100) * (canvas.width / 200); ctx.strokeStyle = `rgba(67, 221, 166, ${0.5 - p / 200})`; ctx.arc(cx, cy, w, 0, 2 * Math.PI); ctx.stroke(); w = canvas.width / 70 + canvas.width / 400 + width * (p / 100); - if (p < 100) { - requestAnimationFrame(() => { - raf(w, s); - }); - } + requestAnimationFrame(() => { + raf(w, s); + }); }; raf(canvas.width / 70 + canvas.width / 400, Date.now()); } else if (n == 3) { From c55bbd51431aaaa044618bfec93a21eff0299627 Mon Sep 17 00:00:00 2001 From: HyeokjinKang Date: Fri, 24 Jan 2025 23:19:43 +0900 Subject: [PATCH 2/2] =?UTF-8?q?enhance:=20play=EC=99=80=20tutorial?= =?UTF-8?q?=EC=97=90=EB=8F=84=20=EA=B0=9C=EC=84=A0=EB=90=9C=20=EC=9D=B4?= =?UTF-8?q?=ED=8E=99=ED=8A=B8=20=EC=A0=81=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- public/js/play.js | 23 +++++++++++------------ public/js/tutorial.js | 23 +++++++++++------------ 2 files changed, 22 insertions(+), 24 deletions(-) diff --git a/public/js/play.js b/public/js/play.js index c5a359c..2807d58 100644 --- a/public/js/play.js +++ b/public/js/play.js @@ -347,10 +347,10 @@ const drawParticle = (n, x, y, j, d) => { //Click Note const raf = (w, s, n) => { ctx.beginPath(); - let width = canvas.width / 60; + let width = canvas.width / 20; if (Date.now() - s >= 800) return; let p = 100 * easeOutQuad((Date.now() - s) / 800); - ctx.lineWidth = ((100 - p) / 100) * (canvas.width / 200); + ctx.lineWidth = ((100 - p) / 100) * (canvas.width / 40); let opacity = parseInt(225 - p * 1.25); if (opacity <= 0) opacity = "00"; if (skin.note[n].circle) { @@ -380,28 +380,27 @@ const drawParticle = (n, x, y, j, d) => { } ctx.arc(cx, cy, w, 0, 2 * Math.PI); ctx.stroke(); - w = canvas.width / 40 + width * (p / 100); + w = canvas.width / 80 + width * (p / 100); requestAnimationFrame(() => { raf(w, s, n); }); }; - raf(canvas.width / 40, Date.now(), d); + raf(canvas.width / 80, Date.now(), d); } else if (n == 2) { //Click Default const raf = (w, s) => { ctx.beginPath(); - let width = canvas.width / 60; - let p = 100 - (s + 300 - Date.now()) / 3; - ctx.lineWidth = ((100 - p) / 100) * 5; + let width = canvas.width / 50; + if (Date.now() - s >= 500) return; + let p = 100 * easeOutQuad((Date.now() - s) / 500); + ctx.lineWidth = ((100 - p) / 100) * (canvas.width / 200); ctx.strokeStyle = `rgba(67, 221, 166, ${0.5 - p / 200})`; ctx.arc(cx, cy, w, 0, 2 * Math.PI); ctx.stroke(); w = canvas.width / 70 + canvas.width / 400 + width * (p / 100); - if (p < 100) { - requestAnimationFrame(() => { - raf(w, s); - }); - } + requestAnimationFrame(() => { + raf(w, s); + }); }; raf(canvas.width / 70 + canvas.width / 400, Date.now()); } else if (n == 3) { diff --git a/public/js/tutorial.js b/public/js/tutorial.js index c4d3239..f5ca7c8 100644 --- a/public/js/tutorial.js +++ b/public/js/tutorial.js @@ -309,10 +309,10 @@ const drawParticle = (n, x, y, j, d) => { //Click Note const raf = (w, s, n) => { ctx.beginPath(); - let width = canvas.width / 60; + let width = canvas.width / 20; if (Date.now() - s >= 800) return; let p = 100 * easeOutQuad((Date.now() - s) / 800); - ctx.lineWidth = ((100 - p) / 100) * (canvas.width / 200); + ctx.lineWidth = ((100 - p) / 100) * (canvas.width / 40); let opacity = parseInt(225 - p * 1.25); if (opacity <= 0) opacity = "00"; if (skin.note[n].circle) { @@ -342,28 +342,27 @@ const drawParticle = (n, x, y, j, d) => { } ctx.arc(cx, cy, w, 0, 2 * Math.PI); ctx.stroke(); - w = canvas.width / 40 + width * (p / 100); + w = canvas.width / 80 + width * (p / 100); requestAnimationFrame(() => { raf(w, s, n); }); }; - raf(canvas.width / 40, Date.now(), d); + raf(canvas.width / 80, Date.now(), d); } else if (n == 2) { //Click Default const raf = (w, s) => { ctx.beginPath(); - let width = canvas.width / 60; - let p = 100 - (s + 300 - Date.now()) / 3; - ctx.lineWidth = ((100 - p) / 100) * 5; + let width = canvas.width / 50; + if (Date.now() - s >= 500) return; + let p = 100 * easeOutQuad((Date.now() - s) / 500); + ctx.lineWidth = ((100 - p) / 100) * (canvas.width / 200); ctx.strokeStyle = `rgba(67, 221, 166, ${0.5 - p / 200})`; ctx.arc(cx, cy, w, 0, 2 * Math.PI); ctx.stroke(); w = canvas.width / 70 + canvas.width / 400 + width * (p / 100); - if (p < 100) { - requestAnimationFrame(() => { - raf(w, s); - }); - } + requestAnimationFrame(() => { + raf(w, s); + }); }; raf(canvas.width / 70 + canvas.width / 400, Date.now()); } else if (n == 3) {