Skip to content

Commit 1c03d3b

Browse files
L1teDL1teD
committed
adding coloring and shaking
1 parent 8044ef7 commit 1c03d3b

File tree

4 files changed

+183
-13
lines changed

4 files changed

+183
-13
lines changed

‎css/style.css‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -119,6 +119,8 @@ body {
119119
mask-image: linear-gradient(to right, transparent, black);
120120

121121
-webkit-mask-image: linear-gradient(to right, transparent, black);
122+
123+
transition: transform var(--transitionDuration) var(--transitionTimingFunction);
122124
}
123125

124126
.press-counter {

‎js/index.js‎

Lines changed: 60 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
// CODE WAS COMMENTED WITH BLACKBOX.AI (as i saw it commented everything right, but i'm not sure)
22

33
import WebSocketManager from "./socket.js";
4+
import { generateColor, getRandomInt } from "./stackoverflow.js";
45

56
let websocketUrl = "127.0.0.1:24050";
67
const socket = new WebSocketManager(websocketUrl);
@@ -44,7 +45,7 @@ socket.commands((data) => {
4445
document.body.style.setProperty("--gradientColor2", message.gradientColor2);
4546
document.body.style.setProperty("--dashedOutlineColor", message.dashedOutlineColor);
4647
document.body.style.setProperty("--activeKeyColor", message.activeKeyColor);
47-
document.body.style.setProperty("--noteColor", message.noteColor);
48+
document.body.style.setProperty("--noteColor", message.noteColor1);
4849
document.body.style.setProperty("--transitionDuration", message.transitionDuration);
4950
document.body.style.setProperty("--transitionTimingFunction",message.transitionTimingFunction,);
5051
document.body.style.setProperty("--trackWidth", message.trackWidth);
@@ -84,6 +85,19 @@ socket.commands((data) => {
8485
document.getElementById("trackK2").parentElement.dataset.mode = message.visibilityK2;
8586
document.getElementById("trackM1").parentElement.dataset.mode = message.visibilityM1;
8687
document.getElementById("trackM2").parentElement.dataset.mode = message.visibilityM2;
88+
89+
window.startBpm = message.noteColoringRange.slice(0, message.noteColoringRange.indexOf('-'))
90+
window.endBpm = message.noteColoringRange.slice(message.noteColoringRange.indexOf('-') + 1)
91+
window.steps = endBpm - startBpm
92+
93+
window.colors = [message.noteColor1]
94+
colors = colors.concat(generateColor(message.noteColor2, message.noteColor1, steps))
95+
96+
window.shakePoint = message.noteShakingPoint
97+
window.shakeAmplitude = message.noteShakeAmplitude / 10000
98+
99+
window.noteShaking = message.noteShaking
100+
window.noteColoring = message.noteColoring
87101
}
88102
} catch (error) {
89103
console.log(error);
@@ -125,12 +139,11 @@ socket.api_v2_precise((data) => {
125139
note.style.width = "0px";
126140
note.style.marginRight = "0px";
127141

128-
// Add the note to the track
129-
document.getElementById(`track${_key}`).prepend(note);
130-
131142
// Update the BPM display
143+
const bpm = Math.round((60 / (Date.now() - bpmCache[_key].date)) * 500)
144+
132145
document.getElementById(`bpm${_key}`).innerHTML =
133-
`${Math.round((60 / (Date.now() - bpmCache[_key].date)) * 500)}<span class="fs-small">bpm</span>`;
146+
`${bpm}<span class="fs-small">bpm</span>`;
134147
bpmCache[_key].date = Date.now();
135148

136149
// Clear the BPM timeout and set a new one
@@ -139,6 +152,48 @@ socket.api_v2_precise((data) => {
139152
document.getElementById(`bpm${_key}`).innerHTML =
140153
`0<span class="fs-small fw-regular">bpm</span>`;
141154
}, 1000);
155+
156+
// Set bpm color if enabled
157+
if (noteColoring) {
158+
if (bpm >= startBpm && bpm <= endBpm) {
159+
note.style.backgroundColor = '#' + colors[bpm - startBpm]
160+
} else if (bpm > endBpm) {
161+
note.style.backgroundColor = '#' + colors[steps]
162+
}
163+
}
164+
165+
// Set shake if enabled
166+
if (bpm >= shakePoint && noteShaking) {
167+
let shakeCoords = [
168+
['2', '1', '0'],
169+
['-1', '-2', '-1'],
170+
['-3', '0', '1'],
171+
['0', '2', '0'],
172+
['1', '-1', '1'],
173+
['-1', '2', '-1'],
174+
['-3', '1', '0'],
175+
['2', '1', '-1'],
176+
['-1', '-1', '1'],
177+
['0', '0', '0']
178+
]
179+
180+
for (let i = 0; i < 10; i++) {
181+
setTimeout(() => {
182+
const firstCoord = shakeCoords[getRandomInt(10)][0] * (bpm - startBpm) * shakeAmplitude
183+
const secondCoord = shakeCoords[getRandomInt(10)][0] * (bpm - startBpm) * shakeAmplitude
184+
const thirdCoord = shakeCoords[getRandomInt(10)][0] * (bpm - startBpm) * shakeAmplitude
185+
186+
document.getElementById(`track${_key}`).style.transform =
187+
`translate(${firstCoord}px, ${secondCoord}px) rotate(${thirdCoord}deg)`
188+
}, 50 * i);
189+
setTimeout(() => {
190+
document.getElementById(`track${_key}`).style.transform = null
191+
}, 500)
192+
}
193+
}
194+
195+
// Add the note to the track
196+
document.getElementById(`track${_key}`).prepend(note);
142197
} else {
143198
// Update the existing note element
144199
const notes = document

‎js/stackoverflow.js‎

Lines changed: 65 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
function hex(c) {
2+
var s = "0123456789abcdef";
3+
var i = parseInt(c);
4+
5+
if (i == 0 || isNaN(c))
6+
return "00";
7+
8+
i = Math.round(Math.min(Math.max(0, i), 255));
9+
return s.charAt((i - i % 16) / 16) + s.charAt(i % 16);
10+
}
11+
12+
/* Convert an RGB triplet to a hex string */
13+
function convertToHex(rgb) {
14+
return hex(rgb[0]) + hex(rgb[1]) + hex(rgb[2]);
15+
}
16+
17+
/* Remove '#' in color hex string */
18+
function trim(s) {
19+
return (s.charAt(0) == '#') ? s.substring(1, 7) : s
20+
}
21+
22+
/* Convert a hex string to an RGB triplet */
23+
function convertToRGB(hex) {
24+
var color = [];
25+
color[0] = parseInt((trim(hex)).substring(0, 2), 16);
26+
color[1] = parseInt((trim(hex)).substring(2, 4), 16);
27+
color[2] = parseInt((trim(hex)).substring(4, 6), 16);
28+
return color;
29+
}
30+
31+
export function generateColor(colorStart, colorEnd, colorCount) {
32+
let i;
33+
34+
// The beginning of your gradient
35+
var start = convertToRGB(colorStart);
36+
37+
// The end of your gradient
38+
var end = convertToRGB(colorEnd);
39+
40+
// The number of colors to compute
41+
var len = colorCount;
42+
43+
//Alpha blending amount
44+
var alpha = 0.0;
45+
46+
var saida = [];
47+
48+
for (i = 0; i < len; i++) {
49+
var c = [];
50+
alpha += (1.0 / len);
51+
52+
c[0] = start[0] * alpha + (1 - alpha) * end[0];
53+
c[1] = start[1] * alpha + (1 - alpha) * end[1];
54+
c[2] = start[2] * alpha + (1 - alpha) * end[2];
55+
56+
saida.push(convertToHex(c));
57+
58+
}
59+
60+
return saida;
61+
}
62+
63+
export function getRandomInt(max) {
64+
return Math.floor(Math.random() * max);
65+
}

‎settings.json‎

Lines changed: 56 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -12,41 +12,89 @@
1212
"type": "color",
1313
"title": "Gradient color 1",
1414
"description": "Change the top gradient color of the background.",
15-
"options": "undefined",
15+
"options": "",
1616
"value": "#1D3860"
1717
},
1818
{
1919
"uniqueID": "gradientColor2",
2020
"type": "color",
2121
"title": "Gradient color 2",
2222
"description": "Change the bottom gradient color of the background.",
23-
"options": "undefined",
23+
"options": "",
2424
"value": "#072045"
2525
},
2626
{
2727
"uniqueID": "dashedOutlineColor",
2828
"type": "color",
2929
"title": "Dashed outline color",
3030
"description": "Change the color of the dashed key outline.",
31-
"options": "undefined",
31+
"options": "",
3232
"value": "#254982"
3333
},
3434
{
3535
"uniqueID": "activeKeyColor",
3636
"type": "color",
3737
"title": "Active key color",
3838
"description": "Change the color of the active key.",
39-
"options": "undefined",
39+
"options": "",
4040
"value": "#F3F589"
4141
},
4242
{
43-
"uniqueID": "noteColor",
43+
"uniqueID": "noteColor1",
4444
"type": "color",
45-
"title": "Note color",
46-
"description": "Change the color of the note.",
47-
"options": "undefined",
45+
"title": "Note color 1",
46+
"description": "Change the first color of the note.",
47+
"options": "",
4848
"value": "#4c4c4c"
4949
},
50+
{
51+
"uniqueID": "noteColor2",
52+
"type": "color",
53+
"title": "Note color 2",
54+
"description": "Change the second color of the note.",
55+
"options": "",
56+
"value": "#f06363"
57+
},
58+
{
59+
"uniqueID": "noteShakeAmplitude",
60+
"type": "text",
61+
"title": "Note shake amplitude",
62+
"description": "Change amplitude of note shake. (Depends on the note coloring range)",
63+
"options": "",
64+
"value": "70"
65+
},
66+
{
67+
"uniqueID": "noteColoring",
68+
"type": "checkbox",
69+
"title": "Note coloring",
70+
"description": "Enable note coloring depending on bpm.",
71+
"options": "",
72+
"value": true
73+
},
74+
{
75+
"uniqueID": "noteShaking",
76+
"type": "checkbox",
77+
"title": "Note shaking",
78+
"description": "just try it i swear.",
79+
"options": "",
80+
"value": true
81+
},
82+
{
83+
"uniqueID": "noteColoringRange",
84+
"type": "text",
85+
"title": "Notes coloring range",
86+
"description": "Change range where notes will be colored.",
87+
"options": "",
88+
"value": "180-220"
89+
},
90+
{
91+
"uniqueID": "noteShakingPoint",
92+
"type": "text",
93+
"title": "Notes shaking point",
94+
"description": "Change point where notes will shake.",
95+
"options": "",
96+
"value": "240"
97+
},
5098
{
5199
"uniqueID": "transitionDuration",
52100
"type": "text",

0 commit comments

Comments
 (0)