Scientific Computing & Data Science

이번 글에서는 Canvas 태그에 웹캠 화면을 출력하는 방법을 알아보도록 하겠다. [Project File Download] [webcam.html] [/stylesheets/main.css] .booth { width: 800px; background: #ccc; border: 10px solid #ddd; margin: 0 auto; } [/javascripts/video.js] (function() { var canvas = document.getElementById('canvas'), context = canvas.getContext('2d'), video = document.getElementById('video'), vendorUrl = window.URL || window.webkitURL;..

이번 글에서는 HTML5의 Canvas Element의 Touch Gesture를 통해 이미지를 이동하거나 확대(Pinch Zoom)하는 방법에 대하여 알아보고자 한다.Canvas의 Image Touch Gesture를 위한 소스코드는 https://github.com/rombdn/img-touch-canvas를 이용하였으며, Touch가 안 되는 환경(Desktop without Touch Device)에서는 Mouse를 이용한 Drag를 통하여 이미지 이동이 가능하다. 다음 링크의 프로젝트 파일을 다운받아 테스트 할 수 있다:img-touch-canvas.js상기 Github 페이지에서 img-touch-canvas.js를 다운받는다. /* =================================..

이번 글에서는 CreateJS를 이용하여 간단한 오브젝트들을 생성하고, 오브젝트들을 마우스 드래그 또는 터치 드래그(터치패드의 경우)하고, 클릭(터치)하는 동안 각각의 사운드가 출력되도록 하는 예제를 살펴 보도록 한다. Part 1 - CreateJS 라이브러리 로딩하기 CreateJS Suite는 HTML5의 Canvas 기술을 기반으로하여 Web Browser에서 풍부한 상호작용(interactive) 콘텐츠 기술을 표현하기 위한 JavaScript 라이브러리로써 gskinner가 처음 개발한 후 Adobe, MS, Mozilla 재단 등이 post-Flash를 위하여 적극적으로 후원하고 있다.(ActionScript와 유사하여 기존의 Flash 개발자들은 금방 적응할 것이다.)CreateJS Sui..

이번 글에서는 HTML5 JavaScript 챠트(Chart)인 CanvasJS 에 대하여 소개하고자 한다. HTML5 기반에서 다이내믹한 데이터 시각화를 위한 챠트를 제공하는 방법은 Flash 플러그인을 사용하거나 SVG(Scalable Vector Graphics), Canvas 등 표준 렌더링 태그를 사용하는 방법이 있다. 대부분 아다시피 Flash는 보안 문제 등으로 인해 점점 설 자리를 잃어가는 추세인 만큼, HTML5 표준 렌더링 태그를 사용하는 것을 강력히 추천한다. SVG와 Canvas는 각각의 장점과 단점이 있는 만큼 이들을 잘 파악하여 사용 목적에 따라 적절히 사용하는 것이 좋다. 이들에 대한 비교는 다음 링크에 잘 정리되어 있다: https://msdn.microsoft.com/ko-..

이번 예제는 Texture Canvas에 관한 것입니다. Canvas는 HTML5의 Canvas 엘리먼트를 의미하며, Canvas에 texture를 맵핑하는 기법입니다.Download Project Click here to view with full screen mode OperationsMouse Left Button Click & Drag: Camera RotatingMouse Wheel: Camera Zoom In & OutMouse Right Button Click & Drag: Camera Panningmain.js123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555..