Longton's Ant in JavaScript

Retrogamecoding(.org) > Other Languages

(1/1)

Tomaaz:
With visible drawing progress:

--- Code: ---<!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>

--- End code ---

Without visible drawing progress (much faster):

--- Code: ---<!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>

--- End code ---

Sources are attached.

Rick3137:

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.

Tomaaz:

--- Quote from: Rick3137 on July 14, 2013, 10:02:04 PM ---Slow version: EGSL - 16 seconds
Java Script - 40 seconds

--- End quote ---

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

--- End quote ---

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.

--- End quote ---

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

Regards! :)

Tomaaz:
Here is a version with timer:

--- Code: ---<!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>

--- End code ---

0.13 s. on my computer.

Navigation

[0] Message Index

Go to full version