xxxxxxxxxx740
let canvas;let mano_x = [];let mano_y = [];let mano_z = [];let index_dita = [4, 8, 12, 16, 20]; //pollice, indice, medio, anulare, mignololet osc_quadrato,osc_sfera;let mod_quadrato, mod_sfera;let audio_attivo = false;let scala_x, scala_y, scala_z = 1;let rotazione_x = 0;let rotazione_y = 0;let trasla_x = 0;let trasla_y = 0;let riscala = 1;//let cam;let numero_segmenti = 30; //30let numero_triangoli = 20; //20let numero_quadrati = 7; //7let numero_pentagoni = 4; //4let numero_esagoni = 3; //3let numero_dodecagoni = 1;let x_triangolo = [];let y_triangolo = [];let target_x_triangolo = [];let target_y_triangolo = [];let vel_triangolo = [];let direzione_triangolo = [];let x_segmento = [];let y_segmento = [];let target_x_segmento = [];let target_y_segmento = [];let vel_segmento = [];let direzione_segmento = [];let x_quadrato = [];let y_quadrato = [];let target_x_quadrato = [];let target_y_quadrato = [];let vel_quadrato = [];let direzione_quadrato = [];let x_pentagono = [];let y_pentagono = [];let target_x_pentagono = [];let target_y_pentagono = [];let vel_pentagono = [];let direzione_pentagono = [];let x_esagono = [];let y_esagono = [];let target_x_esagono = [];let target_y_esagono = [];let vel_esagono = [];let direzione_esagono = [];let x_dodecagono = [];let y_dodecagono = [];let target_x_dodecagono = [];let target_y_dodecagono = [];let vel_dodecagono = [];let direzione_dodecagono = [];let x_sfera = 0;let y_sfera = 0;let z_sfera = 150;let dir_sfera = false;let target_x_sfera = 0;let target_y_sfera = 0;let vel_z_sfera = 0;let angolo, sx, sy;let panner_quadrato, panner_sfera;let fs = false;function preload() {}let sketch = function(p) { p.setup = function() { canvas = p.createCanvas(window.innerWidth, window.innerHeight, p.WEBGL); canvas.id("canvas"); // canvas.mouseClicked(p.attiva_audio); p.getAudioContext().suspend(); p.colorMode(p.HSB); p.angleMode(p.DEGREES); // cam = p.createCamera(); for (let i = 0; i < 3; i++) { mano_x[i] = []; mano_y[i] = []; mano_z[i] = []; for (let j = 0; j < 22; j++) { mano_x[i][j] = 0; mano_y[i][j] = 0; mano_z[i][j] = 0; } } //----------audio quadrato----------// p.panner_quadrato = new p5.Panner3D(); p.panner_quadrato.panningModel = 'HRTF'; p.panner_quadrato.distanceModel = 'exponential'; p.osc_quadrato = new p5.Oscillator('triangle'); p.osc_quadrato.freq(0); p.osc_quadrato.amp(0); p.osc_quadrato.start(); p.panner_quadrato.process(p.osc_quadrato); //----------audio sfera----------// p.panner_sfera = new p5.Panner3D(); p.panner_sfera.panningModel = 'HRTF'; p.panner_sfera.distanceModel = 'exponential'; p.osc_sfera = new p5.Oscillator('triangle'); p.osc_sfera.freq(0); p.osc_sfera.amp(0); p.osc_sfera.start(); p.panner_sfera.process(p.osc_sfera);//-------modulanti FM-------// p.mod_quadrato = new p5.Oscillator('triangle'); p.mod_quadrato.freq(0); p.mod_quadrato.amp(0); p.mod_quadrato.start(); p.mod_quadrato.disconnect(); p.mod_sfera = new p5.Oscillator('square'); p.mod_sfera.freq(0); p.mod_sfera.amp(0); p.mod_sfera.start(); p.mod_sfera.disconnect(); //----------setup figure geometriche------------// for (let i = 0; i < numero_triangoli; i++) { x_triangolo[i] = p.floor(p.random(-p.width * 0.5 + 50, p.width * 0.5 - 50)); y_triangolo[i] = p.floor(p.random(-p.height * 0.5 + 50, p.height * 0.5 - 50)); target_x_triangolo[i] = p.floor(p.random(-p.width * 0.5 + 50, p.width * 0.5 - 50)); target_y_triangolo[i] = p.floor(p.random(-p.height * 0.5 + 50, p.height * 0.5 - 50)); vel_triangolo[i] = p.random(1) + 0.05; direzione_triangolo[i] = p.random(360); } for (let i = 0; i < numero_segmenti; i++) { x_segmento[i] = p.floor(p.random(-p.width * 0.5 + 50, p.width * 0.5 - 50)); y_segmento[i] = p.floor(p.random(-p.height * 0.5 + 50, p.height * 0.5 - 50)); target_x_segmento[i] = p.floor(p.random(-p.width * 0.5 + 50, p.width * 0.5 - 50)); target_y_segmento[i] = p.floor(p.random(-p.height * 0.5 + 50, p.height * 0.5 - 50)); vel_segmento[i] = p.random(1) + 0.05; direzione_segmento[i] = p.random(360); } for (let i = 0; i < numero_quadrati; i++) { x_quadrato[i] = p.floor(p.random(-p.width * 0.5 + 50, p.width * 0.5 - 50)); y_quadrato[i] = p.floor(p.random(-p.height * 0.5 + 50, p.height * 0.5 - 50)); target_x_quadrato[i] = p.floor(p.random(-p.width * 0.5 + 50, p.width * 0.5 - 50)); target_y_quadrato[i] = p.floor(p.random(-p.height * 0.5 + 50, p.height * 0.5 - 50)); vel_quadrato[i] = p.random(1) + 0.05; direzione_quadrato[i] = p.random(360); } for (let i = 0; i < numero_pentagoni; i++) { x_pentagono[i] = p.floor(p.random(-p.width * 0.5 + 50, p.width * 0.5 - 50)); y_pentagono[i] = p.floor(p.random(-p.height * 0.5 + 50, p.height * 0.5 - 50)); target_x_pentagono[i] = p.floor(p.random(-p.width * 0.5 + 50, p.width * 0.5 - 50)); target_y_pentagono[i] = p.floor(p.random(-p.height * 0.5 + 50, p.height * 0.5 - 50)); vel_pentagono[i] = p.random(1) + 0.05; direzione_pentagono[i] = p.random(360); } for (let i = 0; i < numero_esagoni; i++) { x_esagono[i] = p.floor(p.random(-p.width * 0.5 + 50, p.width * 0.5 - 50)); y_esagono[i] = p.floor(p.random(-p.height * 0.5 + 50, p.height * 0.5 - 50)); target_x_esagono[i] = p.floor(p.random(-p.width * 0.5 + 50, p.width * 0.5 - 50)); target_y_esagono[i] = p.floor(p.random(-p.height * 0.5 + 50, p.height * 0.5 - 50)); vel_esagono[i] = p.random(1) + 0.05; direzione_esagono[i] = p.random(360); } for (let i = 0; i < numero_dodecagoni; i++) { x_dodecagono[i] = p.floor(p.random(-p.width * 0.5 + 50, p.width * 0.5 - 50)); y_dodecagono[i] = p.floor(p.random(-p.height * 0.5 + 50, p.height * 0.5 - 50)); target_x_dodecagono[i] = p.floor(p.random(-p.width * 0.5 + 50, p.width * 0.5 - 50)); target_y_dodecagono[i] = p.floor(p.random(-p.height * 0.5 + 50, p.height * 0.5 - 50)); vel_dodecagono[i] = p.random(1) + 0.05; direzione_dodecagono[i] = p.random(360); } //--------- setup sfera --------// x_sfera = p.floor(p.random(-p.width * 0.5 + 50, p.width * 0.5 - 50)); y_sfera = p.floor(p.random(-p.height * 0.5 + 50, p.height * 0.5 - 50)); target_x_sfera = p.floor(p.random(-p.width * 0.5 + 50, p.width * 0.5 - 50)); target_y_sfera = p.floor(p.random(-p.height * 0.5 + 50, p.height * 0.5 - 50)); vel_sfera = p.random(1) + 0.05; z_sfera = 150; } //fine del setup p.draw = function() { p.background(0); if(detections != undefined) { if(detections.multiHandLandmarks != undefined) { //p.drawHands(); //p.drawParts(); p.rotateY(180); p.drawLines([0, 5, 9, 13, 17, 0]);//palmo p.drawLines([0, 1, 2, 3 ,4]);//pollice p.drawLines([5, 6, 7, 8]);//indice p.drawLines([9, 10, 11, 12]);//medio p.drawLines([13, 14, 15, 16]);//anulare p.drawLines([17, 18, 19, 20]);//mignolo p.drawLandmarks([0, 1], 0);//palmo p.drawLandmarks([1, 5], 60);//pollice p.drawLandmarks([5, 9], 120);//indice p.drawLandmarks([9, 13], 180);//medio p.drawLandmarks([13, 17], 240);//anulare p.drawLandmarks([17, 21], 300);//mignolo p.rotateY(-180);//------- memorizzo variabili dei punti delle mani---------// scala_x = p.width; scala_y = p.width; for(let i = 0; i < detections.multiHandLandmarks.length; i++) { for(let j = 0; j < 21; j++) { mano_x[i][j] = detections.multiHandLandmarks[i][j].x * scala_x; mano_y[i][j] = detections.multiHandLandmarks[i][j].y * scala_y; mano_z[i][j] = detections.multiHandLandmarks[i][j].z * scala_z; } } //----------sintesi video-----------// p.noFill(); p.strokeWeight(1); p.stroke(255); p.rectMode(p.CORNER); p.rotateX(rotazione_x); p.rotateY(rotazione_y); // p.translate(trasla_x, 0, 0); // p.cam.eyeX(trasla_x); p.scale(riscala, riscala, riscala); p.rect(-p.width * 0.5 + 30, -p.height * 0.5 + 30, p.width - 60, p.height - 60); //mondo //----------sintesi triangoli----------------// for (let i = 0; i < numero_triangoli; i++) { if (x_triangolo[i] > target_x_triangolo[i]) { x_triangolo[i] = x_triangolo[i] - vel_triangolo[i]; } if (x_triangolo[i] < target_x_triangolo[i]) { x_triangolo[i] = x_triangolo[i] + vel_triangolo[i]; } if (p.abs(x_triangolo[i] - target_x_triangolo[i]) < vel_triangolo[i]) { target_x_triangolo[i] = p.int(p.random(-p.width * 0.5 + 50, p.width * 0.5 - 50)); vel_triangolo[i] = p.random(1) + 0.05; direzione_triangolo[i] = p.random(360); } if (y_triangolo[i] > target_y_triangolo[i]) { y_triangolo[i] = y_triangolo[i] - vel_triangolo[i]; } if (y_triangolo[i] < target_y_triangolo[i]) { y_triangolo[i] = y_triangolo[i] + vel_triangolo[i]; } if (p.abs(y_triangolo[i] - target_y_triangolo[i]) < vel_triangolo[i]) { target_y_triangolo[i] = p.int(p.random(-p.height * 0.5 + 50, p.height * 0.5 - 50)); direzione_triangolo[i] = p.random(360); } p.poligono(x_triangolo[i], y_triangolo[i], 10, 3, direzione_triangolo[i]); } //fine sintesi triangoli //----------sintesi segmento----------------// for (let i = 0; i < numero_segmenti; i++) { if (x_segmento[i] > target_x_segmento[i]) { x_segmento[i] = x_segmento[i] - vel_segmento[i]; } if (x_segmento[i] < target_x_segmento[i]) { x_segmento[i] = x_segmento[i] + vel_segmento[i]; } if (p.abs(x_segmento[i] - target_x_segmento[i]) < vel_segmento[i]) { target_x_segmento[i] = p.int(p.random(-p.width * 0.5 + 50, p.width * 0.5 - 50)); vel_segmento[i] = p.random(1) + 0.05; direzione_segmento[i] = p.random(360); } if (y_segmento[i] > target_y_segmento[i]) { y_segmento[i] = y_segmento[i] - vel_segmento[i]; } if (y_segmento[i] < target_y_segmento[i]) { y_segmento[i] = y_segmento[i] + vel_segmento[i]; } if (p.abs(y_segmento[i] - target_y_segmento[i]) < vel_segmento[i]) { target_y_segmento[i] = p.int(p.random(-p.height * 0.5 + 50, p.height * 0.5 - 50)); direzione_segmento[i] = p.random(360); } p.poligono(x_segmento[i], y_segmento[i], 10, 2, direzione_segmento[i]); } //fine sintesi segmenti //----------sintesi quadrati----------------// for (let i = 0; i < numero_quadrati; i++) { if (x_quadrato[i] > target_x_quadrato[i]) { x_quadrato[i] = x_quadrato[i] - vel_quadrato[i]; } if (x_quadrato[i] < target_x_quadrato[i]) { x_quadrato[i] = x_quadrato[i] + vel_quadrato[i]; } if (p.abs(x_quadrato[i] - target_x_quadrato[i]) < vel_quadrato[i]) { target_x_quadrato[i] = p.int(p.random(-p.width * 0.5 + 50, p.width * 0.5 - 50)); vel_quadrato[i] = p.random(1) + 0.05; direzione_quadrato[i] = p.random(360); } if (y_quadrato[i] > target_y_quadrato[i]) { y_quadrato[i] = y_quadrato[i] - vel_quadrato[i]; } if (y_quadrato[i] < target_y_quadrato[i]) { y_quadrato[i] = y_quadrato[i] + vel_quadrato[i]; } if (p.abs(y_quadrato[i] - target_y_quadrato[i]) < vel_quadrato[i]) { target_y_quadrato[i] = p.int(p.random(-p.height * 0.5 + 50, p.height * 0.5 - 50)); direzione_quadrato[i] = p.random(360); } if (i == 0) { p.stroke(255, 255, 255); } else { p.stroke(255); } p.poligono(x_quadrato[i], y_quadrato[i], 11, 4, direzione_quadrato[i]); } //fine sintesi quadrati //----------sintesi pentagono----------------// for (let i = 0; i < numero_pentagoni; i++) { if (x_pentagono[i] > target_x_pentagono[i]) { x_pentagono[i] = x_pentagono[i] - vel_pentagono[i]; } if (x_pentagono[i] < target_x_pentagono[i]) { x_pentagono[i] = x_pentagono[i] + vel_pentagono[i]; } if (p.abs(x_pentagono[i] - target_x_pentagono[i]) < vel_pentagono[i]) { target_x_pentagono[i] = p.int(p.random(-p.width * 0.5 + 50, p.width * 0.5 - 50)); vel_pentagono[i] = p.random(1) + 0.05; direzione_pentagono[i] = p.random(360); } if (y_pentagono[i] > target_y_pentagono[i]) { y_pentagono[i] = y_pentagono[i] - vel_pentagono[i]; } if (y_pentagono[i] < target_y_pentagono[i]) { y_pentagono[i] = y_pentagono[i] + vel_pentagono[i]; } if (p.abs(y_pentagono[i] - target_y_pentagono[i]) < vel_pentagono[i]) { target_y_pentagono[i] = p.int(p.random(-p.height * 0.5 + 50, p.height * 0.5 - 50)); direzione_pentagono[i] = p.random(360); } p.poligono(x_pentagono[i], y_pentagono[i], 12, 5, direzione_pentagono[i]); } //fine sintesi pentagoni//----------sintesi esagono----------------// for (let i = 0; i < numero_esagoni; i++) { if (x_esagono[i] > target_x_esagono[i]) { x_esagono[i] = x_esagono[i] - vel_esagono[i]; } if (x_esagono[i] < target_x_esagono[i]) { x_esagono[i] = x_esagono[i] + vel_esagono[i]; } if (p.abs(x_esagono[i] - target_x_esagono[i]) < vel_esagono[i]) { target_x_esagono[i] = p.int(p.random(-p.width * 0.5 + 50, p.width * 0.5 - 50)); vel_esagono[i] = p.random(1) + 0.05; direzione_esagono[i] = p.random(360); } if (y_esagono[i] > target_y_esagono[i]) { y_esagono[i] = y_esagono[i] - vel_esagono[i]; } if (y_esagono[i] < target_y_esagono[i]) { y_esagono[i] = y_esagono[i] + vel_esagono[i]; } if (p.abs(y_esagono[i] - target_y_esagono[i]) < vel_esagono[i]) { target_y_esagono[i] = p.int(p.random(-p.height * 0.5 + 50, p.height * 0.5 - 50)); direzione_esagono[i] = p.random(360); } p.poligono(x_esagono[i], y_esagono[i], 13, 6, direzione_esagono[i]); } //fine sintesi esagoni//----------sintesi dodecagoni----------------// for (let i = 0; i < numero_dodecagoni; i++) { if (x_dodecagono[i] > target_x_dodecagono[i]) { x_dodecagono[i] = x_dodecagono[i] - vel_dodecagono[i]; } if (x_dodecagono[i] < target_x_dodecagono[i]) { x_dodecagono[i] = x_dodecagono[i] + vel_dodecagono[i]; } if (p.abs(x_dodecagono[i] - target_x_dodecagono[i]) < vel_dodecagono[i]) { target_x_dodecagono[i] = p.int(p.random(-p.width * 0.5 + 50, p.width * 0.5 - 50)); vel_dodecagono[i] = p.random(1) + 0.05; direzione_dodecagono[i] = p.random(360); } if (y_dodecagono[i] > target_y_dodecagono[i]) { y_dodecagono[i] = y_dodecagono[i] - vel_dodecagono[i]; } if (y_dodecagono[i] < target_y_dodecagono[i]) { y_dodecagono[i] = y_dodecagono[i] + vel_dodecagono[i]; } if (p.abs(y_dodecagono[i] - target_y_dodecagono[i]) < vel_dodecagono[i]) { target_y_dodecagono[i] = p.int(p.random(-p.height * 0.5 + 50, p.height * 0.5 - 50)); direzione_dodecagono[i] = p.random(360); } p.poligono(x_dodecagono[i], y_dodecagono[i], 14, 9, direzione_dodecagono[i]); } //fine sintesi esagoni //----------sintesi sfera----------------// if (x_sfera > target_x_sfera) { x_sfera = x_sfera - vel_sfera; } if (x_sfera < target_x_sfera) { x_sfera = x_sfera + vel_sfera; } if (p.abs(x_sfera - target_x_sfera) < vel_sfera) { target_x_sfera = p.int(p.random(-p.width * 0.5 + 50, p.width * 0.5 - 50)); vel_sfera = p.random(1) + 0.05; } if (y_sfera > target_y_sfera) { y_sfera = y_sfera - vel_sfera; } if (y_sfera < target_y_sfera) { y_sfera = y_sfera + vel_sfera; } if (p.abs(y_sfera - target_y_sfera) < vel_sfera) { target_y_sfera = p.int(p.random(-p.height * 0.5 + 50, p.height * 0.5 - 50)); } if (z_sfera >= 150) { direzione = true; } if (z_sfera <= -150) { direzione = false; } if (direzione == true) { z_sfera = z_sfera - vel_z_sfera; } else { z_sfera = z_sfera + vel_z_sfera; } let raggio_sfera = 30; p.push(); p.translate(x_sfera, y_sfera, z_sfera); p.rotateX(p.millis() * 0.01); p.rotateY(p.millis() * 0.05); p.rotateZ(p.millis() * 0.08); p.stroke(255, 255, 100); p.sphere(raggio_sfera, 14, 14); p.pop(); if (z_sfera <= raggio_sfera && z_sfera >= -raggio_sfera) { vel_z_sfera = 0.05; p.strokeWeight(3); p.ellipse(x_sfera, y_sfera, (raggio_sfera - p.abs(z_sfera)) * 2, (raggio_sfera - p.abs(z_sfera)) * 2); } else { vel_z_sfera = 0.3; } //----------------------- sintesi audio -------------------// let nota_quadrato = p.map (x_quadrato[0], 0, p.width, 58, 72);p.mod_quadrato.freq(p.midiToFreq(nota_quadrato) - 12);p.mod_quadrato.amp(50 * (p.abs(z_sfera)));p.osc_quadrato.freq(p.midiToFreq(nota_quadrato));p.osc_quadrato.freq(p.mod_quadrato);p.osc_quadrato.amp(0.01, 0.1); p.panner_quadrato.set(x_quadrato[0] / p.width * 5, y_quadrato[0] / p.height * 5, 3); let nota_sfera = p.map (x_sfera, 0, p.width, 58, 72);p.mod_sfera.freq(p.midiToFreq(nota_sfera) - 12);p.mod_sfera.amp(50 * (p.abs(z_sfera)));p.osc_sfera.freq(p.midiToFreq(nota_sfera));p.osc_sfera.freq(p.mod_sfera);p.osc_sfera.amp(0.01, 0.1); p.panner_sfera.set(x_sfera / p.width * 5, y_sfera / p.height * 5, z_sfera / 150 * 5);//-------------------------interazione--------------------------// if (detections.multiHandLandmarks.length > 1) { //se l'algoritmo legge due mani //-----------rotazione mondo-----------------// let rot_indice_1 = detections.multiHandLandmarks[0][8].z; //indice1 let rot_palmo_1 = detections.multiHandLandmarks[0][0].z; //palmo1 let rot1 = p.lerp(rot_palmo_1, rot_indice_1, 0.5) * 2; let rot_indice_2 = detections.multiHandLandmarks[1][8].z; //indice2 let rot_palmo_2 = detections.multiHandLandmarks[1][0].z; //palmo2 //let rot2 = rot_palmo_2 + rot_indice_2; let rot2 = p.lerp(rot_palmo_2, rot_indice_2, 0.5) * 2; rotazione_x = p.floor(p.map((rot1 + rot2),-0.6, 0, -360, 10)); //rotazione_y = p.floor(p.map((rot1 - rot2),-0.6, 0, -270, 10)); //-------trasla mondo---------------// trasla_x = (mano_x[0][8] + mano_x[1][8]) * 0.5 - p.width*0.5; //-----------zooom mondo----------// let distanza_mani = p.dist(mano_x[0][8], mano_y[0][8], mano_x[1][8], mano_y[1][8]); riscala = p.map(distanza_mani, 0, p.width, 0, 2.5); } else { if (rotazione_x < 0 ) { rotazione_x++; } else if (rotazione_x > 0){ rotazione_x--; } if (riscala < 1) { riscala = riscala + 0.1; } if (riscala > 1) { riscala = riscala - 0.1; } if (p.round(riscala, 3) == 1) { riscala = 1; } trasla_x = 0; } }//fine if mani presenti } //fine if algoritmo funzionante if (p.keyCode === 65) { if (audio_attivo == false) { audio_attivo = true; if (p.getAudioContext().state !== 'running') { p.userStartAudio(); } } p.fullscreen(true); p.resizeCanvas(p.windowWidth, p.windowHeight); } else if (p.keyCode === 83) { audio_attivo = false; p.getAudioContext().suspend(); p.fullscreen(false); p.resizeCanvas(p.windowWidth, p.windowHeight); } } //fine del draw p.drawLandmarks = function(indexArray, hue) { p.noFill(); p.strokeWeight(8); p.colorMode(p.HSB); for(let i = 0; i < detections.multiHandLandmarks.length; i++) { for(let j = indexArray[0]; j < indexArray[1]; j++) { let x = detections.multiHandLandmarks[i][j].x * scala_x - p.width * 0.5; let y = detections.multiHandLandmarks[i][j].y * scala_y - p.height * 0.5; let z = detections.multiHandLandmarks[i][j].z; p.stroke(hue, 40, 255); p.ellipse(x, y, 1, 1); } } } p.drawLines = function(index) { p.stroke(0, 0, 255); p.strokeWeight(0.5); p.colorMode(p.HSB); for(let i=0; i<detections.multiHandLandmarks.length; i++){ for(let j = 0; j < index.length - 1; j++){ let x = detections.multiHandLandmarks[i][index[j]].x * scala_x - p.width * 0.5; let y = detections.multiHandLandmarks[i][index[j]].y * scala_y - p.height *0.5; let z = detections.multiHandLandmarks[i][index[j]].z * scala_z; let _x = detections.multiHandLandmarks[i][index[j+1]].x * scala_x - p.width * 0.5; let _y = detections.multiHandLandmarks[i][index[j+1]].y * scala_y - p.height * 0.5; let _z = detections.multiHandLandmarks[i][index[j+1]].z * scala_z ; p.line(x, y, z, _x, _y, _z); } } } p.poligono = function(x, y, raggio, numero_punti, direzione) { angolo = 360 / numero_punti; p.beginShape(); for (let a = 0; a < 360; a += angolo) { sx = x + p.cos(a + 180 + direzione) * raggio; sy = y + p.sin(a + 180 + direzione) * raggio; p.vertex(sx, sy, 0); } p.endShape(p.CLOSE); } } //fine sketchlet myp5 = new p5(sketch);