let colors = ["rgb(0, 0, 0)","rgb(145, 145, 145)","rgb(247, 247, 247)","rgb(255, 251, 239)","rgb(255, 251, 224)","rgb(255, 239, 96)","rgb(255, 192, 84)","rgb(255, 215, 196)","rgb(255, 191, 207)","rgb(255, 132, 189)","rgb(255, 43, 142)","rgb(255, 22, 22)","rgb(206, 208, 255)","rgb(243, 206, 255)","rgb(178, 75, 234)",
"rgb(145, 238, 255)","rgb(15, 168, 219)","rgb(20, 104, 206)","rgb(49, 224, 209)","rgb(186, 239, 134)","rgb(216, 255, 0)","rgb(62, 119, 46)","rgb(173, 140, 91)"];
let selectedColors = ["rgb(206, 208, 255)", "rgb(255, 215, 196)", "rgb(255, 191, 207)", "rgb(255, 192, 84)"];
let ropeCount = selectedColors.length;
let ropeWidth = width / ropeCount;
for (let i = 0; i < ropeCount; i++) {
let ropeX = i * ropeWidth + ropeWidth / 2;
ropes.forEach(rope => drawRope(rope.x1, rope.y1, rope.x2, rope.y2, rope.color, 35));
for (let i = 0; i < colors.length; i++) {
let row = i < 26 ? 0 : 1;
rect((i % 26) * 26, 0 + row * 26, 80, 80);
text("點選上方顏色,搭配屬於你的專屬配色!", 200, 100);
function mouseClicked() {
let index = floor(mouseX / 26);
selectedColors.push(colors[index]);
for (let i = 0; i < ropes.length; i++) {
ropes[i].color = selectedColors[i];
function drawRope(x1, y1, x2, y2, color, thickness) {
let angle = atan2(y2 - y1, x2 - x1);
let halfThickness = thickness / 2;
let cosA = cos(angle + HALF_PI);
let sinA = sin(angle + HALF_PI);
let cosB = cos(angle - HALF_PI);
let sinB = sin(angle - HALF_PI);
vertex(x1 + cosA * halfThickness, y1 + sinA * halfThickness);
vertex(x2 + cosA * halfThickness, y2 + sinA * halfThickness);
vertex(x2 + cosB * halfThickness, y2 + sinB * halfThickness);
vertex(x1 + cosB * halfThickness, y1 + sinB * halfThickness);