Entries Categorized as 'Programming'

Vpython on the Web with Glowscript

February 25, 2016

Using glowscript.org, we can now put vpython programs online. Here’s a first shot of the coil program:

http://www.glowscript.org/#/user/lurbano/folder/Private/program/magnet-coil.py

Moving the magnet through a wire coil creates an electric current in the wire.

Moving the magnet through a wire coil creates an electric current in the wire.

Some changes to the standard vpython language must be used and there are some limitations, but it seems to work.

Citing this post: Urbano, L., 2016. Vpython on the Web with Glowscript, Retrieved March 27th, 2017, from Montessori Muddle: http://MontessoriMuddle.org/ .
Attribution (Curator's Code ): Via: Montessori Muddle; Hat tip: Montessori Muddle.

Dilation

December 14, 2015

Dilation (scaling) of a quadrilateral by 2x.

Dilation (scaling) of a quadrilateral by 2x.

A quick program that animates scaling (dilation) of shapes by scaling the coordinates. You type in the dilation factor.

dilation.py

from visual import *

#axes
xmin = -10.
xmax = 10.
ymin = -10.
ymax = 10.
xaxis = curve(pos=[(xmin,0),(xmax,0)])
yaxis = curve(pos=[(0,ymin),(0,ymax)])

#tick marks
tic_dx = 1.0
tic_h = .5
for i in arange(xmin,xmax+tic_dx,tic_dx):
    tic = curve(pos=[(i,-0.5*tic_h),(i,0.5*tic_h)])
for i in arange(ymin,ymax+tic_dx,tic_dx):
    tic = curve(pos=[(-0.5*tic_h,i),(0.5*tic_h,i)])

#stop scene from zooming out too far when the curve is drawn
scene.autoscale = False

# define curve here
shape = curve(pos=[(-1,2), (5,3), (4,-1), (-1,-1)])

shape.append(pos=shape.pos[0])
shape.color = color.yellow
shape.radius = 0.1
shape.visible = True

#dilated shape
dshape = curve(color=color.green, radius=shape.radius*0.9)
for i in shape.pos:
    dshape.append(pos=i)

#label
note = label(pos=(5,-8),text="Dilation: 1.0", box=False)
intext = label(pos=(5,-9),text="> x", box=False)

#scaling lines
l_scaling = False
slines = []
for i in range(len(shape.pos)):
    slines.append(curve(radius=shape.radius*.5,color=color.red, pos=[shape.pos[i],shape.pos[i],shape.pos[i]]))


#animation parameters
animation_time = 1. #seconds
animation_smootheness = 30
animation_rate = animation_smootheness / animation_time

x = ""
while 1:
    #x = raw_input("Enter Dilation: ")
    if scene.kb.keys: # event waiting to be processed?
        s = scene.kb.getkey() # get keyboard info

        #print s
        if s <> '\n':
            x += s
            intext.text = "> x "+x
        else:
            try:
                xfloat = float(x)
                note.text = "Dilation: " + x

                endpoints = []
                dp = []
                for i in shape.pos:
                    endpoints.append(float(x) * i)
                    dp.append((endpoints[-1]-i)/animation_smootheness)
                #print "endpoints: ", endpoints
                #print "dp:        ", dp
                for i in range(animation_smootheness):
                    for j in range(len(dshape.pos)):
                        dshape.pos[j] = i*dp[j]+shape.pos[j]
                    rate(animation_smootheness)
                    if slines:
                        for i in range(len(shape.pos)):
                            slines[i].pos[1] = vector(0,0)
                            slines[i].pos[-1] = dshape.pos[i]

                for i in range(len(shape.pos)):
                    dshape.pos[i] = endpoints[i]
                    slines[i].pos[-1] = dshape.pos[i]

                for i in range(len(shape.pos)-1):
                    print shape.pos[i], "--->", dshape.pos[i]
                    
            except:
                #print "FAIL"
                failed = True
                intext.text = "> x "
            x = ""
            
                   

Citing this post: Urbano, L., 2015. Dilation, Retrieved March 27th, 2017, from Montessori Muddle: http://MontessoriMuddle.org/ .
Attribution (Curator's Code ): Via: Montessori Muddle; Hat tip: Montessori Muddle.

A Visual Introduction to Differentiation (using vpython)

October 15, 2015

Screen capture: Enter an x value and the program calculates the slope for the function and draws the tangent line.

Screen capture: Enter an x value and the program calculates the slope for the function and draws the tangent line.

This quick program is intended to introduce differentiation as a way of finding the slope of a line. Students know how to find the slope of a tangent line at least conceptually (by drawing). We pick a curve: in this case:

f(x) = x^2

then enter values of x in the program to see how x, the function value and the differential compare to each other.

x f(x) f'(x)
0.5 0.25 1
1 1 2
2 2 4
3 9 6

Because it’s quick you have to change the function in the code, and enter the values for x in the python shell.

With a sin curve.

With a sin curve.

differentiation_intro_numeric.py

from visual import *

class tangent_line:
    def __init__(self):
        self.dx = 0.1
        self.line = curve()
        self.tangent_line = curve()
        self.point = sphere(radius=.25,color=color.yellow)
        self.point.visible = False
        self.label = label(pos=(-5,-8))

    '''CHANGE FUNCTION (y) HERE'''
    # the original function
    def f(self, x):
        #y = sin(x)
        y = x**2
        return y
    '''END CHANGE FUNCTION HERE'''

    def find_slope(self, x):
        sdx = .00001
        m = (self.f(x+sdx)-self.f(x))/sdx
        return round(m,3)
        
    def draw(self):
        for x in arange(xmin, xmax+self.dx, self.dx):
            self.line.append(pos=(x, self.f(x)))

    def draw_tangent(self, x):
        m = self.find_slope(x)
        y = self.f(x)
        b = y - m * x
        print "When x = ", x, " slope = ", m
        self.label.text = "point: (%1.2f, %1.2f)\nSlope: %1.2f" % (x,y,m)
        self.plot_point(x)

        #draw tangent
        self.tangent_line.visible = False
        self.tangent_line = curve(pos=[(xmin,m*xmin+b),(xmax,m*xmax+b)], color=color.yellow)
              
    def plot_point(self, x):
        self.point.visible = True
        self.point.pos = (x, self.f(x)) 

#axes
xmin = -10.
xmax = 10.
ymin = -10.
ymax = 10.
xaxis = curve(pos=[(xmin,0),(xmax,0)])
yaxis = curve(pos=[(0,ymin),(0,ymax)])

#tick marks
tic_dx = 1.0
tic_h = .5
for i in arange(xmin,xmax+tic_dx,tic_dx):
    tic = curve(pos=[(i,-0.5*tic_h),(i,0.5*tic_h)])
for i in arange(ymin,ymax+tic_dx,tic_dx):
    tic = curve(pos=[(-0.5*tic_h,i),(0.5*tic_h,i)])

#stop scene from zooming out too far when the curve is drawn
scene.autoscale = False

# draw curve
func = tangent_line()
func.draw()

# get input
while 1:
    xin = raw_input("Enter x value: ")
    func.draw_tangent(float(xin))


Citing this post: Urbano, L., 2015. A Visual Introduction to Differentiation (using vpython), Retrieved March 27th, 2017, from Montessori Muddle: http://MontessoriMuddle.org/ .
Attribution (Curator's Code ): Via: Montessori Muddle; Hat tip: Montessori Muddle.

Coding Online on the Coding Ground

August 18, 2015

For some of my students with devices like Chromebooks, it has been a little challenging finding ways for them to do coding without a simple, built-in interpreter app. One interim option that I’ve found, and like quite a bit is the TutorialsPoint Coding Ground, which has online interfaces for quite a number of languages that are great for testing small programs, including Python.

Screen capture of  Python coding at Tutorial Point's Coding Ground.

Screen capture of Python coding at Tutorial Point’s Coding Ground.

Citing this post: Urbano, L., 2015. Coding Online on the Coding Ground, Retrieved March 27th, 2017, from Montessori Muddle: http://MontessoriMuddle.org/ .
Attribution (Curator's Code ): Via: Montessori Muddle; Hat tip: Montessori Muddle.

How to Write a Web Page from Scratch

March 14, 2015

<html>
	<head>
	
	</head>
	
	<body>
	
	</body>
</html>

I gave a quick introduction to writing HTML web pages over the last interim. The basic outline of a web page can be seen above (but there’s no content in there, so if you tried this file in a web browser you’d get a blank page). Everything is set between tags. The open html tag (<html>) starts the document, and the close html tag (</html>) ends it.

The head section (<head>) holds the information needed to set up the page, while the body section (<body>) holds the stuff that’s actually on the page.

For example, if I wanted to create a heading and a paragraph of text, I would just put it in the body, like so:

<html>
	<head>
	
	</head>
	
	<body>
		<h1>My Heading Here</h1>

		This is my text.
	
	</body>
</html>

Note that the heading is placed between h1 tags. And the result should look like this:

Basic webpage.

Basic webpage.

Now save this file as an html file, which means save it as a plain text file using a .html extension (e.g. test.html) and open the file in a browser.

Note on Editors: I’ve found that the best way to do this is by using a simple coding editor. I recommend my students use GEdit on Linux, Smultron (free version here) or GEdit on Mac, and Notepad++ on Windows. You don’t want to use something like Microsoft Word, because complex word processing software like it, LiberOffice and Pages need to save a lot of other information about the files as well (like the font style, who created the file etc.).

CSS Styling

But we typically don’t want something so plain, so we’ll style our heading using CSS. Usually, we’ll want all of our headings to be the same so we set up a style to make all of our headings blue. So we’ll add a styling section to our header like so:

<html>
	<head>
	
		<style type="text/css">
			h1 { color: blue; }
		</style>	
		
	</head>
	
	<body>
	
		<h1>My Heading Here</h1>
		
		This is my text.
	
	</body>
</html>

Which gives:

Styling the heading.

Styling the heading.

There are a few named colors like blue, but if you want more freedom, you can use the hexadecimal color codes like “#A3319F” to give a kind of purple color (hexadecimals are numbers in base 16).

DIV’s to Divide

Finally, we’ll often want pages with separate blocks of information, so let’s make a little column for our heading and paragraph. We’ll make the background yellowish, put a border around it, and give it a set width.

To do this we’ll place our heading and paragraph into a DIV tag, which does not do anything but encapsulate the part of the web page we want into sections.

<html>
	<head>
	
		<style type="text/css">
			h1 { color: blue; }
		</style>	
		
	</head>
	
	<body>
		<div id="section1">
			<h1>My Heading Here</h1>
		
			This is my text.
		</div>
	</body>
</html>

Note that I’ve given the div tag an id (“section1), this is so that I can refer to that section only in the styling section using “#section”:

<html>
	<head>
	
		<style type="text/css">
			h1 { color: blue; }
			
			#section1 {
				background-color: #A2A82D;
				border: solid black 2px;
				width: 400px;
			}
		</style>	
		
	</head>
	
	<body>
		<div id="section1">
			<h1>My Heading Here</h1>
		
			This is my text.
		</div>
	</body>
</html>

to give:

More styling.

More styling.

Unleashed

With that introduction, I set students loose to make their own web pages. They had to make two page, both linking to the other, and one of them being an “About Me” page.

There are lots of places on line to find out what HTML tags and CSS styles are available and how to use them, so my goal was to introduce students to the language they needed to know.

One issue that came up was the use of copyrighted images. Current adolescents see everything online as part of a sharing culture–most of my students for this lesson had Pintrest accounts–and it took some explanation for them to understand why they should not use that cute gif of a bunny eating a slice of pizza without getting permission from the author (or at least finding out if the artwork was free to use).

Finally, I did do a quick intro on how to using JavaScript (with Jquery) to make their pages more interactive, but given that we only had two days for this project, that was pushing things a little too far.

Citing this post: Urbano, L., 2015. How to Write a Web Page from Scratch, Retrieved March 27th, 2017, from Montessori Muddle: http://MontessoriMuddle.org/ .
Attribution (Curator's Code ): Via: Montessori Muddle; Hat tip: Montessori Muddle.

Limiting Chemical Reactions

January 1, 2015

Figuring out the limiting reactant in a chemical reaction integrates many of the basic chemistry concepts including: unit conversions from moles to mass and vice versa; the meaning of chemical formulas; and understanding the stoichiometry of chemical reactions. So, since we’ll need a number of these, I wrote a python program to help me design the questions (and figure out the answers).

Program examples come zipped because they require the program file and the elements_database.py library:

Baking Powder and Vinegar (Common Molecules)

Limiting_component-Common.py: This has the baking powder and vinegar reaction limited by 5 g of baking soda. It’s nice because it uses a few pre-defined “common molecules” (which are defined in the elements_database.py library.

You enter the reactants and products and the program checks if the reaction is balanced, then calculates the moles and masses based on the limiting component, and finally double checks to make sure the reaction is mass balanced.

Limiting_component-Common.py

from elements_database import *
import sys

print "LIMITING REACTANT PROGRAM"
print 
print "  Determines the needed mass and moles of reactants and products if reaction is limited by one of the components"

c = common_molecules()

'''Create Reaction'''
rxn = reaction()
# Add reactants (and products)
#   Use rxn.add_reactant(molecule[, stoichiometry])
#       molecule: from molecule class in elements_database
#       stoichiometry: integer number
rxn.add_reactant(c.baking_soda,1)
rxn.add_reactant(c.hydrochloric_acid,1)
rxn.add_product(c.carbon_dioxide)
rxn.add_product(c.water, 1)
rxn.add_product(c.salt)

'''Print out the reaction'''
print 
print "Chemical Formula"
print "  " + rxn.print_reaction()
print 

'''Check if reaction is balanced'''
balanced = rxn.check_for_balance(printout=True)

'''Calculate limits of reaction'''
if balanced:
    rxn.limited_by_mass(c.baking_soda, 5, printout=True)

Outputs results in the Results table (using scientific notation):

LIMITING REACTANT PROGRAM

  Determines the needed mass and moles of reactants and products if reaction is limited by one of the components

Chemical Formula
  NaHCO3 + HCl  --> CO2 + H2O + NaCl 

Check for balance
 --------------------------------------------- 
| Element | Reactants | Products | Difference |
 --------------------------------------------- 
|   Na    |    1      |    -1    |     0      |
|   H     |    2      |    -2    |     0      |
|   C     |    1      |    -1    |     0      |
|   O     |    3      |    -3    |     0      |
|   Cl    |    1      |    -1    |     0      |
 --------------------------------------------- 
Balance is:  True

Given: Limiting component is 5 g of NaHCO3.
  Molar mass = 84.00676928
  Moles of NaHCO3 = 0.0595190130849

 Results
   ------------------------------------------------------------------ 
  | Molecule | Stoich.*| Molar Mass (g) | Moles req. |    Mass (g)   |
   ------------------------------------------------------------------ 
  |NaHCO3    |    1    |    84.0068     |  5.952e-02 |   5.000e+00   |
  |HCl       |    1    |    36.4602     |  5.952e-02 |   2.170e+00   |
  |CO2       |    -1   |    44.0096     |  5.952e-02 |   2.619e+00   |
  |H2O       |    -1   |    18.0156     |  5.952e-02 |   1.072e+00   |
  |NaCl      |    -1   |    58.4418     |  5.952e-02 |   3.478e+00   |
   ------------------------------------------------------------------ 
 * negative stoichiometry means the component is a product

  Final Check: Confirm Mass balance: 
     Reactants:    7.1701 g 
     Products:    -7.1701 g 
     --------------------------
          =      0.0000 g 
     --------------------------

General Example

If not using the common molecules database, you need to define the components in the reaction as molecules yourself. This example reacts magnesium sulfate and sodium hydroxide, and limits the reaction with 20 g of magnesium sulfate.

Limiting_component-General.zip

The main file is:

Chem_Exam-limiting.py

from elements_database import *
import sys

print "LIMITING REACTANT PROGRAM"
print 
print "  Determines the needed mass and moles of reactants and products if reaction is limited by one of the components"

# create reaction

rxn2 = reaction()
# Add reactants (and products)
#   Use rxn.add_reactant(molecule[, stoichiometry])
#       molecule: from molecule class in elements_database
#       stoichiometry: integer number
rxn2.add_reactant(molecule("Mg:1,S:1,O:4"))
rxn2.add_reactant(molecule("Na:1,O:1,H:1"), 2)
rxn2.add_product(molecule("Mg:1,O:2,H:2"))
rxn2.add_product(molecule("Na:2,S:1,O:4"))

'''Print out the reaction'''
print 
print "Chemical Formula"
print "  " + rxn2.print_reaction()
print 

'''Check if reaction is balanced'''
balanced = rxn2.check_for_balance(printout=True)

'''Calculate limits of reaction'''
if balanced:
    rxn2.limited_by_mass(molecule("Mg:1,S:1,O:4"), 20, True)

# print out masses
print "Masses Involved in Reaction"
print "  Reactants:"
for i in rxn2.reactants:
    #print "rxn", i
    print "    {m}: {g} g".format(m=i.molecule.print_formula().ljust(10), g=i.mass)
print "  Products:"
for i in rxn2.products:
    #print "rxn", i
    print "    {m}: {g} g".format(m=i.molecule.print_formula().ljust(10), g=-i.mass)

This program is slightly different from the common molecules example in that, at the end, it prints out masses calculated in a more easily readable format in addition to the other data.

Masses Involved in Reaction
  Reactants:
    MgSO4     : 20.0 g
    NaOH      : 13.2919931774 g
  Products:
    MgO2H2    : 9.69066512026 g
    Na2SO4    : 23.6013280571 g

When I have some time I’ll convert this to JavaScript like the molecular mass example.

Citing this post: Urbano, L., 2015. Limiting Chemical Reactions, Retrieved March 27th, 2017, from Montessori Muddle: http://MontessoriMuddle.org/ .
Attribution (Curator's Code ): Via: Montessori Muddle; Hat tip: Montessori Muddle.

Molar Mass of Molecules

December 5, 2014

Calculate the molar mass of a molecule:

The notation for the chemical formula is a little funky: you put the element symbol and then the number of atoms separated by a colon; each element/number of atoms pair are separated by commas, so sodium chloride (NaCl) would be “Na:1,Cl:1“.

This will have to do until I can write something to parse the regular chemical formula notation.

On the plus side, you can link to a specific molecular mass calculation by adding the formula to the url. So magnesium chloride (MgCl2) can be found with this url:

http://soriki.com/js/chem/chem_db/molecular_mass.html?formula=Mg:1,Cl:2

Citing this post: Urbano, L., 2014. Molar Mass of Molecules, Retrieved March 27th, 2017, from Montessori Muddle: http://MontessoriMuddle.org/ .
Attribution (Curator's Code ): Via: Montessori Muddle; Hat tip: Montessori Muddle.

Updated Atom Builder

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 23Na+ 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.

  1. 14C: answer.
  2. 32K+: answer.
  3. 18O2-: answer.
  4. 4He2+: answer.
  5. 32P: 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 March 27th, 2017, from Montessori Muddle: http://MontessoriMuddle.org/ .
Attribution (Curator's Code ): Via: Montessori Muddle; Hat tip: Montessori Muddle.

Creative Commons License
Montessori Muddle by Montessori Muddle is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 United States License.