html5 canvas 맛보기

+처음 적어보는 글

😀이모티콘은 필수

대학교에서 웹사이트를 만들어보는 과제를 받았다.
한번도 만들어 본 적 없는 나에게 떨어진 커다란 시련...!
완성시키는데 의의를 두고 마구마구 두들겼다

목차

---

페이지 바로가기

• 도안
• 미리보기
• 구조
• 후기

📃project-drawing

---

수업을 같이 듣는 팀원인 성호씨의 기획대로 도안을 받았다.

🔎project-preview

---

구조

---

intro page

intro page는 처음 로딩시간에 보여지게 만들려고 하였으나
프로젝트 파일자체가 작고, 서버에서 처리하는게 없으니 로딩시간이 길지 않아  
일부러 setTimeout() 을 사용하여 시간을 4초 걸리게 하였다...😅

움직이는 사각형을 물방울 모양의 화면으로만
보이게 하여 물이 흐르는 것처럼 만들어져있다.

intro page

전체적으로 컨트롤 할 수 있는 App class를 만들고

        this.waveGroup = new WaveGroup();
        this.waterdrop = new Waterdrop(230, 1000, 30,'red',0);

로서 안의 물결과 물방울을 생성한다.

우선 물결은 Point객체의 집합으로 이루어져있고 점들을
quadraticCurveTo를 통해 물결처럼 보이게 이어준다.

그 후 물방울이 떨어질 때,

1. 물결의 높이를 0.1 씩 올려주고
2. 공의 색깔을 바꿔주고
3. 다음 들어갈 액체의 종류를 설정해준다.

액체의 종류는 부끄럽지만 집합으로 순서를 정하는 방법을 사용했고

let material = [
    //ball color
    [
        '<span class="water">●</span>water ',
        '<span class="coffeee">●</span>espresso ',
        '<span class="milk">○</span>milk ',
        '<span class="milkform">●</span>milkform ',
        '<span class="caramel">●</span>caramel ',
        '',
    ],
    //americano
    [
        '<span class="coffeee">●</span>espresso ',   '',   '',
        '<span class="water">●</span>water ',  '','','', '', '', '',
    ],
]

wave의 색깔은 시작색과 끝색을 정하여 rgb를 나눠 원하는색에
도달하도록 만들었다.

    for(let i=1;i<N;i++){
        tmpR=Math.round(r-(r-mr)/N*i);
        tmpG=Math.round(g-(g-mg)/N*i);
        tmpB=Math.round(b-(b-mb)/N*i);
        array.push(`rgb(${tmpR}, ${tmpG}, ${tmpB})`)
    }

후기

---

처음하는 프로젝트라 코드도 엉망이고 리펙토링을 할 수 없을 정도로
스파게티코드🍝가 만들어져 있었다...

이 프로젝트를 통해 공부해야할 로드맵을 만들 수 있었고
그 다음 공부할건 Dev21의 고양이검색사이트 만들기를 풀어보며
각각의 요소들을 컴포턴트화 시켜 각각의 기능이 분리할 수 있도록
만들어보고싶다!