음악, 삶, 개발

popmotion.io Popmotion: The animator's JavaScript toolbox Quick start import { animate } from "popmotion" animate({ from: 0, to: 100, onUpdate: latest => console.log(latest) }) Animation animate animate performs a keyframes or spring animation. import { animate } from "popmotion" animate({ from: 0, to: 100, onUpd popmotion.io www.npmjs.com/package/popmotion npm install popmotion < 용도와..

/* sketch.js */ let mousePositions = [] const MAX_POS = 100 function setup() { createCanvas(500, 500) } function draw() { background('tomato') ellipse(mouseX, mouseY, 50, 50) mousePositions.push({x: mouseX, y: mouseY}) if (mousePositions.length > MAX_POS) mousePositions.shift() for (let i = 0; i < mousePositions.length; ++i) { ellipse(mousePositions[i].x, mousePositions[i].y, i, i) } }

1. 먼저 아래와 같이 폴더를 만들고, 2개의 파일을 만든다. 2. 이 폴더를 VScode 에서 통채로 연다. 3. 각 파일에 아래와 같이 코드를 작성한다. /* sketch.js */ function setup() { createCanvas(500, 500) } function draw() { background('blue') } 4. VSCode 에서 Live Server 팩을 설치한다. 5. VSCode 의 커맨트창에서 Open with Live Server 를 실행하면.. 6. 브라우저 창이 켜지면서 나의 index.html 이 실행된다. 이제부터 sketch.js 안에 코드를 변경한뒤 저장하면 자동으로 반영된다.

www.npmjs.com/package/p5 Youtube : Instance mode (a.k.a name spacing) Instance container p5.js 는 HTML5 의 를 엄청나게 확장해주는 그래픽 라이브러리이다. 물론 가 기본적으로 제공하는 함수들만으로도 그려볼수있겠지만 복잡한 도형들을 그려낼려면 엄청난 노가다를 해야한다. p5.js 가 제공하는 수많은 함수들을 사용하면, 훨씬 더 우아한 그림들을 그려낼수있다. 구글에서 p5 를 vue 에서 사용하는 것을 검색했을때, 결과가 거의 나오지않았다. 나오더라도 vue 3 의 composition api 를 사용하지않은 예제들이 대부분이었다. 그래서 ..

v-tooltip v-click-outside vue-select vue-js-modal vue-slider-component vue-color popper.js vue-draggable-resizable vue-awesome-swiper github.com/annaneo/pianoKeyboard codepen.io/zastrow/pen/oDBki

Lee : 이 포스팅은 지속적으로 업데이트 되어야합니다. (마지막 업데이트 : 2020.12.7) v3.vuejs.org/guide/component-slots.html#slot-content Vue 는 여러 컴포넌트 (.vue 파일) 들을 직접 만들고, 이들을 레고처럼 조립해나가는 방식이다. 이때 2가지 상황이 존재한다. 위와 같은 상황은 우리가 예상한대로 동작을 한다. div 는 내가 만든 컴포넌트가 아니라, HTML 에서 제공하는 컴포넌트이다. 하지만 이게 div 가 아닌 내가 만든 컴포넌트라면? 내가 만든 컴포넌트안에 또 다시 내가 만든 컴포넌트를 집어넣었다. 기본적으로 이렇게 하기위해서 필요한것이 태그이다. 태그는 부모가 자식이 들어오기를 기대하는 위치..

모든 Component 들간에 하나의 저장소 Vuex npm mitt import mitt from 'mitt' const emitter = mitt() // listen to an event emitter.on('foo', e => console.log('foo', e) ) // listen to all events emitter.on('*', (type, e) => console.log(type, e) ) // fire an event emitter.emit('foo', { a: 'b' }) // clearing all events emitter.all.clear() // working with handler references: function onFoo() {} emitter.on..

v3.vuejs.org/guide/events.html#mouse-button-modifiers 우리는 마우스 이벤트 함수가 호출될때 마우스의 어떤 버튼이 눌렸는지 구분해야할때가 있다. 보통은 아래와 같이 구현을 한다. function mousedown(e) { if (e.button === 0) { /* left button */ } else if (e.button === 1) { /* middle button */ } else if (e.button === 2) { /* right button */ } } 마우스 이벤트 함수는 콜백 함수인데, 이때 인자로 event 객체를 넘기게 되고 이 event 객체의 button 프로퍼티를 사용하여 어떤 버튼이 눌렸는지..