코딩 연습장/개인 프로젝트

[결과] JavaScript 개인 프로젝트(JavaScript, HTML5, CSS, JQuery)

Do아 2021. 3. 31. 23:29
728x90

2021/04/01(목)

 

 

 

 

HTML5와 JavaScript를 이용한 개인 프로젝트 동영상

 

 

이미지를 입력받아 Canvas를 이용하여 배열에 띄우고

사진을 흑백, 축소, 확대, 엠보싱 등 효과를 주는 웹 프로젝트 

 

배경에 나오는 움직이는 화면도 하나의 큰 캔버스로 

이것은 Module을 이용하여 띄우고 앞에 작은 캔버스하나를 Script로 띄워 구현

 

오디오 효과를 사용하여 좀더 감성적인 웹을 구성

각각 디즈니 영화 인어공주, UP, 코코를 모티브로 구성

 

 

 

참고) 각각 자세한 설명과 화면 구현은 블로그에 따로 정리를 했음

 

- 첫화면

https://cordingdoah.tistory.com/81

 

자바스크립트 이용한 개인 프로젝트 - 1(첫 화면, 슬라이드 화면)

2021/04/01(목) 자바스크립트를 이용하여 영상처리 할 수 있는 프로젝트 설명 전체적인 프로젝트 컨셉 : 다양한 영상처리의 컨셉을 보여주기 위해 디즈니 영화를 주제로 잡아 구성을 했습니다. - 인

cordingdoah.tistory.com

- 메인화면 1

https://cordingdoah.tistory.com/85

 

자바스크립트를 이용한 개인 프로젝트 - 2(인어 공주 화면)

2021/04/01(목) 자바스크립트를 활용하여 영상처리 프로젝트 : 첫 메인 화면 구현(첫 슬라이드) <메인화면의 구성> index.html이라는 메인html 위에 물결이 치는 모습을 구현한 module을 크기에 맞게 띄우

cordingdoah.tistory.com

- 메인화면 2

https://cordingdoah.tistory.com/86

 

자바스크립트를 이용한 개인 프로젝트 - 3(업up 화면)

2021/04/01(목) 자바스크립트를 활용하여 영상처리 프로젝트 : 두번째 메인 화면 구현(두번째 슬라이드) 메인화면의 구성같은 경우 그 전에 첫번째 메인화면 구성과 같다 https://cordingdoah.tistory.com/85

cordingdoah.tistory.com

- 메인화면 3

https://cordingdoah.tistory.com/87

 

자바스크립트를 이용한 개인 프로젝트 - 4(코코coco 화면)

2021/04/01(목) 자바스크립트를 활용하여 영상처리 프로젝트 : 세번째 메인 화면 구현(세번째 슬라이드) 메인화면의 구성같은 경우 그 전에 첫번째 메인화면 구성과 같다 https://cordingdoah.tistory.com/85

cordingdoah.tistory.com

- 영상처리 알고리즘 (밝게하기, 흑백처리)

https://cordingdoah.tistory.com/88

 

자바스크립트를 이용한 개인 프로젝트 - 5(영상 처리 알고리즘)

2021/04/01(목) 슬라이드 화면구현과 각각의 메인화면의 뒷배경은 아래 글을 보고 참고 https://cordingdoah.tistory.com/81 자바스크립트 이용한 개인 프로젝트 - 1(첫 화면, 슬라이드 화면) 2021/04/01(목) 자바.

cordingdoah.tistory.com

- 영상처리 알고리즘 (확대, 축소)

https://cordingdoah.tistory.com/89

 

자바스크립트를 이용한 개인 프로젝트 - 6(영상 처리 알고리즘)

2021/04/01(목) 밝게하기 어둡게하기 기초 설명 참고 https://cordingdoah.tistory.com/88 자바스크립트를 이용한 개인 프로젝트 - 5(영상 처리 알고리즘) 2021/04/01(목) 슬라이드 화면구현과 각각의 메인화면의.

cordingdoah.tistory.com

- 영상처리 알고리즘 (좌우반전, 상하반전, 90도회전)

https://cordingdoah.tistory.com/90

 

자바스크립트를 이용한 개인 프로젝트 - 7(영상 처리 알고리즘)

2021/04/01(목) 확대/축소 알고리즘 설명 참고 https://cordingdoah.tistory.com/89 자바스크립트를 이용한 개인 프로젝트 - 6(영상 처리 알고리즘) 2021/04/01(목) 밝게하기 어둡게하기 기초 설명 참고 https://c..

cordingdoah.tistory.com

- 영상처리 알고리즘 (엠보싱, 블러링)

https://cordingdoah.tistory.com/91

 

자바스크립트를 이용한 개인 프로젝트 - 8(영상 처리 알고리즘)

2021/04/01(목) 좌우반전/상하반전/90도회전 알고리즘 참고 https://cordingdoah.tistory.com/90 자바스크립트를 이용한 개인 프로젝트 - 7(영상 처리 알고리즘) 2021/04/01(목) 확대/축소 알고리즘 설명 참고 htt..

cordingdoah.tistory.com

- 영상처리 알고리즘 (샤프닝, 가우시안, 고주파샤프닝)

https://cordingdoah.tistory.com/92

 

자바스크립트를 이용한 개인 프로젝트 - 9(영상 처리 알고리즘)

2021/04/01(목) 엠보싱/블러링 알고리즘 참고 https://cordingdoah.tistory.com/91 자바스크립트를 이용한 개인 프로젝트 - 8(영상 처리 알고리즘) 2021/04/01(목) 좌우반전/상하반전/90도회전 알고리즘 참고 http..

cordingdoah.tistory.com

- 영상처리 알고리즘 (유사연산자, 라플라시안)

https://cordingdoah.tistory.com/93

 

자바스크립트를 이용한 개인 프로젝트 - 10(영상 처리 알고리즘)

2021/04/01(목) 샤프닝/가우시안/고주파샤프닝 알고리즘 참고 https://cordingdoah.tistory.com/92 자바스크립트를 이용한 개인 프로젝트 - 9(영상 처리 알고리즘) 2021/04/01(목) 엠보싱/블러링 알고리즘 참고 ht.

cordingdoah.tistory.com

- 영상처리 알고리즘 (히스토그램 스트레칭, 히스토그램 엔드인, 히스토그램 평활화)

https://cordingdoah.tistory.com/94

 

자바스크립트를 이용한 개인 프로젝트 - 11(영상 처리 알고리즘)

2021/04/01(목) 유사연산자/라플라시안 알고리즘 참고 https://cordingdoah.tistory.com/93 자바스크립트를 이용한 개인 프로젝트 - 10(영상 처리 알고리즘) 2021/04/01(목) 샤프닝/가우시안/고주파샤프닝 알고리.

cordingdoah.tistory.com

- 영상처리 알고리즘 (컬러 흑백처리, 부분흑백처리, 색반전)

https://cordingdoah.tistory.com/95

 

자바스크립트를 이용한 개인 프로젝트 - 12(영상 처리 알고리즘)

2021/04/01(목) 히스토그램 스트레칭/히스토그램 엔드인/히스토그램 평활화 알고리즘 참고 https://cordingdoah.tistory.com/94 자바스크립트를 이용한 개인 프로젝트 - 11(영상 처리 알고리즘) 2021/04/01(목) 유

cordingdoah.tistory.com

- 마우스 클릭 이벤트 구현

https://cordingdoah.tistory.com/96

 

자바스크립트를 이용한 개인 프로젝트 - 13(영상 처리 알고리즘)

2021/04/01(목) 컬러 흑백처리/부분흑백처리/색반전 알고리즘 참고 https://cordingdoah.tistory.com/95 자바스크립트를 이용한 개인 프로젝트 - 12(영상 처리 알고리즘) 2021/04/01(목) 히스토그램 스트레칭/히스

cordingdoah.tistory.com

 

728x90