728x90

코딩 연습장/Javascript 18

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

2021/04/01(목) 밝게하기 어둡게하기 기초 설명 참고 https://cordingdoah.tistory.com/88 자바스크립트를 이용한 개인 프로젝트 - 5(영상 처리 알고리즘) 2021/04/01(목) 슬라이드 화면구현과 각각의 메인화면의 뒷배경은 아래 글을 보고 참고 https://cordingdoah.tistory.com/81 자바스크립트 이용한 개인 프로젝트 - 1(첫 화면, 슬라이드 화면) 2021/04/01(목) 자바. cordingdoah.tistory.com 이번 게시물에서 구현해볼 것은! 영상처리 알고리즘 : 확대, 축소 구현해보기 바로 들어가보자! 확대하기 원리 //확대 function zoomInImage() { //전에 있던 클릭이벤트 삭제 clickEventDown(); ..

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

2021/04/01(목) 슬라이드 화면구현과 각각의 메인화면의 뒷배경은 아래 글을 보고 참고 https://cordingdoah.tistory.com/81 자바스크립트 이용한 개인 프로젝트 - 1(첫 화면, 슬라이드 화면) 2021/04/01(목) 자바스크립트를 이용하여 영상처리 할 수 있는 프로젝트 설명 전체적인 프로젝트 컨셉 : 다양한 영상처리의 컨셉을 보여주기 위해 디즈니 영화를 주제로 잡아 구성을 했습니다. - 인 cordingdoah.tistory.com https://cordingdoah.tistory.com/85 자바스크립트를 이용한 개인 프로젝트 - 2(인어 공주 화면) 2021/04/01(목) 자바스크립트를 활용하여 영상처리 프로젝트 : 첫 메인 화면 구현(첫 슬라이드) index.htm..

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

2021/04/01(목) 자바스크립트를 활용하여 영상처리 프로젝트 : 세번째 메인 화면 구현(세번째 슬라이드) 메인화면의 구성같은 경우 그 전에 첫번째 메인화면 구성과 같다 https://cordingdoah.tistory.com/85 자바스크립트를 이용한 개인 프로젝트 - 2(인어 공주 화면) 2021/04/01(목) 자바스크립트를 활용하여 영상처리 프로젝트 : 첫 메인 화면 구현(첫 슬라이드) index.html이라는 메인html 위에 물결이 치는 모습을 구현한 module을 크기에 맞게 띄우 cordingdoah.tistory.com import {BounceString} from './bouncestring.js'; class App3{ constructor (){ //캔버스 설정 this.can..

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

2021/04/01(목) 자바스크립트를 활용하여 영상처리 프로젝트 : 두번째 메인 화면 구현(두번째 슬라이드) 메인화면의 구성같은 경우 그 전에 첫번째 메인화면 구성과 같다 https://cordingdoah.tistory.com/85 자바스크립트를 이용한 개인 프로젝트 - 2(인어 공주 화면) 2021/04/01(목) 자바스크립트를 활용하여 영상처리 프로젝트 : 첫 메인 화면 구현(첫 슬라이드) index.html이라는 메인html 위에 물결이 치는 모습을 구현한 module을 크기에 맞게 띄우 cordingdoah.tistory.com import { GlowParticle } from "./glowparticle.js"; const COLORS = [ {r:41, g:72, b:152, a:0.4}..

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

2021/04/01(목) 자바스크립트를 활용하여 영상처리 프로젝트 : 첫 메인 화면 구현(첫 슬라이드) index.html이라는 메인html 위에 물결이 치는 모습을 구현한 module을 크기에 맞게 띄우기 index.html에서 띄운 캔버스는 fixed를 주워 웹 페이지 화면에 고정 시켜줌 캔버스는 투명하게 설정하여 파일이 캔버스에 올라가지 않았을 때 뒤에 app.js화면만 보이도록 구성 import { WaveGroup } from "./wavegroup.js"; // import { AddCanvas } from "./addcanvas.js"; export class App { constructor() { this.canvas = document.createElement('canvas'); this..

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

2021/04/01(목) 자바스크립트를 이용하여 영상처리 할 수 있는 프로젝트 설명 전체적인 프로젝트 컨셉 : 다양한 영상처리의 컨셉을 보여주기 위해 디즈니 영화를 주제로 잡아 구성을 했습니다. - 인어공주 : 뒷 배경을 3중으로된 물결을 모듈로 만들고 앞에 화면에는 캔버스를 띄워 버튼 클릭 시 각각 영상 처리 - 업 : 뒷배경을 풍선이 날아다니는 모션을 두고 앞에 캔버스를 띄워 영상 처리 - 코코 : 뒷배경을 기타 줄을 튕기는 모션을 두고 앞에 캔버스를 띄워 영상 처리 제이 쿼리를 가져와서 첫 화면을 구성 photo effects - kim do a - start start버튼 클릭 시 slide.html로 이동 $(document).ready(function () { $(".title").letter..

자바스크립트 영상 처리 코딩

2021/03/24(화) 엠보싱 처리하는 메소드 - 2개의 사진중에 선택을 받아 선택한 사진을 엠보싱처리 3x3 영역으로 처리 inImageArray : 첫번째 사진이 저장되어 있는 배열 secondImageArray : 두번째 사진이 저장되어 있는 배열 //엠보싱 function embossImage() { if (inputSelectImage == 0) alert("사진을 선택해 주세요!"); //엠보싱 화소 영역 처리 var mask = [[-1., 0., 0.], [0., 0., 0.], [0., 0., 1.]]; if (inputSelectImage == 1) { //입시 입력 배열 tmpInputArray = new Array(inHeight + 2); // 2칸 큰 배열 for (var i ..

Visual Studio Code설치(HTML5사용)

2021/03/16(화) code.visualstudio.com/ Visual Studio Code - Code Editing. Redefined Visual Studio Code is a code editor redefined and optimized for building and debugging modern web and cloud applications. Visual Studio Code is free and available on your favorite platform - Linux, macOS, and Windows. code.visualstudio.com 홈페이지 들어가기 windows x 64 stable을 설치 첫화면에서 왼쪽 5번째 아이콘 클릭 검색창에 korean으로 치고 첫번째 나..

728x90