From p5.js to PhET

[Alberto Corbi]

Dear PhET community, 

I was wondering if you could shine some light on how would you "translate" a p5.js simulation to PhET. For instance, this simple sketch just shows a "shower of particles" and how they move in time: 

https://editor.p5js.org/codingtrain/sketches/QRzgzQLnQ

Which would be the best strategy towards PhET-izing such a small project?

Thanks beforehand. 

[cmalley]

I did a quick translation of your example. It appears as a new "Particles" screen in PhET's example-sim, see https://github.com/phetsims/example-sim. The code for this screen is in https://github.com/phetsims/example-sim/js/particles. It's 5 .js files, so it should be relatively simple to compare to your example. Sorry that it's not an exact port of your example. I couldn't resist fixing/improving a few things, since this will hopefully be useful to the PhET community.

My general strategy in doing this translation was to separate things into model and view classes, following the general principles of the MVC (Model View Controller) design pattern.  In a PhET sim, the model is typically classes containing one or more Property instances. The view is typically a scenery Node that observes the model Properties, and changes the view to match the state of the model.

I'm going to be unavailable to answer questions for the remainder of June. But if you have specific questions, post them here, and hopefully someone from the PhET community will respond.

Chris Malley

PixelZoom, Inc.

[cmalley]

Sorry, there's an error in my previous post.

The files of interest are at https://github.com/phetsims/example-sim/tree/master/js/particles.

When you clone example-sim locally, the files will be in example-sim/js/particles.

Chris Malley

PixelZoom, Inc.

[Alberto Corbi]

Dear Chris… 

I got tears in my eyes… thank sooooo much for taking the time to reproduce the p5 simulation entirely in PhET. You've been very very very kind.  

Warmest greetings from Spain. 

Alberto.

[cmalley]

Hi Alberto,

You're most welcome! Getting started with the PhET libraries can be a steep hill to climb. I hope seeing how your p5 example translates to PhET/JavaScript is helpful. 

Chris Malley

PixelZoom, Inc.