View source for Seguidor de línies virtual amb Scratch


== Introducció ==

Un '''seguidor de línies''' és un rastrejador que té com a objectiu, com el seu nom indica, seguir una línia d’un color més fosc pintada sobre un fons d’un color més clar. El rastrejador funciona mitjançant sensors. En funció de la complexitat del recorregut, són necessaris més o menys sensors. Distingim entre seguidors de línies virtuals i reals. En l’exemple que durem a terme, treballem un seguidor de línies virtual.

== Els sensors ==

Els '''sensors ''' són els encarregats de fer el treball de detecció, en aquest cas de la línia, mitjançant la informació que interpreten de les instruccions que els hi indiquem.

== Seguidor de línies virtual amb Scratch ==

El present exercici es presenta mitjançant la programació amb [[Ejercicio:_Introducción_a_Scratch|'''Scratch''']]. El mateix programa es pot realitzar amb [[Introducció_a_Snap!|'''Snap!''']] per observar les diferències i aprendre així a realitzar el mateix procés amb eines diferents. Es pot trobar a [[Seguidor_de_línies_virtual|<span style="color:#000080">Seguidor de línies virtual</span>]]

'''[[File:Seg60.PNG|200px|Seg60.PNG]]'''

L’exemple que seguirem el podem&nbsp;en&nbsp;[https://scratch.mit.edu/projects/177984214/| en aquest enllaç.]

=== '''[[File:Núm 1.png|20px|Núm 1.png]]''' Elements del programa ===

'''Disseny del fons'''

Dibuixem un circuit que determina la línia a seguir. Ens dirigim a la pestanya '''Fons''' i premem el pinzell d’edició.&nbsp;Dibuixem un circuit tancat que contingui corbes i pintem el fons d’un altre color.

[[File:Seg1.png|200px|RTENOTITLE]]

'''Disseny de l’objecte'''

Dibuixem l’objecte amb l’editor gràfic. Simulem un cotxe i remarquem amb diferents colors les parts del cotxe que faran la funció de sensors (en aquest cas treballem amb 3 sensors).

[[File:Seg2.png|200px|RTENOTITLE]]

=== '''[[File:Núm 2.PNG|20px|Núm 2.PNG]]''' Moviment del cotxe ===

En primer lloc és necessari programar el cotxe perquè es mogui amb les següents línies de codi:

'''[[File:Seg3.PNG|705x163px|RTENOTITLE]]'''

{| style="width: 700px" cellspacing="1" cellpadding="1" border="1"
|-
| <p style="text-align: center"><span style="color:#696969">'''Desenvolupem aquí detalladament la construcció del codi'''</span></p> 
*&nbsp;Primerament creem un bloc nou, que anomenem '''bloc “caminar”''' i definirà el moviment del cotxe: 
**Seleccionem el bloc [[File:Seg4.png|RTENOTITLE]]&nbsp; 
**Creem una '''variable "velocitat"''' que defineixi la velocitat en que es mourà el cotxe:&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp;&nbsp; [[File:Seg5.png|border|270px|Seg5.png]] &nbsp;=&nbsp; [[File:Seg6.png|RTENOTITLE]]&nbsp; 
**Indiquem que al iniciar el programa la velocitat sigui 3: &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; [[File:Seg7.png|center|Seg7.png]] 
**Recuperem el bloc de moviment i &nbsp;li assignem la velocitat a la que s’ha de moure. [[File:Seg8.png|center|Seg8.png]] 
**Fins aquí tenim definida la velocitat del cotxe, ara ens falta el moviment. Responent a l’objectiu, seguir la línia negra, fem ús dels sensors. Indiquem mitjançant un '''condicional '''que, si el color turquesa es troba sobre el color negre, es mogui. [[File:Seg9.png|center|Seg9.png]] 
**Fem que aquest programa esdevingui un bloc. '''Creem un bloc nou''' que anomenem “camina” i encaixem el programa que hem elaborat anteriorment amb el bloc que se’ns crea per defecte “defineix camina”.&nbsp;&nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp;&nbsp; [[File:Seg10.png|center|Seg10.png]]   
*Assignem que &nbsp;“camina” &nbsp;s’executi per sempre: 

&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;[[File:Seg11.png|RTENOTITLE]]&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;

*Creem un altre bloc nou que anomenem “recorregut” i &nbsp;hi encaixem el programa anterior: 

&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;[[File:Seg12.png|RTENOTITLE]]

*Per acabar col·loquem el bloc “recorregut” sota el bloc d’inici, de manera que al iniciar l’acció s’executi “recorregut”: 

&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;[[File:Seg13.PNG|RTENOTITLE]]

|}

=== '''[[File:Núm 3.png|20px|Núm 3.png]]''' Reconducció del moviment ===

Fins aquí &nbsp;hem aconseguit que el cotxe es mogui mentre el sensor turquesa es troba sobre la línia negre, però quant aquest arriba a una corba i el sensor turquesa deixi de detectar el color negre observem que s’atura. Així que modifiquem el programa, tot incloent dos condicionals nous que fan referència als dos sensors restants, perquè això no passi.

[[File:Seg14.PNG|RTENOTITLE]]

{| style="width: 700px" cellspacing="1" cellpadding="1" border="1"
|-
| <p style="text-align: center">'''Detallem el codi que hem afegit per programar els sensors de color groc i de color blau'''</p> 
*Indiquem que si el color groc detecta el negre giri 6 graus a l’esquerre. 

&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;[[File:Seg14,5.png|RTENOTITLE]]'''&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;'''

*Afegim un operador que ens permet, realitzar el gir a la mateixa velocitat que li hem indicat al cotxe que es mogui. &nbsp; 

'''&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;[[File:Seg15.png|RTENOTITLE]]&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;'''

*Fem el mateix amb el sensor blau, però el gir el senyalitzem cap a la dreta. 

'''&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;[[File:Seg16.png|RTENOTITLE]]&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;'''

*Afegim el bloc&nbsp; &nbsp; [[File:17.png|RTENOTITLE]]&nbsp; &nbsp;&nbsp;en ambdós condicionals perquè un cop el sensor turquesa del cotxe torni a detectar de nou el color negre segueixi caminant. 

&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;[[File:Seg46.png|RTENOTITLE]]

*Unim els dos condicionals al bloc &nbsp;d’inici i provem d’executar el programa. Ràpidament ens adonem que si el cotxe es troba sobre el color negre els 3 sensors són capaços de recorre el circuit correctament respectant les respectives corbes. No obstant, si per contra iniciem el programa amb el cotxe fora de la línia negre, aquest no executa cap moviment per anar a trobar el recorregut. 

'''&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;[[File:Seg17.png|RTENOTITLE]]'''

|}

Aconseguim que el cotxe es mantingui seguint la línia durant tot el trajecte, No obstant, tenim un altre repte a resoldre, aconseguir que quant el cotxe es trobi fora del recorregut, aquest retornant a ell. Per fer-ho creem un nou bloc anomenat "retorna" i li indiquem la següent línia de codi;

'''&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;[[File:Seg18.png|RTENOTITLE]]'''

D'aquesta forma el cotxe es mantindrà en moviment fins a retorbar la línia negra.&nbsp;

Fem ús d’un nou condicional que indiqui que quant el color turquesa NO estigui sobre negre, llavors s’executin les condicions que hem encomanat al bloc&nbsp;&nbsp;[[File:Seg47.png|RTENOTITLE]]perquè es mogui fins trobar-la.&nbsp;

&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;[[File:Seg48.PNG|300px|Seg48.PNG]]

Finalment l’àrea de treball ens ha de quedar amb la següent programació definida;

[[File:Seg20.png|RTENOTITLE]]

=== '''[[File:Núm 5.PNG|20px|Núm 5.PNG]]''' Tancament del joc ===

A més, podem fer més atractiu el joc tot afegint més pantalles amb diferents circuits. Observem l’exemple dels diferents dibuixos i també de la programació per tal que canvi d’un fons a un altre.

[[File:Seg21.png|border|RTENOTITLE]]&nbsp; &nbsp; &nbsp; &nbsp;[[File:Seg22.png|RTENOTITLE]]

&nbsp;

== Comparació amb Snap!... ==

Repliquem el seguidor de línies amb '''Snap!'''

'''Snap!''', com s'ha vist a l'[[Introducció_a_Snap!#Activitat:_Faig_girar_una_nòria|activitat de dibuixar una nòria]], permet unir objectes. Una aplicació pràctica directa és la versió que es pot fer per a programar el robot seguilínies, usant tres objectes (encara que visualment sempli un) que es comuniquen entre ells en comptes d'un. El codi resultant utilitzant menys línies de codi.

Tenim la opció d’importar el projecte creat amb '''Scratch''' a l’'''Snap!''' i aconseguir així exactament el mateix programa traduït amb el software d’'''''Snap!'' '''a través d'[http://djdolphin.github.io/Snapin8r2/ aquest enllaç].

L’exemple que seguirem serà PathFollower que es pot trobar en [http://snap.berkeley.edu/snapsource/snap.html#cloud:Username=jens&ProjectName=PathFollower aquest enllaç]

&nbsp;&nbsp;[[File:Seg23.png|border|300px|RTENOTITLE]]
<p style="text-align: justify">Si observem amb deteniment el projecte es compon del '''robot "Bot"''' i 2 '''sensors "Right Sensor" i "Left Sensor"''' vinculats al robot. L'exemple aprofita la vinculació d'objectes de l''''Snap!'''. Per veure com es vinculem consulteu la introducció a '''Snap!'''.</p> <p style="text-align: justify">Aquesta aproximació té molt a veure amb la realitat, un robot té incorporats una sèrie de sensors, que van a sobre d'ell i que són els que saben detectar els paràmetres físics, en aquest cas un canvi de color o un canvi de contrast.</p> 
=== Opció A: Usant el bloc ''Ask'' ===
<p style="text-align: justify">Un possible codi del projecte seria el següent:</p> <p style="text-align: justify">'''&nbsp;[[File:Seg50.PNG|RTENOTITLE]]'''</p> <p style="text-align: justify">El robot es mou, que és el que sap fer, i va preguntant als sensors si està&nbsp;tocant la linea, que és el que saben fer. Quan el sensor esquerra la toca, el robot &nbsp;gira una mica en aquesta direcció, quan toca el dret fa el contrari. Darrere d’aquesta aparent simplicitat s’amaguen uns quants conceptes interessants:</p> <p style="text-align: justify">En primer lloc l’ús dels blocs “Quan” que simplifica&nbsp;molt la realització del programa. Serveixen per definir una resposta provocada per una condició.</p> <p style="text-align: justify">L’altre concepte important és el'''bloc “ask” '''(pregunta) que mostra la potencia de l’'''Snap! '''per definir blocs. Es tracta d’un bloc que té per paràmetre un objecte i que retorna el resultat d’un codi que executarà aquest objecte. Això és possible pel disseny de l’'''Snap! '''on els objectes i el codi tenen la mateixa entitat que un nombre o un text i es poden fer servir amb la mateixa facilitat que aquests.</p> 
{| style="width: 700px" cellspacing="1" cellpadding="1" border="1"
|-
| <p style="text-align: center">'''Veiem com està construït el bloc “ask”:'''</p> <p style="text-align: justify">'''&nbsp;&nbsp;[[File:Seg51.png|RTENOTITLE]]'''</p> 
Els paràmetres de "ask" (pregunta a) són un sprite (objecte) i una expressió lambda (una funció a la qual poden cridar). La clau està en poder cridar qualsevol codi d'un altre objecte i es marca escollint&nbsp;la següent opció a la definició del bloc''':&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;'''[[File:Seg52.png|RTENOTITLE]]

La icona de '''Snap!'''''ve d'aquesta característica i fent una mica de recerca sobre expressió ''lambda''a Internet es pot esbrinar perquè el personatge de l''''Scratch '''es diu '''Alonzo.'''''

Veiem com està plantejada aquesta definició. Comencen per el bloc bàsic, “tocant”:

'''&nbsp;&nbsp;[[File:Seg53.png|RTENOTITLE]]&nbsp;[[File:Seg54.png|RTENOTITLE]]'''

Si cridem a aquest bloc del “bot” retorna cert, com era d’esperar: Ara ho compliquem una mica:

'''[[File:Seg55.png|RTENOTITLE]]'''

Estem fent una crida a la funció “tocant”, el resultat és el mateix, però es podria generalitzar per qualsevol bloc, del “bot” o de qualsevol altre. Per exemple, mirarem de fer-lo amb el sensor esquerre: busquem el següent bloc a '''Sensors'''&nbsp;i seleccionarem l'objecte corresponent:

[[File:Seguilinies tocantpath1.png|RTENOTITLE]]

Fiquem el bloc de '''<tocant Path?>'''&nbsp;en&nbsp;el primer camp i encapsul·lem tot el bloc fent clic dret i seleccionant la opció corresponent:&nbsp;

[[File:Seguilinies tocantpath2.png|RTENOTITLE]]

Ara fiquem aquest bloc en un de crida i el&nbsp;'''des-encapulem''' fent també clic dret en ell mateix (això últim és important, si no es fa, no funcionarà):

[[File:Seguilinies tocantpath4.png|RTENOTITLE]]

I ho provem:

'''&nbsp;[[File:Seg56.png|RTENOTITLE]]'''

En aquest cas estem cridant al codi d’altres objectes, els sensors. El bloc “ask” va un pas més enllà fent general aquesta idea.

'''&nbsp;[[File:Seg57.png|RTENOTITLE]]'''

|}
<p style="text-align: justify">&nbsp;</p> 
=== Opció B: Usant el bloc ''Pregunta'' ===

La versió 4.1 de l''''Snap!''' i les posteriors ja disposen d'un bloc que fa la mateixa funció que el bloc "ask" que hem creat abans:

[[File:Seguilinies pregunta1.png|RTENOTITLE]]

Ho podem provar per veure si funciona:

[[File:Seguilinies pregunta2.png|RTENOTITLE]]

I ara ja ho podem incorporar en el nostre codi:

[[File:Seguilinies pregunta3.png|RTENOTITLE]]

== Bitbot.cat ==

Aquest és un article del programa [https://bitbot.cat/ '''Bitbot.cat'''], podeu consultar la resta d'articles a:

*[[Recursos_formació_BitBot|Formació presencial '''Bitbot.cat''']] 
*[[Bitbot|Formació semipresencial '''Bitbot.cat''']] 

'''Bitbot.cat''' és un programa implusat per la Secretaria de Telecomunicacions, Ciberseguretat i Societat Digital de la '''Generalitat de Catalunya''', en col·laboració amb el Departament d’Ensenyament, que neix amb l’objectiu d’impulsar la millora de les competències digitals del jovent i promoure el creixement de les vocacions tecnològiques.

Una de les accions que es proposa aconseguir és la capacitació de monitores i monitors per a conduir i desenvolupar '''activitats educatives de lleure en els camps de la robòtica i la programació''', per tal d’anar formalitzant aquesta oferta amb '''monitores i monitors certificats'''.