Where do I even start

[OH]

I want to make a simulator with water drops being propelled constantly from both sides of the screen like this. 

I have a few questions. 

1. Do I have to draw/desgin the assets used in the simualtor? 

2. Do I have to type all the javascript freshly myself? What are these files like "scenery", are they like libraries I can refer to to save me time from coding?

3. Where do I type my javascript code into? There are so many js files in my newly created simulator folder. 

Im a little overwhelmed.

All help would be insanly helpful.

[cmalley]

Start by thoroughly reading this post and all of its references : https://groups.google.com/g/developing-interactive-simulations-in-html5/c/jNXvJwkXj7k

> 1. Do I have to draw/desgin the assets used in the simualtor?

Yes. You (or a graphic designer) need to design and draw all image files.  You can also use image files from other PhET simulation repositories, if there is an existing image file that meets your requirements.  PhET libraries support images in PNG and JPEG formats.

 

> 2. Do I have to type all the javascript freshly myself? 

Yes. You need advanced knowledge of JavaScript, and you'll need to write a LOT of it.  To give you an idea of how much... I just completed a simulation of "Natural Selection", and it's 14,000 lines of JavaScript that is specific to that simulation.  PhET does provide tools for setting up the framework for a new simlation, see https://github.com/phetsims/phet-info/blob/master/doc/phet-development-overview.md#creating-a-new-sim, but that provides an "empty" simulation that you can start with.  You can also use code from other PhET sims, if you find something that meets your requirements.

> What are these files like "scenery", are they like libraries I can refer to to save me time from coding?

These are not files, they are GitHub repositories.  Yes, they are libraries of reusable code.  Each GitHub repository has a README file that summarizes what the library provides. For example, here's the README for scenery: https://github.com/phetsims/scenery/blob/master/README.md

> 3. Where do I type my javascript code into? There are so many js files in my newly created simulator folder. 

You'll type your javaScript into a text editor or IDE, preferrably one that provides syntax highlighting and other support for JavaScript.  Most of the PhET team uses WebStorm or Sublime.

You'll save your code as .js files, located in the js/ subdirectory of your new repository. For example, if your new simulation is called "Weather Balloons",  name your repository "weather-balloons", and create .js fles in weather-balloons/js/.  

I hope this helps,

Chris Malley

PixelZoom, Inc.