#### September 5, 2014

A couple of my students asked for worksheets to practice drawing atoms and electron shells. I updated the Atom Builder app to make sure it works and to make the app embedable.

So now I can ask a student to draw ^{23}Na^{+} then show the what they should get:

# Worksheet

Draw diagrams of the following atoms, showing the number of neutrons, protons, and electrons in shells. See the example above.

^{14}C^{}: answer.
^{32}K^{+}: answer.
^{18}O^{2-}: answer.
^{4}He^{2+}: answer.
^{32}P^{–}: answer.

I guess the next step is to adapt the app so you can hide the element symbol so student have to figure what element based on the diagram.

**Citing this post**: **Urbano**, L., 2014. Updated Atom Builder, Retrieved April 20th, 2018, from *Montessori Muddle*: http://MontessoriMuddle.org/ .

**Attribution (Curator's Code )**: Via: ᔥ Montessori Muddle; Hat tip: ↬ Montessori Muddle.

Posted in Chemistry, Interactive, Natural World, Programming1 Comment » - Tags: apps, atoms, atoms and molecules, chemistry apps, css5, html5, interactive web apps, interactive websites, javascript, kineticjs

#### March 3, 2014

Finally, relatively easy interactive 3d on the web. You can rotate and zoom into the scene. (Although it may not yet be compatible with all browsers it does work with Firefox at least).

Your browser does not support iframes.

This method uses the three.js Javascript library. Here I use it to show the volume of a rotated surface using the disk method. It’s almost identical to my calculus student’s project, except here I’m finding the volume between *x=1* and *x=3*, using disks that are 0.5 units in height (Δx).

Since the volume of cylinder is:

where r is the radius of the cylinder.

We’re finding the volume created by a function that’s rotated around the x-axis. Using the function:

The radius of each cylinder is the value of the function for that x value, so you could write the radius as:

Therefore the volume of each disk is:

There are four disks and we use the function value at the far end of the disk to draw the disk so the total volume is:

Factoring out the π and the Δx gives:

Since *Δx = 0.5*, *a = 1.0*, and *b = 3.0*, we can define the number of disks as *n = 4* then we can rewrite using summation formula:

reverting back to *a* and *b* gives the general equation:

where:

**Citing this post**: **Urbano**, L., 2014. Volumes of Rotation: The Disk Method: 3d with Javascript Three.js, Retrieved April 20th, 2018, from *Montessori Muddle*: http://MontessoriMuddle.org/ .

**Attribution (Curator's Code )**: Via: ᔥ Montessori Muddle; Hat tip: ↬ Montessori Muddle.

Posted in Calculus, Mathematics, TechnologyNo Comments » - Tags: 3d, calculus, javascript, programming

#### July 5, 2013

Now that I have a new set of microscopes I didn’t think I would actually need to have an online, simulated microscope to show samples. However, I thought having a series of picture that I could scroll through would be useful to illustrate microscopy concepts such as depth-of-field when I talk about them to the whole class. Once I’d created the depth-of-field simulation, I figured it would not be too much extra trouble to put in a few different magnification levels. Now I have this embeddable online microscope simulator.

It’s started off with a single fly wing as a sample, but I’ll be adding to it as I take more pictures.

**Citing this post**: **Urbano**, L., 2013. An Online Microscope, Retrieved April 20th, 2018, from *Montessori Muddle*: http://MontessoriMuddle.org/ .

**Attribution (Curator's Code )**: Via: ᔥ Montessori Muddle; Hat tip: ↬ Montessori Muddle.

Posted in Biology, Interactive, Natural World2 Comments » - Tags: html5, interactive web apps, javascript, microscopy, online microscope

#### July 2, 2013

At higher magnifications, microscope lenses will only be able to focus on layers within your specimen. You could take a series of images with different focal planes and stack them together, but without a camera mounted on the microscope, getting images to line up right for focus stacking is quite the challenge. The alternative is focusing in and out until you get a feeling for the three dimensional shape of the specimen.

Since I don’t have a camera mount I’ve created an html5/javascript page that simulates focusing in and out of a sample. It’s embedded above, but a direct link is here.

You can use the knobs to the right of the image to adjust the focal plane. You should be able to see hairs on the top and bottom of the transparent wing.

**Citing this post**: **Urbano**, L., 2013. Depth of Field Demonstration: On a Simulated Microscope, Retrieved April 20th, 2018, from *Montessori Muddle*: http://MontessoriMuddle.org/ .

**Attribution (Curator's Code )**: Via: ᔥ Montessori Muddle; Hat tip: ↬ Montessori Muddle.

Posted in Biology, Natural World, ProgrammingNo Comments » - Tags: focal depth, focus, focus stacking, html5, interactive web apps, javascript, microscopy, online microscope

#### May 10, 2013

A month in the spring can make a huge difference. Move your mouse over the image (or click the image) to see the difference between April and May on the Fulton School campus.

The full sized images can be seen here.

Note: To embed the image above use:

<iframe style=”overflow:hidden;” src=”http://earthsciweb.org/js/images/spring/spring.html” width=490 height=326 seamless />

**Citing this post**: **Urbano**, L., 2013. One Spring's Month, Retrieved April 20th, 2018, from *Montessori Muddle*: http://MontessoriMuddle.org/ .

**Attribution (Curator's Code )**: Via: ᔥ Montessori Muddle; Hat tip: ↬ Montessori Muddle.

Posted in Biology, Natural WorldNo Comments » - Tags: campus, campus biota, campus ecology, ecology, environment, javascript, jquery, my photos, photos, seasons

#### May 3, 2013

One of my students couldn’t get VPython to install and run her computer. She was running Windows 8, and I have not used Windows, much less this version of it to figure out what the problem was. This is one of the challenges with a bring your own device policy. So, instead I gave the lesson on numerical integration using javascript.

To make things easier, I create a barebones template of a webpage build around javascript (using the jquery library to make interactivity easier).

If you open the webpage file (index.html) in your browser you should see nothing but the word “Hello”. The template is blank, but it’s ready so students can start with the javascript programming right away, which a few of my programming elective students have done.

For reference, this file (basic-jquery-numeric-int.zip) uses the template to create a program that does numerical integration. Someone using the webpage can enter the limits (a and b) and the number of trapezoids to use (n), and the program calculates calculates the area under the curve *f(x) = -x*^{2}/4 + x + 4.

It’s a very bare template and doesn’t have any comments, so it’s not useful unless you’re at least a little familiar with html and javascript and just need a clean place to start.

**Citing this post**: **Urbano**, L., 2013. Basic JavaScript, Retrieved April 20th, 2018, from *Montessori Muddle*: http://MontessoriMuddle.org/ .

**Attribution (Curator's Code )**: Via: ᔥ Montessori Muddle; Hat tip: ↬ Montessori Muddle.

Posted in Mathematics, ProgrammingNo Comments » - Tags: html, html5, javascript, jquery, math and programming, programming

#### April 20, 2013

Numerically integrating the area under the curve using four trapezoids.

I gave a quick introduction to programming for my calculus class, which has been working on numerical integration.

Numerical integration is usually used for functions that can’t be integrated (or not easily integrated) but for this example we’ll use a simple parabolic function so we can compare the numerical results to the analytical solution (as seen here).

With the equation:

To find the area under the curve between *x = 1* and *x = 5* we’d find the definite integral:

which gives the result:

For numerical integration, we break the area of concern into a number of trapezoids, find the areas of all the trapezoids and add them up.

We’ll define the left and right boundaries of the area as **a** and **b**, and we can write the integral as:

The left and right boundaries of the area we’re interested in are defined as *a* and *b* respectively. The area of each trapezoid is defined as A_{n}.

We also have to choose a number of trapezoids (**n**) or the width of each trapezoid (**dx**). Here we choose four trapezoids (*n = 4*), which gives a trapezoid width of one (*dx = 1*).

The area of the first trapezoid can be calculated from its width (dx) and the height of the two upper ends of the trapezoid (f(x_{0}) and f(x_{1}).

So if we define the x values of the left and right sides of the first trapezoids as *x*_{0} and *x*_{1}, the area of the first trapezoid is:

For this program, we’ll set the trapezoid width (*dx*) and then calculate the number of trapezoids (*n*) based on the width and the locations of the end boundaries *a* and *b*. So:

and the sum of all the areas will be:

We can also figure out that since the x values change by the same value (dx) for every trapezoid, it’s an arithmetic progression, so:

and,

so our summation becomes:

Which we can program with:

*numerical_integration.py*

# the function to be integrated
def func(x):
return -0.25*x**2 + x + 4
# define variables
a = 1. # left boundary of area
b = 5. # right boundary of area
dx = 1 # width of the trapezoids
# calculate the number of trapezoids
n = int((b - a) / dx)
# define the variable for area
Area = 0
# loop to calculate the area of each trapezoid and sum.
for i in range(1, n+1):
#the x locations of the left and right side of each trapezpoid
x0 = a+(i-1)*dx
x1 = a+i*dx
#the area of each trapezoid
Ai = dx * (func(x0) + func(x1))/ 2.
# cumulatively sum the areas
Area = Area + Ai
#print out the result.
print "Area = ", Area

And the output looks like

>>>
Area = 17.5
>>>

While the programming is pretty straightforward, it was a bit of a pain getting Python to work for one of my students who is running Windows 8. I still have not figured out a way to get it to work properly, so I’m considering trying to do it using Javascript.

# Update

The javascript functions for numerical integration:

function numerically_integrate(a, b, dx, f) {
// calculate the number of trapezoids
n = (b - a) / dx;
// define the variable for area
Area = 0;
//loop to calculate the area of each trapezoid and sum.
for (i = 1; i <= n; i++) {
//the x locations of the left and right side of each trapezpoid
x0 = a + (i-1)*dx;
x1 = a + i*dx;
// the area of each trapezoid
Ai = dx * (f(x0) + f(x1))/ 2.;
// cumulatively sum the areas
Area = Area + Ai
}
return Area;
}
//define function to be integrated
function f(x){
return -0.25*Math.pow(x,2) + x + 4;
}
// define variables
a = 1; // left boundary of area
b = 5; // right boundary of area
dx = 1; // width of the trapezoids
// print out output
alert("Area = "+ numerically_integrate(a, b, dx, f));

This is a demonstration of a full html file that uses the function, and should work in any modern browser (download files: numerical-integration.zip).

# Update 2

I've added the above javascript code to the embeddable graphs to allow it to calculate and display numerical integrals: you can change the values in the interactive graph below.

**Citing this post**: **Urbano**, L., 2013. Programming Numerical Integration with Python (and Javascript), Retrieved April 20th, 2018, from *Montessori Muddle*: http://MontessoriMuddle.org/ .

**Attribution (Curator's Code )**: Via: ᔥ Montessori Muddle; Hat tip: ↬ Montessori Muddle.

Posted in Calculus, Mathematics, ProgrammingNo Comments » - Tags: calculus, embeddable graphs, integration, javascript, math and programming, numerical methods, programming, python

#### March 24, 2013

Try it. You can change the order and coefficients of the polynomial. The default is the second order polynomial: *y = x*^{2}.

I originally started putting together this interactive polynomial app to use in demonstrating numerical integration, however it’s a quite useful thing on its own. In fact, I’ve finally figured out how to do iframes, which means that the app is embeddable, so you can use it directly off the Muddle (if you want to put it on your own website you can get the embed code).

This app is a rewritten version of the parabola code, but it uses kineticjs instead of just HTML5 canvases. As a result, it should be much easier to adapt to make it touch/mouse interactive.

**Citing this post**: **Urbano**, L., 2013. Graphing Polynomials, Retrieved April 20th, 2018, from *Montessori Muddle*: http://MontessoriMuddle.org/ .

**Attribution (Curator's Code )**: Via: ᔥ Montessori Muddle; Hat tip: ↬ Montessori Muddle.

Posted in Interactive, MathematicsNo Comments » - Tags: algebra, apps, html5, javascript, kineticjs, math, polynomials, pre-Calculus