Merge branch 'release/0.6.0' into main

.github/workflows/ci.yml

@@ -10,7 +10,7 @@ jobs:
       max-parallel: 4
       matrix:
         os: [windows-latest, ubuntu-latest, macos-latest]
-        python-version: [3.6, 3.7, 3.8]
+        python-version: [3.6, 3.7, 3.8, 3.9]
 
     steps:
       - uses: actions/checkout@v1

.gitignore

@@ -18,3 +18,5 @@ venv
 docs/examples/dev*
 .theia
 .envrc
+*.properties.json
+.idea/*

CHANGELOG.md

@@ -1,6 +1,14 @@
 Development
 -----------
 
+0.6.0
+-----
+- Add transcrypt interpreter choice to web editor [PR #175](https://github.com/berinhard/pyp5js/pull/175)
+- Upgrade Transcrypt to 3.9.0
+- Upgrade Pyodide to v0.18.1 [PR #181](https://github.com/berinhard/pyp5js/pull/181)
+- Enable to use custom templates files to generate and compile index.html [PR #177](https://github.com/berinhard/pyp5js/pull/177)
+- Add docs on Pyodide examples [PR #178](https://github.com/berinhard/pyp5js/pull/178)
+
 0.5.2
 -----
 - Pyodide mode bugfix for missing `P3D` global definition

Makefile

@@ -1,8 +1,15 @@
 test:
-	@pytest
+	export PYTHONWARNINGS=ignore::flask.DeprecationWarning; pytest
 
 update_dist:
 	@python3 setup.py sdist bdist_wheel
 
 upload_pypi:
 	@twine upload dist/*
+
+# helper command for the maintainer to refresh the docs files
+refresh_transcrypt_docs:
+	cd docs/examples/transcrypt; for x in `ls -d */`; do SKETCHBOOK_DIR="/home/bernardo/envs/pyp5js/docs/examples/transcrypt" pyp5js compile $$x --refresh; done;
+
+refresh_pyodide_docs:
+	cd docs/examples/pyodide; for x in `ls -d */`; do SKETCHBOOK_DIR="/home/bernardo/envs/pyp5js/docs/examples/pyodide" pyp5js compile $$x --refresh; done;

README.md

@@ -13,15 +13,26 @@ Here's an example of a valid Python code using P5.js API:
 ```python
 def setup():
     createCanvas(200, 200)
-    background(160)
 
 def draw():
-    fill('blue')
     background(200)
-    r = sin(frameCount / 60) * 50 + 50
-    ellipse(100, 100, r, r)
+    diameter = sin(frameCount / 60) * 50 + 50
+    fill('blue')
+    ellipse(100, 100, diameter, diameter)
 ```
 
+## Project setup
+
+```
+$ git clone [email protected]:YOUR_GITHUB_PROFILE/pyp5js.git
+$ cd pyp5js
+$ pip install -r dev-requirements.txt
+$ python setup.py develop
+$ make test
+```
+
+## More references
+
 ### [Documentation](https://berinhard.github.io/pyp5js)
 
 ### [Examples](https://berinhard.github.io/pyp5js/examples/)

VERSION

@@ -1 +1 @@
-0.5.2
+0.6.0

docs/examples/index.md

@@ -1,24 +1,33 @@
 ### Examples list
 
-- [sketch_001](https://github.com/berinhard/pyp5js/tree/develop/docs/examples/sketch_001): [**Angles and mouse coordinates**](sketch_001/index.html)
+Here you find a list of examples using pyp5js. They can have lnks to working examples using Transcrypt or Pyodide as the interpreter.
 
-- [sketch_002](https://github.com/berinhard/pyp5js/tree/develop/docs/examples/sketch_002): [**Move Eye**](sketch_002/index.html), an example by Simon Greenwold, ported by [@villares](https://github.com/villares)
+**Angles and mouse coordinates** | [pyodide](pyodide/sketch_001/index.html) | [transcrypt](transcrypt/sketch_001/index.html)
 
-- [sketch_004](https://github.com/berinhard/pyp5js/tree/develop/docs/examples/sketch_004): [**Rotating 3D box**](sketch_003/index.html)
+**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)
 
-- [sketch_004](https://github.com/berinhard/pyp5js/tree/develop/docs/examples/sketch_004): [**Boids**](sketch_004/index.html)
-, from [@esperanc](https://github.com/esperanc) [BrythonIDE examples](https://github.com/esperanc/brythonide/blob/master/demoSketches/boids.py)
+**Rotating 3D box** | [pyodide](pyodide/sketch_003/index.html) | [transcrypt](transcrypt/sketch_003/index.html)
 
-- [sketch_005](https://github.com/berinhard/pyp5js/tree/develop/docs/examples/sketch_005): [**Globals variables (HSB and CENTER)**](sketch_005/index.html)
+**Boids** | [pyodide](pyodide/sketch_004/index.html) | [transcrypt](transcrypt/sketch_004/index.html)
 
-- [sketch_006](https://github.com/berinhard/pyp5js/tree/develop/docs/examples/sketch_006): [**Registering event functions such as keyPressed**](sketch_006/index.html)
+**Globals variables (HSB and CENTER)** | [pyodide](pyodide/sketch_005/index.html) | [transcrypt](transcrypt/sketch_005/index.html)
 
-- [sketch_007](https://github.com/berinhard/pyp5js/tree/develop/docs/examples/sketch_007): [**p5.Vector static methods**](sketch_007/index.html)
+**Registering event functions such as keyPressed** | [pyodide](pyodide/sketch_006/index.html) | [transcrypt](transcrypt/sketch_006/index.html)
 
-- [sketch_008](https://github.com/berinhard/pyp5js/tree/develop/docs/examples/sketch_008): [**p5.dom.js usage**](sketch_008/index.html)
+**p5.Vector static methods** | [pyodide](pyodide/sketch_007/index.html) | [transcrypt](transcrypt/sketch_007/index.html)
 
-- [sketch_009](https://github.com/berinhard/pyp5js/tree/develop/docs/examples/sketch_009): [**Working with images**](sketch_009/index.html)
+**p5.dom.js usage** | [pyodide](pyodide/sketch_008/index.html) | [transcrypt](transcrypt/sketch_008/index.html)
 
-- [sketch_010](https://github.com/berinhard/pyp5js/tree/develop/docs/examples/sketch_010): [**Complex shapes**](sketch_010/index.html) by [Pedro Queiroga](https://github.com/pedroqueiroga/pqueiroga.github.io/blob/master/curveVertexExample/main.js)
+**Working with images** | [pyodide](pyodide/sketch_009/index.html) | [transcrypt](transcrypt/sketch_009/index.html)
 
-- [sketch_011](https://github.com/berinhard/pyp5js/tree/develop/docs/examples/sketch_011): [**PVector**](sketch_011/index.html) processing-like implementation by [Alexandre Villares](sketch_011/index.html)
+**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)
+
+**A-star search algoritm**, by [@ademakdogan](https://github.com/ademakdogan) | [pyodide](pyodide/sketch_012/index.html)
+
+**Breakout**, by [@misolietavec](https://github.com/misolietavec) | [pyodide](pyodide/breakout/index.html)
+
+**Flappy bird**, by [@misolietavec](https://github.com/misolietavec) | [pyodide](pyodide/flappybird/index.html)
+
+**Memory**, by [@misolietavec](https://github.com/misolietavec) | [pyodide](pyodide/memory/index.html)
+
+**Same game**, by [@misolietavec](https://github.com/misolietavec) | [pyodide](pyodide/samegame/index.html)

docs/examples/pyodide/bouncing/bouncing.py

@@ -0,0 +1,30 @@
+x = 50
+y = 100
+rad = 6
+
+vx = 5
+vy = 5
+
+WIDTH = 640
+HEIGHT = 400
+FPS = 60
+
+def setup():
+    createCanvas(WIDTH, HEIGHT)
+    frameRate(FPS)
+
+def draw():
+    global x, y, vx, vy
+
+    background(220)
+    fill(0, 255, 0)
+    ellipse(x, y, 2 * rad)
+
+    x += vx
+    y += vy
+
+    if (x + rad >= width or x - rad <= 0):
+        vx = -vx
+
+    if (y + rad >= height or y - rad <= 0):
+        vy = -vy

docs/examples/pyodide/bouncing/bouncingFPS.py

@@ -0,0 +1,38 @@
+x = 50
+y = 100
+diam = 10
+
+vx = 2
+vy = 2
+framecount = 0
+
+WIDTH = 640
+HEIGHT = 400
+FPS = 60
+afps = FPS
+
+def setup():
+    createCanvas(WIDTH, HEIGHT)
+    frameRate(FPS)
+
+def draw():
+    global x, y, vx, vy, framecount, afps
+
+    background(220)
+    fill(255, 0, 0)
+    ellipse(x, y, diam)
+    framecount += 1
+    if not framecount % FPS:
+        afps = frameRate() 
+    fill(10)
+    textSize(20)
+    text("FPS: %.1f" %afps, 30, HEIGHT - 24)
+    x += vx
+    y += vy
+
+    if (x + diam // 2 >= width or x - diam // 2 <= 0):
+        vx = -vx
+
+    if (y + diam // 2 >= height or y - diam // 2 <= 0):
+        vy = -vy
+

docs/examples/pyodide/bouncing/index.html

@@ -0,0 +1,84 @@
+<!DOCTYPE html>
+
+<!-- Template file used to generate the examples using Transcrypt interpreter -->
+<html lang="">
+  <head>
+
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>bouncing - pyp5js</title>
+    <style> body, html, canvas {padding: 0; margin: 0; overflow: hidden;} </style>
+
+    <script src="static/p5.js"></script>
+    <script src="target/target_sketch.js"  type="module"></script>
+
+    <script src="https://pyodide-cdn2.iodide.io/v0.17.0/full/pyodide.js"></script>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.6/styles/default.min.css">
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.6/highlight.min.js"></script>
+    <script>hljs.initHighlightingOnLoad();</script>
+
+    <style>
+        html {
+          overflow-y: scroll;
+          overflow-x: scroll;
+        }
+
+        .demoContainer {
+          display: flex;
+          align-items: center;
+          justify-content: center;
+        }
+
+        pre {
+            padding-left: 2em;
+        }
+    </style>
+  </head>
+
+  <body>
+    <p style="background-color: #f6f8fa">
+      Python code <a href="https://github.com/berinhard/pyp5js/blob/develop/docs/examples/pyodide/bouncing" target="_blank">here</a>.
+    </p>
+
+    <div class="demoContainer">
+        <div id="sketch-holder" style="">
+              <!-- You sketch will go here! -->
+        </div>
+
+        <div style="">
+          <pre><code>x = 50
+y = 100
+rad = 6
+
+vx = 5
+vy = 5
+
+WIDTH = 640
+HEIGHT = 400
+FPS = 60
+
+def setup():
+    createCanvas(WIDTH, HEIGHT)
+    frameRate(FPS)
+
+def draw():
+    global x, y, vx, vy
+
+    background(220)
+    fill(0, 255, 0)
+    ellipse(x, y, 2 * rad)
+
+    x += vx
+    y += vy
+
+    if (x + rad >= width or x - rad <= 0):
+        vx = -vx
+
+    if (y + rad >= height or y - rad <= 0):
+        vy = -vy
+</code></pre>
+        </div>
+
+    </div>
+  </body>
+</html>

docs/examples/pyodide/bouncing/odkaz.txt

@@ -0,0 +1 @@
+https://github.com/Luxapodular/Py5.js/blob/master/examples/bouncingBall.py