인생은 효율성

  • 홈
  • 태그
  • 방명록

HTMLcanvas 1

[HTML] HTML canvas로 Flow Field 구현하기

Flow Field Flow Field 는 시뮬레이션에 사용되는 그래픽 기술로, 각 지점에 대한 특정 방향으로의 흐름을 나타내는 표현 방법이다. (feat. chat GPT) 예시를 찾아보면 초등학생 때 철가루와 자석을 이용해 자기장을 표시하는 듯한 비주얼이다. generative art 결과물들을 보면 여기에서도 많이 쓰이는듯한데 p5.js 라는 라이브러리를 이용하면 좀 더 편하게 구현할 수 있는 모양이다. 하지만 간단한 건 직접 구현하기 그다지 어렵지 않으니 HTML canvas + JavaScript 로 직접 구현해 보자. 결과물 위처럼 마우스 드래그 할 때마다 Flow Field가 그려지도록 만들 것이다. Flow Field 구현 세세한 코드를 전부 올리진 않고(어차피 GitHub에 있으니..) ..

WEB 2024.02.20
이전
1
다음
더보기
250x250
프로필사진
  • 분류 전체보기 (215)
    • 짧은만화 (15)
    • 토이프로젝트 (20)
    • JavaScript (26)
    • React (17)
    • 알고리즘 (91)
    • WEB (14)
    • 개발환경 (6)
    • 프로그래밍 (8)
    • 네트워크 (7)
    • MSSQL (6)
    • 기타 (2)

최근댓글

최근글과 인기글

  • 최근글
  • 인기글

방문자수Total

  • Today :
  • Yesterday :

Copyright © Kakao Corp. All rights reserved.

티스토리툴바