Pysketchの最初の観察:楽しみのためのパイソン!

PySketch.com は、クリエイティブコーディングを好きな人に社会的なコーディング体験を提供することを目的とPythonのWebエディタです.あなたはHTML 5やJavaScriptライブラリへのアクセスや他の才能のある開発者からの他のPythonプロジェクトを探索する楽しいプロジェクト、ゲーム、グラフィックスを構築することによって、ウェブ上でPythonのスキルを向上させるか、ショーケースすることができます.これは、すべての主要なモバイルおよびデスクトップブラウザーで動作し、お友達とプロジェクトやゲームを共有することができますまたはあなたのブログのあなたの聴衆のために埋め込む.
あなたがパイソン人であるならば、あなたは家で感じるでしょうPySketch !
この有名なフラッピな鳥ゲームPysketchで行わチェックします.
ロゴをバウンスする
我々は基本的なポイントをカバーするバウンスロゴスケッチを行うことによって基礎を学びます.それは最も有名なスクリーンセーバーです、そして、それはここでそれを構築するのが楽しいでしょう.ここでは最終的なスケッチは、コードと実行を再生する自由を感じる.
コードを詳しく見てみましょう.
モジュールの読み込み

from browser import document, window
from browser.html import CANVAS, IMG
from random import randint

Document and window モジュールはJavaScriptバージョンと等価です.これらはJavaScriptプロパティ、グローバル変数などにアクセスするためのものです.browser.html はHTMLタグのラッパーモジュールです.これは、Pythonで簡単にDOM要素を作成し、操作することができます.他のすべてのタグと例については、チェックしてくださいhere.
ドムAPI

canvas = CANVAS(width=width, height=height)
document.body <= canvas

ctx = canvas.getContext('2d')

ここでは、キャンバス要素を作成し、HTMLページの本体に追加します.ctx は、描画操作を行うキャンバスのコンテキストです.我々は、キャンバスAPIの詳細には行っていないが、より多くの情報を得ることができますhere.
積荷資産

logo = IMG(src ='logo.png')
logo.onload = lambda e: loop(0)

ファイルは非同期にロードされます.これは、イメージが以下の行で利用できないことを意味します.だから我々はonload ここのコールバック.一度ロゴが読み込まれると、我々のアプリはループを開始します.あとでループパーツに来ます.
Pysketchは、スケッチで使うことができる資産のためにクラウドホスティングを提供します.スケッチの詳細に移動します.
上記のコードスニペットで見られるように、スケッチ資産はファイル名によってロードされることができます.

描画機能

def draw():
  global x, y, x_speed, y_speed
  ... does calculations here
  ctx.drawImage(logo, x, y)

これは、主な描画機能であり、それはアカウントに速度を取ることによって、新しい位置を計算し、キャンバスのコンテキストでロゴをレンダリングします.コンテキストで図面のアイデアを得るために最終的なスケッチにインラインコメントをお読みください.
メインループ

def loop(t):
  draw()
  window.requestAnimationFrame(loop)

これはほとんどのグラフィカルなアプリの中心です.これはプログラムの全体的な流れを指し、手動で停止するまで無限にループを保持します.ブラウザ内蔵requestAnimationFrame 関数.これは、ページをブロックせずにブラウザ上でスムーズなアニメーションを実行するように設計されています.ブラウザが次のリペイントを実行する前に、アニメーション関数が呼び出されます.新しいフレームを要求するなら、コールバックの数は通常、毎秒60回です.
このループではdraw 関数は、描画後、再帰的に新しいフレームを要求します.我々はアプリを停止するまで、このプロセスは永遠に繰り返されます.
どのようにPythonはブラウザで実行されていますか?
いくつかの印象的なプロジェクトは、ブラウザなどにPythonをもたらすBrython , Transcrypt , Skulpt , Pyodide . PysketchはブラウザでJavaScriptにPythonをコンパイルするbrythonを使用します.ご覧くださいthis article あなたがもっと学びたいならば、テクノロジーと比較について.
結論
PythonベースのアプリケーションをPysketchを使ってブラウザに直接実装する方法を見ました.JavaScriptとWeb開発に精通している場合は、アプリケーションを使用してゲームをビルドし、Pythonを使用してゲームがあります.
JavaScriptは、速度、使いやすさと保守性の点で置き換えることはできませんが、HTML 5を楽しむ方法があることを知っておくのは良いことです.
より多くの例とチュートリアルのためにpysketch.com