Skip to content

Instantly share code, notes, and snippets.

@febeling
Created January 5, 2016 13:16
Show Gist options
  • Save febeling/bf818baef89ca4e0b507 to your computer and use it in GitHub Desktop.
Save febeling/bf818baef89ca4e0b507 to your computer and use it in GitHub Desktop.
Lasst uns anfangen zu programmieren
indem wir Gesicht zeichnen
aus Kreisen
Um einen Kreis zu zeichnen brauchen wir den `ellipse` Befehl
Ich tippe also `ellipse` im Editor
Hinter dem Befehl müssen immer Klammern stehen
und ein Semikolon
Aber ich sehen noch keine Ellipse
Die rechte Seite ist immer noch einen leere weiße Fläche
Der Grund dafür ist, dass ich noch sagen muss
wo die Ellipse gezeichnet werden soll
und wie groß sie sein soll
0:35
Weil ich ein Gesicht zeichne
soll die Ellipse genau in der Mitte sitzen
und sie soll auch ziemlich groß sein
0:44
Ich gebe vier Zahlen ein mit denen das geht
und ich erkläre auch warum das so geht
Tada! Ein Gesicht
OK
0:55
So, diese erste Nummer hier
was bewirkt die?
Ich kann sie ändern, indem ich auf sie klicke
und den Number Scrubber benutze, der dann erscheint
Schau, wie sie sich quer über die Fläche verschiebt
Also, diese Zahl bestimmt wie weit die Ellipse
entfernt ist, vom linken Rand der Zeichenfläche
1:14
Was bewirkt die zweite Zahl?
Wenn ich die ändere, bewegt sich die Ellipse rauf und runter auf der Fläche
OK
1:23
Weiter zur dritten Zahl
Wenn ich die ändere wird die Ellipse breiter und schmaller
OK, prima
1:32
Dann kommt nur noch die vierte Zahl
was könnten wie _noch_ ändern?
Die Höhe!
die Ellipse wird höher und niedriger
und wieder höher
1:46
OK, jetzt wisst ihr, was diese vier Zahlen bewirken
die ersten beiden bestimmen die Position der Ellipse
die nächsten beiden bestimmen die Größe der Ellipse
die Zahlen heißen “die Parameter” des Ellipse Befehls
2:00
Und, wir nennen diese Art Befehl meistens Funktion
Also hier in diesem Programm
rufen wir die Ellipse Funktion auf
und übergeben ihr vier Parameter
um zu bestimmen, wie sie die Ellipse zeichnet
2:16
Wenn wir über Parameter einer Funktion sprechen
dann geben wir ihnen normalerweise Namen
so dass wir nicht erste und zweiter Parameter sagen müssen
lasst uns die Parameter dieser Funktion ansehen
zuerst der erste Parameter
ihr erinnert euch, er bestimmt das hier[2:32:05]
wie nennen diesen Parameter X
2:36
weil wir unter X die Querrichtung auf der Fläche verstehen
so wie ich es hier[2:43:05] zeige
es beginnt bei null
und endet bei vierhundert
das ist also X für uns.
2:54
den zweiten Parameter nennen wir Y
Y bestimmt diese Richtung
wir können uns Y vorstellen als die Entfernung die Fläche hinunter
das ist Y
und es beginnt genauso bei null hier oben in der Ecke
und geht runter bis vierhundert am unteren Rand
Das sind also X und Y
3:20
wir nennen den dritten Parameter ‘width’
das englische Wort für Breite
und den vierten Parameter nennen wir ‘height’
OK
Jetzt verstehen wir was unser Code tut und warum er es tut
Lass uns noch etwas mehr Code schreiben!
3:37
Wir haben ein Gesicht
es fehlt noch ein Mund, zum Essen
mache einen Mund indem du eine zweite Ellipse eingibts
darunter
ich verwende den selben Wert für X wie oben
weil ich will die Mitte des Gesichts will
aber ich möchte es weiter unten, 250
die Größe soll kleiner sein als die des Gesichts, einhundert Komma zehn
4:08
hm, aber, das ist etwas klein
ich werde ihn etwas höher machen, OK
als nächstes brauchen wir Augen!
4:20
Ein Gesicht ohne Augen ist ziemlich gruselig
lass uns mit dem linken Auge anfangen!
es sollte eher am linken Rand sein als in der Mitte
ich versuche es mal mit 150
und es sollte auch näher am oberen Rand sein
also nehme ich für Y auch 150
4:40
und es sollen kleine, vollkommen runde Kreise sein
daher versuche ich es mal mit 30 / 30
OK
ich sehe mein Auge noch ich, was ist los?…
ah, hier ist unser Problem
Oh Noes Guy, unser Fehlerhelfer ist erschienen
und sagt mir, dass etwas falsch im Code
es fehlt ein Semikolon
wo fehlt es …? Linie fünf
die Zeile, die ich gerade geschrieben habe
dort habe ich das Semikolon vergessen
klassischer Fehler!
ich füge es einfach ein, und: da ist es!
Da ist das Auge!
Ihr werdet Oh Noes vermutlich häufig sehen am Anfang
weil es das erste Mail ist, dass ihr Code schreibt
und es dauert einfach etwas bis man sich an die Syntax gewöhnt
man muss auf die richtige Schreibweise acht geben
die richtigen Klammern verwenden
immer das Semikolon setzen
also macht euch keine Sorgen, falls ihr ihn oft seht
ihr gewöhnt euch aneinander :)
5:36
OK, jetzt zu guter Letzt
das hier soll ein Zyklop sein, wir brauchen noch ein zweites Auge
Weil das zweite Auge fast so ist wie das erste kopiere ich einfach diese Zeile
und füge mit ‘Paste’ sie hier nochmal ein
stelle das X so ein, dass es hier rüber zeigt
Sooo..
sehr schön!
5:56
Mein Gesicht ist fertig!
Hm. Und jetzt seid ihr dran damit
ein paar Kreise mit Code zu zeichnen, ganz allein!
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment