Wiki source code of Schritt-für-Schritt Tutorial

Last modified by Michael Jagoutz on 2021/12/15 10:08

Show last authors
1 (% class="row" %)
2 (((
3 (% class="col-xs-12 col-sm-6" %)
4 (((
5 (% class="box infomessage" %)
6 (((
7 Auf dieser Seite findest du Informationen, wie du mit dem Programmieren von Stickobjekten beginnst.
8
9
10 Wenn du dein **eigenes Stickdesign entwickeln **möchtest, ist diese Seite **der richtige Weg **dorthin.
11
12
13 Folge den Kapiteln Schritt für Schritt, um alle Grundlagen zum Programmieren eigener Designs zu erlernen.
14
15 Zwischen den Kapiteln gibt es **zwei Herausforderungen**, die du mit genügend Informationen lösen kannst. Versuche diese selbst zu bewältigen.
16
17
18 **Du schaffst das!**
19
20 ----
21
22 Falls du den Embroidery Designer noch nicht auf deinem Smartphone hast, kannst du ihn hier ganz einfach aus dem Google Playstore herunterladen.
23
24 [[[[image:GooglePlay.png]]>>https://play.google.com/store/apps/details?id=org.catrobat.catroid.embroiderydesigner]]
25 )))
26 )))
27
28 (% class="col-xs-12 col-sm-6" %)
29 (((
30 (% class="box" %)
31 (((
32 **Inhallt:**
33
34 {{toc depth="3"/}}
35
36
37 )))
38 )))
39 )))
40
41
42 (% class="row" %)
43 (((
44 (% class="col-xs-12 col-sm-12" %)
45 (((
46 = 0. Neues Projekt =
47
48
49 )))
50 )))
51
52 (% class="row" %)
53 (((
54 (% class="col-xs-12 col-sm-12" %)
55 (((
56 (% class="box" %)
57 (((
58 Zuerst muss du ein neues **leeres Projekt **erstellen.
59
60 Das kannst du machen, indem du auf das große Plus [[image:Plus sign.png]] im rechten unteren Eck tippst..
61
62 Im Anschluss musst du den **Projektnamen **eingegeben und das **Hochformat **auswählen.
63
64
65 [[image:leeresProjekt.png||height="211" width="250"]]
66 )))
67 )))
68 )))
69
70 (% class="row" %)
71 (((
72 (% class="col-xs-12 col-sm-12" %)
73 (((
74 = 1. Objekte =
75
76
77 )))
78 )))
79
80 (% class="row" %)
81 (((
82 (% class="col-xs-12 col-sm-12" %)
83 (((
84 (% class="box" %)
85 (((
86 Grundsätzlich ist jede** fortlaufende Linie** eines Designs, ein **Objekt**.
87
88 Für** jedes Objekt **kannst du eine neue Stickfarbe auswählen. Dies geschieht jedoch während des Stickvorgangs.
89
90 [[image:Apple.png||alt="2020_09_02_090151.png"]]
91
92 Hier ist ein Apfel zu sehen. Du solltest dein Design immer in geometrische Muster aufteilen. Beide Apfelhälften sind Teile einer geometrischen Form, des Kreises. Der Stiel ist ein einfaches Dreieck.
93
94 In diesem Beispiel hätten wir 2 Objekte. Ein Objekt für den Apfel und eines für den Stiel.
95
96
97 [[image:Puzzle.PNG]] Wenn du mit der Programmierung deines Designs beginnst, erstellst du ein **neues Objekt**.
98
99
100 [[image:step_1.png||alt="en_step_1 (1).png"]] [[image:step_2.png||alt="en_step_2.png"]] [[image:step_3.png]] [[image:step_4.png||alt="en_step_3.png"]]
101
102 (% style="margin-left:auto; margin-right:auto; width:313px" %)
103 |(% style="width:310px" %)(% class="box successmessage" %)
104 (((
105 **Diese bunten Kreise stellen die Nadel dar.**
106 )))
107
108 (% class="box warningmessage" style="float:left" %)
109 (((
110 **Information:**
111
112 Vor und nach jedem Objekt näht die Stickmaschine automatisch.
113 Weitere Informationen zum Nähen findest du im Abschnitt [["Nähen">>doc:||anchor="H10.SEWINGUP"]].
114 )))
115 )))
116 )))
117 )))
118
119 (% class="row" %)
120 (((
121 (% class="col-xs-12 col-sm-12" %)
122 (((
123 = 2. Linien =
124
125
126 )))
127 )))
128
129 (% class="row" %)
130 (((
131 (% class="col-xs-12 col-sm-12" %)
132 (((
133 (% class="box" %)
134 (((
135 Aus dem Skript deines Objektes  [[image:Skripte.png||alt="en_step_2 (1).png" height="47" width="196"]] kannst du nun **Bausteine hinzufügen**.
136
137 Du findest die Bausteine, indem du auf das **Pluszeichen **[[image:Plus.png||alt="plus_sign_blue.png"]] im linken unteren Eck tippst.
138
139
140 [[image:Puzzle.PNG]]** Suche **nach den** **unten **angegebenen Bausteienen**, um die erste Linie zu erstellen.
141
142 Orientiere dich an der **Farbe der Bausteine.** Die Bausteine sind nach ihrer Farbe sortiert. Tippe auf den Baustein, den du benötigst, um ihn zu deinem Skript hinzuzufügen.
143
144 (% style="width:1118px" %)
145 |(% style="width:500px" %)(((
146 [[image:Starte_Laufstich_mit_Länge_10.svg||alt="runningstitch.png" height="46" style="float:left" width="225"]]
147
148
149
150 [[image:Verschiebe_um_100_Schritte.svg||alt="move100steps.png" height="46" width="225"]]
151 )))|(% style="width:615px" %) (% class="box successmessage" %)
152 (((
153 **Tipp:**
154
155 Du kannst die Anzahl der **Schritten anpassen**. Versuche verschiedene Zahlen einzugeben, um die die Länge der Linie zu ändern.
156 )))
157
158 Im Embroidery Designer ist die Länge immer in Schritten angegeben. Aus diesem Grund ist es gut zu wissen, dass **5 Schritte immer 1 mm in Originalgröße** entsprechen.
159
160
161 [[image:Puzzle.PNG]] **Wähle verschiedene Sticharten**, um zu sehen, wie sie aussehen.
162
163 (% style="width:1121px" %)
164 |(% style="width:500px" %)(((
165 [[image:Starte_Laufstich_mit_Länge_10.svg||alt="runningstitch.png" height="47" width="225"]]
166
167 [[image:Starte_Dreifachstich_mit_Länge_10.svg||alt="triplestitch.png" height="47" width="225"]]
168
169 [[image:Starte_Zickzack_Stich_mit_Länge_2_und_Breite_10.svg||alt="zigzagstitch.png" height="47" width="225"]]
170 )))|(% style="width:618px" %) (% class="box errormessage" %)
171 (((
172 **Achtung:**
173
174 Stelle sicher, dass die Länge des Lauf- oder Dreifachstichs auf einen Wert zwischen 5 und 10 eingestellt ist. Der Zickzackstich sollte eine Breite zwischen 5 und maximal 40 haben. Eine Breite von 10 sind in der Realität ungefähr 2 mm.
175 )))
176
177 Mit dem klicken des Play-Buttons [[image:Play.png||alt="image-20200908092612-1.png"]] im rechten unteren Eck, kannst du sehen, was du bisher programmiert hast.
178
179
180 )))
181 )))
182 )))
183
184 (% class="row" %)
185 (((
186 (% class="col-xs-12 col-sm-12" %)
187 (((
188 = 3. Drehung nach links/rechts =
189
190
191 )))
192 )))
193
194 (% class="row" %)
195 (((
196 (% class="col-xs-12 col-sm-12" %)
197 (((
198 (% class="box" %)
199 (((
200 Um der Stickmaschine mitzuteilen, in welche **Richtung **sie nähen soll, gibt es zusätzlich Bausteine zum **Rechts- bzw. Linksabbiegen**.
201
202 [[image:Drehe_links_Grad.svg||alt="turnleft.png" height="47" width="225"]] [[image:Drehe_rechts_Grad.svg||alt="turnright.png" height="47" width="225"]]
203
204
205 [[image:Puzzle.PNG]] Versuche nun ein **Quadrat **zu programmieren.
206
207 Überelge dir, wie ein Quadrat mit **Linien **und **90 Grad Drehungen** aufgebaut ist. Wähle für den Anfang ein Maß von 100 Schritten.
208
209 (% style="width:1127px" %)
210 |(% style="width:500px" %)[[image:Square.png||height="203" width="203"]]|(% style="width:623px" %) (% class="box successmessage" %)
211 (((
212 **Tipp:**
213 \\Solltest du keine Idee haben, kannst du einen kurzen Blick in die [[Lösung>>doc:||anchor="HSolutionSquarewithoutloop"]] werfen.
214 )))
215
216 Wenn du fertig bist, versuche die **Größe **des Quadrates zu **ändern**.
217
218
219 (% style="width:712px" %)
220 |(% style="width:709px" %)(% class="box successmessage" %)
221 (((
222 **Tipp:**
223
224 Ändere die Länge der Linie, indem du die Schritte des Bausteines änderst.
225
226 [[image:Verschiebe_um_Schritte.svg||alt="move_steps.png" height="47" width="225"]]
227 )))
228 )))
229 )))
230 )))
231
232 (% class="row" %)
233 (((
234 (% class="col-xs-12 col-sm-12" %)
235 (((
236 = 4. Schleifen =
237
238
239 )))
240 )))
241
242 (% class="row" %)
243 (((
244 (% class="col-xs-12 col-sm-12" %)
245 (((
246 (% class="box" %)
247 (((
248 Durch das Programmieren des Quadrates hast du gesehen, wie immerwieder **dieselben Bausteine** verwendet werden. Damit der Code für dein gewähltes Design nicht rießig wird, gibt es eine Möglichkeit dies zu vereinfachen.
249
250
251 Diese Vereinfachungen werden **Schleifen **gennant.
252
253
254 (% style="width:1123px" %)
255 |(% style="width:300px" %)(((
256 [[image:Wiederhole_mal.svg||alt="Loop.png" height="47" width="225"]]
257
258
259 [[image:Ende_der_Schleife.svg||alt="End of loop.png" height="47" width="225"]]
260 )))|(% style="width:820px" %) (% class="box warningmessage" %)
261 (((
262 Beachte, dass durch das Einfügen des Bausteines "Wiederhole ~_~_ mal" auch der Baustein "Ende der Schleife" **automatisch hinzugefügt** wird.
263 )))
264
265 **Jeder Baustein, **der** zwischen diesen beiden **orangefarbenenen Bausteinen liegt, wird nun** ~_~_ Mal ausgeführt. **
266
267
268 [[image:Puzzle.PNG]] Versuche nun, den **Code **für dein **Quadrat **zu **vereinfachen**, indem du diese Bausteine hinzufügst und diejenigen Bausteine löscht, welche du nicht mehr benötigst.
269
270
271 (% style="width:612px" %)
272 |(% style="width:609px" %)(% class="box successmessage" %)
273 (((
274 **Tipp:**
275 \\Solltest du nicht mehr weiterwissen, kannst du dir einen **kurzen Blick** auf die [[**Lösung**>>doc:||anchor="HSolutionSquarewithloop"]] erlauben.
276 )))
277
278
279 )))
280 )))
281 )))
282
283 (% class="row" %)
284 (((
285 (% class="col-xs-12 col-sm-12" %)
286 (((
287 = 5. Zeige in Richtung =
288
289
290 )))
291 )))
292
293 (% class="row" %)
294 (((
295 (% class="col-xs-12 col-sm-12" %)
296 (((
297 (% class="box" %)
298 (((
299 Wie du bereits bemerkt hast, wird das Objekt immer nach **rechts **gestickt. Mit diesen beiden Bausteinen kannst du entweder nach links oder nach rechts abbiegen.
300
301 [[image:Drehe_links_Grad.svg||alt="turnleft.png" height="47" width="225"]] [[image:Drehe_rechts_Grad.svg||alt="turnright.png" height="47" width="225"]]
302
303 Diese Drehungen sind relative Änderungen. Das bedeutet, dass **die Richtung nach dem Baustein von der Ausgangsposition zuvor abhängt.**
304
305
306 Zusätzlich gibt es aber auch einen Baustein, um die** Richtung absolut festzulegen**.
307
308 [[image:Zeige_in_Richtung_Grad.svg||alt="pointindirection_degrees.png" height="47" width="225"]]
309
310
311 Hier kannst du sehen, wohin welche Gradwerte zeigen:
312
313 [[image:Directions_1.0.png]]
314
315
316 [[image:Puzzle.PNG]] Versuche nun zuerst den Baustein [[image:Zeige_in_Richtung_Grad.svg||alt="pointindirection_degrees.png" height="47" width="225"]] festzulegen, bevor du die Schleife [[image:Wiederhole_mal.svg||alt="Loop.png" height="47" width="225"]] ausführst, um die Richtung immer wieder um 45° zu ändern.
317
318
319 Hast du richtig geraten? Die erste Linie des Objektes sollte nun in 45° Richtung zu sticken beginnen.
320
321
322 Das Quadrat sollte nun so aussehen.
323
324 (% style="width:1067px" %)
325 |(% style="width:500px" %)[[image:Square_turn.png||alt="Square.png"]]|(% style="width:564px" %) (% class="box successmessage" %)
326 (((
327 **Tipp:**
328 \\Solltest du nicht mehr weiterwissen, kannst du dir einen **kurzen Blick** auf die [[**Lösung**>>doc:||anchor="HSolutionSquarewithloopanddirection45B0"]] erlauben.
329 )))
330 )))
331 )))
332 )))
333
334 (% class="row" %)
335 (((
336 (% class="col-xs-12 col-sm-12" %)
337 (((
338 = 6. Setze an Position =
339
340
341 )))
342 )))
343
344 (% class="row" %)
345 (((
346 (% class="col-xs-12 col-sm-12" %)
347 (((
348 (% class="box" %)
349 (((
350 Um die **Position festzulegen**, an der du mit dem **Sticken beginnen** möchtest, musst du den Baustein [[image:Setze_an_Positionx_y.svg||alt="placeat.png" height="47" width="225"]] verwenden.
351
352 Der Embroidery Designer hat ein **Koordinatensystem,** bei dem der **Nullpunkt in der Mitte deines Bildschirmes **liegt.
353
354
355 [[image:Koordinatensystem.png]]
356
357 Um das Objekt auf dem Bildschirm zu platzieren, kannst du das Koordinatensystem verwenden. Es gibt jedoch auch eine andere Möglichket.
358
359 Durch das**Tippen auf den Baustein** erscheint ein **weiteres Fenster.** Hier kannst du die Option "**Visuell platzieren**" auswählen. Dabei kannst du das **Objekt optisch auf dem Bildschirm platzieren**.
360
361
362 Achte darauf, dass du den **Stich **mit diesem Baustein [[image:Beende_aktuellen_Stich.svg||alt="image-20200908100405-1.png" height="47" width="225"]] **stoppst**, **bevor **du das Objekt an einer **neuen Position** platzierst.
363
364 Andernfalls näht die Maschine automatisch an dieser Position weiter, was meist NICHT gewollt ist.
365
366 (% style="width:612px" %)
367 |(% style="width:609px" %)(% class="box warningmessage" %)
368 (((
369 **Information:**
370
371 Schau auch kurz im Kapitel "[[Vernähen>>doc:||anchor="H10.SEWINGUP"]]" vorbei, damit dein Design auch tatsächlich gestickt werden kann.
372 )))
373 )))
374 )))
375 )))
376
377 (% class="row" %)
378 (((
379 (% class="col-xs-12 col-sm-12" %)
380 (((
381 = Herausforderung A: Baue ein Haus =
382
383
384 )))
385 )))
386
387 (% class="row" %)
388 (((
389 (% class="col-xs-12 col-sm-12" %)
390 (((
391 (% class="box" %)
392 (((
393 [[image:Puzzle.PNG]] Mit deinen Kenntnissen aus den Kapiteln 0 bis 6, solltest du nun in der Lage sein dieses Design zu programmieren.
394
395 (% style="width:938px" %)
396 |[[image:Haus.png||alt="2020_09_02_093303.png"]]|(% style="width:708px" %)(((
397 (% class="box successmessage" %)
398 (((
399 **Tipp:**
400 \\Für dieses Desigtn musst nur um 90° nach links oder rechts drehen.
401 )))
402 )))
403
404 (% class="box warningmessage" %)
405 (((
406 **Beachte:**
407
408
409 * Erstelle 3 neue Objekte für jeden Teil des Hauses (jeder Teil hat eine andere Farbe).
410 * Verwende nur dieses Bausteine, welche in den Kapiteln 0 bis 6 besprochen wurden.
411 * Verwende Schleifen ([[Kapitel 4>>doc:||anchor="H4.COUNTINGLOOPS"]]), um effizient zu programmieren.
412 )))
413
414 Weißt du wie es funktioniert? **Probiere es selbst aus.**
415
416
417 Wenn du dir nicht sicher bist, wie du beginnen sollst, findest du hier einen kleinen **Spickzettel**.
418
419
420 (% class="box infomessage" %)
421 (((
422 Es gibt 3 Objekte. Ein Objekt für das Haus, eines für das Dach und eines für die Tür.
423 \\**Das Haus:**
424 \\Wie du sehen kannst, ist das Haus ein einfaches Quadrat. Wenn du nicht weißt, wie man es programmiert, schaue in [[Kapitel 3>>doc:||anchor="H3)TURNRIGHT/LEFT"]] nach. Wähle eine Länge von 200 Schritten.
425 \\**Das Dach:**
426 \\Wenn du genau hinsiehst, wirst du bemerken, dass das Dach ein halbes Quadrat ist. Programmiere wie zuvor ein Quadrat und stelle die Anzahl der Wiederholungen von 4 auf 2. Zusätzlich musst du vorerst die Ausrichtung [[image:Setze_an_Positionx_y.svg||alt="placeat.png" height="47" width="225"]] auch noch in die richtige Position und bringen und die Richtung [[image:Zeige_in_Richtung_Grad.svg||alt="pointindirection_degrees.png" height="47" width="225"]] auf 45 Grad einstellen.
427
428
429 **Die Tür:**
430 \\Die Tür ist etwas Neues, was wir noch nicht programmiert haben. Trotzdem ist es nicht schwer. Wiederhole einfach das Muster...
431
432
433 einige Schritte bewegen - 90 Grad drehen - einige weitere Schritte bewegen - 90 Grad drehen
434
435
436 ...zweimal.
437
438
439 Natürlich musst du auch die Tür in die richtige Postion bringen.  [[image:Setze_an_Positionx_y.svg||alt="placeat.png" height="47" width="225"]].
440 )))
441
442
443 (% class="box errormessage" %)
444 (((
445 Wenn du **keine Ahnung** hast, wie du das Problem lösen kannst, gibt es **drei Mögichkeiten**:
446
447
448 * Schau dir nochmal die Kapitel 0 bis 6 an. Dort findest du alle Informationen, welche du für das Programmieren dieses Designes benötigst.
449 * Schau dir den kleinen Spickzettel an. Er liefert Informationen zur Lösung dieser Herausforderung.
450 * Frag jemanden, der das Beispiel bereits geschafft hat, zum Beispiel ein/e Mitschüler/in oder dein/e Lehrer/in.
451
452 Wenn du immer noch keine Ahnung hast, was du tun sollst, werfe einen **kurzen Blick** auf die [[**Lösung**>>doc:||anchor="HSolutionChallengeA-Buildahouse"]]. Beachte jedoch, dass es **viele Möglichkeiten** gibt, um dieses** Beispiel zu lösen**. **Dies ist nur eine davon**.
453 )))
454
455
456 Du hast es geschafft? Herzlichen Glückwunsch! Wenn du beim Programmieren von Stickdesigns weitergehen möchtest, freuen wir uns sehr darüber.
457
458 Andernfalls freuen wir uns, dass du dieses Herausforderung angenommen hast und du kannst dir dein Zertifikat unter folgendem Link [[https:~~/~~/code.org/api/hour/finish>>url:https://code.org/api/hour/finish]] abholen.
459 )))
460 )))
461 )))
462
463 (% class="row" %)
464 (((
465 (% class="col-xs-12 col-sm-12" %)
466 (((
467 = 7. Kreise =
468
469
470 )))
471 )))
472
473 (% class="row" %)
474 (((
475 (% class="col-xs-12 col-sm-12" %)
476 (((
477 (% class="box" %)
478 (((
479 Eine der am häufigsten benötigten geometrischen Figuren ist der Kreis.
480
481
482 Da die Stickmaschine nur Linien sticken kann, müssen wir uns **einem Kreis nähern**, indem wir ein **regelmäßiges Vieleck** programmieren. **Das klingt komplizierter als es ist.**
483
484
485 Um einen Kreis zu programmieren, wiederholen wir das folgende Muster
486
487 (% style="width:668px" %)
488 |(% style="width:295px" %)(((
489 [[image:Verschiebe_um_10_Schritte.svg||alt="move10steps.png" height="47" width="225"]]
490
491 [[image:Drehe_links_Grad.svg||alt="turnleft.png" height="47" width="225"]]
492 )))|(% style="width:79px" %)(((
493
494
495 oder
496 )))|(% style="width:291px" %)(((
497 [[image:Verschiebe_um_10_Schritte.svg||alt="move10steps.png" height="47" width="225"]]
498
499 [[image:Drehe_rechts_Grad.svg||alt="turnright.png" height="47" width="225"]]
500 )))
501
502 damit wir ein Polygon aus kleinen Linien bekommen.
503
504
505 Für einen vollen Kreis müssen wir zum Beispiel folgende Codesegmente 20 Mal wiederholen:
506 10 Schritte verschieben und 360/20 Grad drehen
507
508
509 So würde es aussehen:
510
511 (% style="width:965px" %)
512 |[[image:Block_Wiederhole_20_Mal.png||alt="circleCode.png" height="171" width="225"]]|(% style="width:660px" %)(% class="box successmessage" %)
513 (((
514 **Beachte: **
515 \\Da 360 Grad eine ganze Drehung wäre, machen wir auch eine ganze Drehung, wenn wir uns 20 Mal ein Zwanzigstel einer ganzen Drehung drehen.
516 )))
517
518 [[image:Puzzle.PNG]] Verusche nun einen **größeren Kreis** zu **programmiern**. Achte darauf, dass der **Wert des Bausteines **[[image:Verschiebe_um_10_Schritte.svg||alt="image-20200908104903-1.png" height="47" width="225"]]** nicht geändert** werden darf.
519
520 (% style="width:637px" %)
521 |(% style="width:634px" %)(% class="box successmessage" %)
522 (((
523 **Tipp:**
524 \\Um die Größe des Kreises zu variieren, ändern wir den Wert 20 an beiden Positionen. 
525 \\[[image:Wiederhole_20_ma_eingekreist.png||alt="repeat_marked.png" height="47" width="225"]] [[image:Drehe_rechts_360_÷_20_Grad_eingekreist.png||alt="turn_marked.png" height="47" width="225"]]
526 )))
527
528
529 )))
530 )))
531 )))
532
533 (% class="row" %)
534 (((
535 (% class="col-xs-12 col-sm-12" %)
536 (((
537 = 8. Bögen =
538
539
540 )))
541 )))
542
543 (% class="row" %)
544 (((
545 (% class="col-xs-12 col-sm-12" %)
546 (((
547 (% class="box" %)
548 (((
549 Um Bögen zu programmieren, solltest du verstehen, dass **jeder Bogen** nur ein **Teil eines Kreises** ist.
550
551 [[image:Arcs.PNG]]
552
553
554 Der Code für einen Bogen sieht also fast genauso aus, wie der Code eines Kreises. Er variiert nur in der **Anzahl der Wiederholungen**.
555
556 Wenn du einen **Halbkreis **möchtest, **wiederhole **den Baustein "Wiederhole ~_~_ Mal" nur **halb so oft**.
557
558
559 So würde es aussehen:
560
561
562
563 (% style="width:899px" %)
564 |(% style="width:347px" %)[[image:Block_Wiederhole_10_Mal.png||alt="image-20200908105552-1.png" height="170" width="225"]]|(% style="width:549px" %)(% class="box successmessage" %)
565 (((
566 **Beachte: **
567 \\Wenn du ein Zwanzigstel von 360 (eine ganze Umdrehung) nur 10 Mal wiederholst, erhälst du einen Halbkreis.
568 )))
569
570 [[image:Puzzle.PNG]] Versuche nun einen Viertelkreis zu programmieren.
571
572 Hast du richtig geraten? Du musst den Code nun 5 Mal wiederholen, da 5 ein Viertel von20 ist.
573
574
575
576 In Wahrheit spielst du während des programmierens eigentlich durchgehend mit diesen **beiden Werten.**[[image:Drehe_rechts_360_÷_20_Grad_eingekreist.png||alt="turn_marked.png" height="47" width="225"]] und [[image:Wiederhole_20_ma_eingekreist.png||alt="image-20200908105803-3.png" height="47" width="225"]]
577
578
579 Wenn du **schmäler Bögen** möchtest, wähle hier einen **kleineren Wert.**  [[image:Drehe_rechts_360_÷_20_Grad_eingekreist.png||alt="turn_marked.png" height="47" width="225"]]
580
581 Umgekehrt wählst du natürlich einen **größeren Wert**, für einen **größeren Bogen**. Diese Zahlen variieren zwischen 8 und 360.
582
583
584
585 Um deinen **Bogen zu verlängern**, ändere die **Anzahl an Wiederholungen**. [[image:Wiederhole_20_ma_eingekreist.png||alt="image-20200908105803-3.png" height="47" width="225"]]
586
587 (% style="width:702px" %)
588 |(% style="width:699px" %)(% class="box successmessage" %)
589 (((
590 **Beachte:**
591 \\Bedenke, dass die Hälfte der Wiederholungen (im Vergleich zum ganzen Kreis) immer einen Halbkreis ergibt.
592 Wiederhole nie mehr als einen ganzen Kreis.
593 )))
594 )))
595 )))
596 )))
597
598 (% class="row" %)
599 (((
600 (% class="col-xs-12 col-sm-12" %)
601 (((
602 = 9. Verschicke Nachricht =
603
604
605 )))
606 )))
607
608 (% class="row" %)
609 (((
610 (% class="col-xs-12 col-sm-12" %)
611 (((
612 (% class="box" %)
613 (((
614 Mithilfe des Bausteines "Verschicke ..." kannst du Code **einmal verschicken** und **mehrmals verwenden**.
615
616 Um beispielsweise diese Pfote zu programmieren, kannst du einmal einen kleinen Kreis programmieren und ihn 4 Mal auf einer beliebigen Position aufrufen.
617
618
619 [[image:paw.png]]
620
621 Verwende diesen Baustein [[image:Wenn_du_empfängst_neue_Nachricht.svg||alt="when_you_receive.png" height="47" width="225"]] für den Code, welchen du mehrmals verwenden möchtest. Schreibe den dazugehörigen Code direkt unter diesen Baustein.
622
623 Verwende diesen Baustein, [[image:Verschicke_und_warte_neue_Nachricht.svg||alt="broadcast_and_wait.png" height="47" width="225"]] um den Code aufzurufen. Stelle sicher, dass du wirklich den Baustein "Verschicke und warte" ausgewählt hast.
624
625
626 Durch das Tippen auf den rechten Pfeil kannst du der Sendung einen Namen geben.
627
628
629 Um es besser zu verstehen, ist hier das Beispiel für die Pfote ersichtlich:
630
631
632 [[image:Pfote_Objekte.png||alt="paw_code_3.png" height="165" width="258"]]
633
634
635 (% style="width:872px" %)
636 |(% style="width:439px" %)Code für die kleinen Kreise:|(% style="width:429px" %)Code für den großen Kreis:
637 |(% style="width:439px" %)(((
638 [[image:Pfote_Hauptcode.png||alt="paw_code_1.png" height="492" width="225"]]
639
640 [[image:Pfote_Code_Kleiner_Kreis.png||height="342" width="225"]]
641 )))|(% style="width:429px" %)[[image:Pfote_Code_Großer_Kreis.png||alt="paw_code_2.png" height="270" width="225"]]
642
643 (% style="width:847px" %)
644 |(% style="width:844px" %)(% class="box warningmessage" %)
645 (((
646 Du siehst, dass zu Beginn der Szene die Nadel zuerst platziert wird und im Anschluss ein kleiner Kreis aufgerufen/gestickt wird. Danach wird die Nadel auf einer neuen Position platziert und der kleine Kreis wird erneut aufgerufen bzw. gestickt. Dies kann beliebt oft geschechen und man erspart sich eine Menge an Zeit, da der kleine Kreis nur einmal codiert werden muss aber mehrfach verwendet werden kann.
647 )))
648 )))
649 )))
650 )))
651
652 (% class="row" %)
653 (((
654 (% class="col-xs-12 col-sm-12" %)
655 (((
656 = 10. Vernähen =
657
658
659 )))
660 )))
661
662 (% class="row" %)
663 (((
664 (% class="col-xs-12 col-sm-12" %)
665 (((
666 (% class="box" %)
667 (((
668 Um das **Stickdesign **zu **fixieren**, musst du jedes Mal, wenn du die Position änderst das Design **vernähen**.
669
670
671 Beachte, dass die Stickmaschine **vor und nach jedem Objekt automatisch vernäht**. Du musst also nur dann vernähen, wenn du die** **Position innerhalb eines Objektes änderst..
672
673 Wenn du die **Position innerhalb eines Objektes ändern** möchtest, füge den Baustein [[image:Verschicke_und_warte_neue_Nachricht.svg||height="47" width="225"]] mit der Nachricht "**vernähen**" vor und nach jeder geänderten Position auf.
674
675
676 Aus diesem Grund musst du zuerst den Codeblock für den Baustein [[image:Wenn_du_empfängst_neue_Nachricht.svg||height="47" width="225"]] mit der Nachricht "vernähen" programmieren.
677
678
679 Der Codeblock sollte so aussehen:
680
681 (% style="width:1067px" %)
682 |[[image:Vernähen.png||alt="en_step_1.png" height="445" width="225"]]|(% style="width:727px" %)(((
683 (% class="box warningmessage" %)
684 (((
685 **Information: **
686 \\Das Vernähen ist enorm wichtig, da sich sonst der Faden auflösen würde.
687 )))
688
689 (((
690
691
692 (% class="box successmessage" %)
693 (((
694 **Tipp:**
695 \\Diesen zusätzlichen Code kannst du einfach umgehen, indem du für jedes nicht verbundene Teil deines Designs ein neues Objekt erstellst.
696 )))
697 )))
698 )))
699
700 So würde sich der Code der Pfote ändern, wenn du ihn in einem Objekt programmierst.
701
702 Du siehst, dass vor und nach jeder Positionsänderung innerhalb des Objektes vernäht wird.
703
704
705 [[image:Pfote_mit_Vernähen.png||height="834" width="225"]]
706
707
708 )))
709 )))
710 )))
711
712 (% class="row" %)
713 (((
714 (% class="col-xs-12 col-sm-12" %)
715 (((
716 = Herausforderung B: Eiscreme =
717
718
719 )))
720 )))
721
722 (% class="row" %)
723 (((
724 (% class="col-xs-12 col-sm-12" %)
725 (((
726 (% class="box" %)
727 (((
728 [[image:Puzzle.PNG]] Mit deinem Wissen aus den Kapiteln 0 bis 10 solltest du nun in der Lage sein dieses Design zu programmieren.
729
730 Versuche es selbstständig!
731
732
733 [[image:IceCream.png||alt="iceCream.png"]]
734
735
736 (% class="box warningmessage" %)
737 (((
738 **Beachte:**
739
740
741 * Erstelle **2** neue **Objekte**. Eines für die Eistüte und eines für die Eiskugeln.
742 * Verwende nur die Bausteine, welche in den **Kapiteln 0 bis 10** erklärt wurden.
743 * Versuche mit **Schleifen **([[Kapitel 4>>doc:||anchor="H4.COUNTINGLOOPS"]]) und dem **Verschicken von Nachrichten** ([[Kapitel 9>>doc:||anchor="H9.BROADCASTS"]]) zu arbeiten, um effizent zu programmieren.
744 * **Vernähe** jedes Mal, wenn du die Position innerhalb eines Objektes änderst ([[Kapitel 10>>doc:||anchor="H10.SEWINGUP"]]).
745 )))
746
747 Weißt du wie es funktioniert? **Probiere es selbst aus.**
748
749
750 Wenn du dir nicht sicher bist, wie du beginnen sollst, findest du hier einen kleinen **Spickzettel**.
751
752 (% class="box infomessage" %)
753 (((
754 Es gibt 2 Objekte. Ein Objekt für die Eistüte und ein Objekt für die Eiskugeln.
755 \\\\**Eistüte:**
756 \\Beginne in der linken oberen Ecke. Führe nun einige Schritte aus, um die erste Zeile zu programmieren. Jetzt musst du nach rechts abbiegen und wieder einige Schritte gehen. Wenn du nicht weißt, wie viele Schritte du für die Gerade wählen sollst, probier es einfach aus! Mach genauso weiter, um den Kegel zu vervollständigen.
757 \\**Eiskugeln:**
758 \\Für die Eiskugeln wäre es clever den Baustein "Verschicke ..." zu verwenden ([[Kapitel 9>>path:#H9.BROADCASTS]]).
759 Programmiere den Code, welcher eine Eiskugel bzw. einen kleinen Kreis ([[Kapitel 7>>path:#H7.CIRCLES]]) erstellt und setze an erster Stelle den Baustein "Wenn du empfängst ...". Vergiss dabei nicht, den Stich am Ende des Codeblockes zu stoppen.
760 Nach dem Baustein "Wenn Szene startet" musst du darauf achten, dass du immerwieder die Position änderst und den Baustein "Verschicke ..." aufrufst.
761 Damit sich der Faden nicht auflöst, darfst du vor und nach jedem Positionswechsel das Vernähen nicht vergessen ([[Kapitel 10>>path:#H10.SEWINGUP]]).
762 )))
763
764
765 (% class="box errormessage" %)
766 (((
767 Wenn du **keine Ahnung** hast, wie du das Problem lösen kannst, gibt es **drei Mögichkeiten**:
768
769
770 * Schau dir nochmal die **Kapitel 0 bis 10** an. Dort findest du alle Informationen, welche du für das Programmieren dieses Designes benötigst.
771 * Schau dir den kleinen **Spickzettel **an. Er liefert Informationen zur Lösung dieser Herausforderung.
772 * **Frag jemanden**, der das Beispiel bereits geschafft hat, zum Beispiel ein/e Mitschüler/in oder dein/e Lehrer/in.
773
774 Wenn du immer noch keine Ahnung hast, was du tun sollst, werfe einen **kurzen Blick** auf die [[**Lösung**>>doc:||anchor="HSolutionChallengeB-IceCream"]]. Beachte jedoch, dass es **viele Möglichkeiten** gibt, um dieses** Beispiel zu lösen**. **Dies ist nur eine davon**.
775 )))
776
777
778 Du hast es geschafft? Herzlichen Glückwunsch! Wenn du beim Programmieren von Stickdesigns weitergehen möchtest, freuen wir uns sehr darüber.
779
780 Andernfalls freuen wir uns, dass du dieses Herausforderung angenommen hast und du kannst dir dein Zertifikat unter folgendem Link [[https:~~/~~/code.org/api/hour/finish>>url:https://code.org/api/hour/finish]]abholen.
781 )))
782 )))
783 )))
784
785 (% class="row" %)
786 (((
787 (% class="col-xs-12 col-sm-12" %)
788 (((
789 = 11. Wie mache ich mein eigenes Design? =
790
791
792 )))
793 )))
794
795 (% class="row" %)
796 (((
797 (% class="col-xs-12 col-sm-12" %)
798 (((
799 (% class="box" %)
800 (((
801 Um dein eigenes Design zu erstellen, solltest du zuerst einen **Entwurf zeichnen**. Zeichne deinen **endgültigen Entwurf** auf einen der **Designvorlagen **(Download). Abhängig von der **Größe des Stickrahmens**, wähle die benötigte **Vorlage **aus.
802
803
804 Nach dem Zeichnen, **überlege **dir aus welchen **geometrischen Teilen** dein Design besteht. Dies könnten Linien, Kreise, Bögen, Vielecke, ... sein.
805
806 **Markiere **dir die **verschiedensten Teile**, um sie beim Programmieren schnell nachschlagen zu können.
807
808
809 **Beginne mit dem Programmieren!**
810
811
812 Zuerst solltest du einen **Rahmen **programmieren, damit dein Design für die Stickmaschine nicht zu groß wird.
813
814
815 **Erstelle ein neues Objekt. **Das Objekt sollte eine **runde Form** haben.
816
817 Einige Objekte findest du in der **Medienbibliothek**. Es bieten sich die Objekte aus der **Kategorie "Stickerei"** an.
818
819
820 **Programmiere nun deinen Code** im Skript deines Objektes.
821
822 Seh dir die Größe deines Stickrahmens an und wähle die richtige Vorlage aus.
823
824
825 (% style="width:1121px" %)
826 |(% style="width:318px" %)Code für 10 x 10 cm Stickrahmen|(% style="width:337px" %)(((
827 Code für 20 x 20 cm Stickrahmen
828 )))|(% style="width:518px" %)
829 |(% style="width:318px" %)[[image:Mein_eigenes_Design_250.png||height="703" width="225"]]|(% style="width:337px" %)[[image:Mein_eigenes_Design_500.png||alt="template_frame_code_20x20.png" height="704" width="225"]]|(% style="width:518px" %)(% class="box successmessage" %)
830 (((
831 **Tipp: **
832 \\**Achte auf die Minuszeichen** im Code, da es ansonsten nicht funktioniert.
833 )))
834
835 (% style="width:695px" %)
836 |(% style="width:692px" %)(% class="box warningmessage" %)
837 (((
838 Information:
839 \\Dieser Stickrahmen wird nicht genäht, sondern dient lediglich der Orientierung beim Programmieren.
840 )))
841
842 Erstelle ein **neues Projekt** und füge das ersten Objekt für dein Design hinzu.
843
844
845 **Hier ein Muster, welches dir beim Programmieren deines ersten Designes hilft:**
846
847 (% style="width:1300px" %)
848 |(% style="width:110px" %)[[image:arrowSmall.PNG]]|(% style="width:344px" %)[[image:Setze_an_Positionx_y.svg||alt="placeat.png" height="47" width="225"]]|(% style="width:737px" %)Platziere die Nadel an einem Ort, an dem du beginnen möchtest.|(% colspan="1" rowspan="5" style="width:154px" %)[[image:arrowBig.PNG]]
849 |(% style="width:110px" %)[[image:arrowSmall.PNG]]|(% style="width:344px" %)[[image:Zeige_in_Richtung_Grad.svg||alt="pointindirection_degrees.png" height="47" width="225"]]|(% style="width:737px" %)Zeige in jene Richtung, in welche du zuerst sticken möchtest.
850 |(% style="width:110px" %)[[image:arrowMedium.PNG]]|(% style="width:344px" %)(((
851 [[image:Starte_Laufstich_mit_Länge_10.svg||alt="runningstitch.png" height="47" width="225"]]
852
853 [[image:Starte_Dreifachstich_mit_Länge_10.svg||alt="triplestitch.png" height="47" width="225"]]
854
855 [[image:Starte_Zickzack_Stich_mit_Länge_2_und_Breite_10.svg||alt="zigzagstitch.png" height="47" width="225"]]
856 )))|(% style="width:737px" %)Wähle einen Stich und beginne.
857 |(% style="width:110px" %)[[image:arrowSmall.PNG]]|(% style="width:344px" %) |(% style="width:737px" %)Mach ein paar Schritte in der Form eines Kreises, eines Quadrates, eines Bogens oder einer anderen Form. Dies hängt von deinem Muster ab.
858 |(% style="width:110px" %) |(% style="width:344px" %)[[image:Beende_aktuellen_Stich.svg||alt="stopstitch.png" height="44" width="225"]]|(% style="width:737px" %)(((
859 Du bist mit deinem Code fertig?
860
861 Beende den Stich.
862
863 * Wenn du mit diesem Objekt fertig bist, erstelle ein neues Objekt für den nächsten Teil.
864 * Wenn du an einer anderen Position in diesem Objekt weitersticken möchtest, musst du zuerst vernähen, dann die Position ändern und im Anschluss erneut vernähen bevor du mit einem neuen Stich beginnst.
865 )))
866 |(% style="width:110px" %) |(% colspan="2" style="width:1050px" %)**Folge diesem Schema, bis du dein Design fertiggestellt hast.**|(% style="width:154px" %)
867 )))
868 )))
869 )))
870
871 (% class="row" %)
872 (((
873 (% class="col-xs-12 col-sm-12" %)
874 (((
875 (% class="box successmessage" %)
876 (((
877 **Du hast dein Design fertiggestellt? **Super! Es wäre schön, wenn du dein** Projekt **auch in unserer** Catrobat-Community hochladen **könntest**.**
878
879
880 Wenn du dein **Projekt teilst**, kannst du uns dabei helfen, dass wir immer mehr tolle **Designs sammeln.**
881
882 Jeder sollte dein Design **bewundern **und **herunterladen **können, um beispielsweise auch an deinem Design **weiterarbeiten **zu können und es in weiterer Folge zu **sticken**.
883
884 ----
885
886 **Wie funktioniert das Hochladen?**
887
888
889 * **Öffne** dein **Projekt **und tippe auf die **3 Punkte** in der **oberen rechten Ecke**.
890 * Tippe auf "**Hochladen**" und **erstelle ein Konto**, falls du dies noch nicht getan hast.
891 * **Wähle **einen **Namen**, eine **Beschreibung **und eine passende **Kategorie **zu der dein Design passt.
892
893 **Das wars!**
894
895 ----
896
897 **Wir freuen uns, dass du es soweit geschafft hast und hoffen, dass wir dich vom Programmieren eigener Designs überzeugen konnte.**
898
899
900 **Folge diesem Link **[[https:~~/~~/code.org/api/hour/finish>>url:https://code.org/api/hour/finish]], um dein** Zertifikat "Hour of Code"** zu erhalten.
901 )))
902 )))
903 )))
904
905 (% class="row" %)
906 (((
907 (% class="col-xs-12 col-sm-12" %)
908 (((
909 = Lösungen =
910
911
912 )))
913 )))
914
915 (% class="row" %)
916 (((
917 (% class="col-xs-12 col-sm-12" %)
918 (((
919 (% class="box" %)
920 (((
921 ----
922
923 == Lösung - Quadrat ohne Schleife ==
924
925 [[image:Quadrat_1_Code.png||alt="Square_without_loop.png" height="471" width="225"]]
926
927 ----
928
929 == Lösung - Quadrat mit Schleife ==
930
931 [[image:Quadrat_2_Code.png||alt="square_code.png" height="262" width="225"]]
932
933 ----
934
935 == Lösung - Quadrat mit Schleife und 45° Richtung ==
936
937 [[image:Quadrat_3_Code.png||alt="square_turn_code.png" height="304" width="225"]]
938
939 ----
940
941 == Lösung - Herausforderung A: Baue ein Haus ==
942
943 Es gibt 3 Objekte:
944
945 [[image:Haus_Objekte.png||alt="house_code_1.png" height="199" width="225"]]
946
947
948 Der Code im Skript jedes Objektes könnte so aussehen:
949
950 |(((
951 [[image:Haus_Objekt.png||alt="house_code_2.png" height="56" width="225"]]
952
953
954 )))|[[image:Dach_Objekt.png||alt="house_code_3.png" height="56" width="225"]]|[[image:Tür_Objekt.png||alt="house_code_4.png" height="55" width="225"]]
955 |[[image:Haus_Code.png||height="369" width="225"]]|[[image:Dach_Code.png||height="411" width="225"]]|[[image:Tür_Code.png||alt="house_code_7.png" height="453" width="225"]]
956
957 ----
958
959 == Lösung - Herausforderung B: Eiscreme ==
960
961 Es gibt 2 Objekte:
962
963 [[image:Eis_Objekte.png||alt="ice_cream_code_1.png" height="144" width="225"]]
964
965
966 Der Code im Skript jedes Objektes könnte so aussehen:
967
968 |[[image:Eiskugeln_Objekt.png||alt="ice_cream_code_2.png" height="54" width="225"]]|[[image:Eisüte_Objekt.png||alt="ice_cream_code_3.png" height="54" width="225"]]
969 |(((
970 [[image:Eis_Code.png||height="605" width="225"]]
971
972 [[image:Eiskugel_Code.png||height="342" width="225"]]
973
974 [[image:Vernähen.png||alt="ice_cream_code_4.png" height="445" width="225"]]
975 )))|[[image:Eistüte_Code.png||alt="ice_cream_code_5.png" height="411" width="225"]]
976
977 ----
978
979
980 )))
981 )))
982 )))