Benvinguts a la web de Lucia!

Soc estudiant de 3rB de l'assignatura de Robòtica i Programació, em dic Lucía i aquí trobareu uns projectes que hem fet durants les classes d'aquesta asignatura. Són molt interesants i os poden agradar molt:

Primer trobareu una cara mol curiosa perqué es mou amb i canvïa de color amb la veu.
En segon lloc, podeu observar un robot que es mou amb la veu, la boca segons l'intensitat del so i els ulls es mou gràcies a la funció "cosinus". Els braços i les cames amb la funció "sinus". Alguns colors són aleatoris. També, canvïa el color amb la veu.
En tercer lloc, l'Arcimboldo és un pintor que al 1563 va pintar un quadre amb 30 fruites i aquest proyecte es tractava de crear un mapa d'imatge amb el pograma "GIMP" amb mapper.js
En quart lloc, vam crear un codi i un dibuix electrònic a "tinkercad" que fa que quan s'aproxima la mà o es disminueix la llum arribada a un LDR, canvia la freqüència del so d'un altaveu, és a dir, vam fer un Theremin.
En cinquè, vam posar un codi d'intel·ligència artificial basat en "tensorflow.js", que és capaç de generar un model per identificar amb la webcam tres clases d'objectes (gat, gos i esquirol).

A continuació, explicaré els projectes, començant pel més fàcil:

Crear aquesta pàgina web amb la plantila boostrap5.

Vam descarregar la plantilla de la pàgina web del profesor
Vam crear-nos un compte de neocities amb el compte de iespompeufabra.cat (correo que ens dona el nostre institut) i vam pujar tots els arxius que em descomprimit de la pàgina del profesor.
Vam crear carpetes (new folders) amb els noms face, imagemap, robot, project, machinelearning i dintre de cada carpeta vam crear un arxiu (new file) anomenat index.html, perquè tots els navegadors sempre el busquen primer i mai es mostra la parula "html" en la direcció

Mapa d'imatge amb fruites (Arcimboldo), del quadre "Estiu" (1563).

Baixem l'imatge anterior de la web del professor. Aquesta web la trobem, concretament aquí
Obrim el pograma "GIMP", primer obrim l'imatge amb Arxiu> Obrir, i un cop obert cliquem> Filtres> Web> Mapa d'imatge i apareix un editor de mapa d'imatge>

Obrim el programa GIIMP, primer obrim l'imatge amb Arxiu > Obrir, i un cop obert cliquem Filtres > Web mapa d'imatge i apareix un editor de mapa d'imatges

Dibuixem polígons en totes les fruites i afegim les adreçes de viquipèdia.

Guardem el mapa d'imatge que serà un arxiu amb un nom molt llarg i amb parèntesis amb l'extensió d'un map i s'obre amb el visual code studio.

Afegim la biblioteca mapper.js com un script i afegim a cada area shape un class = "mapper" per dir-li que cada àrea anterior no es un àrea normal sinó d'una classe especifica mapper que està definida a la biblioteca mapper i que té una propietat que es diu icolor, que és un un nombre hexadecimal. I podem veure com queda el codi a continuació. On hem canviat target per title amb el visual code buscar i reemplazar todo.

Cara que es mou amb el micròfon.

Anem a la web de p5.js al seu editor p5.js.r


    let mic; //guarda un espai a la memòria per una variable anomenada micròfon.
  let micVariable=100; //guarda un espai a la memòria per una variable anomenada micVariable amb un valor inicial de 100. Aquestes variables son globals i afecten a tot el codi. Si estiguessin sintre d'una funció, no es podrien utilitzar fora d'aquesta perquè són variables locals si estan dintre d'una funció.
  
function setup() { // Setup és una funció  obligatoriade p5.js de configuració o setup createCanvas(800,600); //crea un espai de dibuix o canva de 800 pixels d'amplada i 600 d'alçada. 
  createCanvas(800,600);
  mic= new p5.AudioIn();//La variable mic és un objecte d'una classe anomenada p5.AudioIn que és una entrada d'àuido i tindrà tots els mètodes d'aquesta classe,  que les cridarem amb un punt: mic.Start per activar el micròfon, mic.GetLevel per agafar el nivell del micròfon, 
  mic.start();
}
 
function draw() { 
    let vol= mic.getLevel();
  micVariable= map(vol,0,1,0,800);
  //cara
  strokeWeight(1);
  background (255,255,255);
    fill("#F8F467");//Fill és ompir de color amb tres números, vermell, verd i blau, en aquest ordre, si en comptes de núm. poso variables cambiarà, el color, amb la veu. El valor màxim de color és 225, és a dir, hi ha 255 colors vermells, 255 colors blaus i 255 colors verds, i quan els multiplico em dona 255·255·255=16.000.000 colors dif. Si poses només un número, és l'escala de grisos (fill(n)). Si posés dos núm. seria escala de gris i transparència. Si poso 4 núm. seria red green and blue i transparència.
   ellipse (400,300,micVariable,300);//Els dos primers números son el centre de l'el·lipse, el primer és el centre de la "x" i el segon és el centre de la "y". El penúltim número és l'amplada de l'el·lipse i l'últim número és l'alçada de l'el·lipse, l'unitat de tot son els pixels. El penúltim número, en aquest cas, és una variable (mic) perqué amb la veu canvï l'amplada de l'el·lipse. 
   
  //ull dret
  strokeWeight(1); // És el gruix del contorn de l'el·lipse. 
  fill("#0000FF"); // En aquest cas l'ull serà de color blau perquè les dues FF estan al final (rgb).
   ellipse (micVariable+50,200,100,250);
   
   //ull esquerra
  strokeWeight(1);
  fill("#0000FF");
   ellipse (micVariable-50,200,100,250);
   
    //boca
  strokeWeight(1);
  fill(micVariable-127,micVariable+127,micVariable);//El color variarà amb el micròfon quan pujo la veu la Variable "mic" disminueix la intensitat del color vermell perquè li he restat 127 i augmenta la intensitat del verd perquè li he sumat 127 i el color blau no varia de instensitat. No puc posar micVariable en tots els colors perquè sortiria sempre la mateixa tonalitat de color. 
  arc (405,350,100,micVariable,0,PI); // L'arc de la boca té sis paràmetres: el primer és la posició "x" del centre de la boca, el segon és la posició "y" del centre de la boca. El tercer és l'amplada del arc i el quart és l'alçada de l'arc. I el cinqué i sisé de l'arc son com es veu l'arc, de 0 a Pi, és una semicircumferència (la part de dalt, en aquest cas) i Pi 0 és al contrari.
  
  //ceja derecha 
  //strokeWeight(5);
  //line (440,225,460,230); //Això és una linia i els dos primers núm. són els vèrtexs inicials i finals
  
  //ceja esquerra 
  //strokeWeight(5);
  //line (440,225,460,230);
   
}

Projecte robot amb p5js


  let mic,h,x,rand;
function setup(){
    createCanvas(1000,737);
  mic=new p5.AudioIn();
  mic.start();
}

function draw(){frameRate(15);
                background(255);
  x=sin(frameCount*0.1)*20;// Guardo en la variable "x",que s'ha creat anteriorment  i la converteixo en una variable sinus que varia entre -1 i +1 de forma continua: -1, -0.99, -0.98,... -0.01,0,0.01,0.2...1, 0.99,0.98...0.01,0,... Multipico per 20 el sinus perquè vagi des de -20 pixels fins +20 pixels. FrameCount serveix per contar fotogràmes i al contar fotogàmes, 50 per seg. perquè funciom draw es resfreca 50 vegades per seg.
  z=cos(frameCount*0.1)*20
        y=sin(frameCount*0.1)*200;         
  rand=int(random(255));//Rand és una variable aleatoria i dona lloc a núm. sencers (int=integer) entre 0 i 255 gràcies a la funció predefinida random.
  let vol=mic.getLevel();
  let h=map(vol,0,1,0,800);
  console.log("Rand és: "+rand);
                
  fill(252-x*40, 224-x*10, 7+x*10);//cuello
                
             rectMode (CORNER);
                rect(475+x,271,50,50);
fill(252-x*60, 224-x*50, 7+x*50);//sombrero
beginShape();// Comenza una forma.
vertex(390+x,117);vertex(413+x,72);vertex(438+x,27);vertex(556+x,29);vertex(591+x,87);vertex(606+x,118);vertex(391+x,117);vertex(391+x,118);endShape(CLOSE);  //Acaba la forma.
fill(222, 222, 222);//cabeza
  beginShape();
vertex(404+x,120);vertex(407+x,280);vertex(480+x,281);vertex(591+x,280);vertex(591+x,207);vertex(593+x,134);vertex(593+x,118);vertex(437+x,119);vertex(405+x,118);endShape(CLOSE);
fill(252, 224, 7);//oreja izquierda
  beginShape();
vertex(357+x,145);vertex(356+x,164);vertex(358+x,193);vertex(405+x,194);vertex(404+x,162);vertex(404+x,146);vertex(358+x,146);endShape(CLOSE);
fill(0, 0, 0);//boca
  beginShape();
vertex(429+x,235);vertex(429+x,257);vertex(569+x,258);vertex(569+x,235);vertex(431+x,237);endShape(CLOSE);
beginShape();
fill(252, 224, 7);//brazo izquierdo
  beginShape();
vertex(399+x,322);vertex(270+x,318);vertex(284+x,344);vertex(278+x,364);vertex(399+x,360);endShape(CLOSE);
  fill(234-x*20, 41+x*20, 44+x*10);//mano izquierda
  beginShape();
ellipse(265+x,340,55+x,55+x);
fill(234, 41, 44);//nariz
  beginShape();
ellipse(496+x,196,21+x,21+x);
  fill(0+x*30, 0+x*30, 0+x*30);//ojo izquierdo
beginShape();
ellipse(446+x,169,28+x,28+x);
  fill(0+x*30, 0+x*30, 0+x*30);//ojo derecho
beginShape();
ellipse(548+x,171,31+x,31+x);
fill(252, 224, 7);//oreja derecha
  beginShape();
vertex(594+x,145);vertex(639+x,144);vertex(640+x,196);vertex(593+x,196);vertex(594+x,146);endShape(CLOSE);
fill(234, 41, 44);//cuerpo
  beginShape();
vertex(399+x,321);vertex(591+x,322);vertex(592+x,510);vertex(400+x,513);vertex(400+x,322);endShape(CLOSE)
fill(252, 224, 7);//brazo derecho
  beginShape();
vertex(590+x,320);vertex(730+x,323);vertex(725+x,341+x);vertex(730+x,358);vertex(730+x,359);vertex(593+x,363);vertex(592+x,323);endShape(CLOSE);
  fill(234-x*20, 41+x*20, 44+x*10);//mano derecha 2
  beginShape();
  ellipse(745+x,336,55+x,55+x);
fill(252, 224, 7);//pierna izquierda
  beginShape();
vertex(412+x,513);vertex(411+x,640);vertex(451+x,639);vertex(450+x,514);vertex(412+x,514);endShape(CLOSE);
fill(252, 224, 7);//pierna derecha
  beginShape();
vertex(535+x,511);vertex(536+x,640);vertex(577+x,649);vertex(577+x,512);vertex(537+x,513);endShape(CLOSE);
fill(234-x*40+x*50, 41+x*35, 44+x*10);//pie izquierdo
  beginShape();
vertex(391+x,641);vertex(469+x,640);vertex(475+x,717);vertex(391+x,719);vertex(392+x,641);endShape(CLOSE);
fill(234-x*40+x*50, 41+x*35, 44+x*10);//pie derecho
  beginShape();
vertex(521+x,639);vertex(600+x,642);vertex(601+x,721);vertex(521+x,720);vertex(519+x,640);endShape(CLOSE);
}

Projecte thermin: tinkercad i arduino

El projecte thermin consisteix en conectar un sensor de llum LDR a un arduino i depenent de la quantitat de llum rebuda per aquest sensor s'activa un altaveu de forma que la freqüència del so és diferent depenent de la llum rebuda