화소점처리

시연 영상(유튜브): https://youtu.be/MDl-Dp8Kacc

---

<원본 영상 더하기>

알고리즘

실행결과

function lightImage(){
            outH = inH;
        outW = inW;
        //메모리 할당(3차원 배열)
        outImage = new Array(3);//3면 
        for(var m=0;m<3;m++){
            outImage[m] = new Array(outH);
            for(let n=0; n<outH; n++)
                outImage[m][n] = new Array(outW)
        }
        //얼마나 밝게 할 것인지 값을 입력받는다.(value)
        let value = parseInt(prompt("숫자를 입력하세요","100"))

        for(var rgb=0;rgb<3;rgb++){
                for (let i=0; i<inH; i++) {
                    for (let k=0; k<inW; k++) {
                        if((startX <= k && k<= endX )&&(startY <=i && i<=endY)){
                            if(inImage[rgb][i][k]+ value > 255)
                            outImage[rgb][i][k] =255;
                            else
                            outImage[rgb][i][k] = inImage[rgb][i][k]+ value;
                        }else{
                            outImage[rgb][i][k] = inImage[rgb][i][k];
                    }
                    }
                }
            }
            displayImage();
    }
    function lightImage_mouse(){
        var mouseCheck= document.getElementById("mouseEnable");
            //사각형 선택이 체크가 안되었을때!
            if(!mouseEnable.checked){
                startX = startY=0;
                endX = inW;
                endY= inH;
                lightImage();
                return;
            }
            //사각형 체크됨.
            //마우스 이벤트 리스너 켜기
            onEventListener();
    }

 

 

---

 

 

 

<원본 이미지 빼기>

알고리즘

결과화면

function darkImage(){
        outH = inH;
        outW = inW;
        //메모리 할당(3차원 배열)
        outImage = new Array(3);//3면 
        for(var m=0;m<3;m++){
            outImage[m] = new Array(outH);
            for(let n=0; n<outH; n++)
                outImage[m][n] = new Array(outW)
        }
        //얼마나 밝게 할 것인지 값을 입력받는다.(value)
        let value = parseInt(prompt("숫자를 입력하세요","100"))

        for(var rgb=0;rgb<3;rgb++){
                for (let i=0; i<inH; i++) {
                    for (let k=0; k<inW; k++) {
                        if((startX <= k && k< endX )&&(startY <=i && i<endY)){
                            outImage[rgb][i][k] = inImage[rgb][i][k]- value;
                        }else{
                            outImage[rgb][i][k] = inImage[rgb][i][k];
                        }
                    }
                }
            }
            displayImage();
    }
    function darkImage_mouse(){
        var mouseCheck= document.getElementById("mouseEnable");
            //사각형 선택이 체크가 안되었을때!
            if(!mouseEnable.checked){
                startX = startY=0;
                endX = inW;
                endY= inH;
                darkImage();
                return;
            }
            //사각형 체크됨.
            //마우스 이벤트 리스너 켜기
            onEventListener();
    }

 

 

 

---

시연 영상(유튜브): https://youtu.be/2PWzCH5ZglY

---

 

<원본이미지 그레이 스케일>

 

알고리즘

결과화면

function grayImage(){//그레이 스케일 알고리즘
        outH = inH;
        outW = inW;
        //메모리 할당(3차원 배열)
        outImage = new Array(3);//3면 
        for(var m=0;m<3;m++){
            outImage[m] = new Array(outH);
            for(let n=0; n<outH; n++)
                outImage[m][n] = new Array(outW)
        }
        
        //--영상처리 알고리즘--
        for (let i=0; i<inH; i++) {
            for (let k=0; k<inW; k++) {
                let sumValue = inImage[0][i][k]+inImage[1][i][k]+inImage[2][i][k];
                let avgValue = sumValue/3;

                if((startX <= k&& k<endX)&&(startY<=i&&i<endY)){
                    outImage[0][i][k]=avgValue;  
                    outImage[1][i][k]=avgValue;
                    outImage[2][i][k]=avgValue; 
                }else{
                    outImage[0][i][k]=inImage[0][i][k];  
                    outImage[1][i][k]=inImage[1][i][k];
                    outImage[2][i][k]=inImage[2][i][k];
                }     
                    
                }
            }
            // ******************************
            displayImage();

    }

    
    function grayImage_mouse(){
        var mouseCheck= document.getElementById("mouseEnable");
            //사각형 선택이 체크가 안되었을때!
            if(!mouseEnable.checked){
                startX = startY=0;
                endX = inW;
                endY= inH;
                grayImage();
                return;
            }
            //사각형 체크됨.
            //마우스 이벤트 리스너 켜기
            onEventListener();
    }

 

 

---

 

<원본이미지 흑백(127)처리>

알고리즘

결과화면

 

function bwImage(){
        outH = inH;
        outW = inW;
        //메모리 할당(3차원 배열)
        outImage = new Array(3);//3면 
        for(var m=0;m<3;m++){
            outImage[m] = new Array(outH);
            for(let n=0; n<outH; n++)
                outImage[m][n] = new Array(outW)
        }

        for (let i=0; i<inH; i++) {
            for (let k=0; k<inW; k++) {
                let sumValue = inImage[0][i][k]+inImage[1][i][k]+inImage[2][i][k];
                let avgValue = sumValue/3;

                if((startX <= k && k<= endX )&&(startY <=i && i<=endY)){
                    if(avgValue>127){
                        outImage[0][i][k]=255;  
                        outImage[1][i][k]=255;
                        outImage[2][i][k]=255; 
                    }
                    else{
                        outImage[0][i][k]=0;  
                        outImage[1][i][k]=0;
                        outImage[2][i][k]=0; 
                    }
                }else{
                    outImage[0][i][k]=inImage[0][i][k];  
                    outImage[1][i][k]=inImage[1][i][k];
                    outImage[2][i][k]=inImage[2][i][k];
                }
                    
            }
        }
        displayImage();
    }
    function bwImage_mouse(){//흑백이미지 127에 마우스리스너
            var mouseCheck= document.getElementById("mouseEnable");
            //사각형 선택이 체크가 안되었을때!
            if(!mouseEnable.checked){
                startX = startY=0;
                endX = inW;
                endY= inH;
                bwImage();
                return;
            }
            //사각형 체크됨.
            //마우스 이벤트 리스너 켜기
            onEventListener();

        }

 

---

 

<원본이미지 흑백처리(평균)>

 

알고리즘

결과화면

//평균값을 기준으로한 흑백이미지
    function avgImage(){
        outH = inH;
        outW = inW;
        //메모리 할당(3차원 배열)
        outImage = new Array(3);//3면 
        for(var m=0;m<3;m++){
            outImage[m] = new Array(outH);
            for(let n=0; n<outH; n++)
                outImage[m][n] = new Array(outW)
        }

        let hap=0,avg,cnt=0;

        for(var rgb=0;rgb<3;rgb++){
            for (let i=0; i<inH; i++) {
                for (let k=0; k<inW; k++) {
                    hap+=inImage[rgb][i][k];
                    cnt++;
                }
            }
        }

        avg=parseInt(hap/cnt);
        
        for (let i=0; i<inH; i++) {
            for (let k=0; k<inW; k++) {
                let sumValue = inImage[0][i][k]+inImage[1][i][k]+inImage[2][i][k];
                let avgValue = sumValue/3;

                if((startX <= k && k<= endX )&&(startY <=i && i<=endY)){
                    if(avgValue>avg){
                        outImage[0][i][k]=255;  
                        outImage[1][i][k]=255;
                        outImage[2][i][k]=255; 
                    }
                    else{
                        outImage[0][i][k]=0;  
                        outImage[1][i][k]=0;
                        outImage[2][i][k]=0; 
                    }
                }else{
                    outImage[0][i][k]=inImage[0][i][k];
                    outImage[1][i][k]=inImage[1][i][k];
                    outImage[2][i][k]=inImage[2][i][k];
                }
                    
            }
        }
        displayImage();
    }
    function avgImage_mouse(){
        var mouseCheck= document.getElementById("mouseEnable");
            //사각형 선택이 체크가 안되었을때!
            if(!mouseEnable.checked){
                startX = startY=0;
                endX = inW;
                endY= inH;
                avgImage();
                return;
            }
            //사각형 체크됨.
            //마우스 이벤트 리스너 켜기
            onEventListener();
    }

 

---

시연 영상(유튜브): https://youtu.be/p9lDQxvj3O8

---

 

<원본이미지 곱하기>

알고리즘

결과화면

 

function gopImage(){
        outH = inH;
        outW = inW;
        //메모리 할당(3차원 배열)
        outImage = new Array(3);//3면 
        for(var m=0;m<3;m++){
            outImage[m] = new Array(outH);
            for(let n=0; n<outH; n++)
                outImage[m][n] = new Array(outW)
        }
        //얼마나 밝게 할 것인지 값을 입력받는다.(value)
        let value = parseInt(prompt("곱할 값을 입력하시오","2"))

        for(var rgb=0;rgb<3;rgb++){
                for (let i=0; i<inH; i++) {
                    for (let k=0; k<inW; k++) {
                        if((startX <= k && k<= endX )&&(startY <=i && i<=endY)){
                            if(inImage[rgb][i][k]* value > 255)
                            outImage[rgb][i][k] =255;
                            else
                            outImage[rgb][i][k] = inImage[rgb][i][k]* value;
                        }else{
                            outImage[rgb][i][k] = inImage[rgb][i][k];
                        }
                    }
                }
            }
            displayImage();
    }
    function gopImage_mouse(){
        var mouseCheck= document.getElementById("mouseEnable");
            //사각형 선택이 체크가 안되었을때!
            if(!mouseEnable.checked){
                startX = startY=0;
                endX = inW;
                endY= inH;
                gopImage();
                return;
            }
            //사각형 체크됨.
            //마우스 이벤트 리스너 켜기
            onEventListener();
    }

 

---

 

<원본이미지 나누기>

알고리즘

결과화면

 

function divImage(){
        outH = inH;
        outW = inW;
        //메모리 할당(3차원 배열)
        outImage = new Array(3);//3면 
        for(var m=0;m<3;m++){
            outImage[m] = new Array(outH);
            for(let n=0; n<outH; n++)
                outImage[m][n] = new Array(outW)
        }
        //얼마나 밝게 할 것인지 값을 입력받는다.(value)
        let value = parseInt(prompt("나눌 값을 입력하시오","2"))

        for(var rgb=0;rgb<3;rgb++){
            for (let i=0; i<inH; i++) {
                for (let k=0; k<inW; k++) {
                    if((startX <= k && k<= endX )&&(startY <=i && i<=endY)){
                        if(inImage[rgb][i][k]/ value > 255)
                            outImage[rgb][i][k] =255;
                        else
                            outImage[rgb][i][k] = inImage[rgb][i][k]/value;
                    }else{
                        outImage[rgb][i][k] = inImage[rgb][i][k];
                    }
                }
            }
    }
    displayImage();
}

    function divImage_mouse(){
        var mouseCheck= document.getElementById("mouseEnable");
            //사각형 선택이 체크가 안되었을때!
            if(!mouseEnable.checked){
                startX = startY=0;
                endX = inW;
                endY= inH;
                divImage();
                return;
            }
            //사각형 체크됨.
            //마우스 이벤트 리스너 켜기
            onEventListener();
    }

 

 

---

 

시연 영상(유튜브): https://youtu.be/Q3UptuqC4s8

---

 

<원본이미지 파라볼라 컵 처리하기>

알고리즘

결과화면

 

 function paraCupImage(){
        outH=inH;
        outW=inW;

        outImage = new Array(3);//3면 
        for(var m=0;m<3;m++){
            outImage[m] = new Array(outH);
            for(let n=0; n<outH; n++)
                outImage[m][n] = new Array(outW);
        }

        for(var rgb=0;rgb<3;rgb++){
            for (let i=0; i<outH; i++) {
                for (let k=0; k<outW; k++) {
                    if((startX <= k && k< endX )&&(startY <=i && i<endY)){
                    outImage[rgb][i][k]=Math.pow((inImage[rgb][i][k]/128-1),2)*255;
                    }else{
                        outImage[rgb][i][k] = inImage[rgb][i][k];
                    }

                }
            }
        }
        displayImage();
    }
    function paraCupImage_mouse(){
        var mouseCheck= document.getElementById("mouseEnable");
            //사각형 선택이 체크가 안되었을때!
            if(!mouseEnable.checked){
                startX = startY=0;
                endX = inW;
                endY= inH;
                paraCupImage();
                return;
            }
            //사각형 체크됨.
            //마우스 이벤트 리스너 켜기
            onEventListener();
    }

 

 

---

 

<원본이미지 파라볼라캡처리하기>

알고리즘

결과화면

 

function paraCapImage(){
        outH=inH;
        outW=inW;

        outImage = new Array(3);//3면 
        for(var m=0;m<3;m++){
            outImage[m] = new Array(outH);
            for(let n=0; n<outH; n++)
                outImage[m][n] = new Array(outW);
        }

        for(var rgb=0;rgb<3;rgb++){
            for (let i=0; i<outH; i++) {
                for (let k=0; k<outW; k++) {
                    if((startX <= k && k< endX )&&(startY <=i && i<endY)){
                    outImage[rgb][i][k]=255- (255)*Math.pow((inImage[rgb][i][k]/128-1),2);
                    }else{
                        outImage[rgb][i][k] = inImage[rgb][i][k];
                    }
                }
            }
        }
        displayImage();
    }
    function paraCapImage_mouse(){
        var mouseCheck= document.getElementById("mouseEnable");
            //사각형 선택이 체크가 안되었을때!
            if(!mouseEnable.checked){
                startX = startY=0;
                endX = inW;
                endY= inH;
                paraCapImage();
                return;
            }
            //사각형 체크됨.
            //마우스 이벤트 리스너 켜기
            onEventListener();
    }

 

---

<원본이미지 감마처리하기>

알고리즘

결과화면

 

 function gammaImage(){
        outH=inH;
        outW=inW;

        outImage = new Array(3);//3면 
        for(var m=0;m<3;m++){
            outImage[m] = new Array(outH);
            for(let n=0; n<outH; n++)
                outImage[m][n] = new Array(outW);
        }

        let value = parseInt(prompt("감마값입력","1.5"));

        if(value<0)
            value=1/(1-value);
        else
            value+=1;
        
        for(var rgb=0;rgb<3;rgb++){
            for (let i=0; i<outH; i++) {
                for (let k=0; k<outW; k++) {
                    if((startX <= k && k< endX )&&(startY <=i && i<endY)){
                    outImage[rgb][i][k]=parseInt((inImage[rgb][i][k]/255)**(value)*255+0.5);
                    }else{
                        outImage[rgb][i][k] = inImage[rgb][i][k];
                    }
                }
            }
        }
        displayImage();
    }
    function gammaImage_mouse(){
        var mouseCheck= document.getElementById("mouseEnable");
            //사각형 선택이 체크가 안되었을때!
            if(!mouseEnable.checked){
                startX = startY=0;
                endX = inW;
                endY= inH;
                gammaImage();
                return;
            }
            //사각형 체크됨.
            //마우스 이벤트 리스너 켜기
            onEventListener();
    }

 

 

---

시연 영상(유튜브): https://youtu.be/QTBPBwKIkqA

---

 

<원본이미지 채도 변경(빼기)>

알고리즘

결과화면

function saturImage() { // 채도변경 영상 알고리즘
            // (중요!) 출력 이미지의 크기가 결정 ---> 알고리즘에 의존...
            outH = inH;
            outW = inW;
            // 출력 영상의 3차원 메모리 할당
            outImage = new Array(3); // 3면
            for(var m=0; m<3; m++) {
                outImage[m] = new Array(outH);
                for(let n=0; n<outH; n++)
                    outImage[m][n] = new Array(outW);
            }
            // **** 진짜 영상처리 알고리즘 *****
            let s_value = parseFloat(prompt("숫자입력(0~1)","-0.2"));
            for (let i=0; i<inH; i++) {
                for (let k=0; k<inW; k++) {
                    if((startX <= k && k< endX )&&(startY <=i && i<endY)){
                        let R = inImage[0][i][k];
                        let G = inImage[1][i][k];
                        let B = inImage[2][i][k];

                        //RGB --> HSV
                        let hsv = rgb2hsv(R,G,B);//{h:0~360, s:0~1.0, v:0~1.0}
                        let H = hsv.h;
                        let S = hsv.s;
                        let V = hsv.v;
                        //채도를 변경
                        S = S+s_value;
                        //HSV --> RGB
                        let rgb = hsv2rgb(H,S,V);
                        R = rgb.r;
                        G = rgb.g;
                        B = rgb.b;
                        //출력 영상에 넣기
                        outImage[0][i][k] = R;
                        outImage[1][i][k] = G;
                        outImage[2][i][k] = B;
                    }
                    else{
                        outImage[0][i][k] = inImage[0][i][k];
                        outImage[1][i][k] = inImage[1][i][k];
                        outImage[2][i][k] = inImage[2][i][k];
                    }
                }
            }
            
            // ******************************
            displayImage();
        }
        function saturImage_mouse(){
            var mouseCheck= document.getElementById("mouseEnable");
            //사각형 선택이 체크가 안되었을때!
            if(!mouseEnable.checked){
                startX = startY=0;
                endX = inW;
                endY= inH;
                saturImage();
                return;
            }
            //사각형 체크됨.
            //마우스 이벤트 리스너 켜기
            onEventListener();
        }

 

---

<원본이미지 명도 변경(빼기)>

알고리즘

결과화면

 

function intensityImage(){//명도변경
            // (중요!) 출력 이미지의 크기가 결정 ---> 알고리즘에 의존...
            outH = inH;
            outW = inW;
            // 출력 영상의 3차원 메모리 할당
            outImage = new Array(3); // 3면
            for(var m=0; m<3; m++) {
                outImage[m] = new Array(outH);
                for(let n=0; n<outH; n++)
                    outImage[m][n] = new Array(outW);
            }
            // **** 진짜 영상처리 알고리즘 *****
            let s_value = parseFloat(prompt("숫자입력(0~1)","-0.2"));
            for (let i=0; i<inH; i++) {
                for (let k=0; k<inW; k++) {
                    if((startX <= k && k< endX )&&(startY <=i && i<endY)){
                        let R = inImage[0][i][k];
                        let G = inImage[1][i][k];
                        let B = inImage[2][i][k];

                        //RGB --> HSV
                        let hsv = rgb2hsv(R,G,B);//{h:0~360, s:0~1.0, v:0~1.0}
                        let H = hsv.h;
                        let S = hsv.s;
                        let V = hsv.v;
                        //명도를 변경
                        V = V+s_value;
                        //HSV --> RGB
                        let rgb = hsv2rgb(H,S,V);
                        R = rgb.r;
                        G = rgb.g;
                        B = rgb.b;
                        //출력 영상에 넣기
                        outImage[0][i][k] = R;
                        outImage[1][i][k] = G;
                        outImage[2][i][k] = B;
                    }else{
                        outImage[0][i][k] = inImage[0][i][k];
                        outImage[1][i][k] = inImage[1][i][k];
                        outImage[2][i][k] = inImage[2][i][k];
                    }
                }
            }
            
            // ******************************
            displayImage();
        }
        function intensityImage_mouse(){
            var mouseCheck= document.getElementById("mouseEnable");
            //사각형 선택이 체크가 안되었을때!
            if(!mouseEnable.checked){
                startX = startY=0;
                endX = inW;
                endY= inH;
                intensityImage();
                return;
            }
            //사각형 체크됨.
            //마우스 이벤트 리스너 켜기
            onEventListener();
        }

 

---

 

<원본이미지에서 오렌지 추출하기>

알고리즘

결과화면

 

function orangeImage() { // 오렌지 추출 (컴퓨터 비전)
            // (중요!) 출력 이미지의 크기가 결정 ---> 알고리즘에 의존...
            outH = inH;
            outW = inW;
            // 출력 영상의 3차원 메모리 할당
            outImage = new Array(3); // 3면
            for(var m=0; m<3; m++) {
                outImage[m] = new Array(outH);
                for(let n=0; n<outH; n++)
                    outImage[m][n] = new Array(outW);
            }
            // **** 진짜 영상처리 알고리즘 *****
            
            for (let i=0; i<inH; i++) {
                for (let k=0; k<inW; k++) {
                    if((startX <= k && k< endX )&&(startY <=i && i<endY)){
                        let R = inImage[0][i][k];
                        let G = inImage[1][i][k];
                        let B = inImage[2][i][k];

                        //RGB --> HSV
                        let hsv = rgb2hsv(R,G,B);//{h:0~360, s:0~1.0, v:0~1.0}
                        let H = hsv.h;
                        let S = hsv.s;
                        let V = hsv.v;
                        //H값에 따른 범위를 추출. 예) 오렌지 : 8~30 (0~360)
                        if(8<=(H*360) && (H*360) <=30){//오렌지 그냥두기
                            outImage[0][i][k] = R;
                            outImage[1][i][k] = G;
                            outImage[2][i][k] = B;
                        }
                        else{//나머지는 회색영상
                            let avg = parseInt((R+G+B)/3);
                            outImage[0][i][k] = outImage[1][i][k] = outImage[2][i][k] = avg;
                        }
                    }
                    else{
                        outImage[0][i][k] = inImage[0][i][k];
                        outImage[1][i][k] = inImage[1][i][k];
                        outImage[2][i][k] = inImage[2][i][k];
                    }
                }
            }
            
            // ******************************
            displayImage();
        }
        function orangeImage_mouse(){
            var mouseCheck= document.getElementById("mouseEnable");
            //사각형 선택이 체크가 안되었을때!
            if(!mouseEnable.checked){
                startX = startY=0;
                endX = inW;
                endY= inH;
                orangeImage();
                return;
            }
            //사각형 체크됨.
            //마우스 이벤트 리스너 켜기
            onEventListener();
        }