[JAVA] Präsentationsfolie mit Verarbeitung erstellt

Einführung

Hallo, das ist Ohayota. Wollten Sie schon immer eine Präsentationsfolie mit Processing (?) Erstellen? Neulich habe ich mit ** Processing eine Folie für die Bühne bei [Ryudai und Mirai University Joint LT] [1] gemacht und sie mit Processing präsentiert. ** ** ** In diesem Artikel werde ich schreiben, wie ich die Folien erstellt habe. [1]:https://connpass.com/event/133298/

Was Sie brauchen, um diesen Artikel zu lesen

Bild der Folie, die Sie erstellen möchten

Die Folie, die ich hier machen möchte, sieht wie im Bild unten aus.

Objektträger abdecken

coverSlideImage.png ### Normale Folie slideImage.png

Wir werden es gemäß diesen beiden Bildern implementieren. (Die grundlegende Erklärung der Verarbeitung wird weggelassen. Wenn Sie dies nicht verstehen, lesen Sie bitte [Offizielle Referenz] [2] usw.) [2]:https://processing.org/reference/

Verfassung

Selbst wenn Sie sagen, dass Sie eine Folie erstellen möchten, ist es schwierig, "rect (...)" und "text (...)" einzeln in "setup ()" und "draw ()" zu schreiben. Besonders wenn Sie Dutzende von Folien erstellen möchten, ist dies ein Ärger (zumindest gefällt es mir nicht). Deshalb haben wir mehrere Klassen vorbereitet und in ** objektorientiert ** implementiert.

Die Struktur der Klasse wurde grob wie folgt festgelegt.

Für jede Folie ist ein Satz ** TopBar ** & ** TextField ** & ** BottomBar ** erforderlich.

Implementierung

Wir werden es für jede Klasse implementieren. Zunächst von der Vorbereitung.

Vorbereitung

Vor dem Mounten bereiten wir die zu verwendende Bildschirmgröße, Farbe, Bilder und Schriftarten vor.

//Zu verwendende Schriftart
PFont yuGothic90;
PFont yuGothic70;
PFont yuGothic50;
PFont yuGothic30;
PFont yuGothic15;
PFont helvetica;
//Bild zu verwenden
PImage dummy600;

// createSlides()Legen Sie alle Folien ein
ArrayList<Slide> slides = new ArrayList<Slide>();
String slideName = "Folienname";
int slideNum = 0;  //Foliennummer angezeigt werden

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() {
  //Schreibfolienadditionsprozess schreiben
}

Bereiten Sie die zu verwendenden Materialien vor. Verwenden Sie fillScreen (), um es im Vollbildmodus anzuzeigen. Verwenden Sie "createSlides ()", sobald die Slide-Klasse abgeschlossen ist.

Bereiten Sie ein Dummy-Image von 600px * 600px für das unten behandelte Programm vor. Erstellen Sie ein Verzeichnis mit dem Namen "data" im selben Verzeichnis und speichern Sie es als "dummy600.png ". dummy600.png

Jetzt, da wir bereit sind, werden wir jede Klasse implementieren. Ab diesem Zeitpunkt wird das Layout relativ ** anhand der vertikalen und horizontalen Größe des Bildschirms bestimmt. ** ** **

TopBar-Klasse

slideTop.png

Was Sie brauchen, ist wie folgt.

Implementieren Sie, damit diese angezeigt werden können.

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();
  }

}

Bildklasse

imageSquare.png

Wie im obigen Beispiel gezeigt, zeigt diese Klasse ein einzelnes quadratisches Bild an.

Image.pde


class Image {
  
  PImage image;
  float sizeX;
  float sizeY;
  float x;
  float y;
  color back;
  boolean isReflect;  //Müssen Sie es auf den Kopf stellen?
  
  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();
  }
  
}

CroppedImage-Klasse

cimage.png

Bei der Implementierung dieser Klasse wird die in [Anzeigen eines runden Bildes mit Verarbeitung] [3] verwendete Methode verwendet. Wie im obigen Beispiel gezeigt, zeigt diese Klasse ein einzelnes Bild an, das in einem Kreis ausgeschnitten ist. [3]:https://qiita.com/ohayota/items/e00e29b2a86a8143f258

CroppedImage.pde


class CroppedImage {
  
  PImage image;
  float size;
  float x;
  float y;
  color back;
  boolean isReflect;  //Müssen Sie es auf den Kopf stellen?
  
  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();
  }
  
  //Schneiden Sie einen Kreis innerhalb des Quadrats aus
  void drawCroppedShape() {
    pushMatrix();
    translate(x, y);
    fill(back);
    noStroke();
    beginShape();
    //Der äußere Rahmen der Figur
    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);
    //Zeichne eine Figur zum Ausschneiden
    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() {
    //Zeichnen Sie den Rahmen des zugeschnittenen Bildes
    noFill();
    strokeWeight(size/100+2);
    stroke(mainColor);
    ellipse(x, y, size, size);
  }
  
  //Um genau zu sein, zeichnen Sie die zugeschnittene Figur über das Bild, anstatt das Bild selbst zu beschneiden.
  void draw() {
    drawBaseImage();
    drawCroppedShape();
    drawFrame();
  }
  
}

BottomBar-Klasse

slideBottom.png

Was Sie brauchen, ist wie folgt.

Implementieren Sie, damit diese angezeigt werden können.

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("Nutzername", image.x + image.size/2 + width/168, image.y - barHeight/8);
    textFont(yuGothic15);
    textSize(height/70);
    text("Benutzer-ID usw.", image.x + image.size/2 + width/168, image.y + barHeight/6);
    image.draw();
  }
  
  void draw() {
    drawBase();
    drawTitle();
    drawUserInfo();
  }
  
}

TextField-Klasse

slideField.png

Diese Klasse repräsentiert den Bereich, in dem Text und Bilder angezeigt werden. Stellen Sie die Stufe für Kugeln von 1 bis 3 ein. Auf der zweiten Ebene wird eine Kreismarkierung und auf der dritten Ebene eine Linienmarkierung angezeigt.

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();
    //Da die Position im TextField festgelegt ist, befindet sich der Ursprung oben links im TextField.(0, 0)Zu
    translate(x, y);
    drawTexts();
    drawImages();
    popMatrix();
  }
  
}

Textklasse

In der TextField-Klasse verwendete Textklasse. Es enthält Informationen wie Textinhalt, Ebene, Schriftart, Markierung und Farbe.

Text.pde


class Text {
  
  String text;
  int level;
  
  Text(String text, int level) {
    this.text = text;
    this.level = level;
  }
  
  //Ein Kreis für die 2. Ebene und eine Linie für die 3. Ebene werden auf der linken Seite des Textes als Markierungen angezeigt.
  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);
  }
  
}

Folienklasse

Diese Klasse repräsentiert eine Folie.

Slide.pde


class Slide {
  
  TopBar topBar;
  BottomBar bottomBar;
  TextField textField;
  int number;  //Foliennummer
  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();
    }
  }
  
}

Folie hinzufügen

Nachdem wir alle Klassen implementiert haben, aus denen eine Folie besteht, erstellen wir jede Seite der Folie (eine Instanz der Folienklasse). In der Vorbereitungsphase gab es eine Funktion namens "createSlides ()". Fügen Sie in dieser Funktion eine Folie hinzu. (Diesmal sind Dummy-Daten)

void createSlides() {
  //Startseite
  slides.add(new Slide(true, 0, "Titel", "サブTitel"));
  //1. Folie
  Slide s1 = new Slide(false, 1, "Titel", "サブTitel");
  s1.textField.texts.add(new Text("1. Ebene", 1));
  s1.textField.texts.add(new Text("Zweites Level", 2));
  s1.textField.texts.add(new Text("3. Ebene", 3));
  s1.textField.texts.add(new Text("Zweites Level", 2));
  s1.textField.texts.add(new Text("3. Ebene", 3));
  s1.textField.texts.add(new Text("", 0));  //Leerzeile
  s1.textField.texts.add(new Text("1. Ebene", 1));
  s1.textField.texts.add(new Text("Zweites Level", 2));
  s1.textField.texts.add(new Text("Zweites Level", 2));
  s1.textField.texts.add(new Text("3. Ebene", 3));
  s1.textField.texts.add(new Text("3. Ebene", 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);
  //2. Folie
  Slide s2 = new Slide(false, 2, "Titel", "サブTitel");
  s2.textField.texts.add(new Text("1. Ebene", 1));
  s2.textField.texts.add(new Text("Zweites Level", 2));
  s2.textField.texts.add(new Text("3. Ebene", 3));
  s2.textField.texts.add(new Text("Zweites Level", 2));
  s2.textField.texts.add(new Text("3. Ebene", 3));
  s2.textField.texts.add(new Text("", 0));  //Leerzeile
  s2.textField.texts.add(new Text("1. Ebene", 1));
  s2.textField.texts.add(new Text("Zweites Level", 2));
  s2.textField.texts.add(new Text("Zweites Level", 2));
  s2.textField.texts.add(new Text("3. Ebene", 3));
  s2.textField.texts.add(new Text("3. Ebene", 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);
  //3. Folie...
}

Erstellen Sie eine Instanz der Folie und fügen Sie dem textField in dieser Instanz eine Instanz von Text (** Text ) oder Bild ( Image ** oder ** Cropped Image **) hinzu. Fügen Sie nach dem Hinzufügen des Textfelds eine Instanz der Folie zu "ArrayList Folien" hinzu.

Folie anzeigen

Nachdem die Folie hinzugefügt wurde, rufen Sie "draw ()" auf der Folie mit "draw ()" auf.

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

Das Deckblatt wird jetzt angezeigt.

Folien wechseln

Um es für Präsentationen verwenden zu können, benötigen Sie eine Funktion, mit der Sie Folien wechseln können. Sie können mit den Pfeilen nach links und rechts auf der Tastatur zwischen ihnen wechseln.

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;
}

Wenn Sie beim Drücken einer Taste eine Schleife ausführen, können Sie mit nur einem Tastendruck zwischen mehreren Folien wechseln. Fügen Sie daher der Funktion draw () noLoop () hinzu.

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

  noLoop();  //Vermeiden Sie Schleifen, außer wenn eine bestimmte Taste gedrückt wird
}

Wenn die Pfeiltaste einmal gedrückt wird, wird nacheinander umgeschaltet. Damit ist die Implementierung abgeschlossen.

abschließend

Die diesmal implementierten Folien waren mein eigener Folienmaster, aber Sie können Ihre eigenen Folien erstellen, indem Sie die Farben und das Layout im Programm anpassen. Versuch es bitte.

Recommended Posts

Präsentationsfolie mit Verarbeitung erstellt
Weihnachten mit Verarbeitung
Einfaches Hindernisrennen mit Java-Verarbeitung
Erste Schritte mit der Verarbeitung von Doma-Annotationen
Feder mit Kotorin --6 Asynchrone Verarbeitung
Unit Catcher von Processing
Pokemon Go gemacht mit Faker Gem
Ich habe mit Swing eine GUI erstellt
NLP4J 100 Sprachverarbeitungsklopfen mit NLP4J # 31 Verb
Mikro-Benchmark mit JFR-API
Verarbeitungsgeschwindigkeit mit und ohne statische Aufladung
Serververarbeitung mit Java (Einführung Teil.1)
Führen Sie in Java8 geschriebene Anwendungen in Java6 aus
Entwickeln Sie die Verarbeitung mit IntelliJ + Kotlin + Gradle
Bildverarbeitung: Spielen wir mit dem Bild