Skip to content

Instantly share code, notes, and snippets.

@llandsmeer
Created August 29, 2021 12:54
Show Gist options
  • Save llandsmeer/4e2d883c45a6af466af19d1f940a4f46 to your computer and use it in GitHub Desktop.
Save llandsmeer/4e2d883c45a6af466af19d1f940a4f46 to your computer and use it in GitHub Desktop.
p5js + brython with an textarea to edit the code
<!-- edited from https://gist.github.com/t2psyto/7b5e08c4d216cfb8d79a86d676be0642 -->
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/brython/3.9.0/brython.js"> </script>
<script src="//cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.0/p5.js"></script>
</head>
<body onload='brython()'>
<textarea rows=25 cols=80 name=sourcecode id=sourcecode>
def setup():
createCanvas(700, 410)
background(0)
rectMode(p.CENTER)
def draw():
fill(255,255,0,128)
ellipse(p.mouseX,p.mouseY,50,50)
def mousePressed():
background(0)
</textarea>
<script type="text/python">
# brython + p5js.org adapted from code from Kiko Correoso
# with correction from Pierre Quentel
from browser import document, window, alert
srcElem = document.getElementById('sourcecode')
persist = window.localStorage
saved = persist.getItem('source')
if saved and False:
srcElem.value = saved
def sketch(p):
env = {}
def recomp(code):
try:
code_obj = compile(code, 'sketch', 'exec')
except Exception as ex:
print(repr(ex))
persist.setItem('source', code)
print('Compiling!!!')
env.clear()
env['p'] = p
for k in dir(p):
if not k.isalpha():
continue
env[k] = getattr(p, k)
try:
exec(code_obj, env)
except Exception as ex:
print(repr(ex))
old_src = srcElem.value
recomp(old_src)
def setup():
s = env.get('setup')
try:
if s: s()
except Exception as ex:
print(repr(ex))
def draw():
nonlocal old_src
cur_src = srcElem.value
if cur_src != old_src:
recomp(cur_src)
setup()
old_src = cur_src
d = env.get('draw')
try:
if d: d()
except Exception as ex:
print(repr(ex))
def mousePressed(ev):
m = env.get('mousePressed')
try:
if m: m()
except Exception as ex:
print(repr(ex))
p.setup = setup
p.draw = draw
p.mousePressed = mousePressed
myp5 = window.p5.new(sketch)
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment