Kevin Systrom z Instagramu vysvětluje pixely a jak fungují filtry

Spoluzakladatel Instagramu vysvětluje, jak jsou obrázky reprezentovány v binární formě a jak uvnitř fungují filtry obrázků. Toto video je součástí seriálu lekcí Code.org pro kurz Principy počítačové vědy (Computer Science Principles). Více o programu kurzu najdete na http://code.org/educate/csp. Další výuková videa můžete najít na Code.org (http://code.org/educate/videos).

Děkujeme Kevinu Systromovi a Instagramu a Piper Hansonové (http://piperhanson.com).

Něco o pixelech

Fajn.

Spolu s Mikem jsme založili Instagram.

Na začátku jsme v mobilech viděli
příležitost vytvářet něco nového.

Protože to bylo poprvé, kdy lidé začali
nosit počítač v kapse.

Napadlo nás, že sdílení obrázků nejspíš
bude největší příležitost v dalších pěti letech,

která je nám blízká, něco, čemu
chceme věnovat svůj čas.

je skvělé říct, že máte aplikaci nebo
nápad, který dělá x, y nebo z, ale dokud

neřeší skutečný problém lidí, nebudou to
používat. Otázka zní: Jaký problém řešíte?

(Piper - fotografka) Když lidé poprvé
chtěli ukázat obrázek na obrazovce,

museli převést obrázek
na data. V roce 1957

Russel Kirsch, jeden z prvních počítačových
inženýrů, udělal fotku svého synka a

naskenoval ji. Šlo o první digitální
obrázek, zrnitý černobílý obrázek.

A tak přišel na svět pixel! Pixely jsou
zajímavá myšlenka, jen tak je neuvidíte.

Když si však vezmete lupu a přiblížíte ji
obrazovce, pak uvidíte, že

se vaše obrazovka skládá z mnoha malých
světelných teček. Co je ještě zajímavější

tyto malé světelné tečky se ve skutečnosti
skládají z více malých světel různých

barev: červené, zelené a modré. Pixely
společně, když se podíváte z dálky, vytváří

obraz, přitom jde jen o malá světýlka,
která se zapínají a vypínají. Jejich kombinace

vytváří obrazy, které vidíte na obrazovce
pokaždé, když používáte počítač.

Často slyšíte o rozlišení, jak v
informatice, tak od výrobců zařízení.

Rozlišení je míra, kterou udáváme,
kolik je

na obrazovce pixelů. Kdysi dávno, když
jsem byl na střední, to bylo 640 na

480 pixelů. Dnes je to mnohem víc.
A nejde jen o rozlišení,

ale také o hustotu. Například
moderní chytré telefony mají

to samé množství pixelů, ale mnohem
hustěji, takže vidíme ostřejší obraz.

A jak uložíte hodnoty pixelů do
souboru? Uděláte to tak,

že ukládáte červenou, zelenou a modrou
po trojicích, pro každý pixel jedna.

Každá z těch trojit vytvoří jeden pixel.
Hodnoty jsou od 0 do 255. 0 pro velmi

tmavou, 255 pro velmi jasnou. Trojice
těchto hodnot dohromady dává jeden pixel.

Obrázek, ať jde o jpeg, gif, png či jiný,
obsahuje miliony těchto RGB (red-green-blue)

trojic. Jak tedy počítač ukládá všechna
tato data? Všechna výpočetní a viditelná

data jsou reprezentována bity. Bit má dva
stavy: zapnuto - vypnuto. Ale namísto toho

počítač používá 1 a 0 -- binární (dvojkové)
hodnoty. Obrázek je spousta jedniček a nul.

Ale proč jsou RGB hodnoty od 0 do 255?
Každá barva je v RGB reprezentována

8 bity, dohromady je nazýváme byte.
Pokud znáte binární soustavu,

víte, že největší číslo, které se vejde do
8 bitů je 255. 255 je osm jedniček v řadě.

Nejmenší je 0, nebo-li osm nul v řadě.
Od nuly do 255 máme celkem 256 různých

intenzit, pro každou barvu. Třeba
pixel tyrkysové barvy můžeme reprezentovat

v naší běžné desítkové soustavě jako
64 (trocha červené), 224 (spousta zelené)

a 208 (nějaká modrá). Ale počítač by si to
uložil jako 0100 0000 1110 0000 1101 0000

Pro reprezentaci jednoho pixelu používáme
24 binárních číslic. Digitální umělci

často používají pro barvy šestnáctkovou
(hexadecimální) soustavu. Tou můžeme napsat

stejnou tyrkysovou barvu pouze
6 šestnáctkovými číslicemi: 40 E0 D0.

Možná bys chtěl upravit barvy na obrázku.
Jak to uděláš?

Jsou různé mapovací funkce, které jako
vstup berou hodnotu pixelu.

Jako vstup vezmeš hodnoty červené, zelené a
modré, které tvoří barvu. A ty pomocí

funkce převedeš na nové hodnoty červené,
zelené a modré. Třeba chceš obrázek

ztmavit. Jednou z možností je vzít
hodnoty červené, zelené a modré

a například od každé z nich odečíst
stejné číslo, třeba odečteme 50.

Samozřejmě nelze jít níž než na nulu.
Odečteme tedy 50 od každé z nich

a to je výsledek. Vstupem je R, G, B a
výstupem R-50, G-50, B-50. Měl jsi

obrázek s určitým jasem, dostaneš
obrázek mnohem tmavší.

Mnoho lidí si neuvědomuje, že na
počátku si lidé mysleli, že půjde o

nástroj k filtrování obrázků, který
je vylepší a budou vypadat skvěle

nebo retro. Ale vzniklo z toho něco
mnohem důležitějšího - způsob, jakým

se lidé propojují. Není to jen o tom
vidět fotky tvých přátel nebo rodiny, ale

moci objevovat věci, které se dějí
po celém světě. Třeba protesty v zámoří,

sociální hnutí, přijímáš informace
viditelnou formou.

A to nám umožnilo velmi rychle vyrůst
a stát se celosvětovou platformou.

Zjisti víc na studio.code.org.