La web de Pedro

Soc estudiant de tercer d'ESO de l'asignatura de robótica i programació, em dic Pedro i el que trobareu en aquesta web us agradarà molt:

• Primer torbareu una cara molt maca que es mou amb la veu i canvia de color.
• Segon, trobareu un robot que es mou amb la veu, la boca i els ulls es mouen amb la funció cosinus, i els braços i les cames amb la funció sinus. Alguns colors són aleatoris. També, el color canvia amb la veu.
• Tercer, L'Arcimbolddo é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 adptar 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, cnavia la freqüencia del so d'un altaveu, és a dir, hem fet un Theremin.
• Cinqué, hem posat un doci d'intel·ligència artificial basat en tensorflow.js, que es capaç de generar-nos un model per identificar amb la webcam tres clases d'objectes(gat.gos i esquirol).

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

Crear aquesta pàgina web amb plantilla boostrap5.

1. Descarregem la plantilla de la pàgina web del profesor
2. Creem un compte de neocities amb el compte de iespompeufabra.cat i puixem tots el arxius que hem descomprimit de la pàgina del profesor
3. Creem carpetes (new folders) amb els noms face, imagemap, robot, project, machinelearning i dintre de cada carpeta creem un arixu (newfile) anomenat index.html perque tots els navegador sempre busquen i mai es mostra la paraula indeh.html en la direcció

Mapa d'imatge amb fuites (Arcimboldo).

projecte de mapa d'imatge del quadre "estiu" (1563) d'Arcimboldo

1. baixem l'imatge anterior de la web del professor, concretament aqui
2. 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


3. 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.


4. 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.

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

 
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() {//cara
let vol = mic.getLevel();
let mouthH= map(vol,0,1,0,250);
 background("#ffffff"); //es el color del fons de la cara en color blanc
  //cara
  fill("#804000"); //color de la cara (marro)
  ellipse(mouthH,300,200,300); //les mides de la cara
  //ull dret
  fill("#0001ff"); //color del ull dret(blau)
  ellipse(mouthH-50,255,40,60); //les mides del ull dret
  //ull esquerra
  fill("#0000ff"); // color del ull esquerra(blau)
  ellipse(mouthH+50,255,40,60); // mides de l'ull esquerra
  //boca
  fill("#ff0000")// color de la boca(vermell)
  arc(mouthH,330,150,mouthH,0,PI);
//celles
  strokeWeight(8);
  line(mouthH-20,235,mouthH-40,200);
//celles
  strokeWeight(8);
  line(mouthH+20,235,mouthH+40,200);
}