자바스크립트: 길찾기 1 (라이브러리 이용 – EasyStar.js)

길찾기 알고리즘에는 여러가지가 있는데 A* (A Star)라는 알고리즘이 많이 사용된다고 합니다. 라이브러리중에 EasyStar.js (https://www.easystarjs.com/) 라는게 있는데 이걸로 길찾기 알고리즘을 직접 구현하지 않고도 사용할 수 있습니다. window.onload = function() { var startPoint = {x:0, y:0} var endPoint = {x:4, y:0} // EasyStar.js 선언 var es = new EasyStar.js(); var map = 더보기…

자바스크립트: 인터넷에서 미디(MIDI) 파일을 바로 재생하는 라이브러리(http://www.midijs.net/) + 예제: 미디 플레이어

혹시 자바스크립트 라이브러리를 사용하지 않고 스프링 부트를 이용해 직접 미디를 mp3로 변환하는 방법을 찾고있다면 이 페이지를 방문해보세요. gist에서 예제 코드 보기 미디 플레이어 실행하기 PHP 기반으로 만든 미디 플레이어입니다. MIDI란 컴퓨터 음악을 위한 규격화된 포맷으로 미디 표준을 지켜 만든 음악 파일들은 미디 플레이어 등에서 실행할 수 있으며 오늘날 음악 제작에서 필수적으로 더보기…

Three.js: 장면(scene) 추가

출처: https://threejs.org/docs/index.html#manual/en/introduction/Creating-a-scene 이 섹션의 목적은 three.js에 대한 간략한 소개입니다. 회전 큐브를 사용하여 장면을 설정하는 것으로 시작하겠습니다. 시작하기 전에 three.js를 사용하려면 먼저 어딘가에 표시해야합니다. 다음 HTML을 js/ 디렉토리에 있는 three.js 사본과 함께 컴퓨터의 파일에 저장하고 브라우저에서 엽니다. <!DOCTYPE html> <html> <head> <meta charset=utf-8> <title>My first three.js app</title> <style> body { margin: 0; 더보기…

three.js: 로더 예제(MMD) + 기본 개념

다운로드: https://threejs.org/ 의 download 링크를 통해 받는다. 여기서 MMD의 정의는 다음과 같다. MikuMikuDance는 일본에서 개발 및 공개 중인 3D CG 동영상 작성 툴이다. 약칭은 MMD. 이름처럼 VOCALOID 하츠네 미쿠의 3D 모델을 조작할 수 있는 프로그램이다. 이름은 VOCALOID의 대표격이라고 할 수 있는 하츠네 미쿠의 모델이 제일 먼저 나왔기 때문에 MikuMikuDance(미쿠미쿠댄스)라고 이름지어진 더보기…

HTML5: Select ~ Option (태그, JQuery, 자바스크립트)

기본 형태 <body> <select> <option>사과</option> <option>귤</option> <option>포도</option> </select> </body>   select 속성 autofocus – HTML5, 페이지 로드시 자동으로 포커스 적용 disabled – 표시만 되고 조작 및 내용 변경 불가 form – 상위 폼 아이디 지정 multiple – 다중 선택 가능 name – form 전송에 사용할 이름 지정 required – HTML5. 입력하지 않았을 더보기…

dat.GUI: 세련된 디자인의 GUI 폼(Form)을 사용할 수 있는 자바스크립트 라이브러리

튜토리얼: http://workshop.chromeexperiments.com/examples/gui/#7–Events 소스 받기: https://github.com/dataarts/dat.gui CDN: https://cdnjs.com/libraries/dat-gui dat.GUI는 계기판, 패널 같은 것으로 숫자, 스트링, 색상 등의 값들을 조작하는 폼들을 쉽게 만들 수 있도록 지원해주는 자바스크립트에서 사용하는 라이브러리입니다. 기본적으로 오른쪽 상단 구석에 작게 생성되며 화면 전체를 사용하는 멀티미디어 자료들을 조작하는 용도로 사용합니다. 자바스크립트 3차원 라이브러리인 Three.js의 예제 페이지(https://threejs.org/examples/#webgl_lightningstrike)에서 이 dat.GUI들을 자주 사용하고 있습니다.   더보기…

자바스크립트: 캔버스(Canvas) 에서 픽셀 단위로 다루기

모질라 재단 ‘픽셀 다루기’ 링크 data 속성은 원시 픽셀 데이터를 보기 위해 액세스할 수 있는 Uint8ClindedArray를 반환합니다. 각 픽셀은 네 개의 1바이트 값(적색, 녹색, 파란색, 알파, 순서대로 “RGBA” 형식)으로 표현됩니다. 각 색상 구성요소는 0 ~ 255 사이의 정수로 표시됩니다. 각 구성요소는 배열 내에서 연속적인 색 바이트 값이 할당되며, 최상단 좌측 더보기…

자바스크립트: 색상 이름을 rgb 코드로 바꾸기.

예를 들어 "red"라고 입력하면 red의 rgb에 해당하는 [255, 0, 0]의 색상 정보를 반환하는 프로그램을 만들어 보겠습니다. 일반 색상명으로 입력했는데 나중에 투명도를 적용하기 위해 rgba 등으로 바꾸고 싶을 때 사용하면 좋을 것 같네요. function getRGB(colorStr) { let el = document.createElement(“div”); el.style[“background-color”] = colorStr; document.body.appendChild(el); let style = window.getComputedStyle(el); let color = 더보기…

자바(Java)에 프로세싱(Processing) 라이브러리 Minim을 설치하는 방법 + 예제: 주파수 그래프가 있는 오디오 플레이어

노래 파일을 불러와 500 구간으로 쪼갠 뒤 각각 구간의 평균 주파수를 리스트에 삽입해 사운드클라우드의 플레이어 비슷한 효과를 내는 예제입니다. 이 기능을 사용하려면 Minim이라는 Processing기반의 라이브러리가 필요합니다. (참고: Processing: 미디어아트 프로그래밍 언어 기초)   Minim을 사용해 음악 파일의 주파수를 분석  주파수 분석은 고속 푸리에 변환(FFT) 방식.  Minim은 음악 재생, 분석과 관련하여 다양한 기능을 더보기…

JMeter: 서버 부하 테스트 프로그램 (기초 사용법)

다운로드: https://jmeter.apache.org/download_jmeter.cgi (자바 8 이상 필요합니다) 윈도우 기준으로 압축을 푼 후 bin/ApacheJMeter.jar (또는 jmeter.bat) 실행합니다. 로그인 등의 과정이 없는 단순한 트래픽 테스트를 위해 예제 사이트로 blazedemo.com을 사용합니다.     Number of Threads(users): 사용자 수 Ramp-up Periods(초): 사용자 수가 모이는(만들어지는) 시간을 설정합니다. 유저 수가 100인데 Ramp-up Period가 10이라면 10초동안 100명의 사용자를 만들어내는 더보기…