Annonce

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

1er mars 2019 : CODELAB est de retour!

#1 2019-03-02 17:07:28 P5 WebEditor : introduire une image

Pilou
membre
Date d'inscription: 2014-07-15
Messages: 83

P5 WebEditor : introduire une image



Comment bricoler une introduction d'image à répétition dans la boucle Draw?

Pour l'instant j'ai cela en version "normale" avec image "préloadée" hors boucle Draw...
https://editor.p5js.org/Pilou/sketches/PE_HwNoXH

On devrait avoir ce type de résultat quand on lance
https://discourse-cdn-sjc2.com/standard10/uploads/processingfoundation1/original/2X/e/ecea7498543039818b455ab42d5c5113579c7532.jpeg

Je voudrais introduire à l'écran par Drag & Drop une nouvelle image png à fond transparent
j'ai cela, mais quand je lance le Sketch il y a des erreurs...smile
L'image arrive bien mais...
https://editor.p5js.org/Pilou/sketches/0Q6enksIF

Dernière modification par Pilou (2019-03-03 12:01:55)


Est beau ce qui plaît sans concept
Petit site

Hors ligne

 

#2 2019-03-14 11:44:49 Re : P5 WebEditor : introduire une image

Makio135
membre
Lieu: Lyon
Date d'inscription: 2010-11-11
Messages: 90
Site web

Re: P5 WebEditor : introduire une image



Hello,
Tu utilises ton image avant qu'elle ne soit chargée, dans ta boucle draw. Essaie avec ça:

var myImage, bg, hover;

function setup() {
  createCanvas(1024, 512)
    .drop(gotFile)
    .dragOver(highlight)
    .dragLeave(redraw);

  textAlign(CENTER).textSize(32).textStyle(BOLD).noLoop();
  colorMode(RGB).imageMode(CORNER);
  fill('yellow').noStroke();

  bg = color(0o200);
  hover = color('red');
	
  imageMode(CENTER);
}

function draw() {
  bg = color(0o200);
  background(bg);

  if (myImage && myImage.width > 0) {
    //image(myImage,0,0,width,height);
    for(let i=0; i< 100; i ++) {
			push();
      translate(random(width), random(height));
      rotate( random( 2 * TWO_PI) );
      scale(random(0.1, 1));
      image(myImage, 0, 0);
      pop();
		}
  } else text('Drag an image file onto the canvas.', width / 2, height / 2);
}

function gotFile(f) {
  if (f.type === 'image') {
    myImage = loadImage(f.data, redraw);
  }
  else{
  	print(`"${f.name}" isn't an image file!`);
  }
}

function highlight(evt) {
  this.background(hover);
  evt.preventDefault();
}

par contre, il y a encore

Hors ligne

 

#3 2019-03-14 17:47:53 Re : P5 WebEditor : introduire une image

Pilou
membre
Date d'inscription: 2014-07-15
Messages: 83

Re: P5 WebEditor : introduire une image



Merci, je regarde cela dès ce soir!
Ayant connu les cartes perforées je suis plus que rouillé avec toutes ces nouvelles technologies! smile

Pour la peine un petit bijou de programmation avec lequel on fait des images très gratifiantes en 2 minutes!
http://moiscript.weebly.com/magicavoxel.html ma page pense bête
https://schmoll8.wixsite.com/magicavox ma petite galerie


Est beau ce qui plaît sans concept
Petit site

Hors ligne

 

#4 2019-03-15 01:23:18 Re : P5 WebEditor : introduire une image

Pilou
membre
Date d'inscription: 2014-07-15
Messages: 83

Re: P5 WebEditor : introduire une image



Bravo! ça marche nickel chrome!cool
votre message semble tronqué "par contre il y a encore...

Je vais voir si j'arrive à brancher mon petit programme dessus! smile
là c'est encore le votre (générateur rotatif de vide) avec une image produite par mon vieux prog!wink
https://i.postimg.cc/SNfT6cWf/Makio01.jpg

Dernière modification par Pilou (2019-03-15 02:38:08)


Est beau ce qui plaît sans concept
Petit site

Hors ligne

 

#5 2019-03-15 02:18:27 Re : P5 WebEditor : introduire une image

Pilou
membre
Date d'inscription: 2014-07-15
Messages: 83

Re: P5 WebEditor : introduire une image



ça marche avec l'intégration de mon petit bidule ! big_smile

https://editor.p5js.org/Pilou/sketches/y1GHaBqyT

ma première image test! Parfait!
à part un truc curieux : quand je sauvegarde l'image par clic droit "enregistrer sous" ou "copier l'image"
elle fait 2048 * 1024 alors qu'elle devrait faire 1024 *512 !

ici je l'ai reduite à sa taille voulue!
https://i.postimg.cc/Z5SkZrSG/fleurs-makio01.jpg

Dernière modification par Pilou (2019-03-15 11:53:25)


Est beau ce qui plaît sans concept
Petit site

Hors ligne

 

#6 2019-03-15 11:52:30 Re : P5 WebEditor : introduire une image

Pilou
membre
Date d'inscription: 2014-07-15
Messages: 83

Re: P5 WebEditor : introduire une image



Voilà vous passez sur tous les forums 3D du monde! wink

quelques images...grâce à vous!

https://i.postimg.cc/Bn6zJNzw/kop.jpg

https://i.postimg.cc/CK0xLSdm/moi-101.jpg

https://i.postimg.cc/CxKWQjr1/magica0100.jpg

https://i.postimg.cc/26FXsq5F/mag4.jpg

Dernière modification par Pilou (2019-03-15 20:00:13)


Est beau ce qui plaît sans concept
Petit site

Hors ligne

 

fil rss de cette discussion : rss

Pied de page des forums

Powered by FluxBB

codelab, graphisme & code : emoc / 2008-2019