> For the complete documentation index, see [llms.txt](https://vyuka.digitalneumenia.sk/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://vyuka.digitalneumenia.sk/kp-3/01-uvod-kreslenie.md).

# 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:

{% embed url="<https://editor.p5js.org/>" %}

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

{% hint style="info" %}
p5.js je otvorený projekt s velmi symaptickým community statetementom: <https://p5js.org/community/>
{% endhint %}

### Editor

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

![](https://3183137632-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FruzCl9CO3cPM3ZRrt5RV%2Fuploads%2F5rp7kzduu0upfiNGazRK%2Ffirst-sketch.png?alt=media\&token=5f17134b-1220-4ee5-af68-0412f07f8b91)

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

![](https://3183137632-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FruzCl9CO3cPM3ZRrt5RV%2Fuploads%2F9zzCJsATKh5cKtJWVVuC%2FSni%CC%81mka%20obrazovky%202022-09-26%20o%2012.09.25.png?alt=media\&token=f62befe5-50d6-43c5-8d9a-17946f42e94e)

### Funkcie - 2D Primitives

<figure><img src="https://3183137632-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FruzCl9CO3cPM3ZRrt5RV%2Fuploads%2FPlEWBdAfyhM749H36sS2%2FvisualThumbnail1142253%402x.jpeg?alt=media&amp;token=a33cddc7-a4c5-4619-af98-1ce5fb718c6c" alt=""><figcaption><p>arc - ellipse - line - quad - rect</p></figcaption></figure>

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

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

{% embed url="<https://p5js.org/reference/>" %}
Referenčná príručna - tvoj najlepší priateľ
{% endembed %}

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

![](https://3183137632-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FruzCl9CO3cPM3ZRrt5RV%2Fuploads%2FpUIqJKhzkBjyD239hWQw%2FSni%CC%81mka%20obrazovky%202022-09-26%20o%2012.15.20.png?alt=media\&token=02b9a6fd-bd96-42f9-b136-b8f2059a12d2)

#### 1. úloha: "autoportrét"

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

Príklad:

{% embed url="<https://editor.p5js.org/igor-kamil/sketches/7ifAYniIr>" %}

```javascript
// 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);
}
```

![](https://3183137632-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FruzCl9CO3cPM3ZRrt5RV%2Fuploads%2FfMw6GYmSuviVeeVH2rZG%2FSni%CC%81mka%20obrazovky%202022-09-26%20o%2012.29.09.png?alt=media\&token=fffdc9f7-4e8c-4e24-8975-4b93db5dfae0)

#### 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:

{% embed url="<https://www.setuptype.com/x/fulla/>" %}

![](https://3183137632-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FruzCl9CO3cPM3ZRrt5RV%2Fuploads%2FCG7vCbh568Y1fhmDMqIk%2FSni%CC%81mka%20obrazovky%202023-09-19%20o%2011.40.27.png?alt=media\&token=19d31ee8-6238-44a7-9ca6-0ebb4f658fc4)

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

```javascript
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

```javascript
  //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:

![](https://3183137632-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FruzCl9CO3cPM3ZRrt5RV%2Fuploads%2FNpXmcn0LtAOIMnYH26jO%2FSni%CC%81mka%20obrazovky%202023-09-19%20o%2012.57.49.png?alt=media\&token=f71051aa-49f1-4205-bc84-364e3963fb78)

### Farby

{% embed url="<https://p5js.org/learn/color.html>" %}
Learn color on p5.js
{% endembed %}

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

![](https://3183137632-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FruzCl9CO3cPM3ZRrt5RV%2Fuploads%2Fxp4vNmpLoNw9QpaPNKSJ%2FSni%CC%81mka%20obrazovky%202022-09-26%20o%2012.45.01.png?alt=media\&token=01ab5c57-5d51-436a-b45a-c56e8b383c0a)

#### 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:

<div><figure><img src="https://3183137632-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FruzCl9CO3cPM3ZRrt5RV%2Fuploads%2FRNxipt4j7qVziNll45uN%2FSni%CC%81mka%20obrazovky%202022-09-26%20o%2012.49.25.png?alt=media&amp;token=72c76788-fd8f-4b02-9b26-b75b0ca85951" alt=""><figcaption></figcaption></figure> <figure><img src="https://3183137632-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FruzCl9CO3cPM3ZRrt5RV%2Fuploads%2FHixrMUGxvW8RoaJOeo9B%2FSni%CC%81mka%20obrazovky%202022-09-26%20o%2012.49.12.png?alt=media&amp;token=51006e1b-c07f-4eab-bbdb-c08ba0b007ba" alt=""><figcaption></figcaption></figure> <figure><img src="https://3183137632-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FruzCl9CO3cPM3ZRrt5RV%2Fuploads%2FFFBUrqRjxEgrj2BskKGP%2FSni%CC%81mka%20obrazovky%202022-09-26%20o%2012.49.18.png?alt=media&amp;token=15ef3104-3204-4510-82f0-cb10e67370f2" alt=""><figcaption></figcaption></figure></div>

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