JavaScript - HTML5 canvas

5. Vászonra fel!

„Az európai festészet történetében a XVI. század óta a festmények tipikus hordozóanyaga a vászon, a festék pedig az olaj. Az olajfestés a temperával szemben egészen új művészi eszközök kibontakoztatását tette lehetővé. A temperával ellentétben ugyanis az olajfestésnél szabadon lehet egymásra több réteget felvinni, ezzel egyrészt az elrontott, vagy más okból megváltoztatandó részletet teljesen újra lehet festeni, másrészt egymás felett, enyhén áttetsző rétegeket is fel lehet vinni.”[1]

Négy évszázaddal később, a XX. század kibernetikai találmányai aztán megnyitották az utat egy eddig ismeretlen digitális világ felé, amelyben az új generáció tagjai már digitális vásznon valósítják meg az elképzeléseiket. Az elkészült alkotásokat pedig közösségi hálón osztják meg egymással, ezzel is gazdagítva bolygónk kollektív emlékezetét. A számítógépes grafika [2] eszközei beköltöztek a mindennapjainkba. A 2D és 3D ábrázolásnak talán már csak az emberi képzelőerő szab határt.

A digitális képi megjelenítés alapvetően kétféle megközelítésben értelmezhető. „A vektorgrafika a számítógépes grafikában az az eljárás, melynek során geometriai primitíveket (rajzelemeket), mint például pontokat, egyeneseket, görbéket és sokszögeket használunk képek leírására. Ennek az ellentéte a rasztergrafika, ahol képek leírására szabályos elrendezésű pontokat használunk.” [3] Az alábbiakban ismerkedjünk meg a digitális vászon használatával, és bemelegítésként gyártsunk le egy analóg kijelzővel működő virtuális időmérőt.

Analóg kijelzős óra

Bemenet: A számítógép órájának időadatai.

Kimenet: Az időadatok alapján kiszámított és grafikusan ábrázolt értékek a vásznon.

Változók: A canvas, context változók a vászonműveletekhez, valamint a myClock objektum változói a számítógép idejének lekéréséhez, illetve a számlap és a mutatók megjelenítéséhez.

Algoritmus: Megrajzoljuk az analóg számlapot, majd az aktuális rendszeridő alapján kiszámítjuk az óra mutatóinak kezdő- és végpontjait, és az így kapott koordinátákat összekötve jelenítjük meg a számlap mutatóit.

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

Megjegyzés: A JavaScript kód a saját rendszeridőt jeleníti meg. Ezért állítsátok be a pontos időt a számítógépeteken.

Kedves Bitfaragó jelöltek!

Ebben a leckében találtok jó néhány ötletet és megoldási mintát, amelyek felhasználásával bátran írhattok látványos animációkat, vagy modellezhettek matematikai, fizikai, kémiai, sőt akár biológiai jelenségeket. A digitális vászon rajzolásához csupán néhány JavaScript utasítást kell megismernetek, és a feladatban meghatározott algoritmus megoldásához szükséges vezérlőszerkezetekben felhasználnotok. Ha szeretnétek a leggyakoribb JavaScript utasításokat átismételni, akkor olvassátok el a 2013-as Bakonyi Bitfaragó Bajnokság felkészítő anyagait.

1	HTML5 dokumentum és a canvas

A HTML5 dokumentumokban a <canvas> elemmel jelölhetünk ki pixelterületet, melyet aztán script utasításokkal programozhatunk. A <canvas> elem önmagában nem képes rajzolásra, csupán a grafikához használt konténer. A getContext() metódus tér vissza egy olyan objektummal, amely a vásznon történő rajzoláshoz ad metódusokat és tulajdonságokat.

Az alábbi mintaprogramban a var canvas=document.getElementById('myCanvas'); és a var context=canvas.getContext('2d'); utasításokkal hozzuk létre a továbbiakban context néven azonosított grafikai objektumunkat, melynek segítségével egy Halloween maszkot készítünk el. Figyeljétek meg a forráskódban a kör, vonal, háromszög, négyszög alakzatok rajzolásához és kitöltéséhez használt utasításokat!

<!DOCTYPE html>
<html lang="hu">
<head>
 <title>Halloween maszk</title>
 <meta charset="UTF-8">
 <meta name="author" content="fj">
</head>

<body>
<h1>Halloween maszk</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>
 // === Globális változók deklarálása
 var canvas=document.getElementById('myCanvas');
 var context=canvas.getContext('2d');

 // === Halloween objektum létrehozása
 var halloween = {
	init: function () {
	    // Lokális változók deklarálása
        var x = context.canvas.width;  // Canvas szélesség
        var y = context.canvas.height; // Canvas magasság
        var r = 0.8;                   // Haloween maszk sugara
        if (x<y) {r=x/2*r;} else {r=y/2*r;}
		
		// Kör: maszk
	    context.beginPath();
		context.strokeStyle = 'brown';
		context.arc(x/2, y/2, r, 0, 2 * Math.PI, false);
		// Színátmenetes kitöltés
		var grd = context.createRadialGradient(x/2,y/2,r,0,0,r*0.05);
        grd.addColorStop(0,"orange");
        grd.addColorStop(1,"yellow");
		context.fillStyle = grd;
		context.fill()
		context.stroke();
		
		// Háromszög: orr
        var poly=[ x/2-r*0.25, y/2+r*0.3, x/2, y/2-r*0.2, x/2+r*0.25, y/2+r*0.3 ];		
        context.beginPath();
        context.moveTo(poly[0], poly[1]);
        for( item=2 ; item < poly.length-1 ; item+=2 ){
		  context.lineTo( poly[item] , poly[item+1] )
		}
        context.closePath();
        context.fillStyle = 'brown';
        context.fill();
		
        // Téglalap: jobb szem
	    context.beginPath();
        context.strokeStyle = 'green';
		context.fillStyle = 'green';		
		context.rect(x/2-r*0.65,y/2-r*0.5,r*0.4,r*0.4);
		context.fill()
		
		// Téglalap: bal szem
        context.rect(x/2+r*0.25,y/2-r*0.5,r*0.4,r*0.4);
		context.fill()
		
		// Téglalap: száj
        context.rect(x/2-r*0.4,y/2+r*0.5,r*0.8,r*0.1);
		context.fill()
		context.stroke();
	}
 }
 
 halloween.init();

</script> 
</body>
</html>

Ugye, most már biztosan nem okozna gondot egy smile ikon kódolása sem, sőt akár a csapatlogót is el tudnátok készíteni a fenti mintaprogram alapján.

« Előző | Lap eleje

2	Analóg kijelzős óra

A számítógép idejét a megszokott hh:mm:ss formátumban már néhány soros script kóddal meg tudjuk jeleníteni. Ha azonban a klasszikus számlapos kijelzőt szeretnénk használni, akkor a <canvas> elemmel ki kell jelölnünk egy pixelterületet, amire a saját fejlesztésű myClock() objektum függvényeivel rajzoljuk fel az órát. Az JavaScript arc() metódusa a körívek rajzolását támogatja, a moveTo() és lineTo() metódusok pedig az óramutatók kiszámított végpontjai közé húznak vonalat.

<!DOCTYPE html>
<html lang="hu">
<head>
 <title>Analóg kijelzős óra</title>
 <meta charset="UTF-8">
 <meta name="author" content="fj">
 <script>
 // === Digitális óra bekapcsolása
 var myVar=setInterval(function(){myClock.timer()},1000);
   
 // === Analóg kijelzős óra objektum
 var myClock = {
     // === Aktuális gépidő lekérése
     timer: function(){
         var d=new Date();
         var t=d.toLocaleTimeString();
         document.getElementById("time").innerHTML=t;
	 
         // Óramutatók értékeinek beállítása
         myClock.hands(d.getHours(),d.getMinutes(),d.getSeconds());
     },

     // === Analóg számlap inicializálása
     init: function (){
         /* 
		    Globális változók kezdőértékének beállítása
			
			Megj: Az átekinthetőség kedvéért maradtak meg globális változónak,
                  ha ugyanis osztályváltozóként akarnánk használni őket, 
				  akkor egyfelől a függvényen kívül kellene deklarálni őket (pld.: x:0,y:0,),
				  másfelől mindig ki kellene írni a this. kulcsszót a változónevek előtt.
		 */
         x = context.canvas.width;    // Canvas szélesség
         y = context.canvas.height;   // Canvas magasság
         r = 0.6;                     // Óra számlapjának sugara
         if (x<y) {r=x/2*r;} else {r=y/2*r;}
         clw = r*0.2;                 // Óra körívének vastagsága
		 
         // Számlap negyedóráinak felrajzolása
         var colors = ['orange','blue','red','green'];
         for(i=0;i<4;i++){
             context.beginPath();		 
             context.arc(x/2,y/2,r,i*0.5*Math.PI,(i+1)*0.5*Math.PI);
             context.lineWidth = clw;
             context.strokeStyle = colors[i];
             context.stroke();
         }
		 
         // === Számlap számainak kiírása
         context.beginPath();
         var fontsize=clw*1.25;  // Betüméret arányosítása
         context.font = 'normal '+fontsize+'pt Calibri';
         context.fillStyle = 'gray';
         context.fillText('12', x*0.5-fontsize*2/3, y*0.5-r-clw);
         context.fillText( '3', x*0.5+r+clw, y*0.5+fontsize/2);
         context.fillText( '6', x*0.5-fontsize/3, y*0.5+r+clw+fontsize);
         context.fillText( '9', x*0.5-r-clw-fontsize*2/3, y*0.5+fontsize/2);
         context.stroke();
     },
     // === Óramutatók értékeinek beállítása
     hands: function(h,m,s) {
         // Korábbi mutatóállás törlése
         context.beginPath();
         context.strokeStyle = 'white'
         context.fillStyle = 'white';
         context.arc(x/2, y/2, r-clw, 0, 2 * Math.PI, false);
         context.fill();
         context.stroke();

         // Aktuális idő kijelzése, óramutatók rajzolása
         this.hand(m,6,'brown',1,60)
         this.hand(h%12,6,'orange',0.75,12)		 
         this.hand(s,2,'gray',1,60);

         // Mutatók feletti kis kör
         context.beginPath();
         context.strokeStyle = 'brown'
         context.fillStyle = 'brown';
         context.arc(x/2, y/2, r*0.1, 0, 2 * Math.PI, false);
         context.fill();
         context.stroke();
     },
     // === Mutató rajzolása
     hand: function(num,hWidth,color,hlong,scale) {
         // Num     Mutatóhoz rendelt érték
         // hWidth  Mutató szélessége pixelben
         // color   Mutató színe
         // hlong   Mutató hossza a sugár százalékában
         // scale   Számlap felosztása
         context.beginPath();
         context.lineWidth = hWidth;
         context.strokeStyle = color;
         alfa = num/scale*2*Math.PI-Math.PI/2;
         context.moveTo(x/2,y/2);
         context.lineTo(x/2+(r-clw)*hlong*Math.cos(alfa), y/2+(r-clw)*hlong*Math.sin(alfa));
         context.stroke();
     }
 }
</script>
</head>
<body>
<table style="width:500px;">
 <tr>
  <td><h1>Analóg kijelzős óra</h1></td>
  <td style="text-align:right;"><h1 id="time">Time</h1></td>
 </tr>
</table>

<!-- A vászon 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>
 // A clock objektum inicializálása
 var canvas=document.getElementById("myCanvas");
 var context=canvas.getContext("2d");
 
 myClock.init();

</script> 

<!-- ========================= Hivatkozások, felhasznált ötletek:
HTML5 canvas használata: http://www.w3schools.com/tags/ref_canvas.asp
HTML5 Canvas Shape Fill Tutorial: http://www.html5canvastutorials.com/tutorials/html5-canvas-shape-fill/
Flashclock: http://www.online-stopwatch.com/large-online-clock/
============================== -->
</body>
</html>

« Előző | Lap eleje

3	Fibonacci spirál

"A Fibonacci számsor egy rendkívül érdekes matematikai sorozat melynek tagjai egymásra épülnek. A számsor első két száma 1-es, és a következő szám mindig az aktuális és az előző szám összege. A sorozat különlegessége, hogy ahogy haladunk a magasabb számok felé az aktuális számot és a megelőző számot egymással elosztva megközelítőleg az aranymetszés számát kapjuk eredményül. Ezek a számok azért rendkívül fontosak, mivel az egész világon minden, a növények, az állatok, az emberi test az aranymetszés arányai szerint épülnek fel. Ha megméred a kézfejed és az alkarod, majd a két számot elosztod egymással akkor 1,6 körüli értéket kapsz, de ugyanez igaz a lábfejed és a lábszárad arányaira is." [Schilling Péter]

A Fibonacci spirál a Fibonacci-sorozatnak megfelelő oldalú, egymáshoz illeszkedő négyzetekbe írt negyed körökből áll.

<!DOCTYPE html>
<html lang="hu">
<head>
 <title>Fibonacci-spirál</title>
 <meta charset="UTF-8">
 <meta name="author" content="fj">
</head>
<body>
<table style="width:500px;">
 <tr>
  <td><h1>Fibonacci-spirál</h1></td>
  <td style="text-align:right;"><p>( Rajzoljunk <a href="https://www.debian.org/logos/" target="_blank">Debian logo</a>-t )</p></td>
 </tr>
</table>
<!-- A vászon deklarálása, 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>
var canvas=document.getElementById("myCanvas");
var context=canvas.getContext("2d");

// === Fibonacci-spirál rajzoló objektum
var spiral = {
     // === Rekurzív függvény a Fibonacci sorozat aktuális értékének meghatározásához
     fibo: function (n){
         if (n<=2) { return 1;}
         else {return (this.fibo(n-1)+this.fibo(n-2));}
     },

     // === Körívek rajzolása vászonra
     // x,y        kör középpontja
     // r          kör sugara
     // angle      aktuális körnegyed azonosítása ( értékei: 0, 5, 10, 15 )
     // numOfArc   körnegyedek száma
     // color      vonal színe

     rajzol: function (x,y,r,angle,numOfArc,color){
         for(i=1;i<numOfArc;i++){
             context.beginPath();		 
             context.arc(x,y,this.fibo(i)*r,angle/10*Math.PI,(angle/10+0.5)*Math.PI);

             // === Körív elforgatása 90 fokokkal
             if (angle>0) {angle-=5;} else {angle=15;}

             // === Következő körív középpontjának meghatározása
             if (i>1)
             {
                 radius=this.fibo(i-1)*r;
                 switch (angle) {
                     case 0:
                         y-=radius;
                         break;              
                     case 5:
                         x+=radius;
                         break;
                     case 10:
                         y+=radius;
                         break;
                     case 15:
                         x-=radius;
                         break;
                 }
             }
         context.lineWidth = 5;
         context.strokeStyle = color;
         context.stroke();
         }
     }
}

// A spirál objektum rajzol függvényének meghívása
spiral.rajzol(300,200,10,0,10,'gray');
// Debian Red
spiral.rajzol(300,200,10,5,10,'#D70A53');

</script> 
<!-- ========================= Hivatkozások, felhasznált ötletek:
HTML5 canvas használata: http://www.w3schools.com/tags/ref_canvas.asp
HTML5 Canvas Shape Fill Tutorial: http://www.html5canvastutorials.com/tutorials/html5-canvas-shape-fill/
============================== -->
</body>
</html>

« Előző | Lap eleje

4	Ábrázoljunk függvényeket!

A canvas pixeleit felhasználhatjuk függvények ábrázolására is. A vászon bal felső sarka az X=0,Y=0 pont, a jobb alsó sarkát pedig az X=context.canvas.width és az Y=context.canvas.height koordináták azonosítják. Itt annyi a feladatunk, hogy a független változó és a függvényérték megjelenítendő értéktartományát leképezzük a vásznon ábrázolható pixeltartományba.

Az alábbi mintaprogramban HTML FORM-on megadott paraméterek segítségével ábrázolunk két egyszerűbb függvényt. Figyeljétek meg a FORM-ban megadott értékeket feldolgozó JavaScript kód működését.

<!DOCTYPE html>
<html lang="hu">
<head>
 <title>Függvény-ábrázolás</title>
 <meta charset="UTF-8">
 <meta name="author" content="fj">
</head>

<body>
<h1>Függvény-ábrázolás</h1>

<!-- Űrlap külső adatok átvételéhez -->
 <form id="form1">
    <table>
	<tr style="background:lightgray;"><td>
	  f<sub>(x)</sub>= 
      <select name="fx" id="fx" onchange="fuggveny.init()">
        <option value="fx1" selected>ax+b</option>
        <option value="fx2">ax²+bx+c</option>
      </select>
	
	  a= <input type="number" name="a" id="a" min="-10" max="10" value="1" style="width:50px;text-align:right;" onchange="fuggveny.init()">
	  b= <input type="number" name="b" id="b" min="-10" max="10" value="0" style="width:50px;text-align:right;" onchange="fuggveny.init()">
	  c= <input type="number" name="c" id="c" min="-10" max="10" value="0" style="width:50px;text-align:right;" onchange="fuggveny.init()">
	</td></tr>
	
	<tr><td>
	  <!-- A vászon kijelölése, méretezése -->
      <canvas id="myCanvas" width="400" height="400" style="border:1px solid #d3d3d3;">
      Your browser does not support the HTML5 canvas tag.</canvas>
	</td></tr>
	
    <tr style="background:lightgray;"><td>
	  Értéktartomány: X= ±
      <select name="xscale" id="xscale" onchange="fuggveny.init()">
        <option value="5">5</option>
	    <option value="10" selected>10</option>
        <option value="20">20</option>
        <option value="30">30</option>
        <option value="40">40</option>
        <option value="50">50</option>
	  </select>
 
      Y= ±
      <select name="yscale" id="yscale" onchange="fuggveny.init()">
	    <option value="5">5</option>
	    <option value="10" selected>10</option>
        <option value="20">20</option>
        <option value="30">30</option>
        <option value="40">40</option>
        <option value="50">50</option>
      </select>
	
	  Rácsvonalak: <input type="checkbox" name="grid" id="grid" checked onchange="fuggveny.init()">
	</td></tr>
	</table>
  </form>
  
<script>
 // === Globális változók deklarálása
 var canvas=document.getElementById('myCanvas');
 var context=canvas.getContext('2d');
 
 var fuggveny = {
  // Objektumváltozók
  origo: [0,0],
  xmin : -10, xmax : 10, // X tengely értéktartománya, űrlapról módosítható
  ymin : -10, ymax : 10, // Y tengely értéktartománya, űrlapról módosítható

  init: function (){
    this.origo[0]=context.canvas.width/2;
	this.origo[1]=context.canvas.height/2;
	
	// X skála aktualizálása a listából
	this.xmin=-1*Number(this.getSelectedText('xscale'));
	this.xmax=Number(this.getSelectedText('xscale'));
	// Y skála aktualizálása a listából
	this.ymin=-1*Number(this.getSelectedText('yscale'));
	this.ymax=Number(this.getSelectedText('yscale'));
	
    // Koordináta tengelyek rajzolása
    this.tengely();
	
	// === Függvény rajzolása ===
	// Együtthatók beolvasása
	var a=Number(document.getElementById('a').value);
	var b=Number(document.getElementById('b').value);
	var c=Number(document.getElementById('c').value);

	var y=0;
	var selector=this.getSelectedText('fx')=='ax+b';
	// c konstanst nem használjuk az első fokú függvénynél
    if(selector){
	   document.getElementById("c").disabled = true;
    }
	else{
	   document.getElementById("c").disabled = false;
	}

	context.fillStyle='red';
    for (var x=this.xmin;x<this.xmax;x+=0.01){
	
	  // Függvényérték kiszámítása
	  if(selector){
   	    y=a*x+b;
	  }
	  else{
	    y=a*x*x+b*x+c;
	  }

	  // x,y értékek leképezése a vászonra
      var xx=this.origo[0]+x/(this.xmax-this.xmin)*context.canvas.width;
	  var yy=this.origo[1]-y/(this.ymax-this.ymin)*context.canvas.height;
	  // Pont rajzolása
	  context.fillRect(xx,yy,1,1);
    }
  },
  // Legördülő lista kiválasztott elemének azonosítása
  getSelectedText: function (elementId) {
    var elt = document.getElementById(elementId);
    if (elt.selectedIndex == -1){
        return elt.options[0].text;}
    // return elt.options[elt.selectedIndex].text;
	return elt.options[elt.selectedIndex].innerHTML;
  },
  // X, Y tengely rajzolása
  tengely: function(){
    context.clearRect(0,0,context.canvas.width,context.canvas.height);
    // Koordináta tengelyek rajzolása
    context.beginPath();
	context.lineWidth = 2;
    context.strokeStyle = 'black';
	context.moveTo(0,context.canvas.height/2);
    context.lineTo(context.canvas.width, context.canvas.height/2);
	context.moveTo(context.canvas.width/2,0);
    context.lineTo(context.canvas.width/2, context.canvas.height);
	context.stroke();
	
	if(document.getElementById('grid').checked){
	this.racs();
	};
  },
  // Rácsozás
  racs: function(){
    context.beginPath();
	context.lineWidth = 1;
    context.strokeStyle = 'lightgray';
	// Függőleges rácsvonalak
	for(var x=0;x<context.canvas.width;x+=context.canvas.width/(2*this.xmax)){
	  context.moveTo(x,0);
      context.lineTo(x, context.canvas.height);
	}
	// Vizszintes rácsvonalak
	for(var y=0;y<context.canvas.height;y+=context.canvas.height/(2*this.ymax)){
	  context.moveTo(0,y);
      context.lineTo(context.canvas.width,y);
	}
	context.stroke();
  }
 }
 
 // Start
 fuggveny.init();

</script> 

 <!-- =========================
 http://www.w3schools.com/html/html_forms.asp
 ==============================-->
</body>
</html>

« Előző | Lap eleje

5	Rajzoljunk Mandelbrot fraktált!

A Mandelbrot halmaz a komplex számsík egy ponthalmaza. Kiindulásként válasszunk ki egy pontot a komplex síkból, melynek megállapodás szerinti jelölése legyen z₀. Számítsuk ki a z_n=z_n-1²+z₀ összefüggéssel rendre a z_n sorozat elemeit mindaddig, amig az általunk beállított iterációk számát el nem érjük, vagy a z_n komplex szám abszolútértéke túl nem mutat a vásznon ábrázolható tartományon.

Minden számhoz tartozik egy szín. Azok a tartományok lesznek egyszínűek, amelyeknek ugyanannyi iteráció kell a határérték megközelítéséhez. A mintaprogramban a vizsgált intervallumhoz beállított érték 4. A halmaz közepén levő pontok esetén soha nem érjük el ezt az értéket, tehát azok feketén maradnak. A Mandelbrot halmaz ábrázolásához az előbbi műveleteket az ábrázolási tartomány minden pontján el kell végeznünk.

<!DOCTYPE html>
<html lang="hu">
<head>
 <title>Mandelbrot fraktál</title>
 <meta charset="UTF-8">
 <meta name="author" content="fj">
</head>

<body>
<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> 
<!-- ========================= Hivatkozások, felhasznált ötletek:
http://hu.m.wikipedia.org/wiki/Mandelbrot-halmaz
http://hu.m.wikipedia.org/wiki/Frakt%C3%A1l
http://mandelbrot-set.com/#zoom=6.482490272373541,3.4&lookAt=-0.6,0&iterations=85&superSamples=1&escapeRadius=10.0&colorScheme=pickColorHSV1
http://www.atopon.org/mandel/
http://instantsolve.net/mandelbrot.htm
http://www.codeproject.com/Articles/285707/Generating-Mandelbrot-fractals-using-HTML
http://code.activestate.com/recipes/577277-mandelbrot-fractal-using-html5-canvas/

HTML5 canvas használata: http://www.w3schools.com/tags/ref_canvas.asp
HTML5 Canvas Shape Fill Tutorial: http://www.html5canvastutorials.com/tutorials/html5-canvas-shape-fill/
============================== -->
</body>
</html>

« Előző | Lap eleje

6	Oldd meg a feladatokat!

A pixelek vásznán tett kalandozásunk folyatatásaként lenne még néhány izgalmas feladat, melynek megoldásával é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-EGY01 Rajzoljátok meg a csapatlogótokat JavaScript kódban egyszerű alakzatok felhasználásával! Az elkészült logót a továbbiakban minden beadott feladatnál felhasználhatjátok.
1. A figuratív megjelenésnél ügyeljetek a jól felismerhető formák kiválasztására.
2. A megfelelő színek használata erősíti az üzenetet. Használjatok legalább három színt a mondanivalótok kiemeléséhez.
3. A logók egyik legfontosabb alkotóeleme a felirat, azaz a tipográfia. A tudatos, átgondolt betűhasználat növelheti a logó értékét.
4. Legyen méretezhető, ne okozzon gondot a megjelenés a canvas méretének megváltoztatásakor.
5. Tartalmazzon 10 másodpercenként ismétlődő, a figyelemfelkeltésére alkalmas effektet.
0100 0000|₂ pont
B3-2014-EGY02 Készítsetek egy virtuális ingaóra objektumot! Az óra számlapján jelenjen meg a csapatlogótok, és legyen opcionálisan hallható a másodpercenkénti tik-tak, illetve kerek óránként a pontos idő.
0100 0000|₂ pont
B3-2014-EGY03 Tervezzétek meg egy személygépkocsi műszerfalának analóg kijelzős modelljét. A műszerfalra helyezzetek el fordulatszámmérőt, sebességmérőt km számlálóval és illesszétek be a B3 oldalon található analóg órát is. A műszerfal az adatokat egy tesztpanelről kapja, amely egy HTML formon beállított kuplung, fék, gáz, és sebességfokozat értékek alapján véletlenszámokból generált adatfolyamot küld a műszerfalhoz. Szabályok a következők:
1. A sebességfokazat és gázadás szerinti fordulatszám beállításával az elérhető sebességet saját algoritmussal kalkulálja a program. Az alábbi táblázatban megállapodás szerinti értékekkel szemléltetjük a sebességfokozat, gáz, fordulatszám és az elért sebesség feltételezett kapcsolatát. Természetesen a különböző motor és autótípusok jellemzői eltérnek egymástól, így ezek sajátosságainak figyelmebevételével a táblázat tovább bővíthető.
  
  Sebességfokozat Gáz Fordulatszám Sebesség
  
  1 50% 2500 30
  
  2 50% 2500 50
  
  3 50% 2500 70
  
  4 50% 2500 90
  
  5 50% 2500 110
2. A fék lenyomásával a gáz értéke nullázódjon.
3. A kuplung lenyomásakor a sebességfokozat és a gáz értéke nullázódjon.
4. A km számláló a tesztelési idő és ez elért sebesség alapján pörögjön.
1000 0000|₂ pont
B3-2014-EGY04 Alakítsátok át a bemutatott Mandelbrot kódot úgy, hogy a z_n=z_n-1²+z₀ összefüggésben használt z₀ érték helyére egy c konstans kerüljön. Készítsetek űrlapot, amelyen megadható a vizsgált komplex számtartomány alsó és felső határa, a c konstans értéke valamint az ábrázoláshoz használt színkód! Melyik nevezetes halmaz jelenik meg?
0100 0000|₂ pont

« Előző | Lap eleje

Sebességfokozat	Gáz	Fordulatszám	Sebesség
1	50%	2500	30
2	50%	2500	50
3	50%	2500	70
4	50%	2500	90
5	50%	2500	110

5. Vászonra fel!

Analóg kijelzős óra

Kedves Bitfaragó jelöltek!

HTML5 dokumentum és a canvas

Analóg kijelzős óra

Fibonacci spirál

Ábrázoljunk függvényeket!

Rajzoljunk Mandelbrot fraktált!

Oldd meg a feladatokat!

Beküldhető feladatok 2014:

Hivatkozások, felhasznált források