내 색상 혼합 기능이 예상대로 작동하지 않는 이유는 무엇입니까?

Question

두 가지 인수를 사용하는이 함수가 있습니다. 배열은 [r, g, b] 형식의 배열입니다.

function mix(color1, color2) 
{ 
    var r = Math.round((color1[0] + color2[0])/2); 
    var g = Math.round((color1[1] + color2[1])/2); 
    var b = Math.round((color1[2] + color2[2])/2); 

    return [r, g, b]; 
} 

나는 보라색 빨간색 (255, 0, 0)과 파란색 (0, 0, 255), TT 나에게 [128,0,128]을 제공을 혼합하려고합니다. 하지만 블루 (0, 0, 255)과 노란색 혼합하려고하는 경우 (255, 255, 0)

console.log(mix([255,0,0], [0,0,255])); 
console.log(mix([255,255,0], [0,0,255])); 

대신 녹색의, 나에게 회색 [128, 128, 128]을 제공합니다. 왜 이런 일이 일어나는 걸까요?

Answer 1

결과 색상을 두 기본 색상의 평균으로 계산하기 때문에.

색상은 믹스에 따라 다른 방식으로 작동합니다. 여러 가지 색상의 페인트를 혼합하면 결과는 어둡고 거의 검게됩니다. 그러나 만약 당신이 다른 색깔의 빛을 혼합한다면 결과는 거의 희게 될 것입니다. 먼저 시뮬레이트 할 프로세스를 정의하십시오 - 페인트를 섞는 것과 비슷합니다. 맞습니까? 혼합 색상의

두 가지 기본적인 방법은 다음과 같습니다

: 그런 보이는

첨가제 혼합, : 그처럼 보이는

• 감산 혼합,

감산 색 혼합이 필요하며 출력은 RGB 표기법이어야합니다.

Answer 2

색상을 HSL 또는 HSV 색상 모델로 변환해야합니다 (예 : this page과 같이 여기 또는 Google에서 많은 샘플을 변환해야합니다.).

그런 다음 결과 숫자를 평균 한 다음 다시 RGB로 변환하십시오.

이렇게하면 채도와 밝기가 일정하게 유지되고 두 원본 색상의 중간에 올바른 색조가 유지됩니다.

function mix(color1, color2, amount) 
{ 
    if (typeof amount === "undefined") { 
     amount = 0.5; 
    } 

    var hsl1 = rgbToHsl.apply(this, color1); 
    var hsl2 = rgbToHsl.apply(this, color2); 

    var h = amount * hsl1[0] + (1 - amount) * hsl2[0]; 
    var s = amount * hsl1[1] + (1 - amount) * hsl2[1]; 
    var l = amount * hsl1[2] + (1 - amount) * hsl2[2]; 

    return hslToRgb(h, s, l); 
} 

NB :

이 라이브러리는 위의 링크를 사용하여이는 (난 그냥 실제로 아직 통역에 던져하지 않았다 알고리즘이 올바른지), 그 결과가해야 할 수도 있습니다 테스트되지 않은 코드는 반올림. 그러나 보너스 포인트의 경우 50/50 이외의 혼합 비율을 지정할 수도 있습니다.

Answer 3

RGB 공간 대신 ​​CMY 공간에서 작업해야 할 것으로 예상되는 것을 얻으려면.

function rgb2cmy (r, g, b) { 
    var c = 255-r; 
    var m = 255-g; 
    var y = 255-b; 
    return [c,m,y]; 
} 

그리고 단순히 RGB로 다시 변환하는 과정을 역 :

function cmy2rgb (c, m, y) { 
    var r = 255-c; 
    var g = 255-m; 
    var b = 255-y; 
    return [r,g,b]; 
} 

을 (당신이주의를 기울여왔다면 당신이 생각하는 것을

여기 CMY로 변환하는 간단한 RGB입니다 그 두 함수가 똑같은 일을합니다.)

Answer 4

수식이 잘 작동한다고 생각합니다. 예를 들어, 포토샵이 파란색 일 경우 어떻게할까요? 노란색으로 xt하고 흐림 효과를 적용하면 중간에 회색이 나타납니다. 파란색과 노란색을 섞어서 녹색을 만들지 마십시오. 빨강, 초록, 파랑은 컴퓨터 모니터, 카메라 필름 및 인간의 눈에 표시된 원색입니다.

옐로우는 빨강과 녹색의 혼합입니다. 즉, 노란색이 보일 때 눈의 빨강과 녹색의 민감한 원뿔이 자극을받습니다. 직관적으로 보이지 않을 수도 있지만 사실입니다. 돋보기 밑에있는 화면의 노란색 영역을 보면 빨간색과 녹색 점들로 구성되어있는 것을 볼 수 있습니다.

이것은 초등학교에서 배웠던 것과는 대조적이며 때로는 페인트 또는 잉크를 섞으면 파란색과 노란색으로 (일반적으로 진흙 투성이) 녹색을 만들 수 있습니다. 따라서 두 가지 색상을 혼합하는 표준 방법 인 알고리즘을 변경하지 않는 것이 좋습니다. 당신의 기대를 바꾸십시오. :) 여기

Answer 5

이 개 주요 이슈 : 감산이 혼합 대

첨가제 - 그 읽기 쉽게 약

하지만 내가 생각하기에, 주요 문제는 파란색과 노란색 페인트 녹색하지 않는 것이 었습니다. 생각하고있는 파란색 유형은 사실 청색이 아닙니다. 시안 색 또는 청색이 약간 더 녹색으로 변합니다.

순수한 "청색"은 따뜻함 (적색쪽으로) 또는 차가움 (황색/녹색쪽으로)이 아니며 페인트는 초박칠 적색 음영과 같을 것입니다 - 청색이지만 꽤 어두운 (거의 네이비) 파란색 .

페인트가 노란색으로 혼합되면 밝은 녹색을 얻을 수 없으며 더 많은 회색이됩니다. 믹스에서 밝은 페인트 색을 얻으려면 색상환에서 서로 교차하지 않는 색상을 사용하는 것이 필수적이지만 실제로는 가능한 한 가장 가까이에 있으므로 밝은 녹색은 실제로 페인트에서만 얻을 수 있습니다 녹색을 띤 황색과 녹색을 섞는 것에서 - 즉 그들은 이웃입니다.

녹색은 여전히 ​​순수한 녹색만큼 밝지 않습니다. 그것은 빼기 (페인트 혼합)에서 수행 할 수 없습니다 - 색상을 결합하고 새로운 순수한 색상을 얻으려면 컬러 조명으로 만 수행 할 수 있습니다. 당신이 극장에서 보는 것처럼 첨가제 믹싱.

그러나 첨가제 혼합은 다소 반 직관적입니다 - 감산 페인트 대신 파란색/노란색 혼합이 중성 회색 (이론상 검은 색)을주는 대신 실제로 흰색을 얻게됩니다 .... (여전히 녹색이 아닙니다. !).

심리학과 생리학이 관련되어 있기 때문에 매우 복잡한 분야입니다. 우리의 두뇌는 정기적으로 색상 인식을 속이거나 실수합니다. 예. 검은 색을 섞으면 짙은 녹색을 -니다 - 밝기가 감소함에 따라 감도 또는 빨간색/초록색 원뿔과 관련됩니다 - 실제로는 진한 황색이지만 녹색이 보입니다.