Processing 3.0 a p5.js
Transkript
Processing 3.0 a p5.js Marek Brychta Ladislav Hagara Petr Hvižď Miroslav Lábr OpenAlt, Brno, 7. listopadu 2015 Processing 3.0 a p5.js Volné pokračování přednášky z OpenAltu 2014. Představení nových vlastností Processingu 3.0, nejnovější verze tohoto multiplatformního otevřeného relativně jednoduchého programovacího jazyka, který vznikl proto, aby mohli neprogramátoři, především umělci a designéři, snadno a rychle vytvářet obrázky, vizualizace a animace. Dnes je Processing oblíben nejenom mezi umělci. Rádi po něm sáhnou i opravdoví programátoři nebo učitelé, kteří jej používají při výuce programování. Společně s Processingem 3.0 bude představena také javascriptová knihovna p5.js. Součástí přednášky bude řada praktických ukázek. Ladislav Hagara Miroslav Lábr Petr Hvižď Marek Brychta OpenAlt 2014 https://openalt.cz/2014/ Processing https://processing.org/ Multiplatformní otevřený programovací jazyk, vývojové prostředí a online komunita. Vznikl v roce 2001, studenti MIT Media Lab, Benjamin Fry a Casey Reas. Relativně jednoduchý programovací jazyk, který vznikl proto, aby mohli neprogramátoři, především umělci a designéři, snadno a rychle vytvářet obrázky, vizualizace a animace. Syntaxe je velmi podobná jazyku Java (C++, C). Processing Foundation https://processingfoundation.org/ Nadace založená v roce 2012 (Processing 2001), cílem je umělcům přiblížit programování a programátorům umění, pomocí třech softwarových projektů: Processing (Java), p5.js (Javascript), Processing.py (Python). Proč p5.js? Doména processing byla obsazena, používali proce55ing.net. Zkráceně říkali Processingu (Proce55ingu) p5. Doménu následně získali, p5 se často používá dodnes. Proto p5.js. Processing.js http://processingjs.org/ - Využívá JavaScript Běží ve webovém prohlížeči Nepotřebuje žádné rozšíření Canvas (HTML5 prvek) OpenProcessing http://openprocessing.org/ - Online komunitní platforma - Mnoho volně dostupných Sketchů Processing 3.0 Od Processingu 3.0.1 podpora architektury ARMv6hf. K dispozici obraz Raspbiana s nainstalovaným Processingem. https://github.com/processing/processing/wiki/Raspberry-Pi#download Prostředí Processingu 2.1 Prostředí Processingu 3.0.1 - javascriptové řešení processingu - “stand-alone” processing pro webový prohlížeč - interakce s webovými prvky (HTML5 objekty…) - stále se vyvíjí p5.js jak to funguje - vložení skriptů do HTML stránky p5.js ukázky Vykreslení elipsy p5.js ukázky Kreslení “červa” p5.js ukázky 3D rotace s WebGL p5.js vs processing - dle dokumentace chybí implementace 3D, PShape, PFont - datové typy boolean, int, float, string, array, PImage => var - processingové třídy => javascriptové prototypy - void funkce() => function funkce() - size() => createCanvas() p5.js vs processing p5.js editor - beta verze 0.5.6 Processing 3 - novinky Seznam novinek - Debugger, - Tweak mode, - čísla řádků, - Variable inspector, - Find in Reference - Show Usage..., - Rename..., - Find in references (lokálně) - automatická kontrola (chybějící středník, duplicitní proměná), - kontrola aktuálnosti knihoven (jen některé) - prezentační mód, - chybí Save tlačítko :-(, - metoda Size(x, y) musí být první :-(. Novinky - Debuger Aktivace: - Debug -> Enable Debugger, - Kliknutí na “broučka” v pravo nahoře. Obrázek: http://www.stevenbrown.ca/blog/archives/225 Novinky - Debuger Breakpoint - zájmové místo v kódu, - průběh kódu se na něm zastavuje, - nedávat metody objektů. Continue - krokování po breakpointech Step - krokování po řádcích Step Into - vnoření krokování do metody Step Out - vynoření se z metody Obrázek: http://www.stevenbrown.ca/blog/archives/225 Novinky - Debuger Variable inspektor: - Na začátku je prázdný, - zobrazuje proměnné v rámci metody (funkce), Obrázek: http://www.stevenbrown.ca/blog/archives/225 Novinky - Tweak mode - Ovlivňování proměnných za běhu aplikace, Aktivace: Sketch -> Tweak, lze ovlivňovat pouze proměnné vyjádřené číslem, hodnota se mění tažením myši (nelze zapisovat), v kódu zobrazuje rozsah i barvu. - Testování za provozu: Praktická ukázka - File -> Examples... -> Basic -> ArrayObjects, - Debbuger, - Tweak mode. Změna velikosti okna za běhu - Processing 2.x: - Processing 3.x: Processing a Java - Processing - Ihned konvertován - Import knihoven - Java - Processing - Podtřídou Applet Java Class - Nekompatibilní s OpenJava :-( - Java - Mnoho knihoven - Provázání funkcí či metod s Processingem Java kód v prostředí Processing - Jednoduchá implementace - Knihovny Javy volány jednoduše, stačí mít pouze nainstalovanou Javu v PC import javax.swing.JButton; import javax.swing.JTextArea; import java.awt.EventQueue; import java.awt.BorderLayout; import java.awt.Color; import java.awt.GridLayout; import java.awt.event.ActionListener; import java.awt.event.ActionEvent; import javax.swing.JColorChooser; JFrame guiFrame; JTextArea tracker; JPanel optPanel; - Zápis několika knihoven v 1 balík import java.awt.* - Jednoduché využití různých předprogramovaných Java tříd void setup(){ size(200,200); ColorChooserProgram(); } void draw() {} public void ColorChooserProgram() { guiFrame = new JFrame(); …… } Aktuálnost knihoven Processingu - Postupný update knihoven pro verzi Processingu 3.0 - Možnost využití knihoven Javy - Aktuálnost stojí na vývojářích Ukázka Javy v Processingu - Příklad tzv. JColorChooser class - Další užitečné třídy - Class JFileChooser,JLabel, JLayer, JLayeredPane, JList, JMenuBar, JOptionPane, JPanel, JPopupMenu, JProgressBar, JRootPane, JScrollBar, JScrollPane Porovnání syntaxe JAVA Processing public class Program { void setup(){ } /** * @param args the command line arguments */ public static void main(String[] args) { // TODO code application logic here } } void draw(){ } Implememtace Javy do Processingu void setup(){ new DisplayFrame().setVisible(true); } public class DisplayFrame extends javax.swing.JFrame { public DisplayFrame(){ this.setSize(600, 600); //The window Dimensions setDefaultCloseOperation(javax.swing.WindowConstants. EXIT_ON_CLOSE); this.setVisible(true); } } Processing v Javě import processing.core.*; public class ProcessingSketch extends PApplet { public static void main (String args[]) { PApplet.main(new String[] { "--present", "processing.ProcessingSketch" }); } public void setup() { size (200, 200); background (0); } public void draw() { stroke (255); if (mousePressed) { line (mouseX, mouseY, pmouseX, pmouseY); } } } Arkanoid 1.0 https://processing.org/books/ https://www.namu.cz/item.php?item=240 http://natureofcode.com/ http://hello.processing.org/ http://www.funprogramming.org/ Daniel Shiffman https://www.youtube.com/user/shiffman https://www.coursera.org/ Kadenze https://www.kadenze.com/ Introduction to Programming for the Visual Arts with p5.js Processing 3.0 a p5.js Marek Brychta Ladislav Hagara Petr Hvižď Miroslav Lábr OpenAlt, Brno, 7. listopadu 2015
Podobné dokumenty
Školní časopis Jednička - 1. ZŠ Rakovník, Martinovského 153
Chat - je l okénko, kde si člověk může psát přímo s dalším uživatelem Streamer - je člověk, který streamuje videa na youtube Hejter - je člověk, který provokuje youtubera, píše mu zpávy, nadává mu ...
VíceoVirt - virtualizace datacentra aneb správa
Je možné vytvořit migrační politiku, která přesune virtuální stroje v době nízké zátěže. Uvolněné fyzické stroje je možné nechat automaticky vypnout.
VíceM. Šimánek Oddělení nukleární medicíny Nemocnice Pelhřimov p.o.
kardiologù k vlastnoruènì provádìným vyšetøením. Øada hùøe vyšetøitelných pacientù mùže být vyšetøena i na MR . Izotopová ventrikulografie mùže být užita tam, kde je potøeba sledovat relativnì pøes...
VíceŠVP oboru 18-20-M/01 – Informační technologie
základy, elektrotechnické součástky, stroje a zařízení, jejich navrhování, instalaci až po měření a provozování řídících obvodů a systémů používaných v různých technických zařízeních. Získají schop...
VíceŠkolní vzdělávací program - Vyšší odborná škola a Střední odborná
základy, elektrotechnické součástky, stroje a zařízení, jejich navrhování, instalaci až po měření a provozování řídících obvodů a systémů používaných v různých technických zařízeních. Získají schop...
VíceModulární systém kurzů programovacích nástrojů Borland
ani tuto problematiku nepokrývá zcela. Nezabývá se například tvorbou vlastních jednotek nebo možnostmi Turbo Pascalu vázanými na zabudovaný překladač assembleru apod., především z důvodu rozsahu tě...
VíceZDE - JJ
1. Přehled 1.1. O programu Výukový program pro počítání s maticemi a vizualizaci základních úprav. 1.2. Požadavky Ke spuštění appletu je potřeba prohlížeč podporující Java applety a nainstalované ...
Více8. Grafické uživatelské rozhraní
(viz obrázek), přičemž do každé z nich lze vložit pouze jednu komponentu (může to být instance třídy JPanel, do které lze vložit další komponenty). Velikost komponenty závisí na oblasti do které je...
VíceJak bych to v Mozille (ne)dělal lépe
Skupina lidí, co má ráda projekt Mozilla, jeho cíle a aktivně jej podporuje. Často neformální uskupení bez právní subjektivity. A rozdílným záběrem. Lokální tým neznamená lokalizační tým (ale může)...
Více