반응형 Development49 D3.js 바 그래프 그리기(div), 데이터 수정 D3.js 바 그래프 그리기(div), 데이터 수정 [다운로드] http://d3js.org/download/ (d3.js)http://jquery.com/ (jquery.js) [index.html]add dataremove datachange data [d3sample.js]// Your beautiful D3 code will go herevar dataset = [ 1, 2, 3, 4, 5 ]; var targetDiv; $(document).ready(function () { targetDiv = d3.select("#demo"); //DOM에서 demo div를 찾음 var refresh = function () { var divs = targetDiv.selectAll("div") //DOM.. 2017. 4. 12. p5.scribble.js 손글씨 형태의 2D Object p5.scribble.js 손글씨 형태의 2D Object [다운로드]http://p5js.org/download/ (p5.js, p5.min.js)https://github.com/generative-light/p5.scribble.js (p5.scribble.js) [index.html] [scribble.js]var scribble = new Scribble();var x0=100;var y0=100;var w=50;var h=50;var x1=50;var y1=175;var x2=100;var y2=225;var x3=150;var y3=100;var x4=190;var y4=190; function setup() { canvas = createCanvas(1000, 500); // an arra.. 2017. 4. 12. Windows cmd에서 netstat와 taskkill 사용하기 netstat, taskkill [특정 포트 확인]>netstat -ano | grep "8080" [특정 상태 확인]>netstat -ano | grep "LISTEN" -a: 모든 연결과 수신 대기 포트 표시-n: 주소와 포트 번호를 숫자로 표시-o: 각 연결의 소유자 프로세스 ID 표시 [특정 pid 프로세스 죽이기]>taskkill /pid 3624 [특정 이미지 이름으로 프로세스 죽이기] (* 와일드 카드 사용 가능)>taskkill /im notepad.exe /T: 자식 프로세스까지 /F: 강제로 2017. 4. 3. p5.collide2d.js 2D geometry에서의 충돌 감지 [다운로드]http://p5js.org/download/ (p5.js, p5.min.js)https://github.com/bmoren/p5.collide2D (p5.collide2d.js) [index.html] [collide.js]var cir;var drops = [];var numdrops = 20; function setup() { canvas = createCanvas(1000, 400); canvas.parent('myContainer'); canvas.position(10, 10); cir = new circleObj(20); for(i=0;i 2017. 3. 24. p5.js dom library, Beyond the canvas p5.js dom library, Beyond the canvas [다운로드]http://p5js.org/download/ (p5.js, p5.min.js) [index.html] [htmldom.js]js파일을 하나 만들어 아래 코드 삽입 후 테스트var canvas; function setup() { canvas = createCanvas(600, 400); canvas.parent('myContainer'); canvas.position(10, 10); //listener canvas.mouseOver(hideImg); canvas.mouseOut(showImg); canvas.mouseMoved(incDiameter); canvas.mouseClicked(mouseClick); //createDi.. 2017. 3. 15. p5.js sound library, FFT 이용한 sound visualization p5.js sound library, FFT 이용한 sound visualization [다운로드]http://p5js.org/download/ (p5.js, p5.min.js)https://github.com/processing/p5.js-sound/tree/master/lib (p5.sound.js, p5.sound.min.js) [음원파일]C:\Users\Public\Music\Sample Music\Kalimba.mp3C:\Users\Public\Music\Sample Music\Sleep Away.mp3두 개의 파일을 html 프로젝트 내 public 폴더의 audio 폴더로 옮겨놓음. [app.js]app.use(express.static(path.join(__dirname, 'public').. 2017. 3. 14. MongoDB에서 데이터 가져와서 template 뷰와 바인딩 [HTML5Project] MongoDB에서 데이터 가져와서 template 뷰와 바인딩 *알립니다. 아래의 소스는 가상의 테스트 데이터를 활용했습니다.작성자 본인의 기록용입니다. [필요 확장 모듈 다운로드 및 적용]1. 프로젝트의 package.json파일내의 dependencies내에 하단의 패키지를 추가하고 저장 "mongodb": "~2.2.12", "clog": "~0.1.6"1-1. package.json 우클릭하여 Ran As - npm install로 설치하여 ejs-locals 설치되는지 확인2. js폴더 내에 lib폴더를 만들고 jquery-1.11.0.min.js와 jquery.tmpl.min.js 추가2-1. views폴더 내의 layout폴더 내에 있는 head.ejs파일에 아래의.. 2017. 3. 6. MongoDB 테스트 데이터 생성 스크립트 [HTML5]MongoDB 테스트 데이터 생성 스크립트 *알립니다. 아래의 스크립트는 가상의 테스트 데이터 생성 스크립트입니다.작성자 본인의 기록용입니다. [테스트 데이터 스키마] DB명 gallery Collection명 card 카드아이디 _id 링크 link 카드이미지{섬네일{파일, 설명, 타입}} image{thumbnail{file,desc,type}} 카드명 name 타입 type 카드상세 desc 관련글 relative 등록시간 regDate 1. 프로젝트 폴더내에 db.js 파일 생성하여 아래의 테스트 데이터 작성2. 우클릭 - Run As - Node Application으로 실행하여 데이터 생성 var MongoClient = require('mongodb').MongoClient;va.. 2017. 3. 6. WebStorm 구매 Order 및 Offline Activation 방법 [Order]1. https://www.jetbrains.com/webstorm/buy/#edition=commercial 으로 갑니다2. Business and Organization 탭의 Pay Yearly 로 $129 짜리 WebStorm 'Buy Now' 클릭3. Email address 입력란에 각자의 이메일을 넣고 'NEXT' 클릭 (기존의 회원가입된 ID가 있다면 Sign-in 해도 됩니다 / 지금은 안해도 무방)4. Country 나오면 Korea, Republic of 로 선택 되었는지 확인하고 'Proceed as New Customer' 클릭5. 정보 입력 *주의: Enable automatic renewal 체크 해제!! 자동갱신하면 할인해준다는 팝업이 뜹니다.5-1. 하단의 Com.. 2017. 3. 2. 이전 1 2 3 4 5 6 다음 반응형
