processing : Photomaton processing (page 2/3)

VTT85 · 2016-04-26 06:49:13

Par exemple la transition en damier comme sur PowerPoint ?

Mushussu · 2016-04-26 08:09:13

Un peu comme ceci :

PImage[] tableau;
int index;
PGraphics masque;
int transition;

void setup() {
  size(800, 600);
  tableau = new PImage[3];
  for (int i = 0; i < tableau.length; i++) {
    tableau[i] = loadImage("image" + i  + ".jpg");
  }
  index = 0;
  masque = createGraphics(width, height);
  transition = 0;
}

void draw() {
  // Construction du masque
  int t = 0; 
  int division = 4;
  masque.beginDraw();
  masque.background(0);
  if (transition != 0) {
    t = (millis() - transition) / 2;
    masque.fill(255);
    masque.rectMode(CENTER);
    masque.noStroke();
    for (int i = 0; i < division * division; i++) {
      masque.rect(width / (2 * division) + (i % division) * width / division, height / (2 * division) + (i / division) * height / division, t, t * 3.0 / 4.0);
    }
  }
  masque.endDraw();

  // Affichage des images
  int index2;
  if (index == tableau.length - 1) {
    index2 = 0;
  } else {
    index2 = index + 1;
  }
  image(tableau[index], 0, 0);
  tableau[index2].mask(masque);
  image(tableau[index2], 0, 0);

  // Fin du processus de transition
  if (t > width / division) {
    transition = 0;
    if (index == tableau.length - 1) {
      index = 0;
    } else {
      index++;
    }
  }
}

void keyPressed() {
  transition = millis();
}

Le but est de créer une image en noir et blanc qui servira de masque pour les images. Je la créer avec un PGraphics que j'applique ensuite.

VTT85 · 2016-04-26 22:08:34

J'ai donc intégrer ce code à mon programme restant mais le programme ne fonctionne pas.

Voici le code que j'ai mis :

import processing.video.*;
import java.awt.Frame;
long photo;
PImage[] tableau;
int index;
PGraphics masque;
int transition;
Capture cam;
int compteur;

void settings() {
 fullScreen(1);
}


void setup() {
  ellipse (width/2,height/2,height,height);
  photo = 0;
  PApplet.runSketch(platformNames, new SecondApplet());

  
  String[] cameras = Capture.list();
  cam = new Capture(this, 640, 480);

  if (cameras == null) {
    println("Failed to retrieve the list of available cameras, will try the default...");
  }
  cam.start();
  compteur = 0;
  textSize(1800);
}

void draw() {
  if (cam.available() == true) {
    cam.read();
    PImage logo;
    logo = loadImage("logo.png");
    image(cam, 0, 0, width, height);
    image (logo,1145,540);
    if (compteur != 0) {
      if (millis() - compteur >0) {
        photo ++;
        save("VTT" + photo + ".jpg");
        compteur = 0;
      } else {
        fill(255, 0, 0, 150);
        PFont maTypo = loadFont("AcmeFont-255.vlw"); // choix de la typo
        textFont(maTypo, 255);
        text((compteur - millis()) / 1000 + 1, 30, height - 550);
      }
    }
  }
}


public class SecondApplet extends PApplet {

    public void settings() {
    fullScreen(2);
  }
 
  public void setup() {
  surface.setTitle("Affichage");
  tableau = new PImage[3];
  for (int i = 0; i < tableau.length; i++) {
    tableau[i] = loadImage("VTT " + i  + ".jpg");
  }
  index = 0;
  masque = createGraphics(width, height);
  transition = 0;
}
 
 
  public void draw() {

      // Construction du masque
  int t = 0; 
  int division = 4;
  masque.beginDraw();
  masque.background(0);
  if (transition != 0) {
    t = (millis() - transition) / 2;
    masque.fill(255);
    masque.rectMode(CENTER);
    masque.noStroke();
    for (int i = 0; i < division * division; i++) {
      masque.rect(width / (2 * division) + (i % division) * width / division, height / (2 * division) + (i / division) * height / division, t, t * 3.0 / 4.0);
    }
  }
  masque.endDraw();

  // Affichage des images
  int index2;
  if (index == tableau.length - 1) {
    index2 = 0;
  } else {
    index2 = index + 1;
  }
  image(tableau[index], 0, 0);
  tableau[index2].mask(masque);
  image(tableau[index2], 0, 0);

  // Fin du processus de transition
  if (t > width / division) {
    transition = 0;
    if (index == tableau.length - 1) {
      index = 0;
    } else {
      index++;
    }
  }
}




public void keyPressed() {
  transition = millis();
}
}


void mouseClicked() {
  compteur = millis() + 3000;
}

void loop () {
    size(400,300);
    PImage logo;
    logo = loadImage("logo.png");
    image (logo,20,20);
}

Cordialement les amis

Mushussu · 2016-04-26 23:44:34

Bonsoir,

En plus de sauvegarder les images dans des fichiers, il faut construire un tableau dynamique qui les contient toutes.
Pour quelle occasion fais-tu ce programme. Une installation ? Une performance ?

On pourrais faire varier le type de transition aléatoirement. Il faudrait en créer plusieurs de ce type là :
https://www.youtube.com/watch?v=uWU5JL12GWA

import processing.video.*;
import java.awt.Frame;
import java.awt.Toolkit;

Capture cam;
int compteur;
PFont maTypo;
ArrayList<PImage> tableau = new ArrayList<PImage>();

void settings() {
  //fullScreen(1);
  size(1200, 900);
}

void setup() {
  PApplet.runSketch(platformNames, new SecondApplet());

  String[] cameras = Capture.list();
  cam = new Capture(this, 640, 480);

  if (cameras == null) {
    println("Failed to retrieve the list of available cameras, will try the default...");
  }
  cam.start();
  compteur = 0;
  maTypo = loadFont("ArialMT-255.vlw"); // choix de la typo
  textFont(maTypo, 255);
}

void draw() {
  if (cam.available() == true) {
    cam.read();
    PImage logo;
    logo = loadImage("logo.png");
    image(cam, 0, 0, width, height);
    //image (logo, 1145, 540);
    if (compteur != 0) {
      if (millis() - compteur >0) {
        PImage nImage = cam.copy();
        nImage.resize(width, height);
        tableau.add(nImage);
        save("VTT" + tableau.size() + ".jpg");
        compteur = 0;
        Toolkit.getDefaultToolkit().beep();
        background(255);
      } else {
        fill(255, 0, 0, 150);
        text((compteur - millis()) / 1000 + 1, 30, height - 550);
      }
    }
  }
}

void mouseClicked() {
  compteur = millis() + 3000;
}

public class SecondApplet extends PApplet {
  int index;
  PGraphics masque;
  int transition;
  int compteur, duree;
  
  public void settings() {
    //fullScreen(2);
    size(1200, 900);
  }

  public void setup() {
    surface.setTitle("Affichage");
    index = 0;
    masque = createGraphics(width, height);
    transition = 0;
    duree = 5000; // Duree entre chaque transition
    compteur = millis();
  }

  public void draw() {
    background(255);
    if (millis() - compteur > duree) {
      compteur = millis();
      transition = millis();
    }
    
    // Construction du masque
    int t = 0; 
    int division = 4;
    masque.beginDraw();
    masque.background(0);
    if (transition != 0) {
      t = (millis() - transition) / 2;
      masque.fill(255);
      masque.rectMode(CENTER);
      masque.noStroke();
      for (int i = 0; i < division * division; i++) {
        masque.rect(width / (2 * division) + (i % division) * width / division, height / (2 * division) + (i / division) * height / division, t, t * 3.0 / 4.0);
      }
    }
    masque.endDraw();

    // Affichage des images
    if (tableau.size() > 1) {
      int index2;
      if (index == tableau.size() - 1) {
        index2 = 0;
      } else {
        index2 = index + 1;
      }
      image(tableau.get(index), 0, 0);
      tableau.get(index2).mask(masque);
      image(tableau.get(index2), 0, 0);

      // Fin du processus de transition
      if (t > width / division) {
        transition = 0;
        if (index == tableau.size() - 1) {
          index = 0;
        } else {
          index++;
        }
      }
    } else {
      if (tableau.size() == 1) {
        image(tableau.get(0), 0, 0);
      }
    }
  }
}

VTT85 · 2016-04-27 07:42:18

Je crée ce programme pour une grosse soirée organisée cet été ! Les transitions que tu m'as présentées sont vraiment très bien et corresponde parfaitement au projet et lancer aléatoirement ces transitions dans n'importe quel ordre c'est vraiment ce qu'il faudrait.. Est-il possible de créer ces types de transitions sur Processing et si oui comment ? Faut-il se pencher sur chaque transition ?

matheynen · 2016-04-27 09:19:59

Oui c'est tout à fait possible et il faut toutes les programmer 1 à 1.
Excellent exercice !
Pour ce la librairie Ani est nécessaire.
Je dois faire un projet similaire,
j'aurais du temps le week-end du 14-15-16 mai pour y travailler si tu veux.

Mushussu · 2016-04-27 09:23:45

Oui, bien sûr c'est réalisable sous Processing toujours avec l'histoire de masque. Il suffit de réaliser une forme blanche sur fond noir qui s'agrandit en fonction d'une variable temps et qui finit par recouvrir tout le plan.
A toi de chercher en s'inspirant de la vidéo. Je pourrais te donner un coup de main pour les intégrer.

VTT85 · 2016-04-27 10:27:59

Ok super ! Mathieu tu vas te pencher sur quelles transitions histoire que je ne fasse pas les mêmes lol comme ça on peut se partager le boulot si tu veux. D'accord super merci beaucoup Mushussu, je vais regarder tout ça, et je vais essayer de programmer des transitions que je vous proposerais ici.
Par contre juste une question, quand tu dis une forme blanche qui recouvre petit à petit une forme noire, moi en l'occurrence ce serait une photo qui en recouvre une autre...

Mushussu · 2016-04-27 11:12:02

TU n'as pas compris ce que je t'ai présenté alors. Je passe par la construction d'un masque, c'est-à-dire une forme blanche sur fond noir.
Avec l'instruction :
tableau.get(index2).mask(masque);

J'applique le masque sur la photo suivante. Ainsi on a l'impression que c'est l'image qui s'agrandit.

Pour t'en convaincre affiche simplement le masque comme une image tu verras ce que veux dire.

VTT85 · 2016-04-27 13:14:04

Oui d'accord j'ai compris, ouhla ca risque d'être assez compliqué de programme un masque pour moi, le principe n'est pas super clair mais je vais gratter pour y arriver !

Mushussu · 2016-04-27 14:25:16

Utilise dans un premier temps pour tester le programme sur la transition. Tu peux modifier tout ce qu'il y a entre le masque.beginDraw() et masque.endDraw(), mais il faut avoir une forme blanche sur fond noir.
A toi de jouer.

VTT85 · 2016-04-27 15:28:28

Ok super merci beaucoup je m'occupe de tout ca et je vous tiens au courant !
Je voudrais également que dès qu'une photo soit prise elle apparaisse sur l'écran 2 photos apres (par exemple pendant que la photo 1 est à l'écran, et qu'il y a une photo 57 de prise par exemple, je voudrais que sur l'écran, le programme affiche photo 1 puis photo 34 puis photo 57 par exemple) si vous voyez ce que je veux dire...

VTT85 · 2016-04-27 18:20:47

J'ai un soucis en chargeant le programme que vous m'avez proposé hier soir, voici la ligne avec laquelle j'ai un problème :

tableau.get(index2).mask(masque);

Lorsque je lance le programme, je peux prendre une photo, jusqu'ici tout va bien, elle s'affiche ensuite sur l'écran d'affichage mais lorsque je clique pour en prendre une seconde, la fenêtre bug et devient toute blanche et m'oblige à fermer les fenêtres.

Mushussu · 2016-04-27 20:26:27

Je n'avais pas testé sur un deuxième écran, voici le programme modifié :

import processing.video.*;
import java.awt.Frame;
import java.awt.Toolkit;

Capture cam;
int compteur, largeur2, hauteur2;
PFont maTypo;
ArrayList<PImage> tableau = new ArrayList<PImage>();

void settings() {
  fullScreen(2);
  //size(1200, 900);
}

void setup() {
  println("Taille ecran 2 : " + width + " : " + height);
  println(platformNames);
  PApplet.runSketch(platformNames, new SecondApplet());

  String[] cameras = Capture.list();
  cam = new Capture(this, 640, 480);

  if (cameras == null) {
    println("Failed to retrieve the list of available cameras, will try the default...");
  }
  cam.start();
  compteur = 0;
  maTypo = loadFont("ArialMT-255.vlw"); // choix de la typo
  textFont(maTypo, 255);
  
}

void draw() {
  if (cam.available() == true) {
    cam.read();
    PImage logo;
    //logo = loadImage("logo.png");
    image(cam, 0, 0, width, height);
    //image (logo, 1145, 540);
    if (compteur != 0) {
      if (millis() - compteur >0) {
        PImage nImage = cam.copy();
        nImage.resize(largeur2, hauteur2);
        tableau.add(nImage);
        save("VTT" + tableau.size() + ".jpg");
        compteur = 0;
        Toolkit.getDefaultToolkit().beep();
        background(255);
      } else {
        fill(255, 0, 0, 150);
        text((compteur - millis()) / 1000 + 1, 30, height - 550);
      }
    }
  }
}

void mouseClicked() {
  compteur = millis() + 3000;
}

public class SecondApplet extends PApplet {
  int index;
  PGraphics masque;
  int transition;
  int compteur, duree;

  public void settings() {
    fullScreen(1);
    //size(1200, 900);
  }

  public void setup() {
    println("Taille ecran 1 : " + this.width + " : " + this.height);
    //surface.setTitle("Affichage");
    
    index = 0;
    masque = createGraphics(this.width, this.height);
    transition = 0;
    duree = 5000; // Duree entre chaque transition
    compteur = millis();
    largeur2 = this.width;
    hauteur2 = this.height;
  }

  public void draw() {
    background(255);
    if (millis() - compteur > duree) {
      compteur = millis();
      transition = millis();
    }

    // Construction du masque
    int t = 0; 
    int division = 4;
    masque.beginDraw();
    masque.background(0);
    if (transition != 0) {
      t = (millis() - transition) / 2;
      masque.fill(255);
      masque.rectMode(CENTER);
      masque.noStroke();
      float rapport = (float)this.height / this.width;
      for (int i = 0; i < division * division; i++) {
        masque.rect(this.width / (2 * division) + (i % division) * this.width / division, this.height / (2 * division) + (i / division) * this.height / division, t, t * rapport);
      }
    }
    masque.endDraw();

    // Affichage des images
    if (tableau.size() > 1) {
      int index2;
      if (index == tableau.size() - 1) {
        index2 = 0;
      } else {
        index2 = index + 1;
      }
      image(tableau.get(index), 0, 0);
      tableau.get(index2).mask(masque);
      image(tableau.get(index2), 0, 0);

      // Fin du processus de transition
      if (t > this.width / division) {
        transition = 0;
        if (index == tableau.size() - 1) {
          index = 0;
        } else {
          index++;
        }
      }
    } else {
      if (tableau.size() == 1) {
        image(tableau.get(0), 0, 0);
      }
    }
  }
}

VTT85 · 2016-04-27 20:45:28

Super ça fonctionne tres tres bien merci beaucoup !

Par contre le programme réalisé et affiche une cam.copy, les soucis étant que je rajoute un logo sur le coin de la webcam et j'aurais souhaité qu'il apparaisse sur chaque photo, car la l'écran d'affichage affiche juste la capture d'écran du coup il n'y a pas le logo, j'aurais souhaité qu'il affiche la photo enregistre dans le dossier moi...

Annonce

#16 2016-04-26 06:49:13 Re : Photomaton processing

Re: Photomaton processing

#17 2016-04-26 08:09:13 Re : Photomaton processing

Re: Photomaton processing

#18 2016-04-26 22:08:34 Re : Photomaton processing

Re: Photomaton processing

#19 2016-04-26 23:44:34 Re : Photomaton processing

Re: Photomaton processing

#20 2016-04-27 07:42:18 Re : Photomaton processing

Re: Photomaton processing

#21 2016-04-27 09:19:59 Re : Photomaton processing

Re: Photomaton processing

#22 2016-04-27 09:23:45 Re : Photomaton processing

Re: Photomaton processing

#23 2016-04-27 10:27:59 Re : Photomaton processing

Re: Photomaton processing

#24 2016-04-27 11:12:02 Re : Photomaton processing

Re: Photomaton processing

#25 2016-04-27 13:14:04 Re : Photomaton processing

Re: Photomaton processing

#26 2016-04-27 14:25:16 Re : Photomaton processing

Re: Photomaton processing

#27 2016-04-27 15:28:28 Re : Photomaton processing

Re: Photomaton processing

#28 2016-04-27 18:20:47 Re : Photomaton processing

Re: Photomaton processing

#29 2016-04-27 20:26:27 Re : Photomaton processing

Re: Photomaton processing

#30 2016-04-27 20:45:28 Re : Photomaton processing

Re: Photomaton processing

Pied de page des forums