[JAVA] Diapositive de présentation réalisée avec Processing

introduction

Bonjour, c'est ohayota. Avez-vous déjà voulu faire une diapositive de présentation avec Processing (?) L'autre jour, j'ai fait une diapositive pour la scène à [Ryudai and Mirai University Joint LT] [1] avec ** Processing et je l'ai présentée avec Processing. ** ** Donc, dans cet article, j'écrirai comment j'ai réalisé les diapositives. [1]:https://connpass.com/event/133298/

Ce dont vous avez besoin pour lire cet article

--Comprendre la grammaire du traitement (Java)

Image de la diapositive que vous souhaitez créer

La diapositive que j'essaie de faire ici ressemble à l'image ci-dessous.

Diapositive de couverture

coverSlideImage.png ### Diapositive normale slideImage.png

Nous allons l'implémenter en fonction de ces deux images. (L'explication de base du traitement est omise. Si vous ne comprenez pas, veuillez vous reporter à [Référence officielle] [2] etc.) [2]:https://processing.org/reference/

Constitution

Même si vous dites de faire une diapositive, il est difficile d'écrire rect (...) et text (...) un par un dans setup () et draw (). Surtout si vous voulez faire des dizaines de diapositives, c'est un problème (du moins je n'aime pas ça). Par conséquent, nous avons préparé plusieurs classes et les avons implémentées en ** orienté objet **.

La structure de la classe a été grossièrement décidée comme suit.

Un jeu de ** TopBar ** & ** TextField ** & ** BottomBar ** est requis pour chaque diapositive.

la mise en oeuvre

Nous allons l'implémenter pour chaque classe. Tout d'abord, de la préparation.

Préparation

Avant le montage, nous préparerons la taille de l'écran, la couleur, les images et les polices à utiliser.

//Police à utiliser
PFont yuGothic90;
PFont yuGothic70;
PFont yuGothic50;
PFont yuGothic30;
PFont yuGothic15;
PFont helvetica;
//Image à utiliser
PImage dummy600;

// createSlides()Mettez toutes les diapositives
ArrayList<Slide> slides = new ArrayList<Slide>();
String slideName = "Nom de la diapositive";
int slideNum = 0;  //Numéro de diapositive à afficher

boolean isKeyTyped = false;

final color backColor = color(240);
final color mainColor = color(0, 0, 70);
final color subColor1 = color(100);
final color subColor2 = color(200);

void setup() {
  fullScreen();
  noStroke();
  noCursor();
  imageMode(CENTER);
  frameRate(15);
  
  yuGothic90 = createFont("YuGo-Bold", 90, true);
  yuGothic70 = createFont("YuGo-Bold", 70, true);
  yuGothic50 = createFont("YuGo-Bold", 50, true);
  yuGothic30 = createFont("YuGo-Bold", 30, true);
  yuGothic15 = createFont("YuGo-Bold", 15, true);
  helvetica = createFont("Helvetica-Bold", 50, true);
  
  dummy600 = loadImage("dummy600.png ");
  
  createSlides();
}

void createSlides() {
  //Écrire le processus d'ajout de diapositives
}

Préparez les matériaux à utiliser. Utilisez fillScreen () pour l'afficher en plein écran. Utilisez createSlides () une fois la classe Slide terminée.

Préparez une image factice de 600px * 600px pour le programme traité ci-dessous. Créez un répertoire appelé "data" dans le même répertoire et enregistrez-le sous dummy600.png. dummy600.png

Maintenant que nous sommes prêts, nous allons implémenter chaque classe. A partir de là, la disposition sera déterminée relativement ** en utilisant les tailles verticale et horizontale de l'écran. ** **

Classe TopBar

slideTop.png

Ce dont vous avez besoin est le suivant.

-Fond bleu marine --Titre --Sous-titre

Mettez en œuvre pour que ceux-ci puissent être affichés.

TopBar.pde


class TopBar {

  float barHeight;
  String title;
  String subTitle;
  int number;

  TopBar(float barHeight, String title, String subTitle, int number) {
    this.barHeight = barHeight;
    this.title = title;
    this.subTitle = subTitle;
    this.number = number;
  }

  void drawBase() {
    noStroke();
    fill(mainColor);
    rect(0, 0, width, barHeight);
  }

  void drawTitle() {
    fill(backColor);
    textFont(yuGothic70);
    textSize(height/17.5);
    textAlign(LEFT, CENTER);
    text(title, width/33.6, barHeight/2);
  }

  void drawSubTitle() {
    fill(backColor);
    textFont(yuGothic30);
    textSize(height/35);
    textAlign(RIGHT, CENTER);
    text(subTitle, width*10.2/11.2, barHeight/2);
  }

  void drawNumber() {
    fill(backColor);
    textFont(helvetica);
    textSize(height/21);
    textAlign(RIGHT, CENTER);
    text(number, width*32.6/33.6, barHeight/2);
  }

  void draw() {
    drawBase();
    drawTitle();
    drawSubTitle();
    drawNumber();
  }

}

Classe d'image

imageSquare.png

Comme indiqué dans l'exemple ci-dessus, cette classe affiche une seule image carrée.

Image.pde


class Image {
  
  PImage image;
  float sizeX;
  float sizeY;
  float x;
  float y;
  color back;
  boolean isReflect;  //Avez-vous besoin de le retourner?
  
  Image(PImage image, float sizeX, float sizeY, float x, float y, color back, boolean isReflect) {
    this.image = image;
    this.sizeX = sizeX;
    this.sizeY = sizeY;
    this.x = x;
    this.y = y;
    this.back = back;
    this.isReflect = isReflect;
  }
  
  void drawImage() {
    pushMatrix();
    translate(x, y);
    if (isReflect) rotate(radians(180));
    image(image, 0, 0, sizeX, sizeY);
    popMatrix();
  }
  
  void drawFrame() {
    noFill();
    strokeWeight(sizeY/100+2);
    stroke(mainColor);
    rect(x-sizeX/2, y-sizeY/2, sizeX, sizeY);
  }
  
  void draw() {
    drawImage();
    drawFrame();
  }
  
}

Classe CroppedImage

cimage.png

Dans l'implémentation de cette classe, la méthode utilisée dans [Affichage d'une image ronde avec traitement] [3] est utilisée. Comme indiqué dans l'exemple ci-dessus, cette classe affiche une seule image découpée en cercle. [3]:https://qiita.com/ohayota/items/e00e29b2a86a8143f258

CroppedImage.pde


class CroppedImage {
  
  PImage image;
  float size;
  float x;
  float y;
  color back;
  boolean isReflect;  //Avez-vous besoin de le retourner?
  
  CroppedImage(PImage image, float size, float x, float y, color back, boolean isReflect) {
    this.image = image;
    this.size = size;
    this.x = x;
    this.y = y;
    this.back = back;
    this.isReflect = isReflect;
  }
  
  void drawBaseImage() {
    pushMatrix();
    translate(x, y);
    if (isReflect) rotate(radians(180));
    image(image, 0, 0, size, size);
    popMatrix();
  }
  
  //Découpez un cercle à l'intérieur du carré
  void drawCroppedShape() {
    pushMatrix();
    translate(x, y);
    fill(back);
    noStroke();
    beginShape();
    //Le cadre extérieur de la figure
    vertex(-(size/2+1), -(size/2+1));
    vertex(size/2+1, -(size/2+1));
    vertex(size/2+1, size/2+1);
    vertex(-(size/2+1), size/2+1);
    //Dessiner une figure à découper
    beginContour();
    for (int i = 360; 0 < i; i--) {
      vertex(size/2 * cos(radians(i)), size/2 * sin(radians(i)));
    }
    endContour();
    endShape(CLOSE);
    popMatrix();
  }
  
  void drawFrame() {
    //Dessinez le cadre de l'image recadrée
    noFill();
    strokeWeight(size/100+2);
    stroke(mainColor);
    ellipse(x, y, size, size);
  }
  
  //Pour être précis, au lieu de recadrer l'image elle-même, dessinez la figure recadrée au-dessus de l'image.
  void draw() {
    drawBaseImage();
    drawCroppedShape();
    drawFrame();
  }
  
}

Classe BottomBar

slideBottom.png

Ce dont vous avez besoin est le suivant.

-Fond gris foncé

Mettez en œuvre pour que ceux-ci puissent être affichés.

BottomBar.pde


class BottomBar {
  
  float barHeight;
  String title;
  CroppedImage image;
  
  BottomBar(float barHeight, String title) {
    this.barHeight = barHeight;
    this.title = title;
    image = new CroppedImage(dummy600, barHeight*2/3, width*7.5/8.4, height-barHeight/2, subColor1, false);
  }
  
  void drawBase() {
    noStroke();
    fill(subColor1);
    rect(0, height-barHeight, width, barHeight);
  }
  
  void drawTitle() {
    fill(subColor2);
    textFont(yuGothic30);
    textSize(height/35);
    textAlign(LEFT, CENTER);
    text(title, width/33.6, height-barHeight/2);
  }
  
  void drawUserInfo() {
    textSize(height/42);
    text("Nom d'utilisateur", image.x + image.size/2 + width/168, image.y - barHeight/8);
    textFont(yuGothic15);
    textSize(height/70);
    text("ID utilisateur, etc.", image.x + image.size/2 + width/168, image.y + barHeight/6);
    image.draw();
  }
  
  void draw() {
    drawBase();
    drawTitle();
    drawUserInfo();
  }
  
}

TextField, classe

slideField.png

Cette classe représente la zone où le texte et les images sont affichés. Réglez le niveau de 1 à 3 pour les puces. Un marqueur circulaire est affiché au deuxième niveau et un marqueur de ligne est affiché au troisième niveau.

TextField.pde


class TextField {
  
  float topBarHeight;
  float bottomBarHeight;
  float x;
  float y;
  float fieldWidth;
  float fieldHeight;
  ArrayList<CroppedImage> cImages;
  ArrayList<Image> images;
  ArrayList<Text> texts;
  
  TextField(float topBarHeight, float bottomBarHeight, float marginX, float marginY) {
    this.topBarHeight = topBarHeight;
    this.bottomBarHeight = bottomBarHeight;
    this.x = marginX;
    this.y = topBarHeight + marginY;
    fieldWidth = width - marginX*2;
    fieldHeight = height - (y+bottomBarHeight+marginY);
    cImages = new ArrayList<CroppedImage>();
    images = new ArrayList<Image>();
    texts = new ArrayList<Text>();
  }
  
  void drawImages() {
    for (CroppedImage img: cImages) img.draw();
    for (Image img: images) img.draw();
  }
  
  void drawTexts() {
    if (!texts.isEmpty()) {
      int textX = 0;
      int textY = 0;
      int beforeLevel = texts.get(0).level;
      for (int i = 0; i < texts.size(); i++) {
        Text t = texts.get(i);
        switch (t.level) {
          case 0:
            textX = 0;
            textY += height/17.5;
            break;
          case 1:
            textX = 0;
            t.draw(textX, textY);
            textY += height/15;
            break;
          case 2:
            if (beforeLevel == 3) {
              textX -= width/28;
            } else if (beforeLevel != 2) {
              textX += width/28;
            }
            t.draw(textX, textY);
            textY += height/17.5;
            break;
          case 3:
            if (beforeLevel != 3) textX += width/28;
            t.draw(textX, textY);
            textY += height/21;
            break;
          default:
        }
        beforeLevel = t.level;
      }
    }
  }
  
  void draw() {
    pushMatrix();
    //Étant donné que la position dans le TextField est définie, l'origine est en haut à gauche de TextField.(0, 0)À
    translate(x, y);
    drawTexts();
    drawImages();
    popMatrix();
  }
  
}

Classe de texte

Classe de texte utilisée dans la classe TextField. Il contient des informations telles que le contenu du texte, le niveau, la police, le marqueur et la couleur.

Text.pde


class Text {
  
  String text;
  int level;
  
  Text(String text, int level) {
    this.text = text;
    this.level = level;
  }
  
  //Un cercle pour le 2ème niveau et une ligne pour le 3ème niveau sont affichés sur le côté gauche du texte comme marqueurs.
  void drawMarker(float x, float y) {
    switch (level) {
      case 2:
        fill(mainColor);
        noStroke();
        ellipse(x-width/48, y+height/52.5, height/42, height/42);
        break;
      case 3:
        stroke(mainColor);
        strokeCap(SQUARE);
        strokeWeight(height/262.5);
        line(x-width/33.6, y+height/70, x-width/60, y+height/70);
        break;
      default:
        return;
    }
  }
  
  void drawText(float x, float y) {
    switch (level) {
      case 1:
        fill(mainColor);
        textFont(yuGothic50);
        textSize(height/21);
        break;
      case 2:
        fill(subColor1);
        textFont(yuGothic50);
        textSize(height/26.25);
        break;
      case 3:
        fill(subColor1);
        textFont(yuGothic30);
        textSize(height/35);
        break;
      default:
        return;
    }
    textAlign(LEFT, TOP);
    text(text, x, y);
  }
  
  void draw(float x, float y) {
    drawMarker(x, y);
    drawText(x, y);
  }
  
}

Classe de diapositive

Cette classe représente une diapositive.

Slide.pde


class Slide {
  
  TopBar topBar;
  BottomBar bottomBar;
  TextField textField;
  int number;  //Numéro de la diapositive
  boolean isCover;
  String title;
  String subTitle;
  
  Slide(boolean isCover, int number, String title, String subTitle) {
    topBar = new TopBar(height/8, title, subTitle, number);
    bottomBar = new BottomBar(height/12, slideName);
    textField = new TextField(topBar.barHeight, bottomBar.barHeight, width/21, height/17.5);
    this.isCover = isCover;
    this.number = number;
    this.title = title;
    this.subTitle = subTitle;
  }
  
  void drawTitle() {
    fill(mainColor);
    textFont(yuGothic90);
    textSize(height/11.7);
    textAlign(CENTER, TOP);
    text(title, width/2, height*4.5/13);
  }
  
  void drawSubTitle() {
    fill(subColor1);
    textFont(yuGothic50);
    textSize(height/21);
    textAlign(CENTER, TOP);
    text(subTitle, width/2, height*8.5/13);
  }
  
  void draw() {
    background(backColor);
    if (isCover) {
      drawTitle();
      drawSubTitle();
    } else {
      topBar.draw();
      bottomBar.draw();
      textField.draw();
    }
  }
  
}

Ajouter une diapositive

Maintenant que nous avons implémenté toutes les classes qui composent une diapositive, nous allons créer chaque page de la diapositive (une instance de la classe Slide). Au stade de la préparation, il y avait une fonction appelée createSlides (). Ajoutez une diapositive dans cette fonction. (Cette fois, ce sont des données factices)

void createSlides() {
  //Couverture
  slides.add(new Slide(true, 0, "Titre", "サブTitre"));
  //1ère diapositive
  Slide s1 = new Slide(false, 1, "Titre", "サブTitre");
  s1.textField.texts.add(new Text("1er niveau", 1));
  s1.textField.texts.add(new Text("Deuxième niveau", 2));
  s1.textField.texts.add(new Text("3e niveau", 3));
  s1.textField.texts.add(new Text("Deuxième niveau", 2));
  s1.textField.texts.add(new Text("3e niveau", 3));
  s1.textField.texts.add(new Text("", 0));  //Ligne blanche
  s1.textField.texts.add(new Text("1er niveau", 1));
  s1.textField.texts.add(new Text("Deuxième niveau", 2));
  s1.textField.texts.add(new Text("Deuxième niveau", 2));
  s1.textField.texts.add(new Text("3e niveau", 3));
  s1.textField.texts.add(new Text("3e niveau", 3));
  s1.textField.cImages.add(new CroppedImage(dummy600, s1.textField.fieldWidth/3,
                                            s1.textField.x + s1.textField.fieldWidth*7/10,
                                            s1.textField.fieldHeight/2, backColor, false));
  slides.add(s1);
  //2e diapositive
  Slide s2 = new Slide(false, 2, "Titre", "サブTitre");
  s2.textField.texts.add(new Text("1er niveau", 1));
  s2.textField.texts.add(new Text("Deuxième niveau", 2));
  s2.textField.texts.add(new Text("3e niveau", 3));
  s2.textField.texts.add(new Text("Deuxième niveau", 2));
  s2.textField.texts.add(new Text("3e niveau", 3));
  s2.textField.texts.add(new Text("", 0));  //Ligne blanche
  s2.textField.texts.add(new Text("1er niveau", 1));
  s2.textField.texts.add(new Text("Deuxième niveau", 2));
  s2.textField.texts.add(new Text("Deuxième niveau", 2));
  s2.textField.texts.add(new Text("3e niveau", 3));
  s2.textField.texts.add(new Text("3e niveau", 3));
  s2.textField.images.add(new Image(dummy600, s2.textField.fieldWidth/3, s2.textField.fieldWidth/3,
                                    s2.textField.x + s2.textField.fieldWidth*7/10,
                                    s2.textField.fieldHeight/2, backColor, false));
  slides.add(s2);
  //3e diapositive...
}

Créez une instance de la diapositive et ajoutez une instance de texte (** Texte ) ou d'image ( Image ** ou ** Image recadrée **) au champ textField à l'intérieur de cette instance. Après avoir ajouté le champ textField, ajoutez les occurrences de diapositives aux diapositives «ArrayList ».

Afficher la diapositive

Maintenant que la diapositive a été ajoutée, appelez draw () sur la diapositive avec draw ().

void draw() {
  background(backColor);
  slides.get(slideNum).draw();
}

La diapositive de couverture est maintenant affichée.

Changer de diapositive

Pour l'utiliser pour les présentations, vous avez besoin d'une fonction qui peut changer de diapositive. Vous pouvez basculer entre eux avec les flèches gauche et droite du clavier.

keyEvent.pde


void keyPressed() {
  if (!isKeyTyped) {
    switch (keyCode) {
      case LEFT:
        if (0 < slideNum) {
          loop();
          slideNum--;
        }
        break;
      case RIGHT:
        if (slideNum < slides.size()-1) {
          loop();
          slideNum++;
        }
        break;
      default:
    }
    isKeyTyped = true;
  }
}

void keyReleased() {
  isKeyTyped = false;
}

Si vous êtes dans une boucle lorsqu'une touche est enfoncée, vous pouvez basculer entre plusieurs diapositives en une seule pression. Par conséquent, ajoutez noLoop () à la fonction draw ().

void draw() {
  background(backColor);
  slides.get(slideNum).draw();

  noLoop();  //Évitez de boucler sauf lorsqu'une touche spécifique est enfoncée
}

Lorsque la touche fléchée est enfoncée une fois, elle changera un par un. Ceci termine la mise en œuvre.

en conclusion

Les diapositives implémentées cette fois étaient mon propre masque de diapositives, mais vous pouvez créer vos propres diapositives en personnalisant les couleurs et la mise en page dans le programme. Essayez-le.

Recommended Posts

Diapositive de présentation réalisée avec Processing
Noël avec traitement
Course d'obstacles facile avec traitement pour Java
Premiers pas avec le traitement Doma-Annotation
Spring avec Kotorin --6 Traitement asynchrone
Récupérateur d'unité fabriqué par traitement
Pokemon Go fait avec Faker Gem
J'ai créé une interface graphique avec Swing
NLP4J [006-031] Le traitement de 100 langues frappe avec le verbe NLP4J # 31
Micro benchmark réalisé avec l'API JFR
Vitesse de traitement avec et sans statique
Traitement serveur avec Java (Introduction partie 1)
Exécuter des applications écrites en Java8 en Java6
Développer le traitement avec IntelliJ + Kotlin + Gradle
Traitement d'image: jouons avec l'image