WEBVTT

00:00:02.518 --> 00:00:03.908
Der er tre skridt du skal kende til

00:00:03.908 --> 00:00:06.528
for at gøre dine tegninger
forrygende farverige.

00:00:06.528 --> 00:00:08.559
Lad os starte med at farvelægge baggrunden

00:00:08.559 --> 00:00:11.736
For at gøre det, skriv bare <i>background</i>
efterfulgt af <i>(</i>,

00:00:11.893 --> 00:00:13.892
og så kommer resten af linjen af sig selv.

00:00:13.892 --> 00:00:17.093
Hvis man kigger godt efter, så ser man,
at det er et funktionskald.

00:00:17.093 --> 00:00:19.074
Se, vi har funktionens navn her,

00:00:19.074 --> 00:00:22.235
altså <i>background</i>,
og så <i>( )</i>

00:00:22.235 --> 00:00:24.778
og inde i dem tre parametre,
adskilt af kommaer.

00:00:25.018 --> 00:00:29.782
Disse tre tal angiver hvor meget
rød, grøn og blå

00:00:29.782 --> 00:00:31.226
der er i baggrundsfarven.

00:00:31.236 --> 00:00:34.792
Tallene kan være hvad som helst
mellem 0 og 255,

00:00:35.142 --> 00:00:37.393
hvor 0 betyder der ikke er noget
af den farve,

00:00:37.393 --> 00:00:39.787
og 255 betyder vi har max af den farve.

00:00:39.787 --> 00:00:42.963
Lige nu har vi max rød,
og ingen grøn og blå.

00:00:42.963 --> 00:00:45.050
Derfor er baggrunden
meget kraftigt rød.

00:00:45.050 --> 00:00:48.128
Hvis vi gør det første tal mindre,
er der mindre rød

00:00:48.138 --> 00:00:49.662
så den ser mørkere ud.

00:00:49.662 --> 00:00:51.332
Jeg kan blive ved med at
lege med tallene

00:00:51.332 --> 00:00:53.258
og se hvilke farver jeg kan finde på,

00:00:53.258 --> 00:00:56.144
<i>eller</i>, jeg kan bruge vores
super smarte farvevælger,

00:00:56.204 --> 00:00:58.942
som sætter alle tre tal for mig.

00:00:59.382 --> 00:01:00.671
Det er vigtigt at vide, at

00:01:00.671 --> 00:01:02.980
det som funktionen <i>background</i>
i virkeligheden gør

00:01:02.980 --> 00:01:06.080
er at tegne en stor farvet firkant
over hele tegneområdet.

00:01:06.080 --> 00:01:08.765
Hvis jeg flytter den til sidst
i mit program, sådan,

00:01:08.765 --> 00:01:10.500
så tegner den den store firkant

00:01:10.500 --> 00:01:11.905
hen over alle mine former.

00:01:12.015 --> 00:01:13.520
Så tænker du nok:
"Det er dumt!

00:01:13.520 --> 00:01:14.715
Hvem skal dog bruge det?"

00:01:14.715 --> 00:01:16.530
Men, hey, hvem ved?

00:01:16.770 --> 00:01:18.820
Vi lader den være i toppen
indtil videre

00:01:19.070 --> 00:01:20.749
Nu skal vi farvelægge vores former!

00:01:20.749 --> 00:01:22.306
Det kan hjælpe at forestille sig

00:01:22.306 --> 00:01:24.073
at computeren har en farve-assistent,

00:01:24.073 --> 00:01:27.000
eller en slags farve-butler.

00:01:27.000 --> 00:01:29.357
Altså en fyr der står for farverne.

00:01:29.547 --> 00:01:34.590
Ham fyren kan kun holde én farveblyant
i sin venstre hånd

00:01:34.620 --> 00:01:39.079
og én spand maling i sin højre hånd.

00:01:39.209 --> 00:01:42.463
Computeren bruger så farveblyanten
til at tegne alle linjerne

00:01:42.463 --> 00:01:44.550
og spanden med maling til at
fylde formerne.

00:01:44.550 --> 00:01:47.269
Lige nu er blyanten sort,
og spanden har hvid maling.

00:01:47.499 --> 00:01:49.265
Du kan skifte blyantens farve

00:01:49.291 --> 00:01:51.227
ved at kalde funktionen <i>stroke</i>

00:01:51.531 --> 00:01:55.274
Den gør linjen færdig for dig,
og lader dig så også vælge en farve.

00:01:55.274 --> 00:01:58.310
Den funktion skifter farve på blyanten
som fyren holder,

00:01:58.320 --> 00:02:00.290
så alle former der tegnes efter den linje

00:02:00.310 --> 00:02:02.260
bliver tegnet med en lyserød farveblyant.

00:02:02.260 --> 00:02:05.000
Nogle gange gider du ikke
at have omrids på dine former.

00:02:05.010 --> 00:02:06.544
Det er der også en funktion til!

00:02:06.544 --> 00:02:10.175
Den hedder <i>noStroke</i>,
og nu skal vi for første gang

00:02:10.175 --> 00:02:12.686
se en funktion, som ikke tager
nogen parametre.

00:02:12.686 --> 00:02:17.009
Vi har bare et tomt par <i>( )</i>, og så et <i>;</i>,

00:02:17.009 --> 00:02:19.718
og nu kan du se at vores former
ikke har noget omrids mere.

00:02:19.718 --> 00:02:21.861
Vi kan også udskifte
farve-fyrens malingspand.

00:02:21.861 --> 00:02:24.684
ved at kalde funktionen <i>fill</i>.

00:02:25.484 --> 00:02:27.509
Fra den linje af,

00:02:27.509 --> 00:02:29.924
kan vi nu se at alle former er
fyldt med rød farve.

00:02:30.024 --> 00:02:31.961
Ligesom vi har en <i>noStroke</i>-funktion,

00:02:31.961 --> 00:02:37.308
så har vi også en <i>noFill</i>-funktion,
som heller ikke tager nogen parametre.

00:02:38.028 --> 00:02:41.327
Den gør alle vores former gennemsigtige;
de har ikke nogen udfyldning.

00:02:42.087 --> 00:02:44.423
Lad os nu begynde at faktisk
farvelægge vores fyr.

00:02:44.433 --> 00:02:46.987
Vi starter med at tegne en trekant
som hans krop.

00:02:46.987 --> 00:02:49.022
Jeg vælger en farve med <i>stroke</i>,

00:02:49.022 --> 00:02:50.479
sætter farven på stregen,

00:02:51.219 --> 00:02:54.856
Lad os vælge en... mørkegrøn farve.

00:02:56.246 --> 00:02:58.407
Nu skal vi vælge en farve at udfylde med.

00:02:58.757 --> 00:03:02.241
Hmm. Hvad kunne være en god farve?
Måske en lidt lysere grøn?

00:03:02.241 --> 00:03:04.475
En lysere grøn?
Den er pæn.

00:03:04.965 --> 00:03:07.547
Til hans ansigt har vi ikke
lyst til grønne linjer,

00:03:07.547 --> 00:03:10.189
Så jeg ændrer farve med <i>stroke</i>.

00:03:12.899 --> 00:03:17.742
Lad os vælge en halvmørk brun-agtig farve.

00:03:17.762 --> 00:03:19.767
Nu vælger vi en anden fyld-farve med <i>fill</i>.

00:03:19.767 --> 00:03:20.942
Åh gud!

00:03:21.202 --> 00:03:24.777
Hvad er en god ansigtsfarve...

00:03:25.217 --> 00:03:29.343
Det er en slags ansigtsfarve, ikke?

00:03:30.033 --> 00:03:32.854
De næste to former, de her to <i>ellipse</i>r,
er hans hænder

00:03:32.854 --> 00:03:35.671
Jeg vil have, at hans hænder er samme
farve som hans ansigt.

00:03:35.671 --> 00:03:37.269
Så jeg skifter ikke farveblyanten

00:03:37.269 --> 00:03:38.507
eller spanden med maling.

00:03:38.507 --> 00:03:40.837
Vi lader bare <i>stroke</i> og <i>fill</i> være uændret

00:03:40.837 --> 00:03:42.250
og fortsætter til hans mund.

00:03:42.460 --> 00:03:44.891
Hans mund er bare en linje.

00:03:46.551 --> 00:03:50.592
<i>fill</i> gør ikke noget ved linjer,
fordi de ikke har noget at putte farven i.

00:03:50.672 --> 00:03:53.153
Men vi kan ændre linjens farve med <i>stroke</i>.

00:03:54.063 --> 00:03:56.156
Ja, rød er en fin farve til en mund.

00:03:56.246 --> 00:03:57.814
Og nu til hans brillestænger.

00:03:57.834 --> 00:04:00.005
Vi skal igen kun sætte <i>stroke</i>.

00:04:00.025 --> 00:04:01.928
Hvad er en god farve til nogle briller?

00:04:01.938 --> 00:04:03.683
Sort er ret klassisk.

00:04:03.793 --> 00:04:07.724
Til hans brillers linser,

00:04:07.814 --> 00:04:11.465
vil jeg gerne have rektanglerne til at
have samme omrids som brillestængerne.

00:04:11.465 --> 00:04:14.796
Så jeg ændrer ikke på <i>stroke</i>,
men giver den en ny <i>fill</i> farve.

00:04:17.126 --> 00:04:20.032
Lad os gøre dem sorte, så de matcher
brillestængerne.

00:04:20.032 --> 00:04:22.487
Sådan!
Vores fyr er farvelagt!

00:04:22.487 --> 00:04:26.070
Awwwwww, yeah!