캔버스에서 video 쓰는 이유

캔버스는 기본적으로 픽셀 단위로 조작이 가능한데, 비디오도 마찬가지로 그래픽적으로 조작 가능
( ex. ) 비디오 픽셀단위로 쪼개서 뒤섞거나.. 등

이미지 대신에 비디오를 그린 거다!! 똑같다

결국 캔버스는

그리고 다 지우고

그리고 또 다시 지우고

---

1. Video Basic

drawImage() 할 수 있는 것

1. 이미지
2. 비디오
3. 캔버스

canplaythrough 이벤트

재생 준비 되면 탁! 재생하는

html 비디오 태그는 숨기기

video {
    position: absolute;
    width: 0;
    height: 0;
}

const canvas = document.querySelector('.canvas');
const ctx = canvas.getContext('2d');
let canPlayState = false;

ctx.textAlign = 'center';
ctx.fillText('비디오 로딩 중..', 300, 200);

const videoElem = document.querySelector('.video');
videoElem.addEventListener('canplaythrough', render);

function render() {
    ctx.drawImage(videoElem, 0, 0, 600, 400);
    requestAnimationFrame(render);
}

---

2. video 위 텍스트

currentTime

비디오의 현재 재생시간

for (let i = 0; i < messages.length; i++) {
  if (videoElem.currentTime > messages[i].time) {
    ctx.fillText(messages[i].message, messages[i].x, messages[i].y);
  }
}

---

const canvas = document.querySelector('.canvas');
const ctx = canvas.getContext('2d');
ctx.font = 'bold 50px serif';
ctx.fillStyle = 'red';

const videoElem = document.querySelector('.video');
videoElem.addEventListener('canplaythrough', render);

const messages = [
    { time: 1, message: '1 ㅋㅋ', x: 100, y: 100 },
    { time: 3, message: '2 ㅎㅎ', x: 300, y: 300 },
    { time: 5, message: '3 ㅊㅊ', x: 400, y: 200 },
];

function render() {
    console.log(videoElem.currentTime);
    ctx.drawImage(videoElem, 0, 0, 600, 400);

    for (let i = 0; i < messages.length; i++) {
      if (videoElem.currentTime > messages[i].time) {
        ctx.fillText(messages[i].message, messages[i].x, messages[i].y);
      }
    }

    requestAnimationFrame(render);
}

---

3. video 색상 변환

getImageData

아하!! 픽셀단위 색상 추출은 이렇게 하면 되는구나

보이시는가! 무한 렌더링!! 마 이게 비디오다
결국 캔버스는
그리고 다 지우고
그리고 또 다시 지우고

getImageData.data

console.log(imageData.data);

// ..ㅁ...머노 배열원소 9만 6천개

왜 9만 6천개??

w: 600, h: 400, rgba라 4개
=> 24만 픽셀 * 4

• 여기서는 rgba의 알파채널(a)는 다 맥시멈이니까 i * 4는 항상 255

console.log(imageData.data[0]);

// 아하!!

• 각 i * 4 한 것들은 다 각각 r,g,b 색상들의 맥시멈으로 끌어올려주는 것!

• 즉, 버튼을 누르면 colorValue 값이 바뀌도록 설정해야 함!!

---

putImageData()

putImageData(imageData, dx, dy)
putImageData(imageData, dx, dy, dirtyX, dirtyY, dirtyWidth, dirtyHeight)

MDN Docs

function render() {
    ctx.drawImage(videoElem, 0, 0, 600, 400);
    imageData = ctx.getImageData(0, 0, 600, 400);
    leng = imageData.data.length / 4;

    for (let i = 0; i < leng; i++) {
        switch (colorValue) {
            case 'red':
                imageData.data[i * 4 + 0] = 255;
                break;
            case 'green':
                imageData.data[i * 4 + 1] = 255;
                break;
            case 'blue':
                imageData.data[i * 4 + 2] = 255;
                break;
        }
    }

    ctx.putImageData(imageData, 0, 0);
    requestAnimationFrame(render);
}

---

❤️ rgb는 왜 256개라며!! 왜 아니라 255일까?

명심해!!! 상대는 컴퓨터다!!

starts from the

0

---

버튼 colorValue 세팅 (feat. 이벤트 위임)

• 각 버튼은 data-color= "뫄뫄" 값을 가진다

이벤트 위임

• 모든 버튼에 addEventListener 을 하지 않고, 부모 Elm인 div.btns에 이벤트 위임

<div class="btns">
            <button class="btn" data-color="red">R</button>
            <button class="btn" data-color="green">G</button>
            <button class="btn" data-color="blue">B</button>
            <button class="btn" data-color="">Reset</button>
        </div>

const btnsElem = document.querySelector('.btns');

for (let i = 0; i < leng; i++) {
    switch (colorValue) {
        case 'red':
            imageData.data[i * 4 + 0] = 255;
            break;
        case 'green':
            imageData.data[i * 4 + 1] = 255;
            break;
        case 'blue':
            imageData.data[i * 4 + 2] = 255;
            break;
    }
}

    ctx.putImageData(imageData, 0, 0);
    requestAnimationFrame(render);
}

btnsElem.addEventListener('click', function (e) {
    colorValue = e.target.getAttribute('data-color');
});

1단계. 클릭된 버튼(이벤트 위임됨!!) 의 data-color을 가져온다
2단계. colorValue 값을 변경한다
3단계. render()는 계속 일어나고 있으므로, 클릭시 새로 변경된 colorValue 값에 따라 switch문 작동
4단계. 해당 색상 수치 맥시멈으로 올려주기

생각

• 픽셀 단위로 뒤집어 섞어맞추기
• 픽셀 날라가기 (x, y) 라면월드컵

전체 코드

    // 색상 변환
    const canvas = document.querySelector('.canvas');
    const ctx = canvas.getContext('2d');

    const videoElem = document.querySelector('.video');
    videoElem.addEventListener('canplaythrough', render);

    const btnsElem = document.querySelector('.btns');

    let imageData;
    const particles = [];
    let particle;
    let colorValue;
    let leng;

    function render() {
        ctx.drawImage(videoElem, 0, 0, 600, 400);
        imageData = ctx.getImageData(0, 0, 600, 400);
        leng = imageData.data.length / 4;

        console.log(imageData.data[0]);
for (let i = 0; i < leng; i++) {
            switch (colorValue) {
                case 'red':
                    imageData.data[i * 4 + 0] = 255;
                    break;
                case 'green':
                    imageData.data[i * 4 + 1] = 255;
                    break;
                case 'blue':
                    imageData.data[i * 4 + 2] = 255;
                    break;
            }
        }

        ctx.putImageData(imageData, 0, 0);
        requestAnimationFrame(render);
    }

    btnsElem.addEventListener('click', function (e) {
        colorValue = e.target.getAttribute('data-color');
    });