This was my first attempt at growing sugar crystals on LEDs. In the background you can see that I also candied some strings of dental floss, which delighted my dentist friend to no end. I made a massive amount of sugar syrup, spilling half of it into our kitchen stove in the process, and managed to fill the large glass jars. I then sat and waited, and waited, and waited. After about 4 weeks waiting, I discovered that the jars had grown tiny mountains of sugar crystals from the bottom up and that few crystals where actually on the LEDs. I went to drain the syrup and discovered that it is no easy thing to remove a giant crystal of sugar that had attached itself to the bottom of a glass jar, so while waiting with the hot water running full blast on them I remembered that we had some paper cups that were small and easy to rip open. I tried that and it worked!

After that win I got excited and started exploring how to incorporate the candied LEDs into an eco-friendly Christmas decoration. After my experiment with the saltwater powered paper lights I was curious to try different ways to wire the lights to make them more modular. I cut out 6 paper snowflakes, wired the anode and cathode through them and then connected it all together in a a big pretty circle.

Unfortunatly what is pretty is not always functional. This idea did not work because the electricity generated from the electrochemical reaction of the aluminum anode and copper cathode to the saltwater was pulled in too many directions to actually make it to the LED. Ah well.

This smoking disaster was the beginning of an experiment I affectionately call the Caramel Poop Battery. I knew something was terribly wrong after the caramel started to let off heavy tendrils of smoke and burning, but I pressed on for sheer stubborness and lack of knowledge of what would come next.

After pouring the mixture into a pan and letting it set, I dumped it out onto a cookie sheet for cutting. At the ten minute mark of it sitting in the pan cooling it had almost entirely solidified into a buttery blackened mass and I was losing hope fast after attempting to cut it in more than two pieces. Because of the huge amount of butter I used the rock was as sharp as hard candy, hot as hell because the cooled parts were too hard to cut, and intensely slippery. I don’t know how I didn’t cut my hand off trying to get the thing into smaller pieces but I was breathing hard and spewing profanity at the end.

At long last I managed to cut and roll the caramel into tootsie roll shapes with an aluminum anode and a copper cathode wire in the center. I had wanted to make them a bit more rectangular but it just didn’t work out that way. At least, I thought, at least once I hook them up they’ll redeem all the crap I went through!

…no. I stared at the candy, ingraining it into my memory, not letting myself look away from the sad thing my red haze of hubris had created. Then I very quietly snapped a few pictures and swept it into the trash.

A little while after that I started anew and decided to try a different track- molded sugar as a container for the electrochemical components. Wanting to be eco-friendly and thrifty I bought three large potatoes, cut them in half and dug out the centers to act as molds for the sugar shell.

I realized I had a problem in that the bottoms where round and could not stand- not to worry I said, and grabbed a handful of toothpicks to prop them up. I set in place the copper cathode and aluminum anode wrapped tightly within a paper towel soaked in cream of tartar and salt water and suspended it by masking tape and toothpick over the rim of the potato. I thought after they harden I’ll remove the masking tape and the cells will be entirely encased in the candy with only the connecting wires exposed. What a plan! I patted myself on the back.

I made the candy syrup out of dark honey and sugar this time, thinking that the slight electrochemical properties of the honey might add to the output of the cell, and poured the syrup into the molds. At once the middle insert floated to the top and I smacked myself on the head- why didn’t I think of that! and hurriedly added supports to center and stablize the innards.

About 2 hours of cooling off I found that the syrup hadn’t hardened. Curious… and also quite painful as I now had to move the molds into the fridge; molds that were filled with hot sticky liquid with tiny legs that kept breaking and a natural tendency to topple over. I eventually got them into the fridge and jammed together to keep them upright and with a last suspicious look closed the door. The next morning I opened the refridgerator to find that the syrup had still not hardened but had bled out overnight through the tiny holes made with the toothpick legs, leaving the centers exposed and a giant mess everywhere else. Well okay then, I said, scooping up what I could and pouring it into the molds again, this time reinforcing the sides of the potatoes with plastic wrap. A week went by and still the syrup had not set. Finally I was made to throw them out- the potatoes were growing mold and were wrinkled to the point of no return. My theory is that combined with the cream of tartar the honey syrup was able to maintain it’s viscous property and thus ruin the experiment.

A couple successful experiments later, I had made the Sweet n’ Salty electrochemical cells and was testing their stamina daily by juicing it with a 9 volt battery and measuring the energy that remained. I thought, you know what would absolutely crazy but just might work? What if I took the piezoelectric Rochelle salt I made and tried to juice up the cells by whacking it with a stick? Genius!

Sadly, no. Though the salt did produce measurable alternating current after an applied force in a future experiment, it did not by any means charge the cell. It did have the measurable effect of making me feel like a collossal idiot.

Moving on, one of my earlier experiments actually has some hope of a rebirth; the Peanut Butter and Jelly Battery. This previously unpublished project was an attempt to make an electrochemical cell out of a PB & J sandwich. In this experiment I took a sheet of copper, slathered it up with jam and a sheet of heavy-duty aluminum foil folded a few times and slathered it up with peanut butter. I then slapped them together and affixed aligator clips to measure the current with my trusty multimeter.

At this point let me say that I had a very vague understanding of how to measure electrical potential, and so was confused as to why it was so low. I was expecting about 1-1.5V to be generated and nothing of the sort was happening. I then cut my sandwich into fours and wove the copper and aluminum through the bits.

Well that was higher, but I still didn’t see why it wasn’t working. I made another sandwich and cut it into 6 pieces and wove the anode and cathode through them again.

Ok higher, but still what was wrong? I discovered later after feeding the sandwiches to my friends I never turned the dial of the multimeter to measure the voltage; I was only incorrectly measuring Amps. Knowing that now, I still postualte that it is possible to generate current from the sandwich. Time will tell.

I hope you’ve enjoyed my mistakes as much as I hope you continue to make your own, as that is the only way we’ll learn to do things well!

From October 30th until November 6th, the daily measured electrical potential without load of four cells in series was 2.2V and .7V for a single cell. From November 6th to November 10th the electrical potential without load of the four cells went from 2.2 to 1.8V and for the single cell from .7 to .6V. After a minute of recharging the four cells on a 9V battery the electrical potential measured 6V and was quickly reduced to it’s resting state of 2V when a load was applied. After a minute of recharging the single cell on the 9V battery the electrical potential was 1.6V, which degraded down to .7V after a load was applied.

The cracked outer shell of the single cell remained intact and there was no leakage of the inner salts. The tops of the cells took on a hardened and bumpy texture, with one cell’s top collapsing slightly when pressed from a trapped pocket of air. Underneath the air pocket was a further hardened surface which lead me to believe that the salt solution had deeply solidified in the shell. From what I could determine there was no corrosion or oxidative effect on either metal in the cells.

I took the cells to Artengine’s Modlab gathering yesterday to perform capacitance tests to see what voltage limits they had and possibly explode them in the process. The starting electrical potential of the four cells was 5V since I had hooked up a 9V battery to them for a bit to show how fast they charged.

We started by running 30V through them in a series circuit which they took easily.

After running 30V through the cells we measured the inside temperature of the cells with an infrared thermometer which came to 25.2 degrees Celsius or 77.36 degrees Fahrenheit.

I then rewired the cells into a parallel circuit, which allowed each of the cells to have their own direct path through the circuit to the power supply instead of a shared path between all the cells to the power supply. So 30V running through each cell instead of 30V running through all cells combined.

While I was rewiring them I had to turn some of the cells on their sides and break a bit of the top to move the wires into place when I did that small drops of salty sugar syrup oozed out of some of them. Here’s a video of the capacitance test:

They took the voltage without bursting, though there was a faint smell of cotton candy in the air most likely due to the newly widened wire holes. You can see from the video that the cells are allowing the increasing voltage to flow through by the increase in milliamps, which measures the amount of electric charge passing a point in a circuit in time.

The two pictures above also show the increase in milliamps corresponding to the increase in voltage applied. After a minute or so of 30V direct power I unhooked them and measured their electrical potential.

The four in parallel had the electrical potential of 1.59V. Then we did a load test of a stepper motor on the cells which totally drained them and the motor did not run.

After taking the load off the cells the electrical potential bounced back to 1.42V.

We then put a 1.5V LED load on the cells and it powered the light rather well.

I was curious to see what the inside of the cells looked like and since one of the cells had slightly come apart from the movement of the rewiring I lifted the solidified salt innards and wires out of the cell.

At the bottom of the candy shell was a small pool of what I can assume was a liquified salt and sugar mixture, which seems to have helped in the exchange of electrons between the two dissimilar metals. The salty plug was moist throughout and gradually harder nearer to where the salts met the air surface of the cell. Here is another picture with the light corrected to show accurate coloring and stratification of the salt plug:

So there you have it! Darcy White, one of the Modlabbers present, also made a post here on the experiments with some great pictures. From my observations and the tests it seems more appropriate to call these objects rechargeable batteries instead of capacitors. I plan to revise the design a bit to see if I can get more out of the cells in the future.

I hooked the ground terminal to the copper and tapped on the exposed crystal head with the power probe.

The oscilloscope was set at 10 millivolts per division and auto-triggering so when I started to tap the crystal lightly we saw spikes between 40-50 millivolts. I then clamped the crystal between two pieces of conductive foam and hooked the power and ground probes of a digital oscilloscope to the foam.

After a light tap on the crystal the digital oscilloscope (set in millivolts) recorded quite a large spike!

We were able to record an output of about 100 millivolts from the digital oscilloscope just with light tapping on the crystal. There are 1000 millivolts in 1 volt, so the output from these tests was small, but from the experiments I could see the application of a larger force generating an even greater electrical potential from the crystal.

I initially made molds by hollowing out potatoes, which could still be done, but I became frustrated with my design falling over and spilling the sugar syrup so I bought a silicon mold used to make ice cube shot glasses instead. Whatever you decide to use, oil all surfaces that will touch the sugar and set on a cutting board to allow for ease of movement.

Add 2 cups of sugar, 2/3 cup of corn syrup and 1 cup of water into a medium sized saucepan over medium-high heat.

Heat to 300 degrees F, stirring frequently. Use a candy thermometer to ensure accurate temperatures. I don’t advise changing the temperature of the stove at all to speed up the process or you could burn the syrup. Depending on the stove this step should take 20-30 minutes. I also recommend using a silicon spatula that can withstand high temperatures.

When it reaches 300 degrees take off the heat and allow to cool slightly to 265 degrees. You could add food coloring at this time if you’d like to have more colorful capacitors, though if your mixture is brown, any color you add will most likely come out dark brown. Letting it cool slightly will reduce the amount of bubbles in your molds.

Pour the sugar syrup into the molds and allow to set overnight. Incidentally the sugar syrup makes these amazing circular crackles in the pot after dousing it with cold water!

Pop the candy out of the molds and wipe off the excess oil. They look almost like stained glass- just lovely.

Cut 4 pieces of both copper and aluminum wire (20 gauge) into 9 inch long strips. Wrap one piece of the aluminum wire around some needle-nose pliers four times and pull up to form a spiral. Make sure none of the curves touch each other to ensure a maximum surface area when placed into the shells.

Drop the wire into a shell and bend the arm of the wire over the side to secure it in place. Do the same to a piece of copper wire and drop it in on the opposite side of the shell.

Fill all four of the shells with the wire and set aside. Take out some previously prepared Rochelle salt (Potassium Sodium Tartrate) and some Epsom salt (Magnesium Sulfate), easily procured from a grocery store or pharmacy. For those who haven’t used Epsom salts before, they are often used in baths to relax sore muscles, a coagulent for making tofu, a brewing salt in beer production and as a laxative.

Make sure the Rochelle salt is crushed to ensure that it will be mixed thoroughly with the Epsom salt.

For this experiment I mixed 1 part Rochelle salt to 2 parts Epsom salt- for four cells it was a combination of 4 tablespoons of Rochelle Salt and 8 tablespoons of Epsom salt. In the picture above the Rochelle salt is in the pot and the Epsom salt is in the spoon.

Stir frequently and mix the salts thoroughly- do not boil the solution. Just heat it until it is liquid which should take 5-10 minutes depending on the stove.

Pour the solution into the candy shells and set aside to cool overnight.

From my research onto the strange properties of combining these salts I have come to some conclusions on what is happening inside the cell. There have been some interesting experiments in the past with Epsom salt cells and combining other material with Rochelle and Epsom salts, though they don’t go into much detail as to why or how it works. From what I can determine Magnesium Sulfate (Epsom salt) is the primary substance that causes the absorption of sound in seawater. Absorption in this case means the conversion of acoustic energy into heat energy. Potassium Sodium Tartrate (Rochelle Salt) releases energy when pressed and seems to emit the energy in waves as the particles attempt to realign after the applied force. A quartz clock works in this way- electricity is applied to it causing it to oscillate and generate a regularly timed series of electrical pulses that is used to mark time. The quartz crystal has a precisely defined natural frequency (caused by its shape and size) at which it prefers to oscillate, and this is used to stabilize the frequency of a periodic voltage applied to the crystal. My theory is that the Epsom salt allows for the continuation of tiny oscillations from the Rochelle salt when a charge is applied. Both Epsom salt and Rochelle salt are highly hygroscopic, which means they attract and retain water from their surrounding environment, and this allows for the movement of ions through the solution despite it being almost entirely solid. I discovered that my cells have a resting state of .6V DC per cell.

When under load the cell discharges rather quickly. To test my theory I took a 9V battery and hooked it up to one cell.

After 30 seconds of energy exchange between the 9V battery and the cell, I unhooked it and measured the voltage.

The cell had gone from .6V DC to 1.6V DC.

I then tied four cells together anode to cathode and left an anode and cathode free to hook the battery to:

The resting state of four cells together is 1.9V DC.

I hooked the 9V up to the open anode and cathode and charged it for 30 seconds.

The four cells went from 1.9V DC to 6V DC.

I then put a load on the cells by hooking a 3V LED (Candied from a previous experiment).

The LED remained on for about 60 seconds then flickered out. I tested the voltage of the cells after unhooking the LED and found that they had discharged 2.9V and their capacity was at 3.1V DC.

So there you have it! I then tested the cells by blowing hot air from a hair dryer onto them, which fluctuated the voltage .1V up and down and also put them on a subwoofer to see if vibrations would cause fluctuation, which it did .1V up and down. I cracked the outer shell of one of them during the hot air test and since then they’ve stayed in my kitchen with me periodically testing their energy stores which after several days have stayed at .6V per cell. An instructable on how to make them is here.

I found some helpful guides here and here, but diverged from both guides several times without ill effect. Here are my instructions for making Rochelle salt (Potassium Sodium Tartrate), which yielded at least 5 tablespoons full of the salt and several large single crystals in a few days.

The recipe calls for cream of tartar (Potassium Bitartrate or Potassium Hydrogen Tartrate) and washing soda (soda ash or Sodium Carbonate). Cream of tartar is a byproduct of winemaking; as the grapes age this acidic salt forms on the barrels of wine and is collected and used in a variety of household purposes, from preventing sugars from crystallizing to an ingredient in baking powder to stabilizing egg whites in recipes. Washing soda is highly alkaline (pH of 11) and often used as a water softener. It can be extracted from the ashes of plants and is sometimes used to make German pretzels. Washing soda can be made by heating baking soda (Sodium Bicarbonate or Sodium Hydrogen Carbonate) in an oven to break and evaporate the bonds of hydrogen to leave the Sodium Carbonate.

I didn’t have access to washing soda at my local grocery store so I had to make some. There is a difference between store bought washing soda versus washing soda made at home from baking soda. Arm & Hammer washing soda or any similar brand is decahydrate (contains ten molecules of water of crystallization per molecule) and homemade washing soda is anhydrate (lacks the presence of physically attached water). This means that you will need less homemade washing soda to achieve the same or similar results of store-bought washing soda. In the picture above I started with 1 1/2 cups of baking soda on a baking sheet. This makes way more washing soda than you need for the Rochelle salt so I suggest saving it to clean with or make a homemade laundry detergent.

Spread the baking soda across the sheet in a thin even layer and bake at 300 degrees F for 2 hours, stirring and re-spreading into a thin layer every 30 minutes. Take out and allow to cool for 5 minutes and prepare in a small saucepan 10 tablespoons of cream of tartar in 1 cup of water.

Washing soda can be slightly irritating to the skin and mucous membranes so it might be best to ventilate the area and wear gloves. Heat the water and cream of tartar over medium heat until it is slightly boiling and add a teaspoon full of washing soda to the pot. You’ll notice a lot of bubbles and fizzing!

Keep adding teaspoons of washing soda to the solution until it reaches it’s saturation point. This will be suddenly apparent as the bubbling and fizzing will stop abruptly after adding the soda.

I added a total of 8 teaspoons of my homemade washing soda to reach the saturation point. Boil this solution uncovered for 5 more minutes to evaporate more of the water. Allow the pot to cool then place uncovered in the refrigerator or a cool place. After a few hours you should see crystals start to grow!

Keep in the refrigerator overnight (I kept mine in the coldest part of the refrigerator) and in the morning you should have a substantial growth of crystals.

Drain the excess fluid and place a few small crystals back in the dish as seeds and place in the refrigerator again. Separate and dry the other crystals on paper towels.

When tested a Rochelle salt crystal can generate a peak charge of 9.6 volts of electricity after being tapped. They can also be used as a laxative and in microphones. Here is my instructable on it. After they are dry you can store them in a glass jar for later use or crush them for use in my next experiment!

Because I’m a curious person, I peeked inside all the pots, fascinated to find that the gelatin overflow had sealed the insides from evaporating. The aluminum wire on some of the pumpkins was in a state of foaming oxidation but the copper looked shinier and not much changed. For giggles I jiggled each pot to stir up the electrolyte a bit, then opened the center Jack O’ Lantern. To my mixed delight I found the sugar crystals completely melted from the LED dome and it alight!

It seems that the sugars released from the decaying pumpkins added to the electrolyte mixture to fuel the light a bit more. I was kicking myself for not testing it throughout the week too. I came back to the window when it was dark out to see the effect and it looked even brighter than when I initially created it!

Granted it looks a bit creepier than when it started out but was I impressed! The giant mold splotch on the center Jack O’ Lantern face can be attributed to it’s elevated sugar content as the sugar syrup from the candied LED is inside.

I tested the voltage as well- a solid 1.5 volts. Just super. You can bet these babies will be staying the apartment for further study!

Update: One day later and I noticed the aluminum wire had melted and broken in several pots.

Since the connections were broken between the wires the LED would not light. Thus ended the pumpkin battery experiment. It had a great run of more than a week, which was longer than I expected it to go!

You’ll need miniature pumpkins (I used Baby Boo), unflavored gelatin, salt, vinegar and oil from the grocery store. You’ll also need 18 gauge copper and aluminum wire, an LED (preferably one that runs on 1.5 volts- I used one that I had candied in an earlier project), wire cutters, pliers, a ruler and multimeter. In the kitchen you’ll need a medium sized bowl, small bowl, small pot, cookie sheet, pairing knife and mellon baller (or spoon). If you already have the tools and kitchen stuff the project should cost about $20.

Start by cutting the top off a pumpkin in a circle and scooping out the seeds and innards.

You will only need seven pumpkins, six to make the battery and one to house the light so choose the battery pumpkins to be slightly flatter and the center pumpkin to be slightly larger so you can cut a decent face into it. Keep the guts and seeds for later!

Cut 6 pieces of both aluminum and copper wire into 8 inch strips and take one piece of aluminum wire and wrap it around itself three times.

Flatten the swirl, making sure none of the wire touches the inner curves of the swirl (this increases surface area for the electrochemical reaction) and bend the straight part up.

Set inside the hollowed out pumpkin and do the same thing to a piece of copper wire. Set the wires on opposite sides of the pumpkin and cut small groves into the rim of the pumpkin so that the wires can sit comfortably far apart from each other.

It is important that the two wires inside the pumpkin do not touch or the circuit will short out. Position the wires so they are a few millimeters above the bottom of the pumpkin. Repeat theses steps for the rest of the wire and pumpkins. Take the center pumpkin and carve a face into it.

Set the pumpkins aside and mix together 4 packets of gelatin, 8 tablespoons of salt, and 1 cup of vinegar.

Boil 1 cup of vinegar. I ended up adding an additional cup of water to the electrolyte so I’d have enough for all the pumpkins and had just enough so add 1 cup of water to the recipe. After it has boiled add it to the mixture and put in the fridge to set overnight.

Take the pumpkins seeds and guts and drop them in a bowl filled with water. The seeds will float to the top for easy pickings. Separate the guts from the seeds and spread the seeds on a cookie sheet. Leave the sheet out to dry overnight.

Form a circle with the pumpkins matching a copper wire from one with an aluminum wire from another.

Remove the tops off of two pumpkins and tightly twist the aluminum and copper wires together at least three times. Repeat this step for all of the other pumpkins and stop before you tie the last two wires together.

Take the LED and test it to make sure it works with a 3V coin cell battery. You don’t have to do this step if you don’t have a battery but it doesn’t hurt to make sure.

The LED I used has been candied with sugar crystals- it diffuses the light better and makes for a fun addition to the Halloween themed project. The legs of the LED are different lengths- the longer leg will be twisted around the copper wire and the shorter leg will be twisted around the aluminum wire.

This is what the circle should look like by now:

Take out the electrolyte from the fridge and stir until completely mixed.

Pour into the pumpkin pots, making sure both the copper and aluminum wire swirls are completely covered.

By the fifth pot you should see the LED alight. If not, check your connections and make sure the LED was twisted around the correct wires.

You can check the voltage by attaching a clip from the aluminum wire to the ground probe of a multimeter and a clip from the copper wire to the power probe.

Set the multimeter to detect DC and you should see the output of the pumpkin pots is 1.5 volts.

Woo!

Take the pumpkin seeds and mix them up so they aren’t stuck to the pan. Spray or mix a tablespoon of light oil- vegetable or canola and a teaspoon of salt into them. Make sure they are evenly dispersed in a single layer on the pan.

Heat the oven to 300 degrees and bake for 15-20 minutes or until a golden brown, mixing them up half-way through. Take out and allow to cool. Put in a bowl and into the center of the pumpkin pots.

If you are lucky enough to be near some trees dropping colorful leaves go pick some up and line the bowl with them.

I checked the voltage every hour on the hour and the pots put out between 1.4-1.5 V from 1PM until 7PM. The LED light decreases over time but you can revive it a bit by stirring the contents of the pots.

When the pumpkins get wrinkly you can compost or recycle the parts! I’ve also posted an instructable on how to make it here.

Take the LEDs, wire and electrical tape and wrap the wire around the leads, securing them with the tape. Wet the heads of the LEDs slightly and roll them in sugar to coat them and  provide a base for the crystals to grow.

After turning the sugar syrup off wait 5-10 minutes for it to cool, then pour it into either glass jars or paper cups. My first attempt was with glass jars but I found the crystallization took too long so I transfered the mixture to individual paper cups and that made it much easier.

Wrap the ends of the wire around a pencil and lower it into the cups, adjusting the wire wraps to the height of the sugar line so that the head of the LED is totally immersed in the sugar.

Set aside in a cool place away from direct light and wait 1-4 weeks, depending on how large you want the crystals to be.

Peel off the paper cup from the sugar crystal and carefully break off the unconnected crystals from the main crystal formation around the head. Running it under warm water helps.

Set on a sheet of wax paper and allow to dry for a day or so.

After completely dry, test with a 3V coin cell battery. You’ll notice that the sugar helps diffuse and extend the luminosity of the LED to a much larger area.

I’d advise you not to eat this experiment- LEDs are small enough to be accidentally swallowed so use caution if you do this experiment with kids. Have fun! Here’s a link to the instructable too!

It is a visual clock made from code that queries the server for the current time and creates three ovals filled with a shade of gray dependent on the hour, minute and second, then saves the image created as a PNG. The darker the shades the closer it is to the end of the day and the lighter the shades the closer it is to the beginning of the day. I used some HTML to display the current image of time and Javascript that refreshes the page every second to constantly display the continually regenerating PNG.

I grasp concepts more easily if there are visual elements involved and I’ve been really interested lately on ways to depict time and nature on the web so I came up with this nested circle idea to help me understand how PHP works and how it interacts with HTML and Javascript. After I came up with what I wanted to create I searched and found this awesome example from Jack Herrington at IBM of how you can draw and position shapes along a z axis to make them appear layered.

Using the glib.php from the example I added the shade variations and rewrote it to draw the circles with the new shade of gray depending on the breakdown of current time. The orange cresent is just for aethetics. Here’s the code for the project:

<html>
<head>
<title>Current Time</title>

<body bgcolor=”3399CC”>

<script type=”text/JavaScript”>
<!–
function timedRefresh(timeoutPeriod) {
setTimeout(“location.reload(true);”,timeoutPeriod);
}
//   –>
</script>
</head>
<body bgcolor=”3399CC”>
<font size=”20″ face=”Georgia” color=”#FF9900″>
<body onload=”JavaScript:timedRefresh(1000);”>

<?php
require_once( “glib.php” );

function zsort( $a, $b )
{
if ( $a->z() < $b->z() ) return -1;
if ( $a->z() > $b->z() ) return 1;
return 0;
}

$ge = new GraphicsEnvironment( 800, 800 );

$ge->addColor( “orange”, 255, 153, 0 );
$ge->addColor( “msgray59″, 0, 0, 0 );
$ge->addColor( “msgray58″, 4, 4, 4 );
$ge->addColor( “msgray57″, 8, 8, 8 );
$ge->addColor( “msgray56″, 12, 12, 12 );
$ge->addColor( “msgray55″, 16, 16, 16 );
$ge->addColor( “msgray54″, 20, 20, 20 );
$ge->addColor( “msgray53″, 24, 24, 24 );
$ge->addColor( “msgray52″, 28, 28, 28 );
$ge->addColor( “msgray51″, 32, 32, 32 );
$ge->addColor( “msgray50″, 36, 36, 36 );
$ge->addColor( “msgray49″, 40, 40, 40 );
$ge->addColor( “msgray48″, 44, 44, 44 );
$ge->addColor( “msgray47″, 48, 48, 48 );
$ge->addColor( “msgray46″, 52, 52, 52 );
$ge->addColor( “msgray45″, 56, 56, 56 );
$ge->addColor( “msgray44″, 60, 60, 60 );
$ge->addColor( “msgray43″, 64, 64, 64 );
$ge->addColor( “msgray42″, 68, 68, 68 );
$ge->addColor( “msgray41″, 72, 72, 72 );
$ge->addColor( “msgray40″, 76, 76, 76 );
$ge->addColor( “msgray39″, 80, 80, 80 );
$ge->addColor( “msgray38″, 84, 84, 84 );
$ge->addColor( “msgray37″, 88, 88, 88 );
$ge->addColor( “msgray36″, 92, 92, 92 );
$ge->addColor( “msgray35″, 96, 96, 96 );
$ge->addColor( “msgray34″, 100, 100, 100 );
$ge->addColor( “msgray33″, 104, 104, 104 );
$ge->addColor( “msgray32″, 108, 108, 108 );
$ge->addColor( “msgray31″, 112, 112, 112 );
$ge->addColor( “msgray30″, 116, 116, 116 );
$ge->addColor( “msgray29″, 120, 120, 120 );
$ge->addColor( “msgray28″, 124, 124, 124 );
$ge->addColor( “msgray27″, 128, 128, 128 );
$ge->addColor( “msgray26″, 132, 132, 132 );
$ge->addColor( “msgray25″, 136, 136, 136 );
$ge->addColor( “msgray24″, 140, 140, 140 );
$ge->addColor( “msgray23″, 144, 144, 144 );
$ge->addColor( “msgray22″, 148, 148, 148 );
$ge->addColor( “msgray21″, 152, 152, 152 );
$ge->addColor( “msgray20″, 156, 156, 156 );
$ge->addColor( “msgray19″, 160, 160, 160 );
$ge->addColor( “msgray18″, 164, 164, 164 );
$ge->addColor( “msgray17″, 168, 168, 168 );
$ge->addColor( “msgray16″, 172, 172, 172 );
$ge->addColor( “msgray15″, 176, 176, 176 );
$ge->addColor( “msgray14″, 180, 180, 180 );
$ge->addColor( “msgray13″, 184, 184, 184 );
$ge->addColor( “msgray12″, 188, 188, 188 );
$ge->addColor( “msgray11″, 192, 192, 192 );
$ge->addColor( “msgray10″, 196, 196, 196 );
$ge->addColor( “msgray9″, 200, 200, 200 );
$ge->addColor( “msgray8″, 204, 204, 204 );
$ge->addColor( “msgray7″, 208, 208, 208 );
$ge->addColor( “msgray6″, 212, 212, 212 );
$ge->addColor( “msgray5″, 216, 216, 216 );
$ge->addColor( “msgray4″, 220, 220, 220 );
$ge->addColor( “msgray3″, 224, 224, 224 );
$ge->addColor( “msgray2″, 228, 228, 228 );
$ge->addColor( “msgray1″, 232, 232, 232 );
$ge->addColor( “msgray0″, 236, 236, 236 );

$ge->addColor( “hgray23″, 0, 0, 0 );
$ge->addColor( “hgray22″, 10, 10, 10 );
$ge->addColor( “hgray21″, 20, 20, 20 );
$ge->addColor( “hgray20″, 30, 30, 30 );
$ge->addColor( “hgray19″, 40, 40, 40 );
$ge->addColor( “hgray18″, 50, 50, 50 );
$ge->addColor( “hgray17″, 60, 60, 60 );
$ge->addColor( “hgray16″, 70, 70, 70 );
$ge->addColor( “hgray15″, 80, 80, 80 );
$ge->addColor( “hgray14″, 90, 90, 90 );
$ge->addColor( “hgray13″, 100, 100, 100 );
$ge->addColor( “hgray12″, 110, 110, 110 );
$ge->addColor( “hgray11″, 120, 120, 120 );
$ge->addColor( “hgray10″, 130, 130, 130 );
$ge->addColor( “hgray9″, 140, 140, 140 );
$ge->addColor( “hgray8″, 150, 150, 150 );
$ge->addColor( “hgray7″, 160, 160, 160 );
$ge->addColor( “hgray6″, 170, 170, 170 );
$ge->addColor( “hgray5″, 180, 180, 180 );
$ge->addColor( “hgray4″, 190, 190, 190 );
$ge->addColor( “hgray3″, 200, 200, 200 );
$ge->addColor( “hgray2″, 210, 210, 210 );
$ge->addColor( “hgray1″, 220, 220, 220 );
$ge->addColor( “hgray0″, 230, 230, 230 );

$newcolorH = array();
$newcolorH [0]= new Oval( 100, “hgray0″, 0, 0, 600, 600 );
$newcolorH [1]= new Oval( 100, “hgray1″, 0, 0, 600, 600 );
$newcolorH [2]= new Oval( 100, “hgray2″, 0, 0, 600, 600 );
$newcolorH [3]= new Oval( 100, “hgray3″, 0, 0, 600, 600 );
$newcolorH [4]= new Oval( 100, “hgray4″, 0, 0, 600, 600 );
$newcolorH [5]= new Oval( 100, “hgray5″, 0, 0, 600, 600 );
$newcolorH [6]= new Oval( 100, “hgray6″, 0, 0, 600, 600 );
$newcolorH [7]= new Oval( 100, “hgray7″, 0, 0, 600, 600 );
$newcolorH [8]= new Oval( 100, “hgray8″, 0, 0, 600, 600 );
$newcolorH [9]= new Oval( 100, “hgray9″, 0, 0, 600, 600 );
$newcolorH [10]= new Oval( 100, “hgray10″, 0, 0, 600, 600 );
$newcolorH [11]= new Oval( 100, “hgray11″, 0, 0, 600, 600 );
$newcolorH [12]= new Oval( 100, “hgray12″, 0, 0, 600, 600 );
$newcolorH [13]= new Oval( 100, “hgray13″, 0, 0, 600, 600 );
$newcolorH [14]= new Oval( 100, “hgray14″, 0, 0, 600, 600 );
$newcolorH [15]= new Oval( 100, “hgray15″, 0, 0, 600, 600 );
$newcolorH [16]= new Oval( 100, “hgray16″, 0, 0, 600, 600 );
$newcolorH [17]= new Oval( 100, “hgray17″, 0, 0, 600, 600 );
$newcolorH [18]= new Oval( 100, “hgray18″, 0, 0, 600, 600 );
$newcolorH [19]= new Oval( 100, “hgray19″, 0, 0, 600, 600 );
$newcolorH [20]= new Oval( 100, “hgray20″, 0, 0, 600, 600 );
$newcolorH [21]= new Oval( 100, “hgray21″, 0, 0, 600, 600 );
$newcolorH [22]= new Oval( 100, “hgray22″, 0, 0, 600, 600 );
$newcolorH [23]= new Oval( 100, “hgray23″, 0, 0, 600, 600 );

$newcolori = array();
$newcolori [0]= new Oval( 200, “msgray0″, 45, 45, 345, 345 );
$newcolori [1]= new Oval( 200, “msgray1″, 45, 45, 345, 345 );
$newcolori [2]= new Oval( 200, “msgray2″, 45, 45, 345, 345 );
$newcolori [3]= new Oval( 200, “msgray3″, 45, 45, 345, 345 );
$newcolori [4]= new Oval( 200, “msgray4″, 45, 45, 345, 345 );
$newcolori [5]= new Oval( 200, “msgray5″, 45, 45, 345, 345 );
$newcolori [6]= new Oval( 200, “msgray6″, 45, 45, 345, 345 );
$newcolori [7]= new Oval( 200, “msgray7″, 45, 45, 345, 345 );
$newcolori [8]= new Oval( 200, “msgray8″, 45, 45, 345, 345 );
$newcolori [9]= new Oval( 200, “msgray9″, 45, 45, 345, 345 );
$newcolori [10]= new Oval( 200, “msgray10″, 45, 45, 345, 345 );
$newcolori [11]= new Oval( 200, “msgray11″, 45, 45, 345, 345 );
$newcolori [12]= new Oval( 200, “msgray12″, 45, 45, 345, 345 );
$newcolori [13]= new Oval( 200, “msgray13″, 45, 45, 345, 345 );
$newcolori [14]= new Oval( 200, “msgray14″, 45, 45, 345, 345 );
$newcolori [15]= new Oval( 200, “msgray15″, 45, 45, 345, 345 );
$newcolori [16]= new Oval( 200, “msgray16″, 45, 45, 345, 345 );
$newcolori [17]= new Oval( 200, “msgray17″, 45, 45, 345, 345 );
$newcolori [18]= new Oval( 200, “msgray18″, 45, 45, 345, 345 );
$newcolori [19]= new Oval( 200, “msgray19″, 45, 45, 345, 345 );
$newcolori [20]= new Oval( 200, “msgray20″, 45, 45, 345, 345 );
$newcolori [21]= new Oval( 200, “msgray21″, 45, 45, 345, 345 );
$newcolori [22]= new Oval( 200, “msgray22″, 45, 45, 345, 345 );
$newcolori [23]= new Oval( 200, “msgray23″, 45, 45, 345, 345 );
$newcolori [24]= new Oval( 200, “msgray24″, 45, 45, 345, 345 );
$newcolori [25]= new Oval( 200, “msgray25″, 45, 45, 345, 345 );
$newcolori [26]= new Oval( 200, “msgray26″, 45, 45, 345, 345 );
$newcolori [27]= new Oval( 200, “msgray27″, 45, 45, 345, 345 );
$newcolori [28]= new Oval( 200, “msgray28″, 45, 45, 345, 345 );
$newcolori [29]= new Oval( 200, “msgray29″, 45, 45, 345, 345 );
$newcolori [30]= new Oval( 200, “msgray30″, 45, 45, 345, 345 );
$newcolori [31]= new Oval( 200, “msgray31″, 45, 45, 345, 345 );
$newcolori [32]= new Oval( 200, “msgray32″, 45, 45, 345, 345 );
$newcolori [33]= new Oval( 200, “msgray33″, 45, 45, 345, 345 );
$newcolori [34]= new Oval( 200, “msgray34″, 45, 45, 345, 345 );
$newcolori [35]= new Oval( 200, “msgray35″, 45, 45, 345, 345 );
$newcolori [36]= new Oval( 200, “msgray36″, 45, 45, 345, 345 );
$newcolori [37]= new Oval( 200, “msgray37″, 45, 45, 345, 345 );
$newcolori [38]= new Oval( 200, “msgray38″, 45, 45, 345, 345 );
$newcolori [39]= new Oval( 200, “msgray39″, 45, 45, 345, 345 );
$newcolori [40]= new Oval( 200, “msgray40″, 45, 45, 345, 345 );
$newcolori [41]= new Oval( 200, “msgray41″, 45, 45, 345, 345 );
$newcolori [42]= new Oval( 200, “msgray42″, 45, 45, 345, 345 );
$newcolori [43]= new Oval( 200, “msgray43″, 45, 45, 345, 345 );
$newcolori [44]= new Oval( 200, “msgray44″, 45, 45, 345, 345 );
$newcolori [45]= new Oval( 200, “msgray45″, 45, 45, 345, 345 );
$newcolori [46]= new Oval( 200, “msgray46″, 45, 45, 345, 345 );
$newcolori [47]= new Oval( 200, “msgray47″, 45, 45, 345, 345 );
$newcolori [48]= new Oval( 200, “msgray48″, 45, 45, 345, 345 );
$newcolori [49]= new Oval( 200, “msgray49″, 45, 45, 345, 345 );
$newcolori [50]= new Oval( 200, “msgray50″, 45, 45, 345, 345 );
$newcolori [51]= new Oval( 200, “msgray51″, 45, 45, 345, 345 );
$newcolori [52]= new Oval( 200, “msgray52″, 45, 45, 345, 345 );
$newcolori [53]= new Oval( 200, “msgray53″, 45, 45, 345, 345 );
$newcolori [54]= new Oval( 200, “msgray54″, 45, 45, 345, 345 );
$newcolori [55]= new Oval( 200, “msgray55″, 45, 45, 345, 345 );
$newcolori [56]= new Oval( 200, “msgray56″, 45, 45, 345, 345 );
$newcolori [57]= new Oval( 200, “msgray57″, 45, 45, 345, 345 );
$newcolori [58]= new Oval( 200, “msgray58″, 45, 45, 345, 345 );
$newcolori [59]= new Oval( 200, “msgray59″, 45, 45, 345, 345 );

$newcolors = array();
$newcolors [0]= new Oval( 300, “msgray0″, 75, 75, 175, 175 );
$newcolors [1]= new Oval( 300, “msgray1″, 75, 75, 175, 175 );
$newcolors [2]= new Oval( 300, “msgray2″, 75, 75, 175, 175 );
$newcolors [3]= new Oval( 300, “msgray3″, 75, 75, 175, 175 );
$newcolors [4]= new Oval( 300, “msgray4″, 75, 75, 175, 175 );
$newcolors [5]= new Oval( 300, “msgray5″, 75, 75, 175, 175 );
$newcolors [6]= new Oval( 300, “msgray6″, 75, 75, 175, 175 );
$newcolors [7]= new Oval( 300, “msgray7″, 75, 75, 175, 175 );
$newcolors [8]= new Oval( 300, “msgray8″, 75, 75, 175, 175 );
$newcolors [9]= new Oval( 300, “msgray9″, 75, 75, 175, 175 );
$newcolors [10]= new Oval( 300, “msgray10″, 75, 75, 175, 175 );
$newcolors [11]= new Oval( 300, “msgray11″, 75, 75, 175, 175 );
$newcolors [12]= new Oval( 300, “msgray12″, 75, 75, 175, 175 );
$newcolors [13]= new Oval( 300, “msgray13″, 75, 75, 175, 175 );
$newcolors [14]= new Oval( 300, “msgray14″, 75, 75, 175, 175 );
$newcolors [15]= new Oval( 300, “msgray15″, 75, 75, 175, 175 );
$newcolors [16]= new Oval( 300, “msgray16″, 75, 75, 175, 175 );
$newcolors [17]= new Oval( 300, “msgray17″, 75, 75, 175, 175 );
$newcolors [18]= new Oval( 300, “msgray18″, 75, 75, 175, 175 );
$newcolors [19]= new Oval( 300, “msgray19″, 75, 75, 175, 175 );
$newcolors [20]= new Oval( 300, “msgray20″, 75, 75, 175, 175 );
$newcolors [21]= new Oval( 300, “msgray21″, 75, 75, 175, 175 );
$newcolors [22]= new Oval( 300, “msgray22″, 75, 75, 175, 175 );
$newcolors [23]= new Oval( 300, “msgray23″, 75, 75, 175, 175 );
$newcolors [24]= new Oval( 300, “msgray24″, 75, 75, 175, 175 );
$newcolors [25]= new Oval( 300, “msgray25″, 75, 75, 175, 175 );
$newcolors [26]= new Oval( 300, “msgray26″, 75, 75, 175, 175 );
$newcolors [27]= new Oval( 300, “msgray27″, 75, 75, 175, 175 );
$newcolors [28]= new Oval( 300, “msgray28″, 75, 75, 175, 175 );
$newcolors [29]= new Oval( 300, “msgray29″, 75, 75, 175, 175 );
$newcolors [30]= new Oval( 300, “msgray30″, 75, 75, 175, 175 );
$newcolors [31]= new Oval( 300, “msgray31″, 75, 75, 175, 175 );
$newcolors [32]= new Oval( 300, “msgray32″, 75, 75, 175, 175 );
$newcolors [33]= new Oval( 300, “msgray33″, 75, 75, 175, 175 );
$newcolors [34]= new Oval( 300, “msgray34″, 75, 75, 175, 175 );
$newcolors [35]= new Oval( 300, “msgray35″, 75, 75, 175, 175 );
$newcolors [36]= new Oval( 300, “msgray36″, 75, 75, 175, 175 );
$newcolors [37]= new Oval( 300, “msgray37″, 75, 75, 175, 175 );
$newcolors [38]= new Oval( 300, “msgray38″, 75, 75, 175, 175 );
$newcolors [39]= new Oval( 300, “msgray39″, 75, 75, 175, 175 );
$newcolors [40]= new Oval( 300, “msgray40″, 75, 75, 175, 175 );
$newcolors [41]= new Oval( 300, “msgray41″, 75, 75, 175, 175 );
$newcolors [42]= new Oval( 300, “msgray42″, 75, 75, 175, 175 );
$newcolors [43]= new Oval( 300, “msgray43″, 75, 75, 175, 175 );
$newcolors [44]= new Oval( 300, “msgray44″, 75, 75, 175, 175 );
$newcolors [45]= new Oval( 300, “msgray45″, 75, 75, 175, 175 );
$newcolors [46]= new Oval( 300, “msgray46″, 75, 75, 175, 175 );
$newcolors [47]= new Oval( 300, “msgray47″, 75, 75, 175, 175 );
$newcolors [48]= new Oval( 300, “msgray48″, 75, 75, 175, 175 );
$newcolors [49]= new Oval( 300, “msgray49″, 75, 75, 175, 175 );
$newcolors [50]= new Oval( 300, “msgray50″, 75, 75, 175, 175 );
$newcolors [51]= new Oval( 300, “msgray51″, 75, 75, 175, 175 );
$newcolors [52]= new Oval( 300, “msgray52″, 75, 75, 175, 175 );
$newcolors [53]= new Oval( 300, “msgray53″, 75, 75, 175, 175 );
$newcolors [54]= new Oval( 300, “msgray54″, 75, 75, 175, 175 );
$newcolors [55]= new Oval( 300, “msgray55″, 75, 75, 175, 175 );
$newcolors [56]= new Oval( 300, “msgray56″, 75, 75, 175, 175 );
$newcolors [57]= new Oval( 300, “msgray57″, 75, 75, 175, 175 );
$newcolors [58]= new Oval( 300, “msgray58″, 75, 75, 175, 175 );
$newcolors [59]= new Oval( 300, “msgray59″, 75, 75, 175, 175 );

$gobjs = array();
putenv (“TZ=US/Eastern”);
$gobjs [0]= $newcolorH[(int) date("H")];
$gobjs [1]= $newcolori[(int) date("i")];
$gobjs [2]= $newcolors[(int) date("s")];
$gobjs [3]= new Oval( 0, “orange”, 0, 0, 620, 620 );

usort( $gobjs, “zsort” );

foreach( $gobjs as $gobj ) { $gobj->render( $ge ); }

$today = date(“H:i:s”);
echo ($today);

$ge->saveAsPng( “currenttime.png” );
?>
<center><img src=”http://www.emilydaniels.com/learning/currenttime.png” /></center>

</font>
</body>
</html>

To get the increments between the grays I divided 60 into 255 and rounded for the shades between the minutes and seconds and 24 into 255 and rounded for the hours. I’m sure there is a better way to have done it, but it worked and it was a fun intro to PHP. Next up, learning to comment the code.

My original idea was to use the GPS and compass functionality of the iPhone to direct one’s feet in the direction of the nearest space of play, but after considering the strengths of my partner James DeMond we decided a Javascript app would make for a nice cross-platform functionality on all browsers and smartphones so more people could use it.

I was inspired by the pastoral landscapes painted in the old days to convey lands of plenty and whilst Beethoven’s 6th Symphony played, I made the first design.

The color field at the top of the screen allowed a view to the underlying Google map while the bottom was solidly grounded to hold the porthole window. After I got the gist of what I wanted to portray down, I added icons specific to the season that would show on the underlying map as good suggestions of things to do.

After fooling around with the Google Maps API, James pronounced the circular porthole design dead as apparently when dealing with image overlays even transparent areas are treated as part of the image and that doesn’t allow you to interact with the map underneath. Square and rectangle windows cool, circle windows, not.

I hated it. I really wanted the wondrous magic of looking through a porthole to another world that a circular frame would provide so I tweaked the design a bit more.

And a bit more…

And a bit more. I used small floating dots to create a kind of effervescent effect to play with the viewer’s depth perception and recreate a little bit of the magic you experience in a field of fireflies at dusk, which also could be read as softly falling snow for the whimsy to span multiple seasons. I also added the call of Go / Allez so that once you discovered where you were and what was good to do, you’d… go do it.

After James had it up and working I realized that though the color field was sky-like on my screen, on a larger monitor or screen size the effect would be lost and it would look like just another rectangle. Keeping with the idea of discovery, I changed the color overlay to read like you had set down your glass on a table and were looking through the bottom of it into something extraordinary.

The effect was hard to pull off so I blurred it up a bit so it seemed to read like a foggy window and added more glowing bits.

Which worked well until we discovered that there wasn’t data available for some of the things in each season or there was a lot more data sets available for individual seasons, so 2 suggested activities turned into 8 and I needed to redesign the content keeping this in mind. I discovered how to make the square that I was bounded by disappear with the way I erased and cut up the pieces of the image for the page. On the advice of a friend I went back to a cleaner more defined look to the elements and realized I was still holding on to parts of the design that no longer made sense to be present. I moved the rotation of the seasons out of the porthole and made them more in tune with how one would think of the earth orbiting the sun to give the information more of a grounding in reality. In order to advance through the seasons and see all pages you need to click the sun and it will only go around in a circle, pausing to load the data for each season as one would go through a year; winter, spring, summer and autumn.

When building web pages and apps it’s easy to forget the concept of time and nature. Why would one go to the trouble of incorporating asymmetrical shapes or buttons that take you through a journey in time when it’s so much more useful and utilitarian to stick to squares? The simple answer is because it reminds us of our humanity. We contribute daily to our collective wisdom through the web and the windows that we use to interact with and add to it need to reflect more than bits and bytes in order for us to remember how organic and experiential the world is. It’s a harder road to design upon but in the end it will help to preserve the random complexity of life.

You can experience the application for yourself here.