<HTML>
<HEAD>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1">
<TITLE>Javascript Animation</TITLE>
<SCRIPT language='javascript'>
x=0;
y=0;
value=1;
function number(i ,k) {
if (k == '0' && document.images[i].src != "http://www.humboldt1.com/~medusa/black.gif"){
document.images[i].src="black.gif";
}
else if (k == '1' && document.images[i].src != "http://www.humboldt1.com/~medusa/orange.gif"){
document.images[i].src="orange.gif";
}
else if (k == '2' && document.images[i].src != "http://www.humboldt1.com/~medusa/red.gif"){
document.images[i].src="red.gif";
}
else if (k == '3' && document.images[i].src != "http://www.humboldt1.com/~medusa/green.gif"){
document.images[i].src="green.gif";
}
else if (k == '4' && document.images[i].src != "http://www.humboldt1.com/~medusa/blue.gif"){
document.images[i].src="blue.gif";
}
else if (k == '5' && document.images[i].src != "http://www.humboldt1.com/~medusa/yellow.gif"){
document.images[i].src="yellow.gif";
}
else if (k == '6' && document.images[i].src != "http://www.humboldt1.com/~medusa/purple.gif"){
document.images[i].src="purple.gif";
}
else if (k == '8' && document.images[i].src != "http://www.humboldt1.com/~medusa/grey.gif"){
document.images[i].src="grey.gif";
}
else if (k == '9' && document.images[i].src != "http://www.humboldt1.com/~medusa/ltgrey.gif"){
document.images[i].src="ltgrey.gif";
}
else if (k == 'a' && document.images[i].src != "http://www.humboldt1.com/~medusa/peach.gif"){
document.images[i].src="peach.gif";
}
else if (k == 'b' && document.images[i].src != "http://www.humboldt1.com/~medusa/ltblue.gif"){
document.images[i].src="ltblue.gif";
}
else if (k == 'c' && document.images[i].src != "http://www.humboldt1.com/~medusa/ltpurple.gif"){
document.images[i].src="ltpurple.gif";
}
else if (k == 'd' && document.images[i].src != "http://www.humboldt1.com/~medusa/turquoise.gif"){
document.images[i].src="turquoise.gif";
}
else if (k == 'e' && document.images[i].src != "http://www.humboldt1.com/~medusa/brown.gif"){
document.images[i].src="brown.gif";
}
else if (k == 'f' && document.images[i].src != "http://www.humboldt1.com/~medusa/ltgreen.gif"){
document.images[i].src="ltgreen.gif";
}
else if (k == '7' && document.images[i].src != "http://www.humboldt1.com/~medusa/white.gif")
{
document.images[i].src="white.gif";
}
return k;
}
function change (data) {
if (data.indexOf(",")!=-1) {
var i =0 ;
var x='';
var y='';
while ( data.charAt(i)!=",") {
x+=data.charAt(i);
i++;
}
i++;
while (data.charAt(i)!=",") {
y+=data.charAt(i);
i++
}
i++;
j=0;
num= new Array(eval(x*y));
while (data.charAt(i)) {
num[j]=data.charAt(i);
j++; i++;
}
for (i=0;i<(eval(x*y));i++) {
j=number(i,num[i]);
}
return true;
}
else {
return false;
}
}
function color ( ) {
if (document.forms[2].color[1].checked == true) {
return '0';
}
else if (document.forms[2].color[2].checked == true) {
return '1';
}
else if (document.forms[2].color[3].checked == true) {
return '2';
}
else if (document.forms[2].color[4].checked == true) {
return '3';
}
else if (document.forms[2].color[5].checked == true) {
return '4';
}
else if (document.forms[2].color[6].checked == true) {
return '5';
}
else if (document.forms[2].color[7].checked == true) {
return '6';
}
else if (document.forms[2].color[8].checked == true) {
return '8';
}
else if (document.forms[2].color[9].checked == true) {
return '9';
}
else if (document.forms[2].color[10].checked == true) {
return 'a';
}
else if (document.forms[2].color[11].checked == true) {
return 'b';
}
else if (document.forms[2].color[12].checked == true) {
return 'c';
}
else if (document.forms[2].color[13].checked == true) {
return 'd';
}
else if (document.forms[2].color[14].checked == true) {
return 'e';
}
else if (document.forms[2].color[15].checked == true) {
return 'f';
}
else {
return '7';
}
}
function setValue (value,x,y,num) {
value=eval(value);
framecount=document.forms[0].length;
if (value<framecount) {
var save='';
save+=x+','+y+',';
for(b=0;b<x*y;b++){
save+=(num[b]==null)?7:num[b];
}
document.forms[0].elements[value].value=save;
document.forms[1].elements[1].value="Picture "+(value)+" saved";
if (value==framecount-1) {
document.forms[1].elements[1].value+=" Done";
}
for (i=0;i<x*y;i++) {
document.images[i].src="white.gif";
num[i]=7;
}
}
else {
window.alert("You are all done. Click the Animate button to see your work.");
}
document.forms[1].elements['value'].value= ++value;
return num;
}
function animate(count) {
wait=0;
if (change(document.forms[0].elements[count].value)) {
wait=500;
}
if (count<document.forms[0].length-1) {
count++;
}
else {
count=1;
}
ID= setTimeout("animate("+count+")",wait);
}
function makePad() {
x=window.prompt("How wide do you want the picture?", 6);
y=window.prompt("How tall do you want picture?", 6);
framecount=window.prompt("How many frames do you want to have?", 4);
num= new Array(x*y);
for (i=0;i<num.length;i++){
num[i]=7;
}
document.writeln("<center><table border=4><table border=0 cellspacing=0 cellpadding=0 >");
for (i=0;i<y;i++) {
document.writeln("<tr>");
for (a=0;a<x;a++) {
document.writeln("<td><a href=#blah onmouseover='num["+eval(i*(eval(x))+a)+"]=number("+eval(i*(eval(x))+a)+",color());'><img src=white.gif border=0 width=10 height=10></a></td>");
num[eval(i*(eval(x))+a)]=7;
}
document.writeln("</tr>");
}
document.writeln("</table></table>");
document.writeln("<form ><input type=button value='Next Frame' onclick=num=setValue(document.forms[1].elements['value'].value,"+x+","+y+",num);>");
for (i=0; i<framecount; i++) {
document.writeln("<input type=hidden name=info>");
}
}
function move(where) {
if (where=="up")
{
offset=x;
}
else if (where=="down")
{
offset=-x;
}
else if (where=="left")
{
offset=1;
}
else if (where=="right")
{
offset=-1;
}
for (i=(offset<=0)?(x*y)-1:0;(offset<=0)?i>=0:i<x*y;(offset<=0)?i--:i++) {
if (where=='left' && i%x==x-1)
num[i]=number(i,'7');
else if (i%x==0 && where=='right')
num[i]=number(i,'7');
else if (eval(eval(i)-(-eval(offset)))>=(x*y) && where=='up')
num[i]=number(i,'7');
else if (eval(eval(i)-(-eval(offset)))<0 && where=='down')
num[i]=number(i,'7');
else
num[i]=number(i,(num[eval(eval(i)-(-eval(offset)))]));
}
}
function save()
{
if (!popup.closed)
popup.close();
sourcepage= window.open('','','toolbar=no,location=no,directories=no,status=no,scrollbars=yes,resizeable=yes,copyhistory=no');
sourcepage.document.clear();
sourcepage.document.writeln("<pre>");
sourcepage.document.writeln("<HTML>");
sourcepage.document.writeln("<HEAD>");
sourcepage.document.writeln("<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1">");
sourcepage.document.writeln("<TITLE>Javascript Animation</TITLE>");
sourcepage.document.writeln("<SCRIPT language='javascript'>");
sourcepage.document.writeln("x=0;");
sourcepage.document.writeln("y=0;");
sourcepage.document.writeln("value=1;");
sourcepage.document.writeln(" ");
sourcepage.document.writeln(" ");
sourcepage.document.writeln("function number(i ,k) {");
sourcepage.document.writeln("if (k == '0'&& document.images[i].src != "http://www.humboldt1.com/~medusa/black.gif"){");
sourcepage.document.writeln("document.images[i].src="http://www.humboldt1.com/~medusa/black.gif";");
sourcepage.document.writeln("}");
sourcepage.document.writeln("else if (k == '1'&& document.images[i].src != "http://www.humboldt1.com/~medusa/orange.gif"){");
sourcepage.document.writeln("document.images[i].src="http://www.humboldt1.com/~medusa/orange.gif";");
sourcepage.document.writeln("}");
sourcepage.document.writeln("else if (k == '2'&& document.images[i].src != "http://www.humboldt1.com/~medusa/red.gif"){");
sourcepage.document.writeln("document.images[i].src="http://www.humboldt1.com/~medusa/red.gif";");
sourcepage.document.writeln("}");
sourcepage.document.writeln("else if (k == '3'&& document.images[i].src != "http://www.humboldt1.com/~medusa/green.gif"){");
sourcepage.document.writeln("document.images[i].src="http://www.humboldt1.com/~medusa/green.gif";");
sourcepage.document.writeln("}");
sourcepage.document.writeln("else if (k == '4'&& document.images[i].src != "http://www.humboldt1.com/~medusa/blue.gif"){");
sourcepage.document.writeln("document.images[i].src="http://www.humboldt1.com/~medusa/blue.gif";");
sourcepage.document.writeln("}");
sourcepage.document.writeln("else if (k == '5'&& document.images[i].src != "http://www.humboldt1.com/~medusa/yellow.gif"){");
sourcepage.document.writeln("document.images[i].src="http://www.humboldt1.com/~medusa/yellow.gif";");
sourcepage.document.writeln("}");
sourcepage.document.writeln("else if (k == '6'&& document.images[i].src != "http://www.humboldt1.com/~medusa/purple.gif"){");
sourcepage.document.writeln("document.images[i].src="http://www.humboldt1.com/~medusa/purple.gif";");
sourcepage.document.writeln("}");
sourcepage.document.writeln("else if (k == '8'&& document.images[i].src != "http://www.humboldt1.com/~medusa/grey.gif"){");
sourcepage.document.writeln("document.images[i].src="http://www.humboldt1.com/~medusa/grey.gif";");
sourcepage.document.writeln("}");
sourcepage.document.writeln("else if (k == '9'&& document.images[i].src != "http://www.humboldt1.com/~medusa/ltgrey.gif"){");
sourcepage.document.writeln("document.images[i].src="http://www.humboldt1.com/~medusa/ltgrey.gif";");
sourcepage.document.writeln("}");
sourcepage.document.writeln("else if (k == 'a' && document.images[i].src != "http://www.humboldt1.com/~medusa/peach.gif"){");
sourcepage.document.writeln("document.images[i].src="http://www.humboldt1.com/~medusa/peach.gif";");
sourcepage.document.writeln("}");
sourcepage.document.writeln("else if (k == 'b'&& document.images[i].src != "http://www.humboldt1.com/~medusa/ltblue.gif"){");
sourcepage.document.writeln("document.images[i].src="http://www.humboldt1.com/~medusa/ltblue.gif";");
sourcepage.document.writeln("}");
sourcepage.document.writeln("else if (k == 'c'&& document.images[i].src != "http://www.humboldt1.com/~medusa/ltpurple.gif"){");
sourcepage.document.writeln("document.images[i].src="http://www.humboldt1.com/~medusa/ltpurple.gif";");
sourcepage.document.writeln("}");
sourcepage.document.writeln("else if (k == 'd'&& document.images[i].src != "http://www.humboldt1.com/~medusa/turquoise.gif"){");
sourcepage.document.writeln("document.images[i].src="http://www.humboldt1.com/~medusa/turquoise.gif";");
sourcepage.document.writeln("}");
sourcepage.document.writeln("else if (k == 'e'&& document.images[i].src != "http://www.humboldt1.com/~medusa/brown.gif"){");
sourcepage.document.writeln("document.images[i].src="http://www.humboldt1.com/~medusa/brown.gif";");
sourcepage.document.writeln("}");
sourcepage.document.writeln("else if (k == 'f'&& document.images[i].src != "http://www.humboldt1.com/~medusa/ltgreen.gif"){");
sourcepage.document.writeln("document.images[i].src="http://www.humboldt1.com/~medusa/ltgreen.gif";");
sourcepage.document.writeln("}");
sourcepage.document.writeln("else if (k == '7' && document.images[i].src != "http://www.humboldt1.com/~medusa/white.gif")");
sourcepage.document.writeln("{");
sourcepage.document.writeln("document.images[i].src="http://www.humboldt1.com/~medusa/white.gif";");
sourcepage.document.writeln("}");
sourcepage.document.writeln("return k;");
sourcepage.document.writeln("}");
sourcepage.document.writeln(" ");
sourcepage.document.writeln("function change (data) {");
sourcepage.document.writeln("if (data.indexOf(",")!=-1) {");
sourcepage.document.writeln("var i =0 ;");
sourcepage.document.writeln("var x='';");
sourcepage.document.writeln("var y='';");
sourcepage.document.writeln("while ( data.charAt(i)!=",") {");
sourcepage.document.writeln(" x+=data.charAt(i);");
sourcepage.document.writeln(" i++;");
sourcepage.document.writeln(" }");
sourcepage.document.writeln("i++;");
sourcepage.document.writeln("while (data.charAt(i)!=",") {");
sourcepage.document.writeln(" y+=data.charAt(i);");
sourcepage.document.writeln(" i++");
sourcepage.document.writeln("}");
sourcepage.document.writeln("i++;");
sourcepage.document.writeln("j=0;");
sourcepage.document.writeln("num= new Array(eval(x*y));");
sourcepage.document.writeln("while (data.charAt(i)) {");
sourcepage.document.writeln(" num[j]=data.charAt(i);");
sourcepage.document.writeln(" j++; i++;");
sourcepage.document.writeln("}");
sourcepage.document.writeln("for (i=0;i<(eval(x*y));i++) {");
sourcepage.document.writeln("j=number(i,num[i]);");
sourcepage.document.writeln("}");
sourcepage.document.writeln("return true;");
sourcepage.document.writeln("}");
sourcepage.document.writeln("else {");
sourcepage.document.writeln("return false;");
sourcepage.document.writeln("}");
sourcepage.document.writeln("}");
sourcepage.document.writeln(" ");
sourcepage.document.writeln(" ");
sourcepage.document.writeln("function animate(initcount) {");
sourcepage.document.writeln("wait=0;");
sourcepage.document.writeln("count=eval(initcount);");
sourcepage.document.writeln("if (change(document.info.elements[eval(count)].value)) {");
sourcepage.document.writeln("wait=500;}");
sourcepage.document.writeln("if (count<document.info.length-1) {");
sourcepage.document.writeln("	count++;");
sourcepage.document.writeln("}");
sourcepage.document.writeln("else {");
sourcepage.document.writeln("	count=0;");
sourcepage.document.writeln("}");
sourcepage.document.writeln("ID= setTimeout("animate("+count+")",wait);");
sourcepage.document.writeln("}");
sourcepage.document.writeln(" ");
sourcepage.document.writeln(" ");
sourcepage.document.writeln("function makePad(initx,inity) {");
sourcepage.document.writeln("x=eval(initx);");
sourcepage.document.writeln("y=eval(inity);");
sourcepage.document.writeln("num= new Array(x*y);");
sourcepage.document.writeln("for (i=0;i<num.length;i++){");
sourcepage.document.writeln("num[i]=7;");
sourcepage.document.writeln("}");
sourcepage.document.writeln("document.writeln("<center><table border=4><table border=0 cellspacing=0 cellpadding=0 >");");
sourcepage.document.writeln("for (i=0;i<y;i++) {");
sourcepage.document.writeln("document.writeln("<tr>");");
sourcepage.document.writeln("for (a=0;a<x;a++) {");
sourcepage.document.writeln("document.writeln("<td><img src='http://www.humboldt1.com/~medusa/white.gif' border=0 width=10 height=10></td>");");
sourcepage.document.writeln("num[eval(i*(eval(x))+a)]=7;");
sourcepage.document.writeln("}");
sourcepage.document.writeln("document.writeln("</tr>");");
sourcepage.document.writeln("}");
sourcepage.document.writeln("document.writeln("</table></table>");");
sourcepage.document.writeln("}");
sourcepage.document.writeln(" ");
sourcepage.document.writeln("</SCRIPT>");
sourcepage.document.writeln("</HEAD>");
sourcepage.document.writeln(" ");
sourcepage.document.writeln("<BODY BGCOLOR="#bbbbbb"><center>");
sourcepage.document.writeln("<form value='info' name='info'>");
for (i=1;i<document.forms[0].length;i++) {
if (document.forms[0].elements[i].value.indexOf(",")!=-1)
{
sourcepage.document.writeln("<input type=hidden name='1' value=""+document.forms[0].elements[i].value+"">");
}
}
sourcepage.document.writeln("</form>");
sourcepage.document.writeln("<SCRIPT language=javascript>");
sourcepage.document.writeln("makePad("+x+","+y+");");
sourcepage.document.writeln("animate(0);");
sourcepage.document.writeln("</SCRIPT>");
sourcepage.document.writeln("</BODY>");
sourcepage.document.writeln(" ");
sourcepage.document.writeln("</HTML>");
sourcepage.document.writeln(" ");
sourcepage.document.writeln(" ");
sourcepage.document.writeln("</pre>");
}
</SCRIPT>
</HEAD>
<BODY BGCOLOR="#bbbbbb"><center>
<SCRIPT language=javascript>
popup= window.open('','','toolbar=no,location=no,directories=no,status=no,scrollbars=yes,resizeable=yes,copyhistory=no,width=350,height=150');
popup.document.clear();
popup.document.write('<head><title>Instructions</title></head>');
popup.document.write('<body bgcolor=#225577>');
popup.document.write('<center><font size=+1>Instructions:</font></center><br>');
popup.document.writeln('1. Select colors by clicking the radio button below the color<br>');
popup.document.writeln('2. Draw in the white area<br>');
popup.document.writeln('3. To move cursor without drawing, hold down the mouse button<br>');
popup.document.writeln('4. When done drawing each picture, click the Next Frame button<br>');
popup.document.writeln('5. When you are finished with all the drawings, click Animate<br>');
popup.document.writeln('6. To start over, reload this page.<br>');
popup.document.writeln('7. Good luck!<br>');
popup.document.write('</body>');
makePad();
</SCRIPT>
</form><form>
<input type=button value='Animate' onclick='animate(1)'><br>
<input type=text size=22 value=''><input type=hidden name='value' value='1'><br>
</form>
<form><table><tr>
<br><font size=4>
<td><img src="white.gif" border=2></td>
<td><img src="black.gif" border=2></td>
<td><img src="orange.gif" border=2></td>
<td><img src="red.gif" border=2></td>
<td><img src="green.gif" border=2></td>
<td><img src="blue.gif" border=2></td>
<td><img src="yellow.gif" border=2></td>
<td><img src="purple.gif" border=2></td></tr><tr><td>
<input type=radio default name=color value="white"></td><td>
<input type=radio name="color" value="black"></td><td>
<input type=radio name="color" value="orange"></td><td>
<input type=radio name="color" value="red"></td><td>
<input type=radio name="color" value="green"></td><td>
<input type=radio name="color" value="blue"></td><td>
<input type=radio name="color" value="yellow"></td><td>
<input type=radio name="color" value="purple"></td></tr>
<tr><td><img src="grey.gif" border=2></td>
<td><img src="ltgrey.gif" border=2></td>
<td><img src="peach.gif" border=2></td>
<td><img src="ltblue.gif" border=2></td>
<td><img src="ltpurple.gif" border=2></td>
<td><img src="turquoise.gif" border=2></td>
<td><img src="brown.gif" border=2></td>
<td><img src="ltgreen.gif" border=2></td></tr><tr><td>
<input type=radio name="color" value="grey"></td>
<td>
<input type=radio name="color" value="ltgrey"></td><td>
<input type=radio name="color" value="peach"></td><td>
<input type=radio name="color" value="ltblue"></td><td>
<input type=radio name="color" value="ltpurple"></td><td>
<input type=radio name="color" value="turqoise"></td><td>
<input type=radio name="color" value="brown"></td><td>
<input type=radio name="color" value="ltgreen"></td></table>
</font></form></center>
<script language=javascript>
document.forms[2].color[0].checked=true;
</script>
<form>
<input type=button value="Copy from Previous" onclick="change(document.forms[0].elements[eval(document.forms[1].elements['value'].value-1)].value)"><br>
<input type=button value="Up" onclick="move('up')">
<input type=button value="Down" onclick="move('down')">
<input type=button value="Left" onclick="move('left')">
<input type=button value="Right" onclick="move('right')">
</form>
<a href="javascript:save()">Copy this to get the source to have your picture on your own page</a><p>
<a href='page/' target=_top>Check out the rest of my site</a></center>
</BODY>
</HTML>