haitam kerarmi

soc un estudiant de 3r d'ESO de l'assigatura de robotica i programacio, em dic haitam i el que trobareu us agradara molt:

explicarem els projectes començant pel mes fàcil:

crer aquesta pàgina web amb plantilla boostrap5.

  1. Descarreguem la planyilla de la pàgina web del profesor
  2. creem un compte de neocites amb el compte de iespompeufabra.cat i pujem tots els arxius que em descompitit de la pagina del profesor.
  3. creem un compte de neocities amb el compte iespompeufabra.cat i pujem tots el arxiusnqu hem desomprimit de la pagina del professor
  4. creem carpeta new folder amb els noms face, imagemap, robot, project, machinelearning dintre de cada carpeta n arxiu i aquest arxiu es diu index.html perque tots el navegadors sempre busquen i mai es mostra la paraula index.html ela direccio.

    5. projecte de mapa d'imatge del quadre "Estiu" d'arcimboldo

  • baixem l'imatge de la web del professor , cocretament aqui
    • 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'imatges src" "gimp.png" width ="600" height="400">
  • Afegim la biblioteca mapper.js com un script i afegim cada area shape un class= "mapper" >img src " gimp

    Cara que es mou amb el microfon

    1. Anem a la web de p5.js concretament al seu editor p5.js
      2. let mic; //guarda un espai a la memòria una variable anomenada microfon let micVariable = 100; //guarda un espai a la memoria per una variable anomenada micVriable amb un valor inicial de 100. Aquestes variables són globals i afecten a tot el codi. Si estiduessin dintre d'una funció, no es podrien utilitzar fora d'aquesta perque son variables locals si estan dintre function setup() {//setup és una funció obligatoria de pj.js de configuracio o setup createCanvas(800,600);//crea un espai de dibuix o canva de 800 pixels d'ampliada i 600 d'alçada. mic = new p5.AudioIn();// la variable mic mic un objecte d'una classe anomenada p5.Audio que és una entrada d'audio i tindra totes els mètodes d'aquesta classe, que les criadarem 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" + volume);//veure la consola del desenvolupador que es troba en el navegador els numeros de volum que va entre 0 i 1 i que van canviant. micVariable= map(vol,0,1,0,400);//la funció map map fa que els numeros de volum que van a la escala 0 a 1 canvii a l'escala 0 a 500, per poder notar el canvi en la imatge. Els numeros quedan guardats en micVariable, i els veig amb console.log fill(micVariable-100,micVariable+200,micVariable);//fill és omplir de color amb 3 numeros . Primer vermell, segon verd tercer blau. Si en comptes de numero poso variables de microfon, és mourà amb amb la veu. El valor màxim de color és 255, és a dir, hi ha 255 colorsnvermells, ellipse(micVariable+50,200,200,300);//Els dos primers númmros son el centre del el·lipse, el pimer el centre de la x i el segon és el centre de la"y". El penultim numero es l'amplada de la el·lipse i l'últim numero és l'alçada de l'el·lipse, l'unitat de tot son els pixels. El penulltim número, en aquest cas, és una variable (mic)perqu amb la veu canvi l'aplada de l'el·lipse. //ull dret strokeWeight (1); // Es el gruix del contorn de l'el·lipse. fill(micVariable);//En aquest cas l'ull ellipse(micVariable,150,30,30); //ull dret fill("#00FFFF"); ellipse(micVariable+75,150,30,30); //boca strokeWeight(1); fill(micVariable-127, micVariable+127, micVariable);//El color variara amb el microfon quan pujo la veu la variable"mic" disminueix la intensitat del color vermell perque li he restat127 i augmenta la intensitat del verd perque li he sumat 127 i el color blau no varia de inensitat. No puc posar micVariable en tots els colors perquè sortiria sempre la mateixa tonalitat de color. arc(micVariable,250,100,micVariable,0,PI);//L'arc de la boca té sis parametres el primer és la posició "x" del centre del arc, el segon és la posició "y" del centre, el tercer número es l'amplada de l'arc i el quart número és l'alçada de l'arc. i el cinqué i sisé se l'arc son com es veu l'arc , de 0 a pi, és una circumferencia (la part de dalt, en cada cas) inpi 0 és al contrari. //celles //strokeWeight(8); // line(360,290,300,200);//aIXXÒ ES UNA LINIA I ELS DOS PRIMERS NÚM. SON ELS VERTEXS inicials i finals }

    Projecte robot amb p5.js

    
function setup() {
  createCanvas(600, 600);
}

function draw() {
  background(220);
  fill(134, 130, 135)
  ellipse(180, 60, 120, 80)
  fill(199, 157, 174)
  rect(110,100, 140, 180)
  rect(30, 120, 80, 35)
  rect(250, 120, 80, 35)
  ellipse(180, 330, 100, 100)
  fill(255, 43, 43)
  ellipse(150, 56, 40, 40)
  ellipse(210, 56, 40, 40)
  rect(160, 85, 30, 10)
  ellipse(150, 55, 10, 25)
  ellipse(210, 55, 10, 25)
  rect(130, 30, 40, 7)
  rect(190, 30, 40, 7)
  rect(320, 120, 30, 7)
  rect(320, 147, 30, 7)
  fill(134, 130, 135)
  rect(5, 120, 30, 7)
  fill(134, 130, 135)
  rect(5, 147, 30, 7)
  fill(134, 130, 135)
  rect(120, 120, 120, 90)
  ;
function setup(){
createCanvas(120,120);
}
function draw(){
background(204);
if(keyIsPressed){
}
if((key=='h')||(key=='H')){
line(30,60,90,60);
}
if((key=='n')||(key=='N')){
line(30,20,90,100);
}
}
  function draw (){
    if(keyIsPressed){
    if(keyCode==LEFT_ARROW){
    X--;
  if(keyCode==RIGHT_ARROW){
        X++;
      }
    }
    rect(x,45,50,50);
    }
  }
}

    el procete thermin consisteix en conectar un sensor de llum LDR a un arduino i depenent de la quantitat de la llum rebuda per aquest sensor s'activa un altaveu de forma que la frequencia del so és diferent depenent de la llum rebuda