최근 ASMR 영상 만들기에 취미가 붙어 하나 더 만들어서 공유합니다.
시원한 파도소리를 들으며 내용 읽어보셔도 좋을것 같습니다 :)
https://www.youtube.com/watch?v=2rJyU7YKLyM
웹에서 실행하는 파이썬! 파이스크립트도 그래프를 그릴수 있습니다.
바로 넘파이(numpy)와 맷플롯 라이브러리를 이용한 방법인데요.
일부 내용만 제외하면 파이썬과 똑같습니다.
우선 전체 소스와 출력결과를 공개하도록 하겠습니다.
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>라이브러리 사용</title>
<!-- linking to PyScript assets -->
<link rel="stylesheet" href="https://pyscript.net/releases/2022.12.1/pyscript.css" />
<script defer src="https://pyscript.net/releases/2022.12.1/pyscript.js"></script>
</head>
<body>
<!-- display 명령에서 출력할 div -->
<div id="graph"></div>
<!-- 설치할 서드파티 -->
<py-config>
packages = ["numpy", "matplotlib"]
</py-config>
<py-script>
import numpy as np
import matplotlib.pyplot as plt
arr = np.array([5, 3, 4, 1, 2])
plt.plot(arr)
plt
display(plt, target="graph")
</py-script>
</body>
</html>
소스가 아주 간결하지요?
이 페이지는 크레이의 파이스크립트 홈페이지에서도 보실 수 있는데요.
http://py.dreamplan7.com/pyscript-book/?ex2
로딩하는데 시간이 소요됩니다.
그것은 실시간으로 사용자분의 컴퓨터에서 파이썬 엔진을 작동하기 때문이지요.
최근(2023. 10. 7 확인) 변경된 파이스크립트에 따르면, numpy 와 matplotlib 등과 같은 라이브러리를 사용하려면 패키징(packing)과 import 를 해주어야 하는데요. 그 방법이 변경되었습니다.먼저 HTML 태그에서 <py-config> 태그를 이용해 2개의 라이브러리를 패키징해주어야 합니다.
<py-config>
packages = ["numpy", "matplotlib"]
</py-config>
라이브러리를 사용할 때는 파이썬과 사용법이 동일합니다.
import numpy as np
import matplotlib.pyplot as plt
주목할 만한 점이 하나 더 있는데요.
파이썬과 다르게 그래프를 출력할 대상을 특정할 수 있다는 점입니다.
이를테면 HTML 태그로 아래와 같이 그래프를 그릴 대상을 정의하고
<div id="graph"></div>
파이스크립트에서 결과를 출력할 때는 print 대신 display 명령을 사용하는 것입니다.
이 때 target 에 대상의 id값을 명시해 줍니다.
display(plt, target="graph")
HTML 요소는 화면 어디에나 배치가 가능하므로 이로써 출력 결과를 자유롭게 화면 어디나 할 수 있는 장점이 있습니다.
웹에서의 파이썬, 바로 실행하여 누구에게나 보여줄 수 있는 파이스크립트의 색다른 매력이 흥미롭지 않으신가요? :)
오늘도 방문해주신 모든 분들께 감사드립니다. 그럼!
다음 게시글 : https://itadventure.tistory.com/638
'코딩과 알고리즘' 카테고리의 다른 글
구글코랩에서 sqlite 파일 생성! ( 파이썬 ) (0) | 2024.01.02 |
---|---|
웹 파이썬, 파이스크립트 비기[1] ( 실시간 모듈 설치 ) (2) | 2023.10.10 |
새로와진 웹 파이썬, 파이스크립트 (0) | 2023.09.29 |
추억의 IQ1000,2000 MSX 에뮬레이터 (10) | 2023.03.11 |
크레이의 IT탐구 개발글 링크 모음 (47) | 2023.01.28 |