Benvinguts a la pàgina d'Eva

Soc una estudiant de 3r d'ESO de l'assignatura de Robòtica i Programació, em dic Eva i el que trobareu us agradarà molt:

Primer, trobareu una cara que reacciona amb la veu, canvia de color i es mou.
Segon, un robot que es mouen alternativament amb una variant anomenada Sinus. Les cames es mouen amb la funció Sinus i la Cosinus. Quan parles els ulls canvien de color i la boca s'obre depenen el volum de la teva veu.
Tercer, l'Arcimboldo és un pintor que al 1563 va pintar un quadre amb 30 fruites i el que vam fer va ser crear un mapa d'imatge amb GIMP amb mapper.js
Quart, hem creat un codi i un dibuix electrònic a tinkercad que fa que quan aproximo la mà o disminueixo la llum arribara a un LDR, canvia la freqüència del so d'un altaveu, és a dir, hem fet un Theremin.

Cinquè, hem posat un codi d'intel·ligència artificial basat en tensorflow.js, que és capaç de generar-nos un model per identificar amb la webcam tres classes d'objectes. (gat, gos i esquirol).

Explicarem els projectes començant pel més fàcil:

Crear aquesta pàgina web amb plantilla bootstrap5.

Descarreguem la pàgina web del professor.
Creem un compte de neocities amb el compte de iespompeufabra.cat i pujem tots els arxius que hem descomprint de la pàgina del professor.
Creem carpetes (folders) amb els noms face, imagemap, robot, project, machinelearning i dintre de cada carpeta posem un arxiu (new file) i aquest arxiu es diu index.html perquè tots els navegadors sempre el busquen i mai es mostra la paraula index.html en la direcció.

Projecte de mapa d'imatge del quadre "Estiu"(1563) d'Arcimboldo.

Baixem l'imatge anterior de la web del professor concretament aquí

Obrim el programa 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.

Dibuixem polígons en totes les fruites i afegim les adreces 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 area anterior no es un area normal sinó d'una classe específica que està definida a la biblioteca mapper i que té una propietat que es diu icolor, que és 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. Aquest

Cara que es mou amb el micròfon.

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

En l'editor posem el següent codi:

 
let mic; //guarda un espai a la memòria una variable anomenada micròfon.
function setup() { //setup és una funció obligatoria de p5.js de configuració o setup 
  createCanvas(800,600); //crea un espai de dibuix o canva de 800 píxels d'amplada i 600 d'alçada.
  mic= new p5.AudioIn(); //la variable mic és un objecte d'una classe anomenada p5.AudioIn que és una entrada d'àudio i tindrà tots els mètodes d'aquesta classe, que les cridarem amb un punt: mic.Start per activar el micròfon, micGetLevel per agafar el nivell del micròfon.
  mic.start();
}
 
function draw() {
    let vol= mic.getLevel();
  console.log ("volume is " + vol); //veure la consola del navegador els números de volum que va entre 0 i 1 i que van canviant.
    let mouth=100;
  let micVariable= map(vol,0,1,0,800); //la funció map fa que els números de volum que van de l'escala 0 a 1 canvii a escala 0 a 500, per poder notar el canvi en l'imatge. Els números queden guardats en micVariable, i els veig amb console.log
 console.log ("micVariable is " + micVariable);
 
    //cara
   strokeWeight(1);
  background(255,255,255);
  fill(micVariable +40, micVariable +100, micVariable +200); //fill és omplir de color amb 3 números. Primer vermell, segon verd, tercer blau. Si en comptes de números poso variables de micròfon, és mourà amb la veu. El valor màxim de color és 255, és a dir, hi ha 255 colors vermells, 255 colors blaus i 255 colors verds, i quan els multiplico em dona 255x255x255 = 16.000.000 colors diferents. Si poses només un número, és l'escala de grisos (fill(n)). Si posés dos números, seria escala de gris i transparència. Si poso quatre números seria red, green and blue i transparència.
    ellipse(400,300,250,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("white");
  ellipse(350,251,50,40);  
    fill("#0000FF"); // En aquest cas l'ull serà de color blau perquè les dues FF estan al final (rgb).
  ellipse(350,255,25,20); 
    fill("#000000");
  ellipse(350,255,10,10);
  
  // ull esquerra
   strokeWeight(1);
  fill("white");
  ellipse(450,251,50,40)
  fill("#0000FF");
  ellipse(450,255,25,20);
   fill("#000000");
  ellipse(450,255,10,10);

  //boca
   strokeWeight(1);
  fill("#FF0000")
  arc (400,350,120,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(6);
  //line(420,220,436,205) //Això és una linia i els dos primers números, són els vèrtexs inicials i finals.
  //line(436,205,455,220)
 
    //ceja izquierda
  //strokeWeight(6);
  //line(345,220,361,205)
  //line(361,205,380,220)
  
  
  //nas
  strokeWeight (1);
  fill(micVariable +200, micVariable +150, micVariable +300); //El color variarà amb el micròfon quan pujo la veu la Variable mic augmenta la intensitat del color vermell perquè li hem restat 127 i augmenta la intensitat del verd perquè li he sumat 127 i el color blau no varia de intensitat. No puc posar micVariable en tots els colors perquè sortiria sempre la mateixa tonalitat de color. 
  triangle (440, 310, 400, 260,360,310)
}

Projecte robot amb p5.js

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

}

function draw(){
    if (keyIsPressed){
  if ((key=='A')|| (key=='a')){
    ellipse(mouseX,mouseY,25,25);
  }
    }
  background(255);
  x=sin (frameCount*0.1)*15// 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 segon.
  y=sin (frameCount*0.1)*30
  z=sin (frameCount*0.1)*20
  k=sin (frameCount*0.1)*10
  t=sin (frameCount*0.1)*40
  e=cos (frameCount*0.1)*40
  q=cos (frameCount*0.1)*15
  rand= 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);
  fill (200,rand,255);

beginShape(); //Comença una forma.
//Soporte antena
vertex(416,178);vertex(431,157);vertex(452,144);vertex(475,139);vertex(497,146);vertex(514,154);vertex(523,166);vertex(531,176);vertex(531,177); endShape (CLOSE);

fill ("#696B65");
beginShape(); //Palo antena
vertex(473,55);vertex(472,138);vertex(477,139);vertex(476,58); endShape (CLOSE);

fill (rand,80,255);
beginShape(); //Bola antena
vertex(469,29);vertex(482,29);vertex(489,43);vertex(479,56);vertex(469,55);vertex(460,43);vertex(460,41); endShape (CLOSE);

fill(rand,143,187+rand);
beginShape(); //Cara 
vertex(339,182);vertex(339,368);vertex(610,371);vertex(609,182); endShape (CLOSE);

fill(219+rand,17,22)
beginShape(); //Boca
vertex(432,329);vertex(424,329);vertex(424,332+h);vertex(424,339+h);vertex(431,343+h);vertex(443,344+h);vertex(452,346+h);vertex(463,346+h);vertex(472,346+h);vertex(479,346+h);vertex(486,346+h);vertex(492,345+h);vertex(499,345+h);vertex(510,344+h);vertex(517,343+h);vertex(525,341+h);vertex(530,339+h);vertex(529,331+h);vertex(528,327);vertex(516,330);vertex(506,332);vertex(500,332);vertex(489,332);vertex(476,333);vertex(469,334);vertex(463,333);vertex(458,332);vertex(449,330);vertex(442,329);vertex(432,328);vertex(424,328); endShape (CLOSE);

fill ("#F7F9F7");
beginShape(); //Parte blanca ojo izquierdo
ellipse(412,254,49,49); endShape (CLOSE);

fill (50,40,45+h*6);
beginShape(); //iris ojo izquierdo
ellipse(411,255,14+q,14+q); endShape (CLOSE);

fill("#181819");
beginShape(); //pupila ojo izquierdo
ellipse(411,255,1+q,1+q); endShape (CLOSE);
  
fill ("#F7F9F7");
beginShape(); //Parte blanca ojo derecho
ellipse(539,256,52,52); endShape (CLOSE);

fill (50,40,45+h*6);
beginShape(); //iris ojo derecho
ellipse(538,255,14+x,14+x); endShape (CLOSE);

fill("#181819");
beginShape(); //pupila ojo derecho
ellipse(538,255,3+x,3+x); endShape (CLOSE);
  
fill(209,17+rand,245);
beginShape(); //Cuello
vertex(377,367);vertex(377,395);vertex(576,396);vertex(574,370); endShape (CLOSE);
  
fill(rand, rand, 250);
beginShape(); //Cuerpo
vertex(311,397);vertex(641,396);vertex(643,716);vertex(307,716); endShape (CLOSE);
  
fill(rand,33,193);
beginShape(); //barriga
vertex(311,397);vertex(641);vertex(643,716);vertex(307,716); endShape (CLOSE);


fill(29,17+rand,255)
beginShape(); //Brazo izquierdo
vertex(310,407);vertex(241,502+x);vertex(255,504+x);vertex(265,509+x);vertex(272,515+x);vertex(278,520+x);vertex(280,529+x);vertex(311,491); endShape (CLOSE);

fill(29,17,255)
beginShape(); //Codo izquierdo
ellipse(246,535+z,77,77); endShape (CLOSE);

fill (29,17+rand,255)
beginShape(); //Antebrazo izquierdo
vertex(234,502+k);vertex(130,431+y);vertex(102,471+y);vertex(208,543+k);vertex(211,530+k);vertex(212,523+k);vertex(218,516+k);vertex(225,509+k);vertex(232,507+k);vertex(233,507+k);vertex(233,508+k);
endShape (CLOSE);

fill (rand,rand,255);
beginShape(); //Mano izquierda
vertex(17,443+y);vertex(30,471+y);vertex(98,477+y);vertex(137,422+y);vertex(107,361+y);vertex(76,360+y);vertex(98,408+y);vertex(73,448+y); endShape (CLOSE);

fill (29,17+rand,255)
beginShape(); //Brazo derecho
vertex(641,403);vertex(642,456);vertex(729,494+x);vertex(729,484+x);vertex(732,474+x);vertex(736,467+x);vertex(740,465+x);vertex(743,461+x);vertex(750,458+x);vertex(753,456+x); endShape (CLOSE);

fill(29,17,255)
beginShape(); //Codo derecho
ellipse(767,485+z,77,77); endShape (CLOSE);

fill (29,17+rand,255)
beginShape(); //Antebrazo derecho
vertex(762,449+x);vertex(814,340+x);vertex(854,361+x);vertex(803,474+x);vertex(796,465+x);vertex(791,461+x);vertex(786,459+x);vertex(781,454+x);vertex(772,452+x);vertex(767,451+x); endShape (CLOSE);

fill (rand,rand,255);
beginShape(); //Mano derecha
vertex(800,266+x);vertex(804,333+x);vertex(864,364+x);vertex(921,326+x);vertex(917,296+x);vertex(869,326+x);vertex(829,306+x);vertex(825,253+x); endShape (CLOSE);

fill (219,117,22+rand)
beginShape(); //Pierna izquierda
vertex(370,715);vertex(371,903+e);vertex(384,897+e);vertex(399,894+e);vertex(406,897+e);vertex(418,899+e);vertex(427,901+e);vertex(431,906+e);vertex(432,715); endShape (CLOSE);

fill(rand,120,170)
beginShape(); //Pie izquierdo
vertex(373,903+e);vertex(367,906+e);vertex(356,914+e);vertex(348,921+e);vertex(342,937+e);vertex(340,949+e);vertex(339,962+e);vertex(463,964+e);vertex(463,955+e);vertex(463,945+e);vertex(461,936+e);vertex(457,929+e);vertex(452,921+e);vertex(446,916+e);vertex(440,909+e);vertex(433,906+e);vertex(428,904+e);vertex(424,900+e);vertex(415,897+e);vertex(406,896+e);vertex(399,894+e);vertex(391,894+e);vertex(384,897+e);vertex(379,899+e); endShape (CLOSE);

fill (219,117,22+rand)
beginShape(); //Pierna derecha
vertex(521,714);vertex(579,715);vertex(578,903+t);vertex(570,898+t);vertex(561,894+t);vertex(555,892+t);vertex(545,895+t);vertex(535,895+t);vertex(525,899+t);vertex(519,901+t); endShape (CLOSE);

fill(rand,120,170)
beginShape(); //Pie derecho
vertex(517,902+t);vertex(509,911+t);vertex(504,914+t);vertex(498,922+t);vertex(496,928+t);vertex(492,938+t);vertex(492,951+t);vertex(492,960+t);vertex(492,963+t);vertex(612,963+t);vertex(611,959+t);vertex(611,955+t);vertex(610,949+t);vertex(610,942+t);vertex(608,936+t);vertex(607,930+t);vertex(604,928+t);vertex(601,922+t);vertex(598,919+t);vertex(595,915+t);vertex(590,912+t);vertex(583,907+t);vertex(579,903+t);vertex(569,900+t);vertex(561,895+t);vertex(553,892+t);vertex(548,892+t);vertex(543,894+t);vertex(536,894+t);vertex(531,895+t); 
endShape (CLOSE); //Acaba una forma.
}

Projecte theremin: 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.