Skip to main content

This Python package is a magic command that executes Python code in code cells on Jupyter and Google Colab using PyScript within an iframe.

Project description

P5 Magic Command

概要

Jypyter(notebook/lab)・VSCodeまたはGoogle Colabでp5.js/q5.js/p5play.jsを使ったコードセルのPythonコードをPyScriptを使ってiframe(ブラウザ)上で実行するマジックコマンドです。

使い方

マジックコマンドの追加

コードセルに以下のコードを貼り付けて実行しマジックコマンドを登録してください。カーネルやランタイムを再起動する度に再実行する必要があります。

%pip install -q -U pysmagic p5magic
from p5magic import register_p5magic

register_p5magic()

マジックコマンドの使い方

コードセルの冒頭に以下のようにマジックコマンドを記述してください。実行するとアウトプットにiframeが表示されてその中でコードセルのコードがPyScriptで実行されます。グローバルモード及びインスタンスモードの両方に対応しています。

以下は、q5.jsライブラリを使って描画した赤い円を矢印キーで動かす例です。

グローバルモード

%%runp5

x = 100
y = 100

def setup():
    p5.createCanvas(300, 300)

def draw():
    global x, y
    background(128)
    fill(255, 0, 0)
    ellipse(x, y, 50, 50)

    if keyIsDown(LEFT_ARROW):
        x -= 1
    if keyIsDown(RIGHT_ARROW):
        x += 1
    if keyIsDown(UP_ARROW):
        y -= 1
    if keyIsDown(DOWN_ARROW):
        y += 1

インスタンスモード

%%runp5 500 500 white False

import pyscript
import js

def sketch(p5):
    x = 100
    y = 100

    def setup():
        p5.createCanvas(300, 300)

    def draw():
        nonlocal x, y
        p5.background(128)
        p5.fill(255, 0, 0)
        p5.ellipse(x, y, 50, 50)

        if p5.keyIsDown(p5.LEFT_ARROW):
            x -= 1
        if p5.keyIsDown(p5.RIGHT_ARROW):
            x += 1
        if p5.keyIsDown(p5.UP_ARROW):
            y -= 1
        if p5.keyIsDown(p5.DOWN_ARROW):
            y += 1

    p5.setup = setup
    p5.draw = draw

js.p5start(sketch)

マジックコマンド

%%runp5

セル内のp5play.jsライブラリを使ったPythonコードをPyScriptを用いてiframe内で実行するマジックコマンド

%%runp5 [width] [height] [background] [p5_global] [p5_type] [p5play_use] [py_type] [py_conf] [js_src] [py_ver]
  • width: iframeの幅を指定します。デフォルトは500です。
  • height: iframeの高さを指定します。デフォルトは500です。
  • background: iframeの背景色を指定します。デフォルトはwhiteです。
  • p5_global: p5playをグローバルモードと同様のコーディングができるようにするかどうかを指定します。デフォルトはTrueです。
  • p5_type: 実行するp5.jsの種類。q5またはp5を指定します。q5は軽量p5互換ライブラリのq5.js、p5はp5.jsを使います。デフォルトはq5です。
  • p5play_use: p5play.jsを使うかどうかを指定します。デフォルトはFalseです。
  • py_type: 実行するPythonの種類。pyまたはmpyを指定します。mpyはMicroPyton、pyはCPython互換のPyodideで実行します。デフォルトはmpyです。グローバルモードのときはmpy固定です。
  • py_conf: PyScriptの設定を''で囲んだJSON形式で指定します。デフォルトは{}です。
  • js_src: 外部JavaScriptのURLを''で囲んだ文字列のJSON配列形式で指定します。デフォルトは[]です。
  • py_ver: PyScriptのバージョンを指定します。

%%genp5

セル内のp5play.jsライブラリを使ったPythonコードからブラウザで実行可能な単一HTMLを生成するマジックコマンド。オプションはrunp5と同じです。

%%genp5 [width] [height] [background] [p5_global] [p5_type] [p5play_use] [py_type] [py_conf] [js_src] [version]

ライセンス

p5play.jsはAGPL-v3ライセンス・商用ライセンスのデュアルライセンスとなっていますので使用の際は確認してください。

Project details


Download files

Download the file for your platform. If you're not sure which to choose, learn more about installing packages.

Source Distribution

p5magic-2.0.2.tar.gz (4.9 kB view details)

Uploaded Source

Built Distribution

p5magic-2.0.2-py3-none-any.whl (5.5 kB view details)

Uploaded Python 3

File details

Details for the file p5magic-2.0.2.tar.gz.

File metadata

  • Download URL: p5magic-2.0.2.tar.gz
  • Upload date:
  • Size: 4.9 kB
  • Tags: Source
  • Uploaded using Trusted Publishing? No
  • Uploaded via: twine/5.1.1 CPython/3.12.3

File hashes

Hashes for p5magic-2.0.2.tar.gz
Algorithm Hash digest
SHA256 96a53b5bebe7d13daf307a94d0ba82ae886edb91b84895b4128dcf451f60a72f
MD5 e03e5f2a1091925913cc6b178a2b4428
BLAKE2b-256 da6775019930069a31df26137e1c59e7981e3c84a2249d42d8758525c9005c63

See more details on using hashes here.

File details

Details for the file p5magic-2.0.2-py3-none-any.whl.

File metadata

  • Download URL: p5magic-2.0.2-py3-none-any.whl
  • Upload date:
  • Size: 5.5 kB
  • Tags: Python 3
  • Uploaded using Trusted Publishing? No
  • Uploaded via: twine/5.1.1 CPython/3.12.3

File hashes

Hashes for p5magic-2.0.2-py3-none-any.whl
Algorithm Hash digest
SHA256 9c5c30e2b9ed1386dd724afa16f42a328b0668395cbd27cb586fa1d90dfe78d2
MD5 585234c1dd114a8180b97fd0c35b75cc
BLAKE2b-256 405d05599ae23163e64bc044dbf104a33a8fd5c96dbeb54a9e5d15ec694904b1

See more details on using hashes here.

Supported by

AWS AWS Cloud computing and Security Sponsor Datadog Datadog Monitoring Fastly Fastly CDN Google Google Download Analytics Microsoft Microsoft PSF Sponsor Pingdom Pingdom Monitoring Sentry Sentry Error logging StatusPage StatusPage Status page