Brython and p5*js anyone?

[Alexandre Villares]

Hi,

The Processing Foundation (http://processing.org) has two new projects besides the traditional Processing platform, based on Java:
1 - Processing Python Mode (http://py.processing.org), based on Jython.
2 - p5*js (http://p5js.org), based on JavaScript.
(not to be confused with ProcessingJS that tries to convert Java code into JavaScript and is used in Skulpt, like in https://trinket.io/processing)

Processing Python Mode is lovely but makes it harder to share 'sketches' online.
As an educator without enough technical knowledge, I would like to find anyone using p5*js on Brython and see if I can make it work too...

Best regards,

Alexandre Villares

---
Resources for teaching programming to artists, designers and architects
https://github.com/villares/Resources-for-teaching-programming
https://docs.google.com/spreadsheets/d/1zXnO8fMvNyfBeddSDhuq_ymcMrSKFYuf3pjzynkoD5w/pubhtml

[Kiko]

2016-05-09 5:56 GMT+02:00 Alexandre Villares <ab...@lugaralgum.com>:

Hi,

The Processing Foundation (http://processing.org) has two new projects besides the traditional Processing platform, based on Java:
1 - Processing Python Mode (http://py.processing.org), based on Jython.
2 - p5*js (http://p5js.org), based on JavaScript.
(not to be confused with ProcessingJS that tries to convert Java code into JavaScript and is used in Skulpt, like in https://trinket.io/processing)

Processing Python Mode is lovely but makes it harder to share 'sketches' online.
As an educator without enough technical knowledge, I would like to find anyone using p5*js on Brython and see if I can make it work too...

After looking a bit to p5js (cool lib) and some "duckduckgoing" I found a way to make it work. Have a look to the following link:
http://jsfiddle.net/a3q5kzqf/1/

I just tested the example here: https://github.com/processing/p5.js/wiki/p5.js-overview#instantiation--namespace

The way how the lib (p5js) is constructed it could be cool to create some fast animations/art/... but it is not evident how to wrap up with brython. Try to use it and let us know when you find more problems...

Best.

 

Best regards,

Alexandre Villares

---
Resources for teaching programming to artists, designers and architects
https://github.com/villares/Resources-for-teaching-programming
https://docs.google.com/spreadsheets/d/1zXnO8fMvNyfBeddSDhuq_ymcMrSKFYuf3pjzynkoD5w/pubhtml

--
You received this message because you are subscribed to the Google Groups "brython" group.
To unsubscribe from this group and stop receiving emails from it, send an email to brython+u...@googlegroups.com.
To post to this group, send email to bry...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/brython/1350daa6-48ad-4957-a4cb-ccefeb286fc6%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[Alexandre B A Villares]

Thanks Kiko!

I'll have a look!

AV

You received this message because you are subscribed to a topic in the Google Groups "brython" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/brython/gAAtzh7WtJU/unsubscribe.
To unsubscribe from this group and all its topics, send an email to brython+u...@googlegroups.com.

To post to this group, send email to bry...@googlegroups.com.

To view this discussion on the web visit https://groups.google.com/d/msgid/brython/CAB-sx62MRpzUb9tOnP7zW2ZyVMKM2qy7_O3B7cGwyd1ZhAtpWQ%40mail.gmail.com.

[Stu.Axon]

Wrapping p5js, as skulpt does is probably the sane route, though making an API compatible with processing python mode might be wise.

Since process python mode is jython, it's not worth trying to link to it from the browser, it may well be worth taking code from though.


It's also worth looking at nodebox, which is a python-y creative coding thing + seeing if any libraries can be integrated - outside of the web I was able to get a POC of this working some time back

http://www.stuartaxon.com/2010/02/10/processing-with-jython-and-nodeboxshoebot-libraries/

[Disclaimer: I am one of the devs on Shoebot, a python creative coding environment compatible with Nodebox]

[Alexandre B A Villares]

Hi Stu,

Thanks for the reply! I'm afraid it is a bit beyond my technical skills to make it work...

Shoebot seems wonderful, I'll have a look at it too!

Cheers,

Alexandre

---
Resources for teaching programming to artists, designers and architects
https://github.com/villares/Resources-for-teaching-programming
https://docs.google.com/spreadsheets/d/1zXnO8fMvNyfBeddSDhuq_ymcMrSKFYuf3pjzynkoD5w/pubhtml

To view this discussion on the web visit https://groups.google.com/d/msgid/brython/f5e083f7-fb97-4ce6-8347-55f516a49a3e%40googlegroups.com.

[Alexandre Villares]

Lo and behold.Very cool indeed Kiko!

I'll try and post something.
http://jsfiddle.net/villares/g2sL3eza/
If we could only get rid of "p."...

Cheers,
Alexandre

---
http://villares.garoa.club

On Monday, 9 May 2016 06:15:15 UTC-3, kiko (on pybonacci) wrote

[Kiko]

2016-06-02 22:23 GMT+02:00 Alexandre Villares <ab...@lugaralgum.com>:

Lo and behold.Very cool indeed Kiko!

I'll try and post something.
http://jsfiddle.net/villares/g2sL3eza/
If we could only get rid of "p."...

Well done!!!

The 'p.' stuff is the way how p5js is built. I've never used p5js before but If I can find the time I will have a look into it to try to understand better how it works and make a workaround for the 'p.' issue.

 

--
You received this message because you are subscribed to the Google Groups "brython" group.
To unsubscribe from this group and stop receiving emails from it, send an email to brython+u...@googlegroups.com.
To post to this group, send email to bry...@googlegroups.com.

To view this discussion on the web visit https://groups.google.com/d/msgid/brython/732ac4e1-02c1-422d-a068-13cd80f112da%40googlegroups.com.

[Jeremy Chen]

Hi,

I try to create an local version but it doesn't work. I'm new to Brython. where is the problem?

Thanks!

<html>
<head>

</head>
<body onload="brython(1)">
<script type="text/python">
from browser import document, window, alert
from javascript import JSConstructor


def sketch(p):
   
    def setup():
        p.createCanvas(700, 410)
        p.background(0)
        p.rectMode(p.CENTER)

    def draw():
        # p.background(0)
        p.fill(255,255,0,128)
        p.ellipse(p.mouseX,p.mouseY,50,50)

    def mousePressed():
        p.background(0)

        p.setup = setup
        p.draw = draw
        p.mousePressed = mousePressed

myp5 = JSConstructor(window.p5)(sketch)
</script>
    <script type="text/javascript"
    src="https://cdn.rawgit.com/brython-dev/brython/master/www/src/brython.js">
    </script>
    <script src="https://cdn.rawgit.com/brython-dev/brython/master/www/src/brython_stdlib.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.11/addons/p5.dom.js"></script>
</body>
</html>

http://jsfiddle.net/villares/g2sL3eza/

[Pierre Quentel]

Le dimanche 25 juin 2017 14:12:38 UTC+2, Jeremy Chen a écrit :

Hi,

I try to create an local version but it doesn't work. I'm new to Brython. where is the problem?

The 3 lines starting with p.setup = setup are not correctly indented, and you don't seem to load p5.js.

[Alexandre B A Villares]

I think Pierre nailed it. Jeremy, try once more...

<script src="//cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.0/p5.js"></script>

[Pierre Quentel]

BTW, you shouldn't use JSConstructor any more (there must be a deprecation message in the console), replace it by :
 

myp5 = window.p5.new(sketch)

[Alexandre B A Villares]

Thanks Pierre!

Updated my Kiko inspired proof of concept :)
http://jsfiddle.net/villares/g2sL3eza/

Can you see a way forward on the ugly "p." namespace issue?

Cheers,

Alexandre

---

http://villares.garoa.club

--

You received this message because you are subscribed to a topic in the Google Groups "brython" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/brython/gAAtzh7WtJU/unsubscribe.

To unsubscribe from this group and all its topics, send an email to brython+unsubscribe@googlegroups.com.

To post to this group, send email to bry...@googlegroups.com.

To view this discussion on the web visit https://groups.google.com/d/msgid/brython/112884cf-f8b7-4b8d-bd26-7119f6066811%40googlegroups.com.

[Kiko]

2017-06-26 14:58 GMT+02:00 Alexandre B A Villares <ab...@lugaralgum.com>:

Thanks Pierre!

Updated my Kiko inspired proof of concept :)
http://jsfiddle.net/villares/g2sL3eza/

Pretty cool, congrats!!!!

 

Can you see a way forward on the ugly "p." namespace issue?

Could you explain this a little bit more?

It is the way the lib is built...

 

--

You received this message because you are subscribed to the Google Groups "brython" group.

To unsubscribe from this group and stop receiving emails from it, send an email to brython+unsubscribe@googlegroups.com.

To post to this group, send email to bry...@googlegroups.com.

To view this discussion on the web visit https://groups.google.com/d/msgid/brython/CAB8GTf1NF9riG5QbV%3DE_mKSpkVBqLX9Mmc-bF8MrcG1N8U8Yjw%40mail.gmail.com.

[Alexandre B A Villares]

2017-06-26 14:58 GMT+02:00 Alexandre B A Villares <ab...@lugaralgum.com>:

Thanks Pierre!

Updated my Kiko inspired proof of concept :)
http://jsfiddle.net/villares/g2sL3eza/

Pretty cool, congrats!!!!

 

Can you see a way forward on the ugly "p." namespace issue?

Could you explain this a little bit more?

It is the way the lib is built...

Cheers Kiko!

Yeah, I know... This is the further  I could think of... I wish I could create some kind of helper-wrapper...  http://jsfiddle.net/villares/yyofag0o/

<script src="http://www.brython.info/src/brython_dist.js"></script>

<script src="//cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.0/p5.js"></script>
<script type="text/python">

# brython + p5js.org adapted from code from Kiko Correoso
# with correction from Pierre Quentel

from browser import document, window, alert

def sketch(p):

    def setup():
        createCanvas(700, 410)
        background(0)
        rectMode(CENTER)
   
    def draw():
       # background(0)
        fill(255,255,0,128)
        rect(p.mouseX,p.mouseY,50,50)
   
    def mousePressed():

        background(0)
   
    p.setup = setup
    p.draw = draw
    p.mousePressed = mousePressed

    createCanvas = p.createCanvas    
    background = p.background
    rectMode = p.rectMode
    CENTER = p.CENTER
    rect = p.rect
    ellipse = p.ellipse
    fill = p.fill

myp5 = window.p5.new(sketch)
</script>