🢔 Back to
devart.space
Fonctiothèque :
Quelques bouts de code utile
<titre>Bibliothèque de fonction</titre> Cette page regroupes quelques fonctions que j'utilise lors de mes créations. Ca m'évite de passer des heures à chercher partout dans mes fichiers... ------------ [TOC] # Fonctions ## 2D array to 1D array Pour manipuler le pixel d'une image stocké dans un tableau à une dimension à partir de coordonnées x y. ```javascript function getPixelColor(ix, iy) { let pixels = loadPixels(); // 1D array of screen pixels let idx = 4 * (iy*width + ix); // 2D indexes => 1D index let red = pixels[idx + 0]; let green = pixels[idx + 1]; let blue = pixels[idx + 2]; let alpha = pixels[idx + 3]; return color(red, green, blue, alpha) } ``` ## Ease  ```javascript //p: 0..1 function ease1(p) { return (1-cos(PI*p))/2; } // p: 0..1 // g: 0..1 function ease2(p, g) { if (p < 0.5) return 0.5 * pow(2*p, g); else return 1 - 0.5 * pow(2*(1 - p), g); } ``` ## Round/Floor Équivalent à round(x) en javascript en un peu plus lent ```javascript x = 0.5 + x | 0; ``` Équivalent à floor(x) en javascript en presque 2 fois plus rapide ```javascript x = x | 0; ``` Benchmark: ``` temps pour x de 0 à 1 000 000 par pas de 0.0001 test Math.round(x) > 11701 test x + 0.5 | 0 > 12037 test Math.floor(x) > 20164 test x | 0 > 11603 ``` ## Random int Pour générer un entier aléatoirement en JavaScript, en utilisant la technique floor précédente: ``` let max_border = 10 Math.random() * max_border | 0 ``` ## Time simulation Pour introduire une notion de cycle utile pour la création de boucles animées ```javascript let t = 0; // time: boucle de 0 à 1 let ts = 1/1000; // time step: vitesse d'incrément function loop() { // ...création de cycle via la variable t t = (t + ts)%1; } ``` Avec p5.js, il est aussi possible d'utiliser [millis](https://p5js.org/reference/#/p5/millis) ou [framecount](https://p5js.org/reference/#/p5/frameCount) # Librairies ## p5.createloop.js Utilisation de la librairie [createloop](https://github.com/mrchantey/p5.createLoop). Cette librairie permet de créer simplement des boucles temporelles (alternative à [Time simulation](#Time simulation)) ainsi qu'une fonction de bruit en une ou deux dimensions. Elle permet également d'exporter cette boucle au format GIF. ```HTML <head> <script src="../p5.createLoop-master/dist/p5.createloop.js"></script> </head> ``` ```javascript function setup() { ... createLoop({ duration:4, // durée de la boucle gif: {startLoop:1, endLoop: 2}, // boucle à enregistrer noise:{radius:3, seed:99} // paramètres de creation du noise }) } function draw() { let angle = animLoop.theta; // from 0 to TWO_PI let t = animLoop.progress; // from 0 to 1 let noise = animLoop.noise(); let noise1D = animLoop.noise(x); let noise2D = animLoop.noise(x, y); } ``` ## p5.CCapture.js Utilisation de la librairie [CCapture](https://github.com/spite/ccapture.js). Cette librairie permet de capturer toutes les images d'un canvas afin de les exporter au format GIF, PNG, JPG ou encore WEBM ```HTML <head> <script src="CCapture.all.min.js"></script> </head> ``` ```javascript let capturer = new CCapture({ format: 'png', name: 'out', framerate: 60 }); let startRecord = false; function draw() { ... if (startRecord) { capturer.capture(document.getElementById('defaultCanvas0')); } } function keyPressed() { if (!startRecord) { startRecord = true; capturer.start(); } else { startRecord = false; noLoop(); capturer.stop(); capturer.save(); loop(); } } ``` # Desmos ##y = - (0.5x²(cos2x)(sin2y)) / 4x [](https://www.desmos.com/calculator/dzsh2c9awg) ##y = x²(cos2x)(sin2y) [](https://www.desmos.com/calculator/qaykqglaxt) ##sin(x)*sin(y) = z [](https://www.desmos.com/calculator/i23bopcvgl)
