반응형

사람들에게 나무를 그려보라고 하면,

그리는 사람에 따라 정말 다양한 나무 그림이 나올 것이다.

HTML5를 통해 나무를 그리는 것 역시, 다양한 결과물이 나온다.

 

DEMO

 

WaysToDrawTree

Demonstration of various ways to draw tree in HTML5

truemaxdh.github.io

SOURCE

 

truemaxdh/WaysToDrawTree

Demonstration of various ways to draw tree in HTML5 - truemaxdh/WaysToDrawTree

github.com

1. 겨울나무

 

https://truemaxdh.github.io/WaysToDrawTree/Tree1.html

 

truemaxdh.github.io

2. 여름나무

 

https://truemaxdh.github.io/WaysToDrawTree/Tree2.html

 

truemaxdh.github.io

3. 조금 더 그럴싸한 여름나무

 

https://truemaxdh.github.io/WaysToDrawTree/Tree3.html

 

truemaxdh.github.io

4. 조금 더 그럴싸한 여름나무2

 

https://truemaxdh.github.io/WaysToDrawTree/Tree4.html

 

truemaxdh.github.io

 

그밖에 참고할 만한 링크

https://gist.github.com/gsluthra/3401766

 

Fractal Tree Generation using HTML5 Canvas and Random Numbers

Fractal Tree Generation using HTML5 Canvas and Random Numbers - tree_html5.html

gist.github.com

https://www.codediesel.com/javascript/drawing-trees-in-canvas/

 

Drawing Trees in Canvas - codediesel

Lately I’ve been experimenting with the new HTML5 Canvas element, and the best way to learn some new technology is to create something in it. For some time I’ve been dabbling in Processing and thought of porting some algorithms there in Canvas. Rather than

www.codediesel.com

https://github.com/PavlyukVadim

 

PavlyukVadim - Overview

PavlyukVadim has 37 repositories available. Follow their code on GitHub.

github.com

 

그리고, 이것도 있다.

FFF(Form Follows Function) - Plant Tree

 

Form Follows Function

FFF is a collection of interactive experiences. Each experience has its own unique design and functionality.

fff.cmiscm.com

HTML5로 나무를 그리는 방법은, 

기본적으로는 CANVAS 및 재귀함수를 사용하여 그린다는 공통점이 있다.

하지만, 여기에 각자의 차이점들이 더해지면서,

실로 다양한 그림이 나올 수 있다는 것을 느꼈다.

그 차이점은, 프로그래밍 지식이나 스타일에 국한되지 않고,

사물에 대한 지식, 미적 감각, 관찰력, 상상력 및 창의성 등 다양한 분야에서 드러난다.

단순히 나무를 그리는 작업도, 생각보다 재밌는 놀이가 될 수 있다.

'놀이'(Play)라는 관점으로 접근하면, 많은 일들이 재밌어질 수 있을 것이다.

 

반응형
반응형

웹사이트나 기타 개발 작업 중에,

한글이 깨지는 문제는 종종 발생하는 것 같다.

지금까지 문제없이 운영되던 사이트에서도,

몇가지 운영 환경이 변경되거나 관련 소스가 변경되는 경우

한글 깨짐 문제가 발생할 수 있다.

애초에 컴퓨터 관련기술이 영어권에서 발달했기에,

영어권에 맞추어서 모든 기술이 개발되고 있고,

필요에 따라 타 언어권에 대한 지원이 추가되는 식으로 발달해 왔다.

그렇기 때문에, 서버건 프레임워크건

기본적인 설정만으로는 한글에 문제가 생기기 마련이다.

 

일단 한글 깨짐 문제가 발행하면,

큰 부분부터 세부적인 부분으로 범위를 좁혀가며

원인을 찾아나가는 것이 현명한 것 같다.

가령 웹프로젝트인 경우, 일단 서버 설정부터 확인하고,

그 다음에 프레임워크, 다음에 개별 페이지 순으로 범위를 좁혀가는 것이다.

 

참고:

1. Tomcat에서 한글 encoding을 설정 : https://kcmuni.tistory.com/entry/%ED%95%9C%EA%B8%80-%EA%B9%A8%EC%A7%90-%EC%B2%98%EB%A6%ACURIEncodingUTF-8

 

한글 깨짐 처리(URIEncoding="UTF-8")

Tomcat에서 한글 encoding을 설정하는 방법은 요청 메써드 (GET or POST)에 따라 다르다. get 방식 Tomcat의 sever.xml 을 열고

kcmuni.tistory.com

 

반응형
반응형

c++에서 소켓 프로그래밍을 하는 경우,

특별히 namespace를 지정하지 않았음에도

컴파일시에 bind 함수의 namespace가

자동으로 std::bind로 지정되는 경우가 있다.

namespace를 지정하지 않더라도,

컴파일러에서 자동으로 가장 비슷한 namespace를 찾아내어

지정하기 때문이다.

bind함수와 std::bind함수는 전혀 다른 함수이기 때문에,

이런 경우에는 명시적으로 namespace가 없다는 것을

컴파일러에 설명해 주어야 한다.

 

그러기 위해서는, 함수 앞에 그냥 ::을 붙여주면 된다.

예를 들면 다음과 같다.

 

// bind(_sockfd, _sockaddr, _addrlen);
// ===>
::bind(_sockfd, _sockaddr, _addrlen);

 

 

반응형

'프로그래밍' 카테고리의 다른 글

나무를 그리는 몇가지 방법  (0) 2019.06.13
한글깨짐  (0) 2019.05.29
리눅스에 SVN 설치하기  (0) 2019.04.29
WebAudio API를 이용한 간단한 화음  (0) 2018.06.03
HTML5에서 테스트해 봐야 할 두가지 함수  (0) 2018.05.10
반응형
반응형
반응형

참고 사이트 : https://css-tricks.com/introduction-web-audio-api/


WebAudio API를 이용한 간단한 화음


반응형
반응형
  • globalCompositeOperation
    • canvas에서 사용
    • 이미지의 겹쳐지는 부분들은 밝아지도록 하는 기능
  • requestAnimationFrame
    • 일정 간격으로 함수를 호출하는데 사용하는 함수
    • 애니메이션 구현시 사용(60FPS)
반응형
반응형
반응형
반응형
https://mrcoles.com/piano/

반응형
반응형

얼마 전에, HTML의 INPUT 태그 중에서 

Radio 버튼의 변경을 막는 방법을 알아보았는데,

이번에는 Select Box의 변경을 막아야 할 일이 생겼다.

그래서 검색을 해 보다가,

가장 쓸만하고 적절한 방법을 발견하게 되었다.

다음 블로그에서 발견한 내용이다.

http://senni.tistory.com/18




위와 같이, select 태그에 onfocus와 onchange를 추가하면,

옵션 선택을 변경하더라도 변경 내용이 적용되지 않는다.

onfocus와 onchange 이벤트를 적절히 활용해서, 

간단하게 한줄로 마무리하는 모습이 인상적이다.

반응형
반응형

'나는 프로그래머다'에 소개된,

책으로는 '나는 프로그래머다2'에 소개된,

현직 구글러 김종민씨의 블로그이다.

jongmin kim blog


'나프다2'를 책으로 보면서,

궁금증이 생겨서 블로그를 찾아가 봤더니,

역시 잘 만들었구나...하는 생각이 들었다.

보다 보면 배울 점도 많고, 

뭐라도 한번 해보고 싶은 욕구가 생긴다.

동기부여가 되는 사이트이다.



반응형

+ Recent posts