{"id":46623,"date":"2023-09-01T19:37:10","date_gmt":"2023-09-01T10:37:10","guid":{"rendered":"https:\/\/www.charlezz.com\/?p=46623"},"modified":"2023-09-01T19:37:13","modified_gmt":"2023-09-01T10:37:13","slug":"palette-%eb%9d%bc%ec%9d%b4%eb%b8%8c%eb%9f%ac%eb%a6%ac-%eb%9c%af%ec%96%b4%eb%b3%b4%ea%b8%b0","status":"publish","type":"post","link":"https:\/\/charlezz.com\/?p=46623","title":{"rendered":"Palette \ub77c\uc774\ube0c\ub7ec\ub9ac \ub72f\uc5b4\ubcf4\uae30"},"content":{"rendered":"\n
\"\"<\/figure>\n\n\n\n

Palette \ub77c\uc774\ube0c\ub7ec\ub9ac<\/a>\ub294 \uc774\ubbf8\uc9c0\uc5d0\uc11c \ub208\uc5d0 \ub744\ub294 \uc0c9\uc0c1\ub4e4\uc744 \ucd94\ucd9c\ud574\uc8fc\ub294 \ub77c\uc774\ube0c\ub7ec\ub9ac\ub2e4.<\/p>\n\n\n\n

\uc774 \ub77c\uc774\ube0c\ub7ec\ub9ac\uac00 \uc5b4\ub5a4\uc2dd\uc73c\ub85c \ub3d9\uc791\ud558\ub294\uc9c0 \ud655\uc778\ud574\ubcf4\uc790.<\/p>\n\n\n\n

Median cut <\/h2>\n\n\n\n
\"\"<\/figure>\n\n\n\n

Palette \ub77c\uc774\ube0c\ub7ec\ub9ac\ub294 Median cut \uc54c\uace0\ub9ac\uc998\uc744 \uae30\ubc18\uc73c\ub85c \ub3d9\uc791\ud55c\ub2e4. Median cut\uc740 \ub9d0 \uadf8\ub300\ub85c \uc911\uc559\uac12\uc744 \uc790\ub978\ub2e4\ub294 \ub73b\uc774\ub2e4. \uac00\uc7a5 \uae34 \ucc28\uc6d0\uc744 \ub530\ub77c \uc911\uc559\uac12\uc774 \uc788\ub294 \uc9c0\uc810(\uc778\ub371\uc2a4)\uc5d0\uc11c \uac01 \ub370\uc774\ud130 \uc9d1\ud569\uc744 \uc7ac\uadc0\uc801\uc73c\ub85c \uc790\ub974\uace0 \uc784\uc758 \uac1c\uc218\uc758 \ucc28\uc6d0 \ub370\uc774\ud130\ub97c \uc77c\ub828\uc758 \uc9d1\ud569\uc73c\ub85c \uc815\ub82c\ud558\ub294 \uc54c\uace0\ub9ac\uc998\uc774\ub2e4. \uc774 \uc54c\uace0\ub9ac\uc998\uc740 \uc77c\ubc18\uc801\uc73c\ub85c \uc0c9\uc0c1 \uc591\uc790\ud654(Color quantization<\/a>)\uc5d0 \uc0ac\uc6a9\ub41c\ub2e4.<\/p>\n\n\n\n

\n

\uc5ec\uae30\uc5d0\uc11c \ub9d0\ud558\ub294 \uc591\uc790\ud654(quantization)\ub780 \uc5f0\uc18d\uc801\uc778 \uac12\uc744\u00a0\ub744\uc5c4\ub744\uc5c4\ud55c \uac12\uc73c\ub85c \ubc14\uafb8\uc5b4 \uadfc\uc0ac\ud558\ub294 \uacfc\uc815\uc744 \uc758\ubbf8\ud55c\ub2e4.<\/p>\n<\/blockquote>\n\n\n\n

ColorCutQuantizer(\uc18c\uc2a4\ucf54\ub4dc<\/a>)<\/h2>\n\n\n\n

ColorCutQuantizer\ub294 Palette \ub77c\uc774\ube0c\ub7ec\ub9ac\uc5d0\uc11c \uc0c9\uc0c1\uc744 \uc591\uc790\ud654 \ud558\ub294 \ud575\uc2ec \ud074\ub798\uc2a4\ub2e4.<\/p>\n\n\n\n

\uc774 \ud074\ub798\uc2a4\uac00 \ud558\ub294 \uc77c\uc744 3\ub2e8\uacc4\ub85c \ucd94\uc0c1\ud654 \ud558\uba74 \ub2e4\uc74c\uacfc \uac19\ub2e4.<\/p>\n\n\n\n

    \n
  1. \ud53d\uc140\uc744 RGB888\uc5d0\uc11c RGB555\ub85c \ubcc0\ud658<\/strong><\/li>\n\n\n\n
  2. \ud788\uc2a4\ud1a0\uadf8\ub7a8 \ub9cc\ub4e4\uae30<\/strong><\/li>\n\n\n\n
  3. \uc784\uc758\uc758 \uc218\ub85c \uceec\ub7ec \uac2f\uc218\ub97c \uc904\uc774\uae30<\/strong><\/li>\n<\/ol>\n\n\n\n

    \uac01\uac01 \ud558\ub098\uc529 \uc0b4\ud3b4\ubcf4\uc790<\/p>\n\n\n\n

    1. \ud53d\uc140 \uc591\uc790\ud654<\/h3>\n\n\n\n

    Palette \ub77c\uc774\ube0c\ub7ec\ub9ac\uc758 ColorCutQuantizer\uc5d0\uc11c\ub294 \uc5f0\uc0b0\ub7c9\uc744 \uc904\uc774\uace0 \ucd5c\uc801\ud654\ub41c \uceec\ub7ec \uac12\uc744 \ucd94\ucd9c\ud558\uae30 \uc704\ud574, quantizeFromRgb888 \ud568\uc218 \ud638\ucd9c\uc744 \ud1b5\ud574 \ud53d\uc140\uc744 \uc591\uc790\ud654\ud558\ub294 \uc791\uc5c5\uc744 \uc120\ud589\ud55c\ub2e4.<\/p>\n\n\n\n

    \n

    \ucef4\ud4e8\ud130 \uadf8\ub798\ud53d\uc2a4\uc5d0\uc11c \uc77c\ubc18\uc801\uc73c\ub85c \ud53d\uc140 \ud558\ub098\ub294 RGB888\ub85c \ud45c\ud604\ud558\ub294\ub370 R\uc740 \ube68\uac15, G\ub294 \ub179\uc0c9, B\ub294 \ud30c\ub791\uc774\uace0 8\uc740 8bits \ub77c\ub294 \uc758\ubbf8\ub2e4. \uc989, R(0~255), G(0~255), B(0~255)\ub85c \ube5b\uc758 \uc0bc\uc6d0\uc0c9 \uc870\ud569\uc73c\ub85c \uc57d 16\ub9cc \uac00\uc9c0\uc758 \uc0c9\uc0c1\uc744 \ud45c\ud604\ud558\uac8c \ub41c\ub2e4. \uc5ec\uae30\uc5d0 \ud22c\uba85\ub3c4 Alpha(0~255)\ub97c \ub354\ud574 \uc77c\ubc18\uc801\uc73c\ub85c 32bits \uc989 4\ubc14\uc774\ud2b8 int\ud0c0\uc785\uc758 \uc815\uc218\ud615\uc73c\ub85c \ud53d\uc140\uc744 \ud45c\ud604\ud55c\ub2e4. Palette\uc5d0\uc11c\ub294 Alpha\ub294 \uace0\ub824\ud558\uc9c0 \uc54a\ub294\ub2e4.<\/p>\n<\/blockquote>\n\n\n\n

    for (int i = 0; i < pixels.length; i++) {\n    final int quantizedColor = quantizeFromRgb888(pixels[i]);<\/strong>\n    \/\/ \uc591\uc790\ud654 \ub41c \ud53d\uc140\uac12\uc73c\ub85c \uc774\ubbf8\uc9c0\ub0b4 \ud53d\uc140\uc744 \ubcc0\uacbd\n    pixels[i] = quantizedColor;\n    ...\n}<\/code><\/pre>\n\n\n\n
    \n
    pixels\uc5d0 length\uc5d0 \uc758\uc874\ud558\uc5ec \ubc18\ubcf5\ubb38\uc744 \uc218\ud589\ud558\uae30 \ub54c\ubb38\uc5d0 \uc2e4\uc81c\ub85c \uc774\ubbf8\uc9c0\uc758 \uc0ac\uc774\uc988(\ub108\ube44 * \ub192\uc774)\uac00 \ud074 \uc218\ub85d \uc5f0\uc0b0\ub7c9\uc774 \ub9ce\uc544\uc9c0\uac8c \ub41c\ub2e4. Palette \ub77c\uc774\ube0c\ub7ec\ub9ac\ub294 \uc77c\uc815 \ud37c\ud3ec\uba3c\uc2a4\ub97c \ubcf4\uc7a5\ud558\uae30 \uc704\ud574 \uc2e4\uc81c\ub85c \ud53d\uc140 \uc591\uc790\ud654 \uc9c4\ud589\ud558\uae30 \uc804\uc5d0 \ube44\ud2b8\ub9f5 \uc774\ubbf8\uc9c0\ub97c 112*112 \uc774\ud558\ub85c \uc791\uac8c(scale-down) \ub9cc\ub4e4\uace0 \uc2dc\uc791\ud55c\ub2e4.<\/em><\/p>\n<\/blockquote>\n\n\n\n
    \uc704 \ucf54\ub4dc\uc5d0\uc11c pixels<\/strong>\ub294 \uc6d0\ubcf8 \ube44\ud2b8\ub9f5 \uc774\ubbf8\uc9c0 \ubc30\uc5f4\uc774\uba70, \uac01 \ud53d\uc140\ub4e4\uc740 quantizeFromRgb888 \ud638\ucd9c \uc774\ud6c4 \uc591\uc790\ud654 \ub41c \ud53d\uc140 \uac12\uc73c\ub85c \uce58\ud658\ub41c\ub2e4.   <\/p>\n\n\n\n
    8\ube44\ud2b8\ub85c \ud45c\ud604\ub418\ub358 \ud53d\uc140\uac12\uc740 \uc591\uc790\ud654 \uc774\ud6c4\uc5d0 5\ube44\ud2b8\ub85c \ud45c\ud604\ub41c\ub2e4.<\/strong> \uc65c \uadf8\ub7f0\uc9c0 \ub0b4\ubd80\ub97c quantizeFromRgb888 \ud568\uc218\uc640 \uadf8 \ub0b4\ubd80\uc5d0\uc11c \ud638\ucd9c\ud558\ub294 modifyWordWidth \ud568\uc218\ub97c \uc0b4\ud3b4\ubcf4\uc790<\/p>\n\n\n\n
    private static int quantizeFromRgb888(int color) {\n    int r = modifyWordWidth<\/em>(Color.red<\/em>(color), 8, QUANTIZE_WORD_WIDTH<\/em>);\n    int g = modifyWordWidth<\/em>(Color.green<\/em>(color), 8, QUANTIZE_WORD_WIDTH<\/em>);\n    int b = modifyWordWidth<\/em>(Color.blue<\/em>(color), 8, QUANTIZE_WORD_WIDTH<\/em>);\n    return r << (QUANTIZE_WORD_WIDTH <\/em>+ QUANTIZE_WORD_WIDTH<\/em>) | g << QUANTIZE_WORD_WIDTH <\/em>| b;\n}\n\nprivate static int modifyWordWidth(int value, int currentWidth, int targetWidth) {\n    final int newValue;\n    if (targetWidth > currentWidth) {\n        newValue = value << (targetWidth - currentWidth);\n    } else {\n        newValue = value >> (currentWidth - targetWidth);\n    }\n    return newValue & ((1 << targetWidth) - 1);\n}<\/pre>\n\n\n\n
    \uc2e4\uc81c\ub85c\ub294 modifyWordWidth \ud638\ucd9c\uc2dc\uc5d0 \uc804\ub2ec\ud558\ub294 \uc778\uc218\uc778 currentWidth \uc640 targetWidth\ub294 \ub77c\uc774\ube0c\ub7ec\ub9ac \uc678\ubd80\uc5d0\uc11c\ub294 \ubcc0\uacbd\uc774 \ubd88\uac00\ub2a5 \ud558\ub2e4. \uadf8\ub7ec\ubbc0\ub85c \uc704 \ud568\uc218\ub97c \uc880 \ub354 \ub2e8\uc21c\ud654 \ud558\uc790\uba74 \ub2e4\uc74c\uacfc \uac19\ub2e4. (QUANTIZE_WORD_WIDTH<\/em> = 5)<\/p>\n\n\n\n
    private static int quantizeFromRgb888(int color) {\n    int r = modifyWordWidth<\/em>(Color.red<\/em>(color));\n    int g = modifyWordWidth<\/em>(Color.green<\/em>(color));\n    int b = modifyWordWidth<\/em>(Color.blue<\/em>(color));\n    return r << (5 <\/em>+ 5<\/em>) | g << 5 <\/em>| b;\n}\n\nprivate static int modifyWordWidth(int value) {\n    int newValue = value >> 3;\n    return newValue & ((1 << 5) - 1);\n}<\/code><\/pre>\n\n\n\n
    \ube44\ud2b8 \uc5f0\uc0b0\uc790\uc5d0 \uc775\uc219\ud558\uc9c0 \uc54a\ub2e4\uba74, \uc774 \ucf54\ub4dc\uac00 \uc5b4\ub835\uac8c \ub290\uaef4\uc9c8 \uc218 \uc788\ub2e4. (\uc774\ubc88 \uae30\ud68c\uc5d0 \ube44\ud2b8\uc5f0\uc0b0\uc790\ub97c \ub2e4\uc2dc \ud55c\ubc88 \uc0b4\ud3b4\ubcf4\uc790!)<\/p>\n\n\n\n
    \ub2e4\uc74c\uacfc \uac19\uc740 \ud53d\uc140 \uac12\uc774 \uc788\ub2e4\uace0 \uac00\uc815\ud574\ubcf4\uc790<\/p>\n\n\n\n
    |   RED (255) |  GREEN (170) |   BLUE (240)  |
    | 1 1 1 1 1 1 1 1 | 1 0 1 0 1 0 1 0 | 1 1 1 1 0 0 0 0 | <\/strong><\/p>\n\n\n\n
    quantizeFromRgb888\ub97c \ud638\ucd9c\ud558\uba74 \ud53d\uc140\uac12\uc758 \ube44\ud2b8\ub97c \uc624\ub978\ucabd\uc73c\ub85c 3\ubc88 \uc26c\ud504\ud2b8 \ud588\ub2e4\uac00 \ub2e4\uc2dc \uc67c\ucabd\uc73c\ub85c 3\ubc88 \uc26c\ud504\ud2b8 \ud558\uba74\uc11c \uc591\uc790\ud654\ub97c \uc9c4\ud589\ud55c\ub2e4. \uadf8\ub7ec\uba74 \ub2e4\uc74c\uacfc \uac19\uc740 \uacb0\uacfc\ub97c \uc5bb\uac8c \ub41c\ub2e4.<\/p>\n\n\n\n
    |   RED (248)   |  GREEN (168) |   BLUE (240)  |
    | 1 1 1 1 1 0 0 0 | 1 0 1 0 1 0 0 0 | 1 1 1 1 0 0 0 0 | <\/strong><\/p>\n\n\n\n
    \uac12\uc774 \ub2ec\ub77c\uc84c\uc9c0\ub9cc \uc0c9\uc0c1\uc744 \ub208\uc73c\ub85c \ubcfc \ub54c\ub294 \ud070 \ucc28\uc774\ub97c \ub290\ub07c\uae30 \uc5b4\ub824\uc6b0\uba70, \uc774\ubbf8\uc9c0\uc5d0\uc11c \uc5f0\uc18d\ub418\ub294 \ube44\uc2b7\ud55c \ud53d\uc140\uac12\ub4e4\uc744 \uadf8\ub8f9\ud654 \ud560 \uc218 \uc788\ub2e4.<\/p>\n\n\n\n
    \n
    \"\"<\/figure>\n\n\n\n
    \"\"<\/figure>\n<\/figure>\n\n\n\n
    2. \ud788\uc2a4\ud1a0\uadf8\ub7a8 \ub9cc\ub4e4\uae30<\/h3>\n\n\n\n
    \uc774 \ud3ec\uc2a4\ud305\uc5d0\uc11c \ub9d0\ud558\ub294 \ud788\uc2a4\ud1a0\uadf8\ub7a8\uc774\ub780 \uc774\ubbf8\uc9c0\ub0b4\uc5d0 \ud3ec\ud568\ub41c \ub3d9\uc77c \ud53d\uc140\uac12\ub4e4\uc758 \uac1c\uc218\ub97c \ubc30\uc5f4\uc5d0 \uce74\uc6b4\ud2b8 \ud574\ub454\uac83\uc744 \uc758\ubbf8\ud55c\ub2e4. <\/p>\n\n\n\n
    int[] hist = new int[1 << (QUANTIZE_WORD_WIDTH * 3)];<\/code><\/pre>\n\n\n\n
    \ucc44\ub110\ub2f9 8\ube44\ud2b8\ub85c \ud45c\ud604\ud558\ub294 RGB\ud3ec\ub9f7\uc5d0 \ub300\ud55c \ud788\uc2a4\ud1a0\uadf8\ub7a8\uc744 \ub9cc\ub4dc\ub824\uba74 2^(3*8) = 2^24 = 16777216 \uae38\uc774\uc758 \ubc30\uc5f4\uc774 \ud544\uc694\ud558\uc9c0\ub9cc, \uc704 \uacfc\uc815\uc5d0\uc11c \ud53d\uc140\uc744 5\ube44\ud2b8\ub85c \uc591\uc790\ud654 \ud588\uae30 \ub54c\ubb38\uc5d0 \ubc30\uc5f4\uc758 \uae38\uc774\ub294 2^(3*5) = 2^15 = 32768\uc774 \ub41c\ub2e4. \uc989 \ucd5c\ub300 32768\uac1c\uc758 \uceec\ub7ec\ub85c \uc774\ubbf8\uc9c0\uac00 \ud45c\ud604\ub41c\ub2e4.<\/p>\n\n\n\n
    \ud788\uc2a4\ud1a0\uadf8\ub7a8 \uc0dd\uc131\uc740 \uc704\uc5d0\uc11c \ub2e4\ub8e8\uc5c8\ub358 \ud53d\uc140 \uc591\uc790\ud654\ub97c \uc9c4\ud589\ud55c \uc9c1\ud6c4\uc5d0 \ubc14\ub85c \uc774\ub8e8\uc5b4 \uc9c4\ub2e4.<\/p>\n\n\n\n
    for (int i = 0; i < pixels.length; i++) {\n    final int quantizedColor = quantizeFromRgb888(pixels[i]);\n    pixels[i] = quantizedColor;\n    \/\/ \ud788\uc2a4\ud1a0\uadf8\ub7a8 \ub9cc\ub4e4\uae30\n    hist[quantizedColor]++;\n<\/strong>}<\/code><\/pre>\n\n\n\n
    \ud788\uc2a4\ud1a0\uadf8\ub7a8\uc744 \ub9cc\ub4e4\uace0 \ub098\uba74 \ub2e4\uc74c\uacfc \uac19\uc774 \uc774\ubbf8\uc9c0\uc5d0\uc11c \uba87\uac1c\uc758 \uceec\ub7ec\uac00 \uc0ac\uc6a9\ub418\uc5c8\ub294\uc9c0 \ud655\uc778\ud558\ub294 \uacfc\uc815\uc744 \uac70\uce5c\ub2e4.<\/p>\n\n\n\n
    int distinctColorCount = 0; \/\/ \uc0ac\uc6a9\ub41c \uceec\ub7ec \uac2f\uc218\nfor (int color = 0; color < hist.length; color++) {\n    ...\n    if (hist[color] > 0) {\n        distinctColorCount++;\n    }\n}<\/code><\/pre>\n\n\n\n
    \uc0ac\uc6a9\ub41c \uceec\ub7ec \uac2f\uc218 \uacc4\uc0b0\uc774 \ub05d\ub0ac\ub2e4\uba74, \uc0ac\uc6a9\ub41c \uceec\ub7ec\ub9cc \ud3ec\ud568\ud558\ub294 \ubc30\uc5f4\uc744  \uc0dd\uc131\ud55c\ub2e4.<\/p>\n\n\n\n
    final int[] colors = mColors = new int[distinctColorCount];\nint distinctColorIndex = 0;\nfor (int color = 0; color < hist.length; color++) {\n    if (hist[color] > 0) {\n        colors[distinctColorIndex++] = color;\n    }\n}<\/code><\/pre>\n\n\n\n
    3. \uc784\uc758\uc758 \uc218\ub85c \uceec\ub7ec \uac2f\uc218\ub97c \uc904\uc774\uae30<\/h3>\n\n\n\n
    median cut\uc774 \uc801\uc6a9\ub418\ub294 \uac00\uc7a5 \uc911\uc694\ud55c \ubd80\ubd84\uc774\ub2e4. \ud53d\uc140 \uc591\uc790\ud654\ub97c \ud1b5\ud574 \uc0ac\uc6a9\ub41c \uceec\ub7ec \uac2f\uc218\ub97c \uc904\uc774\uae30\ub294 \ud588\uc9c0\ub9cc, \ucda9\ubd84\ud558\uc9c0 \uc54a\ub2e4. \ub0b4\ubd80\uc5d0\uc11c quantizePixels\ub77c\ub294 \uba54\uc11c\ub4dc \ud638\ucd9c\uc744 \ud1b5\ud574 \uae30\ubcf8\uac12\uc73c\ub85c \ucd5c\ub300 16\uceec\ub7ec\ub97c \ucd94\ucd9c\ud558\uac8c \ub41c\ub2e4.<\/p>\n\n\n\n
    private List<Palette.Swatch> quantizePixels(int maxColors) { \/\/ maxColors=16\n\n    PriorityQueue<Vbox> pq = new PriorityQueue<>(maxColors, VBOX_COMPARATOR_VOLUME);\n    \n    pq.offer(new Vbox(0, mColors.length - 1));\n\n    splitBoxes(pq, maxColors);\n\n    return generateAverageColors(pq);\n}\n\n\ub2e4\uc18c \ub0b4\uc6a9\uc774 \ubcf5\uc7a1\ud560 \uc218 \uc788\uc5b4 \uc8fc\uc694 \uc6a9\uc5b4\ub97c \uc815\ub9ac\ud558\uace0\uc790 \ud55c\ub2e4.<\/code><\/pre>\n\n\n\n