# P5.js or Processing for Education?

**URL:** <https://discourse.processing.org/t/p5-js-or-processing-for-education/25347>\
**Category:** Teaching\
**Created:** [November 11, 2020, 4:37pm UTC](https://discourse.processing.org/t/p5-js-or-processing-for-education/25347 "2020-11-11T16:37:13Z")\
**Posts on this page:** 16\
**Page:** 1

<div class="post-metadata">

**Author:** ![vaides](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/vaides/32/11067_2.png) [@vaides](https://discourse.processing.org/u/vaides)\
**Post date:** [November 11, 2020, 4:37pm UTC](https://discourse.processing.org/t/p5-js-or-processing-for-education/25347/1 "2020-11-11T16:37:13Z")

</div>

Hi i have a question related this topic.  
which one of these 2 tools would you recommend for educational porposes for high school 15/18 years old students.  
I think that p5j could be easier but i’m afraid there is not real language.  
what is your experience?  
Thanks in advance  
veronica

---

<div class="post-metadata">

**Author:** ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)\
**Post date:** [November 11, 2020, 6:03pm UTC](https://discourse.processing.org/t/p5-js-or-processing-for-education/25347/2 "2020-11-11T18:03:57Z")

</div>

> [@vaides](#):
>
> I think that p5js could be easier; but I’m afraid that is not a real language.

The library p5js is a flavor of Processing targeting the JS language.

> [@vaides](#):
>
> Which one of these 2 tools would you recommend for educational purposes…

Processing’s flavor p5\*js got the biggest upper hand b/c it runs inside browsers.

Although if we use just the bare Processing API we can deploy sketches coded on its Java Mode to run on a browser too via Pjs (which is another flavor targeting JS btW).

The strongest advantage Processing’s Java Mode main flavor got is debugging.

Debugging in JS is much harder than debugging in Java.

---

<div class="post-metadata">

**Author:** ![tabreturn](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/tabreturn/32/3697_2.png) [@tabreturn](https://discourse.processing.org/u/tabreturn)\
**Post date:** [November 11, 2020, 8:10pm UTC](https://discourse.processing.org/t/p5-js-or-processing-for-education/25347/3 "2020-11-11T20:10:31Z")

</div>

My preference for teaching is [Python Mode for Processing](https://py.processing.org/) (Processing.py). Python is an excellent language for anybody learning to write code for the first time. It reads more like English, and you can avoid having to explain smaller details (syntax, strict types, etc.) that are important in other languages.

But – you’re likely to get different recommendations depending on who you ask. Any Processing variant works well for educational purposes; you’ll have to determine what best suits your students and particular learning objectives.

---

<div class="post-metadata">

**Author:** ![mcintyre](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/mcintyre/32/14561_2.png) [@mcintyre](https://discourse.processing.org/u/mcintyre)\
**Post date:** [November 12, 2020, 1:16am UTC](https://discourse.processing.org/t/p5-js-or-processing-for-education/25347/4 "2020-11-12T01:16:43Z")

</div>

I plan to teach creative coding in one of my high school CS classes using [Trinket](https://trinket.io). They let you run a variant of Python Mode for Processing in the browser, so maybe the best of all worlds. Their free tier is solid.

Here is an [example sketch](https://trinket.io/python/dbe536e368).

I’ve thought about mimicking their approach to [wrapping Processing.js](https://github.com/trinketapp/processing.sk) (which is archived) so that I can teach with Python + p5.js moving forward. Curious if that would be of use to anyone else.

---

<div class="post-metadata">

**Author:** ![tabreturn](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/tabreturn/32/3697_2.png) [@tabreturn](https://discourse.processing.org/u/tabreturn)\
**Post date:** [November 12, 2020, 1:38am UTC](https://discourse.processing.org/t/p5-js-or-processing-for-education/25347/5 "2020-11-12T01:38:20Z")

</div>

@mcintyre – there are some interesting developments in this space, running [pyp5js](https://github.com/berinhard/pyp5js) on [pyodide](https://github.com/iodide-project/pyodide/). You can check out [this demo](https://berinhard.github.io/pyp5js/pyodide/). You’ll have to use _p5.js_-style-code, something like:

```auto
def setup():
    createCanvas(500, 500)

def draw():
    square(50, 50, 50)
    ...

```

There’s no full-featured editor yet (for saving sketches, a debugger, etc.). Early days. But exciting to see!

---

<div class="post-metadata">

**Author:** ![mcintyre](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/mcintyre/32/14561_2.png) [@mcintyre](https://discourse.processing.org/u/mcintyre)\
**Post date:** [November 12, 2020, 2:04am UTC](https://discourse.processing.org/t/p5-js-or-processing-for-education/25347/6 "2020-11-12T02:04:10Z")

</div>

Whoaa this is awesome! p5.js with NumPy and friends is a dream for my math classes.

---

<div class="post-metadata">

**Author:** ![mcintyre](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/mcintyre/32/14561_2.png) [@mcintyre](https://discourse.processing.org/u/mcintyre)\
**Post date:** [December 20, 2020, 6:00pm UTC](https://discourse.processing.org/t/p5-js-or-processing-for-education/25347/7 "2020-12-20T18:00:57Z")

</div>

@tabreturn here is a simple Pyodide example running on [Glitch](https://glitch.com/edit/#!/pyp5js-starter?path=sketch.py%3A1%3A0) and [repl.it](https://repl.it/@NickMcIntyre/pyp5js-starter#sketch.py). I will test this out with students next semester.

---

<div class="post-metadata">

**Author:** ![tabreturn](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/tabreturn/32/3697_2.png) [@tabreturn](https://discourse.processing.org/u/tabreturn)\
**Post date:** [December 20, 2020, 8:38pm UTC](https://discourse.processing.org/t/p5-js-or-processing-for-education/25347/8 "2020-12-20T20:38:55Z")

</div>

This is great! I particularly liked the _repl.it_ version. I had to use the browser console to view `print()` lines in _Glitch_? Please let me know how it goes with the students.

CC: @villares

---

<div class="post-metadata">

**Author:** ![villares](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/villares/32/3166_2.png) [@villares](https://discourse.processing.org/u/villares)\
**Post date:** [December 20, 2020, 9:00pm UTC](https://discourse.processing.org/t/p5-js-or-processing-for-education/25347/9 "2020-12-20T21:00:02Z")

</div>

Whoa @mcintyre ! Thanks @tabreturn for tagging me! I’m sure to have a look!  
Bernardo Fontes ([github.com/berinhard/pyp5js](http://github.com/berinhard/pyp5js)) will be so happy with this!

---

<div class="post-metadata">

**Author:** ![berin](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/berin/32/11510_2.png) [@berin](https://discourse.processing.org/u/berin)\
**Post date:** [December 21, 2020, 2:10pm UTC](https://discourse.processing.org/t/p5-js-or-processing-for-education/25347/10 "2020-12-21T14:10:15Z")

</div>

Hi everyone! Thanks for mentioning and experimenting with pyp5js! For me it’s really an honor to know the project is being used and handful to other people.

As the project’s creator I know I’m a suspicious person to talk about it, but pyp5js future with pyodide support looks promising. @villares has been very helpful testing this demo and making sure that it works. We’ve already tracked down a few bugs that will be fixed after the final pyodide support implementation.

You can follow [this PR](https://github.com/berinhard/pyp5js/pull/133) to keep update about this new feature. Today we’ll have an open sprint with a few friends from DojoRio (Rio de Janeiro’s local Coding Dojo community group) to keep on with this work. We’ll be online in [this Discord server](https://discord.gg/9BcVCDxFZT).

---

<div class="post-metadata">

**Author:** ![mcintyre](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/mcintyre/32/14561_2.png) [@mcintyre](https://discourse.processing.org/u/mcintyre)\
**Post date:** [December 31, 2020, 12:46am UTC](https://discourse.processing.org/t/p5-js-or-processing-for-education/25347/11 "2020-12-31T00:46:06Z")

</div>

I decided to tinker with an editor for pyp5js today and… several cups of coffee later… got a slightly modified version of the p5.js Web Editor running at [https://editor.computiful.org](https://editor.computiful.org).

Here is [my fork](https://github.com/mcintyrelabs/p5.js-web-editor/tree/python) with the changes. I haven’t enabled all functionality yet (i.e., no Google/GitHub login or media uploads). Also need to open an issue about updating the Heroku deploy process to use MongoDB Atlas.

What do y’all think about a Python Mode for the p5.js Web Editor?

---

<div class="post-metadata">

**Author:** ![villares](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/villares/32/3166_2.png) [@villares](https://discourse.processing.org/u/villares)\
**Post date:** [December 31, 2020, 12:53am UTC](https://discourse.processing.org/t/p5-js-or-processing-for-education/25347/13 "2020-12-31T00:53:59Z")

</div>

> [@mcintyre](#):
>
> What do y’all think about a Python Mode for the p5.js Web Editor?

that would be **wonderful**!

---

<div class="post-metadata">

**Author:** ![StriveMath](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/strivemath/32/11141_2.png) [@StriveMath](https://discourse.processing.org/u/StriveMath)\
**Post date:** [January 7, 2021, 6:11am UTC](https://discourse.processing.org/t/p5-js-or-processing-for-education/25347/14 "2021-01-07T06:11:36Z")

</div>

Going to throw a different voice into the mix here. I think javascript is the best language not only to learn for a beginner but will also be by far the easiest for teaching p5js.

Why?

1. Javascript is the most used programming language in the world, meaning there are more community projects and educational resources than any other language
2. Can easily run on a browser, no setup or wrappers required like is needed for Python.
3. Great tools like [https://mathjs.org/](https://mathjs.org/) [https://d3js.org/](https://d3js.org/) [https://www.chartjs.org/](https://www.chartjs.org/) that easily integrate

Well aware Python could be considered more beginner-friendly so keen to hear challenges to my points above.

---

<div class="post-metadata">

**Author:** ![villares](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/villares/32/3166_2.png) [@villares](https://discourse.processing.org/u/villares)\
**Post date:** [January 7, 2021, 12:29pm UTC](https://discourse.processing.org/t/p5-js-or-processing-for-education/25347/15 "2021-01-07T12:29:47Z")

</div>

Hi @StriveMath,

I’m sure you can be very successful teaching with Javascript, and it has many advantages as you pointed, but in my personal experience as educator I have found that JS has many things that weight against it for me and I avoid it:

- inconsistent behavior for the beginner, much of it related to implicit type conversion
- too many silent errors, harder to debug than Python (maybe I’m not skilled enough to use it?)
- very complex binding model (specially in OO) [Getting Out of Binding Situations in JavaScript – A List Apart](https://alistapart.com/article/getoutbindingsituations/)

As for popularity and resources, depending on your framing I’d say Python is overwhelmingly more used in education. Javascript hardly appeared on top CS1 courses at this survey by Philip Guo [https://cacm.acm.org/blogs/blog-cacm/176450-python-is-now-the-most-popular-introductory-teaching-language-at-top-u-s-universities/fulltext](https://cacm.acm.org/blogs/blog-cacm/176450-python-is-now-the-most-popular-introductory-teaching-language-at-top-u-s-universities/fulltext)

Caveat: I’m also probably biased by my teaching interests and communities that I interact with. For Architecture, Digital Fabrication, Type Design, there are many tools with Python built in, few with JS, as I tentatively tried to map on this 2017 paper: [Python on the Landscape of Programming Tools for Design and Architectural Education](https://www.proceedings.blucher.com.br/article-details/python-on-the-landscape-of-programming-tools-for-design-and-architectural-education-27628)

---

<div class="post-metadata">

**Author:** ![StriveMath](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/strivemath/32/11141_2.png) [@StriveMath](https://discourse.processing.org/u/StriveMath)\
**Post date:** [January 9, 2021, 8:53am UTC](https://discourse.processing.org/t/p5-js-or-processing-for-education/25347/16 "2021-01-09T08:53:00Z")

</div>

Really good and fair points. It’s awesome that you have published a research paper looking at the Python ecosystem for education.

---

<div class="post-metadata">

**Author:** ![codeguppy](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/codeguppy/32/8322_2.png) [@codeguppy](https://discourse.processing.org/u/codeguppy)\
**Post date:** [July 31, 2021, 4:48pm UTC](https://discourse.processing.org/t/p5-js-or-processing-for-education/25347/17 "2021-07-31T16:48:56Z")

</div>

I would go for p5.js for this age group.

In case you are teaching also younger kids, I would recommend to check [codeguppy.com](https://codeguppy.com), an online based coding environment for younger kids based also on p5.js.

 ![led-matrix](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/9/9d860220f446626c58af6eaa39b245ccc105088f.png)

The good part with [codeguppy.com](https://codeguppy.com) is that is it offers transition to plain p5.js sketches when kids will outgrow the online environment.

Update: There is even a physical book available for teaching coding using creative codign and [codeguppy.com](http://codeguppy.com).

 ![book_cover](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/9/91955996a5eb2cbfef0e56c4dde64966efdd6aea.jpeg)

You can get it from Amazon US and Amazon UK (search codeguppy on amazon).