What is it?
This “Streak Plate” interactive is based on the 4th lab exercise for this class. You must sterilize a wire loop, acquire a bacteria sample, and drag it across a petri dish, thrice, in order to create clumps of pure bacteria. This interactive ends with an image of the growth results, and a checklist of the various (dozens of) steps.

The real world lab requires an overnight incubation period, and students often make mistakes along the way, so it was ideal to let them practice on their own.

We were given this 3 page manual excerpt to build on.
I also visited the lab and took dozens of photos of equipment, and the instructor sent back a document with detailed feedback on the first version.

I estimate we could make something like this in about 2 weeks (if it was primary focus).

I met with the Instructor last year (March 2013) to discuss a year long development plan, where we would simulate various parts of her lab within Unity3D (examples: a sink for cleaning items, a bunsen burner area, an incubator, a microscope, etc.).
I came by the lab for a half hour walk through of the equipment students actually use on campus (and I took pictures, notes, and recorded some videos with my iPhone).
The project simmered until September, when we found out the class had been pushed up from Spring to Winter 2014.
So I reviewed the manual and wrote and sketched up step by step plans for the interactive. This was sent to a part time (3 days a week) student worker who can program in Flash. While they mocked it up, I came by repeatedly to sketch changes and new ideas.

All told, this particular interactive took about a month of part-time work to turn into a working version. (though I hope we can polish and tweak it further as time permits).

* The original 3D idea was inspired by a microscope demo we were creating for Biology classes. We abandoned this idea when it appeared we’d only have a couple months to create it.

* The drawing action was the trickiest part of this activity. The program records you mouse position every millisecond, then draws a series of lines between each dot. (I don’t know how to do this in Unity3D). While you are drawing a barely perceptible streak in the visible plate, we are also creating the final version in a hidden area.

* We put in the “incubating” countdown to make it look like the computer was thinking. Because people expect computers to struggle to “crunch the numbers” before the big finish. But really, everything is already calculated and ready when you click the button to submit your work.

* Having the flame change items’ color over time also required some research. Basically we just color shift an object every time a timer ticks. But making this smoothly transition towards and away from a specific color was tricky.

* it was also slightly tricky to let the user determine which hand was in play based on which side of the screen their mouse was in. We told the program to constantly check the x coordinates of the mouse, and if it was within a certain range to show a certain image, while forcing the opposite hand image to snap to a central part of the screen. (this way you can flame the tube in your left hand, then effortlessly switch to the wire loop in your right hand – which can be flamed and then used to click the left hand’s tube).

* We tweaked an old anime style caricature to slightly resemble this instructor. With more time, we would likely create a brand new caricature.

* There was a series of frustrating problems concerning endless bugs in the basic navigation and pop up windows I’m guessing this was due to my initial design document not being detailed enough, and lack of testers. (Apparently I could have asked for a pool of student workers to go through and note bugs/confusion. but I never figured this out).

* Mike Miller also created an interactive “Fermentation lab #6” based on exercise 6 (ref: 2 page manual excerpt)

Print Friendly, PDF & Email

Leave a reply

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>