Intro to Animation (Video Version)YouTube↗  IA↗(long shot)
Education  20.2K views 75 likes 10 dislikes   13 May 2014
Khan Academy Computing 116K subscribers N/A YouTube↗


Please select the problem
You must specify your email and describe the problem in detail
Describe your problem in detail if it's not obvious

Contributed subtitles
German Alain Schaefer
Click to Play Video Click to Play Video
There are lots of ways to make something look animated,
Es gibt viele Möglichkeiten, etwas animiert aussehen zu lassen,
but the basic principle is always the same.
aber das Basisprinzip ist immer das gleiche.
If you take a bunch of drawings or pictures
Wenn man ein paar Zeichnungen oder Bilder hat
where each one is just a little different from the last one,
von denen jedes nur ein bisschen anders, als das letzte ist,
and flip through them fast enough,
und man alle hintereinander schnell genug ansieht,
it'll look like your picture is moving.
dann sieht es aus, als ob das Bild sich bewegt.
Back in the good old days,
In der guten alten Zeit
they used to draw all these pictures by hand
wurden die Bilder alle per Hand gezeichnet
and it would take <i>so</i> long just to make a three-second animation.
und es hat ewig gedauert, eine nur drei Sekunden lange Animation zu erstellen.
Luckily for us, we live in the future.
Wir leben glücklicherweise in der Zukunft.
It's actually really easy to make a simple animation with code.
Es ist tatsächlich ziemlich einfach, eine simple Animation mit Code zu erstellen.
And I will show you how!
Und ich werde dir zeigen, wie!
Over on the right, you can see there is a cute little car
Rechts siehst du ein süßes, kleines Auto
on a lovely yellow background.
auf einem schönen, gelben Hintergrund.
And yes, yes I did design that car myself, thanks.
Und ja, das Auto habe ich selbst designed, danke.
Anyways, over here
Na ja, hier drüben
you can see we are setting this beautiful background color.
wie du siehst, stellen wir die schöne Hintergrundfarbe ein.
And the car doesn't have any outlines, so we're calling this <i>noStroke()</i> function.
Und da das Auto keine Umrisslinien hat, nennen wir das ganze "noStroke()"
And then here we're making a new variable, <i>x</i>, the position of the car
Und hier erstellen wir eine neue Variable für die Position des Autos
and giving it a value of 10.
und geben ihr einen Wert von 10.
And you can see that if we change this value,
Und du kannst erkennen, dass, wenn wir diesen Wert verändern,
then it moves the car back and forth.
sich das Auto vor und zurück bewegt.
Bring him up to 10.
Setze ihn auf "10".
And then over here we're setting the fill color of the car
Und hier stellen wir die Füllfarbe des Autos ein
and drawing two rectangles for the car body.
und zeichnen zwei Rechtecke für den Körper des Autos.
So, it looks like this first rectangle is for the bottom
Offensichtlich ist das erste Rechteck für den unteren Teil
and this rectangle is for the top.
und dieses Rechteck für den oberen gedacht.
And then here we're doing the same thing with the wheels.
Und hier machen wir das Gleiche mit den Rädern.
We set the fill color and draw two ellipses:
Wir stellen die Füllfarbe ein und zeichnen zwei Ellipsen:
One at "x + 25"
Eine bei "x + 25"
and "x + 75".
und eine bei "x + 75".
And finally we get to the new stuff.
Und jetzt befassen wir uns endlich mit dem neuen Kram.
This thing here is called a <i>function definition</i>.
Das hier nennt man eine "Funktionsdefinition".
You'll learn all about those later,
Du wirst später mehr darüber lernen,
so for now, kinda just look at it and memorize what it looks like.
aber jetzt sieh sie dir erst mal an und merk dir, wie sie aussieht.
The important things to notice are this word "draw" and these brackets.
Das Wichtigste hier sind das Wort "draw" und die Klammern.
This opening bracket here and this closing bracket here.
Diese öffnende Klammer hier und diese schließende Klammer hier.
This whole thing is what we call the <i>draw loop</i>, or the <i>animation loop</i>.
Die ganze Sache nennt sich "draw loop" oder "animation loop".
And everything that you put inside these brackets
Und alles, was du in diese Klammern schreibst
gets run over and over again really, really fast.
wiederholt sich immer wieder, sehr, sehr schnell.
That's why it's called a loop.
Deshalb heißt es auch loop (Schleife).
And then everything outside these brackets
Und alles außerhalb der Klammern
gets run only once at the very beginning of the program.
Wird nur einmal ausgeführt, am Anfang des Programms.
So the first step in animating is to move all your drawing code into the brackets
Der erste Schritt für die Animation ist den Zeichnungscode in Klammern zu setzen
so that your picture will get drawn over and over.
damit dein Bild immer und immer wieder gemalt wird.
So let's do that.
Lass uns das mal tun.
I'm just going to pull all this drawing code
Ich nehme mir einfach diesen Code
and then plop it down inside my loop.
und stecke ihn hier in meinen loop.
And to remind myself that this block of code goes inside these brackets,
Und um mich daran zu erinnern, dass dieser Batzen Code in die Klammern hinein gehört,
I'm just going to indent it all by selecting everything and pressing <i>Tab</i>.
rücke ich einfach alles ein, indem ich alles markiere und die "Tab"-Taste drücke.
And now I know that this code is inside the brackets.
Und jetzt kann ich gut erkennen, dass der Code in den Klammern ist.
So as you can tell, everything just looks totally the same;
Wie du erkennen kannst, sieht alles noch ziemlich genauso aus, wie eben;
nothing has changed.
nichts hat sich verändert.
Because the first time we run this draw loop,
Denn beim ersten Mal, dass wir diesen loop laufen lassen,
the computer's going to go,
wird der Computer sagen:
"Okay, make a new variable <i>x</i>, set it to 10, draw two rectangles,
"Okay, ich erstelle eine neue Variabel "x", setze sie auf 10, zeichne zwei Rechtecke,
draw two ellipses."
zeichne zwei Ellipsen."
And then it's going to go all the way back to the top and say,
Und dann wird er wieder zurück zum Anfang gehen und sagen:
"Make a new variable <i>x</i>, set it to 10, draw two rectangles, draw two ellipses."
"Ich erstelle eine neue Variabel "x", setze sie auf 10, zeichne zwei Rechtecke, zeichne zwei Ellipsen."
And then, "Make a new variable <i>x</i>, set it to 10, draw two rec--"
Und dann "Ich erstelle eine neue Variabel "x", setze sie auf 10, zeichne zwei Recht-"
same exact thing.
immer wieder das Gleiche.
Nothing has changed, so duh, you're not going to see any animation.
Nichts hat sich verändert, also natürlich siehst du noch keine Animation.
It's just drawing the same rectangles and ellipses on top of the old ones.
Der Computer zeichnet nur die gleichen Rechtecke und Ellipsen über die alten.
Remember what we said: if we want to make something look animated,
Erinnere dich, was wir gesagt haben: wenn wir etwas animiert aussehen lassen wollen,
you need to <i>change</i> your drawing a little bit at a time.
müssen wir unsere Zeichnung immer wieder ein bisschen verändern.
So if I want my car to move forward,
Wenn ich also will, dass mein Auto sich vorwärts bewegt,
I should change the value of this <i>x</i> variable, right?
Sollte ich den Wert dieser "x"-Variabel verändern, richtig?
So yeah, let's just make it...11.
Also lass sie uns auf "11" setzen.
Ah!! No!! But now it's just going to be 11 every single time.
Ah! Nein! Aber jetzt wird es ja bloß immer und immer wieder 11 sein.
How the heck am I supposed to get the value of <i>x</i> to keep changing
Wie zum Teufel soll ich denn die x-Variabel dazu bringen, dass sie sich jedes mal verändert
when the computer just runs the same code over and over?
wenn der Computer bloß immer und immer wieder den selben Code abspielt?
Okay, watch this magic trick.
Okay. Sieh dir diesen Zaubertrick an.
Remember, this <i>var x</i> makes a new variable.
Erinnere dich, dass "var" eine neue Variabel erstellt.
When we have it inside the draw loop like this,
Wenn wir das so in den Loop schreiben,
it makes a new variable called "x" every single time.
erstellt der Computer ja jedes mal wieder eine neue Variabel mit dem Namen "x".
What we need to do is make this variable outside the draw loop.
Was wir also tun müssen, ist, die Variabel außerhalb des draw loops zu setzen.
That way it will only make it once.
So wird der Computer sie nur einmal erstellen.
And then, every time the computer runs <i>this</i> code and sees the variable <i>x</i>,
Und dann wird der Computer jedes mal, wenn er diesen Code abspielt und die Variabel "x" sieht,
it'll reuse the same variable from before using the last value we assigned to it.
die gleiche Variabel von vorher benutzen, mit dem Wert den wir ihr zuletzt gegeben haben.
So I'm just gonna do that; I'm gonna take this variable
Also werde ich das tun; ich nehme einfach diese Variabel
and we're gonna make it outside of the draw loop.
und setze sie außerhalb des draw loops.
So right now it's only making that variable once.
Und jetzt wird die Variabel nur einmal erstellt.
And every time it runs into this variable <i>x</i>
Und jedes Mal wenn die Variable "x" auftaucht
it's gonna reuse the same variable.
wird immer diese eine Variable gebraucht.
And right now the last value we assigned to it was 11,
Und im Moment ist der letzte Wert, den wir ihr gegeben haben, "11",
so it's always gonna be 11.
also wird es immer 11 sein.
And here's where the magic comes in.
Und hier kommt die Magie ins Spiel.
Somewhere in the draw loop, we're gonna change the value of <i>x</i>
Irgendwo im draw loop, werden wir den Wert von x so verändern,
to be a little more than it used to be, like this:
dass es immer ein bisschen mehr ist als vorher, nämlich so:
<i>x</i> gets the old value of <i>x</i> plus, let's say, 1.
x bekommt den alten Wert von vorher, x, plus, sagen wir 1.
Yay! It works!
Yay! Es funktioniert!
Except, it's so smeary.
Nur sieht es so schmierig aus.
And if you're wondering why it looks that way,
Und wenn du dich fragst, warum das so aussieht,
it's because we forgot to draw this background inside the draw loop.
dann ist das, weil wir vergessen haben, den Hintergrund in den draw loop zu setzen.
So it's drawing the car over and over again,
Also wird das Auto immer und immer wieder gemalt,
but you can see all the old cars underneath the new one.
aber man kann immer das vorherige Auto unter dem Neuen sehen.
So if I just pull this line into the top of the draw loop, like that,
Wenn ich also diese line oben in den draw loop verschiebe, so,
and then press "Restart" so I can see my car again...
und dann "Restart" drücke, damit ich mein Auto wieder sehen kann...
Yay! It's so perfect!
Yay! Es ist perfekt!
And if we wanna make the car go faster,
Und wenn wir wollen, dass das Auto noch schneller fährt,
we can just change how much we increase <i>x</i> by every time.
können wir einfach den Wert verändern, mit dem wir x jedes Mal vergrößern.
So if we make it 10, whoo! It's off the screen!
Wenn wir also aus "1" "10" machen, WHOO! Es ist aus dem Bildschirm gefahren!
And I can even make it negative, so <i>x - 10</i> and...
Und wir können es auch negativ machen, also "x-10" und...
Here it comes!
Da kommt es!
Make it positive again, whoops...
Wenn wir es wieder positiv machen, whoops...
There it goes.
da verschwindet es wieder.
So here are the important things to remember:
Also hier sind die wichtigen Dinge, die man sich merken sollte:
This thing right here is called the draw loop.
Dieses Ding hier nennt sich "draw loop".
You should put your drawing code inside here
Der Code für die Zeichnung gehört hier rein
so it'll get drawn over and over again.
damit es immer und immer wieder gezeichnet wird.
And then, you wanna make a variable outside your draw loop.
Und dann brauchst du eine Variabel, die du außerhalb des draw loops erstellst.
It's super important to make the variable outside the draw loop
Es ist ganz wichtig, die Variabel außerhalb des loops zu schreiben
so we can reuse the same one every time.
Damit wir sie immer wieder gebrauchen können.
Then inside the draw loop right here,
Und dann innerhalb des draw loops, hier,
we're gonna change the variable a little bit,
verändern wir die Variabel ein bisschen,
usually by setting it to its old value,
normalerweise, indem wir ihr ihren alten Wert geben,
plus some number-- plus or minus some number.
plus irgendeine Nummer, plus oder minus irgendeine Nummer.
And finally, you wanna use your variable somewhere in your drawing code
Und schließlich musst du die Variabel irgendwo in deinem Code benutzen
so that your drawing looks different every time.
damit deine Zeichnung jedes Mal ein bisschen Anders aussieht.
And... that's it!
Und...das war's!
Similar videos:

Intro to While Loops | Computer Programming | Khan Academy
Khan Academy Computing
11K views 30 likes 1 dislikes 13 May 201431% match


Making animations | Computer Programming | Khan Academy
Khan Academy Computing
46K views 136 likes 11 dislikes 30 Oct 201531% match

Nested For Loops | Computer Programming | Khan Academy
Khan Academy Computing
7.7K views 28 likes 1 dislikes 21 Jan 201430% match


If Statements | Computer Programming | Khan Academy
Khan Academy Computing
15.8K views 35 likes 2 dislikes 13 May 201429% match


For Loops! A New Kind of Loop | Computer Programming | Khan Academy
Khan Academy Computing
7.8K views 17 likes 1 dislikes 07 May 201429% match


More While Loops: Balloon Hopper | Computer Programming | Khan Academy
Khan Academy Computing
6K views 14 likes 0 dislikes 13 May 201429% match


More Mouse Interaction | Computer Programming | Khan Academy
Khan Academy Computing
10.3K views 21 likes 2 dislikes 25 Nov 201328% match

Modifying Arrays | Computer Programming | Khan Academy
Khan Academy Computing
6.8K views 21 likes 0 dislikes 13 May 201428% match

Clarifying with Comments | Computer Programming | Khan Academy
Khan Academy Computing
3.8K views 11 likes 0 dislikes 24 Nov 201328% match


The Power of the Docs | Intro to JS: Drawing & Animation | Computer programming | Khan Academy
Khan Academy Computing
1.6M views 473 likes 42 dislikes 28 Aug 201328% match




If/Else - Part 1 | Computer Programming | Khan Academy
Khan Academy Computing
8.4K views 16 likes 2 dislikes 13 May 201428% match


Intro to Variables | Computer Programming | Khan Academy
Khan Academy Computing
42K views 69 likes 7 dislikes 13 May 201428% match



Resizing shapes with variable expressions | Computer Programming | Khan Academy
Khan Academy Computing
18.8K views 44 likes 2 dislikes 26 Jun 201528% match


Special ProcessingJS functions | Computer Programming | Khan Academy
Khan Academy Computing
8.8K views 25 likes 2 dislikes 06 Jul 201528% match

DAE-68 | Schnee in Marokko | MA
Defender Around Europe
23.3K views 440 likes 7 dislikes 10 Feb 201828% match

IntroToDrawingFixed
Khan Academy Computing
29.5K views 13 likes 0 dislikes 13 May 201427% match




Intro to Arrays | Computer Programming | Khan Academy
Khan Academy Computing
14.5K views 54 likes 3 dislikes 13 May 201427% match

Neuer Chef im Kliemannsland - Zora ist da! | Kliemannsland
Kliemannsland
429.6K views 8.9K likes 139 dislikes 22 Oct 201727% match

Function Parameters | Computer Programming | Khan Academy
Khan Academy Computing
14.6K views 25 likes 2 dislikes 24 Nov 201327% match


✅ Crear Juego de saltos en Scratch
The Professor Garcia
1.1M views 10.4K likes 773 dislikes 02 Sep 201527% match

More on Variables | Computer Programming | Khan Academy
Khan Academy Computing
26.3K views 56 likes 4 dislikes 13 May 201427% match


Local and Global Variables | Computer Programming | Khan Academy
Khan Academy Computing
10.6K views 24 likes 2 dislikes 13 May 201426% match


Functions | Computer Programming | Khan Academy
Khan Academy Computing
17.5K views 27 likes 1 dislikes 25 Nov 201326% match


Booleans | Computer Programming | Khan Academy
Khan Academy Computing
10.7K views 25 likes 1 dislikes 24 Nov 201326% match


Animating styles with RAF (Video Version)
Khan Academy Computing
1.1K views 7 likes 0 dislikes 23 Feb 201526% match

Making drawings with code | Computer Programming | Khan Academy
Khan Academy Computing
104.3K views 271 likes 15 dislikes 12 Nov 201526% match



30-60-90 triangle example problem | Right triangles and trigonometry | Geometry | Khan Academy
Khan Academy
257.3K views 116 likes 10 dislikes 05 Oct 201126% match



Stepping Through the Factorial Program
Khan Academy
67.9K views 190 likes 3 dislikes 29 Jun 201126% match

DINGE, DIE NICHT NUR ICH HASSE.
LiDiRo
913.6K views 61K likes -1 dislikes 24 Apr 202026% match

Ideal gas equation example 1 | Chemistry | Khan Academy
Khan Academy
606.5K views 1.3K likes 57 dislikes 28 Aug 200926% match



Settings Privacy About Contact Donate