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

Version 138.1 by Michael Jagoutz on 2021/12/14 21:14
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 If you **have got no idea** how to solve this there are three possibilities:
768
769
770 * Take another look at the **sheets 0 to 10**. There you can find every information you need to program this design.
771 * **Ask somebody** who already made it, for example your teacher or classmates.
772
773 If you have still got no idea what you should to, take a **short look** at the [[**solutions **>>doc:||anchor="HSolutionChallengeB-IceCream"]]of the challenge, but mark that there are **many ways to solve this** and this is **just one of them**.
774 )))
775
776
777 You did it? Well, congratulations! If you are up to go further with programming embroidery designs we are very happy you like it!
778
779
780 Otherwise, if this challenges were enough for you, follow this link to get your certificate [[https:~~/~~/code.org/api/hour/finish>>url:https://code.org/api/hour/finish]].
781 )))
782 )))
783 )))
784
785 (% class="row" %)
786 (((
787 (% class="col-xs-12 col-sm-12" %)
788 (((
789 = 11. HOW TO - MY OWN DESIGN =
790
791
792 )))
793 )))
794
795 (% class="row" %)
796 (((
797 (% class="col-xs-12 col-sm-12" %)
798 (((
799 (% class="box" %)
800 (((
801 To create your own design, you have to **draw **a **draft **first. Draw your **final draft **onto one of the **design templates** (download). Make sure to choose the **template **you need, **dependent **on the **size **of your embroidery **hoop**.
802
803
804 After drawing your template,** think of the geometrical parts**, your design is built of. Those could be lines, circles, arcs, polygons, …
805
806 **Mark **the different **parts **on your final draft so that you can look them up while programming.
807
808
809 **Time to start programming!**
810
811
812 At first, you have to **program **a **frame **so that your design won’t be too big for your embroidery machine.
813
814
815 **Create a new object**. The object you choose should be **something round** like a circle. You can find some objects in the media library.
816
817
818 Now **program this code** in the script of this object.
819
820 Look up the size of your embroidery hoop and choose the correct template.
821
822
823 (% style="width:1121px" %)
824 |(% style="width:318px" %)Code for 10 x 10 cm embroidery hoop|(% style="width:337px" %)(((
825 Code for 20 x 20 cm embroidery hoop
826 )))|(% style="width:518px" %)
827 |(% style="width:318px" %)[[image:Mein_eigenes_Design_250.png||alt="template_frame_code_10x10.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" %)
828 (((
829 **Hint: **
830 \\Make sure to **watch out for the minus signs** in the code. Otherwise it won’t work.
831 )))
832
833 (% style="width:695px" %)
834 |(% style="width:692px" %)(% class="box warningmessage" %)
835 (((
836 Information:
837 \\This hoop won't be stitched, it is just to orientate oneself while programming.
838 )))
839
840 Now to **start your design**, create a new project and start with creating the first object for one part of your design.
841
842
843 **A pattern, which helps when programming your design:**
844
845 (% style="width:1300px" %)
846 |(% 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" %)Place the needle at some point you want to start|(% colspan="1" rowspan="5" style="width:154px" %)[[image:arrowBig.PNG]]
847 |(% 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" %)Point in the direction you want to stitch first
848 |(% style="width:110px" %)[[image:arrowMedium.PNG]]|(% style="width:344px" %)(((
849 [[image:Starte_Laufstich_mit_Länge_10.svg||alt="runningstitch.png" height="47" width="225"]]
850
851 [[image:Starte_Dreifachstich_mit_Länge_10.svg||alt="triplestitch.png" height="47" width="225"]]
852
853 [[image:Starte_Zickzack_Stich_mit_Länge_2_und_Breite_10.svg||alt="zigzagstitch.png" height="47" width="225"]]
854 )))|(% style="width:737px" %)Choose a stitch and start it.
855 |(% style="width:110px" %)[[image:arrowSmall.PNG]]|(% style="width:344px" %) |(% style="width:737px" %)Then move some steps or make a circle or arc, that depends on your pattern.
856 |(% style="width:110px" %) |(% style="width:344px" %)[[image:Beende_aktuellen_Stich.svg||alt="stopstitch.png" height="44" width="225"]]|(% style="width:737px" %)(((
857 You reached the end of the part?
858
859 Stop the stitch.
860
861 * If you are at the end of this object, then create a new object for the next part.
862 * If you want to continue embroidering at another position within this object, sew up first, then move to a new position and sew up again before starting another stitch and continue programming.
863 )))
864 |(% style="width:110px" %) |(% colspan="2" style="width:1050px" %)**Follow the pattern until you finished your design.**|(% style="width:154px" %)
865 )))
866 )))
867 )))
868
869 (% class="row" %)
870 (((
871 (% class="col-xs-12 col-sm-12" %)
872 (((
873 (% class="box successmessage" %)
874 (((
875 **You finished a design?** Yeah, that's great. It would be wonderful, if you could **upload your project to our Catrobat Community**!
876
877
878 **Sharing **your project **helps us collecting** more and more** great designs**.
879
880 Everybody should be able to **admire **or even **download **and **stitch your design**!
881
882 ----
883
884 **How does uploading work?**
885
886
887 * **Open **your **project **and tap onto the** 3 points** in the upper right corner.
888 * Choose "**upload**" and **create an account**, if you have not done so yet.
889 * Then **choose **a **name**, a **description **and the **categories **it belongs to.
890
891 **And that's it!**
892
893 ----
894
895 **As you got so far we are very happy to see you like programming designs just like us!**
896
897
898 **Follow this link** to get your **certificate **for the **Hour of Code** [[https:~~/~~/code.org/api/hour/finish>>url:https://code.org/api/hour/finish]].
899 )))
900 )))
901 )))
902
903 (% class="row" %)
904 (((
905 (% class="col-xs-12 col-sm-12" %)
906 (((
907 = SOLUTIONS =
908
909
910 )))
911 )))
912
913 (% class="row" %)
914 (((
915 (% class="col-xs-12 col-sm-12" %)
916 (((
917 (% class="box" %)
918 (((
919 ----
920
921 == Solution Square without loop ==
922
923 [[image:Square_without_loop.png||height="628" width="300"]]
924
925 ----
926
927 == Solution Square with loop ==
928
929 [[image:square_code.png||height="349" width="300"]]
930
931 ----
932
933 == Solution Square with loop and direction 45° ==
934
935 [[image:square_turn_code.png||height="405" width="300"]]
936
937 ----
938
939 == Solution Challenge A - Build a house ==
940
941 There are three objects:
942
943 [[image:Haus_Objekte.png||alt="house_code_1.png" height="199" width="225"]]
944
945
946 The code in the script of each object could look like this:
947
948 |(((
949 [[image:Haus_Objekt.png||alt="house_code_2.png" height="56" width="225"]]
950
951
952 )))|[[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"]]
953 |[[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"]]
954
955 ----
956
957 == Solution Challenge B - Ice Cream ==
958
959 There are two objects:
960
961 [[image:Eis_Objekte.png||alt="ice_cream_code_1.png" height="144" width="225"]]
962
963
964 The code in the script of each object could look like this:
965
966 |[[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"]]
967 |(((
968 [[image:Eis_Code.png||height="605" width="225"]]
969
970 [[image:Eiskugel_Code.png||height="342" width="225"]]
971
972 [[image:Vernähen.png||alt="ice_cream_code_4.png" height="445" width="225"]]
973 )))|[[image:Eistüte_Code.png||alt="ice_cream_code_5.png" height="411" width="225"]]
974
975 ----
976
977
978 )))
979 )))
980 )))