Loading presentation...
Prezi is an interactive zooming presentation

Present Remotely

Send the link below via email or IM

Copy

Present to your audience

Start remote presentation

  • Invited audience members will follow you as you navigate and present
  • People invited to a presentation do not need a Prezi account
  • This link expires 10 minutes after you close the presentation
  • A maximum of 30 users can follow your presentation
  • Learn more about this feature in our knowledge base article

Do you really want to delete this prezi?

Neither you, nor the coeditors you shared it with will be able to recover it again.

DeleteCancel

Make your likes visible on Facebook?

Connect your Facebook account to Prezi and let your likes appear on your timeline.
You can change this under Settings & Account at any time.

No, thanks

Remediating Code: The Case of “Enigma n” and “Seattle Drift” by Jim Andrews

Presentation tool for Remediation in the Context of Transdisciplinarity conference in Bratislava. January 17, 2013.
by

Leonardo Flores

on 17 January 2013

Comments (0)

Please log in to add your comment.

Report abuse

Transcript of Remediating Code: The Case of “Enigma n” and “Seattle Drift” by Jim Andrews

Remediating Code: The Case of “Enigma n” and “Seattle Drift” http://www.vispo.com/animisms/enigman/index.htm http://www.vispo.com/animisms/SeattleDrift.html <!--

SEATTLE DRIFT by Jim Andrews, 1997.

Revised 2004 with help from Marko Niemi to make it
run on Mac and PC. Runs on most if not all Mac and
PC browsers. Linux untested.

This is the first DHTML piece I did.

-->

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">

<HTML>
<HEAD>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1">
<META NAME="GENERATOR" CONTENT="Notepad">
<META NAME="description" CONTENT="Seattle Drift is a DHTML poem written in the spirit of Seattle in 1997.">
<META NAME="keywords" CONTENT="Seattle, poem">
<META NAME="AUTHOR" CONTENT="Andrews">
<TITLE>Seattle Drift -- Jim Andrews</TITLE>
<STYLE TYPE="text/css">
<!--
.j{ font-size: 15pt;
font-family: Arial;
font-weight: normal;
text-decoration: none;
text-align: left;
color: White;
line-height: 120%;
position: absolute;
}

b { font-size: 10pt;
font-family: Arial;
font-weight: bold;
text-decoration: none;
}
.verbs {
text-decoration: none;
}
.s{ text-decoration: none;
color: Gray; }
-->
</style>

<script language="javascript">
<!--
// When doit=0, the words are motionless.
var doit= 0;

function start() {
// When doit=1, the words move.
doit = 1;
}

function stop() {
doit = 0;
}

function behave() {
// This reloads the window.
window.location.reload(false);
}

function moveIt() {
// This function is run upon loading the document (see the BODY statement).
// It is always running when the document is loaded. This is done by means
// of the setTimeout function. Essentially, there is a 15 millisecond
// delay between calls to this function.
moveMe(document.getElementById('SEATTLE').style, 4, 2);
moveMe(document.getElementById('DRIFT').style, 3, 2);
moveMe(document.getElementById('Im1').style, 4, 1);
moveMe(document.getElementById('a2').style, 5, 3);
moveMe(document.getElementById('bad3').style, 3, 3);
moveMe(document.getElementById('text4').style, 2, 1);
moveMe(document.getElementById('period5').style, 4, 4);
moveMe(document.getElementById('I6').style, 4, 1);
moveMe(document.getElementById('used7').style, 3, 3);
moveMe(document.getElementById('to8').style, 4, 2);
moveMe(document.getElementById('be9').style, 2, 3);
moveMe(document.getElementById('a10').style, 5, 5);
moveMe(document.getElementById('poem11').style, 1, 2);
moveMe(document.getElementById('but12').style, 3, 3);
moveMe(document.getElementById('drifted13').style, 1, 3);
moveMe(document.getElementById('from14').style, 4, 2);
moveMe(document.getElementById('the15').style, 5, 5);
moveMe(document.getElementById('scene16').style, 2, 3);
moveMe(document.getElementById('period17').style, 1, 4);
moveMe(document.getElementById('Do18').style, 2, 4);
moveMe(document.getElementById('me19').style, 3, 3);
moveMe(document.getElementById('period20').style, 2, 2);
moveMe(document.getElementById('I21').style, 4, 1);
moveMe(document.getElementById('just22').style, 2, 3);
moveMe(document.getElementById('want23').style, 3, 1);
moveMe(document.getElementById('you24').style, 3, 1);
moveMe(document.getElementById('to25').style, 3, 1);
moveMe(document.getElementById('do26').style, 3, 3);
moveMe(document.getElementById('me27').style, 4, 5);
moveMe(document.getElementById('period28').style, 2, 3);
setTimeout('moveIt()', 15);
}



function moveMe(aword, x, y) {
// This function handles text movement for IE 4+.
// The Math.random function generates a random number between 0 and 1
awordx=Math.random();
awordy=Math.random();
// If the x component random number is less than 0.5, then move the word
// to the left by doit pixels.
if (awordx <= 0.5) {
aword.left = parseInt(aword.left) - doit;
}
else {
// Else if the x component is greater than 0.5, move the word to the right
// by x*doit pixels.
aword.left = parseInt(aword.left) + x*doit;
}
if (aword.left < 0) {
// I choose not to let the words drift off the left of the screen. But this
// is not very likely anyway, given the weights I assign to x and y for each word.
aword.left = 10;
}
if (awordy <= 0.5) {
// Now apply the same sort of logic to the y drift of the words.
aword.top = parseInt(aword.top) - doit;
}
else {
aword.top = parseInt(aword.top) + y*doit;
}
if (aword.top < 0) {
aword.top = 10;
}
}

//-->
</script>


</HEAD>

<BODY onload="moveIt()" BGCOLOR="Black" link="Red" vlink="Red" alink="Red">

<table cellspacing="0" cellpadding="0" border=0>
<tr>
<td width="40">&nbsp;

</td>
<td align=left>
<a href="#" onclick="start();" style="left:100px;" class=verbs><B>Do the text</B></a>&nbsp;&nbsp;
<a href="#" onclick="stop();" class=verbs><B>Stop the text</B></a>&nbsp;&nbsp;
<a href="javascript: window.location.reload()" class=verbs><B>Discipline the text</B></a>
</td>
</tr>
</table>


<!--
Each of the div tags holds one word of the poem. OK it's a poem. Note that the Javascript references the ID tag
of each div. This is the way you get a handle on the div objects, through their ID. Note that the class j is
defined up at the top of the file as a style. The style information that accompanies each div object has to be
unique to that object, at least to start out with, because it determines the position of the word. I'm using
absolute positioning, which means that 0,0 is at top left of the viewable screen.

This piece was written, in part, in response to the questions about text and poetry that the new medium prompts
in me. I wanted the text of Seattle Drift to initially look like plain ordinary text so that the contrast is
more apparent. The questions that I have about text and poetry prompted by the new medium are similar in fashion
to those prompted by abstract art about art and representation. Both prompt, rather than raise the questions
directly.

Seattle Drift was also inspired by Seattle's own California girl Anne, who knows who she is.

Stylistically, the piece is similar to the pop-up poems (though not in behavior) in that the text talks about
itself. I like this approach because it focusses attention on the questions and also allows me to develop character.
The character is the text itself, and the character commenting on its own nature and behavior, though embodying
that nature and behavior also, beyond it but within it, like the rest of us.

And this neath text, what is it? It isn't a footnote, but another representation of the text. Some will read
this neath text more carefully than the other representation.
-->

<div id="SEATTLE" class="j" style="top:60px; left:50px;">
SEATTLE
</div>

<div id="DRIFT" class="j" style="top:60px; left:147px;">
DRIFT
</div>

<div id="Im1" class="j" style="top:100px; left:50px;">
I'm
</div>

<div id="a2" class="j" style="top:100px; left:81px;">
a
</div>

<div id="bad3" class="j" style="top:100px; left:98px;">
bad
</div>

<div id="text4" class="j" style="top:100px; left:138px;">
text
</div>

<div id="period5" class="j" style="top:100px; left:169px;">
.
</div>

<div id="I6" class="j" style="top:130px; left:50px;">
I
</div>

<div id="used7" class="j" style="top:130px; left:61px;">
used
</div>

<div id="to8" class="j" style="top:130px; left:110px;">
to
</div>

<div id="be9" class="j" style="top:130px; left:134px;">
be
</div>

<div id="a10" class="j" style="top:130px; left:162px;">
a
</div>

<div id="poem11" class="j" style="top:130px; left:181px;">
poem
</div>

<div id="but12" class="j" style="top:160px; left:50px;">
but
</div>

<div id="drifted13" class="j" style="top:160px; left:83px;">
drifted
</div>

<div id="from14" class="j" style="top:160px; left:147px;">
from
</div>

<div id="the15" class="j" style="top:160px; left:194px;">
the
</div>

<div id="scene16" class="j" style="top:160px; left:226px;">
scene
</div>

<div id="period17" class="j" style="top:160px; left:277px;">
.
</div>

<div id="Do18" class="j" style="top:190px; left:50px;">
Do
</div>

<div id="me19" class="j" style="top:190px; left:81px;">
me
</div>

<div id="period20" class="j" style="top:190px; left:109px;">
.
</div>

<div id="I21" class="j" style="top:220px; left:50px;">
I
</div>

<div id="just22" class="j" style="top:220px; left:64px;">
just
</div>

<div id="want23" class="j" style="top:220px; left:102px;">
want
</div>

<div id="you24" class="j" style="top:220px; left:152px;">
you
</div>

<div id="to25" class="j" style="top:220px; left:190px;">
to
</div>

<div id="do26" class="j" style="top:220px; left:212px;">
do
</div>

<div id="me27" class="j" style="top:220px; left:240px;">
me
</div>

<div id="period28" class="j" style="top:220px; left:268px;">
.
</div>

<TABLE BORDER=0 ALIGN="RIGHT" VALIGN="BOTTOM" width=100% height=100%>
<TR>
<TD align=left valign="BOTTOM"> </td>
<TD align=right valign="BOTTOM">
<FONT SIZE="-2" FACE="Arial" COLOR="Gray"><A HREF="SeattleDrift.html" style="text-decoration:none;color:Gray;">Drift Home</A></FONT><BR>


<FONT FACE="Times New Roman">
<a href="../index.html" class="s">
<FONT COLOR="#FF0000"><FONT>V</FONT></FONT>
<FONT COLOR="#FFFF00"><FONT SIZE=-1>I</FONT></FONT>
<FONT COLOR="#00FF00"><FONT SIZE=-2>S</FONT></FONT>
<FONT COLOR="#0000FF"><FONT SIZE=-1>P</FONT></FONT>
<FONT COLOR="#FF80FF"><FONT>O</FONT></FONT>
</a>
<BR>

<FONT SIZE="-2" FACE="Arial" COLOR="Gray"><A HREF="index.html" style="text-decoration:none;color:Gray;">Animisms</A></FONT>

</FONT></TD>
</TR>
</TABLE>

</BODY>
</HTML> Seattle Drift (current version) Seattle Drift (1999 version) <!--

This document was created with HomeSite 2.5

If you want to use this code, please contact me

at jim@vispo.com Please don't

use it without my permission.



It requires Netscape 4+ or IE 4+ to run.



I am indebted to Thau's tutorials at www.webmonkey.com.

Thanks, Thau. And to Taylor and his tutorials at

www.webmonkey.com on DHTML. Thank you O gurus! -->



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">



<HTML>

<HEAD>

<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1">

<META NAME="GENERATOR" CONTENT="Homesite">

<META NAME="description" CONTENT="Seattle Drift is a DHTML poem written in the spirit of the place where they work like hell and have their fun when they can and get it good.">

<META NAME="keywords" CONTENT="Seattle Drift, Web art, visual poetry, vispo, Andrews, concrete, animation, hyper real, alphabet, lettristic, poetics, innovative, innovation, poet, typography, Apollinaire, cabalistic">

<META NAME="AUTHOR" CONTENT="Andrews">

<TITLE>Seattle Drift -- Jim Andrews</TITLE>

<STYLE TYPE="text/css">

<!--

.j{ font-size: 15pt;

font-family: Arial;

font-weight: normal;

text-decoration: none;

text-align: left;

color: White;

line-height: 120%;

position: absolute;

}



b { font-size: 10pt;

font-family: Arial;

font-weight: bold;

text-decoration: none;



}

//-->

</STYLE>



<script language="javascript">

<!--

// When doit=0, the words are motionless.

var doit= 0;



function start() {

// When doit=1, the words move.

doit = 1;

}



function stop() {

doit = 0;

}



function behave() {

// This reloads the window.

window.location.reload();

}





function moveIt() {

// This function is run upon loading the document (see the BODY statement).

// It is always running when the document is loaded. This is done by means

// of the setTimeout function. Essentially, there is a 15 millisecond

// delay between calls to this function.

if (document.layers) {

// The user has Netscape 4 +...

moveItaword(document.SEATTLE, 4, 2);

moveItaword(document.DRIFT, 3, 2);

moveItaword(document.Im1, 4, 1);

moveItaword(document.a2, 5, 3);

moveItaword(document.bad3, 3, 3);

moveItaword(document.text4, 2, 1);

moveItaword(document.period5, 4, 4);

moveItaword(document.I6, 4, 1);

moveItaword(document.used7, 3, 3);

moveItaword(document.to8, 4, 2);

moveItaword(document.be9, 2, 3);

moveItaword(document.a10, 5, 5);

moveItaword(document.poem11, 1, 2);

moveItaword(document.but12, 3, 3);

moveItaword(document.drifted13, 1, 3);

moveItaword(document.from14, 4, 2);

moveItaword(document.the15, 5, 5);

moveItaword(document.scene16, 2, 3);

moveItaword(document.period17, 1, 4);

moveItaword(document.Do18, 2, 4);

moveItaword(document.me19, 3, 3);

moveItaword(document.period20, 2, 2);

moveItaword(document.I21, 4, 1);

moveItaword(document.just22, 2, 3);

moveItaword(document.want23, 3, 1);

moveItaword(document.you24, 3, 1);

moveItaword(document.to25, 3, 1);

moveItaword(document.do26, 3, 3);

moveItaword(document.me27, 4, 5);

moveItaword(document.period28, 2, 3);

setTimeout('moveIt()', 15);

}

else if (document.all) {

// If the user has IE 4+ then...

moveItawordIE4(SEATTLE.style, 4, 2);

moveItawordIE4(DRIFT.style, 3, 2);

moveItawordIE4(Im1.style, 4, 1);

moveItawordIE4(a2.style, 5, 3);

moveItawordIE4(bad3.style, 3, 3);

moveItawordIE4(text4.style, 2, 1);

moveItawordIE4(period5.style, 4, 4);

moveItawordIE4(I6.style, 4, 1);

moveItawordIE4(used7.style, 3, 3);

moveItawordIE4(to8.style, 4, 2);

moveItawordIE4(be9.style, 2, 3);

moveItawordIE4(a10.style, 5, 5);

moveItawordIE4(poem11.style, 1, 2);

moveItawordIE4(but12.style, 3, 3);

moveItawordIE4(drifted13.style, 1, 3);

moveItawordIE4(from14.style, 4, 2);

moveItawordIE4(the15.style, 5, 5);

moveItawordIE4(scene16.style, 2, 3);

moveItawordIE4(period17.style, 1, 4);

moveItawordIE4(Do18.style, 2, 4);

moveItawordIE4(me19.style, 3, 3);

moveItawordIE4(period20.style, 2, 2);

moveItawordIE4(I21.style, 4, 1);

moveItawordIE4(just22.style, 2, 3);

moveItawordIE4(want23.style, 3, 1);

moveItawordIE4(you24.style, 3, 1);

moveItawordIE4(to25.style, 3, 1);

moveItawordIE4(do26.style, 3, 3);

moveItawordIE4(me27.style, 4, 5);

moveItawordIE4(period28.style, 2, 3);

setTimeout('moveIt()', 15);

}

}





function moveItaword(aword, x, y) {

// This function handles movement for Netscape 4 +

// The Math.random function generates a random number between 0 and 1

awordx=Math.random();

awordy=Math.random();

// If the x component random number is less than 0.5, then move the word

// to the left by doit pixels.

if (awordx <= 0.5) {

aword.left -= doit;

}

else {

// Else if the x component is greater than 0.5, move the word to the right

// by x*doit pixels.

aword.left += x*doit;

}

if (aword.left < 0) {

// I choose not to let the words drift off the left of the screen. But this

// is not very likely anyway, given the weights I assign to x and y for each word.

aword.left = 10;

}

if (awordy <= 0.5) {

// Now apply the same sort of logic to the y drift of the words.

aword.top -= doit;

}

else {

aword.top += y*doit;

}

if (aword.top < 0) {

aword.top = 10;

}

}



function moveItawordIE4(aword, x, y) {

// This function handles text movement for IE 4+.

// The Math.random function generates a random number between 0 and 1

awordx=Math.random();

awordy=Math.random();

// If the x component random number is less than 0.5, then move the word

// to the left by doit pixels.

if (awordx <= 0.5) {

aword.left = parseInt(aword.left) - doit;

}

else {

// Else if the x component is greater than 0.5, move the word to the right

// by x*doit pixels.

aword.left = parseInt(aword.left) + x*doit;

}

if (aword.left < 0) {

// I choose not to let the words drift off the left of the screen. But this

// is not very likely anyway, given the weights I assign to x and y for each word.

aword.left = 10;

}

if (awordy <= 0.5) {

// Now apply the same sort of logic to the y drift of the words.

aword.top = parseInt(aword.top) - doit;

}

else {

aword.top = parseInt(aword.top) + y*doit;

}

if (aword.top < 0) {

aword.top = 10;

}

}



//-->

</script>



</HEAD>



<BODY onload="moveIt()" BGCOLOR="Black" link="Red" vlink="Red" alink="Maroon">



<table cellspacing="0" cellpadding="0" border=0>

<tr>

<td width="40">&nbsp;



</td>

<td align=left>

<a href="#" onclick="start();" style="left:100px;"><B>Do the text</B></a>&nbsp;&nbsp;

<a href="#" onclick="stop();"><B>Stop the text</B></a>&nbsp;&nbsp;

<a href="#" onclick="behave();"><B>Discipline the text</B></a>

</td>

</tr>

</table>





<!--

Each of the div tags holds one word of the poem. OK it's a poem. Note that the Javascript references the ID tag

of each div. This is the way you get a handle on the div objects, through their ID. Note that the class j is

defined up at the top of the file as a style. The style information that accompanies each div object has to be

unique to that object, at least to start out with, because it determines the position of the word. I'm using

absolute positioning, which means that 0,0 is at top left of the viewable screen.



This piece was written, in part, in response to the questions about text and poetry that the new medium prompts

in me. I wanted the text of Seattle Drift to initially look like plain ordinary text so that the contrast is

more apparent. The questions that I have about text and poetry prompted by the new medium are similar in fashion

to those prompted by abstract art about art and representation. Both prompt, rather than raise the questions

directly.



Seattle Drift was also inspired by Seattle's own California girl Anne, who knows who she is.



Stylistically, the piece is similar to the pop-up poems (though not in behavior) in that the text talks about

itself. I like this approach because it focusses attention on the questions and also allows me to develop character.

The character is the text itself, and the character commenting on its own nature and behavior, though embodying

that nature and behavior also, beyond it but within it, like the rest of us.



And this neath text, what is it? It isn't a footnote, but another representation of the text. Some will read

this neath text more carefully than the other representation.

-->



<div id="SEATTLE" class="j" style="top:60px; left:50px;">

SEATTLE

</div>



<div id="DRIFT" class="j" style="top:60px; left:147px;">

DRIFT

</div>



<div id="Im1" class="j" style="top:100px; left:50px;">

I'm

</div>



<div id="a2" class="j" style="top:100px; left:81px;">

a

</div>



<div id="bad3" class="j" style="top:100px; left:98px;">

bad

</div>



<div id="text4" class="j" style="top:100px; left:138px;">

text

</div>



<div id="period5" class="j" style="top:100px; left:169px;">

.

</div>



<div id="I6" class="j" style="top:130px; left:50px;">

I

</div>



<div id="used7" class="j" style="top:130px; left:61px;">

used

</div>



<div id="to8" class="j" style="top:130px; left:110px;">

to

</div>



<div id="be9" class="j" style="top:130px; left:134px;">

be

</div>



<div id="a10" class="j" style="top:130px; left:162px;">

a

</div>



<div id="poem11" class="j" style="top:130px; left:181px;">

poem

</div>



<div id="but12" class="j" style="top:160px; left:50px;">

but

</div>



<div id="drifted13" class="j" style="top:160px; left:83px;">

drifted

</div>



<div id="from14" class="j" style="top:160px; left:147px;">

from

</div>



<div id="the15" class="j" style="top:160px; left:194px;">

the

</div>



<div id="scene16" class="j" style="top:160px; left:226px;">

scene

</div>



<div id="period17" class="j" style="top:160px; left:277px;">

.

</div>



<div id="Do18" class="j" style="top:190px; left:50px;">

Do

</div>



<div id="me19" class="j" style="top:190px; left:81px;">

me

</div>



<div id="period20" class="j" style="top:190px; left:109px;">

.

</div>



<div id="I21" class="j" style="top:220px; left:50px;">

I

</div>



<div id="just22" class="j" style="top:220px; left:64px;">

just

</div>



<div id="want23" class="j" style="top:220px; left:102px;">

want

</div>



<div id="you24" class="j" style="top:220px; left:152px;">

you

</div>



<div id="to25" class="j" style="top:220px; left:190px;">

to

</div>



<div id="do26" class="j" style="top:220px; left:212px;">

do

</div>



<div id="me27" class="j" style="top:220px; left:240px;">

me

</div>



<div id="period28" class="j" style="top:220px; left:268px;">

.

</div>



<TABLE BORDER=0 ALIGN="RIGHT" VALIGN="BOTTOM" width=100% height=100%>

<TR>

<TD>

<TD align=right valign="BOTTOM">

<FONT SIZE="-2" FACE="Arial" COLOR="Gray"><A HREF="mailto:jim@vispo.com" style="text-decoration:none;color:Gray;">&copy; Andrews</A></FONT><BR>



<FONT FACE="Times New Roman">

<FONT COLOR="#FF0000"><FONT>V</FONT></FONT>

<FONT COLOR="#FFFF00"><FONT SIZE=-1>I</FONT></FONT>

<FONT COLOR="#00FF00"><FONT SIZE=-2>S</FONT></FONT>

<FONT COLOR="#0000FF"><FONT SIZE=-1>P</FONT></FONT>

<FONT COLOR="#FF80FF"><FONT>O</FONT></FONT><BR>
<FONT SIZE="-2" FACE="Arial" COLOR="Gray">Animisms</FONT> </FONT> </TD>

</TR>

</TABLE>



</BODY>

</HTML> Seattle Drift (1999 version) <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<!--
Enigma n
Jim Andrews (jim@vispo.com), 1998

Welcome to the 'neath text of Enigma n. Enigma n is a
philosophical poetry toy for poets and philosophers
from the age of four up.

If you want to link to Enigma n from your site, please link to
http://vispo.com/animisms/enigman

Revised in 2004, based on Marko Niemi's upgrade of the code
so that it now runs on most PC and Mac browsers. The original
version was such that meaning.html did some browser sniffing
and branched either to enigman.htm, which was for Netscape 4, or
branched to enigmanie.htm, which was for IE 4. Marko's code
does not require two different versions, however, and runs on
most Mac and PC browsers. Thanks very much, Marko!
-->

<HTML>
<HEAD>
<TITLE>Enigma n -- Jim Andrews</TITLE>
<META http-equiv=Content-Type content="text/html; charset=iso-8859-1">
<STYLE type=text/css>
.j {
FONT-WEIGHT: normal; FONT-SIZE: 40px; Z-INDEX: 4; COLOR: #14c878; FONT-FAMILY: "Arial"; POSITION: absolute; TEXT-ALIGN: left; TEXT-DECORATION: none
}
.k {
FONT-WEIGHT: bold; FONT-SIZE: 10pt; Z-INDEX: 300; VISIBILITY: visible; COLOR: gray; FONT-FAMILY: Arial; POSITION: relative; TEXT-DECORATION: none
}
.k:visited {
COLOR: gray
}
.k:hover {
COLOR: #14c878
}
.k:active {
COLOR: #14c878}
.lj {
TEXT-DECORATION: none
}
.bt {
FONT-WEIGHT: bold; FONT-SIZE: 10pt; Z-INDEX: 300; VISIBILITY: visible; COLOR: gray; FONT-FAMILY: Arial; TEXT-DECORATION: none
}
.bt:visited {
COLOR: gray
}
.bt:hover {
COLOR: #14c878
}
</STYLE>

<SCRIPT language=JavaScript>
<!--

function SymError()
{
return true;
}

window.onerror = SymError;

//-->
</SCRIPT>

<SCRIPT language=JavaScript><!--
window.status="by Jim Andrews, 1998";
var doit = false; // When doit=false, enigma n stops.
var speed = 60; // The delay speed in milliseconds between rethinkings.
var colorletters = false;// Whether or not letters will be colored on rethink.

// This variable ranges 0-2. 0 is normal, 1 means the letters grow and shrink
// at the same rate, and 2 means the letters grow and shrink at different rates.
var combobulate = 0;
var cchange = 0;// Used to cycle through color changes.
var moving = false;// Indicates whether the letters are moving or not.

// The following variables are used to maintain state so that the menu options
// appear at the right times.
var Prodc = false;
var Stirc = false;
var Tamec = false;
var Spellc = false;
var Speedc = false;
var Colourc = false;
var Discombobulatec = false;
var RunAwayc = false;
var discounter = 0;

letters = new Array("m","e","a","n","i","n2","g");
jfontinc = new Array();
rd = new Array();
rdinc = new Array();
gd = new Array();
gdinc = new Array();
bd = new Array();
bdinc = new Array();
theta = new Array();
thetainc = new Array();
radius = new Array();
cx = new Array();
cy = new Array();
clockwise = new Array();


// This is called in the Body tag.

function jOnLoad() {
initCustomStyles();
centerword();
moveIt();
}


function initCustomStyles() {
for (i=0; i<letters.length; i++) {
jfontinc[i] = 1;/* The increment by which font size changes upon rethink if discombobulated. */
rd[i] = 255;/* The red dimension of a letter's color */
rdinc[i] = 1;/* The increment by which rd is increased/decreased on rethink */
gd[i] = 255; /* The green dimension of a letter's color. */
gdinc[i] = 1;/* The increment by which gd is increased/decreased on rethink */
bd[i] = 255;/* The blue dimension of a letter's color. */
bdinc[i] = 1;/* The increment by which bd is increased/decreased on rethink */
theta[i] = 0.1234;/* radian angle between (left,top)-(cx,cy) and horizontal */
thetainc[i] = 0.0524;/* radian increment theta is increased/decreased by each rethink. Speed. */
radius[i] = 100.7897;/* radius between (left,top) and (cx,cy) */
cx[i] = 8.3456;/* x component of centre of rotation */
cy[i] = 45.9876;/* y component of centre of rotation */
clockwise[i] = 1;/* direction of rotation */
}
}


//++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
// These functions are the color engine used to change the colors dynamically. Thanks
// to Kouichirou@Eto.com for his fade script, which I read and from which I pulled
// makearray(), hex(), and the code for the hex array.


// Called immediately below once only to create the color array.

function makearray(n) {
this.length = n;
for(var i = 1; i <= n; i++)
this[i] = 0;
return this;
}


// This is run when Enigma n loads to initialize the color array. This sort of stuff is
// necessary because the Math library contains no hex arithmetic/conversion
// routines in v4 browsers.

hexa = new makearray(16);
for(var i = 0; i < 10; i++)
hexa[i] = i;
hexa[10]="a"; hexa[11]="b"; hexa[12]="c";
hexa[13]="d"; hexa[14]="e"; hexa[15]="f";


// This concatenates the two hex digits, ie converts a number in 0-255 to base 16 (as a string).

function hex(i) {
return "" + hexa[Math.floor(i/16)] + hexa[i%16];
}


// Rather than changing the red, green, and blue channels of letters all at once,
// this code only changes one of the channels, so the color change is slower.

function colorlet(j) {
//letter.rd= (parseInt(letter.rd) +parseInt(letter.rdinc))%256;
//letter.gd= (parseInt(letter.gd) +parseInt(letter.gdinc))%256;
//letter.bd= (parseInt(letter.bd) +parseInt(letter.bdinc))%256;
if (cchange == 0)
rd[j]= (1 + rd[j])%256;
else if (cchange ==1)
gd[j]= (1 + gd[j])%256;
else
bd[j]= (1 + bd[j])%256;

cchange= (cchange +1)%3;
var hr = hex(rd[j]);
var hg = hex(gd[j]);
var hb = hex(bd[j]);
document.getElementById(letters[j]).style.color = "#"+hr+hg+hb;
}


// This assigns each letter a random color.

function randomcolors() {
for (i=0; i<letters.length; i++) {
rd[i]=Math.round(Math.random()*255);
gd[i]=Math.round(Math.random()*255);
bd[i]=Math.round(Math.random()*255);
}
}

//+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++


// hash to an integer between -4 and 4

function randomfontinc() {
return Math.floor(8.99*Math.random())-4;
}


// Called by discombobulate() to determine the amount of size change in letters.
// c==0 results in the font size changing by 2
// c==1 results in a random change between -4 and 4
// c==2 results in no change.

function bobulate(c) {
if (c==0)
return 2;
else if (c==1)
return randomfontinc();
else
return 0;
}


// Called when "Discombobulate" is clicked. There are three discombobulate modes:
// when combobulate==0, no font size change occurs;
// when combobulate==1, the font size changes the same for all letters;
// when combobulate==2, the letters change in size differently.

function discombobulate() {
//These first 3 lines just make the "Speed" button visible.
discounter += 1;
if (discounter > 2)
document.getElementById("Speedo").style.visibility="visible";

for (i=0; i<letters.length; i++)
jfontinc[i]= bobulate(combobulate);

if (combobulate != 0) {
for (i=0; i<letters.length; i++)
document.getElementById(letters[i]).style.fontSize=40;
}
combobulate=(combobulate +1)%3;
}


// var a and function Work are for the drop down menu that controls the speed of meaning.

var a = 0;
function Work(form, a) {
if (a.options[a.selectedIndex].value)
speed = a.options[a.selectedIndex].value;
}


// centers the word 'meaning' on the page. Called in the Body
// tag and when "Spell" is clicked.

function centerword() {
w=document.body.clientWidth/2;
h=document.body.clientHeight/2;
letterToScreen("m", w - 131, h);
letterToScreen("e", w - 74, h);
letterToScreen("a", w - 31, h);
letterToScreen("n", w + 14, h);
letterToScreen("i", w + 59, h);
letterToScreen("n2", w + 86, h);
letterToScreen("g", w + 131, h);
}


function letterToScreen(letter, x, y) {
document.getElementById(letter).style.left= x;
document.getElementById(letter).style.top=y;
}


// Toggles meaning motion on and off. Called when "0/1" is clicked.

function stopstart() {
if (!doit) {
doit=true;
document.getElementById("Co").style.visibility="visible";
moving=true;
}
else {
doit=false;
moving=false;
}
}


// Starts visual meaning in motion (always on in the mind).
// "Prod" calls start(3)
// "Stir" calls start(1)
// "Tame" calls start(2)

function start(geometry) {
// When doit=true, meaning moves.
doit = true;
if (Prodc && Stirc && Tamec) {
document.getElementById("Spell").style.visibility="visible";
}
if (Spellc && moving) {
document.getElementById("Swat").style.visibility="visible";
}
//the letters are initialized each time meaning movement is rethunk.

for (i=0; i<letters.length; i++)
jinitialize(document.getElementById(letters[i]), i, geometry);
}


// Called by start(). This function initializes a letter's style properties.
// It initializes the letter's center of rotation (cx,cy), the letter's radius of rotation,
// the angle between the horizontal and the letter (theta, measured in radians), and the speed
// of rotation (thetainc in radians). Bone up on your parameterized
// analytic geometry to get this one.
// When geometry=1, we are stirring meaning. The letters have a common center.
// When geometry=2, we are taming meaning. The letters have a common point of intersection.
// When geometry=3, we are prodding meaning. The letters have no relation to one another.

function jinitialize(letter, j, geometry) {
if (geometry == 1) {
cx[j]= Math.round(document.body.clientWidth/2 -100);
cy[j]= Math.round(document.body.clientHeight/2 -100);
}
else if (geometry== 2) {
cx[j]=Math.round((document.body.clientWidth/2 + parseInt(letter.style.left))/2) -80;
cy[j]=Math.round((document.body.clientHeight/2 + parseInt(letter.style.top))/2) -80;
}
else {
xdodad=Math.random();
ydodad=Math.random();
if (xdodad < 0.5)
xfactor= -1;
else
xfactor= 1;

if (ydodad < 0.5)
yfactor= -1;
else
yfactor =1;

cx[j]= Math.round(parseInt(letter.style.left) + (xfactor * Math.random() * 120));
cy[j]= Math.round(parseInt(letter.style.top) + (yfactor * Math.random() * 120));
}
temp= Math.sqrt(Math.pow(parseInt(letter.style.left) - parseInt(cx[j]),2) + Math.pow(parseInt(letter.style.top) - parseInt(cy[j]),2));
radius[j]= temp;
if (temp != 0)
theta[j]= Math.asin((parseInt(letter.style.left) - parseInt(cx[j]))/temp);
else
theta[j]=0;

Randomrotationthingy=Math.random();
if ((Randomrotationthingy <= 0.5))
clockwise[j]=1;
else
clockwise[j]=-1;

ran=Math.random() + 0.9;
//the theta increment is between .1571 radians and .3316 radians
thetainc[j]= parseInt(clockwise[j]) * 10*ran*Math.PI/180;
}


// Called when "Spell" is clicked. Stops meaning's visual motion and rethinks meaning.

function behave() {
doit=false;
centerword();
}


// Called when "Color" is clicked. Toggles whether letters change color on rethink.

function colorl() {
colorletters=true;
document.getElementById("Dis").style.visibility="visible";
randomcolors();
}


// moveIt() is always running when Enigma n is loaded because of the recursive
// nature of the call to setTimeout. Called by jOnLoad, which is called in the Body tag.

function moveIt() {
for (i=0; i<letters.length; i++)
movealetter(document.getElementById(letters[i]).style, i);

if (colorletters) {
for (i=0; i<letters.length; i++)
colorlet(i);
}
setTimeout('moveIt()', speed);
}


// Called by moveIt(). This function moves letters along a circular path.

function movealetter(letter, j) {
if (doit) {
//compute new theta
theta[j] += parseFloat(thetainc[j]);

//computer the letter's new x component
letter.left=Math.round(radius[j] * Math.sin(theta[j]) + cx[j]);

//compute the letter's new y component
letter.top=Math.round(radius[j] * Math.cos(theta[j]) + cy[j]);

if (combobulate!=0) {
//letters get no larger than 200pt
if (parseInt(letter.fontSize) > 200)
jfontinc[j] = (-1)*jfontinc[j];
else if (parseInt(letter.fontSize) < 3)
jfontinc[j] = (-1)*jfontinc[j];

letter.fontSize = jfontinc[j] + parseInt(letter.fontSize);
letter.zIndex=parseInt(letter.fontSize);
}

}
}


//Used in the function below only to alternate letter groups.

jtimer=0;

// Function Follow has been disabled. Detracted from focus.
// This function controls behavior on mouse moves.
// When you move the mouse, notice that the letters seem
// to separate into two distinct groups.
// When 0<=jtimer<200, the two groups are 'name' and 'gin';
// when 200<=jtimer<400, the two groups are 'image' and 'nn';
// when 400<=jtimer<601, the two groups are 'game' and 'nin'.
// When the mouse moves, the x or y component of the center of
// each letter (cx or cy) moves closer to the mouse.
// The basic formula (algebra added) is cx=cx+(mouseX-cx)/s
// and for y, it's cy=cy+(mouseY-cy)/s
// where s is an integer. The bigger s is, the slower the motion.
// This function is a late addition to Enigma n. I added it
// to increase interactivity and also introduce more riddle.
/*
function Follow(Mouse) {
Mouse = window.event;
MousieX= parseInt(Mouse.clientX);
MousieY= parseInt(Mouse.clientY);
if (jtimer < 200) {
e.style.cx= Math.round(0.9*e.style.cx+0.1*MousieX);
m.style.cx= Math.round(0.917*m.style.cx+0.083*MousieX);
aa.style.cx= Math.round(0.929*aa.style.cx+0.071*MousieX);
n.style.cx= Math.round(0.938*n.style.cx+0.063*MousieX);

ii.style.cy= Math.round(0.9*ii.style.cy+0.1*MousieY);
n2.style.cy= Math.round(0.917*n2.style.cy+0.083*MousieY);
g.style.cy= Math.round(0.929*g.style.cy+0.071*MousieY);
} else if (jtimer < 400) {
e.style.cx= Math.round(0.9*e.style.cx+0.1*MousieX);
g.style.cx= Math.round(0.917*g.style.cx+0.083*MousieX);
aa.style.cx= Math.round(0.929*aa.style.cx+0.071*MousieX);
m.style.cx= Math.round(0.938*m.style.cx+0.063*MousieX);
ii.style.cx= Math.round(0.948*ii.style.cx+0.055*MousieX);

n2.style.cy= Math.round(0.9*n2.style.cy+0.1*MousieY);
n.style.cy= Math.round(0.929*n.style.cy+0.071*MousieY);
} else {
e.style.cy= Math.round(0.9*e.style.cy+0.1*MousieY);
m.style.cy= Math.round(0.917*m.style.cy+0.083*MousieY);
aa.style.cy= Math.round(0.929*aa.style.cy+0.071*MousieY);
g.style.cy= Math.round(0.938*g.style.cy+0.063*MousieY);

n2.style.cx= Math.round(0.9*n2.style.cx+0.1*MousieX);
ii.style.cx= Math.round(0.917*ii.style.cx+0.083*MousieX);
n.style.cx= Math.round(0.929*n.style.cx+0.071*MousieX);
}
jtimer = (jtimer +1) % 601;
}
*/

function Homemouseover() {
window.status="Enigma n home.";
}

function Prodmouseover() {
window.status="Meaning prod. Prod meaning.";
}

function Stirmouseover() {
window.status="Stir meaning. Meaning stir.";
}

function Tamemouseover() {
window.status="Repeated tamings collapse meaning within itself.";
}

function Spellmouseover() {
window.status="Spell meaning out. Spell for literalists.";
}

function StopStartmouseover() {
window.status="Freeze/thaw meaning.";
}

function Colourmouseover() {
window.status="Colour meaning.";
}

function Discombobulatemouseover() {
window.status="Resize meaning.";
}

function Speedmouseover() {
window.status="Adjust speed of meaning.";
}

function Aboutmouseover() {
window.status="About meaning.";
}

function Runawaymouseover() {
window.status="Dialog with Ted Warnell.";
}
function changespeed() {
document.getElementById("spdfrm").style.visibility="visible";
}

function disappearform() {
document.getElementById("spdfrm").style.visibility="hidden";
document.getElementById("jmail").style.visibility="visible";
document.getElementById("Run").style.visibility="visible";
}

function lmouseover() {
//document.getElementById(id).style.color="#14c878";
window.status="Meaning is yours to discover and create.";
}

function lblur() {
//document.getElementById(id).style.color='Gray';
window.status="It is the world that you love, after all, is it not?";
}

function lclick() {
//document.getElementById(id).style.color="#31c6c6";
window.status="What is fleeting? What endures?";
}

//-->
</SCRIPT>

<META content="MSHTML 6.00.2900.2523" name=GENERATOR>
</HEAD>
<BODY onresize=moving=false;behave(); text=white aLink=red bgColor=black scroll=no onload=jOnLoad();>

<TABLE height="100%" cellSpacing=0 cellPadding=0 width="100%" border=0>
<TBODY>
<TR>
<TD vAlign=top colSpan=2>
<a href="index.htm" onmouseover="Homemouseover();return true;"><IMG height=26 alt=""
src="images/Enigman.JPG" width=88 align=middle
border=0></a>&nbsp;&nbsp;&nbsp;&nbsp;

<A onmouseup=lmouseover(); class=k
onmousedown="javascript:lclick();return true;" id=Prod
onmouseover="Prodmouseover();return true;"
onclick=moving=true;Prodc=true;start(3); onmouseout=lblur();
href="#">Prod</A></SPAN>&nbsp;&nbsp;

<A onmouseup=lmouseover(); class=k
onmousedown="javascript:lclick();return true;" id=Stir
onmouseover="Stirmouseover();return true;"
onclick=moving=true;Stirc=true;start(1); onmouseout=lblur();
href="#"><B>Stir</B></A>&nbsp;&nbsp;

<A onmouseup=lmouseover(); class=k
onmousedown="javascript:lclick();return true;" id=Tame
onmouseover="Tamemouseover();return true;"
onclick=moving=true;Tamec=true;start(2); onmouseout=lblur();
href="#"><B>Tame</B></A>&nbsp;&nbsp;

<A onmouseup=lmouseover(); class=k onmousedown="lclick();return true;"
id=Spell onmouseover="Spellmouseover();return true;"
style="VISIBILITY: hidden" onclick=moving=false;behave();Spellc=true;
onmouseout=lblur();
href="#"><B>Spell</B></A>&nbsp;&nbsp;

<A onmouseup=lmouseover(); class=k onmousedown="lclick();return true;"
id=Swat onmouseover="StopStartmouseover();return true;" style="VISIBILITY: hidden"
onclick=stopstart(); onmouseout=lblur();
href="#"><B>0/1</B></A>&nbsp;&nbsp;

<A onmouseup=lmouseover(); class=k onmousedown="lclick();return true;"
id=Co onmouseover="Colourmouseover();return true;" style="VISIBILITY: hidden"
onclick=colorl(); onmouseout=lblur();
href="#"><B>Colour</B></A>&nbsp;&nbsp;

<A onmouseup=lmouseover(); class=k onmousedown="lclick();return true;"
id=Dis onmouseover="Discombobulatemouseover();return true;" style="VISIBILITY: hidden"
onclick=discombobulate(); onmouseout=lblur();
href="#"><B>Discombobulate</B></A>&nbsp;&nbsp;

<A onmouseup=lmouseover(); class=k onmousedown="lclick();return true;"
id=Speedo onmouseover="Speedmouseover();return true;"
style="VISIBILITY: hidden" onclick=changespeed(); onmouseout=lblur();
href="#"><B>Speed</B></A>&nbsp;&nbsp;

<A onmouseup=lmouseover(); class=k onmousedown="lclick();return true;"
id=jmail onmouseover="Aboutmouseover();return true;"
style="VISIBILITY: hidden" onmouseout=lblur();
href="EnigmanAbout.html">About</A>&nbsp;&nbsp;

<A onmouseup=lmouseover(); class=k onmousedown="lclick();return true;"
id=Run onmouseover="Runawaymouseover();return true;" style="VISIBILITY: hidden"
onmouseout=lblur();
href="http://www.warnell.com/advexp/advxes.htm"><B>Run away</B></A> <FONT color=gray>.</FONT> </TD>
</TR>
<TR>
<TD vAlign=top align=left>
<FORM class=k id=spdfrm style="Z-INDEX: 300; VISIBILITY: hidden">
<SELECT onchange="Work(this.form, this)" size=10 name=sel>
<OPTION value=1>Á&nbsp;&nbsp;&nbsp;&nbsp;</OPTION>
<OPTION value=10>Â</OPTION>
<OPTION value=15>Æ</OPTION>
<OPTION value=20>À</OPTION>
<OPTION value=25>Å</OPTION>
<OPTION value=30>Ã</OPTION>
<OPTION value=35>Ä</OPTION>
<OPTION value=40>Ç</OPTION>
<OPTION value=45>Ð</OPTION>
<OPTION value=50>É</OPTION>
<OPTION value=55>Ê</OPTION>
<OPTION value=60 selected>È</OPTION>
<OPTION value=65>Ë</OPTION>
<OPTION value=70>Í</OPTION>
<OPTION value=75>Î</OPTION>
<OPTION value=80>Ì</OPTION>
<OPTION value=85>Ï</OPTION>
<OPTION value=90>Ñ</OPTION>
<OPTION value=95>Ó</OPTION>
<OPTION value=100>Ô</OPTION>
<OPTION value=120>Ò</OPTION>
<OPTION value=150>Ø</OPTION>
<OPTION value=200>Õ</OPTION>
<OPTION value=250>Ö</OPTION>
<OPTION value=300>Þ</OPTION>
<OPTION value=350>Ú</OPTION>
<OPTION value=400>Û</OPTION>
<OPTION value=450>Ù</OPTION>
<OPTION value=500>Ü</OPTION>
<OPTION value=999>Ý</OPTION>
</SELECT><BR>
<INPUT onclick=disappearform(); type=button value=ZOT!&nbsp;>
</FORM>
</TD>
<TD vAlign=bottom align=right>
<TABLE align=right border=0 VALIGN="BOTTOM">
<TBODY>
<TR>
<TD vAlign=bottom align=right>
<table><tr><td>
<div align="center">
<A style="TEXT-DECORATION: none" href="../../index.html"><FONT face="Times New Roman"><FONT color=#ff0000><FONT
size=+0>V</FONT></FONT> <FONT color=#ffff00><FONT
size=-1>I</FONT></FONT> <FONT color=#00ff00><FONT
size=-2>S</FONT></FONT> <FONT color=#0000ff><FONT
size=-1>P</FONT></FONT> <FONT color=#ff80ff><FONT
size=+0>O</FONT></FONT></FONT></A><BR>
<A class=bt href="index.htm">Enigma n Start</A>
</FONT>
</div>
</td></tr></table>
</TD>
</TR></TBODY></TABLE></TD></TR></TBODY></TABLE>
<!--
If you're reading this, I don't know really why. You could be reading it to see how the piece
was done so you can do dhtml yourself or you are looking for the true meaning of the piece or
you're a habitual source viewer or...

I'm not sure whether to talk about the mechanics of the piece here or not. Naw, that's technique,
and technique is hard won but anybody can do it.
-->

<DIV class=j id=m
style="FONT-SIZE: 40px; Z-INDEX: 7; LEFT: 200px; TOP: -75px; jfontinc: 0; rd: 20; gd: 200; bd: 120; rdinc: 1; gdinc: 1; bdinc: 1">m
</DIV>
<DIV class=j id=e
style="FONT-SIZE: 40px; Z-INDEX: 6; LEFT: 257px; TOP: -75px; jfontinc: 0; rd: 20; gd: 200; bd: 120; rdinc: 0; gdinc: 0; bdinc: 1">e
</DIV>
<DIV class=j id=a
style="FONT-SIZE: 40px; Z-INDEX: 5; LEFT: 300px; TOP: -75px; jfontinc: 0; rd: 20; gd: 200; bd: 120; rdinc: 0; gdinc: 1; bdinc: 0">a
</DIV>
<DIV class=j id=n
style="FONT-SIZE: 40px; Z-INDEX: 4; LEFT: 345px; TOP: -75px; jfontinc: 0; rd: 20; gd: 200; bd: 120; rdinc: 0; gdinc: 1; bdinc: 1">n
</DIV>
<DIV class=j id=i
style="FONT-SIZE: 40px; Z-INDEX: 3; LEFT: 390px; TOP: -75px; jfontinc: 0; rd: 20; gd: 200; bd: 120; rdinc: 1; gdinc: 0; bdinc: 0">i
</DIV>
<DIV class=j id=n2
style="FONT-SIZE: 40px; Z-INDEX: 2; LEFT: 417px; TOP: -75px; jfontinc: 0; rd: 20; gd: 200; bd: 120; rdinc: 1; gdinc: 0; bdinc: 1">n
</DIV>
<DIV class=j id=g
style="FONT-SIZE: 40px; Z-INDEX: 1; LEFT: 462px; TOP: -75px; jfontinc: 0; rd: 20; gd: 200; bd: 120; rdinc: 1; gdinc: 1; bdinc: 0">g
</DIV>

<SCRIPT language=JavaScript>
<!--
//this line calls function Follow onmousemove
// This has been disabled. Detracted from focus.
// To enable this feature, simply uncomment the line below.
//document.onmousemove = Follow;
//document.onmousedown = lclick;
//document.onmouseup = lblur;
//-->
</SCRIPT>
</BODY></HTML> <!--
Welcome to the 'neath text Internet Explorer 4 version of Enigma n.

If you want to use this code, please contact me at jim@vispo.com. You can use parts of this code as long as you credit me, jim@vispo.com

If you want to link to Enigma n from your site, please link to http://vispo.com/animisms/enigman/meaning.html not enigmanie.html because meaning.html does some browser sniffing and directs the reader to the right version of Enigma n accordingly.

--><!DOCTYPE html public "-//W3C//DTD HTML 3.2 Final//EN">
<HTML>
<HEAD>
<TITLE>Enigma n (IE 4 version) -- Jim Andrews</TITLE>
<META http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<META name="description" content="Enigma n is a philosophical poetry toy for poets and philosophers from the age of 4 up.">
<META name="keywords" content="Enigma n, visual poetry, Web art, vispo, Andrews, concrete, animation, typography, cabalistic, DHTML, meaning">
<META name="GENERATOR" content="Homesite"><STYLE type="text/css"><!--

/*Each animated letter is of this style. Each letter is an object. letter.style.radius accesses the radius, etc.*/
.j {font-size:40;
font-family:"Arial";
font-weight:normal;
text-decoration:none;
text-align:left;
color:#14c878;
z-index: 4;
position:absolute; /* As opposed to relative. Position must therefore be set explicitly. */
jfontinc:1; /* The increment by which font size changes upon rethink if discombobulated. */
rd:255; /* The red dimension of a letter's color */
rdinc:1; /* The increment by which rd is increased/decreased on rethink */
gd:255; /* The green dimension of a letter's color. */
gdinc:1; /* The increment by which gd is increased/decreased on rethink */
bd:255; /* The blue dimension of a letter's color. */
bdinc:1; /* The increment by which bd is increased/decreased on rethink */
theta:0.1234; /* radian angle between (left,top)-(cx,cy) and horizontal */
thetainc:0.0524; /* radian increment theta is increased/decreased by each rethink. Speed. */
radius:100.7897; /* radius between (left,top) and (cx,cy) */
cx:8.3456; /* x component of centre of rotation */
cy:45.9876; /* y component of centre of rotation */
clockwise:1; /* direction of rotation */
}

.k {font-size: 10pt;
font-family: Arial;
font-weight: bold;
text-decoration: none;
color: Gray;
position: relative;
z-index:300;
visibility: visible;
}


//--></STYLE>
<SCRIPT language="Jscript"><!--
window.status="By Jim Andrews, 1998, jim@vispo.com";
// When doit=false, enigma n stops.
var doit= false;
// The delay speed in milliseconds between rethinkings.
var speed=15;
// Whether or not letters will be colored on rethink.
var colorletters=false;
// This variable ranges 0-2. 0 is normal, 1 means the letters grow and shrink at the same rate,
// and 2 means the letters grow and shrink at different rates.
var combobulate=0;
// Used to cycle through color changes.
var cchange=0;
// Indicates whether the letters are moving or not.
moving=false;
// The following variables are used to maintain state so that the menu options appear at the
// right times.
var Prodc=false;
var Stirc=false;
var Tamec=false;
var Spellc=false;
var Speedc=false;
var Colourc=false;
var Discombobulatec=false;
var RunAwayc=false;
var discounter=0;





// This is called in the Body tag.
function jOnLoad() {

if (document.layers) {
window.open('meaning.html', '_self');
}
else {
if (document.all) {
centerword();
moveIt();
}
else {
alert("Sorry, Enigma n requires a 4.0 browser or greater.");
}
}
}



//++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
// These functions are the color engine used to change the colors dynamically. Thanks
// to Kouichirou@Eto.com for his fade script, which I read and from which I pulled
// makearray(), hex(), and the code for the hex array.

// Called immediately below once only to create the color array.
function makearray(n) {
this.length = n;
for(var i = 1; i <= n; i++)
this[i] = 0;
return this;
}

// This is run when enigma n loads to initialize the color array. This sort of stuff is
// necessary because the Math library contains no hex arithmetic/conversion routines in v4 browsers.
hexa = new makearray(16);
for(var i = 0; i < 10; i++)
hexa[i] = i;
hexa[10]="a"; hexa[11]="b"; hexa[12]="c";
hexa[13]="d"; hexa[14]="e"; hexa[15]="f";


// This concatenates the two hex digits, ie converts a number in 0-255 to base 16 (as a string).
function hex(i) {
return "" + hexa[Math.floor(i/16)] + hexa[i%16];
}


// Rather than changing the red, green, and blue channels all at once, this code only changes
// one of the channels, so the color change is slower.
function colorlet(letter) {
//letter.rd= (parseInt(letter.rd) +parseInt(letter.rdinc))%256;
//letter.gd= (parseInt(letter.gd) +parseInt(letter.gdinc))%256;
//letter.bd= (parseInt(letter.bd) +parseInt(letter.bdinc))%256;
if (cchange == 0) {
letter.rd= (1 + parseInt(letter.rd))%256;
}
else {
if (cchange ==1) {
letter.gd= (1 + parseInt(letter.gd))%256;
}
else {
letter.bd= (1 + parseInt(letter.bd))%256;
}
}
cchange= (cchange +1)%3;
var hr = hex(letter.rd);
var hg = hex(letter.gd);
var hb = hex(letter.bd);
letter.color = "#"+hr+hg+hb;
}


// This assigns each letter a random color.
function randomcolors() {
m.style.rd=Math.round(Math.random()*255);
m.style.gd=Math.round(Math.random()*255);
m.style.bd=Math.round(Math.random()*255);
e.style.rd=Math.round(Math.random()*255);
e.style.gd=Math.round(Math.random()*255);
e.style.bd=Math.round(Math.random()*255);
aa.style.rd=Math.round(Math.random()*255);
aa.style.gd=Math.round(Math.random()*255);
aa.style.bd=Math.round(Math.random()*255);
n.style.rd=Math.round(Math.random()*255);
n.style.gd=Math.round(Math.random()*255);
n.style.bd=Math.round(Math.random()*255);
ii.style.rd=Math.round(Math.random()*255);
ii.style.gd=Math.round(Math.random()*255);
ii.style.bd=Math.round(Math.random()*255);
n2.style.rd=Math.round(Math.random()*255);
n2.style.gd=Math.round(Math.random()*255);
n2.style.bd=Math.round(Math.random()*255);
g.style.rd=Math.round(Math.random()*255);
g.style.gd=Math.round(Math.random()*255);
g.style.bd=Math.round(Math.random()*255);
}

//+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++

// hash to an integer between -4 and 4
function randomfontinc() {
return Math.floor(8.99*Math.random())-4;
}


// Called by discombobulate() to determine the amount of size change in letters.
// c==0 results in the font size changing by 2
// c==1 results in a random change between -4 and 4
// c==2 results in no change.
function bobulate(c) {
if (c==0) {
return 2;
}
else {
if (c==1) {
return randomfontinc();
}
else {
return 0;
}
}
}

// Called when "Discombobulate" is clicked. There are three discombobulate modes:
// when combobulate==0, no font size change occurs;
// when combobulate==1, the font size changes the same for all letters;
// when combobulate==2, the letters change in size differently.
function discombobulate() {
//These first 3 lines just make the "Speed" button visible.
discounter += 1;
if (discounter > 2) {
Speedo.style.visibility="visible";
}
m.style.jfontinc= bobulate(combobulate);
e.style.jfontinc= bobulate(combobulate);
aa.style.jfontinc= bobulate(combobulate);
n.style.jfontinc= bobulate(combobulate);
ii.style.jfontinc= bobulate(combobulate);
n2.style.jfontinc= bobulate(combobulate);
g.style.jfontinc= bobulate(combobulate);
if (combobulate != 0) {
m.style.fontSize=40;
e.style.fontSize=40;
aa.style.fontSize=40;
n.style.fontSize=40;
ii.style.fontSize=40;
n2.style.fontSize=40;
g.style.fontSize=40;
}
combobulate=(combobulate +1)%3;
}



// var a and function Work are for the drop down menu that controls the speed of meaning.
var a = 0;
function Work(form, a) {
if (a.options[a.selectedIndex].value)
speed = a.options[a.selectedIndex].value;
}






// centers the word 'meaning' on the page. Called in the Body tag and when "Spell it out" is clicked.
function centerword() {
w=document.body.clientWidth/2;
h=document.body.clientHeight/2;
m.style.left= w - 131;
m.style.top=h;
e.style.left= w - 74;
e.style.top=h;
aa.style.left= w - 31;
aa.style.top=h;
n.style.left= w + 14;
n.style.top=h;
ii.style.left= w +59;
ii.style.top=h;
n2.style.left= w + 86;
n2.style.top=h;
g.style.left= w + 131;
g.style.top=h;
}



// Toggles meaning motion on and off. Called when "Swat meaning" is clicked.
function stopstart() {
if (!doit) {
doit=true;
Co.style.visibility="visible";
moving=true;
}
else {
doit=false;
moving=false;
}
}



// Starts visual meaning in motion (always on in the mind).
// "Prod meaning" calls start(3)
// "Stir meaning" calls start(1)
// "Tame meaning" calls start(2)
function start(geometry) {
// When doit=true, meaning moves.
doit = true;
if (Prodc && Stirc && Tamec) {
Spell.style.visibility="visible";
}
if (Spellc && moving) {
Swat.style.visibility="visible";
}
//the letters are initialized each time meaning movement is rethunk.
jinitialize(document.all.m, geometry);
jinitialize(document.all.e, geometry);
jinitialize(document.all.aa, geometry);
jinitialize(document.all.n, geometry);
jinitialize(document.all.ii, geometry);
jinitialize(document.all.n2, geometry);
jinitialize(document.all.g, geometry);
}



// Called by start(). This function initializes a letter's style properties.
// It initializes the letter's center of rotation (cx,cy), the letter's radius of rotation,
// the angle between the horizontal and the letter (theta, measured in radians), and the speed
// of rotation (thetainc in radians). Bone up on your parametrized analytic geometry to get this one.
function jinitialize(letter, geometry) {
if (geometry == 1) {
letter.style.cx= Math.round(document.body.clientWidth/2 -100);
letter.style.cy= Math.round(document.body.clientHeight/2 -100);
}
else {
if (geometry== 2) {
letter.style.cx=Math.round((document.body.clientWidth/2 + parseInt(letter.style.left))/2) -80;
letter.style.cy=Math.round((document.body.clientHeight/2 + parseInt(letter.style.top))/2) -80;
}
else {
xdodad=Math.random();
ydodad=Math.random();
if (xdodad < 0.5) {
xfactor= -1;
}
else {
xfactor= 1;
}
if (ydodad < 0.5) {
yfactor= -1;
}
else {
yfactor =1;
}
letter.style.cx= Math.round(parseInt(letter.style.left) + (xfactor * Math.random() * 120));
letter.style.cy= Math.round(parseInt(letter.style.top) + (yfactor * Math.random() * 120));
}
}
temp= Math.sqrt(Math.pow(parseInt(letter.style.left) - parseInt(letter.style.cx),2) + Math.pow(parseInt(letter.style.top) - parseInt(letter.style.cy),2));
letter.style.radius= temp;
if (temp != 0) {
letter.style.theta= Math.asin((parseInt(letter.style.left) - parseInt(letter.style.cx))/temp);
}
else {
letter.style.theta=0;
}
Randomrotationthingy=Math.random();
if ((Randomrotationthingy <= 0.5)) {
letter.style.clockwise=1;
}
else {
letter.style.clockwise=-1;
}
ran=Math.random() + 0.9;
//the theta increment is between .1571 radians and .3316 radians
letter.style.thetainc= parseInt(letter.style.clockwise) * 10*ran*Math.PI/180;
}


// Called when "Spell" is clicked. Stops meaning's visual motion and rethinks meaning.
function behave() {
doit=false;
centerword();
}

// Called when "Color" is clicked. Toggles whether letters change color on rethink.
function colorl() {
colorletters=true;
Dis.style.visibility="visible";
randomcolors();
}

// moveIt() is always running when enigma n is loaded because of the recursive
// nature of the call to setTimeout. Called by jOnLoad, which is called in the Body tag.
function moveIt() {
movealetter(document.all.m);
movealetter(document.all.e);
movealetter(document.all.aa);
movealetter(document.all.n);
movealetter(document.all.ii);
movealetter(document.all.n2);
movealetter(document.all.g);
if (colorletters) {
colorlet(document.all.m.style);
colorlet(document.all.e.style);
colorlet(document.all.aa.style);
colorlet(document.all.n.style);
colorlet(document.all.ii.style);
colorlet(document.all.n2.style);
colorlet(document.all.g.style);
}
setTimeout('moveIt()', speed);
}



// Called by moveIt(). This function moves letters along a circular path.
function movealetter(letter) {
if (doit) {
with (letter.style) {
//compute new theta
theta += thetainc;
//computer the letter's new x component
left=Math.round(radius * Math.sin(theta) + cx);
//compute the letter's new y component
top=Math.round(radius * Math.cos(theta) + cy);
if (parseInt(fontSize) > 200) {
jfontinc = (-1)*jfontinc;
}
else {
if (parseInt(fontSize) < 3) {
jfontinc = (-1)*jfontinc;
}
}
fontSize = jfontinc + parseInt(fontSize);
zIndex=parseInt(fontSize);
}
}
}




function Prodmouseover() {
window.status="Meaning prod. Prod meaning. Belly dancer meaning.";
}



function Stirmouseover() {
window.status="Concentric. Philosophical coffee spoon. Add color and discombobulate.";
}



function Tamemouseover() {
window.status="Repeat to trap meaning. Prod to revive meaning.";
}



function Speedmouseover() {
window.status="Adjust speed of meaning to hypnotic.";
}



function changespeed() {
spdfrm.style.visibility="visible";
}


function disappearform() {
spdfrm.style.visibility="hidden";
jmail.style.visibility="visible";
Run.style.visibility="visible";
}






function lmouseover(o) {
o.style.color="#14c878";
window.status="Meaning is yours to discover and create.";
}

function lblur(o) {
o.style.color='Gray';
window.status="It is the world that you love, after all, is it not?";
}

function lclick(o) {
o.style.color="#31c6c6";
window.status="What is fleeting? What endures?";
}

//-->
</SCRIPT>
</HEAD>
<BODY onLoad="jOnLoad();" onResize="moving=false;behave();" bgcolor="Black" scroll="No" text="White" alink="Red">

<table width="100%" cellspacing="0" cellpadding="0" border="0">
<tr>
<td valign="top"> <IMG src="Enigman.JPG" width="88" height="26" border="0" align="MIDDLE" alt="">&nbsp;&nbsp;
<A href="#" id="Prod" class="k" onClick="moving=true;Prodc=true;start(3);" onMouseOver="lmouseover(this);" onMouseOut="lblur(this);" onMouseDown="lclick(this);" onMouseUp="lmouseover(this);">Prod</A>&nbsp;&nbsp;
<A href="#" id="Stir" class="k" onClick="moving=true;Stirc=true;start(1);" onMouseOver="lmouseover(this);" onMouseOut="lblur(this);" onMouseDown="lclick(this);" onMouseUp="lmouseover(this);"><B>Stir</B></A>&nbsp;&nbsp;
<A href="#" id="Tame" class="k" onClick="moving=true;Tamec=true;start(2);" onMouseOver="lmouseover(this);" onMouseOut="lblur(this);" onMouseDown="lclick(this);" onMouseUp="lmouseover(this);"><B>Tame</B></A>&nbsp;&nbsp;
<A href="#" id="Spell" class="k" onClick="moving=false;behave();Spellc=true;" style="visibility:hidden;" onMouseOver="lmouseover(this);" onMouseOut="lblur(this);" onMouseDown="lclick(this);" onMouseUp="lmouseover(this);"><B>Spell</B></A>&nbsp;&nbsp;
<A href="#" id="Swat" class="k" onClick="stopstart();" style="visibility:hidden;" onMouseOver="lmouseover(this);" onMouseOut="lblur(this);" onMouseDown="lclick(this);" onMouseUp="lmouseover(this);"><B>0/1</B></A>&nbsp;&nbsp;
<A href="#" id="Co" class="k" onClick="colorl();" style="visibility:hidden;" onMouseOver="lmouseover(this);" onMouseOut="lblur(this);" onMouseDown="lclick(this);" onMouseUp="lmouseover(this);"><B>Colour</B></A>&nbsp;&nbsp;
<A href="#" id="Dis" class="k" onClick="discombobulate();" style="visibility:hidden;" onMouseOver="lmouseover(this);" onMouseOut="lblur(this);" onMouseDown="lclick(this);" onMouseUp="lmouseover(this);"><B>Discombobulate</B></A>&nbsp;&nbsp;
<A href="#" id="Speedo" class="k" onClick="changespeed();" style="visibility:hidden;" onMouseOver="lmouseover(this);" onMouseOut="lblur(this);" onMouseDown="lclick(this);" onMouseUp="lmouseover(this);"><B>Speed</B></A>&nbsp;&nbsp;
<A href="EnigmanAbout.html" id="jmail" class="k" style="visibility:hidden;" onMouseOver="lmouseover(this);" onMouseOut="lblur(this);" onMouseDown="lclick(this);" onMouseUp="lmouseover(this);">About</A>&nbsp;&nbsp;
<A href="http://members.xoom.com/warnell/advxes.htm" id="Run" class="k" style="visibility:hidden;" onMouseOver="lmouseover(this);" onMouseOut="lblur(this);" onMouseDown="lclick(this);" onMouseUp="lmouseover(this);"><B>Run
away</B></A> <FONT color="Gray">.</FONT> </td>
<td align="right" valign="top">
<A href="mailto:jim@vispo.com" class="k" onMouseOver="lmouseover(this);" onMouseOut="lblur(this);" onMouseDown="lclick(this);" onMouseUp="lmouseover(this);">&copy; Andrews</A><BR><FONT face="Times New Roman">
<FONT color="#FF0000">V</FONT>
<FONT color="#FFFF00"><FONT size="-1">I</FONT></FONT>
<FONT color="#00FF00"><FONT size="-2">S</FONT></FONT>
<FONT color="#0000FF"><FONT size="-1">P</FONT></FONT>
<FONT color="#FF80FF">O</FONT>
</FONT><BR>
<font color="#808080" face="Arial, Helvetica, sans-serif" size="-3"><b><font size="-1">Animisms</font></b></font><BR>
</td>
</tr>
</table>




<FORM id="spdfrm" class="k" style="visibility:hidden; z-index:300;">
<SELECT name="sel" size="10" onChange="Work(this.form, this)">
<OPTION selected value="15">&Aacute;&nbsp;&nbsp;&nbsp;</OPTION>
<OPTION value="18">&Acirc;</OPTION>
<OPTION value="21">&AElig;</OPTION>
<OPTION value="24">&Agrave;</OPTION>
<OPTION value="27">&Aring;</OPTION>
<OPTION value="30">&Atilde;</OPTION>
<OPTION value="35">&Auml;</OPTION>
<OPTION value="40">&Ccedil;</OPTION>
<OPTION value="45">&ETH;</OPTION>
<OPTION value="50">&Eacute;</OPTION>
<OPTION value="55">&Ecirc;</OPTION>
<OPTION value="60">&Egrave;</OPTION>
<OPTION value="65">&Euml;</OPTION>
<OPTION value="70">&Iacute;</OPTION>
<OPTION value="75">&Icirc;</OPTION>
<OPTION value="80">&Igrave;</OPTION>
<OPTION value="85">&Iuml;</OPTION>
<OPTION value="90">&Ntilde;</OPTION>
<OPTION value="95">&Oacute;</OPTION>
<OPTION value="97">&Ocirc;</OPTION>
<OPTION value="100">&Ograve;</OPTION>
<OPTION value="150">&Oslash;</OPTION>
<OPTION value="200">&Otilde;</OPTION>
<OPTION value="250">&Ouml;</OPTION>
<OPTION value="300">&THORN;</OPTION>
<OPTION value="350">&Uacute;</OPTION>
<OPTION value="400">&Ucirc;</OPTION>
<OPTION value="450">&Ugrave;</OPTION>
<OPTION value="500">&Uuml;</OPTION>
<OPTION value="999">&Yacute;</OPTION>
</SELECT><br>
<INPUT type="button" value="ZOT!&nbsp;" onClick="disappearform();">
</FORM>
<!--
If you're reading this, I don't know really why. You could be reading it to see how the piece
was done so you can do dhtml yourself or you are looking for the true meaning of the piece or
you're a habitual source viewer or...

I'm not sure whether to talk about the mechanics of the piece here or not. Naw, that's technique,
and technique is hard won but anybody can do it.
-->
<DIV id="m" class="j" style="top:-75; left:200px; font-size:40; jfontinc:0; rd:20; gd:200; bd:120; rdinc:1; gdinc:1; bdinc:1; z-index:7;">m
</DIV>
<DIV id="e" class="j" style="top:-75px; left:257px; font-size:40; jfontinc:0; rd:20; gd:200; bd:120; rdinc:0; gdinc:0; bdinc:1; z-index:6;">e
</DIV>
<DIV id="aa" class="j" style="top:-75px; left:300px; font-size:40; jfontinc:0; rd:20; gd:200; bd:120; rdinc:0; gdinc:1; bdinc:0; z-index:5;">a
</DIV>
<DIV id="n" class="j" style="top:-75px; left:345px; font-size:40; jfontinc:0; rd:20; gd:200; bd:120; rdinc:0; gdinc:1; bdinc:1; z-index:4;">n
</DIV>
<DIV id="ii" class="j" style="top:-75px; left:390px; font-size:40; jfontinc:0; rd:20; gd:200; bd:120; rdinc:1; gdinc:0; bdinc:0; z-index:3;">i
</DIV>
<DIV id="n2" class="j" style="top:-75px; left:417px; font-size:40; jfontinc:0; rd:20; gd:200; bd:120; rdinc:1; gdinc:0; bdinc:1; z-index:2;">n
</DIV>
<DIV id="g" class="j" style="top:-75px; left:462px; font-size:40; jfontinc:0; rd:20; gd:200; bd:120; rdinc:1; gdinc:1; bdinc:0; z-index:1;">g
</DIV>
</BODY>
</HTML> Enigma n (current version) Enigma n (1999 version) What do we read when we read electronic literature? Source Code Programming language
Authoring software
WYSIWYG authoring
Text
Scripts
Variables
Data Sets
Documentation Software Hardware Reader Logical Layer Data Layer Presentation Layer Browsers
Plugins & Add-ons
Operating System Processor(s) (CPU)
Graphics cards (GPU)
Memory (RAM)
Storage Media
Screen
Speakers
Keyboard
Mouse, trackpad, touchscreen
Camera, microphone
Peripherals Interaction with the executed work on display
Reception performance
Screen reading "Remediation" in the context of e-texts: The presentation layer follows the logic of immediacy:
It seeks transparency.
Code and computation disappear.
It "removes the creator from the image" (Bolter, Grusin 28).
The data layer follows the logic of hypermediacy:
It makes its materials and functions clear
Documentation breaks the illusion of pure functionality.
It addresses a double audience: software and humans. Open vs. Closed Works Closed source works:
Examples: Flash, Shockwave, iOS, Java, etc.
No access to source code from published files.
Reader has to intuit the algorithms, variables, behavior.
Works largely seek to produce immediacy through transparent interfaces.
Hypermediacy occurs in the diegetic world of the work.
Open source works:
Examples: HTML, JavaScript, Perl, Basic, etc.
Reader can access source from published files.
Variables, data sets, scripts, and documentation can.
Reader can produce Critical Code readings.
Source becomes material for potential remixes.
Insight on the work through reading of code. http://www.studiocleo.com/cauldron/volume1/jimandrews/index.html Cauldron & Net version (1999) http://www.electronicbookreview.com/thread/electropoetics/codology http://nickm.com/poems/taroko_gorge.html Porting as Remediation: "Porting is the process of adapting software so that an executable program can be created for a computing environment that is different from the one for which it was originally designed" (Wikipedia).
Remediation: representing one medium in another.
Digital media is a meta-medium, meaning that it can represent other media within it.
It is also plural, patched together from many different software and hardware configurations.
So porting code remediates for different machines, configurations, and in that sense different (digital) media:
Example 1: DHTML to JavaScript (Enigma n, Seattle Drift)
Example 2: Flash into HTML5 (Uncontrollable Semantics) http://leonardoflores.net/post/40030296466/uncontrollable-semantics-2012-edition-by-jason Leonardo Flores, PhD
Associate Professor of English
University of Puerto Rico: Mayaguez
Fulbright Scholar in Digital Culture
University of Bergen
http://leonardoflores.net For more context, read presentation proposal: https://docs.google.com/file/d/0B7zUIOUAkkaJYm9sbFlTR05hYTg/
Full transcript