« previous next »
Pages: [1]

Author Topic: Longton's Ant in JavaScript  (Read 2956 times)

Tomaaz

  • Guest
Longton's Ant in JavaScript
« on: July 14, 2013, 08:00:51 PM »
With visible drawing progress:

Code: [Select]
<!DOCTYPE html>
<html>
<head>
<title>Longton's Ant</title>
<meta charset="utf-8">
<style type="text/css">
body {background-color: black}
div {text-align: center}
</style>
<script>
var x = 200;
var y = 200;
var kier = 1;
var step = 12000;

function aktywuj(){
plotno = document.getElementById("rysunek");
zawartosc = plotno.getContext("2d");
zawartosc.fillStyle = "#ffffff";
zawartosc.fillRect(0, 0, 399, 399);
t = setTimeout("rysuj()", 1);
}

function rysuj() {
plotno = document.getElementById("rysunek");
zawartosc = plotno.getContext("2d");
punkt = zawartosc.getImageData(x, y, 1, 1);
if (punkt.data[0] == 255) {
zawartosc.fillStyle = "#000000";
zawartosc.fillRect(x, y, 1, 1);
switch (kier) {
case 1:
kier = 4;
x++;
break;
case 2:
kier = 1;
y++;
break;
case 3:
kier = 2;
x--;
break;
case 4:
kier = 3;
y--;
break;

}
}
else {
zawartosc.fillStyle = "#ffffff";
zawartosc.fillRect(x, y, 1, 1);
switch(kier) {
case 1:
kier = 2;
x--;
break;
case 2:
kier = 3;
y--;
break;
case 3:
kier = 4;
x++;
break;
case 4:
kier = 1;
y++;
break;
}
}
step--;
if (step) {
setTimeout("rysuj()", 1);
}
}
</script>
</head>
<body onload = "aktywuj()">
<div>
<canvas id="rysunek" width="400" height="400"></canvas>
</div>
</body>
</html>

Without visible drawing progress (much faster):

Code: [Select]
<!DOCTYPE html>
<html>
<head>
<title>Longton's Ant</title>
<meta charset="utf-8">
<style type="text/css">
body {background-color: black}
div {text-align: center}
</style>
<script>
var x = 200;
var y = 200;
var kier = 1;

function aktywuj(){
plotno = document.getElementById("rysunek");
zawartosc = plotno.getContext("2d");
zawartosc.fillStyle = "#ffffff";
zawartosc.fillRect(0, 0, 399, 399);
t = setTimeout("rysuj()", 1);
}

function rysuj() {
step = 12000;
while (step) {
plotno = document.getElementById("rysunek");
zawartosc = plotno.getContext("2d");
punkt = zawartosc.getImageData(x, y, 1, 1);
if (punkt.data[0] == 255) {
zawartosc.fillStyle = "#000000";
zawartosc.fillRect(x, y, 1, 1);
switch (kier) {
case 1:
kier = 4;
x++;
break;
case 2:
kier = 1;
y++;
break;
case 3:
kier = 2;
x--;
break;
case 4:
kier = 3;
y--;
break;

}
}
else {
zawartosc.fillStyle = "#ffffff";
zawartosc.fillRect(x, y, 1, 1);
switch(kier) {
case 1:
kier = 2;
x--;
break;
case 2:
kier = 3;
y--;
break;
case 3:
kier = 4;
x++;
break;
case 4:
kier = 1;
y++;
break;
}
}
step--;
}
}
</script>
</head>
<body onload = "aktywuj()">
<div>
<canvas id="rysunek" width="400" height="400"></canvas>
</div>
</body>
</html>

Sources are attached.
Logged

Rick3137

  • Guest
Re: Longton's Ant in JavaScript
« Reply #1 on: July 14, 2013, 10:02:04 PM »

  Just as I thought.

  Slow version:  EGSL - 16 seconds
                       Java Script -  40 seconds

  Fast version :  EGSL - about one tenth of a second
                        Java Script - 11 seconds

 To get the fast EGSL, I had to take the redraw statement out of your library "forward" command.

 Thanks for the info.
Logged

Tomaaz

  • Guest
Re: Longton's Ant in JavaScript
« Reply #2 on: July 14, 2013, 10:36:37 PM »
Quote from: Rick3137 on July 14, 2013, 10:02:04 PM
Slow version:  EGSL - 16 seconds
                     Java Script -  40 seconds

You can't compare them. JavaScript version uses timer - the drawing function is called every 1 millisecond. Also, make sure that you don't count the time your browser needs to start.

Quote from: Rick3137 on July 14, 2013, 10:02:04 PM
  Fast version :  EGSL - about one tenth of a second
                        Java Script - 11 seconds

That's not possible. Do you run your browser first or do you count the time your browser needs to start? The fast JavaScript version also takes less than one second. I've tested it on Windows and Linux with Chromium and Firefox.

Quote from: Rick3137 on July 14, 2013, 10:02:04 PM
To get the fast EGSL, I had to take the redraw statement out of your library "forward" command.

No, you didn't. You could use setredraw() function.  ;)

Regards! :)
« Last Edit: July 14, 2013, 10:56:15 PM by Tomaaz »
Logged

Tomaaz

  • Guest
Re: Longton's Ant in JavaScript
« Reply #3 on: July 14, 2013, 10:51:59 PM »
Here is a version with timer:

Code: [Select]
<!DOCTYPE html>
<html>
<head>
<title>Longton's Ant</title>
<meta charset="utf-8">
<style type="text/css">
body {background-color: black}
div {text-align: center}
</style>
<script>
var x = 200;
var y = 200;
var kier = 1;

function rysuj() {
d = new Date();
plotno = document.getElementById("rysunek");
zawartosc = plotno.getContext("2d");
zawartosc.fillStyle = "#ffffff";
zawartosc.fillRect(0, 0, 399, 399);
step = 12000;
while (step) {
punkt = zawartosc.getImageData(x, y, 1, 1);
if (punkt.data[0] == 255) {
zawartosc.fillStyle = "#000000";
zawartosc.fillRect(x, y, 1, 1);
switch (kier) {
case 1:
kier = 4;
x++;
break;
case 2:
kier = 1;
y++;
break;
case 3:
kier = 2;
x--;
break;
case 4:
kier = 3;
y--;
break;

}
}
else {
zawartosc.fillStyle = "#ffffff";
zawartosc.fillRect(x, y, 1, 1);
switch(kier) {
case 1:
kier = 2;
x--;
break;
case 2:
kier = 3;
y--;
break;
case 3:
kier = 4;
x++;
break;
case 4:
kier = 1;
y++;
break;
}
}
step--;
}
e = new Date();
zawartosc.fillText("Time: " + (e - d) + " ms.", 10, 350);
}
</script>
</head>
<body onload = "rysuj()">
<div>
<canvas id="rysunek" width="400" height="400"></canvas>
</div>
</body>
</html>

0.13 s. on my computer.
« Last Edit: July 14, 2013, 10:53:33 PM by Tomaaz »
Logged
Pages: [1]
« previous next »