soc estudiant de3r d'ESO de l'assignatura Robòtica i programació, em dic Marc i el que trobareu us agraadara molt:
Una cara que reacciona amb la veu i canvia de clor.
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 laa funció sinus.Algund colors són aleatoris. També, es color canvia amb la veu.
Si apretem algunes tecles (m,n i b) es fan linies.
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 tinkercard que fa quan aproximo la mà o disminueixo la llum arribada un LDR, canvia la freqüencia del so d'un altaveu, es a dir, hem fet un Theremin.
Cinquè hem posat un codi d'intel·ligència artificial basat een tensorflow.js,quee es capaç de generarnos un model per identificar amb la wbcam trees clases d'objectes (gat,goss i esquirol).
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
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 el navegadors sempre busquen i mai es mostra la paaraula index.html en la direccio
projecte de mapa d'imatge del quadre "Estiu" d'Arcimboldo(1563)
baixem l'imatge anterior de la web del professor, concretament aquí
Obrim el programa GIMP, primer onrim l'imatge amb Arxiu > Obrir, i un cop obert cliquem Filtres > Web > Mapa d'imatge, i apareix un eeditor 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 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
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,200);
background(60,60,60)//es el fons de la cara i esta en el color gris
fill("#FCD0B4");
ellipse(mouthH,300,200,300);//les mides de la cara
//ull dret
fill("#000000");//el clor del ull dret i esta en el color negre
ellipse(mouthH-50,255,40,50);//les mides del ull dret
//ull esquerra
fill("#000000");//el clor del ull esquerrà i esta en el color negre
ellipse(mouthH+50,255,40,50);//les mides del ull esquerrà
//boca
fill("#ff0000")
arc(mouthH,330,150,mouthH,0,PI);//les mides de la boca
//celles
strokeWeight(8);
line(mouthH-20,235,mouthH-40,200)
//celles
strokeWeight(8);
line(mouthH+20,235,mouthH+40,200);
}
Projecte robot amb p5js
let mic,h,x,rand;
function setup(){
createCanvas(1000, 562);
mic=new p5. AudioIn();
mic.start();
}
function draw() {
frameRate(10);
background(255,rand,rand);
x-sin (frameCount*0.1)*15// Guardo la variaable "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,... Multiplico per 20 elsinus perquè vagi des de -20 pixeles fins +20 pixeles. FrameCount serveix per contar fotogrames i al contar fotorames, 50 per seg
y=sin (frameCount*0.1)*30
z=sin (frameCount*0.1)*20
k=sin (frameCount*0.1)*10
rand= random (120);
let vol= mic.getLevel();
let h= map (vol,0,1,0,100);
fill (rand, 127+rand/2,218-rand);
beginShape(); //antena
vertex(227,150);
vertex(236,151);
vertex(244,146);
vertex(254,142);
vertex(267,141);
vertex(280,144);
vertex(291,149);
vertex(296,147);
vertex(290,141);
vertex(280,138);
vertex(269,136);
vertex(252,136);
vertex(239,142);
vertex(231,148);
vertex(222,157);
endShape(CLOSE)
beginShape();//cap
vertex(296,146);
vertex(296,146);
vertex(375,113);
vertex(398,115);
vertex(422,127);
vertex(443,139);
vertex(485,180);
vertex(509,218);
vertex(517,248);
vertex(512,268);
vertex(507,273);
vertex(504,282);
vertex(501,288);
vertex(487,304);
vertex(472,312);
vertex(452,329);
vertex(414,355);
vertex(406,363);
vertex(389,371);
vertex(365,376);
vertex(353,379);
vertex(334,379);
vertex(317,379);
vertex(292,364);
vertex(280,351);
vertex(259,319);
vertex(242,286);
vertex(235,250);
vertex(237,218);
vertex(247,196);
vertex(265,174);
vertex(297,145);
fill(rand, 255+rand)
endShape(CLOSE);
beginShape();//braç dret
vertex(312,h+380);vertex(323,h+390);vertex(332,h+393);vertex(335,h+416);vertex(339,h+427);vertex(348,h+453);vertex(359,h+474);vertex(361,h+477);vertex(406,h+478);vertex(444,h+451);vertex(441,h+429);vertex(430,h+416);vertex(409,h+419);vertex(407,h+406);vertex(409,h+397);vertex(398,h+375);vertex(386,h+376);vertex(364,h+376);vertex(311,h+381);
fill(rand, 255+rand)
endShape(CLOSE);
beginShape();//coll
vertex(432,346);vertex(429,365);vertex(439,378);vertex(451,380);vertex(463,359);vertex(468,337);vertex(468,321);vertex(442,338);vertex(431,349); endShape(CLOSE);
beginShape();//tronc
vertex(424,371);vertex(425,414);vertex(441,427);vertex(448,439);vertex(575,471);vertex(573,458);vertex(597,436);vertex(620,423);vertex(630,422);vertex(636,423);vertex(643,416);vertex(646,359);vertex(646,358);vertex(636,321);vertex(620,311);vertex(606,300);vertex(599,294);vertex(587,293);vertex(562,293);vertex(551,302);vertex(529,304);vertex(515,291);vertex(506,285);vertex(492,300);vertex(476,308);vertex(455,329);vertex(469,326);vertex(470,336);vertex(468,356);vertex(457,373);vertex(442,380);vertex(423,371); endShape(CLOSE);
beginShape();//braç esquerrà
vertex(512,267);vertex(560,249);vertex(593,242);vertex(620,240);vertex(654,258);vertex(667,283);vertex(658,300);vertex(641,306);vertex(631,310);vertex(613,304);vertex(613,298);vertex(604,296);vertex(562,292);vertex(550,300);vertex(527,302);vertex(506,287);vertex (512,268); endShape(CLOSE);
beginShape();//cames
vertex(662,295);vertex(689,300);vertex(708,313);vertex(723,328);vertex(731,346);vertex(733,360);vertex(744,356);vertex(744,397);vertex(738,404);vertex(740,422);vertex(742,427);vertex(790,451);vertex(794,470);vertex(782,474);vertex(769,476);vertex(752,478);vertex(642,481);vertex(620,461);vertex(601,470);vertex(586,462);vertex(601,446);vertex(614,441);vertex(631,433);vertex(643,419);vertex(670,411);vertex(698,413);vertex(691,391);vertex(680,382);vertex(644,355);vertex(637,324);vertex(628,313);vertex(616,307);vertex(640,307);vertex(661,295);vertex(663,294); endShape(CLOSE);
}90
