P5.js or Processing for Education?

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

1 Like

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

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.

3 Likes

My preference for teaching is Python Mode for Processing (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.

5 Likes

I plan to teach creative coding in one of my high school CS classes using Trinket. 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.

I’ve thought about mimicking their approach to wrapping Processing.js (which is archived) so that I can teach with Python + p5.js moving forward. Curious if that would be of use to anyone else.

7 Likes

@mcintyre – there are some interesting developments in this space, running pyp5js on pyodide. You can check out this demo. You’ll have to use p5.js-style-code, something like:

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!

3 Likes

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

2 Likes

@tabreturn here is a simple Pyodide example running on Glitch and repl.it. I will test this out with students next semester.

3 Likes

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

1 Like

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

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 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.

3 Likes

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.

Here is my fork 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?

4 Likes

that would be wonderful!

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://d3js.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.

1 Like

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:

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

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

3 Likes

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

1 Like

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, an online based coding environment for younger kids based also on p5.js.

The good part with 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.

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

2 Likes