Processing workshop intro

953 views

Published on

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
953
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Processing workshop intro

  1. 1. Processing.org: Programovanie a digitálne umenie, Arduino
  2. 2. Úvod <ul><li>Processing.org </li><ul><li>Otvorené prostredie pre digitálnych umelcov
  3. 3. Vzniklo v r. 2001 na MIT (Media Lab)
  4. 4. GNU GPL, knižnice (core.jar) pod GNU LGPL
  5. 5. Založené na Jave
  6. 6. Množstvo knižníc (priamo pre Processing alebo pre jazyk Java) </li></ul><li>Arduino.cc </li><ul><li>Podobné prostredie pre programovanie HW </li></ul></ul>
  7. 7. Processing.org <ul><li>Prostredie </li><ul><li>Používajú aj iné projekty (napr. Arduino) </li></ul><li>Jazyk
  8. 8. Runtime </li><ul><li>Možnosť exportu do Java Appletov </li><ul><li>(a teda vloženie na web stránku) </li></ul><li>Možnosť použitia aj v iných Java aplikáciách (keď sa z prototypu stáva aplikácia) </li><ul><li>(pre pokročilých) </li></ul></ul></ul>
  9. 9. ,,Zjednodušená” Java <ul><li>Netreba poznať triedy (ale ak ich chcete, idú použiť)
  10. 10. Netreba sa starať o výnimky
  11. 11. Exportovateľné do Java Appletov a publikovateľné na webe
  12. 12. Portabilné prostredie, stabilné API
  13. 13. Netreba sa učiť nový jazyk
  14. 14. Znalosti sú priamo použiteľné pri robení Java programov </li></ul>
  15. 15. Minimalizmus <ul><li>Myšlienka sketchu (náčrtu) </li><ul><li>Maliar svoj nápad nakreslí na zdrap papiera
  16. 16. Programátor keď dostane nápad, mal by ho začať realizovať, nie rozmýšľať, ako načíta konfiguračný súbor, ako vytvorí hlavné okno </li></ul><li>Začať sa dá s dvomi metódami (procedúrami): setup() a draw() </li></ul>
  17. 18. Komunita <ul><li>Veľmi živá komunita
  18. 19. Niekoľko kníh
  19. 20. openprocessing.org
  20. 21. processing.org/exhibition
  21. 22. processing.org/learn </li><ul><li>Podrobná referenčná dokumentácia </li></ul><li>Fóra
  22. 23. Knižnice </li></ul>
  23. 24. Použiteľnosť <ul><li>2D a 3D grafika
  24. 25. Audio
  25. 26. Video
  26. 27. Komunikácia so zariadeniami (Arduino)
  27. 28. Sieť
  28. 29. Súbory </li></ul>
  29. 30. Arduino <ul><li>Otvorený HW </li><ul><li>Môžete si postaviť
  30. 31. Kúpiť kit a zletovať
  31. 32. Kúpiť postavené (aj u nás) </li></ul><li>Prostredie pre programovanie tohto HW
  32. 33. Množstvo rozšírení </li><ul><li>Bluetooth
  33. 34. Ethernet
  34. 35. Wifi
  35. 36. Senzory </li></ul></ul>
  36. 37. Podobné projekty <ul><li>Založené na processingu </li><ul><li>Processing.js
  37. 38. Arduino </li></ul><li>Iné prostredia pre dig. umelcov </li><ul><li>Pure Data
  38. 39. OpenFrameworks
  39. 40. Lily
  40. 41. Field </li></ul></ul>
  41. 42. Poďme na to! Úvod pre neprogramátorov <ul><li>Ľudia, ktorí zvládajú cykly, premenné, metódy a podmienky => začnite sa pozerať do príkladov (keyword: openprocessing)
  42. 43. Program je “recept”, ktorý sa vykonáva. Je to textový súbor, v ktorom sú napísané postupnosti úkonov. </li></ul>
  43. 46. Metódy (procedúry, funkcie) <ul><li>Pre zjednodušenie v tejto fáze: </li><ul><li>Pomenované miesta, odkiaľ sa vykonávajú inštrukcie receptu
  44. 47. Špeciálna metóda setup(), ktorá sa zavolá raz pri spustení
  45. 48. Špeciálna metóda draw(), ktorá sa zavolá vždy, keď je treba znova prekresliť obrazovku. Kód v draw() sa teda za normálnych okolností volá stále dookola
  46. 49. Setup: Príprava zariadení na výrobu pizze (rúra, vybratie riadu, ...). Draw: Robím pizzu. Keď dorobím, robím ďalšiu... </li></ul></ul>
  47. 50. Premenné <ul><li>Pomenované pamäťové miesta, v Processingu majú vždy typ.
  48. 51. int i; // vytvorím pamäťové miesto, celé číslo
  49. 52. i=2; // vložím do tohto miesta číslo 2
  50. 53. i=i*4; // vložím do tohto miesta to, čo je v mieste
  51. 54. // i prenásobené štyrmi </li></ul>
  52. 55. Spojenie metód a premenných (jednoduché) <ul><li>Pomocou metód môžeme robiť rôzne užitočné veci, napríklad kresliť alebo písať na obrazovku. Je to to, čo mnohí nazývajú “príkazmi”. Nakresli! Zmaž obrazovku! ... </li></ul>
  53. 56. Príklad
  54. 57. Súradnice <ul><li>Máme okno 300 x 300
  55. 58. Ľavý horný roh je 0 (X), 0 (Y)
  56. 59. Pravý horný roh je 299 (X), 0(Y)
  57. 60. Pravý dolný roh je 299 (X), 299(Y) </li></ul>
  58. 61. Podmienky <ul><li>Ak => tak / inak
  59. 62. if ( (i % 2) == 0) { </li><ul><ul><li>textColor(0); </li></ul></ul></ul>} else { textColor(255); }
  60. 64. Cykly <ul><li>10x zopakuj
  61. 65. Prejdi všetky nádoby na vajíčka a z každej vyber dva kusy
  62. 66. for (int i = 0; // Pred prvým vykonaním
  63. 67. i < 3; // Môžem vykonať krok?
  64. 68. i++) { // Čo po vykonaní kroku?
  65. 69. println(i);
  66. 70. } </li></ul>
  67. 71. Skúste naprogramovať hodinky <ul><li>rect(x, y, šírka, výška)
  68. 72. height
  69. 73. width
  70. 74. hour(), minute(), second()
  71. 75. fill(0) výplň čiernou (nulová svetlosť)
  72. 76. background(255) biele pozadie (najvyššia svetlosť)
  73. 77. size(400, 400) </li></ul>
  74. 78. Ďalší program -- súradnice <ul><li>Skúste naprogramovať sketch, ktorý pri každom prekreslení zvolí náhodný bod a napíše naň jeho súradnice
  75. 79. text(“[“ + x + “,” + y + “]”)
  76. 80. random(max) vráti číslo od 0 po max (ale okrem max)
  77. 81. (int) random(max) vráti iba celé číslo od 0 po max </li></ul>
  78. 82. Ďalší program -- krúžky <ul><li>Skúste naprogramovať sketch, ktorý pri každom prekreslení zvolí náhodný bod a nakreslí naň krúžok náhodnej veľkosti (prípadne dorobte pôvodný sketch aj so súradnicami) a dajte rôzne farby
  79. 83. ellipse(x, y, šírka, výška) </li></ul>
  80. 84. Ďalší program – pohyb za myšou <ul><li>Skúste naprogramovať sketch, ktorý bude pohybovať krúžkom po obrazovke za myšou
  81. 85. mouseX – súradnica X myši
  82. 86. mouseY – súradnica Y myši </li></ul>
  83. 87. Ďalší program -- pohyb <ul><li>Skúste naprogramovať sketch, ktorý bude náhodne pohybovať krúžkom po obrazovke </li></ul>
  84. 88. Ďalší program -- kvietky <ul><li>Skúste naprogramovať sketch, ktorý po kliku na dané miesto nakreslí kvietok
  85. 89. void mouseClicked() {
  86. 90. }
  87. 91. Spraviť metódu na kvietky
  88. 92. void nakresliKvietok(int x, int y) {
  89. 93. // v x, y sú súradnice, kam chceme nakresliť
  90. 94. // kvietok
  91. 95. } </li></ul>
  92. 96. Pre Java gurus <ul><li>Sketch je vlastne potomok triedy PApplet
  93. 97. Zabalenie do class {} vyrieši prostredie pred kompiláciou (s tým, že importy nechá mimo)
  94. 98. Všetky ostatné naše triedy sú inner classes
  95. 99. Všetky metódy sú vlastne metódami PApplet , preto ich magicky vidíme </li></ul>
  96. 100. Poďme programovať :) <ul><li>http://processing.org/learning/basics/
  97. 101. http://processing.org/reference/ </li></ul>

×