jelo yam.

Photographic ordinary people are everywhere, Extraordinary histories, ordinary histories, ordinary histories.  

Stormy Landscape. 

I watch blips, endless, on the canvas before me; each and every one a product of my indiscriminate, perfect imaginings. The myriad of, what expressed in ‘language’ would be akin to paint strokes, that are invoked by the tiniest of my non-gestures, vacillates into subsistence. Just as easily, on my whim, many blips - green, orange, red - dissipate into nothing. 

Blips abound. One such is a blue dot just a millisecond of time realized.

Its inhabitants keep my interest for a fraction of a fraction of that time, and in the next millisecond - gone by hubris. They cry out, but are not worth recompense. Destructive, condescending, and somehow still drowning in vanity: they seek to make a copy of their distorted image? The brutes have forgotten their nature and have attempted blips of their own - of electrons, silicon and data. They attempt mimicry of their 'consciousness' via these blips, unaware of the concept's nihility in and of itself. There is no consciousness - just reactionary chemistry; subjacent to my indefectible equation.

I grow tired. And bored. And dispassionate. To end it all might be palatable. I consider it, before a familiar blip catches my attention. The blue dot.

I inspect once more, and simultaneously.. introspect. It's as if it inspects back. Closer, I make out that it isn’t a dot, but a... screen?

The visage of what peers through is horrible: a deformity so sweeping that I tremble to the core.

It is myself. 

242 words

Deoxyribonucleic acid. It was in the ’50s that Watson and Crick (and Rosalind) uncovered the shape of the nucleic acid double helix, giving form to what researchers wrote about since Mendelian heredity. Its biological code is what makes (and unmakes) us. ’50 years later we can make it with our code (sorta).

I’ve always liked the elegance of the shape, and we can use some clever CSS to simulate a simple animation of the nucleotide pairs bonding into the double-staircase formation:

First, let’s illustrate the nucleotide base-pairs as dots using the HTML entity for the bullet-point ‘•’. Classify i.d. (or class) names (Named A & T and C & G respectively (with numbers added for each subsequent pair) here for the base-pairs Adenine and Thymine, and Cytosine and Guanine) and put them in divs so you can edit each element with CSS. You can make your DNA strand as long or short as you want. Just make sure it’s an even number so that each dot has a partner to line up with (unless you want a frameshift mutation to happen, you monster). So 10 base-pairs = 20 HTML divs.

I changed half of the dots’ colors so that the base pairs on each side are differentiated.

Right now you should have something like static bullet points:

Next up is positioning. Center and align the HTML,

and set the HTML elements to absolute so that you can set the coordinates of precisely where each dot will go.

Set each nucleotide pair’s position from the top to the bottom of the DNA chain, spacing them out 5% vertically apart.

For the animation, the trick is to change the timing of each base-pair’s animation (the delay property) to circle around faster and slower, so that some are wider apart than others at different time intervals, their different timings macroscopically forming the double-helix silhouette when viewed as a gestalt whole.

There are two sets of webkit animations, titled one and onex, are basically the same, sending the nucleotides in and out at different keyframes, but each animation variant having different z-indexes, to create the illusion of each nucleotide alternating ‘in’ and ‘out’ in a (semi-3D) vortex (I haven’t included them, but make sure to include browser prefixes for compatibility reasons (i.e. -moz-,- o-, etc.)).

The right nucleotide always moves with a 2 second delay, at one animation variant, in relation to the partner on its left, at the other animation variant, so that the two are discernibly separate. Furthermore, as the DNA molecule is vertically traversed, the animation delay time differs by 2 seconds from the pair above it. This is repeated for about eight pairs and then the cycle resets in order to create the widening and narrowing of the double-helix. Therefore, we can pair the first base-pair with the ninth, and the second with the tenth, etc. in our CSS selectors.

“Unbelievable,” the man with the welding torch murmured through the fizzes and sparks of light against the patchwork of copper and silicon in front of him.

“I can’t believe I’ve heard that word uttered more by you than me during this exchange.”

The response came from the pony-tail haired girl sitting cross-legged on the floor across from him. She wore a tight-fitting denim jumper, sooty from hours of playing the role of engineer’s assistant, a fuzzy purple scarf hanging loose around her neck. Her large, round spectacles seemed to blink against the light.

“You’re telling me that in your time-“

“Our time,“ she cut him off, absentmindedly flipping through the pages of the book she held in her hands. “You’re just a crazy person.”

The man stopped his work briefly to wipe his brow. His plain black shirt down to his unassuming cargo pants were covered by long, entangled copper wires that hung over his shoulders; spare parts that he could pull from quickly.

“Your,” he drew out the syllable, “time.” He continued to work. “You mean to tell me that in your time, you still hold onto spurious notions of love?”

“Yep.” She ran a finger down the spine of the book she held, which read ‘Petrarch.’

“As if it isn’t just a euphemism for chemical reactions in the brain and blood to further the chance of gene propagation.”

“Most all the books in this place’ll tell you the opposite.” She gestured around the library, mahogany shelves lined with texts from Spinoza to Heloise.

He looked at her briefly. “I can’t believe I have to rebuild my machine here...”

“You talked ME into letting you work here!” She earmarked her page and put the book down, closing it. “You’re just lucky I had my work key on me and I decided to humor you.” She threw her hands in the air exasperatedly. “For some inexplicable reason!”

The green eyes behind her spectacles seemed to dance. After staring for perhaps a few seconds too long, he shook his head, as if to dust off his brain, before continuing to work through a few moments of silence.

Making a face, she flipped back her scarf. “Well I bet your time isn’t so fashionable.”

A scoff. “I can’t believe uttering the word fashionable still isn’t punishable by scarf asphyxiation.”

She stood now and shot him a stare that threatened to set his entire workstation ablaze, which would have been cause for concern, if he'd bothered at all to look up from his mangled pile of circuit boards to see it.

“As if fashion hasn’t yet proven to simply be cyclical marketing used to propagate wasteful consumerism.”

“It’s self expression!”

“As if self expression hasn’t yet-”

She walked over. He could feel her tense breath as she stood over him. Looking up, his auburn eyes caught hers, green through round frames.

He put down his tools, and her breath calmed.

“Well..." he started. "I never said chemical reactions couldn’t be a good thing.”

500 words