Projektowanie przewodnika multimedialnego w języku Processing

Wstęp

W tym materiale stworzysz interaktywną aplikację od podstaw. Zaplanujesz wygląd, działanie oraz pozyskasz odpowiednie zasoby potrzebne do zrealizowania tej aplikacji. Będzie to przewodnik multimedialny po największych miastach w Polsce napisany w języku Processing. Ważne jest, aby znać wady oraz zalety dostępnych języków programowania, pozwala to umiejętnie dobierać odpowiedni język programowania do pisanej przez nas aplikacji. W tym przypadku powinno głównie zależeć nam na obsłudze zdarzeń generowanych przez użytkownika, możliwości pracy z tekstem, filmami, dźwiękiem oraz ilustracjami. Do realizacji naszej aplikacji wybierzemy zatem język Processing. Dodatkowym atutem tego języka jest nieskomplikowana składnia. Poniżej realizowany jest przykładowy przewodnik, oznacza to, że na każdym etapie możesz modyfikować, dodawać lub usuwać poszczególne elementy, w taki sposób, aby końcowy efekt był bliski twojej wizji.

Zanim zostanie napisana pierwsza linijka kodu przewodnika multimedialnego, należy najpierw odpowiedzieć na pytania:

Jaka jest ogólna koncepcja?

Przewodnik multimedialny zdecydowanie powinien zawierać tematyczne obrazy lub video. Dodatkowo warto pomyśleć nad ścieżką dźwiękową. Kolorystycznie przewodnik może być związany z biało‑czerwoną flagą Polski. Wykorzystanie mapy Polski do nawigacji może również okazać się przydatne. Należy pamiętać również o grafikach na poszczególne ikony.

Jakich narzędzi będziemy potrzebować?

Mając ogólny zarys, można zastanowić się nad kolejnym pytaniem, otóż trzeba będzie wykorzystać zewnętrzne biblioteki, znajdujące się na stronie środowiska http://processing.org/reference/libraries/ takie jak:

R1RJKbkI4Zgn2

Ilustracja przedstawia zrzut ekranu ze środowiska processing. Otwarte jest okno importowania bibliotek, wypisana jest lista dostępnych bibliotek do zainstalowania. Na samej górze listy znajdują się dwie biblioteki, które mają ciemnoniebieski znaczek przy sobie, oznacza to, że zostały już zainstalowane, są to: Minim oraz Video Library for Processing 4

Po zainstalowaniu dwóch powyższych bibliotek, na samym początku kodu należy dodać:

import processing.video.*; // biblioteka video
import ddf.minim.*; // biblioteka dźwięku

Jak ma działać?

Teraz trzeba pomyśleć nad działaniem przewodnika multimedialnego i zacząć od ekranu startowego, który wyświetli się raz podczas uruchomienia programu, a następnie przejść do ekranu głównego. Dobrym pomysłem może być wybór miasta poprzez wskazanie na mapie. Najważniejszym elementem będzie właśnie ekran główny, gdzie będziemy wskazywać miasto. Należy jasno przedstawić co zostało wskazane, na poniższej grafice, po najechaniu myszką na ikonę miasta pojawia się napis Warszawa. Przewodnik multimedialny musi mieć ekran, na którym zostaną przedstawione informacje o wybranym mieście. Trzeba zapewnić możliwość swobodnego przemieszczania się po ekranach. Podczas wyświetlania miasta, ikona powrotu powinna być widoczna. Należy pamiętać również o dodaniu opcji wyciszenia muzyki.

R1UdiIVhv7NzD

Ilustracja przedstawia białą mapę Polski na czerwonym tle. Na mapie umieszczone są czerwone zabytki. Miejsce położenia poszczególnego zabytku oznacza miasto, w którym się znajduje. W lewym dolnym rogu ilustracji znajduje się napis: wybierz miasto. Kursor myszki wskazuje na jeden z zabytków, Pałac Kultury i Nauki w Warszawie. Nad mapą znajduje się napis Warszawa.

Zmienne

Najpierw powinno się zadeklarować zmienne, będziemy potrzebować zmiennych, które przechowują ikony PImage, video dla każdego miasta typu Movie. Do ścieżki dźwiękowej potrzeba dwóch zmiennych typu Minim oraz AudioPlayer. Na koniec potrzeba kilku zmiennych typu int oraz String, aby zsynchronizować działanie programu.

String ekran;  // informacja dotycząca obecnego ekranu
PImage intro;  // obraz na ekranie powitalnym
PImage intro_glowny; // obraz na ekranie głównym
PImage ikona_wroc;  // ikona powrotu do ekranu głównego
PImage ikona_wycisz; // ikona wyciszenia muzyki
PImage ikona_graj; // ikona wznowienia muzyki
String miasto; // informacja jakie miasto zostało wybrane
String opis; // opis miasta, który zostanie wyświetlony na ekranie miasta
int muzyka; // informacja czy ścieżka dźwiękowa jest włączona (1 – włączona, -1 – wyłączona)
Minim minim; // zmienne ścieżki dźwiękowej
AudioPlayer player;
Movie movieWroclaw; // video dla każdego miasta
Movie moviePoznan;
Movie movieLodz;
Movie movieKrakow;
Movie movieWarszawa;
Movie movieGdansk;

Funkcja setup()

Mając gotowe zmienne, należy przypisać do nich odpowiednie wartości. Służy do tego funkcja setup(), która jest wywoływana tylko raz przy uruchamianiu programu, ustalając wszystkie niezbędne warunki początkowe do działania aplikacji. Rozmiar okna ustawiamy funkcją size(x, y), gdzie x – szerokość okna, y – wysokość okna. Obrazki ładowane będą funkcją loadImage(), gdzie jako parametr podajemy adres URL do obrazka w folderze projektu. Dodając ścieżkę dźwiękową należy utworzyć nową instancję Minim oraz wykorzystać ją do załadowania pliku z rozszerzeniem mp3 za pomocą loadFile(), który również przyjmuje adres URL. Następnie uruchamiamy wczytany plik poleceniem play(). Kolejne linijki to wczytywanie video, w tym celu tworzymy nowy obiekt Movie oraz podajemy adres URL video. Polecenie loop() sprawia, że video uruchomi się ponownie po zakończeniu.

void setup() {
  size(700, 700); // ustawienie rozmiaru okna aplikacji
  intro = loadImage("grafika/intro.png");
  intro_glowny = loadImage("grafika/intro_napis.png");
  ikona_wroc = loadImage("grafika/ikona_wroc.png");
  ikona_wycisz = loadImage("grafika/ikona_wycisz.png");
  ikona_graj = loadImage("grafika/ikona_graj.png");
  miasto = "";
  ekran = "powitalny";
  opis = "";
  muzyka = 1;
  minim = new Minim(this);
  player = minim.loadFile("muzyka/music.mp3");
  player.play();
  movieWroclaw = new Movie(this, "video/Wroclaw.mp4");
  movieWroclaw.loop();
  moviePoznan = new Movie(this, "video/Poznan.mp4");
  moviePoznan.loop();
  movieLodz = new Movie(this, "video/Lodz.mp4");
  movieLodz.loop();
  movieKrakow = new Movie(this, "video/Krakow.mp4");
  movieKrakow.loop();
  movieWarszawa = new Movie(this, "video/Warszawa.mp4");
  movieWarszawa.loop();
  movieGdansk = new Movie(this, "video/Gdansk.mp4");
  movieGdansk.loop();
}

Dodatkowo należy umieścić w kodzie funkcję movieEvent(), sprawia ona że kolejna klatka filmu zostanie wychwycona za pomocą read().

void movieEvent(Movie video){
   video.read(); 
}

Funkcja draw()

Funkcja draw() będzie wykonywana ciągle, zaraz po wykonaniu instrukcji setup(), do czasu kiedy zostanie przerwane wykonywanie programu lub będzie uruchomiona inna instrukcja. W przypadku projektowanego przewodnika należy utworzyć różne funkcje rysujące poszczególne ekrany dla każdego miasta, w zależności od wybranej pozycji z menu. Będą tutaj warunki sprawdzające jakie okno powinno zostać uruchomione, w zależności od wartości zmiennej ekran.

void draw() {
  switch(ekran){
    case "powitalny":
      ekran_powitalny();
    break;
    
    case "glowny":
      ekran_glowny();
      if(muzyka == 1){
        image(ikona_graj, 650, 0);
      }
      else if(muzyka == -1){
        image(ikona_wycisz, 650, 0);
      }
    break;
    
    case "miasto":
      ekran_miasta(miasto);
    break;
  }
}

Funkcje okien/ekranów aplikacji

Ekran powitalny

Regl6axhKeHyQ

Grafika przedstawia ekran powitalny w barwach narodowych z mapą Polski. W granicach kraju umieszczony jest napis "Przewodnik po największych miastach w Polsce". Pod mapą na kolorowym tle znajduje się napis "Kliknij myszką, aby rozpocząć".

Kod ekranu powitalnego:

void ekran_powitalny(){ 
   background(255, 0, 0); 
   image(intro,0,0);
   textSize(20); 
   text("Kliknij myszką, aby rozpocząć", 100, 670); 
}

Ekran menu głównego z miastami

RKKMLeqbYqPH1

Grafika przedstawia ekran menu głównego przewodnika po największych miastach w Polsce utrzymany w barwach narodowych. Tłem jest mapa Polski. W granicach kraju umieszczone jest sześć charakterystycznych budowli z wybranych miejscowości m.in. Stocznia Gdańska i Płac Kultury. Pod mapą znajduje się napis "Wybierz miasto". W prawym górnym rogu znajduje się głośniczek.

Kod ekranu menu główne, rozmieszcza wcześniej zaprojektowane tło (kontur Polski):

void ekran_glowny(){ 
   background(255, 0, 0); 
   image(intro_glowny, 50, 100, 600, 600);
   color(0,0,0);
   textSize(20); 
   text("Wybierz miasto", 40, 650);
   textSize(50); 
   text(miasto, 350 - textWidth(miasto)/2, 60);
}

Ekrany miast

R19RNedzNnS47

Grafika przedstawia ekran miasta Warszawa w przewodniku po największych miastach w Polsce. W górnej części ekranu znajduje się fotografia z Warszawy przedstawiająca z poziomu ulicy Pałac kultury i wieżowce w tle. Poniżej znajduje się podpis "Warszawa" - "Stolica Polski i województwa mazowieckiego".

Ekrany poszczególnych miast, będą się różnić w zależności od wczytanego miasta. Dlatego potrzeba kilku zmiennych odpowiedzialnych za video. O tym, które z wideo zostanie wyświetlone zadecyduje instrukcja wyboru switch(miasto).

Opisy miast zostały napisane w celach demonstracyjnych, zaleca się ich zmianę lub rozszerzenie o dodatkowe informacje.

void ekran_miasta(String miasto){
    background(255, 0, 0);
    switch(miasto){
       case "Wrocław":
         image(movieWroclaw, 0, 50, 700, 300);
         opis = "Miasto na prawach powiatu w południowo-zachodniej Polsce.";
       break;
       case "Poznań":
         image(moviePoznan, 0, 50, 700, 300);
         opis = "Miasto na prawach powiatu w zachodniej Polsce.";
       break;
       case "Łódź":
         image(movieLodz, 0, 50, 700, 300);
         opis = "Miasto na prawach powiatu w środkowej Polsce.";
       break;
       case "Kraków":
         image(movieKrakow, 0, 50, 700, 300);
         opis = "Miasto na prawach powiatu położone w południowej Polsce nad Wisłą. \n" +
                "Formalna stolica Polski do 1795 roku i miasto koronacyjne wraz z nekropolią \n" + 
                "królów Polski na Wzgórzu Wawelskim.";
       break;
       case "Warszawa":
         image(movieWarszawa, 0, 50, 700, 300);
         opis = "Stolica Polski i województwa mazowieckiego.";
       break;
       case "Gdańsk":
         image(movieGdansk, 0, 50, 700, 300);
         opis = "Miasto na prawach powiatu w północnej Polsce.";
       break;
    }
    textSize(50);
    text(miasto, 350 - textWidth(miasto)/2, 400);
    image(ikona_wroc,0,0);
    textSize(20);
    text(opis, 50, 450);
    
 }

Funkcje odpowiedzialne za interakcje

Funkcje odpowiedzialne za interakcje pozwolą obsłużyć reakcje aplikacji na zachowania myszy. Pomocne są tutaj zmienne systemowe mouseX oraz mouseY, które przechowują pozycję kursora od punktu (0, 0), czyli lewego górnego rogu okna programu.

mousePressed()

Pierwsza funkcja odpowiada za reakcję na kliknięcie dowolnego przycisku myszy, aplikacja musi mieć różne zachowanie w zależności od ekranu, na którym obecnie znajduje się użytkownik.

void mousePressed(){
   switch(ekran){
     case "powitalny":
        ekran = "glowny"; 
     break;
     
     case "glowny":
       if(miasto != ""){
            ekran = "miasto";
       }
       if(mouseX > 650 && mouseY < 50){
            if(muzyka == 1){
               player.pause();
            }
            else if(muzyka == -1){
               player.play(); 
            }
            muzyka*=(-1);
       }
     break;
     
     case "miasto":
       if(mouseX < 50 && mouseY < 50){
          ekran = "glowny";
       }
     break;
   }
}

mouseMoved()

Kolejna funkcja dotyczy pozycji kursora na ekranie, jest ona uruchamiana za każdym razem, gdy mysz zostanie poruszona.

void mouseMoved(){ 
   if(ekran == "glowny"){
      if( mouseX > 140 && mouseX < 252 && mouseY > 392 && mouseY < 504) {
        miasto = "Wrocław";
      }
      else if( mouseX > 140 && mouseX < 252 && mouseY > 224 && mouseY < 336) {
        miasto = "Poznań";
      }
      else if( mouseX > 308 && mouseX < 420 && mouseY > 308 && mouseY < 420) {
        miasto = "Łódź";
      }
      else if( mouseX > 336 && mouseX < 448 && mouseY > 504 && mouseY < 616) {
        miasto = "Kraków";
      }
      else if( mouseX > 420 && mouseX < 532 && mouseY > 280 && mouseY < 392) {
        miasto = "Warszawa";
      }
      else if( mouseX > 224 && mouseX < 336 && mouseY > 112 && mouseY < 224) {
        miasto = "Gdańsk";
      }
      else {
        miasto = "";
      }
   }
} 
 

Podsumowanie projektu

Przewodnik powstał w oparciu o wcześniej ułożony plan aplikacjiDhXsTzptplan aplikacji. Oczywiście taki przewodnik można zrobić na wiele sposobów. Poniżej można pobrać kod razem z obrazami, video oraz ścieżką dźwiękową użytą w projekcie. Żeby dokładnie zrozumieć działanie, najlepiej jest uruchomić i poeksperymentować z kodem lub napisać własny przewodnik.

Wykorzystaj poniższy dzienniczek do zapisania swoich notatek i przemyśleń.