zhsks528 / dot-canvas Public

Notifications You must be signed in to change notification settings
Fork 0
Star 1

Dot Canvas - 사진의 컬러를 추출하여 점으로 표현하는 웹 어플리케이션

1 star 0 forks Branches Tags Activity

Notifications

Name		Name	Last commit message	Last commit date
Latest commit History 38 Commits
public		public
resources		resources
src		src
.eslintcache		.eslintcache
.gitignore		.gitignore
README.md		README.md
package-lock.json		package-lock.json
package.json		package.json
tsconfig.json		tsconfig.json

Repository files navigation

Dot Canvas 🎨

Description

Canvas를 이용하여 사진의 컬러를 추출 후 사진을 점으로 표현하는 어플리케이션입니다.
YouTube 영상을 보고 React + Typescript 를 이용해서 만들었습니다.

Languages

Install and Usage

원격저장소에서 로컬저장소로 파일을 불러옵니다.

git clone https://github.com/zhsks528/dot-canvas.git

폴더로 이동해서 실행시킵니다

cd <파일명> // 파일이 저장된 경로로 이동

npm module을 설치합니다.

npm install

실행시킵니다

npm run start

Sources

YouTube : Interactive Developer

Study

React에서 의 기본 사용법을 배울 수 있는 좋은 계기.

DOM을 직접 조작할 때에는 useRef를 적극적으로 활용해야함.

원본 이미지에서 색상을 추출하는 방법을 익힘.
TS를 적용하니 확실히 오류를 빨리 찾을 수 있었음 => TS의 필요성 인지
물리적인 지식(가속도)을 이용하여 상호작용하는 애니메이션 방법을 배움.

About

Dot Canvas - 사진의 컬러를 추출하여 점으로 표현하는 웹 어플리케이션

react javascript typescript canvas styled-components toy-project

Report repository

Releases 1

First Releases Latest

Languages