loadImage

julienes · 2014-05-10 13:59:07

Bonjour!

J'ai un problème depuis quelques jours que je n'arrive pas à résoudre. J'ai un sketch en processing, ayant deux autres sketchs liés en tant que classe. J'ai donc voulu importer mon processing dans une page web grâce au canvas HTML5. Le problème est que mon sketch ne s'affiche pas. Je ne sais pas si c'est parceque dans celui-ci j'importe une image qui représente tout le zone de mon sketch. Voilà le setup et le draw de mon sketch.

void setup() {
  qr = loadImage("qrcode.png");
  smooth();
  size(qr.width, qr.height);
  minim= new Minim(this);
  user = new Balle(70, 430);
  textSize(40);
  background(qr);
}
void draw() {
  background(qr);
  user.move();
  user.display();
  user.loose();
  user.intersect();
}

En ce qui concerne mon html voilà le code:

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no">
<link rel="shortcut icon" type="image/x-icon" href="#" />
<link rel="icon" type="image/png" href="#" />
<link href="niveau1_style.css" type="text/css" rel="stylesheet" media="screen">
<link href="reset.css" type="text/css" rel="stylesheet" media="screen">
<link href="TESLA/stylesheet.css" type="text/css" rel="stylesheet" media="screen">
<link href="DIN/stylesheet.css" type="text/css" rel="stylesheet" media="screen">
<script src="processing.min.js"></script>
<title>QR Maze | Niveau 1</title>

</head>

<body>
	<div id="bord1"></div>
	<div id="bord4"></div>
	<div id="conteneur">
		<canvas id="monCanvas" data-processing-sources="plateau/plateau.pde plateau/balle.pde plateau/stopWatch.pde"></canvas>
	</div>
</body>
</html>

Juste un carré gris s'affiche ( pour firefox, dans chrome rien ne s'affiche).

Voilà, si vous avez une solution.

Merci d'avance!

julienes · 2014-05-10 14:13:33

Je viens de regarder dans la console et j'ai bien un problème de chargement d'image.

citation :
uncaught exception: Error using image in background(): PImage not loaded.
"Processing.js: Unable to execute pjs sketch." processing.min.js:18

Mushussu · 2014-05-10 14:34:19

Bonjour, connais-tu le mode javascript dans Processing ?
Il te permet de développer des sketch tout en étant sûr qu'il soit compatible et fonctionnel en Processingjs

Pour activer ce mode, si tu as la dernière version de Processing, c'est un petit menu déroulant en haut à droite de l'IDE. Par défaut il est indiqué java.

julienes · 2014-05-10 14:50:47

Oui bien sur, et c'est ce que j'ai commencé par faire, mais j'ai toujour ce problème, rien ne s'affiche, mis a part un petit rectangle gris. Et dans la console toujours le même problème de

citation :
uncaught exception: Error using image in background(): PImage not loaded.

jyg · 2014-05-10 14:59:51

bonjour,
pour le chargement des images en javascript, tu dois intégrer une "prédirective" processingjs (je crois que c'est comme ça que ça s'appelle) au début de ton sketch pour que les images soient préchargées. c'est une instruction ignorée par processing mais prise en compte par processingjs.

Dans ton cas, essaie d'ajouter la ligne suivante au début (en incluant bien les marques de commentaire)

/* @pjs preload="qrcode.png"; */

Tu dois faire ça pour chaque image utilisée dans le sketch.
regarde notamment http://processingjs.org/articles/p5Quic … quickstart

[EDIT] Et si tu utilises le mode javascript de processing, ce programme crée un dossier web-export dans lequel tu dois bien recopier tes ressources (images et autres)

Dernière modification par jyg (2014-05-10 15:14:26)

julienes · 2014-05-10 15:38:13

Merci jyg!

Oui c'est bien ce commentaire qu'il faut rajouter pour que ça fonctionne.

cependant j'ai toujours un problème. L'image s'affiche bien, il s'agit d'un QR code utilisé comme plateforme de labyrinthe. Je possède une balle que je peux déplacer avec les touches du clavier, et lorsque cette balle touche une paroi noir, on perd et on recommence. Cette interaction de colision fonctionne bien sur mon processing, mais lors de l'export, cette interaction ne fonctionne plus.

Voilà le lien pour voir à quoi cela ressemble.
http://julienespagnon.com/kvcekbs/web-export/index.html

Est ce que quelqu'un aurai une idée de pourquoi cela ne fonctionne plus?

jyg · 2014-05-10 15:52:21

processingjs n'aime pas les mélange nombres entiers (int) / nombres décimaux (float)

Dans ton code, essaie de remplacer les lignes du genre

color haut = qr.get(x,y-R/2);

par

color haut = qr.get(x,y-(int)(R/2));

.

Mais c'est peut-être pas du tout ça...

julienes · 2014-05-10 16:07:52

Encore merci jyg!

Le problème venait bien de là.
Je vais lire plus attentivement le lien que tu m'as donné, car effectivement il y al'air d'avoir certaines incompatibilités entre le java du sketch et processing.js.

Annonce

#1 2014-05-10 13:59:07 loadImage

loadImage

#2 2014-05-10 14:13:33 Re : loadImage

Re: loadImage

citation :

#3 2014-05-10 14:34:19 Re : loadImage

Re: loadImage

#4 2014-05-10 14:50:47 Re : loadImage

Re: loadImage

citation :

#5 2014-05-10 14:59:51 Re : loadImage

Re: loadImage

#6 2014-05-10 15:38:13 Re : loadImage

Re: loadImage

#7 2014-05-10 15:52:21 Re : loadImage

Re: loadImage

#8 2014-05-10 16:07:52 Re : loadImage

Re: loadImage

Pied de page des forums