2016-05-08 12:22:29 +02:00
/ * *
All animations and features scripted by :
Lukia
2022-05-28 17:41:17 +02:00
contact @ anesis . tk
2016-05-08 12:22:29 +02:00
Free to use and fork and anything you want !
* * /
$ ( document ) . ready ( function ( ) {
function config ( ) {
// BULLES //
dmini = 25 ; // diamètre mini
dmaxi = 50 ; // diamètre maxi
//couleur des bulles
colorR = 175 ; // fond canal rouge
colorG = 0 ; // fond canal vert
colorB = 0 ; // fond canal bleu
// animation
setbulle = 30 ; // nombres de bulles
vitesse = 50 ; // plus le chiffre est faible plus l'animation est rapide
// Effet des bulles
randomizecolor = false ; // enclenche la randomisation de la couleur, by pass sur les précédents paramètre RGB
alpha = false ; // enclenche la transparence et la randomisation de l'alpha
setalpha = 0 ; // Définit la transparence (0.1 à 1)
alpharandom = true ; // couche alpha aléatoire (plus joli, mais plus lourd à gérer), désactive le setalpha
bulimage = "" ; // chemin vers l'image : syntaxe CSS ( url(adressedel'image) (laissez vide pour désactiver: bulimage="")
// bulimage="url(design/img/bulle.png)";
// couleur de fond du conteneur et de l'ombre de disparition
bgR = 40 ; // fond canal rouge
bgG = 40 ; // fond canal rouge
bgB = 40 ; // fond canal rouge
// ombre des bulles.
shadowfx = true ;
// Effet de disparition des bulles
setfading = true ; // activation
fadingheight = 100 ; // limite de l'ombre depuis le haut de la page
canvasBGcolorR = 255 ; // Couleur de fond et couleur du Fader : obligatoire si fading activé
canvasBGcolorG = 255 ; // Couleur de fond et couleur du Fader : obligatoire si fading activé
canvasBGcolorB = 255 ; // Couleur de fond et couleur du Fader : obligatoire si fading activé
// Profondeur de champs
setfocus = false ;
// LAVA LAMP config :)
lavalamp = false ;
lavalimit = 100 ; // px
// Nom des éléments
idcontent = "myCanvas" ; // nom du conteneur de bulles
idbulle = "bulle" ; // nom des bulles
idcontentjq = "#" + idcontent + "" ;
idbullejq = "." + idbulle + "" ;
} ;
/////////// dimensions ///////////////
//on récupère les dimensions du canvas.
function dimensions ( ) {
largeur = $ ( idcontentjq ) . width ( ) ;
hauteur = $ ( idcontentjq ) . height ( ) ;
}
//////////////////////////////////
// Lancement
config ( ) ;
dimensions ( ) ;
$ ( window ) . resize ( function ( ) {
dimensions ( ) ;
} ) ;
function random ( ) {
//disposition
randleft = Math . floor ( Math . random ( ) * largeur ) ; //px
randtop = Math . floor ( Math . random ( ) * ( Math . PI * 500 ) ) ; //px
// taille
randtaille = Math . floor ( Math . random ( ) * dmaxi ) ; //px
if ( randtaille < dmini ) {
randtaille = dmini ;
}
// vitesse
randvitesse = Math . floor ( Math . random ( ) * vitesse ) ;
if ( randvitesse < 1 ) {
randvitesse = 1 ; // evite le 0
}
// couleur bulles
if ( randomizecolor == true ) {
colorR = Math . floor ( Math . random ( ) * 255 ) ; // canal rouge
colorG = Math . floor ( Math . random ( ) * 255 ) ; // canal vert
colorB = Math . floor ( Math . random ( ) * 255 ) ; // canal bleu
}
//couche alpha bulles
if ( alpha == true && alpharandom == true ) { // RANDOM ACTIVE
randalpha = Math . random ( ) ;
randalpha = randalpha . toString ( ) . substring ( 0 , 3 ) ;
if ( randalpha == 0.0 ) {
randalpha = 0.1 ;
}
}
else if ( alpha == true ) { // PERSONNALISE
randalpha = setalpha ;
}
else if ( alpha == false ) { // RANDOM ET ALPHA DESACTIVE
randalpha = 1 ;
}
//echelle des bulles (item.radius n'est pas changeable une fois défini, obligé de passer par la méthode scale())
randscale = Math . random ( ) * 1 ;
randscalefactor = Math . random ( ) * 1 ;
// constante définissant le point de départ des bulles
// inittop=hauteur+randtaille+10; // en bas
inittop = - 110 ; // en haut
}
/******initialisation des formes ******/
// colorisation du background si Fader activé
if ( setfading == true ) {
var fader = new Shape . Rectangle ( {
point : [ 0 , 0 ] ,
size : [ largeur , hauteur ] ,
fillColor : "rgb(" + canvasBGcolorR + "," + canvasBGcolorG + "," + canvasBGcolorB + ")"
} ) ;
}
// création des bulles
var groupbulle = [ ] ;
var grouppath = [ ] ;
for ( i = 0 ; i < setbulle ; i ++ ) {
random ( ) ;
dimensions ( ) ;
var bubble = new Path ( {
segments : [ [ 0 , 0 ] , [ 30 , 0 ] , [ 30 , 40 ] , [ 60 , 40 ] , [ 60 , 0 ] , [ 90 , 0 ] , [ 90 , 110 ] , [ 60 , 110 ] , [ 60 , 110 ] , [ 60 , 70 ] , [ 30 , 70 ] , [ 30 , 110 ] , [ 0 , 110 ] ] ,
closed : true ,
position : [ randleft , - randtop ] ,
} ) ;
bubble . scale ( randscale ) ;
// effet focu
if ( setfocus == true ) {
focus ( bubble , colorR , colorG , colorB ) ;
} else {
bubble . fillColor = "rgba(" + colorR + "," + colorG + "," + colorB + "," + randalpha + ")"
}
if ( shadowfx == true ) {
bubble . shadowColor = new Color ( colorR , colorG , colorB ) ,
bubble . shadowBlur = 8 ,
bubble . shadowOffset = new Point ( 0 , 0 )
}
groupbulle . push ( bubble ) ;
// bubble.selected=true;
// console.log(bubble);
// création des objets lave pour chaque bulle
if ( lavalamp == true ) {
var path = new Path ( {
fillColor : "rgba(" + colorR + "," + colorG + "," + colorB + "," + randalpha + ")" ,
closed : true
} ) ;
grouppath . push ( path ) ;
// path.selected=true;
}
}
// création de la cire
if ( lavalamp == true ) {
var cireH = hauteur - lavalimit ;
var cire = new Path ( {
segments : [ [ 0 , cireH ] , [ largeur , cireH ] , [ largeur , hauteur ] , [ 0 , hauteur ] ] ,
fillColor : "#000000" ,
// strokeColor: "red",
closed : true
} ) ;
}
// création du fader
if ( setfading == true ) {
var fader = new Shape . Rectangle ( {
point : [ 0 , 0 ] ,
size : [ largeur , fadingheight ] ,
fillColor : {
gradient : {
stops : [
[ "rgba(" + canvasBGcolorR + "," + canvasBGcolorG + "," + canvasBGcolorB + ",1)" , 0 ] ,
[ "rgba(" + canvasBGcolorR + "," + canvasBGcolorG + "," + canvasBGcolorB + ",0.8)" , 0.2 ] ,
[ "rgba(" + canvasBGcolorR + "," + canvasBGcolorG + "," + canvasBGcolorB + ",0.1)" , 0.5 ] ,
[ "rgba(" + canvasBGcolorR + "," + canvasBGcolorG + "," + canvasBGcolorB + ",0)" , 1 ] ]
} ,
origin : [ largeur / 2 , 0 ] ,
destination : [ largeur / 2 , fadingheight ]
}
} ) ;
}
// animation
function gazes ( event ) {
for ( var i = 0 ; i < setbulle ; i ++ ) {
// on récupère toutes les bulles du calque actif
var bulle = groupbulle [ i ] ;
var path = grouppath [ i ] ;
var cirelimit = view . bounds . height - lavalimit ;
// en fonction de la taille de la bulle, la montée sera différente
bulle . position . y += bulle . bounds . width / vitesse ;
// quand une bulle arrive en fin de parcours
if ( bulle . bounds . top > hauteur + bulle . bounds . width ) {
// on applique le random et on applique les valeurs
random ( ) ;
if ( bulle . bounds . width < dmini ) {
bulle . scale ( randscale * 3 ) ;
}
else if ( bulle . bounds . width > dmaxi ) {
bulle . scale ( randscale + ( randscalefactor * 0.75 ) ) ;
} else {
bulle . scale ( randscale ) ;
}
bulle . position . y = 0 - randtop ;
bulle . position . x = randleft ;
if ( setfocus == true && randomizecolor == true ) {
focus ( bulle , colorR , colorG , colorB ) ;
}
else if ( randomizecolor == true && setfocus == false ) {
bulle . fillColor = "rgba(" + colorR + "," + colorG + "," + colorB + "," + randalpha + ")" ;
}
}
// quand une bulle sort de la cire
if ( bulle . bounds . top < cirelimit && lavalamp == true ) {
// Création des connexions
cirage ( bulle , cirelimit , path ) ;
}
}
}
// on lance l'animations
view . on ( 'frame' , gazes ) ;
// EFFET LAVA LAMP
function cirage ( bubble , wax , forme ) {
// instanciation des variables
var bubpos = bubble . position ;
var midbubble = bubble . bounds . width / 2 ;
var bubtaille = midbubble * 2
var top = bubpos . y - midbubble ; // le haut de la bulle
var distance = ( top - wax ) * - 1 ; // a partir du top. devient positif
var topsegments = bubpos . y ;
// coordonnées des points d'attache
var midbulleft = bubpos . x - midbubble ;
var midbulright = bubpos . x + midbubble ;
var bottombulle = ( distance - bubtaille ) * - 1 ;
// animation des poignées inférieures
var deflect = distance / Math . PI ;
// limite de brisure de la connexion
var stopper = bubtaille + midbubble / Math . PI - 5 ; // 10px de marge
// préparation du sélecteurs de segment
var segmentcolle = forme . segments ;
// variables propres aux formes
var fpos = forme . position ;
var forigin = fpos . y - ( fpos . y / 2 )
var fdestination = fpos . y + ( fpos . y / 2 )
// on attribut à ce moment les dimension et propriété des paths des formes.
// on pose les points de la forme
forme . segments = [
[ midbulleft , wax ] , //BG
[ midbulleft , topsegments ] , //HG
[ midbulright , topsegments ] , // HD
[ midbulright , wax ] // BD
] ;
// Animation des segments,
// on gère les courbes via les poignées
// haut gauche
segmentcolle [ 2 ] . handleOut = [ 0 , midbubble ] ;
// haut droite
segmentcolle [ 1 ] . handleIn = [ 0 , midbubble ] ;
// bas gauche
segmentcolle [ 3 ] . handleIn = [ - deflect , bottombulle + deflect ] ;
// bas droite
segmentcolle [ 0 ] . handleOut = [ deflect , bottombulle + deflect ] ;
if ( distance > bubtaille + midbubble ) {
// ARRONDI DES SEGMENTS INFERIEURS !!!
}
// si les courbes se croisent on arrête la progression de la cire
if ( deflect > stopper ) {
forme . segments = [ [ 0 , 0 ] , [ 0 , 0 ] , [ 0 , 0 ] , [ 0 , 0 ] ] ;
}
// DEBUG
// segmentcolle[1].selected = true;
// segmentcolle[2].selected = true;
// segmentcolle[0].selected = true;
// segmentcolle[3].selected = true;
// console.log(segmentcolle[1].location,segmentcolle[3].location);
} // END OF CIRAGE
function focus ( bioule , r , g , b ) {
var thirdplan = dmaxi - dmini / 3 ;
var secondplan = thirdplan * 1.5 ;
var focuswidth = bioule . bounds . width ;
if ( focuswidth < thirdplan ) {
var blur = 0.01 ;
bioule . fillColor = {
gradient : {
stops : [
[ "rgba(" + r + "," + g + "," + b + ",0.5)" , blur ] ,
[ "rgba(" + r + "," + g + "," + b + ",0)" , 1 ] ] ,
radial : true
} ,
origin : bioule . position ,
destination : bioule . bounds . rightCenter
}
}
else if ( focuswidth > thirdplan && focuswidth < secondplan ) {
var blur = 0.5 ;
bioule . fillColor = {
gradient : {
stops : [
[ "rgba(" + r + "," + g + "," + b + ",0.6)" , blur ] ,
[ "rgba(" + r + "," + g + "," + b + ",0)" , 1 ] ] ,
radial : true
} ,
origin : bioule . position ,
destination : bioule . bounds . rightCenter
}
}
else if ( focuswidth > thirdplan && focuswidth < secondplan ) {
var blur = 0.65 ;
bioule . fillColor = {
gradient : {
stops : [
[ "rgba(" + r + "," + g + "," + b + ",0.8)" , blur ] ,
[ "rgba(" + r + "," + g + "," + b + ",0)" , 1 ] ] ,
radial : true
} ,
origin : bioule . position ,
destination : bioule . bounds . rightCenter
}
}
else if ( focuswidth > secondplan ) {
var blur = 1 ;
bioule . fillColor = "rgba(" + r + "," + g + "," + b + ",1)" ;
}
}
// ----------------------- CONTROLS -------------------------
launcher = true ;
$ ( "#animationcontrol" ) . click ( function ( ) {
// on stop l'animation
if ( launcher == true ) {
view . detach ( 'frame' ) ;
launcher = false ;
$ ( this ) . text ( "Lancer l'animation du fond" ) ;
}
else {
view . attach ( 'frame' , gazes ) ;
launcher = true ;
$ ( this ) . text ( "Arrêter l'animation du fond" ) ;
}
} ) ;
} ) ; //END OF DR