펑션과 코딩의 행방불명

요즘 GTA를 하다보니 매번할때마다 길 찾기 알고리즘이 신기하였다. 이전에도 만들어보고 싶긴했는데 요즘 코딩을 잘 안하여서 이번기회에 '장기 프로젝트를 시작하자'라는 생각으로 제작하였다. [Map Editor] 일단 미로의 맵을 만들어 줄 프로그램이 필요하다. 물론 노가다하면 되긴 하지만 난 그러기 싫었다. 그래서 그냥 C# 으로 간단하게 하얀색은 지나갈 수 있는 경로, 빨간 색은 벽으로 하여 맵 에디터를 만들었다. 그리고 오른쪽 위에 Result 버튼을 누르면 맵을 파이썬에서 적용할 수 있는 형태로 반환하게 하였다. (간단하게 이용할 목적으로 만들어서 UI가 많이 구리다) [Algorithm] 먼저 어떤 탐험가(플레이어)가 저렇게 4개의 길을 갈 수 있다고 생각하자. 그렇다면 여기서 어떻게 하면 길을 ..

어제 동아리에서 형이 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를 지정해주자 점점 나도 웹에 적응하는 것 같아서 기분이 좋다.