Annonce

>>> Bienvenue sur codelab! >>> Première visite ? >>> quelques mots sur codelab //// une carte des membres//// (apéros) codelab

17 mai 2019 : accident de la base de données : plus d'infos

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

julienes
membre
Date d'inscription: 2013-05-02
Messages: 11

loadImage



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!

Hors ligne

 

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

julienes
membre
Date d'inscription: 2013-05-02
Messages: 11

Re: loadImage



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

Hors ligne

 

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

Mushussu
membre
Lieu: Orléans
Date d'inscription: 2012-05-24
Messages: 798

Re: loadImage



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.

Hors ligne

 

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

julienes
membre
Date d'inscription: 2013-05-02
Messages: 11

Re: loadImage



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.

Hors ligne

 

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

jyg
membre
Lieu: montreuil
Date d'inscription: 2008-11-28
Messages: 136
Site web

Re: loadImage



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)


J.Y.G.

Hors ligne

 

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

julienes
membre
Date d'inscription: 2013-05-02
Messages: 11

Re: loadImage



Merci jyg!

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

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?

Hors ligne

 

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

jyg
membre
Lieu: montreuil
Date d'inscription: 2008-11-28
Messages: 136
Site web

Re: loadImage



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


J.Y.G.

Hors ligne

 

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

julienes
membre
Date d'inscription: 2013-05-02
Messages: 11

Re: loadImage



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.

Hors ligne

 

fil rss de cette discussion : rss

Pied de page des forums

Powered by FluxBB

codelab, graphisme & code : emoc / 2008-2020