펑션과 코딩의 행방불명

어제 동아리에서 형이 Matlab을 이용하여 각도와 힘의 크기를 이용하여 물체의 궤도를 계산하는 프로그램을 만들 것을 보고 나도 한번 만들고 싶었다. 요즘 나의 관심사는 Javascript이기 때문에 나는 Matlab 대신 JS를 이용하여 프로그램을 재구성을 해보았다. 항상 그래왔듯이 Canvas를 이용하여 만들었다. const canvas = document.getElementById("canvas") const ctx = canvas.getContext("2d") //상수 설정 const WIDTH = canvas.width const HEIGHT = canvas.height //중력 가속도 상수 const GRAVITY_SCALE = 10 const print = (t) => console.log(..

오늘은 광복절로 구글에서 태극기 모양 폭죽을 만들어주었다. 저걸 보고 나는 감탄과 동시에 만들어 보고 싶었다! 그래서 바로 시작했다. 마침 내가 어제 만들었던 폭발 이펙트와 잔상(꼬리) 이펙트가 있어서 그걸 활용하였다. 먼저 오늘은 밤하늘이 배경이니까 #070816(진한 남색) 정도로 맞춰준다. //벡터 class Vector { constructor(x, y) { this.x = x this.y = y } add(b) { this.x += b.x this.y += b.y } clone() { return new Vector(this.x, this.y) } } //색상 class RGB { constructor(r, g, b, a = 1) { this.R = r this.G = g this.B = b t..

어제 밤에 나는 이 웹사이트에 들어가봤다. 뭔가 다 예뻐 보이는 것들 중에 뭔가 내가 할 수 있을거 같은게 눈에 들어왔다. 그래서 어려울거 같지만 시도해봤다. 오늘은 코드가 좀 길어서 설명하기 힘드니 주석을 열심히 썼습니다. 양해 부탁드려요 ㅠㅠ //랜더링 function render() { //화면 지우기 clear() //그리기 RenderList.forEach(i => i.draw()) } //이펙트 색깔을 담을 리스트 const Palette = [ new RGB(32, 118, 187), new RGB(183, 111, 176), new RGB(244, 122, 158), new RGB(255, 152, 128), new RGB(255, 97, 55), new RGB(255, 198, 104),..

물리2 책을 보다가 벡터의 합성를 보고 바로 만들어 버렸다! 원점으로 부터 두 벡터 A(x₁, y₁) B(x₂, y₂)가 있으면 두 벡터의 덧셈은 (x₁ + x₂, y₁ + y₂) 이 된다. 그래서 두 벡터와 합을 표기할 벡터만 만들어주면 끝난다. 벡터는 Vector라고 짓기에 좀 그래서 Newron이라고 이름을 붙여주었다. draw는 벡터를 그려주는 거고, setPos는 벡터의 좌표 설정, isWithinRange는 마우스를 클릭했을때 해당 벡터를 선택한 여부를 리턴한다. 가장 밑줄을 보면 이벤트 함수들이 있다. 요놈들은 벡터를 움직일 때 필요한 이벤트들이다. canvas.addEventListener("mousemove", (event) => { const evtPos = [event.offsetX,..

Canvas를 JS에서 불러와서 사용하다 보면 이렇게 흐리게 그려지는 순간이 있다. 나도 처음에 놀라서 구글링을 해봤지만 구글에도 나오지 않아 예전 코드와 비교하며 열심히 찾고있던 도중 뭔가 이미지를 억지로 확대한거 같은 느낌을 받아 CSS에서 정의했던 canvas의 넓이를 이렇게 HTML에 줘봤더니 와우! 성공했다. 내가 보기에 이것의 원인은 아까 말한대로 원래 200x200을 1000x1000으로 확장시켜서 이미지가 손상이 온것과 같은 원리 같다. 즉, HTML에서는 100x100이라고 했지만 CSS에서는 800x800으로 확대 시킨것이다. 해결 방법 : HTML에서 canvas에 width와 height를 지정해주자 점점 나도 웹에 적응하는 것 같아서 기분이 좋다.

노마더 코드님의 강좌를 따라하다가 스크롤바가 나오길래 예전에 봤던 짤을 따라 만들고 싶어서 바로 제작했다. ㅎㅎ Hi 이렇게 입력하는 부분과 출력하는 부분을 만들어 준다. const inputNumber = document.getElementById("inputNumber") const displayNumber = document.getElementById("displayNumber") JS에서 건들수 있게 상수로 받아주고 inputNumber.addEventListener("change", (event) => { displayNumber.innerText=`Your Phone Number : ${splitNumber(inputNumber.value)}` }) 이벤트도 추가 해준다. 여기서 splitNu..