La web de Martí

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

Primer, una cara que reacciona amb la veu i li canvia el color
Segon, trobareu una ballarina que es mou amb la veu la boca i els ulls es mouen amb la funció cosinus, i els braçosi les cames amb la funció sinus. Alguns colors són aleatoris. També, els color canvien amb la veu. També si apretem les tecles B(Black), R(Red), P(Pink), es canvia el color del vestit.
Tercer, l'Arcimboldo és un pintor que al 1563 va pintar un quadre amb 30 fruites i el que hem fet es crear un mapa d'imatge amb GIMP i adaptar el codi del 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 arribada 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 es capaç de generar-nos un model per identificar amb la webcam tres classes d'objectes (gat, gos i teixó).

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

Crear aquesta pàgina web amb plantilla bootstrap5.

Descarreguem la plantilla de la web del professor
Creem un compte de neocities amb el compte iespompeufabra.cat i pujem tots els arxius que hem descomprimit de la pàgina del professor.
Creem carpetes (new folders) amb els noms face, imagemap, robot, project, machinelerning i dintre de cada carpeta posem un arxiu (new file) i aquest arxiu es diu index.html perquè tots els navegadors sempre 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

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 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 reemplaçar tot.

Cara que es mou, mou les parts de la cara i canvia el color amb el micròfon.

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

En l'editor posem el següent codi:

 
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 són globals i afecten a tot el codi. Si estiguessin dintre d'una funció, no es podrien utilitzar fora d'aquesta perquè son variables locals si estan dintre d'una funció.

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à totes 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() {//cara
  background(255,255,255);
  let vol = mic.getLevel();
  console.log ("volume is" + vol); //veure la consola del desenvolupador que es troba en el navegador els números de volum que va entre 0 i 1 i que van canviant.
  micVariable= map(vol,0,1,0,500); //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);
  fill(micVariable-50,micVariable +225,micVariable); //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. El color variarà amb el micròfon, quan pujo la veu la variable mic disminuirà la intensitat del color vermell perquè li he restat 50 i augmentarà la intensitat del verd perquè li he sumat 225 i el color blau no variarà. No es pot posar micVariable en tots els colors perquè sortiria sempre la mateixa tonalitat de color.
  
  ellipse(400,micVariable+50,400,300); //els dos primers paràmetres son el centre de la el·lipse, el primer és el centre de la "x" i el segon és el centre de la "y". El penúltim nombre és l'amplada de la el·lipse i l'últim és l'alçada de la el·lipse. La unitat que s'utilitza són els píxels. El penúltim nombre, en aquest cas, és una variable (mic) perquè la veu canvï l'amplada de la el·lipse. 
  
  //ull dret
  fill("#ffffff");
  ellipse(350,micVariable,25,25);
  
  //ull esquerre
  fill("#ffffff");
  ellipse(450,micVariable,25,25);
  
  //boca
  fill("#E35656");
  arc(400,micVariable+90,150,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 l'alçada. El cinquè i el sisè son com es veu l'arc, de 0 a PI, és una circumferència (la part de dalt, en aquest cas) i PI 0 és al contrari.
  
  
  //celles
  strokeWeight(8); //és el gruix del contorn de la el·lipse.
  fill("#ffffff"); //en aquest cas les celles seràn de color negre perquè el nombre "FFFFFF" és el negre en el sistema hexadecimal.
  line(325,225,250,250); //això és una línia i els dos primers números són els vèrtexs inicials i finals.
  
  //celles
  //strokeWeight(16);
  //fill("#ffffff");
  //line(510,215,610,240)
 

}

Projecte Ballarina p5.js


let mic,h;
//let micVariable = 100;

function setup(){
    createCanvas(551,601);
  mic = new p5.AudioIn();
  mic.start();
}

function draw(){
  x1=sin(frameCount*0.1)*40; //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 contínua: -1, -0.99, -0.98,... -0.01, 0, 0.01, 0.02,... 1, 0.99, 0.98,... 0.01, 0,... Multiplico per 40 el sinus perquè vagi des de -40 píxels fins a 40 píxels. frameCount serveix per contar fotogrames, 50 per seg. function draw es refresca 50 vegades per seg.
  x2=cos(frameCount*0.1)*20;
  background(255,255,255);
  let vol = mic.getLevel();
  h= map(vol,0,1,0,50);
  fill("#EECC98")
beginShape(); //cap, comença una forma.
vertex(373,66+h);vertex(375,72+h);vertex(372,77+h);vertex(370,78+h);vertex(373,81+h);vertex(374,82+h);vertex(374,87+h);vertex(373,92+h);vertex(370,99+h);vertex(364,102+h);vertex(353,104+h);vertex(352,103+h);vertex(348,104+h);vertex(344,104+h);vertex(329,115+h);vertex(327,118+h);vertex(327,127+h);vertex(287,109+h);vertex(299,90+h);vertex(299,80+h);vertex(299,76+h);vertex(305,66+h);vertex(313,55+h);vertex(319,53+h);vertex(327,48+h);vertex(337,44+h);vertex(347,44+h);vertex(358,48+h);vertex(370,60+h);vertex(372,63+h);vertex(373,68+h);vertex(373,67+h); endShape(CLOSE); // tanca una forma.
  
  fill("#EECC98")
beginShape(); //braç esquerre
vertex(258,131+x1*0.1);vertex(250,134+x1*0.1);vertex(244+x1*0.1);vertex(136+x1*0.2);vertex(238,139+x1*0.2);vertex(233,140+x1*0.2);vertex(228,140+x1*0.2);vertex(217,140+x1*0.2);vertex(212,142+x1*0.3);vertex(200,147+x1*0.3);vertex(187,152+x1*0.3);vertex(175,156+x1*0.3);vertex(166,157+x1*0.3);vertex(151,159+x1*0.3);vertex(144,160+x1*0.5);vertex(141,157+x1*0.5);vertex(133,154+x1*0.5);vertex(131,153+x1*0.5);vertex(127,151+x1*0.5);vertex(120,149+x1*0.5);vertex(114,146+x1*0.5);vertex(111,146+x1*0.5);vertex(109,149+x1*0.5);vertex(109,153+x1*0.5);vertex(112,155+x1*0.5);vertex(119,158+x1*0.5);vertex(123,159+x1*0.5);vertex(125,161+x1*0.5);vertex(125,164+x1*0.5);vertex(122,168+x1*0.5);vertex(116,170+x1*0.5);vertex(114,173+x1*0.5);vertex(113,176+x1*0.5);vertex(92,191+x1*0.5);vertex(91,199+x1*0.5);vertex(100,195+x1*0.5);vertex(101,193+x1*0.5);vertex(101,197+x1*0.5);vertex(106,196+x1*0.5);vertex(108,195+x1*0.5);vertex(116,190+x1*0.5);vertex(118,194+x1*0.5);vertex(121,195+x1*0.5);vertex(126,194+x1*0.5);vertex(127,192+x1*0.5);vertex(129,193+x1*0.5);vertex(130,194+x1*0.5);vertex(138,193+x1*0.5);vertex(147,190+x1*0.5);vertex(153,185+x1*0.3);vertex(158,182+x1*0.3);vertex(170,180+x1*0.1);vertex(182,178+x1*0.1);vertex(193,177+x1*0.1);vertex(203,176+x1*0.1);vertex(212,174+x1*0.1);vertex(224,173+x1*0.1);vertex(233,171+x1*0.1);vertex(237,168+x1*0.1);vertex(240,166+x1*0.1);vertex(257,132+x1*0.1); endShape(CLOSE);

  fill("#EECC98")
beginShape(); //braç dreta
vertex(356,48+h);vertex(377,31);vertex(402,11);vertex(410,8);vertex(422,9);vertex(427,11);vertex(442,1);vertex(448,2);vertex(418,32);vertex(428,41);vertex(429,47);vertex(416,41);vertex(400,34);vertex(371,61+h);vertex(357,47+h); endShape(CLOSE);

  fill("#EECC98")
beginShape(); //cama esquerra
vertex(348,292);vertex(349,222);vertex(361,227);vertex(381,227);vertex(396,225);vertex(421,218);vertex(437,218);vertex(452,212);vertex(453,186);vertex(465,168);vertex(489,144);vertex(496,139);vertex(489,134);vertex(488,124);vertex(499,114);vertex(509,110);vertex(513,102);vertex(518,95);vertex(518,89);vertex(528,87);vertex(535,91);vertex(535,119);vertex(530,136);vertex(522,146);vertex(514,157);vertex(492,211);vertex(486,236);vertex(478,247);vertex(466,254);vertex(427,268);vertex(395,279);vertex(369,288);vertex(348,293); endShape(CLOSE);
  
  if(keyIsPressed) {
      if((key == "r") || (key == "R")) {
        fill("#D5A36B")
      }
    }else{
      fill("#ffffff")
    }

  fill("#EECC98")
beginShape(); //cama dreta
vertex(268,290);vertex(349,294);vertex(333,317);vertex(310,340);vertex(283,365);vertex(248,392);vertex(238,399);vertex(221,424);vertex(212,440);vertex(198,454);vertex(133,494);vertex(131,499);vertex(129,517);vertex(123,522);vertex(104,522);vertex(64,542);vertex(55,543);vertex(54,538);vertex(58,534);vertex(59,531);vertex(63,524);vertex(64,520);vertex(75,511);vertex(85,498);vertex(106,480);vertex(133,462);vertex(174,423);vertex(190,407);vertex(198,392);vertex(204,379);vertex(205,380);vertex(207,372);vertex(210,373);vertex(213,364);vertex(255,306);vertex(261,304);vertex(267,289); endShape(CLOSE);

if(keyIsPressed) {
      if((key == "p") || (key == "P")) {
        fill("#EE98DE")
      }
    }else{
      fill("#ffffff")
    }
  
  if(keyIsPressed) {
      if((key == "r") || (key == "R")) {
        fill("#E73D1B")
      }
    }else{
      fill("#ffffff")
    }
  
  if(keyIsPressed) {
      if((key == "b") || (key == "B")) {
        fill("#000000")
      }
    }else{
      fill("#ffffff")
    }
  
  
beginShape(); //cos
vertex(286,109);vertex(285,114);vertex(274,118);vertex(264,127);vertex(242,137);vertex(246,162);vertex(239,168);vertex(236,191);vertex(236,226);vertex(242,244);vertex(259,278);vertex(267,289);vertex(349,294);vertex(349,222);vertex(341,218);vertex(327,219);vertex(314,211);vertex(311,196);vertex(315,178);vertex(323,166);vertex(326,150);vertex(328,133);vertex(327,126);vertex(287,109); endShape(CLOSE);
    
  }

Projecte Theremin Tinkercad i Arduino

El projecte Theremin consisteix en connectar 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.