전체 글

[JS] 힘 개념 이해하기 2 | 칸 아카데미

https://ko.khanacademy.org/computing/computer-programming/programming-natural-simulations/programming-forces/a/modeling-gravity-and-friction 중력 및 마찰력 모델링 지난 예제에서 만든 중력을 개선하면서 여기에 마찰력을 추가시켜 보자. 지구의 중력 뉴턴의 제2법칙에 따라 질량이 작으면 가속도가 크다고 설정했지만 실제로는 그렇지 않다. 중력은 물체의 질량에 따라 달라진다. 물체가 무거울수록 힘이 더 크기 때문에 힘이 질량에 따른다면, 힘을 질량으로 나누었을 때 질량은 사라진다. 프로그램에 만들었던 질량에 따른 가속도(중력)에 이를 구현하면 다음과 같다. 마찰력 마찰력은 산일적인 힘이다. 산일적인 힘..

[JS] 힘 개념 이해하기 1 | 칸 아카데미

https://ko.khanacademy.org/computing/computer-programming/programming-natural-simulations/programming-forces/a/newtons-laws-of-motion 뉴턴의 운동 법칙 벡터(vector)처럼, 힘(force)은 다양한 의미를 가지고 있다. 힘은 어떤 강력한 물리력, 이를테면, 바위를 큰 힘으로 미는 것을 의미하는 개념이 될 수 있다. 여기서 다룰 힘 의 정의는 물리학에서 배우는 힘이고, 아이작 뉴턴(Isaac Newton)의 운동의 법칙에서 비롯된 개념이다. 힘은 질량을 지닌 물체를 가속하는 벡터다. 뉴턴의 제1법칙 뉴턴의 제1법칙은 다음과 같이 정의한다. 움직이지 않는 물체는 계속 움직이지 않으려 하고 움직이는 물..

[JS] 벡터 개념 이해하기 3 | 칸 아카데미

https://ko.khanacademy.org/computing/computer-programming/programming-natural-simulations/programming-vectors/a/static-functions-vs-instance-methods 정적 함수 vs. 인스턴스 메소드 알고리즘 #3 (마우스를 따라 가속)을 살펴보기 전에 벡터와 PVector객체를 사용할 때 필요한 중요한 개념을 이해해야 할 필요가 있다. 정적(static) 메소드와 인스턴스(instance) 메소드를 사용하는 것에 무슨 차이가 있는지 알아보자. x 값은 0이고 y를 더해 x는 5가되는 코드를 PVector 기반으로 변경하면 아래와 같다. 벡터 v의 값은 (0,0)이고 v에 u를 더해 v는 (4,5)가 된다..

[JS] 벡터 개념 이해하기 2 | 칸 아카데미

https://ko.khanacademy.org/computing/computer-programming/programming-natural-simulations/programming-vectors/a/vector-magnitude-normalization 벡터 크기의 정규화 피타고라스의 정리 공식을 활용하면 실제 벡터의 길이(픽셀)를 계산할 수 있다. 이를 PVector 객체에서 구현하기 위한 코드는 다음과 같다. PVector.prototype.mag = function() { // sqrt : 제곱근을 반환하는 메소드 return sqrt(this.x * this.x + this.y * this.y); }; 벡터의 크기를 계산할 수 있으면 정규화도 가능하다. 정규화란 무언가를 표준화 시키거나 다른 것..

[JS] 벡터 개념 이해하기 1 | 칸 아카데미

✏차장님께서 알려주신 사이트에서 벡터 알아보기 https://ko.khanacademy.org/ 벡터란? 벡터는 사물의 움직임을 프로그래밍하기 위한 가장 기본적인 구성요소다. 일반적으로 벡터는 화살표로 표현한다. 화살표가 가리키는 쪽은 방향을 나타내며 화살표의 길이는 크기를 나타낸다. 왜 벡터를 사용할까? 코드를 단순화하고 좀 더 적은 수의 변수를 사용할 수 있다. 또한, 움직임을 프로그래밍하는 동안 반복적인 수학 연산을 할 때 편리한 함수 집합의 역할을 한다. pVector를 이용한 프로그래밍 예시 캔버스를 이용해서 Bouncing Ball 애니메이션을 만들었다. 도형이 각 프레임마다 특정 픽셀만큼 가로 및 세로로 움직이도록 프로그래밍 되어있다. 현재 변수는 아래와 같다. (x 좌표, y 좌표, x 속..

[Chrome] 크롬으로 간단하게 로컬 웹 서버 구축하기

Github 데모나 웹페이지를 테스트하고 싶을때 크롬의 Web Server for Chrome 앱으로 쉽고 간단하게 환경을 구성 해볼 수 있다. 1. 설치 크롬 웹 스토어에서 Web Server for Chrome을 설치한다. https://chrome.google.com/webstore/detail/web-server-for-chrome/ofhbbkphhbklhfoeikjpcbhemlocgigb Web Server for Chrome A Web Server for Chrome, serves web pages from a local folder over the network, using HTTP. Runs offline. chrome.google.com 2. 앱 실행 chrome://apps/ 에 접속 ..

[JS] DevTools failed to load source map: … 경고 지우기

콘솔 창에 뜨는 DevTools failed to load source map... 경고 지우기 DevTools failed to load source map: Could not load content for {파일}.map: System error: net::ERR_FILE_NOT_FOUND 1. 경고 메세지가 가르키는 소스 파일 찾아서 열기 2. sourceMappingURL를 검색 3. 해당 라인을 삭제 또는 해당 라인 앞에 // 를 붙여 주석처리 수정 전 //# sourceMappingURL={파일명}.map ↓ 수정 후 // //# sourceMappingURL={파일명}.map

[CSS] 형광펜 밑줄 효과

html HIGHLIGHT TEXT css 방법 1 : box-shadow span { /* inset | offset-x | offset-y | color */ box-shadow: inset 0 -20px 0 #bfffa1; } 방법 2 : background span { background: linear-gradient(to top, #bfffa1 40%, transparent 40%); } 방법 3 : pseudo element span { position: relative; } span:after { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 40%; background-color: #bfffa1; z-in..

[포토샵] 곱하기 블렌딩 모드 레이어를 PNG로 저장하는 방법

※ multiply 블렌딩 모드 레이어와 완벽하게 똑같은 이미지를 얻는 방법은 아닙니다. 투명도 등을 적용해서 최대한 비슷한 이미지를 만드는 방법입니다. 그림자같은 간단한 텍스처를 단독으로 가져와야 할 때 활용할 수 있습니다. 1. multiply가 적용된 레이어를 복사합니다. (ctrl + a, ctrl + c) 2. 새 레이어를 추가 한 후 검정색으로 채워줍니다. (ctrl + shift + n, alt + delete) 3. 레이어 마스크를 추가합니다. (레이어 패널에서 선택) 4. 레이어 마스크를 선택한 후 multiply 이미지를 붙여넣습니다. (alt + 클릭, ctrl + v) 5. 이미지를 반전시켜줍니다. (ctrl + i) 6. 레이어의 불투명도를 조절하여 multiply 이미지와 비슷하..

[Excel] 엑셀에서 &nbsp(공백 특수문자) 제거하기

엑셀 내부 컨텐츠를 복사해서 에디터로 붙여넣기하면 소스에서는 보이지는 않지만 &nbsp가 숨겨져 있는 경우가 있다. ↓ 엑셀 내부 컨텐츠를 복사하기 전에 컨텐츠 내 &nbsp를 삭제해주어야 한다. 1. Ctrl + H 2. 찾을 내용 : Alt + 160 3. 바꿀 내용 : 띄어쓰기 4. 모두 바꾸기