A Free P5 Python Online Editor with Live Edit | Designed For Teachers and Students Learning to Code | Strive Editor Alpha

Teaching
1

https://code.strivemath.com/ is a free-to-use online code editor for writing p5 code in Python. It comes with built-in live edit features (No login is needed to use Live Edit) and many functions to help teachers explain coding concepts.

Note: This is a very early Alpha version of the Strive Editor; we’re releasing this as proof of concept and to get feedback from the community. So don’t be surprised if you get some strange, unexpected errors.

Live Edit in Python without needing to log in

live_edit

Functions to help teachers explain coding concepts

teacher_funcs

We have a whole library of utility functions we’re developing at GitHub - StriveMath/p5.learn.js: p5.learn.js is a library for p5.js developed by Strive to aid in teaching coding Some of these include

  • Flexibility with the handedness of the coordinate systems in 2D and 3D.
  • Grids in 2D and 3D drawTickAxes() and draw3DAxes()
  • crosshair() tool to locate the mouse easily
  • die() draws a single die that displays a number 1-6
  • responsiveText() draws text positioned upwards and rightwards independent of rotation and scale.
  • drawVector() draws a vector from a point with optional dash rendering.
  • createMovableCircle() ****creates a circle that users can drag about the canvas with their mouse.
  • drawBarGraph() draws a simple bar graph given an Array of data.
  • Time-developing functions to go back and forth between two values, either sinusoidal oscillation with wave() or triangular oscillation with bounce()

Highly detailed kid-friendly docs

See https://learnpython.strivemath.com/ for more.

For the most common p5 commands, we’ve made highly detailed and visual docs to help students learn the basics and find help on their questions.

docs

Roadmap

We have a few ideas that we’re planning on working on in the future and would love to hear from you about which of these features would be the most useful.

  • Block-based coding with live edit.
  • Developing tons of free educational content that could either support teachers or be used by students independently. See this video as an example: https://youtu.be/PdQyJ5v_EyM
  • Support for lesson plans and notes in the editor.
  • AI code assistant/tutor.
  • Classroom management tools for managing multiple students.
  • Coding portfolios

With code.strivemath.com, we’ve launched p5-python-web (run p5 python in the browser and p5.teach.js (utility functions to help teachers). See this forum post for more information

Feedback?

10 Likes
2

Feature request: Switch between JavaScript and Python would love to have live edit for vanilla p5js

4 Likes
3

@Tammy thats definitely on the roadmap!

2 Likes
4

Great Efforts into enhancing the tools available for Math teachers. :smiley:

1 Like
5

Can you import other Python libraries like numpy or matplotlib?

1 Like
6

Great progress y’all! I have one suggestion. 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?

1 Like
7

@georgefernandez we haven’t tested it in the editor yet, but Skulpt does have support for these libraries and there are a few community projects building on these: GitHub - ebertmi/skulpt_matplotlib: Partial matplotlib pyplot implementation for skulpt GitHub - ebertmi/skulpt_numpy: Partial numpy implementation for skulpt

8

Hi everyone :wave: I’m Maxim, one of the lead developers on the code editor. I’ve taught creative coding for the last few years on my YouTube channel and in many workshops. I’ve always wanted the ability to collaborate in real-time with my students and always felt Python is a better language for beginners which is why I am so excited about this alpha launch. Looking forward to hearing your feedback, and please feel free to reach out with any questions.

1 Like
9

I can’t wait to try this!

10

I tried it, and loved it… here’s my hack :slight_smile: https://code.strivemath.com/projects/051fd498-360d-4b5d-ab21-798286567cfc?live_id=strive-OJCH29

a bit of feedback… it’s a bit unclear what save does, in that it seems to

a. Refresh the screen which scares you that it’s lost all your code, then b. generate a new file (with a new cute name)…

Why did you reverse the y axis… is that a python thing or just an arbitrary decision?

Great work… I could well imagine using this with a class.

Tom

11

Hi Tom, I agree with you about the reversed Y axis and it’s something I noticed immediately too, and it goes against all computer graphics programming traditions. I suspect it suits maths better. I wonder if there could be a setting in the options (which current just has font size) so we can toggle between computing axis and maths axis modes?

1 Like
12

My precalculus students suggested reversing the y-axis in a similar environment that I created with them, and that design decision made its way to this environment. A small group of us would meet on Fridays to plan/debrief coding lessons, debug a hacked version of the p5 Editor we were using, and preview ideas from calculus. They formed a consensus that their classmates would benefit from a right-handed coordinate system, so I implemented it.

You can switch back to the computer graphics standard by calling coordinateMode(TOP_LEFT). I believe it used to be coordinateMode(LEFT_HAND).

2 Likes
13

This looks great! I love the inclusion of step-by-step illustrated tutorials.

One tiny UX thing that bugged me, it’s easy to overshoot when trying to reach the play button and accidentally trigger the dropdown by hovering on “new”, with the dropdown menu then covering the play button. This could be fixed either by having the “New: simple mode” and “New AI chat” be two separate buttons, or by having the dropdown not automatically open on hover but on click only.

1 Like