Web Worker & Repaint canvas

Version imprimable

quand je load ma page web, j'ai une function qui va faire un dégradé d'un ciel noir et afficher 6 étoiles au hasard dans le ciel dans un canvas j'ai aussi une image ovni dans mon canvas. Après avoir affiché mon ciel et mes étoiles, je pars un web worker qui va uniquement calculer au hasard des nouvelles positions pour l'ovni et je renvoie ces position dans ma main page. mon problème est que mon ovni ne s'affiche juste pas, je ne sais pas si c'Est le web worker le problème ou le fait que j'essaye de le re dessiner plusieurs fois ...

voici mon web worker :

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
26
27
28
29
30
31
32
33
var xx = 30;
var yy = 30;
var MAXLARGEUR = 250;
var MAXHAUTEUR = 350;
 
function move()
{
	while(true)
	{
		setTimeout(move,500);
		if(Math.random()* 1 > 0)
		{
			if(xx + 5 < MAXLARGEUR)
				xx = xx + 5;
		}
		else
		{
			if(xx - 5 > 0)
				xx = xx - 5;
		}
		if(Math.random()* 1 > 0)
		{
			if(yy + 5 < MAXHAUTEUR)
				yy = yy + 5;
		}
		else
		{
			if(yy - 5 > 0)
				yy = yy - 5;
		}
		postMessage(xx+yy);
	}
}

voici ce que je fais avant d'appeler mon Web Worker.

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
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
<body onload="Init()">
	<canvas id="MonCanVas" width="250" height="350"></canvas>
	<script>
 
		var xx = 30;
		var yy = 30;
		var i = 0;
		var j = 0;
		var h = 115;
		var l = 250;
		var y = 0;
		var x = 0;
		var img = new Image();
		img.src = "images/ovni.png";
 
		var c = document.getElementById("MonCanVas");
		var ctx = c.getContext("2d");
		var grd = ctx.createLinearGradient(0,0,0,350);
		var w;
 
		grd.addColorStop(0,"black");
		grd.addColorStop(1,"royalblue");
 
		ctx.fillStyle=grd;
		ctx.fillRect(0,0,250,350);
		ctx.fillStyle="#FFFFFF";
 
		function Init()
		{
			while(i < 3)
			{
				while(j < 2)
				{
					y = Math.random()* (h - ( h - 114) + 1) + (h - 114);
					x = Math.random()* (250 - 1 + 1)+1;
					ctx.beginPath();
					ctx.arc(x,y,Math.random()* (3 - 1 + 1)+1,0,2*Math.PI);
					ctx.fill();
					j = j + 1;
				}
				j = 0;
				h = h + 115;
				i = i + 1;
			}
			drawImage(img,xx,yy);
			StartWorker();
		}
 
		function StartWorker()
		{
			if(window.Worker)
			{
				var message;
				var worker=new Worker("animate.js");
				worker.onmessage=function(event)
				{
					message = event.data;
					drawImage(img,message.substr(1,2),message.substr(3,4));
				}
			}
			else
			{
				alert("Désolé votre navigateur "+ "ne supporte pas les workers ! ?");
			}
		}
 
		function stopWorker()
		{ 
			w.terminate();
		}
 
	</script>
</body>

Bonsoir

Beaucoup d'erreurs, beaucoup de choses bizarres !

Voici une version corrigée des codes qui fonctionne, mais il y a encore du travail sur le tracé des images.

Fichier animate.js :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
onmessage = function( event ){
    var xx = event.data.XX,
        yy = event.data.YY,
        MAXLARGEUR = 250,
        MAXHAUTEUR = 350;
 
    if ( xx + 5 < MAXLARGEUR ){
        xx += 5;
    } else {
        xx = 30;
    }
 
    if ( yy + 5 < MAXHAUTEUR ){
        yy += 5;
    } else {
        yy = 30;
    }
 
    postMessage({
        "XX" : xx,
        "YY" : yy
    });
}

Code principal à remettre dans init() :

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
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
var xx = 30,
	yy = 30,
	i = 0,
	j = 0,
	h = 115,
	l = 250,
	y = 0,
	x = 0,
	img = new Image(),
	c = document.getElementById("MonCanVas"),
	ctx = c.getContext("2d"),
	grd = ctx.createLinearGradient(0,0,0,350),
	w,
	worker = new Worker("animate.js"),
	stopWorker = 10;
 
img.src = "ovni.png";
 
grd.addColorStop(0,"black");
grd.addColorStop(1,"royalblue");
 
ctx.fillStyle=grd;
ctx.fillRect(0,0,250,350);
ctx.fillStyle="#FFFFFF";
 
while(i < 3)
{
	while(j < 2)
	{
		y = Math.random()* (h - ( h - 114) + 1) + (h - 114);
		x = Math.random()* (250 - 1 + 1)+1;
		ctx.beginPath();
		ctx.arc(x,y,Math.random()* (3 - 1 + 1)+1,0,2*Math.PI);
		ctx.fill();
		j = j + 1;
	}
	j = 0;
	h = h + 115;
	i = i + 1;
}
 
ctx.drawImage( img, xx, yy );
 
var objInterval = setInterval( function(){
	stopWorker--;
 
	worker.postMessage({
		"XX" : xx,
		"YY" : yy
	});
 
	if ( stopWorker < 1 ){
		clearInterval( objInterval );
	}
}, 500 );
 
worker.onmessage=function(event){
	xx = event.data.XX;
	yy = event.data.XX;
 
	console.log( stopWorker, xx, yy );
 
	ctx.drawImage( img, xx, yy );
}

16/12/2012, 01h52
lolaalol
Oui je commence tout juste le html5, je préfèrais faire des java applet mais bon cela n'existe plus dans html5...

Je ne comprend pas pourquoi tu as mis un onmessage event dans le animate.js ?
Code:

1 2 3 onmessage = function( event ){ var xx = event.data.XX, yy = event.data.YY,
16/12/2012, 10h39
danielhagnoul

Bonjour

Le code principal et le worker communiquent en échangeant des messages. Le worker attend un message du code principal pour se mettre au travail. La valeur des paramètres xx et yy, est modifiée dans le worker et utilisée dans le code principal.

Un worker permet d'exécuter des calculs prenant beaucoup de temps sans bloquer l'utilisateur ou pire le navigateur. L'exécution du worker prend aussi du temps, je crois qu'il ne se justifie que pour des calculs prenant plus de 500 millisecondes. Ce n'est pas le cas ici.

Je vous recommande la documentation de Mozilla : Using web workers
17/12/2012, 16h13
lolaalol

J'ai essayé tes modifications, le code ne plante pas mais mon ovni ne s'affiche pas. On dirait que je le worker ne part pas, j'ai rajouté un alert dans ta function
worker.onmessage=function(event) dans le main code et je ne reçois aucun message. Je fais mes test sous FireFox

Bonjour,
ne serais ce pas simplement parce que ton "ovni" n'est pas loader?

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
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
var img = new Image();
img.src = "ovni.png";
 
// action une fois image chargée
img.onload=function(){
  grd.addColorStop(0,"black");
  grd.addColorStop(1,"royalblue");
 
  ctx.fillStyle=grd;
  ctx.fillRect(0,0,250,350);
  ctx.fillStyle="#FFFFFF";
 
  while(i < 3)
  {
  	while(j < 2)
  	{
  		y = Math.random()* (h - ( h - 114) + 1) + (h - 114);
  		x = Math.random()* (250 - 1 + 1)+1;
  		ctx.beginPath();
  		ctx.arc(x,y,Math.random()* (3 - 1 + 1)+1,0,2*Math.PI);
  		ctx.fill();
  		j = j + 1;
  	}
  	j = 0;
  	h = h + 115;
  	i = i + 1;
  }
 
  ctx.drawImage( img, xx, yy );
 
  var objInterval = setInterval( function(){
  	stopWorker--;
  	worker.postMessage({
  		"XX" : xx,
  		"YY" : yy
  	});
  	if ( stopWorker < 1 ){
  		clearInterval( objInterval );
  	}
  }, 500 );
};

17/12/2012, 19h37
lolaalol

Encore pire que ça, mon image était dans le mauvais répertoire lol.
21/12/2012, 20h39
lolaalol

Es-qu'il y a une fonction en html5 comme repaint dans les java applet ? parce que là mon ovni se redessine plein de fois à chaque fois que les coordonnées changent.
21/12/2012, 21h38
SylvainPV

Il faut utiliser ctx.clearRect

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
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
var xx = 30,
	yy = 30,
	img = new Image(),
	ctx = document.getElementById("MonCanVas").getContext("2d"),
	grd = ctx.createLinearGradient(0,0,0,350),
	worker = new Worker("animate.js"),
	stopWorker = 30;
 
img.src = "images/arrow-down_32.gif";
 
grd.addColorStop(0,"black");
grd.addColorStop(1,"royalblue");
 
function drawBackground(){
	var	h = 115,
		l = 250,
		y = 0,
		x = 0;
 
	ctx.clearRect( 0, 0, 250, 350 );
	ctx.fillStyle=grd;
	ctx.fillRect(0,0,250,350);
	ctx.fillStyle="#FFFFFF";
 
	for ( var i = 0; i < 30; i++ ){
		for (var j = 0; j < 20; j++ ){
			y = Math.random()* (h - ( h - 114) + 1) + (h - 114);
			x = Math.random()* (250 - 1 + 1)+1;
			ctx.beginPath();
			ctx.arc(x,y,Math.random()* (3 - 1 + 1)+1,0,2*Math.PI);
			ctx.fill();
			j = j + 1;
		}
		j = 0;
		h = h + 115;
		i = i + 1;
	}
}
 
drawBackground();
ctx.drawImage( img, xx, yy );
 
var objInterval = setInterval( function(){
	stopWorker--;
 
	worker.postMessage({
		"XX" : xx,
		"YY" : yy
	});
 
	if ( stopWorker < 1 ){
		clearInterval( objInterval );
	}
}, 500 );
 
worker.onmessage=function(event){
	xx = event.data.XX;
	yy = event.data.XX;
 
	drawBackground();
	ctx.drawImage( img, xx, yy );
}

Il n'est peut être pas nécessaire de "redrawer" le fond à chaque fois mais on peut le sauvegarder, une fois le backGround réalisé...
Code:

1 2 3 // récupération du fond var dataImgFond = oCanvas.toDataURL('image/jpg'); imgFond.src = dataImgFond;
puis dans la fonction de déplacement
Code:

1 2 3 4 // restore le fond ctx.drawImage( imgFond, 0, 0); // nouvelle position image ctx.drawImage( img, xx, yy );

22/12/2012, 09h44
danielhagnoul

Citation:

Envoyé par NoSmoking

Il n'est peut être pas nécessaire de "redrawer" le fond à chaque fois mais on peut le sauvegarder, une fois le backGround réalisé...

Bien entendu ! mais j'adore l'effet graphique.

On peut aussi se servir d'une image PNG. Il suffit de n'afficher que le fond et d'en faire une image PNG d'un simple clic droit avec Firefox.

J'utilise cette technique dans ma nouvelle version du plugin dvjhDrop, voir le lien dans ma signature.
22/12/2012, 18h02
NoSmoking

Certes les ovnis vont vite mais de là à changer le fond céleste à chaque mouvement, on risque d'avoir le tournis :mouarf:.

J'ai fais lui avec le background qui change tout le temps, sa fait bizarre mais on va dire que mon ovni bouge très vite. Il y a juste ma function qui change les coordonnées de mon ovni qui est null, mon ovni reste dans le coin supérieur gauche et il bouge seulement en diagonal.

C'est ma function :

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
26
27
28
29
30
31
32
33
34
35
36
37
38
39
onmessage = function( event )
{
    var xx = event.data.XX,
        yy = event.data.YY,
        MAXLARGEUR = 250,
        MAXHAUTEUR = 350;
	var result;
 
	result = Math.floor(Math.random() * (4 - 1 + 1)) + 1;
 
	switch(result)
	{
		case 1:
			if(xx + 5 < MAXLARGEUR)
					xx = xx + 5;
			break;
 
		case 2:
			if(xx - 5 > 0)
				xx = xx - 5;
			break;
 
		case 3:
			if(yy + 5 < MAXHAUTEUR)
				yy = yy + 5;
			break;
 
		case 4:
			if(yy - 5 > 0)
				yy = yy - 5;
			break;
	}
 
    postMessage(
	{
        "XX" : xx,
        "YY" : yy
    });
}

26/12/2012, 19h19
NoSmoking

Citation:

mon ovni reste dans le coin supérieur gauche et il bouge seulement en diagonal.

il te faut donc reprendre les maths et les équations qui vont bien!

Au sujet des maths... :dehors: