# An Open Source Browser-Based Implementation of P5-Python and a Utility Library for Helping Teachers Explain Concepts in P5

**URL:** <https://discourse.processing.org/t/an-open-source-browser-based-implementation-of-p5-python-and-a-utility-library-for-helping-teachers-explain-concepts-in-p5/41839>\
**Category:** Teaching\
**Created:** [April 27, 2023, 1:03am UTC](https://discourse.processing.org/t/an-open-source-browser-based-implementation-of-p5-python-and-a-utility-library-for-helping-teachers-explain-concepts-in-p5/41839 "2023-04-27T01:03:44Z")\
**Posts on this page:** 7\
**Page:** 1

<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:** [April 27, 2023, 1:03am UTC](https://discourse.processing.org/t/an-open-source-browser-based-implementation-of-p5-python-and-a-utility-library-for-helping-teachers-explain-concepts-in-p5/41839/1 "2023-04-27T01:03:44Z")

</div>

- [GitHub - StriveMath/p5-python-web: p5-python-web lets you run p5.js sketches written in Python on the web!](https://github.com/StriveMath/p5-python-web) Is a Python execution context with [p5.js](https://github.com/processing/p5.js) bindings. It uses [Skulpt](https://github.com/skulpt/skulpt)  
to execute p5.js sketches written in Python. Its dynamic bindings allow for any p5.js library to be used as well.
- [GitHub - StriveMath/p5.learn.js: p5.learn.js is a library for p5.js developed by Strive to aid in teaching coding](https://github.com/StriveMath/p5.teach.js) is a library designed to help teachers better explain programming concepts. It extends p5.js with a bottom left coordinate mode mimicking the standard mathematical setup where coordinate (0,0) is in the bottom left, and the y-axis moves upwards. It also adds functions for drawing tick axes, graphs, arrows and more.

These libraries are the backbone of our P5 Python Online Code Editor with Live Edit [https://code.strivemath.com/](https://code.strivemath.com/). See this forum post announcing the editor: [A Free P5 Python Online Editor with Live Edit | Designed For Teachers and Students Learning to Code | Strive Editor Alpha - #3 by StriveMath](https://discourse.processing.org/t/a-free-p5-python-online-editor-with-live-edit-designed-for-teachers-and-students-learning-to-code-strive-editor-alpha/41840/3)

![live_edit](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/9/5/95f46975e3ddb46c761dd78721d40b1de79c0ecc.gif)

**Why did we make P5-Python-Web?**

- Python is an easier language for beginners to learn than JavaScript.
- By making it a browser based students don’t need to instal Python and can more easily use browser-based editors like [https://code.strivemath.com/](https://code.strivemath.com/) and [repl.it](http://repl.it) to get started with coding with little friction.
- Education systems globally are defaulting to Python as the language of choice for teaching students to code, both in university and school. We believe p5 has incredible potential to be **the** library that makes coding fun and engaging for new students, so enabling p5 to be used and taught in Python will help increase its adoption and popularity.

**Why did we make p5.teach.js**

At [https://www.strivemath.com/](https://www.strivemath.com/) we’ve taught more than 1000+ kids over the past two years, and we’ve noticed the same pattern come up again and again. Kids get confused by a top left coordinate system when they’re used to the one taught in math class—kid’s struggle to understand the coordinate system.

We’ve seen these use cases and many others come up countless times, so we created a utility library to help teachers.

![Untitled](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/f/e/fe0ada24939070d78e32f883e8b3b4adfe31b1c1.gif)

We’ve designed p5.teach.js to work with p5-python-web, but it will work with regular JavaScript as well.

## Roadmap

This project is open source under the Apache licence, so we’re excited to work with the community to make both libraries more robust and feature packed.

- Integrating p5 play into both libraries [https://p5play.org/](https://p5play.org/)
- Integrating into Jupyter Notebook like environments
- More utility functions for teachers and students.

## Thank yous

- The initial idea was made possible by @mcintyre
- Skulpt: [https://skulpt.org/](https://skulpt.org/)

## Feedback?

- Leave a comment on this thread.
- Fill in our feedback form [Strive Editor Feedback Form](https://forms.gle/XSiHAmxB9dysmGxa7)

---

<div class="post-metadata">

**Author:** ![Ibrahim\_17](https://avatars.discourse-cdn.com/v4/letter/i/ea666f/32.png) [@Ibrahim\_17](https://discourse.processing.org/u/Ibrahim_17)\
**Post date:** [April 27, 2023, 1:32am UTC](https://discourse.processing.org/t/an-open-source-browser-based-implementation-of-p5-python-and-a-utility-library-for-helping-teachers-explain-concepts-in-p5/41839/2 "2023-04-27T01:32:36Z")

</div>

**Great Efforts**. 😃

---

<div class="post-metadata">

**Author:** ![Jithin](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jithin/32/122_2.png) [@Jithin](https://discourse.processing.org/u/Jithin)\
**Post date:** [April 27, 2023, 2:16am UTC](https://discourse.processing.org/t/an-open-source-browser-based-implementation-of-p5-python-and-a-utility-library-for-helping-teachers-explain-concepts-in-p5/41839/3 "2023-04-27T02:16:28Z")

</div>

Awesome tool. A live editor for p5 python will be of immense use for the teaching learning community. Thanks for developing this.

---

<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:** [April 27, 2023, 2:36am UTC](https://discourse.processing.org/t/an-open-source-browser-based-implementation-of-p5-python-and-a-utility-library-for-helping-teachers-explain-concepts-in-p5/41839/4 "2023-04-27T02:36:52Z")

</div>

Thank you @Jithin; excited to get the community to help in building new features for these libraries 🚀

---

<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:** [April 27, 2023, 2:52am UTC](https://discourse.processing.org/t/an-open-source-browser-based-implementation-of-p5-python-and-a-utility-library-for-helping-teachers-explain-concepts-in-p5/41839/5 "2023-04-27T02:52:47Z")

</div>

Great progress y’all! I have one suggestion. [p5.teach.js](https://github.com/two-ticks/p5.teach.js) is a library that @two.ticks developed during GSoC a couple of years ago. The name collision seems avoidable–maybe go with p5.learn.js or something specific to math education?

---

<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:** [April 27, 2023, 2:59am UTC](https://discourse.processing.org/t/an-open-source-browser-based-implementation-of-p5-python-and-a-utility-library-for-helping-teachers-explain-concepts-in-p5/41839/6 "2023-04-27T02:59:01Z")

</div>

Aaaa, thanks for the heads up @mcintyre ye p5.learn might be a good alternative. I’ll chat with the team about options and see what we can come up with 🙏

---

<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:** [April 27, 2023, 1:01pm UTC](https://discourse.processing.org/t/an-open-source-browser-based-implementation-of-p5-python-and-a-utility-library-for-helping-teachers-explain-concepts-in-p5/41839/7 "2023-04-27T13:01:44Z")

</div>

Fantastic project. Well done to all involved! I’ll be watching this one closely.