목록개발 Web (242)
음악, 삶, 개발
p5 의 instance 모드 사용하기
https://www.youtube.com/watch?v=Su792jEauZg&ab_channel=TheCodingTrain Vue 포스팅에서도 다루기는 했지만, 일반 p5 개발환경에서 먼저 instance mode 를 사용하는것을 간단히 코드로 정리해놓았다. 추후 Vue 개발을 위해 p5 환경에서도 인스턴스 모드로 코드를 작성하는것이 좋을것이다. 그래야만 복붙 할수있다. /* sketch.js */ // p5 인스턴에 사용할 sketch 객체 정의 const sketch = (p) => { p.setup = () => { const parentId = 'p5-container' // 부모 태그의 id p.createCanvas(500, 500).parent(parentId) p.noL..
p5.js 개발환경 구축하기
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 안에 코드를 변경한뒤 저장하면 자동으로 반영된다.
Vue 에서 p5.js 사용하기 : p5 의 instance 모드
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 를 사용하지않은 예제들이 대부분이었다. 그래서 ..
codepen.io/depy/pen/amoXGB stackoverflow.com/questions/24344859/html5-canvas-create-fading-trail-from-object www.growingwiththeweb.com/2012/10/creating-trail-effect-with-canvas.html
medium.com/@dailyfire/cursor-trails-3-simple-css-tricks-to-add-to-any-website-part-1-64750798583c
CSS 로 만들수있는 다양한 모양들 - before & after
css-tricks.com/the-shapes-of-css/ developer.mozilla.org/ko/docs/Web/CSS/::after 1. :before, :after 2. border-left, border-right, border-bottom, border-top 3. transform 4. transform-origin
CSS 의 linear-gradient 의 다양한 예제들
developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient() 아래 > #g { background: linear-gradient(red, blue); }
요소의 일부분 잘라내기 : CSS 의 clip-path 속성
developer.mozilla.org/ko/docs/Web/CSS/clip-path stackoverflow.com/questions/7324722/cut-corners-using-css https://css-tricks.com/almanac/properties/c/clip-path/ codepen.io/stoumann/pen/abZxoOM css-tricks.com/animating-with-clip-path/ CSS 의 clip-path 속성을 정의하게되면, 요소의 일부분을 잘라낼수있다. div { clip-path : polygon(0 0, 0 100%, 100% 100%, 100% 55%, 55% 0); } 이 clip-path 로 잘린 부분은 당연히 event 리스너가 작동하..