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.
Is there a way to create actual mobile apps in p5.js?
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.
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.
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.
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.
@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
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
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.
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.
Hi Maggie, could you give an update of how the course went? I would really like to know.
I have been asked by my school to teach a bit of coding to my 17/18 year old students. I have mainly used P5.js to create games and applications in Javascript. Once they got the hang of JS, HTML, CSS I set them some challenges to build applications/games by giving them a brief.
I ended up using CodeHS for my Mobile App Development course. However, I used p5.js all year for my Programming classes, and it was wonderful! I was able to easily introduce OOP second semester, and I could have done it before that. We didnāt do full-blown games, but we did a lot of mouse interaction and object interaction projects that were heading in that direction. I would love to hear more about what youāve done with it.
I have been teaching some things to my 11 year olds the last few week. I made a simple game where you have to dodge a box scrolling down the screen. The box speeds up each time. I have two versions of the file, the complete version which I use to remind me what code to type, and a student version which they can duplicate and write in the code to make the game.
Teacher version = p5.js Web Editor
Student version = p5.js Web Editor
I basically made one class that they interact with. I got a little minion guy as the main box, and that can be easily changed. I think your students would enjoy that.
I also got my much older (17/18 year old) students to make the same game from scratch as a coding challenge. Some of them are not brilliant at maths, but they understand the basics of OOP. To differentiate the lesson I provided a guide of what functions they will need in order to complete the game. They can choose whether to use it or not. The file is a PDF file, unfortunately I canāt upload it to the forum, but I can email it you if you like.
