<canvas> Animation d'une algue

Salut tout l'monde,
depuis quelques mois je m'amuse à faire des animations relativement simples en JS avec les canvas de HTML5. Et puis bon, au bout d'un moment j'ai envie de progresser un peu : )
Je vous explique; j'ai un aquarium tout en canvas, et j'aimerais y mettre des algues sur son sol. J'en ai déjà, qui sont en fait des courbes de Bézier dont les points de contrôle bougent. Seulement ça ne me donne qu'un piètre résultat en m'affichant de bêtes trucs verts tout moches, c'est bof bof. Je me suis donc demandé si il était (relativement facilement) faisable d'animer une image de manière à ce qu'elle ondule (comme le ferait une algue en fait) ?
Merci d'avance pour vos réponses et @ bientôt j'espère !

Bonjour,
montre nous peut être un petit bout de code pour que l'on puisse voir éventuellement ce qui ne va pas.

Citation:

---

si il était (relativement facilement) faisable d'animer une image de manière à ce qu'elle ondule

---

il suffit de découper l'image en tranches et d'appliquer un décalage à chaque tranche. Le réalisme sera donné par la formule utilisée pour les décalages, là on en dans le domaine des maths...

Si tu cherches le réalisme, ça se complique vite. Le mouvement ou l'ondulation d'une algue n'est pas perçu uniquement par la déformation, mais aussi par la variation de luminosité, de contraste, les ombres, la texture... Les gens se cassent les dents depuis pas mal de temps pour représenter sur ordinateur la végétation, terrestre ou aquatique. Le plus simple serait de faire appel à un graphiste et utiliser des spritesheets. Sauf si tu veux que tes algues ondulent selon les mouvements des poissons autour :P

Citation:

---

Si tu cherches le réalisme, ça se complique vite.

---

:nono: c'est déjà compliqué au départ :mrgreen:

Bonjour

J'ai regardé ce que l'on pouvait trouver sur le sujet avec Google.

Je ne trouve rien sur l'ondulation des algues (algae), mais j'ai trouvé quelques liens intéressants avec les mots : js, canvas, ripple, wave.

1. http://29a.ch/2010/10/23/html5-water-ripples-demo : cliquer sur l'image pour voir la démonstration, promener le pointeur de la souris sur l'eau.
   
2. http://www.lab4games.net/zz85/blog/2...script-jquery/
   
3. http://alligator.github.io/lake.js/
   
4. http://www.johnpezzetti.com/2011/01/...mensional-wave
   
5. http://jsfiddle.net/esteewhy/5Ht3b/6/

Super ! Je commençais à désespérer pour cette histoire d'algues, mais voir vos réponses me redonne la pêche !! Merci à vous : )

Citation:

---

Envoyé par NoSmoking

Bonjour,
montre nous peut être un petit bout de code pour que l'on puisse voir éventuellement ce qui ne va pas.

il suffit de découper l'image en tranches et d'appliquer un décalage à chaque tranche. Le réalisme sera donné par la formule utilisée pour les décalages, là on en dans le domaine des maths...

---

Je te file le code de l'animation des algues à la fin de mon post ; )

Cette idée de découper l'algue en plusieurs segment me fait peur à vrai dire. Je ne veux pas d'un résultat comme celui de quelques jeux vidéos type SHMUP, avec des tentacules qui sont en fait des boules assemblées. Je pense que ce n'est pas la meilleure solution pour une algue. Néanmoins cette idée reste dans un coin de ma tête.

Citation:

---

Envoyé par SylvainPV

Si tu cherches le réalisme, ça se complique vite. Le mouvement ou l'ondulation d'une algue n'est pas perçu uniquement par la déformation, mais aussi par la variation de luminosité, de contraste, les ombres, la texture... Les gens se cassent les dents depuis pas mal de temps pour représenter sur ordinateur la végétation, terrestre ou aquatique. Le plus simple serait de faire appel à un graphiste et utiliser des spritesheets. Sauf si tu veux que tes algues ondulent selon les mouvements des poissons autour :P

---

Quand je dis "réalisme" je ne m'attend pas à ce que vous me donniez une lib qui me permette d'avoir un rendu à la CryEngine3 hein, seulement là ça donne ça : http://karottes.legtux.org/me/ (Ne surtout pas faire attention au reste du site qui pour le moment, sur ce serveur, est encore en phase de développement. De plus, l'animation des algues a été améliorée depuis ; )
J'aimerai qu'on puisse remarquer que ce sont des algues et pas qu'on me dise "c'est un bug les machins verts en bas ?".
Ombre, contraste et luminosité ne sont pas dans mes projets. Comme vous pouvez le voir, j'adopte un style très simpliste.

Citation:

---

Envoyé par danielhagnoul

Bonjour

J'ai regardé ce que l'on pouvait trouver sur le sujet avec Google.

Je ne trouve rien sur l'ondulation des algues (algae), mais j'ai trouvé quelques liens intéressants avec les mots : js, canvas, ripple, wave.

1. http://29a.ch/2010/10/23/html5-water-ripples-demo : cliquer sur l'image pour voir la démonstration, promener le pointeur de la souris sur l'eau.
   
2. http://www.lab4games.net/zz85/blog/2...script-jquery/
   
3. http://alligator.github.io/lake.js/
   
4. http://www.johnpezzetti.com/2011/01/...mensional-wave
   
5. http://jsfiddle.net/esteewhy/5Ht3b/6/

---

Merci pour les fruits de tes recherches, je n'ai effectivement pas cherché dans ce sens. Ceci dit, il me semble qu'en anglais on utilise plus "seaweed" que "algae", m'enfin je suis pas bilingue, loin de là ; )
Tous tes liens traites la déformation de l'eau, mais ce n'est pas exactement ce que je recherche. Toutefois je garde ça en favoris, certains script sont très bien réalisés !

Voici donc le code demandé par NoSmoking :

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25

function drawSeaweeds(t, pos){ for(var i = seaweeds.length - 1; i >= 0; i--) { var startingX = 42 + (seaweeds[i].x/1.2), startingY = H, firstX = 42 + seaweeds[i].x + (10 * Math.sin((t*15) * 5 * Math.PI / 2000 + seaweeds[i].x)), firstY = H + seaweeds[i].x, secondX = 40 + seaweeds[i].x + ((10 - seaweeds[i].x) * Math.sin((t*15) * 5 * Math.PI / 3000 + seaweeds[i].x)), secondY = H-50, endingX = 50 + seaweeds[i].x + Math.sin(t/20) * (30 + (seaweeds[i].x / 2) * Math.sin((t*15*2) * 2 * Math.PI / 2000 + seaweeds[i].x)), endingY = H-150 + seaweeds[i].x / 2; cvs.drawBezier({ strokeStyle: "#068C14", strokeWidth: 1, fillStyle: "#017A0D", x1: startingX, y1: startingY, // Start point cx1: startingX, cy1: firstY, // Control point cx2: secondX, cy2: secondY, // Control point x2: endingX, y2: endingY, // Start/end point cx3: secondX + 15, cy3: secondY - 5, // Control point cx4: startingX + 20, cy4: firstY - 5, // Control point x3: startingX + 6, y3: startingY - 3, // Start/end point }); }; }

---

pour :
t = temps
H = hauteur de l'aquarium
seaweeds = tableau d'objets Seaweed

Merci encore à vous de vous pencher sur mon "souci" et @ bientôt !

Edit: j'oublie de préciser que j'utilise jCanvas pour dessiner.

Je suis en train de regarder CAAT et ses démonstrations, voir : http://hyperandroid.github.io/CAAT/d...arden_org.html

Wow, CAAT a l'air vraiment dingue ! Je vais tenter de faire quelque chose avec ça. Merci Daniel !

Je trouve le résultat pas trop mal même si l'amplitude/vitesse serait peut être à revoir.

Un truc qui pourrait supprimer le coté "plat" serait de changer la couleur de tes algues suivant la profondeur de champ.

Tu gagnerais aussi à avoir des algues de différentes hauteurs.

Dernier point concernant les bulles, leur ondulation latérale me paraît excessive et comment se fait-il que les grosses montent plus vites que les petites et inversement. je viens de trouver cela sur developpez :fleche: http://www.developpez.net/forums/d16...on-bulle-leau/.

Le résultats reste n'est quand même pas (sic)Seulement ça ne me donne qu'un piètre résultat en m'affichant de bêtes trucs verts tout moches,.

Je tiens également à remercier daniel pour le partage de ses recherches, il y en a vraiment de pas mal et notamment http://29a.ch/sandbox/2010/water/

Les grosses bulles ne montent pas plus vite que les petites, leur vitesse est totalement aléatoire. Et je t'avoue que je n'ai pas du tout pensé à me baser sur une loi physique réelle pour cette animation, j'ai fais ça ... comme ça !
Mais effectivement, c'est une très bonne idée de se baser sur les travaux de physiciens. Je m'y colle de suite.

Différentes tailles, différentes couleurs. Deux paramètres auxquels je n'avais pas pensé ... ça me rend fou de venir ici poser mes questions alors que je n'ai pas encore creusé assez tout seul !

Merci pour ta réponse NoSmoking ; )

Je vous poste un résultat le plus vite possible pour ceux que ça intéresse.