Web Worker & Repaint canvas

**lolaalol** · 15/12/2012, 18h48

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 :

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

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

**danielhagnoul** · 16/12/2012, 01h03

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 :

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

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
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 );
}

**lolaalol** · 16/12/2012, 01h52

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 :

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

1
2
3
onmessage = function( event ){
    var xx = event.data.XX,
        yy = event.data.YY,

**danielhagnoul** · 16/12/2012, 10h39

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

**lolaalol** · 17/12/2012, 16h13

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

**NoSmoking** · 17/12/2012, 19h16

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

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
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 );
};

**lolaalol** · 17/12/2012, 19h37

Encore pire que ça, mon image était dans le mauvais répertoire lol.

**lolaalol** · 21/12/2012, 20h39

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.

**SylvainPV** · 21/12/2012, 21h38

Il faut utiliser ctx.clearRect

**danielhagnoul** · 22/12/2012, 00h24

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
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 );
}

**NoSmoking** · 22/12/2012, 08h15

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 :

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

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 :

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

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

**danielhagnoul** · 22/12/2012, 09h44

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.

**NoSmoking** · 22/12/2012, 18h02

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

.

**lolaalol** · 23/12/2012, 23h34

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 :

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
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
    });
}

**NoSmoking** · 26/12/2012, 19h19

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

Web Worker & Repaint canvas

JavaScript

Discussions similaires

Partager

Partager