Teacher looking for advice on Mobile App Development with p5.js or Processing for Android

Teaching
#1

Hello!

I am a US teacher planning to teach Mobile App Development. I had planned to use Processing for Android but had to change my plans due to COVID-19, and I am running into difficulties with p5.js.

I have two questions, and answering either one with a yes would solve my problem.

  1. Is there a way to create actual mobile apps in p5.js?
  2. Is there a way to use Processing for Android with a Chromebook?

Everything we do for class has to be able to be done in a Chromebook in case we have to go virtual again. This required me to change my plan of using Processing for Android (download only, as far as I can tell) on the school desktop computers.

However, it seems that the only option to run a p5.js sketch on mobile is either to connect to the p5.js IDE over shared WiFi or download Node.js to use localtunnel. Chromebooks canā€™t download anything, and Iā€™m concerned that the first option will cause problems when kids are on the school WiFi. Also, when trying to find the port number for my sketch, I canā€™t find it. Iā€™ve looked where the tutorial (https://creative-coding.decontextualize.com/mobile/) says, and even looked in the Developer Tools in Chrome.

Any ideas?

#2

Is this because it has a managed school ID?

#3

Itā€™s just what the school told us: everything has to be in a browser.

I actually have come up with an alternate solution that I think will work, but Iā€™d still love to hear suggestions in the vein of my original questions.

#4

@MaggieStrain ===

  • You can make js ā€œresponsiveā€ apps with p5JS for mobile, i have done that but it is not at all simple ( i can give you a giuide line for that)
  • as for your second question i finally decided to code with Dreamweaver: when you launch ā€œpreview in browserā€ it shows the result of your code of course on local side.
#5

Interesting! I havenā€™t taught mobile app development with p5.js but it seems doable.

My high school math and computer science students used the p5.js Editor on Chromebooks with no problems last year; you shouldnā€™t have any issues on that front.

Itā€™s straightforward to pin a website to a mobile deviceā€™s home screen so that it mimics an app. Your students could navigate to the address of their sketches using their mobile browser and pin the versions they want to test or show off to friends and family.

The p5.touchgui library may be helpful. Somewhere down the line you may even take a look at Ionic.

1 Like
#6

If you want to create real apps directly on the mobile, you could also use the APDE app, but it uses P5.java instead of P5.js

#7

@MaggieStrain === sorry, i have read your question too quickly; with P5JS you can create responsive web site or page but you cannot create an android app: for that and a chromebook you have to use Android studio; i dont know if it is possible to use P5 android mode with a chromebook neither if it is possible to use APDE.
more details here: https://developer.android.com/topic/arc/development-environment

#8

Hey there !

As I am aware there is currently no ā€˜wrapā€™ around P5.js to execute natively on an android device and thus it can only run within the browser.

On a chromebook it is safe to use P5.js within the browser ! No downloading is required.

#9

I will try to answer the first question because I have some experience with it.
I am trying to make an Android app so that we can run and code p5.js sketches directly on mobile without an internet connection. But thatā€™s not the point here :slight_smile:
You can indeed make mobile apps with p5.js and the funny part is you can do that with an Android device. Thereā€™s an app called Droidscript: https://www.google.com/url?sa=t&source=web&rct=j&url=http://droidscript.org/&ved=2ahUKEwjJm4zE3KfrAhUC63MBHSxUAbUQFjABegQIARAB&usg=AOvVaw3j9o9GNNVlQ32QRC9hrcst
You can use this to code Android app without any java knowledge. You can use HTML and JavaScript to make the apps. Which means it should be able to run any JavaScript libraries. And it does!!!
I hope it helped you in someway.

1 Like
#10

I appreciate all the responses. I decided to give up on the idea (for now) of specifically using Processing for the class, since I couldnā€™t seem to find a viable workaround. I will work on some of your suggestions this school year and see if I can come up with something that works for App Development 3/4 (2nd year class in my state). Iā€™m hoping that weā€™ll be in class all of next school year so I can download Processing for Android and be done with it.

Just in case you were wondering, here is what I decided on:

1 week on Code. org App Lab so that they get exposure to JavaScript and a viable way to work on prototypes for an app idea before they have the skills to do it from scratch. They will be able to work on an app idea of their own for one day a week, and can use App Lab for it as much as they like.

1 week ā€œplaying aroundā€ with p5.js in editor in their browser (I had figured out that it worked before anyone answered). This way they have another option for sketching out ideas, playing around with game mechanics, etc. I will also briefly introduce them to some of the big ideas of programming: loops, conditionals, etc. They can look at a bunch of examples and just get ideas.

The rest of the first semester divided up between a course on CodeHS on game development (really just doing the abbreviated JavaScript lessons and then they can work on the game projects in the course on their ā€œfreeā€ day), and a unit on Code. org on webpage design using HTML and CSS. This is to give them the JavaScript, HTML, and CSS background they need to complete another course second semester.

The second semester, they will work their way through a semester-long CodeHS course on App Development that requires a background in JavaScript, HTML, and CSS. It will teach them how to build an app from scratch and has an in-browser emulator program that also lets them download their apps onto either an Android or an Apple phone.

As I said, Iā€™m hoping to come back to my original idea of using only Processing for Android or a workaround using p5.js for the kids that do a second year of App Development.

1 Like