본문 바로가기
코딩과 알고리즘

웹 파이썬, 파이스크립트의 그래프와 바다 ASMR 유튜브

최근 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

 

웹 파이썬, 파이스크립트 비기[1] ( 실시간 모듈 설치 )

※ 이번 게시글은 난해한 내용을 포함하고 있습니다. 코딩 공부중이시면 이해하지 못해도 조금도 좌절 않으셔도 됩니다. 그냥 이런게 있구나 참고만 해주사고 복붙해 응용만 하셔도 상당히 잘

itadventure.tistory.com