Thaumotrope Assignment
- Thaumotrope
- Assignment: Link to your thaumotrope (open in new window) and to your personal Reflection
To get your thaumotrope to display in your site, create an <embed code> box and insert the following code:
Warning, be sure to change all five instances of studname to your first name.
<html><head>
<title>Thaumotrope</title>
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type">
<script language="JavaScript">
<!--
var n=0
var td=60
var running=0
thaum=new Array()
thaum[0] = new Image()
thaum[0].src="https://dl.dropboxusercontent.com/u/88438663/thaumotropes/studname/image1.png"
thaum[1] = new Image()
thaum[1].src="https://dl.dropboxusercontent.com/u/88438663/thaumotropes/studname/image2.png"
function start() {
running = 1
thaumotrope()
}
function next() {
if (running==0) {
++n
if (n>=1) {
n = 1
}
document.thaumotrope.src = thaum[n].src
}
}
function prev() {
if (running==0) {
--n
if (n<1) {
n = 0
}
document.thaumotrope.src = thaum[n].src
}
}
function thaumotrope() {
if (running==1) {
++n
if (n>=2) {
n = 0
}
document.thaumotrope.src = thaum[n].src
setTimeout("thaumotrope()",td);
}
}
function stop_thaumotrope() {
if (running==1) {
running = 0
}
}
function start_thaumotrope() {
if (running==0) {
running = 1
thaumotrope()
}
}
function inc_speed() {
if (running==1) {
td -= 20
if (td<20) td = 20
}
}
function dec_speed() {
if (running==1) {
td += 20
if (td>500) td = 500
}
}
function reset() {
document.images["thaumotrope"].src = thaum[n]
}
// -->
</script>
<meta content="Microsoft FrontPage 4.0" name="GENERATOR"></head>
<body onload="start()" onresize="reset()" bgcolor="#000000" link="#0000aa" text="#ffffff">
<center>
<p>
</p><form>
<table border="0">
<tbody>
<tr>
<td align="center"><img name="thaumotrope" src="https://dl.dropboxusercontent.com/u/88438663/thaumotropes/studname/image1.png" height="400" width="400">
<p> <br><input onclick="dec_speed()" value="Slower" > <input onclick="stop_thaumotrope()" value="Stop" >
<input onclick="start_thaumotrope()" value="Play" >
<input onclick="inc_speed()" value="Faster" > </p>
</td>
</tr></tbody></table></form>
<img src="https://dl.dropboxusercontent.com/u/88438663/thaumotropes/studname/image1.png" height="200">
<img src="https://dl.dropboxusercontent.com/u/88438663/thaumotropes/studname/image2.png" height="200">
</center>
</body></html>
<title>Thaumotrope</title>
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type">
<script language="JavaScript">
<!--
var n=0
var td=60
var running=0
thaum=new Array()
thaum[0] = new Image()
thaum[0].src="https://dl.dropboxusercontent.com/u/88438663/thaumotropes/studname/image1.png"
thaum[1] = new Image()
thaum[1].src="https://dl.dropboxusercontent.com/u/88438663/thaumotropes/studname/image2.png"
function start() {
running = 1
thaumotrope()
}
function next() {
if (running==0) {
++n
if (n>=1) {
n = 1
}
document.thaumotrope.src = thaum[n].src
}
}
function prev() {
if (running==0) {
--n
if (n<1) {
n = 0
}
document.thaumotrope.src = thaum[n].src
}
}
function thaumotrope() {
if (running==1) {
++n
if (n>=2) {
n = 0
}
document.thaumotrope.src = thaum[n].src
setTimeout("thaumotrope()",td);
}
}
function stop_thaumotrope() {
if (running==1) {
running = 0
}
}
function start_thaumotrope() {
if (running==0) {
running = 1
thaumotrope()
}
}
function inc_speed() {
if (running==1) {
td -= 20
if (td<20) td = 20
}
}
function dec_speed() {
if (running==1) {
td += 20
if (td>500) td = 500
}
}
function reset() {
document.images["thaumotrope"].src = thaum[n]
}
// -->
</script>
<meta content="Microsoft FrontPage 4.0" name="GENERATOR"></head>
<body onload="start()" onresize="reset()" bgcolor="#000000" link="#0000aa" text="#ffffff">
<center>
<p>
</p><form>
<table border="0">
<tbody>
<tr>
<td align="center"><img name="thaumotrope" src="https://dl.dropboxusercontent.com/u/88438663/thaumotropes/studname/image1.png" height="400" width="400">
<p> <br><input onclick="dec_speed()" value="Slower" > <input onclick="stop_thaumotrope()" value="Stop" >
<input onclick="start_thaumotrope()" value="Play" >
<input onclick="inc_speed()" value="Faster" > </p>
</td>
</tr></tbody></table></form>
<img src="https://dl.dropboxusercontent.com/u/88438663/thaumotropes/studname/image1.png" height="200">
<img src="https://dl.dropboxusercontent.com/u/88438663/thaumotropes/studname/image2.png" height="200">
</center>
</body></html>
If done correctly, it should look something like this: