fonction de creation de courbe

kro · 2016-11-11 03:14:57

salut

ma question concerne un script javascript mais je la pose ici parce que ça concerne surtout des maths et des algorithmes généraux.

je fais une petite anim sur un site qui suit le curseur. ça marche super.

par contre pour les plateformes sans souris (mobiles, tablettes), j'aimerais générer un mouvement smooth du genre mouvement de souris.
dans l'idée ça m'irait bien que l'anim suive un mouvement de 8 couché par ex.
en gros à chaque i++ un point suivant la courbe me transmettrait les coordonnées x et y correspondantes à sa progression et ferait une boucle.

par contre je me suis orienté vers une filière artistique dès la seconde, autant dire que mon niveau de math est assez rudimentaire (je sais compter).
il me semble savoir que c'est là que les boutons de la calculette "cos", et "tan" interviennent ?

du coup si vous arrivez à pondre une formule du genre en 2 sec ou que vous avez des ressources concernant ce sujet (avec plein de formes de courbes par ex. - d'ailleurs un peu d'aléatoire serait bienvenu aussi) je prends !

merci !

kro · 2016-11-11 04:18:20

je viens de tester une autre approche possible : un point qui en suit un autre qui se déplace aléatoirement

http://jsfiddle.net/bestiole/dnmg571q/

je crois que j'en suis assez content, mais je prends quand même les éventuelles autres ressources.

jojolaglaise · 2016-11-11 21:46:46

Salut!
Tu connais http://www.mathcurve.com/ ?
Il y a plein de courbes et de bidules mathématiques. Ça pourra t'aider à programmer un objet qui suit le trajet d'une courbes; je pense les "lemniscates" te conviendront, et notamment celle de Gerono.

http://www.mathcurve.com/courbes2d/gerono/gerono.shtml
On pourrait interpréter ces formules mathématiques par exemple de cette façon:

float x,y;
float a, t;

void setup(){
  size(400, 400);
  a = 100;
}

void draw(){
  background(0);
  t+=0.1;
  x = a * sin(t);
  y = a * sin(t) * cos(t);
  ellipse(x + width/2, y + height/2, 15, 15);
}

Je me réfère ici aux fonctions "paramétriques cartésiennes".
La variable 't' est le temps, sa valeur augmente un tout petit peu à chaque itération.

Pour ce qui est des mouvements, le livre de Shiffman est une sacrée référence…
http://natureofcode.com/

kro · 2016-11-15 08:36:14

c'est d'une simplicité extrême et ça marche au top !

réécrit en js ça donne ça : https://jsfiddle.net/bestiole/9o3sj9ar/

merci infiniment jojolaglaise, c'est exactement ce que je cherchais !

kro · 2016-11-17 04:12:24

pour info c'était pour ce site : http://www.lemonstre.ch/

jojolaglaise · 2016-11-17 10:36:50

Héhé! ça le fait !!! :-)

sakramh · 2016-11-17 12:20:36

suis étonné qu'un "rôdeur" de ce forum n'est pas écrit : si monstrueux .

Dernière modification par sakramh (2016-11-17 12:21:39)

Annonce

#1 2016-11-11 03:14:57 fonction de creation de courbe

fonction de creation de courbe

#2 2016-11-11 04:18:20 Re : fonction de creation de courbe

Re: fonction de creation de courbe

#3 2016-11-11 21:46:46 Re : fonction de creation de courbe

Re: fonction de creation de courbe

#4 2016-11-15 08:36:14 Re : fonction de creation de courbe

Re: fonction de creation de courbe

#5 2016-11-17 04:12:24 Re : fonction de creation de courbe

Re: fonction de creation de courbe

#6 2016-11-17 10:36:50 Re : fonction de creation de courbe

Re: fonction de creation de courbe

#7 2016-11-17 12:20:36 Re : fonction de creation de courbe

Re: fonction de creation de courbe

Pied de page des forums