Skip to content

Commit

Permalink
Merge pull request #187 from HyeokjinKang/play-click-particle
Browse files Browse the repository at this point in the history 
enhance: 클릭 이펙트 개선
  • Loading branch information
@HyeokjinKang
HyeokjinKang authored Jan 24, 2025
2 parents f3fb5ef + c55bbd5 commit a1282e9
Show file tree
Hide file tree
Showing 3 changed files with 33 additions and 36 deletions.
23 changes: 11 additions & 12 deletions public/js/play.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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) {
Expand Down Expand Up @@ -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) {
Expand Down
23 changes: 11 additions & 12 deletions public/js/test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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) {
Expand Down Expand Up @@ -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) {
Expand Down
23 changes: 11 additions & 12 deletions public/js/tutorial.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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) {
Expand Down Expand Up @@ -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) {
Expand Down

0 comments on commit a1282e9

Please sign in to comment.