Rainyday.js, faire tomber la pluie en javascript

Une library Javascript pour créer et animer des gouttes de pluie sur une vitre !

Télécharger sur Github
jardin

Le code pour invoquer la pluie

Très simple à utiliser, la bibliothèque permet de définir la taille et le nombre des gouttes,  l’effet de traînée qu’elles laissent, le flou de l’image et même changer la gravité ou plutôt le sens des gouttes…

Au minimum (à mettre dans une fonction appelée au chargement complet de la page) :

var engine = new RainyDay({
    image: element,         // Image element (required)
});
engine.rain([ [0, 2, 200], [3, 3, 1] ], 100);

Avec tous les paramètres possibles :

var engine = new RainyDay({
    image: element,         // Image element (required)
    parentElement: someDiv, // parent for the canvas
    crop: [0, 0, 50, 60],   // x,y,w,h part of the image should be used
    blur: 10,               
    opacity: 1,       
    gravityAngle: Math.PI / 9  // simulates the wind
});
engine.trail = engine.TRAIL_SMUDGE;  // TRAIL_NONE - TRAIL_SMUDGE or TRAIL_DROPS
engine.gravity = engine.GRAVITY_NON_LINEAR; // or GRAVITY_LINEAR for constant speed
engine.rain(
    [
        [1, 0, 20],         // add 20 drops of size 1...
        [3, 3, 1]           // ... and 1 drop of size from 3 to 6 ...
    ],                       
    100);                   // ... every 100ms

Le site officiel et ses démos

Deux applications photos pour jouer avec les formes géométriques : Defqt et D3lta

Les applications mobiles, Defqt et D3lta, ont en commun de faire des compositions graphiquesLire plus

Applis créatives : PicsArt et Bestie

Lire plus