HTML Animations using SVG

A basic animation test using the HTML SVG element instead of the CANVAS. This one uses the svg.js library. This library has it’s own, built in animation function that is used to make the red rectangle move back and forth (1 second period).

The green circle is moved using the requestAnimationFrame function with some coding to make it bounce back and forth.

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <script src='./svg.js/svg.min.js'></script>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    <div id="svgPlace"></div>
  </body>

  <script type="text/javascript">
    var draw = SVG().addTo('#svgPlace').size(300,400);
    var line = draw.line([[20,20],[200,20]]).stroke({width: 1, color:'#f00'});

    //Metronome red rectangle.
    rect = draw.rect(50,100).move(200,20).fill('#f00');
    rect.radius(10);
    dir = 'left';

    setInterval(animate, 1000);
    function animate(){
      if (dir === 'left'){
        px = 20;
        py = 20;
        dir = "right";
      }
      else {
        px = 200;
        py = 20;
        dir = "left";
      }
      rect.animate({
        duration: 1000,
        when: 'now'
      }).move(px,py);
    }

    //Green circle
    circ = draw.circle(20).fill('#0f0').move(250,10);
    window.requestAnimationFrame(animateCirc);
    cx = 250;
    cy = 20;
    dy = 1;

    function animateCirc(){
      cy+=dy;
      circ.move(cx,cy);
      window.requestAnimationFrame(animateCirc);
      if (cy > 100 ){
        cy = 100;
        dy = -dy;
      } else if (cy < 20) {
        cy = 20;
        dy = -dy;
      }
    }

  </script>
</html>

Fortune Teller


Eve’s Fortune Teller

The student project that I keep revisiting the most is the Fortune Teller webpage created a couple years ago by former student Eve J.

You get a randomly generated fortune, and Eve built in enough combinations that I still see unique fortunes two years later.

I think what I like the most about it is how well it captures Eve’s “voice”. The style of the sentences and the little twists that pop up here and there. I can’t help reading this in her voice.

Eve is off in college right now, and gave me permission to post about the project, and to adapt the code as necessary, as long as I keep her informed (Hi Eve!).

I’ve ported the core of her program from JavaScript to PHP so you can now just get just the fortune telling text.


Eve’s Fortune Teller

https://soriki.com/eve/fortune/fortune.php?name=Doc

I’ve also, sort of, memefied the fortunes but putting the text over a background image, which is what you see at the top of the post.

https://soriki.com/eve/fortune-m/meme-fortune.html?name=Doc

As an experiment, I now have a version that makes the image as an svg:

I have another student now who’s interested in making a smart mirror, and this will make it easier to include fortunes into that project.

I’ve also posted the project on Github: https://github.com/lurbano/fortune

Updated Atom Builder

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.

Volumes of Rotation: The Disk Method: 3d with Javascript Three.js

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).

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:

 V_{cylinder} = \pi r^2 h

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:

 y = -\frac{x^2}{4}+4

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

 R(x) = -\frac{x^2}{4}+4

Therefore the volume of each disk is:

 V_{disk} = \pi R(x)^2 \Delta x

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:

 V = \pi R(1.5)^2 \Delta x + \pi R(2.0)^2 \Delta x + \pi R(2.5)^2 \Delta x + \pi R(3.0)^2 \Delta x

Factoring out the π and the Δx gives:

 V = \pi \Delta x \left(R(1.5)^2 +  R(2.0)^2 + R(2.5)^2  +  R(3.0)^2 \right)

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:

 V = \pi \Delta x \sum\limits_{i=1}^n R(1.0+i \Delta x)^2

reverting back to a and b gives the general equation:

 V = \pi \Delta x \sum\limits_{i=1}^n R(a+i \Delta x)^2

where:
 n = \frac{b-a}{\Delta x}

An Online Microscope

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.

Depth of Field Demonstration: On a Simulated Microscope

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.

One Spring’s Month

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 />

Basic JavaScript

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) = -x2/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.