Discussion :

[karottes]

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 !

[NoSmoking]

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

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

[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

[NoSmoking]

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

c'est déjà compliqué au départ

[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/

[karottes]

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

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.

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

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.

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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.