CURSEUR DYNAMIQUE souris, curseur, dynamique, rotation, direction, Source N°43072

Information sur la source

Catégorie :Effets Classé sous : souris, curseur, dynamique, rotation, direction Niveau : Initié Date de création : 10/06/2007 Date de mise à jour : 22/06/2007 18:19:09 Vu / téléchargé: 17 261 / 557

Auteur : wackybacky

Ecrire un message privé

Note :

10,00 / 10

1
2
3
4
5
6
7
8
9
10

Commentaire sur cette source (7)

Ajouter un commentaire et/ou une note

Description

Cliquez pour voir la capture en taille normale

Compatible IE / FF, ce script affiche un curseur (interne au code et modifiable à souhait) qui suit les moindre mouvements du curseur Windows mais, plus intéressant, tourne en fonction de la direction de votre souris. Plusieurs paramètres sont disponibles et le code est assez concis mais est relativement lourd en mémoire car travaille point par point et utilise la rotation (Affiche un meilleurs rendu sur IE que sur FF).

12/06/2007 => Mémoire directionnelle adaptée à la vitesse de la souris (atténuation du tremblement).

15/06/2007 => Listing des pixels à l'initialisation, plus de getElementById(), code plus léger et gain de rapidité.

17/06/2007 => Recentrage du point de rotation (head), fonction ang() corrigée, distance Tête_curseur/Curseur_Windows paramétrable.

17/06/2007 => Transparence des pixels, léger remodelage du script.

22/06/2007 => Tentative de transparence dynamique abandonnée car augmente la latence. Fonction d'arrêt du curseur.

Source

<html>
<head>
<title>Curseur Dynamique</title>
</head>
<body bgcolor="silver" style="cursor:url(blank.cur),default">
<script type="text/javascript">
//--------------------------------------------------------//
// CURSEUR DYNAMIQUE par WackyBacky
//--------------------------------------------------------//
//---[ Déclaration des Paramètres ]-----------------------//
var wdt=3; // Taille d'un pixel (px)
var spc=2; // Espacement pixels (px)
var out=1; // Distance Tête/Cur (px)
var opc=30; // Opacité du curseur (%)
var col=["black","green"]; // Couleurs du curseur
var head=[4,0],tail=[4,8]; // Tête/Queue de flèche
//---[ Curseur (Bitmap) ]---------------------------------//
var cur = [[0,0,0,0,1,0,0,0,0],
[0,0,0,1,2,1,0,0,0],
[0,0,1,2,2,2,1,0,0],
[0,1,2,2,2,2,2,1,0],
[1,2,2,2,2,2,2,2,1],
[1,2,2,2,2,2,2,2,1],
[1,1,1,2,2,2,1,1,1],
[0,0,1,2,2,2,1,0,0],
[0,0,1,2,2,2,1,0,0],
[0,0,1,2,2,2,1,0,0],
[0,0,1,1,1,1,1,0,0]];
//---[ Calcul de Distance et d'Angle ]--------------------//
function dst(x,y){
return Math.sqrt(x*x+y*y);};
function ang(x,y){
var z=(x<0)?z=Math.PI:0;
if(x==0)x=1/Number.MAX_VALUE;
return Math.atan(y/x)+z;};
//---[ Initialisation ]-----------------------------------//
var pxl=new Array();
function init_cur(x,y){
var dX=head[0]-tail[0],dY=head[1]-tail[1];
head[0]+=out*wdt*Math.cos(ang(dX,dY))/spc;
head[1]+=out*wdt*Math.sin(ang(dX,dY))/spc;
Z=ang(dX,-dY);for(y in cur){for(x in cur[y]){
if(cur[y][x]>0)pxl.push(create_pxl(x,y));};};
return setInterval("move_cur()",15);};
//---[ Création des Pixels ]------------------------------//
function create_pxl(x,y){
var div=document.createElement("div");
with(div.style){
background=col[cur[y][x]-1];
height=wdt;width=wdt;
position="absolute";
overflow="hidden";
if(app){opacity=opc/100;}else{
filter="alpha(opacity="+opc+")";};};
div.d=dst(x-head[0],y-head[1])*spc;
div.a=ang(x-head[0],y-head[1])+Z;
document.body.appendChild(div);
return div;};
//---[ Déplacement du Curseur ]---------------------------//
function move_cur(n){for(n in pxl){
var posX=X+pxl[n].d*Math.cos(Z+pxl[n].a);
var posY=Y+pxl[n].d*Math.sin(Z+pxl[n].a);
pxl[n].style.left=Math.round(posX-wdt/2);
pxl[n].style.top=Math.round(posY-wdt/2);};};
//---[ Position de la Souris ]----------------------------//
var memX=Array(20).join(",0").split(",");
var memY=Array(20).join(",0").split(",");
var app=(navigator.appName=="Netscape");
if(app)document.captureEvents(Event.MOUSEMOVE);
var X=0,Y=0,Z=0;document.onmousemove=function(e){
X=(app)?e.pageX:event.x+document.body.scrollLeft;
Y=(app)?e.pageY:event.y+document.body.scrollTop;
memX.shift();memX.push(X);memY.shift();memY.push(Y);
var speed=dst(X-memX[0],Y-memY[0])/20;
speed=(speed>18)?18:Math.round(speed);
Z=ang(X-memX[speed],Y-memY[speed]);};
//---[ Execution du Script ]------------------------------//
document.onload=init_cur();
//---[ Arrêt du Script ]----------------------------------//
function stop_cur(){
clearInterval(document.onload);
document.body.style.cursor="default";};
</script>
<div align="center" style="width:100%;height:100%">
<input type="button" value="Stop" onclick="stop_cur()"/>
<br>2007 - WackyBacky - pour www.JavascriptFR.com</div>
</body>
</html>

<html>
<head>
<title>Curseur Dynamique</title>
</head>
<body bgcolor="silver" style="cursor:url(blank.cur),default">

<script type="text/javascript">
//--------------------------------------------------------//
//            CURSEUR DYNAMIQUE par WackyBacky
//--------------------------------------------------------//
//---[ Déclaration des Paramètres ]-----------------------//
var wdt=3;                       // Taille d'un pixel (px)
var spc=2;                       // Espacement pixels (px)
var out=1;                       // Distance Tête/Cur (px)
var opc=30;                      // Opacité du curseur (%)
var col=["black","green"];       // Couleurs du curseur
var head=[4,0],tail=[4,8];       // Tête/Queue de flèche

//---[ Curseur (Bitmap) ]---------------------------------//
var cur = [[0,0,0,0,1,0,0,0,0],
           [0,0,0,1,2,1,0,0,0],
           [0,0,1,2,2,2,1,0,0],
           [0,1,2,2,2,2,2,1,0],
           [1,2,2,2,2,2,2,2,1],
           [1,2,2,2,2,2,2,2,1],
           [1,1,1,2,2,2,1,1,1],
           [0,0,1,2,2,2,1,0,0],
           [0,0,1,2,2,2,1,0,0],
           [0,0,1,2,2,2,1,0,0],
           [0,0,1,1,1,1,1,0,0]];

//---[ Calcul de Distance et d'Angle ]--------------------//
function dst(x,y){
  return Math.sqrt(x*x+y*y);};

function ang(x,y){
  var z=(x<0)?z=Math.PI:0;
  if(x==0)x=1/Number.MAX_VALUE;
  return Math.atan(y/x)+z;};

//---[ Initialisation ]-----------------------------------//
var pxl=new Array();
function init_cur(x,y){
  var dX=head[0]-tail[0],dY=head[1]-tail[1];
  head[0]+=out*wdt*Math.cos(ang(dX,dY))/spc;
  head[1]+=out*wdt*Math.sin(ang(dX,dY))/spc;
  Z=ang(dX,-dY);for(y in cur){for(x in cur[y]){
  if(cur[y][x]>0)pxl.push(create_pxl(x,y));};};
  return setInterval("move_cur()",15);};

//---[ Création des Pixels ]------------------------------//
function create_pxl(x,y){
  var div=document.createElement("div");
  with(div.style){
    background=col[cur[y][x]-1];
    height=wdt;width=wdt;
    position="absolute";
    overflow="hidden";
    if(app){opacity=opc/100;}else{
    filter="alpha(opacity="+opc+")";};};
  div.d=dst(x-head[0],y-head[1])*spc;
  div.a=ang(x-head[0],y-head[1])+Z;
  document.body.appendChild(div);
  return div;};

//---[ Déplacement du Curseur ]---------------------------//
function move_cur(n){for(n in pxl){
  var posX=X+pxl[n].d*Math.cos(Z+pxl[n].a);
  var posY=Y+pxl[n].d*Math.sin(Z+pxl[n].a);
  pxl[n].style.left=Math.round(posX-wdt/2);
  pxl[n].style.top=Math.round(posY-wdt/2);};};

//---[ Position de la Souris ]----------------------------//
var memX=Array(20).join(",0").split(",");
var memY=Array(20).join(",0").split(",");
var app=(navigator.appName=="Netscape");
if(app)document.captureEvents(Event.MOUSEMOVE);
var X=0,Y=0,Z=0;document.onmousemove=function(e){
  X=(app)?e.pageX:event.x+document.body.scrollLeft;
  Y=(app)?e.pageY:event.y+document.body.scrollTop;
  memX.shift();memX.push(X);memY.shift();memY.push(Y);
  var speed=dst(X-memX[0],Y-memY[0])/20;
  speed=(speed>18)?18:Math.round(speed);
  Z=ang(X-memX[speed],Y-memY[speed]);};

//---[ Execution du Script ]------------------------------//
document.onload=init_cur();

//---[ Arrêt du Script ]----------------------------------//
function stop_cur(){
  clearInterval(document.onload);
  document.body.style.cursor="default";};
</script>

<div align="center" style="width:100%;height:100%">
<input type="button" value="Stop" onclick="stop_cur()"/>
<br>2007 - WackyBacky - pour www.JavascriptFR.com</div>

</body>
</html>

Conclusion

Un paramètre de latence du curseur est à venir (effet de retard)

Fichier Zip

Pour les "Membres Club", vous pouvez télécharger directement un fichier contenu dans le zip sans télécharger le zip en entier !

blank.cur766 octets
cursor.html 3 580 octets

Télécharger le zip

Historique

12 juin 2007 22:30:46 :: 12/06/2007 => Mis à Jour : Mémoire directionnelle est désormais adaptée à la vitesse de la souris, Cela a pour effet de stabiliser le curseur lors de faibles déplacements (atténuation du tremblement)
12 juin 2007 22:38:43 :: Mise à jour description
12 juin 2007 22:56:39 :: Mise a Jour Zip/Img
15 juin 2007 01:32:13 :: 15/06/2007 => Mis à Jour : Listing des pixels à traiter à l'initialisation (plus de double boucle pendant le mouvement du curseur), plus aucun getElementById(x,y), code plus léger et gain de rapidité pour FF désormais quasi-équivalent à IE! Que demande le peuple?
17 juin 2007 14:11:31 :: 17/06/2007 => Mis à Jour : Recentrage du point de rotation (head) au centre du pixel et non à son coin sup/gauche. Fonction ang() corrigée afin que Math.atan(y/0) ne renvoie pas d'erreur. Distance Tête_curseur/Curseur_Windows paramétrable. distance/angle des pixels calculés lors de l'initialisation. Meilleurs rendu graphique et meilleures précision, cependant, initialisation un peu plus longue. Vive la république et vive la France.
17 juin 2007 14:20:41 :: Mise à jour description
17 juin 2007 22:04:57 :: 17/06/2007 => Mis à Jour : Curseur Windows remplacé par "blank.cur" ne laissant apparaitre QUE le curseur dynamique. Nouveau paramètre traitant la transparence des pixels (très prochainement dynamique). Très léger remodelage du script. Plus de raccourci pour Mémoire directionnelle (idéal=20).
22 juin 2007 18:19:09 :: 22/06/2007 => Mis à Jour : Tentative de transparence dynamique abandonnée car augmente la latence. Ajout fonction d'arrêt du curseur.

Sources du même auteur

CURSEUR QUI POINTE LA SOURIS

Toutes les sources de wackybacky

Sources de la même categorie

Toutes les sources de la catégorie Effets

Sources en rapport avec celle ci

Commentaires

Commentaire de LeFauve42 le 18/06/2007 11:22:34

Ca a l'air sympa, mais ce serait parfait si tu fournissais une URL pour voir ce que ca donne.
(Si elle y est deja, mets la plus en valeur car je ne l'ai pas trouvee :o) )
Commentaire de wackybacky le 19/06/2007 20:47:14

Pour tout dire, je ne possède pas encore d'hébergement. C'est cependant une très bonne idée et si quelqu'un à souhaité l'installer sur une de ses pages, je vous invite à laisser l'url de celle là afin que tout le monde puisse avoir un aperçu (ça vous donnera l'occasion de vous faire connaitre :p) ++
Commentaire de MATHIS49 le 03/07/2007 19:39:55

sympa mais pas trés pratique, ce qui serais mieux c'est de pouvoir donner un itineraire pré définis à ce curseur afin de faire des démos par exemple
Commentaire de wackybackyprod le 04/07/2007 01:33:43

Mais là ce n'est pas le but. En revanche, il est toujours possible de créer un tableau de points à suivre (dans un intervalle de temps régulier) et de bricoler une fonction remplaçant celle de la capture des coordonnées du curseur.
Commentaire de wackybacky le 07/07/2007 20:26:21

Bon c'est pas une si mauvaise idée après tout, j'ai cherché un peu ce que ça pouvait donner, j'ai un peu bloquer pour réaliser une pause (ex:sleep(10ms)) in-line pour créer un genre de scène mais c'est impossible en javascript. Je suis donc passé par deux fonction asynchrones impliquant donc 2 timers (move_cursor() et auto_crsor()) le script est opérationnel et en cours de finition. Il devrait arriver d'ici une petite semaine (c'est qu'il y en a qui ont un métier dans la vie :p)
Commentaire de tymex le 29/12/2007 20:47:31

Oui, mais peut-on mettre un curseur personalisé ?
Car je ne trouve aucun scrip permettant la rotation de son propre curseur.

Merci.
Commentaire de wackybacky le 06/01/2008 01:05:03

J'ai créé ce script sur la base d'un curseur interne (variable cur) qui est en fait un tableau bitmap (pixel par pixel): Comme tu peux le voir, ce dernier est constitué de la manière suivante: (Xn étant le nième pixel)
[[X1,X2,X3],  //=> Première ligne de pixels
[X4,X5,X6],  //=> Deuxième ligne de pixels
[X7,X8,X9]]  //=> Troisième ligne de pixels
Les valeurs contenues dans le tableau font référence à une couleur définie dans la variable col à savoir dans cet exemple, 1=black, 2=green (mais peut prendre une valeur de type #RVB). La valeur 0 correspond à l'absence de pixel. On peut donc lire dans un tableu remplis de telle sorte:
[[0,1,0],     #
[1,0,1], => # # => Un losange noir
[0,1,0]]     #
L'avantage étant que ce tableau est redimentionnable à souhait et que tu peux ajouter autant de couleurs que tu le souhaite dans la variable col (tant que les pixels font biens référence à la couleur désirée).
C'est un peu dur à expliquer mais tu peux y voir comme dans la matrice :) avec un peu d'entraînement. En fait j'avais attaqué la fonction edit de ce curseur (pour le modifier point par point) mais le temps me manque cruellement.
J'espère que celà aura pu t'aider un petit peu même si c'est confus.