Discussion :

[-RMX-]

Bonjour à tous,

Je voudrais créer une spirale hypnotique dans un canvas, pour le moment j'ai une spirale et elle tourne, c'est déjà ça.

Seulement j'aimerais que la largeur de la ligne parte de petit et s'agrandisse peu à peu (context.lineWidth de 0 à 72).
Le problème c'est que dans un lineTo, donc au moment de la création de la ligne je n'ai pas l'impression que je puisse faire varier la taille.

Le code de ma spirale sans le mouvement:

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
context.beginPath();
          context.moveTo(winWidth/2,winHeight/2);
 
          var x,y;
          var a = 15;
          var b = 15;
 
          for (i = 0; i < 720; i++) {
              angle = 0.1 * i;
              x = (winWidth/2) + (a + b * angle) * Math.cos(angle);
              y = (winHeight/2) + (a + b * angle) * Math.sin(angle);
 
              context.lineTo(x,y);//Trace
          }
 
          context.stroke(); //Affiche

Je débute et aimerais beaucoup avoir vos lumières.
Merci par avance.

[p3ga5e]

Salut

context.lineWidth est un render state global lors de la raterisation de tes paths déclenché par la fonction context.stroke();

Tu dois rendre segment par segment :

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
var x1 = winWidth/2,
	y1 = winHeight/2;
var a = 15;
var b = 15;
for (var i = 0; i < 720; i++) 
{
	var  angle = 0.1 * i;
	var x2 = (winWidth/2) + (a + b * angle) * Math.cos(angle);
	var y2 = (winHeight/2) + (a + b * angle) * Math.sin(angle);
 
	context.lineWidth = (i+1)/10;
	context.beginPath();
	context.moveTo(x1,y1);
	context.lineTo(x2,y2);
	context.stroke(); 
	x1 = x2;
	y1 = y2;
 
}

[-RMX-]

Ah super merci beaucoup !
L’embêtant c'est que segment par segment, ça créé des barres blanche entre les segments.

D'autre part, comment améliorer la fluidité de tout ça ?

Voir ici:
http://perso.numericable.fr/rchanaud...b/rotation.php

[NoSmoking]

Bonjour,
essaies d'ajouter un context.lineCap = 'round';

[SpaceFrog]

sinon les faire jointifs par l'extérieur, et chevauchants par l'interieur

[-RMX-]

Superbe !! Le lineCap = 'round' a marché direct ! C'était exactement ça !
http://perso.numericable.fr/rchanaud...b/rotation.php

Un énorme merci !

J'aimerais maintenant ajouter un flou comme ici:
http://www.steakhachai.fr/blog/wp-co...012/03/Net.jpg

Un genre de flou gaussien qui part du bord et s'estompe au centre.

C'est possible ? Avez vous des pistes ?
Sinon avez vous d'autres idées d'effets sympathiques ?

[p3ga5e]

Ce genre d’effet s’obtient par l’utilisation de masque de convolution. Il te faut travailler sur l’image raster et abandonner l’espace vectoriel. Avec le Context 2D de canvas tu peut manipuler les pixels par la fonction context.createImageData()

Toutefois je te déconseille cette méthode pour des raisons de performance. Si la programmation graphique et le traitement de signal t’intéresse, je te conseil de te tourner vers les techniques programmations parallèle et de l’accélération matériel. Cela consiste à écrire des microprogrammes (PixelShader) évaluant la couleur du pixel et s’exécutant, de manière parallèle, sur le GPU.
Tu peux bénéficier de cette méthode, sur les navigateurs web actuel, par 2 technos différentes :

• Les shaders de CSS 3
• Le context WebGL de la balise canvas.

Dans les deux cas tu devras écrire le PixelShader en GLSL

J’avais débuté, le développement d’une extension HTML 5 permettant de manière simple à écrire un PixelShader pour maitriser la zone de rendu d’un canvas. C’est loin d’être finalisé, mais voici quelques exemples de la version en cours de développement :

• Shader-Colors
• Shader-CellShading
• Shader-Vidéos

Je n’ai pas encore écris de documentation sur l’utilisation de mon extension, si tu souhaites l’utiliser n’hésite pas à me poser des questions .