├── .github
└── workflows
│ └── ci.yml
├── .gitignore
├── .gitpod.yml
├── CHANGELOG.md
├── CONTRIBUTING.md
├── LICENSE
├── MANIFEST.in
├── Makefile
├── Makefile.bat
├── README.md
├── VERSION
├── bin
└── check_license.sh
├── dev-requirements.txt
├── docs
├── examples
│ ├── index.md
│ ├── pyodide
│ │ ├── bouncing
│ │ │ ├── bouncing.py
│ │ │ ├── bouncingFPS.py
│ │ │ ├── index.html
│ │ │ ├── odkaz.txt
│ │ │ ├── static
│ │ │ │ └── p5.js
│ │ │ └── target
│ │ │ │ └── target_sketch.js
│ │ ├── breakout
│ │ │ ├── breakout-kb.py
│ │ │ ├── breakout-ms.py
│ │ │ ├── breakout.py
│ │ │ ├── index.html
│ │ │ ├── static
│ │ │ │ └── p5.js
│ │ │ └── target
│ │ │ │ └── target_sketch.js
│ │ ├── flappybird
│ │ │ ├── flappybird.py
│ │ │ ├── images
│ │ │ │ ├── background.png
│ │ │ │ ├── bird1.png
│ │ │ │ ├── bird2.png
│ │ │ │ ├── birddead.png
│ │ │ │ ├── bottom.png
│ │ │ │ └── top.png
│ │ │ ├── index.html
│ │ │ ├── static
│ │ │ │ └── p5.js
│ │ │ └── target
│ │ │ │ └── target_sketch.js
│ │ ├── index.html.template
│ │ ├── memory
│ │ │ ├── LICENCE
│ │ │ ├── README.md
│ │ │ ├── images
│ │ │ │ ├── card_back.png
│ │ │ │ ├── checkmark-old.png
│ │ │ │ ├── checkmark.png
│ │ │ │ ├── im1.png
│ │ │ │ ├── im2.png
│ │ │ │ ├── im3.png
│ │ │ │ ├── im4.png
│ │ │ │ ├── im5.png
│ │ │ │ ├── im6.png
│ │ │ │ └── steve.png
│ │ │ ├── index.html
│ │ │ ├── memory.py
│ │ │ ├── static
│ │ │ │ └── p5.js
│ │ │ └── target
│ │ │ │ └── target_sketch.js
│ │ ├── mines
│ │ │ ├── images
│ │ │ ├── images30
│ │ │ │ ├── blank.png
│ │ │ │ ├── cover.png
│ │ │ │ ├── eight.png
│ │ │ │ ├── five.png
│ │ │ │ ├── flag.png
│ │ │ │ ├── four.png
│ │ │ │ ├── mine.png
│ │ │ │ ├── one.png
│ │ │ │ ├── red.png
│ │ │ │ ├── seven.png
│ │ │ │ ├── six.png
│ │ │ │ ├── three.png
│ │ │ │ └── two.png
│ │ │ ├── images60
│ │ │ │ ├── blank.png
│ │ │ │ ├── cover.png
│ │ │ │ ├── eight.png
│ │ │ │ ├── five.png
│ │ │ │ ├── flag.png
│ │ │ │ ├── four.png
│ │ │ │ ├── mine.png
│ │ │ │ ├── one.png
│ │ │ │ ├── red.png
│ │ │ │ ├── seven.png
│ │ │ │ ├── six.png
│ │ │ │ ├── three.png
│ │ │ │ └── two.png
│ │ │ ├── index.html
│ │ │ ├── mines.py
│ │ │ ├── static
│ │ │ │ └── p5.js
│ │ │ └── target
│ │ │ │ └── target_sketch.js
│ │ ├── pong
│ │ │ ├── index.html
│ │ │ ├── pong.py
│ │ │ ├── static
│ │ │ │ └── p5.js
│ │ │ └── target
│ │ │ │ └── target_sketch.js
│ │ ├── samegame
│ │ │ ├── index.html
│ │ │ ├── samegame.py
│ │ │ ├── static
│ │ │ │ └── p5.js
│ │ │ └── target
│ │ │ │ └── target_sketch.js
│ │ ├── sketch_001
│ │ │ ├── index.html
│ │ │ ├── sketch_001.py
│ │ │ ├── static
│ │ │ │ └── p5.js
│ │ │ └── target
│ │ │ │ └── target_sketch.js
│ │ ├── sketch_002
│ │ │ ├── index.html
│ │ │ ├── sketch_002.py
│ │ │ ├── static
│ │ │ │ └── p5.js
│ │ │ └── target
│ │ │ │ └── target_sketch.js
│ │ ├── sketch_003
│ │ │ ├── index.html
│ │ │ ├── sketch_003.py
│ │ │ ├── static
│ │ │ │ └── p5.js
│ │ │ └── target
│ │ │ │ └── target_sketch.js
│ │ ├── sketch_004
│ │ │ ├── index.html
│ │ │ ├── sketch_004.py
│ │ │ ├── static
│ │ │ │ └── p5.js
│ │ │ └── target
│ │ │ │ └── target_sketch.js
│ │ ├── sketch_005
│ │ │ ├── index.html
│ │ │ ├── sketch_005.py
│ │ │ ├── static
│ │ │ │ └── p5.js
│ │ │ └── target
│ │ │ │ └── target_sketch.js
│ │ ├── sketch_006
│ │ │ ├── index.html
│ │ │ ├── sketch_006.py
│ │ │ ├── static
│ │ │ │ └── p5.js
│ │ │ └── target
│ │ │ │ └── target_sketch.js
│ │ ├── sketch_007
│ │ │ ├── index.html
│ │ │ ├── sketch_007.py
│ │ │ ├── static
│ │ │ │ └── p5.js
│ │ │ └── target
│ │ │ │ └── target_sketch.js
│ │ ├── sketch_008
│ │ │ ├── index.html
│ │ │ ├── sketch_008.py
│ │ │ ├── static
│ │ │ │ └── p5.js
│ │ │ └── target
│ │ │ │ └── target_sketch.js
│ │ ├── sketch_009
│ │ │ ├── alien.png
│ │ │ ├── index.html
│ │ │ ├── rainbow.png
│ │ │ ├── sketch_009.py
│ │ │ ├── smile.png
│ │ │ ├── static
│ │ │ │ └── p5.js
│ │ │ └── target
│ │ │ │ └── target_sketch.js
│ │ ├── sketch_010
│ │ │ ├── index.html
│ │ │ ├── sketch_010.py
│ │ │ ├── static
│ │ │ │ └── p5.js
│ │ │ └── target
│ │ │ │ └── target_sketch.js
│ │ ├── sketch_011
│ │ │ ├── index.html
│ │ │ ├── sketch_011.py
│ │ │ ├── static
│ │ │ │ └── p5.js
│ │ │ └── target
│ │ │ │ └── target_sketch.js
│ │ └── sketch_012
│ │ │ ├── index.html
│ │ │ ├── sketch_012.py
│ │ │ ├── static
│ │ │ └── p5.js
│ │ │ └── target
│ │ │ └── target_sketch.js
│ ├── sketch_000
│ │ ├── index.html
│ │ ├── sketch_000.py
│ │ ├── static
│ │ │ └── p5.js
│ │ └── target
│ │ │ ├── org.transcrypt.__runtime__.js
│ │ │ ├── org.transcrypt.__runtime__.py
│ │ │ ├── pyp5js.js
│ │ │ ├── pyp5js.py
│ │ │ ├── pyp5js.python_functions.js
│ │ │ ├── pyp5js.python_functions.py
│ │ │ ├── sketch_000.js
│ │ │ ├── sketch_000.py
│ │ │ ├── target_sketch.js
│ │ │ ├── target_sketch.project
│ │ │ └── target_sketch.py
│ └── transcrypt
│ │ ├── index.html.template
│ │ ├── sketch_001
│ │ ├── index.html
│ │ ├── sketch_001.py
│ │ ├── static
│ │ │ └── p5.js
│ │ └── target
│ │ │ ├── org.transcrypt.__runtime__.js
│ │ │ ├── org.transcrypt.__runtime__.py
│ │ │ ├── pyp5js.js
│ │ │ ├── pyp5js.py
│ │ │ ├── python_functions.js
│ │ │ ├── python_functions.py
│ │ │ ├── target_sketch.js
│ │ │ ├── target_sketch.project
│ │ │ └── target_sketch.py
│ │ ├── sketch_002
│ │ ├── index.html
│ │ ├── sketch_002.py
│ │ ├── static
│ │ │ └── p5.js
│ │ └── target
│ │ │ ├── org.transcrypt.__runtime__.js
│ │ │ ├── org.transcrypt.__runtime__.py
│ │ │ ├── pyp5js.js
│ │ │ ├── pyp5js.py
│ │ │ ├── python_functions.js
│ │ │ ├── python_functions.py
│ │ │ ├── target_sketch.js
│ │ │ ├── target_sketch.project
│ │ │ └── target_sketch.py
│ │ ├── sketch_003
│ │ ├── index.html
│ │ ├── sketch_003.py
│ │ ├── static
│ │ │ └── p5.js
│ │ └── target
│ │ │ ├── org.transcrypt.__runtime__.js
│ │ │ ├── org.transcrypt.__runtime__.py
│ │ │ ├── pyp5js.js
│ │ │ ├── pyp5js.py
│ │ │ ├── python_functions.js
│ │ │ ├── python_functions.py
│ │ │ ├── target_sketch.js
│ │ │ ├── target_sketch.project
│ │ │ └── target_sketch.py
│ │ ├── sketch_004
│ │ ├── index.html
│ │ ├── sketch_004.py
│ │ ├── static
│ │ │ └── p5.js
│ │ └── target
│ │ │ ├── org.transcrypt.__runtime__.js
│ │ │ ├── org.transcrypt.__runtime__.py
│ │ │ ├── pyp5js.js
│ │ │ ├── pyp5js.py
│ │ │ ├── python_functions.js
│ │ │ ├── python_functions.py
│ │ │ ├── target_sketch.js
│ │ │ ├── target_sketch.project
│ │ │ └── target_sketch.py
│ │ ├── sketch_005
│ │ ├── index.html
│ │ ├── sketch_005.py
│ │ ├── static
│ │ │ └── p5.js
│ │ └── target
│ │ │ ├── org.transcrypt.__runtime__.js
│ │ │ ├── org.transcrypt.__runtime__.py
│ │ │ ├── pyp5js.js
│ │ │ ├── pyp5js.py
│ │ │ ├── python_functions.js
│ │ │ ├── python_functions.py
│ │ │ ├── target_sketch.js
│ │ │ ├── target_sketch.project
│ │ │ └── target_sketch.py
│ │ ├── sketch_006
│ │ ├── index.html
│ │ ├── sketch_006.py
│ │ ├── static
│ │ │ └── p5.js
│ │ └── target
│ │ │ ├── org.transcrypt.__runtime__.js
│ │ │ ├── org.transcrypt.__runtime__.py
│ │ │ ├── pyp5js.js
│ │ │ ├── pyp5js.py
│ │ │ ├── python_functions.js
│ │ │ ├── python_functions.py
│ │ │ ├── target_sketch.js
│ │ │ ├── target_sketch.project
│ │ │ └── target_sketch.py
│ │ ├── sketch_007
│ │ ├── index.html
│ │ ├── sketch_007.py
│ │ ├── static
│ │ │ └── p5.js
│ │ └── target
│ │ │ ├── org.transcrypt.__runtime__.js
│ │ │ ├── org.transcrypt.__runtime__.py
│ │ │ ├── pyp5js.js
│ │ │ ├── pyp5js.py
│ │ │ ├── python_functions.js
│ │ │ ├── python_functions.py
│ │ │ ├── target_sketch.js
│ │ │ ├── target_sketch.project
│ │ │ └── target_sketch.py
│ │ ├── sketch_008
│ │ ├── index.html
│ │ ├── sketch_008.py
│ │ ├── static
│ │ │ └── p5.js
│ │ └── target
│ │ │ ├── org.transcrypt.__runtime__.js
│ │ │ ├── org.transcrypt.__runtime__.py
│ │ │ ├── pyp5js.js
│ │ │ ├── pyp5js.py
│ │ │ ├── python_functions.js
│ │ │ ├── python_functions.py
│ │ │ ├── target_sketch.js
│ │ │ ├── target_sketch.project
│ │ │ └── target_sketch.py
│ │ ├── sketch_009
│ │ ├── alien.png
│ │ ├── index.html
│ │ ├── rainbow.png
│ │ ├── sketch_009.py
│ │ ├── smile.png
│ │ ├── static
│ │ │ └── p5.js
│ │ └── target
│ │ │ ├── math.js
│ │ │ ├── math.py
│ │ │ ├── org.transcrypt.__runtime__.js
│ │ │ ├── org.transcrypt.__runtime__.py
│ │ │ ├── pyp5js.js
│ │ │ ├── pyp5js.py
│ │ │ ├── python_functions.js
│ │ │ ├── python_functions.py
│ │ │ ├── random.js
│ │ │ ├── random.py
│ │ │ ├── target_sketch.js
│ │ │ ├── target_sketch.project
│ │ │ └── target_sketch.py
│ │ └── sketch_010
│ │ ├── index.html
│ │ ├── sketch_010.py
│ │ ├── static
│ │ └── p5.js
│ │ └── target
│ │ ├── org.transcrypt.__runtime__.js
│ │ ├── org.transcrypt.__runtime__.py
│ │ ├── pyp5js.js
│ │ ├── pyp5js.py
│ │ ├── python_functions.js
│ │ ├── python_functions.py
│ │ ├── target_sketch.js
│ │ ├── target_sketch.project
│ │ └── target_sketch.py
├── index.md
└── pyodide
│ ├── afterBody.js
│ ├── index.html
│ ├── index.html.template
│ ├── pyodide.py
│ ├── share.js
│ ├── styles.css
│ └── target
│ └── target_sketch.js
├── pyp5js
├── __init__.py
├── cli.py
├── commands.py
├── compiler.py
├── config
│ ├── __init__.py
│ ├── fs.py
│ └── sketch.py
├── exceptions.py
├── http_local
│ ├── __init__.py
│ ├── static
│ │ ├── js
│ │ │ ├── ace
│ │ │ │ ├── ace.js
│ │ │ │ ├── ext-beautify.js
│ │ │ │ ├── ext-code_lens.js
│ │ │ │ ├── ext-elastic_tabstops_lite.js
│ │ │ │ ├── ext-emmet.js
│ │ │ │ ├── ext-error_marker.js
│ │ │ │ ├── ext-keybinding_menu.js
│ │ │ │ ├── ext-language_tools.js
│ │ │ │ ├── ext-linking.js
│ │ │ │ ├── ext-modelist.js
│ │ │ │ ├── ext-options.js
│ │ │ │ ├── ext-prompt.js
│ │ │ │ ├── ext-rtl.js
│ │ │ │ ├── ext-searchbox.js
│ │ │ │ ├── ext-settings_menu.js
│ │ │ │ ├── ext-spellcheck.js
│ │ │ │ ├── ext-split.js
│ │ │ │ ├── ext-static_highlight.js
│ │ │ │ ├── ext-statusbar.js
│ │ │ │ ├── ext-textarea.js
│ │ │ │ ├── ext-themelist.js
│ │ │ │ ├── ext-whitespace.js
│ │ │ │ ├── keybinding-emacs.js
│ │ │ │ ├── keybinding-sublime.js
│ │ │ │ ├── keybinding-vim.js
│ │ │ │ ├── keybinding-vscode.js
│ │ │ │ ├── mode-python.js
│ │ │ │ ├── theme-ambiance.js
│ │ │ │ ├── theme-chaos.js
│ │ │ │ ├── theme-chrome.js
│ │ │ │ ├── theme-clouds.js
│ │ │ │ ├── theme-clouds_midnight.js
│ │ │ │ ├── theme-cobalt.js
│ │ │ │ ├── theme-crimson_editor.js
│ │ │ │ ├── theme-dawn.js
│ │ │ │ ├── theme-dracula.js
│ │ │ │ ├── theme-dreamweaver.js
│ │ │ │ ├── theme-eclipse.js
│ │ │ │ ├── theme-github.js
│ │ │ │ ├── theme-gob.js
│ │ │ │ ├── theme-gruvbox.js
│ │ │ │ ├── theme-idle_fingers.js
│ │ │ │ ├── theme-iplastic.js
│ │ │ │ ├── theme-katzenmilch.js
│ │ │ │ ├── theme-kr_theme.js
│ │ │ │ ├── theme-kuroir.js
│ │ │ │ ├── theme-merbivore.js
│ │ │ │ ├── theme-merbivore_soft.js
│ │ │ │ ├── theme-mono_industrial.js
│ │ │ │ ├── theme-monokai.js
│ │ │ │ ├── theme-nord_dark.js
│ │ │ │ ├── theme-pastel_on_dark.js
│ │ │ │ ├── theme-solarized_dark.js
│ │ │ │ ├── theme-solarized_light.js
│ │ │ │ ├── theme-sqlserver.js
│ │ │ │ ├── theme-terminal.js
│ │ │ │ ├── theme-textmate.js
│ │ │ │ ├── theme-tomorrow.js
│ │ │ │ ├── theme-tomorrow_night.js
│ │ │ │ ├── theme-tomorrow_night_blue.js
│ │ │ │ ├── theme-tomorrow_night_bright.js
│ │ │ │ ├── theme-tomorrow_night_eighties.js
│ │ │ │ ├── theme-twilight.js
│ │ │ │ ├── theme-vibrant_ink.js
│ │ │ │ ├── theme-xcode.js
│ │ │ │ ├── worker-coffee.js
│ │ │ │ ├── worker-css.js
│ │ │ │ ├── worker-html.js
│ │ │ │ ├── worker-javascript.js
│ │ │ │ ├── worker-json.js
│ │ │ │ ├── worker-lua.js
│ │ │ │ ├── worker-php.js
│ │ │ │ ├── worker-xml.js
│ │ │ │ └── worker-xquery.js
│ │ │ ├── p5
│ │ │ │ ├── addons
│ │ │ │ │ ├── p5.sound.js
│ │ │ │ │ └── p5.sound.min.js
│ │ │ │ ├── p5.js
│ │ │ │ └── p5.min.js
│ │ │ └── pyodide
│ │ │ │ ├── packages.json
│ │ │ │ ├── pyodide.asm.data
│ │ │ │ ├── pyodide.asm.js
│ │ │ │ ├── pyodide.asm.wasm
│ │ │ │ ├── pyodide.js.map
│ │ │ │ └── pyodide_v0.18.1.js
│ │ ├── p5_reference.yml
│ │ └── styles
│ │ │ ├── basscss-7.1.1.min.css
│ │ │ └── custom.css
│ ├── templates
│ │ ├── base.html
│ │ ├── index.html
│ │ ├── new_sketch_form.html
│ │ ├── new_sketch_success.html
│ │ └── view_sketch.html
│ └── web_app.py
├── monitor.py
├── sketch.py
├── templates
│ ├── pyodide
│ │ ├── base_sketch.py.template
│ │ ├── index.html
│ │ └── target_sketch.js.template
│ └── transcrypt
│ │ ├── base_sketch.py.template
│ │ ├── index.html
│ │ ├── pyp5js.py
│ │ ├── python_functions.py
│ │ └── target_sketch.py.template
├── templates_renderers.py
└── tests
│ ├── __init__.py
│ ├── fixtures.py
│ ├── test_commands.py
│ ├── test_compiler.py
│ ├── test_config
│ ├── __init__.py
│ ├── test_fs.py
│ └── test_sketch.py
│ ├── test_http
│ ├── assets
│ │ └── alien.png
│ └── test_web_app.py
│ ├── test_monitor.py
│ ├── test_pyp5js.py
│ ├── test_sketch.py
│ └── test_templates_renderers.py
├── pytest.ini
├── requirements.txt
└── setup.py
/.github/workflows/ci.yml:
--------------------------------------------------------------------------------
1 | name: Continuous Integration
2 |
3 | on:
4 | push:
5 | branches:
6 | - main
7 | - develop
8 | pull_request:
9 | branches:
10 | - main
11 | - develop
12 |
13 | jobs:
14 | license:
15 | name: Check source files for license headers
16 | runs-on: ubuntu-latest
17 |
18 | steps:
19 | - uses: actions/checkout@v1
20 |
21 | - name: Check for license headers
22 | run: bash bin/check_license.sh
23 |
24 | test:
25 | name: Test on ${{ matrix.os }} with Python ${{ matrix.python-version }}
26 | runs-on: ${{ matrix.os }}
27 | strategy:
28 | max-parallel: 4
29 | matrix:
30 | os: [windows-latest, ubuntu-latest, macos-latest]
31 | python-version: [3.7, 3.8, 3.9, '3.10']
32 |
33 | steps:
34 | - uses: actions/checkout@v1
35 |
36 | - name: Set up Python ${{ matrix.python-version }}
37 | uses: actions/setup-python@v1
38 | with:
39 | python-version: ${{ matrix.python-version }}
40 |
41 | - name: Display python version
42 | run: python --version
43 |
44 | - name: Upgrade pip
45 | run: python -m pip install --upgrade pip setuptools --user
46 |
47 | - name: Install dev dependencies
48 | run: pip install -r dev-requirements.txt
49 |
50 | - name: Install pyp5js for dev
51 | run: python setup.py develop --install-dir dist
52 |
53 | - name:
54 | run: python -m pytest
55 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | .Python
2 | .DS_Store
3 | *.pyc
4 | .vscode
5 | *.env
6 | *.swp
7 | *.swo
8 | *.swn
9 | *.sqlite3
10 | *.map
11 | !pyodide.js.map
12 | __target__
13 | build
14 | dist
15 | *.egg-info
16 | demo_sketch
17 | tests-sketchbook
18 | venv
19 | docs/examples/dev*
20 | docs/examples/issue*
21 | .theia
22 | .envrc
23 | *.properties.json
24 | .idea/*
25 |
--------------------------------------------------------------------------------
/.gitpod.yml:
--------------------------------------------------------------------------------
1 | image: gitpod/workspace-full
2 |
3 |
4 | ports:
5 | - port: 5000
6 | onOpen: open-browser
7 |
8 |
9 | tasks:
10 | - init:
11 | export SKETCHBOOK_DIR=sketchbook &&
12 | python -m venv venv --system-site-packages &&
13 | venv/bin/pip install -r dev-requirements.txt &&
14 | venv/bin/python setup.py develop &&
15 | source venv/bin/activate &&
16 | pytest
17 | command: pyp5js serve
18 |
--------------------------------------------------------------------------------
/CONTRIBUTING.md:
--------------------------------------------------------------------------------
1 | ## Contributing to pyp5js
2 |
3 | Here you'll find all possible ways to contribute to the project.
4 |
5 | ### Testing, testing and testing
6 |
7 | Since pyp5js have a lot of moving parts, it would be great to have the p5.js API fully covered and tested. So, use your imagination, code your sketches and, if pyp5js breaks or starts to annoy you with something, you're very welcome to [open an issue](https://github.com/berinhard/pyp5js/issues/new) documenting your thoughts. Test it and let me know how can I improve it.
8 |
9 | ### What about these shinning examples?
10 |
11 | If you fell confortable with that, I'd be happy to add some of your pyp5js sketches to our [examples list](https://berinhard.github.io/pyp5js/examples/)! To do so, you'll have [to fork this repository](https://help.github.com/en/articles/fork-a-repo) and add your new sketch example in the `docs/examples` directory. Once you've your sketch ready, you can [open a pull request](https://help.github.com/en/articles/about-pull-requests) and I'll take a look at it.
12 |
13 | ### I want to hack!
14 |
15 | Okay, if you want to contribute with pyp5js's code, let's go! I really advise you to use [virtualenv with virtualenvwrapper](http://www.indjango.com/python-install-virtualenv-and-virtualenvwrapper/) or [pyenv](https://amaral.northwestern.edu/resources/guides/pyenv-tutorial) to isolate your pyp5js fork from the rest of your system. Once you have everything ready, you can run:
16 |
17 | ```
18 | $ git clone git@github.com:YOUR_GITHUB_PROFILE/pyp5js.git
19 | $ cd pyp5js
20 | $ pip install -r dev-requirements.txt
21 | $ python setup.py develop
22 | $ make test
23 | ```
24 |
25 | After that, you should have the `pyp5js` command enabled and it will respect all the changes you introduce to the code. Now, a brief explanation about the code under `pyp5js` directory:
26 |
27 | - `config` module: centralize pieces of code used to configure how `pyp5js` runs
28 | - `cli.py`: the entrypoint for `pyp5js` commands such as `new` or `compile`
29 | - `commands.py`: just functions responsible for the real implementations for `pyp5js` commands
30 | - `compiler.py`: where all the magic happens!
31 | - `exception.py`: custom exceptions used by `pyp5js`
32 | - `monitor.py`: module with the objects used by the `monitor` command
33 | - `sketch.py`: class to abstract Sketches' files, directories and configuration
34 | - `template_renderers.py`: simple module with the renderization logic for the code templates like `target_sketch.py`
35 | - `http/web_app.py`: Flask application for the web interface.
36 |
37 | Now go [fetch yourself an issue](https://github.com/berinhard/pyp5js/issues) and happy hacking!
38 |
--------------------------------------------------------------------------------
/MANIFEST.in:
--------------------------------------------------------------------------------
1 | recursive-include pyp5js/templates *
2 | recursive-include pyp5js/http_local/templates *
3 | recursive-include pyp5js/http_local/static *
4 |
--------------------------------------------------------------------------------
/Makefile:
--------------------------------------------------------------------------------
1 | test:
2 | export PYTHONWARNINGS=ignore::flask.DeprecationWarning; pytest
3 |
4 | update_dist:
5 | @python3 setup.py sdist bdist_wheel
6 |
7 | upload_pypi:
8 | @twine upload dist/*
9 |
10 | # helper command for the maintainer to refresh the docs files
11 | refresh_transcrypt_docs:
12 | cd docs/examples/transcrypt; for x in `ls -d */`; do SKETCHBOOK_DIR="/home/bernardo/envs/pyp5js/docs/examples/transcrypt/" pyp5js compile $$x --refresh --template "/home/bernardo/envs/pyp5js/docs/examples/transcrypt/index.html.template"; done;
13 |
14 | refresh_pyodide_docs:
15 | cd docs/examples/pyodide; for x in `ls -d */`; do SKETCHBOOK_DIR="/home/bernardo/envs/pyp5js/docs/examples/pyodide" pyp5js compile $$x --refresh --template "/home/bernardo/envs/pyp5js/docs/examples/pyodide/index.html.template"; done;
16 |
17 | refresh_demo:
18 | SKETCHBOOK_DIR="/home/bernardo/envs/pyp5js/docs/" pyp5js compile pyodide --refresh --template "/home/bernardo/envs/pyp5js/docs/pyodide/index.html.template";
19 |
20 | run_demo:
21 | cd docs/pyodide && python -m http.server
22 |
--------------------------------------------------------------------------------
/Makefile.bat:
--------------------------------------------------------------------------------
1 | @echo off
2 |
3 | IF /I "%1"=="test" GOTO test
4 | IF /I "%1"=="update_dist" GOTO update_dist
5 | IF /I "%1"=="upload_pypi" GOTO upload_pypi
6 | IF /I "%1"=="run_demo" GOTO run_demo
7 | GOTO error
8 |
9 | :test
10 | set PYTHONWARNINGS=ignore::flask.DeprecationWarning && pytest
11 | GOTO :EOF
12 |
13 | :update_dist
14 | @python3 setup.py sdist bdist_wheel
15 | GOTO :EOF
16 |
17 | :upload_pypi
18 | @twine upload dist/*
19 | GOTO :EOF
20 |
21 | :run_demo
22 | PUSHD docs/pyodide
23 | python -m http.server
24 | POPD
25 | GOTO :EOF
26 |
27 | :error
28 | IF "%1"=="" (
29 | ECHO make: *** No targets specified and no makefile found. Stop.
30 | ) ELSE (
31 | ECHO make: *** No rule to make target '%1%'. Stop.
32 | )
33 | GOTO :EOF
34 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | ## pyp5js: drawing with Python 3
2 |
3 | [](https://badge.fury.io/py/pyp5js)
4 | 
5 | [](https://gitpod.io/#https://github.com/berinhard/pyp5js/tree/main)
6 |
7 | > [Processing](https://processing.org) ideas and Python 3 together with [P5.js](https://p5js.org) in the browser.
8 |
9 | Python 3 drawing in the web! Try it [here](https://berinhard.github.io/pyp5js/pyodide/)!
10 |
11 | Here's an example of a valid Python code using P5.js API:
12 |
13 | ```python
14 | def setup():
15 | createCanvas(200, 200)
16 |
17 | def draw():
18 | background(200)
19 | diameter = sin(frameCount / 60) * 50 + 50
20 | fill('blue')
21 | ellipse(100, 100, diameter, diameter)
22 | ```
23 |
24 | ## Project setup
25 |
26 | ```
27 | $ git clone git@github.com:YOUR_GITHUB_PROFILE/pyp5js.git
28 | $ cd pyp5js
29 | $ pip install -r dev-requirements.txt
30 | $ python setup.py develop
31 | $ make test
32 | ```
33 |
34 | ## More references
35 |
36 | ### [Documentation](https://berinhard.github.io/pyp5js)
37 |
38 | ### [Examples](https://berinhard.github.io/pyp5js/examples/)
39 |
40 | ### [Installation](https://berinhard.github.io/pyp5js#installation)
41 |
42 | ### [Quickstart](https://berinhard.github.io/pyp5js#quickstart)
43 |
44 | ### [Internals details](https://berinhard.github.io/pyp5js#internals-details)
45 |
46 | ### [Known issues and differences to the Processing.Py and P5.js ways of doing things](https://berinhard.github.io/pyp5js#known-issues-and-differences-to-the-processingpy-and-p5js-ways-of-doing-things)
47 |
48 | ### [How can I contribute?](CONTRIBUTING.md)
49 |
--------------------------------------------------------------------------------
/VERSION:
--------------------------------------------------------------------------------
1 | 0.7.3
2 |
--------------------------------------------------------------------------------
/bin/check_license.sh:
--------------------------------------------------------------------------------
1 | #!/bin/bash
2 |
3 | EXIT_CODE=0
4 |
5 | while IFS= read -r -d '' file; do
6 | if ! head -5 "$file" | grep -q 'Copyright'; then
7 | echo "$file" is missing a license
8 | EXIT_CODE=1
9 | fi
10 | done < <(find pyp5js -type f \( \
11 | -name "*.py" -o \
12 | -name "*.html" -o \
13 | -name "*.js.template" \) -print0)
14 |
15 | exit $EXIT_CODE
16 |
--------------------------------------------------------------------------------
/dev-requirements.txt:
--------------------------------------------------------------------------------
1 | -r requirements.txt
2 |
3 | black==22.10.0
4 | ipython==7.34.0
5 | pytest==7.1.3
6 | tox==3.26.0
7 | pytest-env==0.6.2
8 | Flask-Testing==0.8.1
9 | blinker==1.5
10 | pyaml==21.10.1
11 | wheel==0.38.1
12 | twine==4.0.1
13 |
--------------------------------------------------------------------------------
/docs/examples/index.md:
--------------------------------------------------------------------------------
1 | ### Examples list
2 |
3 | Here you find a list of examples using pyp5js. They can have lnks to working examples using Transcrypt or Pyodide as the interpreter.
4 |
5 | **Angles and mouse coordinates** | [pyodide](pyodide/sketch_001/index.html) | [transcrypt](transcrypt/sketch_001/index.html)
6 |
7 | **Move Eye**, an example by Simon Greenwold, ported by [@villares](https://github.com/villares) | [pyodide](pyodide/sketch_002/index.html) | [transcrypt](transcrypt/sketch_002/index.html)
8 |
9 | **Rotating 3D box** | [pyodide](pyodide/sketch_003/index.html) | [transcrypt](transcrypt/sketch_003/index.html)
10 |
11 | **Boids** | [pyodide](pyodide/sketch_004/index.html) | [transcrypt](transcrypt/sketch_004/index.html)
12 |
13 | **Globals variables (HSB and CENTER)** | [pyodide](pyodide/sketch_005/index.html) | [transcrypt](transcrypt/sketch_005/index.html)
14 |
15 | **Registering event functions such as keyPressed** | [pyodide](pyodide/sketch_006/index.html) | [transcrypt](transcrypt/sketch_006/index.html)
16 |
17 | **p5.Vector static methods** | [pyodide](pyodide/sketch_007/index.html) | [transcrypt](transcrypt/sketch_007/index.html)
18 |
19 | **p5.dom.js usage** | [pyodide](pyodide/sketch_008/index.html) | [transcrypt](transcrypt/sketch_008/index.html)
20 |
21 | **Working with images** | [pyodide](pyodide/sketch_009/index.html) | [transcrypt](transcrypt/sketch_009/index.html)
22 |
23 | **Complex shapes**, by [Pedro Queiroga](https://github.com/pedroqueiroga/pqueiroga.github.io/blob/master/curveVertexExample/main.js) | [pyodide](pyodide/sketch_010/index.html) | [transcrypt](transcrypt/sketch_010/index.html)
24 |
25 | **A-star search algoritm**, by [@ademakdogan](https://github.com/ademakdogan) | [pyodide](pyodide/sketch_012/index.html)
26 |
27 | **Breakout**, by [@misolietavec](https://github.com/misolietavec) | [pyodide](pyodide/breakout/index.html)
28 |
29 | **Flappy bird**, by [@misolietavec](https://github.com/misolietavec) | [pyodide](pyodide/flappybird/index.html)
30 |
31 | **Memory**, by [@misolietavec](https://github.com/misolietavec) | [pyodide](pyodide/memory/index.html)
32 |
33 | **Same game**, by [@misolietavec](https://github.com/misolietavec) | [pyodide](pyodide/samegame/index.html)
34 |
--------------------------------------------------------------------------------
/docs/examples/pyodide/bouncing/bouncing.py:
--------------------------------------------------------------------------------
1 | x = 50
2 | y = 100
3 | rad = 6
4 |
5 | vx = 5
6 | vy = 5
7 |
8 | WIDTH = 640
9 | HEIGHT = 400
10 | FPS = 60
11 |
12 | def setup():
13 | createCanvas(WIDTH, HEIGHT)
14 | frameRate(FPS)
15 |
16 | def draw():
17 | global x, y, vx, vy
18 |
19 | background(220)
20 | fill(0, 255, 0)
21 | ellipse(x, y, 2 * rad)
22 |
23 | x += vx
24 | y += vy
25 |
26 | if (x + rad >= width or x - rad <= 0):
27 | vx = -vx
28 |
29 | if (y + rad >= height or y - rad <= 0):
30 | vy = -vy
31 |
--------------------------------------------------------------------------------
/docs/examples/pyodide/bouncing/bouncingFPS.py:
--------------------------------------------------------------------------------
1 | x = 50
2 | y = 100
3 | diam = 10
4 |
5 | vx = 2
6 | vy = 2
7 | framecount = 0
8 |
9 | WIDTH = 640
10 | HEIGHT = 400
11 | FPS = 60
12 | afps = FPS
13 |
14 | def setup():
15 | createCanvas(WIDTH, HEIGHT)
16 | frameRate(FPS)
17 |
18 | def draw():
19 | global x, y, vx, vy, framecount, afps
20 |
21 | background(220)
22 | fill(255, 0, 0)
23 | ellipse(x, y, diam)
24 | framecount += 1
25 | if not framecount % FPS:
26 | afps = frameRate()
27 | fill(10)
28 | textSize(20)
29 | text("FPS: %.1f" %afps, 30, HEIGHT - 24)
30 | x += vx
31 | y += vy
32 |
33 | if (x + diam // 2 >= width or x - diam // 2 <= 0):
34 | vx = -vx
35 |
36 | if (y + diam // 2 >= height or y - diam // 2 <= 0):
37 | vy = -vy
38 |
39 |
--------------------------------------------------------------------------------
/docs/examples/pyodide/bouncing/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | bouncing - pyp5js
10 |
11 |
12 |
13 |
14 |
15 |
16 |
40 | Python code here .
41 |
42 |
43 |
44 |
45 |
46 |
47 |
48 |
49 |
x = 50
50 | y = 100
51 | rad = 6
52 |
53 | vx = 5
54 | vy = 5
55 |
56 | WIDTH = 640
57 | HEIGHT = 400
58 | FPS = 60
59 |
60 | def setup():
61 | createCanvas(WIDTH, HEIGHT)
62 | frameRate(FPS)
63 |
64 | def draw():
65 | global x, y, vx, vy
66 |
67 | background(220)
68 | fill(0, 255, 0)
69 | ellipse(x, y, 2 * rad)
70 |
71 | x += vx
72 | y += vy
73 |
74 | if (x + rad >= width or x - rad <= 0):
75 | vx = -vx
76 |
77 | if (y + rad >= height or y - rad <= 0):
78 | vy = -vy
79 |
80 |
81 |
82 |
{{ sketch_name }} - pyp5js
10 |
11 |
12 |
13 |
14 |
15 |
16 |
40 | Python code here .
41 |
42 |
43 |
44 |
45 |
46 |
47 |
48 |
49 |
{{ sketch_content }}
50 |
51 |
52 |
sketch_001 - pyp5js
10 |
11 |
12 |
13 |
14 |
15 |
16 |
40 | Python code here .
41 |
42 |
43 |
44 |
45 |
46 |
47 |
48 |
49 |
# https://p5js.org/examples/interaction-wavemaker.html
50 |
51 | t = 0
52 |
53 | def setup():
54 | createCanvas(600, 600)
55 | stroke(250)
56 | strokeWeight(3)
57 | fill(40, 200, 40)
58 |
59 |
60 | def draw():
61 | global t
62 | background(10, 10)
63 |
64 | xAngle = map(mouseX, 0, width, -4 * PI, 4 * PI, True)
65 | yAngle = map(mouseY, 0, height, -4 * PI, 4 * PI, True)
66 | for x in range(0, width, 30):
67 | for y in range(0, height, 30):
68 |
69 | angle = xAngle * (x / width) + yAngle * (y / height)
70 |
71 | myX = x + 20 * cos(2 * PI * t + angle)
72 | myY = y + 20 * sin(2 * TWO_PI * t + angle)
73 |
74 | ellipse(myX, myY, 10)
75 |
76 | t = t + 0.01
77 |
78 |
79 |
80 |
sketch_002 - pyp5js
10 |
11 |
12 |
13 |
14 |
15 |
16 |
40 | Python code here .
41 |
42 |
43 |
44 |
45 |
46 |
47 |
48 |
49 |
"""
50 | * Move Eye.
51 | * by Simon Greenwold.
52 | *
53 | * The camera lifts up (controlled by mouseY) while looking at the same point.
54 | """
55 |
56 | def setup():
57 | createCanvas(640, 360, WEBGL)
58 | fill(204)
59 |
60 |
61 | def draw():
62 | ambientLight(50)
63 | directionalLight(255, 0, 0, 0.25, 0.25, 0);
64 | background(0)
65 |
66 | # Change height of the camera with mouseY
67 | camera(30.0, mouseY, 220.0, # eyeX, eyeY, eyeZ
68 | 0.0, 0.0, 0.0, # centerX, centerY, centerZ
69 | 0.0, 1.0, 0.0) # upX, upY, upZ
70 |
71 | noStroke()
72 | box(90)
73 | stroke(255)
74 | line(-100, 0, 0, 100, 0, 0)
75 | line(0, -100, 0, 0, 100, 0)
76 | line(0, 0, -100, 0, 0, 100)
77 |
78 |
79 |
80 |
sketch_003 - pyp5js
10 |
11 |
12 |
13 |
14 |
15 |
16 |
40 | Python code here .
41 |
42 |
43 |
44 |
45 |
46 |
47 |
48 |
49 |
# 3d example
50 |
51 | def setup():
52 | createCanvas(600, 600, WEBGL)
53 |
54 | def draw():
55 | background(200)
56 | translate(-100, -100, 0)
57 | push()
58 | normalMaterial()
59 | rotateZ(frameCount * 0.01)
60 | rotateX(frameCount * 0.01)
61 | rotateY(frameCount * 0.01)
62 | box(50, 70, 100)
63 | pop()
64 |
65 |
66 |
67 |
sketch_005 - pyp5js
10 |
11 |
12 |
13 |
14 |
15 |
16 |
40 | Python code here .
41 |
42 |
43 |
44 |
45 |
46 |
47 |
48 |
49 |
50 | def setup():
51 | createCanvas(600,600)
52 | noStroke()
53 | rectMode(CENTER)
54 |
55 |
56 | def draw():
57 | colorMode(HSB,100)
58 | h = map(mouseY,0,600,0,100)
59 | background(h,100,100)
60 | fill(100-h,100,100)
61 | rect(300,300,mouseX+1,mouseX+1)
62 |
63 |
64 |
65 |
sketch_006 - pyp5js
10 |
11 |
12 |
13 |
14 |
15 |
16 |
40 | Python code here .
41 |
42 |
43 |
44 |
45 |
46 |
47 |
48 |
49 |
r = None
50 |
51 | def setup():
52 | global r
53 |
54 | createCanvas(900, 900)
55 | r = random(100, 700)
56 | noFill()
57 |
58 | def draw():
59 | x, y = 100, 100
60 | rect(x, y, r, r)
61 |
62 | def keyPressed():
63 | console.log("Key pressed event")
64 |
65 | if key == "n":
66 | global r
67 | r = random(100, 700)
68 | redraw()
69 |
70 | def mouseDragged():
71 | global r
72 | r = random(100, 700)
73 | redraw()
74 |
75 |
76 |
77 |
sketch_007 - pyp5js
10 |
11 |
12 |
13 |
14 |
15 |
16 |
40 | Python code here .
41 |
42 |
43 |
44 |
45 |
46 |
47 |
48 |
49 |
50 | def setup():
51 | createCanvas(900, 900)
52 | stroke(27, 27, 27, 10)
53 | strokeWeight(2)
54 |
55 |
56 | def draw():
57 | push()
58 |
59 | translate(width / 2, height / 2)
60 | v = PVector.random2D()
61 | v.normalize()
62 | v = PVector.mult(v,random(100, 400))
63 | line(0, 0, v.x, v.y)
64 |
65 | pop()
66 |
67 |
68 |
69 |
sketch_009 - pyp5js
10 |
11 |
12 |
13 |
14 |
15 |
16 |
40 | Python code here .
41 |
42 |
43 |
44 |
45 |
46 |
47 |
48 |
49 |
from random import choice
50 |
51 | images = []
52 |
53 | def setup():
54 | global images
55 |
56 | createP("Click to add a new image")
57 | createCanvas(600, 600)
58 | background(200)
59 | images = [
60 | loadImage('smile.png'),
61 | loadImage('alien.png'),
62 | loadImage('rainbow.png'),
63 | ]
64 |
65 |
66 | def mousePressed():
67 | x, y = mouseX, mouseY
68 | img = choice(images)
69 | image(img, x, y)
70 |
71 |
72 | def draw():
73 | pass
74 |
75 |
76 |
77 |
sketch_000 - pyp5js
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
--------------------------------------------------------------------------------
/docs/examples/sketch_000/sketch_000.py:
--------------------------------------------------------------------------------
1 | from pyp5js import *
2 |
3 |
4 | def setup():
5 | createCanvas(200, 200)
6 |
7 | def draw():
8 | background(200)
9 | diameter = sin(frameCount / 60) * 50 + 50
10 | fill("blue")
11 | ellipse(100, 100, diameter, diameter)
12 |
--------------------------------------------------------------------------------
/docs/examples/sketch_000/target/pyp5js.python_functions.js:
--------------------------------------------------------------------------------
1 | // Transcrypt'ed from Python, 2020-04-28 21:56:46
2 | import {AssertionError, AttributeError, BaseException, DeprecationWarning, Exception, IndexError, IterableError, KeyError, NotImplementedError, RuntimeWarning, StopIteration, UserWarning, ValueError, Warning, __JsIterator__, __PyIterator__, __Terminal__, __add__, __and__, __call__, __class__, __envir__, __eq__, __floordiv__, __ge__, __get__, __getcm__, __getitem__, __getslice__, __getsm__, __gt__, __i__, __iadd__, __iand__, __idiv__, __ijsmod__, __ilshift__, __imatmul__, __imod__, __imul__, __in__, __init__, __ior__, __ipow__, __irshift__, __isub__, __ixor__, __jsUsePyNext__, __jsmod__, __k__, __kwargtrans__, __le__, __lshift__, __lt__, __matmul__, __mergefields__, __mergekwargtrans__, __mod__, __mul__, __ne__, __neg__, __nest__, __or__, __pow__, __pragma__, __proxy__, __pyUseJsNext__, __rshift__, __setitem__, __setproperty__, __setslice__, __sort__, __specialattrib__, __sub__, __super__, __t__, __terminal__, __truediv__, __withblock__, __xor__, abs, all, any, assert, bool, bytearray, bytes, callable, chr, copy, deepcopy, delattr, dict, dir, divmod, enumerate, filter, float, getattr, hasattr, input, int, isinstance, issubclass, len, list, map, max, min, object, ord, pow, print, property, py_TypeError, py_iter, py_metatype, py_next, py_reversed, py_typeof, range, repr, round, set, setattr, sorted, str, sum, tuple, zip} from './org.transcrypt.__runtime__.js';
3 | var __name__ = 'pyp5js.python_functions';
4 | export var PythonFunctions = __class__ ('PythonFunctions', [object], {
5 | __module__: __name__,
6 | });
7 | setattr (PythonFunctions, 'map', map);
8 | setattr (PythonFunctions, 'filter', filter);
9 | setattr (PythonFunctions, 'set', set);
10 |
11 | //# sourceMappingURL=pyp5js.python_functions.map
--------------------------------------------------------------------------------
/docs/examples/sketch_000/target/pyp5js.python_functions.py:
--------------------------------------------------------------------------------
1 | class PythonFunctions: pass
2 |
3 | setattr(PythonFunctions, 'map', map)
4 | setattr(PythonFunctions, 'filter', filter)
5 | setattr(PythonFunctions, 'set', set)
6 |
--------------------------------------------------------------------------------
/docs/examples/sketch_000/target/sketch_000.py:
--------------------------------------------------------------------------------
1 | from pyp5js import *
2 |
3 |
4 | def setup():
5 | createCanvas(200, 200)
6 | background(160)
7 |
8 |
9 | def draw():
10 | fill("blue")
11 | background(200)
12 | radius = sin(frameCount / 60) * 50 + 50
13 | ellipse(100, 100, radius, radius)
14 |
--------------------------------------------------------------------------------
/docs/examples/sketch_000/target/target_sketch.project:
--------------------------------------------------------------------------------
1 | {"options": {"source": "/home/bernardo/envs/pyp5js/docs/examples/sketch_000/target_sketch.py", "anno": false, "alimod": false, "build": true, "complex": false, "docat": false, "dassert": false, "dcheck": false, "dextex": false, "dlog": false, "dmap": false, "dnostrip": false, "dstat": false, "dtree": false, "esv": null, "ecom": false, "fcall": false, "gen": false, "iconv": false, "jscall": false, "jskeys": false, "jsmod": false, "kwargs": true, "keycheck": false, "license": false, "map": true, "nomin": true, "opov": false, "parent": null, "run": false, "symbols": null, "sform": false, "tconv": false, "unit": null, "verbose": false, "x": null, "xreex": false, "xglobs": false, "xpath": "/home/bernardo/envs/pyp5js/pyp5js", "xtiny": false, "star": false}, "modules": [{"source": "/home/bernardo/.virtualenvs/pyp5js/lib/python3.6/site-packages/transcrypt/modules/org/transcrypt/__runtime__.py", "target": "/home/bernardo/envs/pyp5js/docs/examples/sketch_000/__target__/org.transcrypt.__runtime__.js"}, {"source": "/home/bernardo/envs/pyp5js/docs/examples/sketch_000/target_sketch.py", "target": "/home/bernardo/envs/pyp5js/docs/examples/sketch_000/__target__/target_sketch.js"}, {"source": "/home/bernardo/envs/pyp5js/pyp5js/pyp5js.py", "target": "/home/bernardo/envs/pyp5js/docs/examples/sketch_000/__target__/pyp5js.js"}, {"source": "/home/bernardo/envs/pyp5js/pyp5js/python_functions.py", "target": "/home/bernardo/envs/pyp5js/docs/examples/sketch_000/__target__/pyp5js.python_functions.js"}, {"source": "/home/bernardo/envs/pyp5js/docs/examples/sketch_000/sketch_000.py", "target": "/home/bernardo/envs/pyp5js/docs/examples/sketch_000/__target__/sketch_000.js"}]}
--------------------------------------------------------------------------------
/docs/examples/sketch_000/target/target_sketch.py:
--------------------------------------------------------------------------------
1 | import sketch_000 as source_sketch
2 | from pyp5js import *
3 |
4 | event_functions = {
5 | "deviceMoved": source_sketch.deviceMoved,
6 | "deviceTurned": source_sketch.deviceTurned,
7 | "deviceShaken": source_sketch.deviceShaken,
8 | "keyPressed": source_sketch.keyPressed,
9 | "keyReleased": source_sketch.keyReleased,
10 | "keyTyped": source_sketch.keyTyped,
11 | "mouseMoved": source_sketch.mouseMoved,
12 | "mouseDragged": source_sketch.mouseDragged,
13 | "mousePressed": source_sketch.mousePressed,
14 | "mouseReleased": source_sketch.mouseReleased,
15 | "mouseClicked": source_sketch.mouseClicked,
16 | "doubleClicked": source_sketch.doubleClicked,
17 | "mouseWheel": source_sketch.mouseWheel,
18 | "touchStarted": source_sketch.touchStarted,
19 | "touchMoved": source_sketch.touchMoved,
20 | "touchEnded": source_sketch.touchEnded,
21 | "windowResized": source_sketch.windowResized,
22 | }
23 |
24 | start_p5(source_sketch.setup, source_sketch.draw, event_functions)
--------------------------------------------------------------------------------
/docs/examples/transcrypt/index.html.template:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | {{ sketch_name }} - pyp5js (using Transcrypt)
10 |
11 |
12 |
13 |
14 |
15 |
39 | Python code here .
40 |
41 |
42 |
43 |
44 |
45 |
46 |
47 |
48 |
49 |
50 | {{ sketch_content }}
51 |
52 |
53 |
54 |
55 |
sketch_001 - pyp5js (using Transcrypt)
10 |
11 |
12 |
13 |
14 |
15 |
39 | Python code here .
40 |
41 |
42 |
43 |
44 |
45 |
46 |
47 |
48 |
49 |
50 | # https://p5js.org/examples/interaction-wavemaker.html
51 |
52 | t = 0
53 |
54 | def setup():
55 | createCanvas(600, 600)
56 | stroke(250)
57 | strokeWeight(3)
58 | fill(40, 200, 40)
59 |
60 |
61 | def draw():
62 | global t
63 | background(10, 10)
64 |
65 | xAngle = map(mouseX, 0, width, -4 * PI, 4 * PI, True)
66 | yAngle = map(mouseY, 0, height, -4 * PI, 4 * PI, True)
67 | for x in range(0, width, 30):
68 | for y in range(0, height, 30):
69 |
70 | angle = xAngle * (x / width) + yAngle * (y / height)
71 |
72 | myX = x + 20 * cos(2 * PI * t + angle)
73 | myY = y + 20 * sin(2 * TWO_PI * t + angle)
74 |
75 | ellipse(myX, myY, 10)
76 |
77 | t = t + 0.01
78 |
79 |
80 |
81 |
82 |
83 |
sketch_002 - pyp5js (using Transcrypt)
10 |
11 |
12 |
13 |
14 |
15 |
39 | Python code here .
40 |
41 |
42 |
43 |
44 |
45 |
46 |
47 |
48 |
49 |
50 | """
51 | * Move Eye.
52 | * by Simon Greenwold.
53 | *
54 | * The camera lifts up (controlled by mouseY) while looking at the same point.
55 | """
56 |
57 | def setup():
58 | createCanvas(640, 360, _P5_INSTANCE.WEBGL)
59 | fill(204)
60 |
61 |
62 | def draw():
63 | ambientLight(50)
64 | directionalLight(255, 0, 0, 0.25, 0.25, 0);
65 | background(0)
66 |
67 | # Change height of the camera with mouseY
68 | camera(30.0, mouseY, 220.0, # eyeX, eyeY, eyeZ
69 | 0.0, 0.0, 0.0, # centerX, centerY, centerZ
70 | 0.0, 1.0, 0.0) # upX, upY, upZ
71 |
72 | noStroke()
73 | box(90)
74 | stroke(255)
75 | line(-100, 0, 0, 100, 0, 0)
76 | line(0, -100, 0, 0, 100, 0)
77 | line(0, 0, -100, 0, 0, 100)
78 |
79 |
80 |
81 |
82 |
83 |
sketch_003 - pyp5js (using Transcrypt)
10 |
11 |
12 |
13 |
14 |
15 |
39 | Python code here .
40 |
41 |
42 |
43 |
44 |
45 |
46 |
47 |
48 |
49 |
50 | # 3d example
51 |
52 |
53 | def setup():
54 | createCanvas(600, 600, WEBGL)
55 |
56 | def draw():
57 | background(200)
58 | translate(-100, -100, 0)
59 | push()
60 | normalMaterial()
61 | rotateZ(frameCount * 0.01)
62 | rotateX(frameCount * 0.01)
63 | rotateY(frameCount * 0.01)
64 | box(50, 70, 100)
65 | pop()
66 |
67 |
68 |
69 |
70 |
71 |
sketch_005 - pyp5js (using Transcrypt)
10 |
11 |
12 |
13 |
14 |
15 |
39 | Python code here .
40 |
41 |
42 |
43 |
44 |
45 |
46 |
47 |
48 |
49 |
50 | def setup():
51 | createCanvas(600,600)
52 | noStroke()
53 | rectMode(CENTER)
54 |
55 |
56 | def draw():
57 | colorMode(HSB,100)
58 | h = map(mouseY,0,600,0,100)
59 | background(h,100,100)
60 | fill(100-h,100,100)
61 | rect(300,300,mouseX+1,mouseX+1)
62 |
63 |
64 |
65 |
66 |
67 |
sketch_006 - pyp5js (using Transcrypt)
10 |
11 |
12 |
13 |
14 |
15 |
39 | Python code here .
40 |
41 |
42 |
43 |
44 |
45 |
46 |
47 |
48 |
49 |
50 | r = None
51 | def setup():
52 | global r
53 |
54 | createCanvas(900, 900)
55 | r = random(100, 700)
56 | noFill()
57 |
58 |
59 | def draw():
60 | x, y = 100, 100
61 | rect(x, y, r, r)
62 |
63 |
64 | def keyPressed():
65 | console.log("Key pressed event")
66 |
67 | if key == "n":
68 | global r
69 | r = random(100, 700)
70 | redraw()
71 |
72 |
73 | def mouseDragged():
74 | global r
75 | r = random(100, 700)
76 | redraw()
77 |
78 |
79 |
80 |
81 |
82 |
sketch_007 - pyp5js (using Transcrypt)
10 |
11 |
12 |
13 |
14 |
15 |
39 | Python code here .
40 |
41 |
42 |
43 |
44 |
45 |
46 |
47 |
48 |
49 |
50 | def setup():
51 | createCanvas(900, 900)
52 | stroke(27, 27, 27, 10)
53 | strokeWeight(2)
54 |
55 |
56 | def draw():
57 | push()
58 |
59 | translate(width / 2, height / 2)
60 | v = p5.Vector.random2D()
61 | v.normalize()
62 | v.mult(random(100, 400))
63 | line(0, 0, v.x, v.y)
64 |
65 | pop()
66 |
67 |
68 |
69 |
70 |
71 |
sketch_009 - pyp5js (using Transcrypt)
10 |
11 |
12 |
13 |
14 |
15 |
39 | Python code here .
40 |
41 |
42 |
43 |
44 |
45 |
46 |
47 |
48 |
49 |
50 | from random import choice
51 |
52 |
53 | images = []
54 |
55 | def setup():
56 | global images
57 |
58 | createP("Click to add a new image")
59 | createCanvas(600, 600)
60 | background(200)
61 | images = [
62 | loadImage('smile.png'),
63 | loadImage('alien.png'),
64 | loadImage('rainbow.png'),
65 | ]
66 |
67 |
68 | def mousePressed():
69 | x, y = mouseX, mouseY
70 | img = choice(images)
71 | image(img, x, y)
72 |
73 |
74 | def draw():
75 | pass
76 |
77 |
78 |
79 |
80 |
81 |
span {font-weight: normal !important;}.ace-github .ace_marker-layer .ace_step {background: rgb(252, 255, 0);}.ace-github .ace_marker-layer .ace_stack {background: rgb(164, 229, 101);}.ace-github .ace_marker-layer .ace_bracket {margin: -1px 0 0 -1px;border: 1px solid rgb(192, 192, 192);}.ace-github .ace_gutter-active-line {background-color : rgba(0, 0, 0, 0.07);}.ace-github .ace_marker-layer .ace_selected-word {background: rgb(250, 250, 255);border: 1px solid rgb(200, 200, 250);}.ace-github .ace_invisible {color: #BFBFBF}.ace-github .ace_print-margin {width: 1px;background: #e8e8e8;}.ace-github .ace_indent-guide {background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAACCAYAAACZgbYnAAAAE0lEQVQImWP4////f4bLly//BwAmVgd1/w11/gAAAABJRU5ErkJggg==") right repeat-y;}';var r=e("../lib/dom");r.importCssString(t.cssText,t.cssClass)}); (function() {
2 | window.require(["ace/theme/github"], function(m) {
3 | if (typeof module == "object" && typeof exports == "object" && module) {
4 | module.exports = m;
5 | }
6 | });
7 | })();
8 |
--------------------------------------------------------------------------------
/pyp5js/http_local/static/js/ace/theme-gruvbox.js:
--------------------------------------------------------------------------------
1 | define("ace/theme/gruvbox",["require","exports","module","ace/lib/dom"],function(e,t,n){t.isDark=!0,t.cssClass="ace-gruvbox",t.cssText='.ace-gruvbox .ace_gutter-active-line {background-color: #3C3836;}.ace-gruvbox {color: #EBDAB4;background-color: #1D2021;}.ace-gruvbox .ace_invisible {color: #504945;}.ace-gruvbox .ace_marker-layer .ace_selection {background: rgba(179, 101, 57, 0.75)}.ace-gruvbox.ace_multiselect .ace_selection.ace_start {box-shadow: 0 0 3px 0px #002240;}.ace-gruvbox .ace_keyword {color: #8ec07c;}.ace-gruvbox .ace_comment {font-style: italic;color: #928375;}.ace-gruvbox .ace-statement {color: red;}.ace-gruvbox .ace_variable {color: #84A598;}.ace-gruvbox .ace_variable.ace_language {color: #D2879B;}.ace-gruvbox .ace_constant {color: #C2859A;}.ace-gruvbox .ace_constant.ace_language {color: #C2859A;}.ace-gruvbox .ace_constant.ace_numeric {color: #C2859A;}.ace-gruvbox .ace_string {color: #B8BA37;}.ace-gruvbox .ace_support {color: #F9BC41;}.ace-gruvbox .ace_support.ace_function {color: #F84B3C;}.ace-gruvbox .ace_storage {color: #8FBF7F;}.ace-gruvbox .ace_keyword.ace_operator {color: #EBDAB4;}.ace-gruvbox .ace_punctuation.ace_operator {color: yellow;}.ace-gruvbox .ace_marker-layer .ace_active-line {background: #3C3836;}.ace-gruvbox .ace_marker-layer .ace_selected-word {border-radius: 4px;border: 8px solid #3f475d;}.ace-gruvbox .ace_print-margin {width: 5px;background: #3C3836;}.ace-gruvbox .ace_indent-guide {background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAACCAYAAACZgbYnAAAAEklEQVQImWNQUFD4z6Crq/sfAAuYAuYl+7lfAAAAAElFTkSuQmCC") right repeat-y;}';var r=e("../lib/dom");r.importCssString(t.cssText,t.cssClass)}); (function() {
2 | window.require(["ace/theme/gruvbox"], function(m) {
3 | if (typeof module == "object" && typeof exports == "object" && module) {
4 | module.exports = m;
5 | }
6 | });
7 | })();
8 |
--------------------------------------------------------------------------------
/pyp5js/http_local/static/js/ace/theme-idle_fingers.js:
--------------------------------------------------------------------------------
1 | define("ace/theme/idle_fingers",["require","exports","module","ace/lib/dom"],function(e,t,n){t.isDark=!0,t.cssClass="ace-idle-fingers",t.cssText=".ace-idle-fingers .ace_gutter {background: #3b3b3b;color: rgb(153,153,153)}.ace-idle-fingers .ace_print-margin {width: 1px;background: #3b3b3b}.ace-idle-fingers {background-color: #323232;color: #FFFFFF}.ace-idle-fingers .ace_cursor {color: #91FF00}.ace-idle-fingers .ace_marker-layer .ace_selection {background: rgba(90, 100, 126, 0.88)}.ace-idle-fingers.ace_multiselect .ace_selection.ace_start {box-shadow: 0 0 3px 0px #323232;}.ace-idle-fingers .ace_marker-layer .ace_step {background: rgb(102, 82, 0)}.ace-idle-fingers .ace_marker-layer .ace_bracket {margin: -1px 0 0 -1px;border: 1px solid #404040}.ace-idle-fingers .ace_marker-layer .ace_active-line {background: #353637}.ace-idle-fingers .ace_gutter-active-line {background-color: #353637}.ace-idle-fingers .ace_marker-layer .ace_selected-word {border: 1px solid rgba(90, 100, 126, 0.88)}.ace-idle-fingers .ace_invisible {color: #404040}.ace-idle-fingers .ace_keyword,.ace-idle-fingers .ace_meta {color: #CC7833}.ace-idle-fingers .ace_constant,.ace-idle-fingers .ace_constant.ace_character,.ace-idle-fingers .ace_constant.ace_character.ace_escape,.ace-idle-fingers .ace_constant.ace_other,.ace-idle-fingers .ace_support.ace_constant {color: #6C99BB}.ace-idle-fingers .ace_invalid {color: #FFFFFF;background-color: #FF0000}.ace-idle-fingers .ace_fold {background-color: #CC7833;border-color: #FFFFFF}.ace-idle-fingers .ace_support.ace_function {color: #B83426}.ace-idle-fingers .ace_variable.ace_parameter {font-style: italic}.ace-idle-fingers .ace_string {color: #A5C261}.ace-idle-fingers .ace_string.ace_regexp {color: #CCCC33}.ace-idle-fingers .ace_comment {font-style: italic;color: #BC9458}.ace-idle-fingers .ace_meta.ace_tag {color: #FFE5BB}.ace-idle-fingers .ace_entity.ace_name {color: #FFC66D}.ace-idle-fingers .ace_collab.ace_user1 {color: #323232;background-color: #FFF980}.ace-idle-fingers .ace_indent-guide {background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAACCAYAAACZgbYnAAAAEklEQVQImWMwMjLyZYiPj/8PAAreAwAI1+g0AAAAAElFTkSuQmCC) right repeat-y}";var r=e("../lib/dom");r.importCssString(t.cssText,t.cssClass)}); (function() {
2 | window.require(["ace/theme/idle_fingers"], function(m) {
3 | if (typeof module == "object" && typeof exports == "object" && module) {
4 | module.exports = m;
5 | }
6 | });
7 | })();
8 |
--------------------------------------------------------------------------------
/pyp5js/http_local/static/js/ace/theme-kr_theme.js:
--------------------------------------------------------------------------------
1 | define("ace/theme/kr_theme",["require","exports","module","ace/lib/dom"],function(e,t,n){t.isDark=!0,t.cssClass="ace-kr-theme",t.cssText=".ace-kr-theme .ace_gutter {background: #1c1917;color: #FCFFE0}.ace-kr-theme .ace_print-margin {width: 1px;background: #1c1917}.ace-kr-theme {background-color: #0B0A09;color: #FCFFE0}.ace-kr-theme .ace_cursor {color: #FF9900}.ace-kr-theme .ace_marker-layer .ace_selection {background: rgba(170, 0, 255, 0.45)}.ace-kr-theme.ace_multiselect .ace_selection.ace_start {box-shadow: 0 0 3px 0px #0B0A09;}.ace-kr-theme .ace_marker-layer .ace_step {background: rgb(102, 82, 0)}.ace-kr-theme .ace_marker-layer .ace_bracket {margin: -1px 0 0 -1px;border: 1px solid rgba(255, 177, 111, 0.32)}.ace-kr-theme .ace_marker-layer .ace_active-line {background: #38403D}.ace-kr-theme .ace_gutter-active-line {background-color : #38403D}.ace-kr-theme .ace_marker-layer .ace_selected-word {border: 1px solid rgba(170, 0, 255, 0.45)}.ace-kr-theme .ace_invisible {color: rgba(255, 177, 111, 0.32)}.ace-kr-theme .ace_keyword,.ace-kr-theme .ace_meta {color: #949C8B}.ace-kr-theme .ace_constant,.ace-kr-theme .ace_constant.ace_character,.ace-kr-theme .ace_constant.ace_character.ace_escape,.ace-kr-theme .ace_constant.ace_other {color: rgba(210, 117, 24, 0.76)}.ace-kr-theme .ace_invalid {color: #F8F8F8;background-color: #A41300}.ace-kr-theme .ace_support {color: #9FC28A}.ace-kr-theme .ace_support.ace_constant {color: #C27E66}.ace-kr-theme .ace_fold {background-color: #949C8B;border-color: #FCFFE0}.ace-kr-theme .ace_support.ace_function {color: #85873A}.ace-kr-theme .ace_storage {color: #FFEE80}.ace-kr-theme .ace_string {color: rgba(164, 161, 181, 0.8)}.ace-kr-theme .ace_string.ace_regexp {color: rgba(125, 255, 192, 0.65)}.ace-kr-theme .ace_comment {font-style: italic;color: #706D5B}.ace-kr-theme .ace_variable {color: #D1A796}.ace-kr-theme .ace_list,.ace-kr-theme .ace_markup.ace_list {background-color: #0F0040}.ace-kr-theme .ace_variable.ace_language {color: #FF80E1}.ace-kr-theme .ace_meta.ace_tag {color: #BABD9C}.ace-kr-theme .ace_indent-guide {background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAACCAYAAACZgbYnAAAAEklEQVQImWNgYGBgYFBXV/8PAAJoAXX4kT2EAAAAAElFTkSuQmCC) right repeat-y}";var r=e("../lib/dom");r.importCssString(t.cssText,t.cssClass)}); (function() {
2 | window.require(["ace/theme/kr_theme"], function(m) {
3 | if (typeof module == "object" && typeof exports == "object" && module) {
4 | module.exports = m;
5 | }
6 | });
7 | })();
8 |
--------------------------------------------------------------------------------
/pyp5js/http_local/static/js/ace/theme-kuroir.js:
--------------------------------------------------------------------------------
1 | define("ace/theme/kuroir",["require","exports","module","ace/lib/dom"],function(e,t,n){t.isDark=!1,t.cssClass="ace-kuroir",t.cssText=".ace-kuroir .ace_gutter {background: #e8e8e8;color: #333;}.ace-kuroir .ace_print-margin {width: 1px;background: #e8e8e8;}.ace-kuroir {background-color: #E8E9E8;color: #363636;}.ace-kuroir .ace_cursor {color: #202020;}.ace-kuroir .ace_marker-layer .ace_selection {background: rgba(245, 170, 0, 0.57);}.ace-kuroir.ace_multiselect .ace_selection.ace_start {box-shadow: 0 0 3px 0px #E8E9E8;}.ace-kuroir .ace_marker-layer .ace_step {background: rgb(198, 219, 174);}.ace-kuroir .ace_marker-layer .ace_bracket {margin: -1px 0 0 -1px;border: 1px solid rgba(0, 0, 0, 0.29);}.ace-kuroir .ace_marker-layer .ace_active-line {background: rgba(203, 220, 47, 0.22);}.ace-kuroir .ace_gutter-active-line {background-color: rgba(203, 220, 47, 0.22);}.ace-kuroir .ace_marker-layer .ace_selected-word {border: 1px solid rgba(245, 170, 0, 0.57);}.ace-kuroir .ace_invisible {color: #BFBFBF}.ace-kuroir .ace_fold {border-color: #363636;}.ace-kuroir .ace_constant{color:#CD6839;}.ace-kuroir .ace_constant.ace_numeric{color:#9A5925;}.ace-kuroir .ace_support{color:#104E8B;}.ace-kuroir .ace_support.ace_function{color:#005273;}.ace-kuroir .ace_support.ace_constant{color:#CF6A4C;}.ace-kuroir .ace_storage{color:#A52A2A;}.ace-kuroir .ace_invalid.ace_illegal{color:#FD1224;background-color:rgba(255, 6, 0, 0.15);}.ace-kuroir .ace_invalid.ace_deprecated{text-decoration:underline;font-style:italic;color:#FD1732;background-color:#E8E9E8;}.ace-kuroir .ace_string{color:#639300;}.ace-kuroir .ace_string.ace_regexp{color:#417E00;background-color:#C9D4BE;}.ace-kuroir .ace_comment{color:rgba(148, 148, 148, 0.91);background-color:rgba(220, 220, 220, 0.56);}.ace-kuroir .ace_variable{color:#009ACD;}.ace-kuroir .ace_meta.ace_tag{color:#005273;}.ace-kuroir .ace_markup.ace_heading{color:#B8012D;background-color:rgba(191, 97, 51, 0.051);}.ace-kuroir .ace_markup.ace_list{color:#8F5B26;}";var r=e("../lib/dom");r.importCssString(t.cssText,t.cssClass)}); (function() {
2 | window.require(["ace/theme/kuroir"], function(m) {
3 | if (typeof module == "object" && typeof exports == "object" && module) {
4 | module.exports = m;
5 | }
6 | });
7 | })();
8 |
--------------------------------------------------------------------------------
/pyp5js/http_local/static/js/ace/theme-merbivore.js:
--------------------------------------------------------------------------------
1 | define("ace/theme/merbivore",["require","exports","module","ace/lib/dom"],function(e,t,n){t.isDark=!0,t.cssClass="ace-merbivore",t.cssText=".ace-merbivore .ace_gutter {background: #202020;color: #E6E1DC}.ace-merbivore .ace_print-margin {width: 1px;background: #555651}.ace-merbivore {background-color: #161616;color: #E6E1DC}.ace-merbivore .ace_cursor {color: #FFFFFF}.ace-merbivore .ace_marker-layer .ace_selection {background: #454545}.ace-merbivore.ace_multiselect .ace_selection.ace_start {box-shadow: 0 0 3px 0px #161616;}.ace-merbivore .ace_marker-layer .ace_step {background: rgb(102, 82, 0)}.ace-merbivore .ace_marker-layer .ace_bracket {margin: -1px 0 0 -1px;border: 1px solid #404040}.ace-merbivore .ace_marker-layer .ace_active-line {background: #333435}.ace-merbivore .ace_gutter-active-line {background-color: #333435}.ace-merbivore .ace_marker-layer .ace_selected-word {border: 1px solid #454545}.ace-merbivore .ace_invisible {color: #404040}.ace-merbivore .ace_entity.ace_name.ace_tag,.ace-merbivore .ace_keyword,.ace-merbivore .ace_meta,.ace-merbivore .ace_meta.ace_tag,.ace-merbivore .ace_storage,.ace-merbivore .ace_support.ace_function {color: #FC6F09}.ace-merbivore .ace_constant,.ace-merbivore .ace_constant.ace_character,.ace-merbivore .ace_constant.ace_character.ace_escape,.ace-merbivore .ace_constant.ace_other,.ace-merbivore .ace_support.ace_type {color: #1EDAFB}.ace-merbivore .ace_constant.ace_character.ace_escape {color: #519F50}.ace-merbivore .ace_constant.ace_language {color: #FDC251}.ace-merbivore .ace_constant.ace_library,.ace-merbivore .ace_string,.ace-merbivore .ace_support.ace_constant {color: #8DFF0A}.ace-merbivore .ace_constant.ace_numeric {color: #58C554}.ace-merbivore .ace_invalid {color: #FFFFFF;background-color: #990000}.ace-merbivore .ace_fold {background-color: #FC6F09;border-color: #E6E1DC}.ace-merbivore .ace_comment {font-style: italic;color: #AD2EA4}.ace-merbivore .ace_entity.ace_other.ace_attribute-name {color: #FFFF89}.ace-merbivore .ace_indent-guide {background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAACCAYAAACZgbYnAAAAEklEQVQImWMQFxf3ZXB1df0PAAdsAmERTkEHAAAAAElFTkSuQmCC) right repeat-y}";var r=e("../lib/dom");r.importCssString(t.cssText,t.cssClass)}); (function() {
2 | window.require(["ace/theme/merbivore"], function(m) {
3 | if (typeof module == "object" && typeof exports == "object" && module) {
4 | module.exports = m;
5 | }
6 | });
7 | })();
8 |
--------------------------------------------------------------------------------
/pyp5js/http_local/static/js/ace/theme-nord_dark.js:
--------------------------------------------------------------------------------
1 | define("ace/theme/nord_dark",["require","exports","module","ace/lib/dom"],function(e,t,n){t.isDark=!0,t.cssClass="ace-nord-dark",t.cssText=".ace-nord-dark .ace_gutter {color: #616e88;}.ace-nord-dark .ace_print-margin {width: 1px;background: #4c566a;}.ace-nord-dark {background-color: #2e3440;color: #d8dee9;}.ace-nord-dark .ace_entity.ace_other.ace_attribute-name,.ace-nord-dark .ace_storage {color: #d8dee9;}.ace-nord-dark .ace_cursor {color: #d8dee9;},.ace-nord-dark .ace_string.ace_regexp {color: #bf616a;}.ace-nord-dark .ace_marker-layer .ace_active-line {background: #434c5ecc;}.ace-nord-dark .ace_marker-layer .ace_selection {background: #434c5ecc;}.ace-nord-dark.ace_multiselect .ace_selection.ace_start {box-shadow: 0 0 3px 0px #2e3440;}.ace-nord-dark .ace_marker-layer .ace_step {background: #ebcb8b;}.ace-nord-dark .ace_marker-layer .ace_bracket {margin: -1px 0 0 -1px;border: 1px solid #88c0d066;}.ace-nord-dark .ace_gutter-active-line {background-color: #434c5ecc;}.ace-nord-dark .ace_marker-layer .ace_selected-word {border: 1px solid #88c0d066;}.ace-nord-dark .ace_invisible {color: #4c566a;}.ace-nord-dark .ace_keyword,.ace-nord-dark .ace_meta,.ace-nord-dark .ace_support.ace_class,.ace-nord-dark .ace_support.ace_type {color: #81a1c1;}.ace-nord-dark .ace_constant.ace_character,.ace-nord-dark .ace_constant.ace_other {color: #d8dee9;}.ace-nord-dark .ace_constant.ace_language {color: #5e81ac;}.ace-nord-dark .ace_constant.ace_escape {color: #ebcB8b;}.ace-nord-dark .ace_constant.ace_numeric {color: #b48ead;}.ace-nord-dark .ace_fold {background-color: #4c566a;border-color: #d8dee9;}.ace-nord-dark .ace_entity.ace_name.ace_function,.ace-nord-dark .ace_entity.ace_name.ace_tag,.ace-nord-dark .ace_support.ace_function,.ace-nord-dark .ace_variable,.ace-nord-dark .ace_variable.ace_language {color: #8fbcbb;}.ace-nord-dark .ace_string {color: #a3be8c;}.ace-nord-dark .ace_comment {color: #616e88;}.ace-nord-dark .ace_indent-guide {box-shadow: inset -1px 0 0 0 #434c5eb3;}",t.$selectionColorConflict=!0;var r=e("../lib/dom");r.importCssString(t.cssText,t.cssClass)}); (function() {
2 | window.require(["ace/theme/nord_dark"], function(m) {
3 | if (typeof module == "object" && typeof exports == "object" && module) {
4 | module.exports = m;
5 | }
6 | });
7 | })();
8 |
--------------------------------------------------------------------------------
/pyp5js/http_local/static/js/ace/theme-solarized_dark.js:
--------------------------------------------------------------------------------
1 | define("ace/theme/solarized_dark",["require","exports","module","ace/lib/dom"],function(e,t,n){t.isDark=!0,t.cssClass="ace-solarized-dark",t.cssText=".ace-solarized-dark .ace_gutter {background: #01313f;color: #d0edf7}.ace-solarized-dark .ace_print-margin {width: 1px;background: #33555E}.ace-solarized-dark {background-color: #002B36;color: #93A1A1}.ace-solarized-dark .ace_entity.ace_other.ace_attribute-name,.ace-solarized-dark .ace_storage {color: #93A1A1}.ace-solarized-dark .ace_cursor,.ace-solarized-dark .ace_string.ace_regexp {color: #D30102}.ace-solarized-dark .ace_marker-layer .ace_active-line,.ace-solarized-dark .ace_marker-layer .ace_selection {background: rgba(255, 255, 255, 0.1)}.ace-solarized-dark.ace_multiselect .ace_selection.ace_start {box-shadow: 0 0 3px 0px #002B36;}.ace-solarized-dark .ace_marker-layer .ace_step {background: rgb(102, 82, 0)}.ace-solarized-dark .ace_marker-layer .ace_bracket {margin: -1px 0 0 -1px;border: 1px solid rgba(147, 161, 161, 0.50)}.ace-solarized-dark .ace_gutter-active-line {background-color: #0d3440}.ace-solarized-dark .ace_marker-layer .ace_selected-word {border: 1px solid #073642}.ace-solarized-dark .ace_invisible {color: rgba(147, 161, 161, 0.50)}.ace-solarized-dark .ace_keyword,.ace-solarized-dark .ace_meta,.ace-solarized-dark .ace_support.ace_class,.ace-solarized-dark .ace_support.ace_type {color: #859900}.ace-solarized-dark .ace_constant.ace_character,.ace-solarized-dark .ace_constant.ace_other {color: #CB4B16}.ace-solarized-dark .ace_constant.ace_language {color: #B58900}.ace-solarized-dark .ace_constant.ace_numeric {color: #D33682}.ace-solarized-dark .ace_fold {background-color: #268BD2;border-color: #93A1A1}.ace-solarized-dark .ace_entity.ace_name.ace_function,.ace-solarized-dark .ace_entity.ace_name.ace_tag,.ace-solarized-dark .ace_support.ace_function,.ace-solarized-dark .ace_variable,.ace-solarized-dark .ace_variable.ace_language {color: #268BD2}.ace-solarized-dark .ace_string {color: #2AA198}.ace-solarized-dark .ace_comment {font-style: italic;color: #657B83}.ace-solarized-dark .ace_indent-guide {background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAACCAYAAACZgbYnAAAAEklEQVQImWNg0Db1ZVCxc/sPAAd4AlUHlLenAAAAAElFTkSuQmCC) right repeat-y}";var r=e("../lib/dom");r.importCssString(t.cssText,t.cssClass)}); (function() {
2 | window.require(["ace/theme/solarized_dark"], function(m) {
3 | if (typeof module == "object" && typeof exports == "object" && module) {
4 | module.exports = m;
5 | }
6 | });
7 | })();
8 |
--------------------------------------------------------------------------------
/pyp5js/http_local/static/js/ace/theme-vibrant_ink.js:
--------------------------------------------------------------------------------
1 | define("ace/theme/vibrant_ink",["require","exports","module","ace/lib/dom"],function(e,t,n){t.isDark=!0,t.cssClass="ace-vibrant-ink",t.cssText=".ace-vibrant-ink .ace_gutter {background: #1a1a1a;color: #BEBEBE}.ace-vibrant-ink .ace_print-margin {width: 1px;background: #1a1a1a}.ace-vibrant-ink {background-color: #0F0F0F;color: #FFFFFF}.ace-vibrant-ink .ace_cursor {color: #FFFFFF}.ace-vibrant-ink .ace_marker-layer .ace_selection {background: #6699CC}.ace-vibrant-ink.ace_multiselect .ace_selection.ace_start {box-shadow: 0 0 3px 0px #0F0F0F;}.ace-vibrant-ink .ace_marker-layer .ace_step {background: rgb(102, 82, 0)}.ace-vibrant-ink .ace_marker-layer .ace_bracket {margin: -1px 0 0 -1px;border: 1px solid #404040}.ace-vibrant-ink .ace_marker-layer .ace_active-line {background: #333333}.ace-vibrant-ink .ace_gutter-active-line {background-color: #333333}.ace-vibrant-ink .ace_marker-layer .ace_selected-word {border: 1px solid #6699CC}.ace-vibrant-ink .ace_invisible {color: #404040}.ace-vibrant-ink .ace_keyword,.ace-vibrant-ink .ace_meta {color: #FF6600}.ace-vibrant-ink .ace_constant,.ace-vibrant-ink .ace_constant.ace_character,.ace-vibrant-ink .ace_constant.ace_character.ace_escape,.ace-vibrant-ink .ace_constant.ace_other {color: #339999}.ace-vibrant-ink .ace_constant.ace_numeric {color: #99CC99}.ace-vibrant-ink .ace_invalid,.ace-vibrant-ink .ace_invalid.ace_deprecated {color: #CCFF33;background-color: #000000}.ace-vibrant-ink .ace_fold {background-color: #FFCC00;border-color: #FFFFFF}.ace-vibrant-ink .ace_entity.ace_name.ace_function,.ace-vibrant-ink .ace_support.ace_function,.ace-vibrant-ink .ace_variable {color: #FFCC00}.ace-vibrant-ink .ace_variable.ace_parameter {font-style: italic}.ace-vibrant-ink .ace_string {color: #66FF00}.ace-vibrant-ink .ace_string.ace_regexp {color: #44B4CC}.ace-vibrant-ink .ace_comment {color: #9933CC}.ace-vibrant-ink .ace_entity.ace_other.ace_attribute-name {font-style: italic;color: #99CC99}.ace-vibrant-ink .ace_indent-guide {background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAACCAYAAACZgbYnAAAAEklEQVQImWNgYGBgYNDTc/oPAALPAZ7hxlbYAAAAAElFTkSuQmCC) right repeat-y}";var r=e("../lib/dom");r.importCssString(t.cssText,t.cssClass)}); (function() {
2 | window.require(["ace/theme/vibrant_ink"], function(m) {
3 | if (typeof module == "object" && typeof exports == "object" && module) {
4 | module.exports = m;
5 | }
6 | });
7 | })();
8 |
--------------------------------------------------------------------------------
/pyp5js/http_local/static/js/ace/theme-xcode.js:
--------------------------------------------------------------------------------
1 | define("ace/theme/xcode",["require","exports","module","ace/lib/dom"],function(e,t,n){t.isDark=!1,t.cssClass="ace-xcode",t.cssText=".ace-xcode .ace_gutter {background: #e8e8e8;color: #333}.ace-xcode .ace_print-margin {width: 1px;background: #e8e8e8}.ace-xcode {background-color: #FFFFFF;color: #000000}.ace-xcode .ace_cursor {color: #000000}.ace-xcode .ace_marker-layer .ace_selection {background: #B5D5FF}.ace-xcode.ace_multiselect .ace_selection.ace_start {box-shadow: 0 0 3px 0px #FFFFFF;}.ace-xcode .ace_marker-layer .ace_step {background: rgb(198, 219, 174)}.ace-xcode .ace_marker-layer .ace_bracket {margin: -1px 0 0 -1px;border: 1px solid #BFBFBF}.ace-xcode .ace_marker-layer .ace_active-line {background: rgba(0, 0, 0, 0.071)}.ace-xcode .ace_gutter-active-line {background-color: rgba(0, 0, 0, 0.071)}.ace-xcode .ace_marker-layer .ace_selected-word {border: 1px solid #B5D5FF}.ace-xcode .ace_constant.ace_language,.ace-xcode .ace_keyword,.ace-xcode .ace_meta,.ace-xcode .ace_variable.ace_language {color: #C800A4}.ace-xcode .ace_invisible {color: #BFBFBF}.ace-xcode .ace_constant.ace_character,.ace-xcode .ace_constant.ace_other {color: #275A5E}.ace-xcode .ace_constant.ace_numeric {color: #3A00DC}.ace-xcode .ace_entity.ace_other.ace_attribute-name,.ace-xcode .ace_support.ace_constant,.ace-xcode .ace_support.ace_function {color: #450084}.ace-xcode .ace_fold {background-color: #C800A4;border-color: #000000}.ace-xcode .ace_entity.ace_name.ace_tag,.ace-xcode .ace_support.ace_class,.ace-xcode .ace_support.ace_type {color: #790EAD}.ace-xcode .ace_storage {color: #C900A4}.ace-xcode .ace_string {color: #DF0002}.ace-xcode .ace_comment {color: #008E00}.ace-xcode .ace_indent-guide {background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAACCAYAAACZgbYnAAAAE0lEQVQImWP4////f4bLly//BwAmVgd1/w11/gAAAABJRU5ErkJggg==) right repeat-y}";var r=e("../lib/dom");r.importCssString(t.cssText,t.cssClass)}); (function() {
2 | window.require(["ace/theme/xcode"], function(m) {
3 | if (typeof module == "object" && typeof exports == "object" && module) {
4 | module.exports = m;
5 | }
6 | });
7 | })();
8 |
--------------------------------------------------------------------------------
/pyp5js/http_local/static/js/pyodide/pyodide.asm.data:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/berinhard/pyp5js/87ebb8e48ebabfd4e0281693fffa6ba9fb61d19e/pyp5js/http_local/static/js/pyodide/pyodide.asm.data
--------------------------------------------------------------------------------
/pyp5js/http_local/static/js/pyodide/pyodide.asm.wasm:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/berinhard/pyp5js/87ebb8e48ebabfd4e0281693fffa6ba9fb61d19e/pyp5js/http_local/static/js/pyodide/pyodide.asm.wasm
--------------------------------------------------------------------------------
/pyp5js/http_local/static/styles/custom.css:
--------------------------------------------------------------------------------
1 | html {
2 | font-family: sans-serif;
3 | }
4 |
5 | a {
6 | color: #07c;
7 | }
8 |
9 | .red {
10 | color: #d21;
11 | }
12 |
13 | .input {
14 | /* Color added due to .border of basscss force remove border color */
15 | border-color: #ccc;
16 | }
17 |
--------------------------------------------------------------------------------
/pyp5js/http_local/templates/base.html:
--------------------------------------------------------------------------------
1 |
18 |
19 |
20 |
21 |
22 | pyp5js - {% block title %}{% endblock title %}
25 |
26 |
35 | {% block content %}
36 | {% endblock content %}
37 |
38 |
39 |
40 | {% block custom_js %}
41 | {% endblock custom_js %}
42 |
43 |
44 |
45 |
--------------------------------------------------------------------------------
/pyp5js/http_local/templates/index.html:
--------------------------------------------------------------------------------
1 |
18 | {% extends "base.html" %}
19 | {% block title %}Index{% endblock title %}
20 |
21 | {% block content %}
22 | Welcome to your pyp5js sketchbook!
23 | Add a new sketch
24 | Available sketches in {{ sketches_dir }}:
25 |
30 | {% endblock content %}
31 |
--------------------------------------------------------------------------------
/pyp5js/http_local/templates/new_sketch_form.html:
--------------------------------------------------------------------------------
1 |
18 | {% extends "base.html" %}
19 | {% block title %}New sketch{% endblock title %}
20 |
21 | {% block content %}
22 |
23 |
Start a new sketch
24 |
25 | Your sketch will be created in {{ sketches_dir }}
26 |
27 |
46 |
Your sketch was created with success!!!
23 | Now you can start to draw, I mean, to code!
24 | Edit your Python sketch file located at {{ files.sketch_py.resolve() }} and have fun!
25 | Click here to see your results or go back to the home .
26 | {% endblock content %}
27 |
--------------------------------------------------------------------------------
/pyp5js/monitor.py:
--------------------------------------------------------------------------------
1 | """
2 | pyp5js
3 | Copyright (C) 2019-2021 Bernardo Fontes
4 |
5 | This program is free software; you can redistribute it and/or
6 | modify it under the terms of the GNU Lesser General Public
7 | License as published by the Free Software Foundation; either
8 | version 3 of the License, or (at your option) any later version.
9 |
10 | This program is distributed in the hope that it will be useful,
11 | but WITHOUT ANY WARRANTY; without even the implied warranty of
12 | MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU
13 | Lesser General Public License for more details.
14 |
15 | You should have received a copy of the GNU Lesser General Public License
16 | along with this program. If not, see {{ sketch_name }} - pyp5js (using pyodide)
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
37 |
38 |
39 |
40 |
--------------------------------------------------------------------------------
/pyp5js/templates/transcrypt/base_sketch.py.template:
--------------------------------------------------------------------------------
1 | def setup():
2 | createCanvas(200, 200)
3 |
4 | def draw():
5 | background(200)
6 | diameter = sin(frameCount / 60) * 50 + 50
7 | fill("blue")
8 | ellipse(100, 100, diameter, diameter)
9 |
--------------------------------------------------------------------------------
/pyp5js/templates/transcrypt/index.html:
--------------------------------------------------------------------------------
1 |
18 |
19 |
20 |
21 |
22 |
23 |
24 | {{ sketch_name }} - pyp5js
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
37 |
38 |
39 |
--------------------------------------------------------------------------------
/pyp5js/templates/transcrypt/python_functions.py:
--------------------------------------------------------------------------------
1 | """
2 | pyp5js
3 | Copyright (C) 2019-2021 Bernardo Fontes
4 |
5 | This program is free software; you can redistribute it and/or
6 | modify it under the terms of the GNU Lesser General Public
7 | License as published by the Free Software Foundation; either
8 | version 3 of the License, or (at your option) any later version.
9 |
10 | This program is distributed in the hope that it will be useful,
11 | but WITHOUT ANY WARRANTY; without even the implied warranty of
12 | MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU
13 | Lesser General Public License for more details.
14 |
15 | You should have received a copy of the GNU Lesser General Public License
16 | along with this program. If not, see