RetroBASIC
Retrogamecoding(.org) => Other Languages => Topic started by: Tomaaz on July 14, 2013, 08:00:51 PM
-
With visible drawing progress:
<!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):
<!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.
-
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.
-
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.
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.
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() (http://retrogamecoding.org/board/index.php?topic=9.msg31#msg31) function. ;)
Regards! :)
-
Here is a version with timer:
<!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.