728x90 반응형 '따릉이' 사용 이력의 가시화 Project - 04. 대여소 위치 표시하기 이제 대여서 위치를 표시 해 보도록 하겠습니다. 이것은 기존에 참고했던 맛집 위치 표시 코드를 그대로 사용하면 됩니다. 그런데, 코드 분석을 너무 안해서 D3를 써서 어떻게 그리고 있는지 거의 모르고 있네요. 그리는 부분만 좀 확인 해 보도록 하겠습니다. 우선 색상은 class별로 색상을 지정하는 style을 써서 적용했기 때문에, javascript code에는 나타나지 않습니다. style을 회색에서 녹색으로 수정해 보겠습니다. 요렇게 지정한 색상이 적용 됩니다. 나중에 구별로 다른 색상을 표시하려면 fill 속성값을 로직으로 직접 계산해서 출력해야겠네요. 출력 된 HTML 코드를 보면, 색상과 관련 된 속성은 없는 것을 볼 수 있습니다. class id를 보면 style이 적용 된 속성인 것을 알 .. 2021. 2. 7. [아빠의 Roblox 숙제]#2. 물체를 밀어서 이동시키기(1) 첫째 아이가 구상한 맵은 물을 건너가야 하는데, 헤엄을 못쳐서 뭔가 밟고 건너가는 시나리오로 만들어보자고 하였습니다. 물 넣는 것은 아직 모르니 일단 땅 위에서 만들어보려고 했어요. 건너가야 할 거리가 멀어서 중간에 발판을 이동시켜서 건너가도록 코스를 만들려고 했어요. 그런데, 그냥 플레이어로 밀면 될 줄 알았는데 잘 안되더라구요. 테스트 해 보니, 육면체는 잘 밀리지 않는데, 구는 쌩~ 굴러가고. 구는 재질에 따라 무게가 달라지는지 굴러가는 속도가 달라졌어요. 이것 저것 테스트를 많이 해 본 결과, 마찰력 속성을 설정해주면 되더라구요. 속성 중, 물리 속성을 설정 할 수 있는 속성을 이용합니다. 그런데, 이렇게만 하면, 바닥의 마찰력 때문인지 밀리지가 않더라구요. Terrain의 마찰력도 다 0으로 해.. 2021. 1. 30. [아빠의 Roblox 숙제]#1. 와리가리 물체를 이용해서 건너가기 둘째 아이가 만들고 싶어한 맵이 '길건너 친구들'처럼 이동하는 물체를 딛고 건너가는 형식의 점프맵이었습니다. 이동하는 물체는 스크립트로 위치를 조정해주면 쉽게 되는데, 그 위에 탈 수 있게 하는 것은 조금 더 복잡하더라구요. CFrame이 핵심이었던 것 같기도 하고~~~ 길 건너 친구들처럼 공중에서 떨어지지 않고 건너가는 맵을 만들 때 사용 할 수 있는 모듈을 만들어 봤어요. 여러가지 방식이 있는 것 같은데, 참고 한 방식은 두 개의 파트 사이에서 충돌하면 방향을 변경 해 주는 방식입니다. 두 개의 파트가 있어야 한다는 제약이 있지만, 달리 말하면 두 개의 파트 위치를 조정하면 직관적으로 수정이 용이하죠. 코드는 아래와 같습니다. 아직 초보라서 좀 이해 안되는 부분이 있긴한데, 언제고 이해 될 날이 오겠.. 2021. 1. 29. Firebase로 web hosting Pilot project를 만들어서 온라인에서 써 보려면 어떤 형태로든 public에서 접근 가능한 곳이 있어야 하는데, 지속적인 서비스를 하지 않으면 이런 곳 섭외부터가 좀 부담이 됩니다. 최근에 github에 올린 코드가 그대로 hosting 되는 것을 확인했는데, 애초 목적이 그것이 아니라서 정적인 코드만 쓸 수 있다는 한계가 있었죠. 그런 문제로 자문을 구해 보니, firebase에서 web hosting이 된다는 것을 알 수 있었고, 조금 맛을 보니 꽤 좋은 것 같네요. 간단히 확인 한 내용 정리 해 둡니다. 이 내용의 포스트도 여기저기 많이 있으니 참고 하시면 됩니다. 저는 Firebase에서 준비 해 둔 내용을 보고 따라 해 봤습니다. https://firebase.google.com/doc.. 2020. 12. 12. '따릉이' 사용 이력의 가시화 Project - 03. 서울지도 그리기와 대여소 현황 데이터 얻기 많은 분들께 참조가 되었던 아래 사이트의 내용을 잠시 살펴보겠습니다. https://www.lucypark.kr/blog/2015/06/24/seoul-matzip-mapping/ D3를 이용한 서울시내 맛집 시각화 (feat. 식신로드) - Lucy Park 이 글의 초안은 원래 지난 5월 초에 작성했는데, 바쁜 일들 처리하고, 메르스가 오고, 여차저차 하다보니 어느덧 6월 말이 되어버렸네요. 시의성을 위해서는 맛집 대신 다른 내용의 지도를 내보�� www.lucypark.kr 지금은 코로나가 난리인데, 메르스가 언급 되는 것을 보니 시간이 많이 흐른 것이 체감 되네요. 코로나도 빨리 지나가면 좋겠습니다. 1. 요약 [0단계] - D3.js와 TopoJSON을 이용해서 가시화 한다. [1단계] - 네이.. 2020. 8. 23. [opengl].[#2.GLSL] 02. Shader 사용 기반 코드 작성 Shader를 사용하기 위한 준비를 해 보겠습니다. 참고가 될 만한 Reference를 잠시 찾아봤는데, 옛 생각이 나서 예전에 많이 보던 사이트에 한번 가봤습니다. NeHe gamedev https://nehe.gamedev.net/ NeHe Productions - Everything OpenGL by gregsidelnikov, posted at May 7, 2017, 6:02 p.m. Actually, this post is not about how I made MK7 in OpenGL, but what the results were. I am currently porting it to WebGL as well. The level design geometry is so simple, that it.. 2020. 8. 9. [opengl].[#2.GLSL] 01. OpenGL 1.1 기반의 랜더링 최신의 OpenGL과 Shader를 사용하기 위해 glew 연동까지 준비가 되었습니다. 1. 기본 랜더링 코드 이후에 진행 될 GLSL 기반의 랜더링과 비교를 용이하게 하기 위해, 1.1 기반의 랜더링에 조금 신경을 써보겠습니다. 삼각형 대신 glut에서 제공되는 주전자 그리기 기능으로 주전자를 그리고, 배경색이나 Depth 버퍼 초기화도 추가했습니다. void display() { //Clear glClearColor(0.0f, 0.0f, 0.0f, 1.0f); glClear(GL_COLOR_BUFFER_BIT|GL_DEPTH_BUFFER_BIT); //Draw glColor3f(0.0f, 0.0f, 1.0f); glutSolidTeapot(0.5); glFinish(); } 2. 조명 효과 조명 효과.. 2020. 8. 9. [opengl].[#1.Setup] Windows/VS2019/glut 기반의 셋업(3) - glew로 shader 사용 환경 구축 오랜만에 opengl을 다시 펼쳐보는 이유는, 모바일이나 웹에서 opengl을 다시 살펴 볼 일이 생겨서인데, 또 그러자니 PC기반에서 해 왔던 부분이 현재도 유효할까 궁금하고, 혹시 획기적으로 더 편리해진 부분은 없을까 궁금했습니다. 그런데, 새로운 변화보다 더 값진 것을 얻게 되는 것 같네요. 이전에 잘 모르고 했던 일들의 의미에 대해서 알게 되고, 심리적 부담이 되던 작업들을 이해하게 되면서 모르던 것이 조금 더 줄었다는 기쁨?? ^^ opengl에 대해서 세세하게 모든 것을 다시 다루는 것은, 경험 상 너무 힘든 일이고, 더구나 요즘 그런 코드를 직접 작성 할 경우도 많지 않아서 그 만한 가치도 없을 것 같습니다. 그래서, opengl에 대한 여러가지 내용은 생략하고, 웹이나 모바일에서 동일하게 .. 2020. 8. 8. [opengl].[#1.Setup] Windows/VS2019/glut 기반의 셋업(2) - glut(freeglut)로 opengl 창 띄우기 예전에 짜두었던 코드를 지금 다시 VS2019에서 빌드 해 보려니 거의 대부분 실행이 안되네요. 그래서, glut 기반으로 다시 만들어봐야겠다 싶어 glut 받으러 가 봤더니... https://www.opengl.org/resources/libraries/glut/ GLUT - The OpenGL Utility Toolkit GLUT - The OpenGL Utility Toolkit We direct you to use FreeGLUT found on SourceForge: http://freeglut.sourceforge.net/. The original GLUT has been unsupported for 20 years. www.opengl.org 세월이 많이 흘렀음을 보여주는 문구가 있네요. .. 2020. 8. 8. 이전 1 다음 728x90 반응형
