01 - Úvod - kreslenie

Oboznámenia sa s editorom, statické kreslenie 2D tvarov a práca s farbou.

Pre písanie programov (resp. "sketchov") pre p5.js používame webový editor:

p5.js Web Editor

P5.js je knižnica pre JavaScript - celý vývoj previeha vo webovom ekosystéme" HTML + CSS + JS - príde aj to.

p5.js je otvorený projekt s velmi symaptickým community statetementom: https://p5js.org/community/

Editor

Jediná požiadavka pre prácu s editorom je browser a funkčné pripojenie na internet.

1. Registrácia - ku svojim sketchom sa neskôr vieš vrátiť z kadekoľvek a kedykoľvek.

2. Vieš si ich ukladať a duplikovať.

3. Auto-refresh -> vidíš výsledok kódu v reálnom čase

4. Vygenerovaný sketch vieš zazdielať

Sketch

Funkcia setup() - spustí sa iba raz na začiatku

Funkcia draw() - volá sa dookola - 60 x za sekundu

Funkcie - 2D Primitives

arc - ellipse - line - quad - rect

https://p5js.org/learn/coordinate-system-and-shapes.html

Popis zabudovaných funkcií v knižnici pre vykreslovanie 2D tvarov nájdete v referenčnej príručke:

reference | p5.js

Referenčná príručna - tvoj najlepší priateľ

X, Y koordináty vidí počítač takto /resp. vykresluje pixle z ľavého horného rohu/

1. úloha: "autoportrét"

Vyskladaj základné primitívy na ploche a nakresli "autoportrét" - v tomto kroku bez farieb.

Príklad:

p5.js Web Editor

// https://editor.p5js.org/igor-kamil/sketches/7ifAYniIr

function setup() {
  createCanvas(400, 400);
}

function draw() {
  background(220);
  strokeWeight(1);
  rect(100, 100, 200, 200, 60);
  
  // oci
  ellipse(160, 165, 30, 20);
  ellipse(160, 165, 10);

  ellipse(240, 165, 30, 20);
  ellipse(240, 165, 10);

  // usta
  line(180, 260, 250, 280); 

  // nos
  line(200, 200, 210, 230);

  // krk
  strokeWeight(74);
  line(200, 340, 200, 400);
}

2. úloha: generovaný portrét

Predstavme si vygenerovanie portrétu pre zadané meno. Pre každého jeho vlastný unikátny portrét.

Inšpiráciou je tu FullaGenerátor od Ondreja Jóba:

Fulla GenerátorFulla Generátor

Do existujúceho portrétu pridáme premennú, s ktorou môžeme následne pracovať:

let name = "Igor";

Pridaj metódy na generovanie tvarov podľa znakov v mene. Nápady:

• ak končí meno na "a" (), bude to asi žena

  //hlava
  if (name.endsWith('a')) {
    // zena
  } else {
    // muz
  }

• ak modulo % 7 vrati 0, daj na hlavu korunu

• počet znakov v mene

• atď

Výsledok:

Farby

learn | p5.js

Learn color on p5.js

Funkcie fill, stroke, background majú ako parameter farbu.

2. úloha: "autoportrét vo farbe"

1. "File -> Duplicate" svoj sketch.

2. Premenuj

3. Vyfarbi svoj "autoportrét"

4. BONUS: vyskúšaj aj strokeWeight

5. BONUS2: pohraj sa s priesvitnosťou / alpha

Inšpirácia:

Úloha na doma: z tvarov vytvor "shape monster"