En opeens zijn we al bij les 4 van de cursus Apps om in te lijsten. In de fysieke workshop is dit vooral een les om je project af te maken, dus de beschrijving van dit verhaal zal redelijk kort zijn.

Je werkt delen met de wereld

Nu dat we bijna klaar zijn en jullie allemaal met wat zelfvertrouwen zelf projecten kunnen uitdenken en realiseren, wordt het tijd om het te hebben over hoe je je werk kan delen met anderen. Daarom als tussendoortje tijdens deze laatste bijeenkomst een overzicht van hoe je je werk kan delen. Als eerste gaan we kijken naar het exporteren van een afbeelding vanuit Processing. Zo kun je je werk delen op het internet. Dat kan door het toevoegen van de functie save

void draw(){
    rect(20,20,5,5);
//Deze regel
  save('frame.tiff');
}

Zoals je ziet is het niet heel moeilijk, de fuctie geeft aan dat je een afbeelding wil opslaan en als parameter geef je een bestandsnaam op. Naast tif kan Processing ook opslaan in jpg of png, ook kun je Processing het oplaten slaan in een directory, deze hoeft nog niet te bestaan, door het bij de bestandsnaam op te geven.

void draw(){
    rect(20,20,5,5);
//Deze regel
  save("afbeelding/frame.jpg");
}

Nu kun je save() in draw() stoppen, maar dan overschrijft Processing steeds hetzelfde plaatje wat niet altijd handig is. Vaak wil je zelf een specifiek moment uitkiezen dus is het logischer op een muisklik te zetten.

void draw() {
  rect(20, 20, 5, 5);
  if (mousePressed == true) {
    save("afbeeldingen/plaatje.jpg");
  }
}

Op deze manier slaat hij alleen een afbeelding op op het moment dat je de muis indrukt. Hij overschrijft nog steeds de bestaande afbeelding, maar op deze manier heb je wat controle over wat je plaatje wordt.

Mocht je het handiger vinden om als je vaker klikt Processing er een nieuw bestand van maakt, dan is daar ook een optie voor, die heeft niet save() maar saveFrame() en werkt als volgt.

void draw() {
  rect(20, 20, 5, 5);
  saveFrame("afbeeldingen/plaatje-####.jpg");
  }

Zoals je ziet is het bijna hetzelfde behalve dat je een aantal # hekjes toevoegd. Processing vult die straks in met een een getal zodat elk plaatje een uniek nummer heeft zoals plaatje-0001.jpg, plaatje-0002.jpg.

Video's maken

Omdat video eigenlijk niets anders is dan heel veel plaatjes achter elkaar zetten, kun je door saveFrame in draw te zetten heel veel plaatjes laten maken en deze met de tools --> Movie maker ombouwen tot een video.

Movie maker: Uitleg movie maker

PDF maken van je werk

Naast gewone afbeeldingen kan Processing ook PDF bestanden maken van je werk. DIt lijkt in eerste instantie niet heel boeiend, maar het grote voordeel van PDF is dat de output van vormen gebeurd in Vector vormen. Vector afbeeldingen zijn afbeeldingen die te vergroten zijn zonder kwaliteit verlies, waardoor het heel geschikt is voor bijvoorbeeld posters.

Er zijn meerdere manier om een PDF te exporteren die worden uitgelegd op de PDF Export pagina. De makkelijkste manier is om een beeld te tekenen en daarna Processing af te sluiten. Dit vereist dus een iets andere manier van werken dan je gewend bent, maar is soms makkelijk dat de PDF exporter meerdere frames mee te laten lopen. Een stukje voorbeeld code.

//
import processing.pdf.*;

void setup() {
  size(400, 400, PDF, "filename.pdf");
}

void draw() {
  // Draw something good here
  rect(10,10,380,380);
  rect(100,100,200,200);
  fill(255,0,0);
  rect(150,150,100,100);
  // Exit the program 
  println("Finished.");
  exit();
}

Kiosk Mode

Het exporteren van een video en het goed gebruiken van de PDF opties zijn best technisch, dus we gaan nu iets makkelijkers doen, het full-screen presenteren van je code. Dit kan heel makkelijk met ctrl+shift+r of cmd+shift+r op een Mac. Nu zie je dat Processing automatisch alles in je scherm zwart maakt en in het midden je werk zet.

Het is natuurlijk nog mooier als je sketch schermvullend was. Dat kan door in size, de resolutie van je scherm in te vullen, maar dit is lastig als je je werk ook op andere plaatsen wil laten zien. Daarom kun je ook gebruik maken van displayWidth en displayHeight, dit werkt ook op Tablets dus zo is je werk altijd schermvullend. Dit werkt trouwens niet in Javascript modus waar we zo naar gaan kijken.

void setup() {
  size(displayWidth,displayHeight);
}

Mocht je meerdere schermen hebben en je werkt op het tweede schermen willen laten zien. Dan vindt je onder Preferences de optie "Run sketches on display" waarna je het scherm nummer kan aanpassen.

aq_block_40

Javascript Mode

Het laatste wat ik wil laten zien is de Javascript mode, dit is net als de Anroid Mode een alternatieve mode in Processing die ervoor zorgt dat je werk niet als Java of Android applicatie wordt uitgeschreven maar als website element. Zo kun je bijvoorbeeld de achtergronden om je website interactieve maken.

ProcessingJS zit standaard niet in Processing maar is makkelijk te installeren als extra mode. Als je rechts bovenin kijkt zie je een blokje "JAVA". Als je hier op klikt zie je in het menu de optie, add mode. Als je hierop klikt laad er een lijst met extra modes die Processing nieuwe opties geeft, de ModeManager. Kies nu Javascript Mode, deze download en installeert zich dan. Als dat klaar is herstart je processing en kies je rechts bovenin JavaScript.

Alles blijft hetzelfde ,maar op het moment dat je op Play drukt exporteert Processing een website met daarin je werkende programma. Het mapje web-export dat in dezelfde map staat als je opgeslagen bestand kun je online ergens neer zetten om aan anderen te laten zien.

aq_block_45

In Javascript mode mogen soms dingen niet die in normaal Processing wel mogen en andersom. Daarom is het goed om als je een groter project maakt dat naast gewoon Processing ook javascript gebruikt, tussendoor te testen zodat je niet hele stukken opnieuw hoeft te schrijven omdat je ergens iets doet dat niet mag in Javascript mode.

Ik wil jullie allemaal erg bedanken voor het meedoen. Ik hoop dat jullie veel geleerd hebben. Je kunt nu natuurlijk nog lang geen GTA maken over programmeren voor Google, maar hopelijk denk je nu als je zoiets als je games of software ziet dat je nadenkt over hoe je het in kleine stukjes kan hakken zodat het je in staat stelt zelf kleine stukjes software te schrijven.