Scientific Computing & Data Science

"Pug"는 Express Framework의 Template Engine으로 이전에 "Jade"라는 이름을 가지고 있었으나, "Jade"가 상표권이 걸려 있어 부득이하게 "Pug"라는 이름으로 개명(?)하게 되었다. 따라서, 기존의 "Jade" 문법에 익숙한 개발자들은 "Pug"에 금방 익숙해 질 수 있다. 간단하게 Pug의 문법과 활용법에 대하여 살펴보도록 하자. Pug 설치하기여타 Node Packages처럼 Command Line Tool의 "npm" 명령을 통해 Pug Node Package Manage로 설치가 가능하다.$ npm install pug또는 Node.js의 최신 버전이 설치되어 있으면,$ npm install pug-cli -g과 같이 명령을 입력하면 된다.위의 설치 옵션 "-g..

이번 글에서는 HTML 페이지에서 페이지를 스크롤 다운(Scroll Down) 시 일정 이상이 스크롤 다운되면 콘텐츠가 고정되는 예제입니다.웹페이지를 스크롤 다운하다가 상단의 메뉴가 사라지면 메뉴를 클릭하기 위해 다시 웹페이지를 스크롤 업(Scroll Up)해야 하는 불편함이 있습니다.본 예제는 이러한 불편함을 제거해 주는 기능 구현에 관한 것이며, 대다수의 모던 웹페이지들이 채택하는 것이기도 합니다.HTML다음 HTML 문서는 예제용 문서이며, 핵심은 JavaScript 코드임을 명심하길 바랍니다. scroll-fixed.html Example - Fixed Content While Scrolling 1st Menu 2nd Menu 3rd Menu SassCSS의 전처리기인 Sass 파일로 작성하였습니..

이번 글에서는 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를 다운받는다. /* =================================..

이번 글에서는 CSS3에 공식적으로 포함되어 있지는 않지만, 테스트 해 볼만한 새로운 기능인 이미지 반사(Image Reflection)에 대하여 알아 보도록 하겠다.[테스트 이미지] landscape.jpg 준비테스트를 위해 HTML 파일을 다음과 같이 준비한다.[index.html] 단, 준비한 이미지 "landscape.jpg"는 index.html 파일과 동일한 경로에 존재하여야 한다.포함한 CSS 파일 "base.css"에서 이미지 반사 옵션에 대한 코드를 작성할 것이다.기본 반사기본 반사 옵션은 원본 이미지 그대로 반사되는 효과를 의미한다.CSS 파일에 img라는 클래스를 정의하고 다음과 같이 옵션을 작성한다.[base.css]img { -webkit-box-reflect: below; } 결..

이번 글에서는 지난 글(Creating Desktop Apps with Electron)에 이어 Electron Desktop App에서 메뉴를 만드는 방법에 대하여 알아보도록 하겠다.App 초기화Terminal에 "npm init" 명령을 통해 다음과 같이 입력한다. $ npm init This utility will walk you through creating a package.json file. It only covers the most common items, and tries to guess sensible defaults. See `npm help json` for definitive documentation on these fields and exactly what they do. Use ..

이번 글은 node.js(nodejs.org) 기반 Cross Platform Desktop App을 만드는 도구인 Electron(http://electron.atom.io)을 이용하여 기본앱(Hello World)을 만드는 방법에 대하여 알아보도록 하겠습니다. 우선 App을 만들 폴더를 하나 만듭니다(비어 있어야 합니다).Terminal에 다음 명령을 실행하여 App 초기화를 합니다(node.js가 설치되어 있어야 합니다). $ npm init This utility will walk you through creating a package.json file. It only covers the most common items, and tries to guess sensible defaults. See ..

이번 글에서는 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-..

이번 예제는 Path Tracing 알고리즘을 이용한 렌더링에 관한 것입니다. Path Tracing에 대한 자세한 내용은 다음 링크를 참고합니다:http://cs.brown.edu/courses/cs224/papers/mc_pathtracing.pdfDownload Protect FULL SCREEN 아래 화면에서 클릭 & 드래그하여 Sphere 움직여 보세요~~webgl-path-tracing.js1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909..