Coordinaten omzetten naar Coordinaten met maten
Momenteel ben ik bezig om een spel te maken. Groot deel hiervan bestaat uit javascript.
Dit houd in dat ik ajax calls moet minimalizeren en als ik een call doe deze zo klein/kort mogelijk moet houden om goede performance te houden.
Nu is het al redelijk snel, maar het kan nog sneller.
Ik heb bijvoorbeeld een tegel welke bestaat uit 100 vakjes van 50x50.
Doormiddel van een 1 en 0 'lijst' bepaal ik waar een speler wel of geen gebouw mag neerzetten.
Zo'n 'lijst' zoet er als volgt uit:
0,0,0,0,1,1,1,1,1,1,|
1,0,0,0,1,0,1,0,1,0,|
1,0,0,0,1,1,0,0,1,0,|
1,0,0,1,0,1,1,1,0,0,|
0,1,0,1,1,1,1,1,0,0,|
1,1,1,1,0,0,0,1,0,0,|
1,0,0,0,0,0,1,1,0,0,|
1,1,0,1,0,0,1,1,1,0,|
0,0,1,0,0,0,0,0,1,1,|
0,1,0,1,1,0,1,1,1,0
Het PHP script dat ik nu gemaakt heb zorgt er voor dat van elke 1 een coordinaat (x,y positie) in JSON doorgestuurd word naar het spel, vervolgens word door deze coördinaten geloopt en word er in een canvas aangegeven waar wel en niet gebouwd moet worden.
Echter loopt hij nu door veeeel te veel coordinaten heen. Ik wil dus in mijn PHP script de 1tjes gaan groeperen.
ipv dat ik een coordinaat terugstuur (x,y) wil ik een coordinaat meesturen met een maat dus: (x,y,width,height).
Zo krijg ik minder coordinaten, hoef ik minder te loopen dus snelheids winst.
Echter is mijn probleem dat ik niet kan bedenken hoe ik dit nou juist moet programmeren.
Ik hoop dat iemand mij kan helpen!
Gr. Robert
Gewijzigd op 20/03/2013 21:29:57 door Robert Wazzaa
Dus gewoon binair: 0000111111110110100101 etc.
Korter dan dat ga je het niet krijgen.
Je weet dat het 100 velden (dus 10x10?) zijn, dus eerst splitsen in 10 regels en dan stuk voor stuk.
Dat is veel makkelijker, sneller dan moeilijke formaten weergeven.
Denk aan L-vormen.
Eventueel kan je wel dit doen:
4x0,6x1
1x1,3x0,1,0,1,0
etc etc etc
Maar of dat sneller/makkelijker is... denk het niet. Ook het ontcoderen duurt langer.
Kan je al die coordinatien (of eigenlijk: binaire code) niet door een base64_encode() gooien? Dan wordt het korter qua tekens. En ontcijferen moet met Javascript ook wel kunnen (denk ik).
Het gaat er niet om dat PHP langzaam is, het gaat er om dat javascript door te veel heen moet loopen.
Dus of het nou met of zonder comma's is dat maakt verder niet uit.
Momenteel heb ik namelijk bij het laden van het spel een javascript loop die door 2708 coordinaten heen loopt verdeelt over 24 tegels van 500 x 500 pixels welke bestaan uit 100 tegels van 50x50.
Het enige waar ik nog snelheidswinst uit kan halen is niet voor elke coordinaat een waarde te sturen, maar waar mogelijk coordinaten die bij elkaar zitten dus 1-1,1-2,2-1,2-2 samenvoegen tot dit: 1-1,2,2 dan hoef ik in plaats van 4 keer loopen maar 1 keer te loopen.
Wat ik dus wil is dat mijn PHP script ipv dit: 1-1,1-2,2-1,2-2 deze waarde terugstuurd: 1-1,2,2
En ik zoek dus hulp bij het maken van dit script.
Ik hoop dat ik het zo wat duidelijker maak!
Gr. Robert
Met canvas maak je toch gewoon lijnen vlakken en dat soort zaken?
waarom niet gewoon een json als
Code (php)
1
{"moveTo":[25,25],"lineTo":[105,25],"lineTo":[25,105]}
Dat klopt, echter is dit nu denk ik niet echt relevant voor mijn probleem?
Of mis ik iets?
Gr. Robert
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script>
function dec2bin ( number ) {
alert ( number + ' binair: ' + number.toString ( 2 ) );
}
function bin2dec ( number ) {
binarynumber = parseInt ( number, 2 );
alert ( number + ' decimaal: ' + binarynumber.toString ( 10 ) );
}
dec2bin ( 123 );
bin2dec ( 111111 );
// Testen
</script>
</head>
<body></body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script>
function dec2bin ( number ) {
alert ( number + ' binair: ' + number.toString ( 2 ) );
}
function bin2dec ( number ) {
binarynumber = parseInt ( number, 2 );
alert ( number + ' decimaal: ' + binarynumber.toString ( 10 ) );
}
dec2bin ( 123 );
bin2dec ( 111111 );
// Testen
</script>
</head>
<body></body>
</html>
Dit heeft er verder maar weinig mee te maken.
Simpelweg komt het hier op neer:
Ik heb een lijst met bijvoorbeeld 55 losse coordinaten die ik via een JSON string ophaal met ajax.
Maar in plaats van die 55 losse coordinaten wil ik bijvoorbeeld maar 15 coordinaten terugkrijgen waarbij aangegeven is wat de maat van het blok is.
Gr. Robert
Het zou kunnen. je laat maar weinig code zien dus het is een beetje koffiedik kijken.
de vakjes zou je ook kunnen nummeren, bijvoorbeeld: je hebt 100 vakjes, en laten we zeggen 10 per regel.
dan wordt de eerste regel 0 tm 9, de tweede 10 tm 19 enz.
vervolgens geef je geen enen en nullen op maar de nummers. als je dan tien vakjes moet instellen in een loop
dan loopt je loop tien keer ipv honderd. Nog een vraag. werk je met plat javascript of met jQuery of nog iets anders?
Ik gebruik jQuery, maar ook wanneer dit het toelaat gewoon platte javascript, dit blijft sneller dan jQuery.
Bij deze een stuk van de code die nu de 1en en 0en omzet naar coordinaten.
Even ter duidelijkheid, ik MOET met coordinaten werken voor het spel, er hangt namelijk heel veel aan vast.
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<?php
$build = "
0,0,0,0,1,1,1,1,1,1,|
1,0,0,0,1,0,1,0,1,0,|
1,0,0,0,1,1,0,0,1,0,|
1,0,0,1,0,1,1,1,0,0,|
0,1,0,1,1,1,1,1,0,0,|
1,1,1,1,0,0,0,1,0,0,|
1,0,0,0,0,0,1,1,0,0,|
1,1,0,1,0,0,1,1,1,0,|
0,0,1,0,0,0,0,0,1,1,|
0,1,0,1,1,0,1,1,1,0
";
$rows = explode("|",$build);
$y = 0;
$x = 0;
$cords = array();
foreach ($rows as $row){
$cols = explode(",",$row);
foreach ($cols as $col){
if ($col == '1'){
$cords[] = $x . '-' . $y;
}
$x ++;
}
$y++;
$x = 0;
}
?>
$build = "
0,0,0,0,1,1,1,1,1,1,|
1,0,0,0,1,0,1,0,1,0,|
1,0,0,0,1,1,0,0,1,0,|
1,0,0,1,0,1,1,1,0,0,|
0,1,0,1,1,1,1,1,0,0,|
1,1,1,1,0,0,0,1,0,0,|
1,0,0,0,0,0,1,1,0,0,|
1,1,0,1,0,0,1,1,1,0,|
0,0,1,0,0,0,0,0,1,1,|
0,1,0,1,1,0,1,1,1,0
";
$rows = explode("|",$build);
$y = 0;
$x = 0;
$cords = array();
foreach ($rows as $row){
$cols = explode(",",$row);
foreach ($cols as $col){
if ($col == '1'){
$cords[] = $x . '-' . $y;
}
$x ++;
}
$y++;
$x = 0;
}
?>
Ja inderdaad, dat is het idee!
Gr. Robert
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<?php
header('Content-Type: application/json');
$build = "
0,0,0,0,1,1,1,1,1,1,|
1,0,0,0,1,0,1,0,1,0,|
1,0,0,0,1,1,0,0,1,0,|
1,0,0,1,0,1,1,1,0,0,|
0,1,0,1,1,1,1,1,0,0,|
1,1,1,1,0,0,0,1,0,0,|
1,0,0,0,0,0,1,1,0,0,|
1,1,0,1,0,0,1,1,1,0,|
0,0,1,0,0,0,0,0,1,1,|
0,1,0,1,1,0,1,1,1,0
";
$rows = explode("|",$build);
$y = 0;
$x = 0;
$cords = array();
foreach ($rows as $row){
$cols = explode(",",$row);
foreach ($cols as $col){
if ($col == '1'){
$cords[] = array('X' => $x, 'Y' => $y);
}
$x ++;
}
$y++;
$x = 0;
}
echo json_encode($cords);
?>
header('Content-Type: application/json');
$build = "
0,0,0,0,1,1,1,1,1,1,|
1,0,0,0,1,0,1,0,1,0,|
1,0,0,0,1,1,0,0,1,0,|
1,0,0,1,0,1,1,1,0,0,|
0,1,0,1,1,1,1,1,0,0,|
1,1,1,1,0,0,0,1,0,0,|
1,0,0,0,0,0,1,1,0,0,|
1,1,0,1,0,0,1,1,1,0,|
0,0,1,0,0,0,0,0,1,1,|
0,1,0,1,1,0,1,1,1,0
";
$rows = explode("|",$build);
$y = 0;
$x = 0;
$cords = array();
foreach ($rows as $row){
$cols = explode(",",$row);
foreach ($cols as $col){
if ($col == '1'){
$cords[] = array('X' => $x, 'Y' => $y);
}
$x ++;
}
$y++;
$x = 0;
}
echo json_encode($cords);
?>
output:
Code (php)
1
[{"X":4,"Y":0},{"X":5,"Y":0},{"X":6,"Y":0},{"X":7,"Y":0},{"X":8,"Y":0},{"X":9,"Y":0},{"X":0,"Y":1},{"X":4,"Y":1},{"X":6,"Y":1},{"X":8,"Y":1},{"X":0,"Y":2},{"X":4,"Y":2},{"X":5,"Y":2},{"X":8,"Y":2},{"X":0,"Y":3},{"X":3,"Y":3},{"X":5,"Y":3},{"X":6,"Y":3},{"X":7,"Y":3},{"X":1,"Y":4},{"X":3,"Y":4},{"X":4,"Y":4},{"X":5,"Y":4},{"X":6,"Y":4},{"X":7,"Y":4},{"X":0,"Y":5},{"X":1,"Y":5},{"X":2,"Y":5},{"X":3,"Y":5},{"X":7,"Y":5},{"X":0,"Y":6},{"X":6,"Y":6},{"X":7,"Y":6},{"X":0,"Y":7},{"X":1,"Y":7},{"X":3,"Y":7},{"X":6,"Y":7},{"X":7,"Y":7},{"X":8,"Y":7},{"X":2,"Y":8},{"X":8,"Y":8},{"X":9,"Y":8},{"X":1,"Y":9},{"X":3,"Y":9},{"X":4,"Y":9},{"X":6,"Y":9},{"X":7,"Y":9},{"X":8,"Y":9}]
Dit maakt de JSON string alleen maar langer!
Het gaat niet om het naar JSON zetten, dat lukt wel.
Ik wil alleen minder records in mijn json!
Gr. Robert
Je zei dat je coördinaten wilde hebben, en je de loop korter wilde hebben. Beiden heb je.
je krijgt in dit voorbeeld een loop die 48 keer doorlopen wordt in plaats van 100 keer.
je hebt coördinaten
en in jquery is dit lekker vlot:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script>
$(document).ready(function(){
$.getJSON('co.php', function(data) {
var html = '';
for(var i = 0 ; i < data.length ; i++)
html = html + 'cordinaat ' + i + ': ' + data[i].X + ', ' + data[i].Y + '<br/>';
$('#showdata').html(html + ' lengte: ' + data.length);
});
});</script>
</head>
<body>
<div id="showdata"></div>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script>
$(document).ready(function(){
$.getJSON('co.php', function(data) {
var html = '';
for(var i = 0 ; i < data.length ; i++)
html = html + 'cordinaat ' + i + ': ' + data[i].X + ', ' + data[i].Y + '<br/>';
$('#showdata').html(html + ' lengte: ' + data.length);
});
});</script>
</head>
<body>
<div id="showdata"></div>
</body>
</html>
dus wat is nu het probleem? als je 48 velden wilt tekenen dan zal je dat echt 48 keer moeten doen.
als je zo min mogelijk data wilt dan kun je alles comprimeren door er binaire data van te maken maar
dan heeft de code meer rekenkracht nodig om dit te coderen en te decoderen.
Toch begrijp je me niet goed.
De json van die 48 velden heb ik al, ik stuur de '0 coördinaten' al niet meer mee.
Maar ik wil die 48 coordinaten groeperen, dit heeft totaal niks te maken met binair of wat dan ook.
Stel ik heb een min grit zoals dit:
1,1,0,0,0|
1,1,0,1,1|
1,1,0,1,1|
0,0,1,0,1|
0,0,0,0,0
Dan zou ik in jou en mijn huidig werkende script een json string terug krijgen met 12 records die waardes bevatten als 0-0,0-1 etc.
Echter wil ik dat dit nog minder records worden.
Zoals je kunt zien zitten er in mijn minigrid 6 '1tjes' samen, dit kan dus 1 record worden op positie 0-0 met een breedte van 2 blokken en een hoogte van 3. zelfde rechts daar kunnen 4 '1tjes' samengevoegt worden naar 1-5 met een hoogte en breedte van 2.
De 2 apparte 1tjes zijn niet te groeperen dus krijg je die los.
Dus ipv een array zoals deze:
0-0,
0-1,
1-0,
1-1,
1-4,
1-5,
2-0,
2-1,
2-4,
2-5,
3-2,
3-5
wil ik een array krijgen zoals deze:
0-0,2,3|
1-4,2,2|
3-2,1,1|
3-5,1,1
Oftewel inplaats van door 12 coordinaten lopen, hoef ik er maar door 4 heen te loopen.
Ik hoop dat het nu nog duidelijker is!:)
Gr. Robert
ik heb wel een idee hoe dat te doen maar het is wel een klusje.
Morgenavond misschien
gr.
Ik kan niet wachten!
Toevoeging op 21/03/2013 13:18:13:
Beste Frank en de rest,
Ik heb inmiddels een script weten te maken!
Gr. Robert
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
<?php
// als een rechthoek gevonden is dan worden de pixels die op 1 staan
// eerst op 0 gezet zodat de pixels niet nog een keer worden gevonden
function erase($x, $y, $w, $h) {
global $pixels;
for( $i = $y ; $i < $y + $h; $i++) {
for( $j = $x ; $j < $x + $w ; $j++) {
$pixels[$i][$j] = 0;
}
}
}
// functie findcords zal de cooridinaten bepalen van een rechthoek
// beginnend bij de opgegeven coordinaten
function findCords($sx, $sy) {
global $pixels;
$oldw = 0;
for( $y = $sy ; $y < count($pixels) ; $y++) {
$w = 0;
for( $x = $sx ; $x < count($pixels[$y]) ; $x++) {
// als de pixel 1 is EN de totzover gevonden pixels nog minder
// zijn als de regel die we hiervoor bekeken hebben of het de 1e regel is
if($pixels[$y][$x] == 1 && ($w < $oldw || $oldw == 0)) {
$w ++;
} else
// verlaat deze for lus
break;
}
// als het aantal enen van deze rij kleiner id dan de vorige rij
if($w < $oldw) {
erase($sx, $sy, $oldw, $y - $sy);
return array($sx, $sy, $oldw, $y - $sy);
}
// als het de laatste regel is dan hebben we geen regels meer onder ons
// dus dan doen we het iets anders
if($y == count($pixels) - 1) {
erase($sx, $sy, $w, 1);
return array($sx, $sy, $oldw, $y - $sy);
}
$oldw = $w;
}
}
// initialisatie
$pixels = array();
$cords = array();
$build = "
0,0,0,0,1,1,1,1,1,1|
1,0,0,0,1,0,1,0,1,0|
1,0,0,0,1,1,0,0,1,0|
1,0,0,1,0,1,1,1,0,0|
0,1,0,1,1,1,1,1,0,0|
1,1,1,1,0,0,0,1,0,0|
1,0,0,0,0,0,1,1,0,0|
1,1,0,1,0,0,1,1,1,0|
0,0,1,0,0,0,0,0,1,1|
0,1,0,1,1,0,1,1,1,0
";
// plaats $build in de twee dimensionale array $pixels
$rows = explode("|",$build);
foreach ($rows as $row){
$pixels[] = explode(",",trim($row));
}
// loop kolom voor kolom door iedere regel
for( $y = 0 ; $y < count($pixels) ; $y++) {
for( $x = 0 ; $x < count($pixels[$y]) ; $x++) {
// als dit veld is is
if($pixels[$y][$x] == 1) {
// goto functie findCords
$cords[] = findCords($x, $y); //
}
}
}
echo '<pre>';
print_r($cords); // laat de inhoud van de array $cords zien
echo '</pre>';
?>
// als een rechthoek gevonden is dan worden de pixels die op 1 staan
// eerst op 0 gezet zodat de pixels niet nog een keer worden gevonden
function erase($x, $y, $w, $h) {
global $pixels;
for( $i = $y ; $i < $y + $h; $i++) {
for( $j = $x ; $j < $x + $w ; $j++) {
$pixels[$i][$j] = 0;
}
}
}
// functie findcords zal de cooridinaten bepalen van een rechthoek
// beginnend bij de opgegeven coordinaten
function findCords($sx, $sy) {
global $pixels;
$oldw = 0;
for( $y = $sy ; $y < count($pixels) ; $y++) {
$w = 0;
for( $x = $sx ; $x < count($pixels[$y]) ; $x++) {
// als de pixel 1 is EN de totzover gevonden pixels nog minder
// zijn als de regel die we hiervoor bekeken hebben of het de 1e regel is
if($pixels[$y][$x] == 1 && ($w < $oldw || $oldw == 0)) {
$w ++;
} else
// verlaat deze for lus
break;
}
// als het aantal enen van deze rij kleiner id dan de vorige rij
if($w < $oldw) {
erase($sx, $sy, $oldw, $y - $sy);
return array($sx, $sy, $oldw, $y - $sy);
}
// als het de laatste regel is dan hebben we geen regels meer onder ons
// dus dan doen we het iets anders
if($y == count($pixels) - 1) {
erase($sx, $sy, $w, 1);
return array($sx, $sy, $oldw, $y - $sy);
}
$oldw = $w;
}
}
// initialisatie
$pixels = array();
$cords = array();
$build = "
0,0,0,0,1,1,1,1,1,1|
1,0,0,0,1,0,1,0,1,0|
1,0,0,0,1,1,0,0,1,0|
1,0,0,1,0,1,1,1,0,0|
0,1,0,1,1,1,1,1,0,0|
1,1,1,1,0,0,0,1,0,0|
1,0,0,0,0,0,1,1,0,0|
1,1,0,1,0,0,1,1,1,0|
0,0,1,0,0,0,0,0,1,1|
0,1,0,1,1,0,1,1,1,0
";
// plaats $build in de twee dimensionale array $pixels
$rows = explode("|",$build);
foreach ($rows as $row){
$pixels[] = explode(",",trim($row));
}
// loop kolom voor kolom door iedere regel
for( $y = 0 ; $y < count($pixels) ; $y++) {
for( $x = 0 ; $x < count($pixels[$y]) ; $x++) {
// als dit veld is is
if($pixels[$y][$x] == 1) {
// goto functie findCords
$cords[] = findCords($x, $y); //
}
}
}
echo '<pre>';
print_r($cords); // laat de inhoud van de array $cords zien
echo '</pre>';
?>