CodePen.io is a site that lets you easily create small web pages (called "Pens") using a mixture of HTML, CSS, and JavaScript. Here's a simple example (from the WTC: rate of fall thread). You can move the sliders to adjust the values, and the results update automatically. You can also just type in parameters.
I think this has the potential to be very useful for debugging, as it's possible to create simple mathematical models, where you can adjust the variable to see what effect various assumptions have. Like in the above, you can see is having the correct value for g would make any difference to the end result (it does not).
To embed a Pen you can simply use the URL directly, like:
http://codepen.io/mickwest/pen/eqtJo
and you can optionally set the height, like:
http://codepen.io/mickwest/pen/eqtJo,320
You can click on the tabs in the example above and it will show you the underlying code.
The "Edit on CodePen" link will not work if you click on it directly, you will have to right click on it. This is due to the security settings. The Pen runs using the "sandbox" attribute, however for additional security I've currently encapsulated the entire thing in a more restrictive sandbox.
The above example could easily be re-used for a similar simulation. You just need to get a Codepen account, and then you can "fork" a Pen (meaning you make your own copy of it, which you can then edit).
I think this has the potential to be very useful for debugging, as it's possible to create simple mathematical models, where you can adjust the variable to see what effect various assumptions have. Like in the above, you can see is having the correct value for g would make any difference to the end result (it does not).
To embed a Pen you can simply use the URL directly, like:
http://codepen.io/mickwest/pen/eqtJo
and you can optionally set the height, like:
http://codepen.io/mickwest/pen/eqtJo,320
You can click on the tabs in the example above and it will show you the underlying code.
The "Edit on CodePen" link will not work if you click on it directly, you will have to right click on it. This is due to the security settings. The Pen runs using the "sandbox" attribute, however for additional security I've currently encapsulated the entire thing in a more restrictive sandbox.
The above example could easily be re-used for a similar simulation. You just need to get a Codepen account, and then you can "fork" a Pen (meaning you make your own copy of it, which you can then edit).
Last edited:
