Curseur dynamique

Soyez le premier à donner votre avis sur cette source.

Vue 27 903 fois - Téléchargée 900 fois

Description

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 / Exemple :


<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)

Codes Sources

A voir également

Ajouter un commentaire Commentaires
Messages postés
8
Date d'inscription
mardi 26 octobre 2004
Statut
Membre
Dernière intervention
18 avril 2008

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.
Messages postés
1
Date d'inscription
samedi 29 décembre 2007
Statut
Membre
Dernière intervention
29 décembre 2007

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

Merci.
Messages postés
8
Date d'inscription
mardi 26 octobre 2004
Statut
Membre
Dernière intervention
18 avril 2008

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)
Messages postés
1
Date d'inscription
samedi 31 juillet 2004
Statut
Membre
Dernière intervention
4 juillet 2007

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.
Messages postés
368
Date d'inscription
vendredi 10 octobre 2003
Statut
Membre
Dernière intervention
14 mai 2010

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
Afficher les 7 commentaires

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.