JavaScript - HTML5 szimuláció

7. Vonalkövetés

A fizikai, kémiai és matematikai modellek megértésében, a természettudományos jelenségek összefüggéseinek feltárásában sokat segítenek a számítógépes animációk. A szimulációs játékok ugyancsak kiaknázzák a virtuális világ lehetőségeit, amelyben az objektumok mozgatásáról hatékonyabbnál hatékonyabb megoldások gondoskodnak. A népszerű pályajátékok jelentős része valamilyen vonalkövető algoritmus segítségével modellezi a játékosok mozgását, az elektronika iránt érdeklődők körében pedig örökzöld téma a vonalkövető robot megépítése.

Ha valakinél a szekrény tetején porosodna éppen egy Lego Mindstorms programozható robot készlet, akkor most érdemes lenne letörölgetni, és életre kelteni a benne szunnyadó lehetőségeket. Hatalmas élmény, amikor egy gépbe zárt gondolat kinetikus formát ölt.
Ha viszont csak egy PC vagy táblagép áll rendelkezésre, akkor programozhatunk magunk is egy virtuális robotot, ami hajlandó lesz egy megadott pályát bejárni. Később ez a kód tovább fejleszthető különböző Forma-1-es pályák bejárására, vagy akár egy autóverseny játék kivitelezésére. Az ilyen egyszerű, de végtelenül praktikus megoldások általában a Poor Mans Robot kategóriában indulnak, és sok örömet okoznak a fejlesztőiknek.

Vonalkövető robot szimuláció

Használjuk fel a vászon kínálta lehetőségeket kétdimenziós zártpályán közlekedő robot mozgás-szimulációjának modellezésére.

Bemenet: Belső értékadással meghatározott pályaadatok és robot tulajdonságok, valamint a mozgásirány és ismétlési idő.

Kimenet: A vászon különböző pontjain megjelenő robot rajza, és az állapot információi.

Változók: A canvas, context változók a vászonműveletekhez, a ring objektum változói: dataRing a pályaadatok kezeléséhez, a pathColor a pálya, a borderColor és az antiAliasing a pályaszegély színkódjának elemzéséhez, a robot objektum változói: a radius a robot méretét illetve a left, top, centerX, centerY a robot aktuális pozícióját kezelő változók, valamint a myTimerVar és myTimerRepeat a robotmozgás időzítéséhez.

Algoritmus: A zárt pályán mozgó robot a sötét (pathColor:'#1F2839') képpontokon haladva figyeli a pálya által bezárt terület szélén elhelyezkedő világos (borderColor:'#E0E0E0') pixeleket, amelyekhez viszonyítva számolja ki a következő pozícióját.

Eseménykezelés: A setInterval() metódus segítségével beállítunk 1-32 ms-os ismétlési időt a számításokat és a robot megjelenítését végző függvények hívásához.

Kedves Bitfaragó jelöltek!

A HTML5 canvas szimulációs feladatok megjelenítésére is alkalmas. Segítségével könnyen ábrázolhatjuk és egyszerű programozási eszközökkel manipulálhatjuk a virtuális modelljeinket. Ebben a leckében felfedezhetünk egy egyszerűbb vonalkövetési algoritmust, amely egy zárt pályán haladó robotot irányít. Az itt szerzett tapasztalatokat később felhasználhatjuk atommodell-, bolygómozgás- vagy akár a már említett autóverseny-szimulációs feladatok megoldására is. A mintafeladatok alatti Próbáld ki! » gombra kattintással nemcsak megnézhetitek a futási eredményt, hanem mindjárt szerkeszthetitek is a kódot.

1	Robotépítés és programozás

A vonalkövetési feladatok megoldása alapesetben valamilyen egyszerűbb robot megépítésével kezdődik, ami ugyan izgalmas kihívás, de sajnos kevésbé költséghatékony tevékenység. Az érzékelők, a motorok és a vezérlő elektronika beszerzése illetve összeszerelése után az elkészült robot megmozgatásához a mikrovezérlőjét kell majd programozni egy általában ingyenes fejlesztőkörnyezet (IDE) segítségével. Ezt a lehetőséget kínálja például a Launchpad Robot tervezése és megépítése.

Hozzájuthatunk robot építőkészletekhez is, mint amilyen a bevezetőben említett Lego Mindstorms. A beszerzési költsége egy PC árával vetekszik, viszont igen komoly támogatottsággal bír. A különböző feladatok ellátására alkalmas robotok gondosan előkészített útmutató alapján viszonylag könnyen összeállíthatók. A építőkészlet tartalmazza a szenzorokat, a szervomotorokat és a vezérlőegységet, amit gyakran intelligens téglának is neveznek, és a számítógépünkhöz USB kábellel, vagy vezeték nélküli módon Bluetooth vagy Wi-Fi segítségével csatlakoztatható. A használható programozási nyelvek: LEGO MindStorms NXT Software, NBC/NXC nyelvpáros, RobotC. Az elkészült program USB vagy Bluetooth kapcsolaton keresztül tölthető át az intelligens téglába. Hogyan készítsünk vonalkövető robotot Mindstroms használatával?

« Előző | Lap eleje

2	Virtuális pálya szerkesztése

A vonalkövetési feladat virtuális leképezéséhez ismét felhasználhatjuk a digitális vászon szolgáltatásait. Először szükségünk lenne egy zárt pályára, amit rajzolással vagy képszerkesztéssel tudunk kivitelezni. A demo program esetében a legkézenfekvőbb megoldás a rajzolás. Egy körpályát néhány JavaScript utasítással már megjeleníthetünk:

// ... Körpálya
context.beginPath();
context.lineWidth = this.ringRadius*0.18;
context.strokeStyle = this.pathColor;
context.fillStyle = this.borderColor;
context.arc(ctxWidth/2, ctxHeight/2, this.ringRadius, 0, 2 * Math.PI, false);
context.fill();
context.stroke();
context.closePath();

Ha kanyargósabb útvonalon szeretnénk kipróbálni a virtuális robotunk tűrőképességét, akkor újabb körívek beillesztésével nehezíthetjük a pályát.

// ... Szerpentin
context.beginPath();
context.lineWidth = this.ringRadius*0.18;
context.strokeStyle = this.pathColor;
context.fillStyle = this.borderColor;
context.arc(ctxWidth*0.7, ctxHeight/2, this.ringRadius/2, 0, Math.PI/2, false);
context.arc(ctxWidth*0.7, ctxHeight*0.8, this.ringRadius/4, 1.5*Math.PI, Math.PI, true);
context.arc(ctxWidth*0.5, ctxHeight*0.8, this.ringRadius/4, 0, Math.PI/2, false);
context.arc(ctxWidth*0.3, ctxHeight*0.7, this.ringRadius/2, Math.PI/2, Math.PI, false);
context.arc(ctxWidth*0.3, ctxHeight*0.5, this.ringRadius/2, Math.PI, 1.5*Math.PI, false);
context.arc(ctxWidth*0.33, ctxHeight*0.2, this.ringRadius/4, Math.PI/2, 0, true);
context.arc(ctxWidth*0.53, ctxHeight*0.2, this.ringRadius/4, Math.PI, 1.5*Math.PI, false);
context.arc(ctxWidth*0.7, ctxHeight*0.3, this.ringRadius/2, 1.5*Math.PI, 2*Math.PI, false);
context.lineTo(ctxWidth/2+this.ringRadius, ctxHeight/2);
context.fill();
context.stroke();
context.closePath();

A virtuális pálya képpontjaihoz rendelt színkódokat a robot a vonalkövetés folyamán pásztázni fogja, ezért a pályaadatokat egy tömbben letároljuk, és mivel a robot állandó pályán mozog ezért a pályaképet CSS háttérképpé alakítjuk. Így a továbbiakban annak frissítéséről nem kell gondoskodnunk.

// ... Pályakép adatok tárolása
var imgRingData = context.getImageData(0, 0, ctxWidth, ctxHeight);
this.dataRing = imgRingData.data;
// ... Élsimítás miatti korrekció pályaváltásnál
this.antiAliasing = 3; 
 
// ... Rajzból háttérkép (, így nem kell fríssíteni a pályaképet)
var dataURL = canvas.toDataURL();
document.getElementById("myCanvas").style.backgroundImage='url('+dataURL+')';
canvas.width = canvas.width;

A robot a demo programban sötét (pathColor:'#1F2839') pályán halad, és a haladási iránynak megfelelően a pálya belső világos (borderColor:'#E0E0E0') képpontjai alapján tájékozódik. Itt azonban előjön az élsimítási eljárás miatt módosult képpontok kezelésének problémája. Ezt az antiAliasing változóval hidaljuk át. Egyszerűen kihagyjuk az ott megadott számú pixelt a sötét-világos átmenet vizsgálatából, sőt a későbbiekben még arról is gondoskodunk, hogyha az átmeneti terület nagyobb lenne a beállított kezdőértéknél, akkor a robot módosíthassa azt.

« Előző | Lap eleje

3	2D robotábrázolás és animáció

A digitális pályán mozgó kétdimenziós robot ábrázolásához most egy smile szimbólumot használunk. Mivel szimmetrikus alakzat, ezért a pozicionálása és mozgatása a későbbiekben valamelyest egyszerűsödik.

// ... Robot rajzolása
draw: function(){
  // ... Előző pozíció törlése  
  context.beginPath();
  context.clearRect(this.left-2,this.top-2, 2*this.radius+4, 2*this.radius+4);
  context.closePath();
  //canvas.width=canvas.width;
	
  this.left=this.centerX-this.radius;
  this.top=this.centerY-this.radius;
	
  // ... arc	
  context.beginPath();
  context.arc(this.centerX,this.centerY,this.radius, 0, 2 * Math.PI, false);
  var grd = context.createRadialGradient(this.centerX,this.centerY,0,this.centerX,this.centerY,this.radius);
  grd.addColorStop(0,'yellow');
  grd.addColorStop(1,'orange');
  context.fillStyle = grd;
  context.fill();
  context.closePath();
   
  // ... szem
  context.beginPath();
  context.arc(this.centerX-this.radius/3,this.centerY-this.radius/4,this.radius*0.25, 0, 2 * Math.PI, false);
  context.fillStyle = '#1F2839';
  context.fill();
  context.closePath();
   
  context.beginPath();
  context.arc(this.centerX+this.radius/3,this.centerY-this.radius/4,this.radius*0.25, 0, 2 * Math.PI, false);
  context.fillStyle = '#1F2839';
  context.fill();
  context.closePath();
   
  // ... száj   
  context.beginPath();
  context.arc(this.centerX,this.centerY,this.radius*0.66, 0.5, Math.PI-0.5, false);
  context.strokeStyle = '#1F2839';
  context.lineWidth=3;
  context.stroke();
  context.closePath();
   
  // ... Állapotkijelzés
  document.getElementById("robx").value = this.centerX;
  document.getElementById("roby").value = this.centerY;
  document.getElementById("robv").value = Math.round(this.pxStep*1000/this.myTimerRepeat);
},

A legizgalmasabb kérdések a robot mozgatásával kapcsolatban jelentkeznek. Meg kell oldanunk a robot színkód érzékelését, ami nem is olyan bonyolult feladat. A robot a középpontjához viszonyított négy irányból mintát vesz a pályaadatokból, amiből kiszámítja a következő pályapozícióját, majd átrajzolja magát az új helyére. Mivel íves és nem sarkos pályán mozog, ezért most elegendő a négy irány vizsgálata. A színérzékelés közben az élsimítás miatti átmenetek színváltozására feltétlenül ügyelnünk kell. A demo pályánkon ez nagyítástól függően 3-4 pixel széles határsávot jelent.

// ... Robot vonalkövetés
move: function(){
  var turnLeft = document.getElementById("turn").value=='left';
  // ... Kör jobb ívén mozog a robot
  if (ring.getColorCode(this.centerX-ring.antiAliasing,this.centerY)==ring.borderColor){
     this.centerX-=ring.antiAliasing;
     if (turnLeft){this.centerY-=this.pxStep;} else {this.centerY+=this.pxStep;}
     while (ring.getColorCode(this.centerX,this.centerY)!=ring.pathColor) {
       this.centerX++;
     }
  }
  // ... Kör felső ívén mozog a robot
  else if (ring.getColorCode(this.centerX,this.centerY+ring.antiAliasing)==ring.borderColor){
     if (turnLeft){this.centerX-=this.pxStep;} else {this.centerX+=this.pxStep;}
     this.centerY+=ring.antiAliasing;
     while (ring.getColorCode(this.centerX,this.centerY)!=ring.pathColor) {
       this.centerY--;
     }
  }
  // ... Kör bal ívén mozog a robot
  else if (ring.getColorCode(this.centerX+ring.antiAliasing,this.centerY)==ring.borderColor){
     this.centerX+=ring.antiAliasing;
     if (turnLeft){this.centerY+=this.pxStep;} else {this.centerY-=this.pxStep;}
     while (ring.getColorCode(this.centerX,this.centerY)!=ring.pathColor) {
	   this.centerX--;
     }		  
  }
  // ... Kör alsó ívén mozog a robot
  else if (ring.getColorCode(this.centerX,this.centerY-ring.antiAliasing)==ring.borderColor){
     if (turnLeft){this.centerX+=this.pxStep;} else {this.centerX-=this.pxStep;}
     this.centerY-=ring.antiAliasing;
     while (ring.getColorCode(this.centerX,this.centerY)!=ring.pathColor) {
	   this.centerY++;
     }	
  }
  else {
     // ... Élsimítás kihagyásához pixelszám növelés
     ring.antiAliasing<16?ring.antiAliasing++:16;
  }   
  this.draw();  // Robot új pozícióra rajzolása
},

« Előző | Lap eleje

4	Szimuláció indítása és vezérlése

Az elkészült pálya és robot objektumokat most már csak el kell helyeznünk a vásznon, és a működést vezérlő HTML űrlapról elindíthatjuk a szimulációt. Menet közben a pálya, a körbejárás iránya és a robot sebessége változtatható.

<!DOCTYPE html>
<html lang="hu">
<head>
 <title>Vonalkövető robot szimuláció</title>
 <meta charset="UTF-8">
 <meta name="author" content="fj">
 <style>
    .robotStatus {background:#E0E0E0;text-align:right;width:2.1em;border:0px;}
 </style>
</head>

<body>
<h1>Vonalkövető robot szimuláció</h1>
<form>
 <table style="margin-top:3px;padding:3px;background:#E0E0E0;border: 1px solid silver;">
  <tr>
   <td>
    Pálya:<select name="ringType" id="ringType" onchange="gameSetup()">
      <option id="circle" value="circle">Kör</option>
      <option id="serpentine" value="serpentine">Szerpentin</option>
    </select>
   </td>
   <td style="text-align:right;" colspan="2">
    Robotpozíció:
	[<input class="robotStatus" type="text" id="robx" value="" readonly>,<input class="robotStatus" type="text" id="roby" value="" readonly>]

   </td>
  </tr>
  <tr><td style="text-align:center;" colspan="3">
	 <!-- A vászon kijelölése, méretezése -->
     <canvas id="myCanvas" width="400" height="400" style="border: 1px solid silver;">
     Your browser does not support the HTML5 canvas tag.</canvas>	
  </td></tr>
  <tr>
   <td>
    Mozgás:<select name="turn" id="turn">
      <option id="turnLeft" value="left">Balra</option>
      <option id="turnRight" value="right">Jobbra</option>
    </select>
   </td>
   <td style="text-align:center;">
    T:<input type="number" id="robSpeed" style="text-align:right;width:2.5em;" min="1" max="32" value="16" oninput="robot.speed()" /> ms
	[<input class="robotStatus" type="text" id="robv" value="" readonly>px/s]
   </td>
   <td style="text-align:right;">
	<input type="button" id="btnStart" value="Start" autofocus onclick="robot.startMove()" />
	<input type="button" id="btnStop" value="Stop" disabled onclick="robot.stopMove()" />
   </td>
  </tr>
  <tr><td colspan="3">
	 <p style="width:396px;padding:3px;border: 1px solid silver;"><strong>Line Follower Robot Simulation</strong>: A zárt pályán mozgó robot a sötét (pathColor:'#1F2839') képpontokon haladva figyeli a pálya által bezárt terület szélén elhelyezkedő világos (borderColor:'#E0E0E0') pixeleket, amelyekhez viszonyítva számolja ki a következő pozícióját.</p>
  </td></tr>  
 </table>
</form>
<script>
// === Globális változók deklarálása
var canvas=document.getElementById("myCanvas");
var context=canvas.getContext("2d");
var ctxWidth=context.canvas.width;
var ctxHeight=context.canvas.height;
 
// === PÁLYA objektum létrehozása
var ring = {
 // ... Versenypálya és a belső szegély színe a pozicionáláshoz!!!
 pathColor : '#1F2839',
 borderColor : '#E0E0E0',
 logoColor : '#B0B0B0',
 antiAliasing : 3,         // Élsimítás pixelmérete
 // ... Pálya sugara a vászon 80%-a legyen
 ringRate : 0.8,
 ringRadius : 100,
 // ... Képadatok
 dataRing : [],
 
 // ... Pálya rajzolása 
 draw: function(){
   canvas.width=canvas.width;  // Vászon törlése
   if (ctxWidth<ctxHeight) {this.ringRadius=ctxWidth/2*this.ringRate;} else {this.ringRadius=ctxHeight/2*this.ringRate;}

   if (document.getElementById("ringType").value=='circle'){
     // ... Körpálya
     context.beginPath();
     context.lineWidth = this.ringRadius*0.18;
     context.strokeStyle = this.pathColor;
     context.fillStyle = this.borderColor;
	 context.arc(ctxWidth/2, ctxHeight/2, this.ringRadius, 0, 2 * Math.PI, false);
     context.fill();
     context.stroke();
   }
   else {
     // ... Szerpentin
     context.beginPath();
     context.lineWidth = this.ringRadius*0.18;
     context.strokeStyle = this.pathColor;
     context.fillStyle = this.borderColor;
     context.arc(ctxWidth*0.7, ctxHeight/2, this.ringRadius/2, 0, Math.PI/2, false);
     context.arc(ctxWidth*0.7, ctxHeight*0.8, this.ringRadius/4, 1.5*Math.PI, Math.PI, true);
     context.arc(ctxWidth*0.5, ctxHeight*0.8, this.ringRadius/4, 0, Math.PI/2, false);
     context.arc(ctxWidth*0.3, ctxHeight*0.7, this.ringRadius/2, Math.PI/2, Math.PI, false);
     context.arc(ctxWidth*0.3, ctxHeight*0.5, this.ringRadius/2, Math.PI, 1.5*Math.PI, false);
     context.arc(ctxWidth*0.33, ctxHeight*0.2, this.ringRadius/4, Math.PI/2, 0, true);
     context.arc(ctxWidth*0.53, ctxHeight*0.2, this.ringRadius/4, Math.PI, 1.5*Math.PI, false);
     context.arc(ctxWidth*0.7, ctxHeight*0.3, this.ringRadius/2, 1.5*Math.PI, 2*Math.PI, false);
     context.lineTo(ctxWidth/2+this.ringRadius, ctxHeight/2);
     context.fill();
     context.stroke();
   }
 
   // ... B3 logó
   context.fillStyle = this.logoColor;
   context.font=Math.floor(this.ringRadius)+'px Verdana';
   context.fillText('B',ctxWidth*0.32,ctxHeight*0.7);
   context.font=Math.floor(this.ringRadius*0.6)+'px Verdana';
   context.fillText('3',ctxWidth*0.56,ctxHeight*0.48);
   context.closePath();
 
   // ... Pályakép adatok tárolása
   var imgRingData = context.getImageData(0, 0, ctxWidth, ctxHeight);
   this.dataRing = imgRingData.data;
   // ... Élsimítás miatti korrekció pályaváltásnál
   this.antiAliasing = 3; 
 
   // ... Rajzból háttérkép (, így nem kell fríssíteni a pályaképet)
   var dataURL = canvas.toDataURL();
   document.getElementById("myCanvas").style.backgroundImage='url('+dataURL+')';
   canvas.width = canvas.width;
 },
 // ... Pályakoordináta színkódjának kiolvasása
 getColorCode: function(x,y) {
   var i=ctxWidth*y*4+x*4;
   // ... RGB színkód
   var colorCode=this.dataRing[i+0] << 16 | this.dataRing[i+1] << 8 | this.dataRing[i+2];
   // ... colorCode to String
   colorCode='000000'+colorCode.toString(16);
   colorCode=colorCode.substr(colorCode.length-6,6);
   return '#'+colorCode.toUpperCase();
 },
} // === end of ring object
 
// === ROBOT objektum létrehozása ===
var robot = {
 // ... Robot sugara a rajzoláshoz
 radius : 48,
 // ... Robotpozícionálás objektumváltozói
 left:0,
 top:0,
 centerX:0,
 centerY:0,
 // ... Mozgásismétlés
 pxStep:2, // Elmozdulás pixelben
 myTimerRepeat:0, // Értéke formról módosítható
 myTimerVar:0,
 
 init: function() {
   // ... Robot koordinátái
   this.left=ctxWidth/2-this.radius;
   this.top=ctxHeight/2-this.radius;
   // ... Robot középpontja a pozicionáláshoz
   this.centerX=this.left+this.radius;
   this.centerY=this.top+this.radius;
   this.speed();
 },
 
 // ... Robot sebességváltás kezelése
 speed: function(){
   this.myTimerRepeat = Number(document.getElementById("robSpeed").value);
   if(document.getElementById("btnStart").disabled){
    this.stopMove();
	this.startMove();
   }
   else {
    this.draw(); // Állapot kiíráshoz
   }
 },

 // ... Robot rajzolása
 draw: function(){
   // ... Előző pozíció törlése  
   context.beginPath();
   context.clearRect(this.left-2,this.top-2, 2*this.radius+4, 2*this.radius+4);
   context.closePath();
   //canvas.width=canvas.width;
	
   this.left=this.centerX-this.radius;
   this.top=this.centerY-this.radius;
	
   // ... Arc	
   context.beginPath();
   context.arc(this.centerX,this.centerY,this.radius, 0, 2 * Math.PI, false);
   var grd = context.createRadialGradient(this.centerX,this.centerY,0,this.centerX,this.centerY,this.radius);
   grd.addColorStop(0,'yellow');
   grd.addColorStop(1,'orange');
   context.fillStyle = grd;
   context.fill();
   context.closePath();
   
   // ... Szem
   context.beginPath();
   context.arc(this.centerX-this.radius/3,this.centerY-this.radius/4,this.radius*0.25, 0, 2 * Math.PI, false);
   context.fillStyle = '#1F2839';
   context.fill();
   context.closePath();
   
   context.beginPath();
   context.arc(this.centerX+this.radius/3,this.centerY-this.radius/4,this.radius*0.25, 0, 2 * Math.PI, false);
   context.fillStyle = '#1F2839';
   context.fill();
   context.closePath();
   
   // ... Száj   
   context.beginPath();
   context.arc(this.centerX,this.centerY,this.radius*0.66, 0.5, Math.PI-0.5, false);
   context.strokeStyle = '#1F2839';
   context.lineWidth=3;
   context.stroke();
   context.closePath();
   
   // ... Állapotkijelzés
   document.getElementById("robx").value = this.centerX;
   document.getElementById("roby").value = this.centerY;
   document.getElementById("robv").value = Math.round(this.pxStep*1000/this.myTimerRepeat);
 }, 
  
 // ... Pályakeresés, robot pályára állítása
 findRing: function(){
   while (ring.getColorCode(this.centerX,this.centerY)!=ring.pathColor) {
	 this.centerX++;
	 this.centerY++;
	 if (ctxWidth*this.centerY*4+this.centerX*4>ctxWidth*ctxHeight*4) {break;}
   }
   this.draw();
 },

 // ... Robot vonalkövetés
 move: function(){
   var turnLeft = document.getElementById("turn").value=='left';
   // ... Kör jobb ívén mozog a robot
   if (ring.getColorCode(this.centerX-ring.antiAliasing,this.centerY)==ring.borderColor){
      this.centerX-=ring.antiAliasing;
      if (turnLeft){this.centerY-=this.pxStep;} else {this.centerY+=this.pxStep;}
      while (ring.getColorCode(this.centerX,this.centerY)!=ring.pathColor) {
        this.centerX++;
      }
   }
   // ... Kör felső ívén mozog a robot
   else if (ring.getColorCode(this.centerX,this.centerY+ring.antiAliasing)==ring.borderColor){
      if (turnLeft){this.centerX-=this.pxStep;} else {this.centerX+=this.pxStep;}
      this.centerY+=ring.antiAliasing;
      while (ring.getColorCode(this.centerX,this.centerY)!=ring.pathColor) {
        this.centerY--;
      }
   }
   // ... Kör bal ívén mozog a robot
   else if (ring.getColorCode(this.centerX+ring.antiAliasing,this.centerY)==ring.borderColor){
	  this.centerX+=ring.antiAliasing;
      if (turnLeft){this.centerY+=this.pxStep;} else {this.centerY-=this.pxStep;}
	  while (ring.getColorCode(this.centerX,this.centerY)!=ring.pathColor) {
	    this.centerX--;
      }		  
   }
   // ... Kör alsó ívén mozog a robot
   else if (ring.getColorCode(this.centerX,this.centerY-ring.antiAliasing)==ring.borderColor){
      if (turnLeft){this.centerX+=this.pxStep;} else {this.centerX-=this.pxStep;}
	  this.centerY-=ring.antiAliasing;
	  while (ring.getColorCode(this.centerX,this.centerY)!=ring.pathColor) {
	    this.centerY++;
      }	
   }
   else {
      // ... Élsimítás kihagyásához pixelszám növelés
      ring.antiAliasing<16?ring.antiAliasing++:16;
   }   
   this.draw();  // Robot új pozícióra rajzolása
 },
 
 // ... Mozgás start
 startMove: function() {
   if(document.getElementById("btnStop").disabled) {
     this.myTimerVar=setInterval(function(){robot.move()},this.myTimerRepeat);
     document.getElementById("btnStart").disabled = true;
     document.getElementById("btnStop").disabled = false;
   }
 },
 
 // ... Mozgás stop
 stopMove: function() {
   if(document.getElementById("btnStart").disabled) {
     if (typeof this.myTimerVar != 'undefined') {clearInterval(this.myTimerVar)};
     document.getElementById("btnStart").disabled = false;
     document.getElementById("btnStop").disabled = true;
   }
 },
} // === end of robot object
 
// === Pálya előkészítése és a robot pályára állítása
function gameSetup() {
  ring.draw();       // Pályarajzolás
  robot.init();      // Robot inicializálása
  robot.findRing();  // Robot pályára állítása
}
 
// === Start me up ===
                  
 gameSetup();

</script>
<noscript>
Az oldal teljes funkcionalitásának eléréséhez engedélyezni kell a JavaScriptet.
Itt találhatók <a href="http://www.enable-javascript.com/hu/" target="_blank">
az instrukciók, hogy hogyan engedélyezheti a JavaScriptet a böngészőjében</a>.
</noscript>
<!-- =========================
[1] LEGO MINDSTORMS NXT Free Project Instructions: http://www.nxtprograms.com/index.html
[2] Color Scheme Designer: http://paletton.com/#uid=53I0u0kgaaMenuWghlJjm4GnK2i
==============================-->
</body>
</html>

« Előző | Lap eleje

5	HTML album az elkészült kódoknak

A HTML canvas felhasználási lehetőségeit még közel sem merítettük ki, de már elég sok és változatos feladatot megoldottunk, ezért célszerű lenne az eddig elkészült anyagokat egy HTML albumban összegyűjteni, és a továbbiakban bemutatkozó portfólióként kezelni. Ehhez kínálkozik egy könnyen adaptálható megoldási lehetőség, amit a w3schools.com oktatóanyagai között találtok meg: How to Build a Web Site?

A minta nagyon ügyesen használja ki a CSS és JavaScript lehetőségeit az élőfej, a menü és az élőláb kezelésénél.

/* team_site.css */

body {
    font-family: "Trebuchet MS", Verdana, sans-serif;
    font-size: 16px;
    background-color: dimgrey;
    color: #696969;
    padding: 3px;
}

#header {
    padding: 5px;
    padding-left:  15px;
    padding-right: 15px;
    border-radius: 5px;
	background-color:dimgrey;
}
#header h1{

    color: #ffffff;
	font-size: 50px;
	border: 0px;
}

#main {
    padding: 5px;
    padding-left:  15px;
    padding-right: 15px;
    background-color: #ffffff;
    border-radius: 0 0 5px 5px;
}

h1 {
    font-family: Georgia, serif;
    border-bottom: 3px solid #cc9900;
    color: #996600;
    font-size: 30px;
}

ul#menu {
    padding: 0;
    margin-bottom: 11px;
}

ul#menu li {
    display: inline;
    margin-right: 3px;
}

ul#menu li a {
    background-color: #ffffff;
    padding: 10px 20px;
    text-decoration: none;
    color: #696969;
    border-radius: 4px 4px 0 0;
}

ul#menu li a:hover {
    color: white;
    background-color: #D0D0D0;
}

table {
    width:100%;
}

table, th , td {
    border: 1px solid grey;
    border-collapse: collapse;
    padding: 5px;
}

th {
    text-align: left;
}

table tr:nth-child(odd) {
    background-color: #f1f1f1;
}
table tr:nth-child(even) {
    background-color: #ffffff;
}

A team_script.js állomány tartalmazza azokat az adatokat, amelyeket minden HTML oldalon meg akarunk jeleníteni. Így egy helyen kezelhetjük a lapok közös információit.

/* team_script.js */

// === Élőfej logóval
document.getElementById("header").innerHTML =
"<canvas id=\"myCanvas\" style=\"float: left;\" width='100' height='100'>Your browser does not support the HTML5 canvas tag.</canvas>"+
"<h1 id='myComp'> Bitfaragók</h1></td>";

var canvas=document.getElementById("myCanvas");
var context=canvas.getContext("2d"); 
var centerX=50; 
var centerY=50;
var radius=40; 
   // ... Arc	
   context.beginPath();
   context.arc(centerX,centerY,radius, 0, 2 * Math.PI, false);
   var grd = context.createRadialGradient(centerX,centerY,0,centerX,centerY,radius);
   grd.addColorStop(0,'yellow');
   grd.addColorStop(1,'orange');
   context.fillStyle = grd;
   context.fill();
   context.closePath();
   
   // ... Szem
   context.beginPath();
   context.arc(centerX-radius/3,centerY-radius/4,radius*0.25, 0, 2 * Math.PI, false);
   context.fillStyle = '#1F2839';
   context.fill();
   context.closePath();
   
   context.beginPath();
   context.arc(centerX+radius/3,centerY-radius/4,radius*0.25, 0, 2 * Math.PI, false);
   context.fillStyle = '#1F2839';
   context.fill();
   context.closePath();
   
   // ... Száj   
   context.beginPath();
   context.arc(centerX,centerY,radius*0.66, 0.5, Math.PI-0.5, false);
   context.strokeStyle = '#1F2839';
   context.lineWidth=3;
   context.stroke();
   context.closePath();

// === Menüsor
document.getElementById("nav01").innerHTML =
"<ul id='menu'>" +
"<li><a href='team_index.html'>Kezdőlap</a></li>" +
"<li><a href='team_site01.html'>Mandelbrot</a></li>" +
"<li><a href='team_about.html'>Kapcsolat</a></li>" +
"</ul>"; 

// === Élőláb
document.getElementById("foot01").innerHTML =
"<p>©  " + new Date().getFullYear() + " Bakonyi Bitfaragó Bajnokság</p>";

A HTML oldalakon csupán annyi a dolgunk, hogy a team_site.css és team_script.js állományok betöltéséről gondoskodjunk, illetve az ott hivatkozott szemantikai elemeket a dokumentumban azonosíthatóvá tegyük. A kezdőlapon (team_index.html) célszerű egy rövid bemutatkozó animációt elhelyezni, ami felkelti az érdeklődést a csapat tevékenysége iránt.

A többi oldalon a csapat legjobbnak tartott JavaScript kódjai jelenhetnek meg.(Például: team_site01.html)

<!DOCTYPE html>
<html>

<head>
  <title>Mandelbrot fraktál</title>
  <link href="team_site.css" rel="stylesheet">
  <meta charset="UTF-8">
</head>

<body>
<div id="header"></div>

<nav id="nav01"></nav>

<div id="main">
<h1>Mandelbrot fraktál</h1>

<!-- A vászon kijelölése, méretezése -->
<canvas id="myCanvas" width="500" height="500" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>

<script>
 // === Mandelbrot objektum létrehozása
 var mandelbrot = {
  // === Osztályváltozók
  maxiter : 32, // iterációk száma
  xmin : -2.0, xmax : 1.0, // valós rész 
  ymin : -1.5, ymax : 1.5, // képzetes rész
 
  // === Komplex szám eleme-e a Mandelbrot halmaznak?
  mandelcolor: function (a,b){
   // a: valós rész, b: képzetes rész
   var z=[a,b];
   var i=0;
   // A következő sorozatelem kiszámítása
   while(i<this.maxiter && z[0]*z[0]+z[1]*z[1]<=4.0 ){
    // Új elem = Z négyzete + kiinduló érték
    var aa=z[0]*z[0]-z[1]*z[1]+a;
    var bb=2*z[0]*z[1]+b;
    z[0]=aa; z[1]=bb;
    i++;
   }
   // Visszatérési érték a pixel színkódja
   return '#'+i.toString(16)+i.toString(16)+i.toString(16);
  },

  // === Mandelbrot fraktál rajzolása soronként
  fraktal: function(){
   for(var y=0;y<context.canvas.height;y++){
    // A vizsgált komplex szám képzetes részének
    // leképezése az Y koordináta alapján 
    var zy = this.ymin + (this.ymax - this.ymin) * y / context.canvas.height;
  
    for(var x=0;x<context.canvas.width;x++){
     // A vizsgált komplex szám valós részének leképezése
     // az X koordináta alapján
     var zx = this.xmin + (this.xmax - this.xmin) * x / context.canvas.width;
     context.fillStyle=this.mandelcolor(zx,zy); 
     context.fillRect(x,y,1,1);
    }
   }
  }
 }
 
 // === Globális változók deklarálása
 var canvas=document.getElementById('myCanvas');
 var context=canvas.getContext('2d');
 
 mandelbrot.fraktal();
 
</script> 

  <footer id="foot01"></footer>
</div>

<script src="team_script.js"></script>

</body>
</html>

A magunkról oldalon (team_about.html) pedig a szokásos, a csapat tevékenységével kapcsolatos fontosabb tények szerepelhetnek.

« Előző | Lap eleje

6	Oldd meg a feladatokat!

A képpontok szimulációs felhasználása újabb izgalmas feladatokat kínál, melyek megoldásával ismét értékes pontokat gyűjthettek a verseny következő fordulójához. A könnyebb kezelhetőség érdekében a megoldást a feladatok előtti kék azonosítóval megegyező nevű könyvtárban dolgozzátok ki. A beküldött HTML kód elején a csapat logója és neve, alatta a feladat azonosítója, és szövege jelenjen meg sötét háttérrel és világos betűkkel. Ezt követően már csak a megoldást kell ügyesen kódolnotok. Az elkészült megoldásokat gyűjtsétek össze a csapat nevével megegyező nevű könyvtárban, majd tömörítve töltsétek fel a honlapra!

Beküldhető feladatok 2014:

B3-2014-EGY09 Tervezzétek meg a Föld Napkörüli mozgását bemutató szimulációt úgy, hogy közben a Hold a Föld köröl keringjen.
0100 0000|₂ pont
B3-2014-EGY10 Készítsetek HTML albumot az Erőgyűjtés során szerkesztett kódjaitok bemutatására. A bevezető oldalon helyezzétek el a csapat bemutatkozó animációját, majd a többi oldalra fűzzétek fel a legjobb munkáitokat. A weboldalak közötti váltáshoz használjatok CSS-el formázott felsorolást.
1000 0000|₂ pont

« Előző | Lap eleje

7. Vonalkövetés

Vonalkövető robot szimuláció

Kedves Bitfaragó jelöltek!

Robotépítés és programozás

Virtuális pálya szerkesztése

2D robotábrázolás és animáció

Szimuláció indítása és vezérlése

HTML album az elkészült kódoknak

Oldd meg a feladatokat!

Beküldhető feladatok 2014:

Hivatkozások, felhasznált források