Wiki-Quellcode von LetsStitchStepByStepTutorial

Zuletzt geändert von dvd48 am 2020/08/29 09:53
Zeige letzte Bearbeiter
1 {{box cssClass="floatinginfobox" title="**Inhalt**"}}
2 {{toc /}}
3 {{/box}}
4
5 (% style="text-align:center" %)
6 [[image:final_logo-cns_mint-lila.png||queryString="width=191&height=234" alt="final_code-n-stitch_logo-schrift.png" width="250"]]
7
8 (% class="box infomessage" %)
9 (((
10 **Ziel: **In diesem Tutorial lernst du wie du deine eigenen Stickmuster programmieren kannst.
11 )))
12
13 (% class="row" %)
14 (((
15 (% class="col-xs-12 col-sm-6" %)
16 (((
17 (% class="box" %)
18 (((
19 **Aber was ist Code'n'Stitch?**
20
21 {{video url="https://www.youtube.com/watch?v=NdzeyXWx7nA"/}}
22
23 )))
24 )))
25
26 (% class="col-xs-12 col-sm-6" %)
27 (((
28 (% class="box" %)
29 (((
30 Mit dem [[Embroidery Designer>>url:https://play.google.com/store/apps/details?id=org.catrobat.catroid.embroiderydesigner&hl=de]] (nur für Android verfügbar) kannst du deine eigenen Stick-Muster programmieren. Deiner Fantasie sind keine Grenzen gesetzt!
31
32 (% style="text-align:center" %)
33 [[image:9d-3.PNG||queryString="width=349&height=353"]]
34
35 (% class="wikigeneratedid" %)
36 **Mehr Fotos und Videos gibt's auf der Instagram-Seite vom [[Embroidery Designer>>https://www.instagram.com/_embroiderydesigner_/]].**
37 )))
38 )))
39 )))
40
41 = Let's stitch! =
42
43 (% class="box infomessage" %)
44 (((
45 **Aufgabe**: Einrichtung und ein erstes Muster.
46 )))
47
48 (% class="row" %)
49 (((
50 (% class="col-xs-12 col-sm-6" %)
51 (((
52 (% class="box" %)
53 (((
54 **01. Stick-Erweiterung einschalten.**
55
56 (% style="text-align:center" %)
57 [[image:erweiterung.gif]]
58
59 Du hast jetzt neue Bausteine:
60
61 (% style="text-align:center" %)
62 [[image:9d-5.png||queryString="width=300"]]
63 )))
64 )))
65
66 (% class="col-xs-12 col-sm-6" %)
67 (((
68 (% class="box" %)
69 (((
70 **02. Erstelle ein neues, leeres Projekt.**
71
72 (% style="text-align:center" %)
73 [[image:projekt_erstellen.gif]]
74 )))
75 )))
76 )))
77
78 (% class="row" %)
79 (((
80 (% class="col-xs-12 col-sm-6" %)
81 (((
82 (% class="box" %)
83 (((
84 **03. Füge ein neues Stick-Objekt hinzu.**
85
86 Stick-Objekte repräsentieren eine Ebene der Nadel. Dadurch steuern wir die Stickmaschine!
87
88 (% style="text-align:center" %)
89 [[image:stick-objekt.gif]]
90 )))
91 )))
92
93
94 (% class="col-xs-12 col-sm-6" %)
95 (((
96 (% class="box" %)
97 (((
98 **04. Gehe nun in die Skripte des Objekts und erstelle ein erstes Skript:**
99
100 (% style="text-align:center" %)
101 [[image:projekt_erstellen.gif||queryString="width=300&height=627" height="627" width="300"]]
102
103 **Tipp: **Du findest die Bausteine durch die Farbe besser.
104
105 **Starte das Programm und schau was passiert! **
106
107 *Wenn du alle Stiche sehen willst, blende das Stick-Objekt mit dem “Verbergen”-Baustein (Kategorie Aussehen) aus.
108 )))
109 )))
110 )))
111
112 (% class="row" %)
113 (((
114 (% class="col-xs-12 col-sm-6" %)
115 (((
116 (% class="box" %)
117 (((
118 **05. Erweitere dein Skript:**
119
120 (% style="text-align:center" %)
121 [[image:9d-9.png||queryString="width=300&height=267"]]
122
123 Starte erneut dein Programm.
124
125 Du hast nun eine Ecke programmiert. Für Linien musst du also nur den Stich aktivieren und die Nadel verschieben.
126 )))
127 )))
128
129 (% class="col-xs-12 col-sm-6" %)
130 (((
131 (% class="box" %)
132 (((
133 **06. Erweitere jetzt dein Programm selbst um ein Quadrat zu erzeugen:**
134
135 (% style="text-align:center" %)
136 [[image:9d-11.jpg||queryString="width=300&height=306"]]
137
138 Hast du jetzt ganz viele blaue Bausteine?
139
140 Dies kannst du mit einer **Schleife **kürzer gestalten! Versuche es selbst. Eine Lösung findest du am Ende der Seite.
141 )))
142 )))
143 )))
144
145 (% class="row" %)
146 (((
147 (% class="col-xs-12 col-sm-6" %)
148 (((
149 (% class="box" %)
150 (((
151 **07. Wenn du das Quadrat wo anders platzieren möchtest, nimm den “Setze an Position”-Baustein.**
152
153 (% style="text-align:center" %)
154 [[image:position2.png||queryString="width=300&height=76"]]
155
156 )))
157 )))
158 )))
159
160 (% class="box successmessage" %)
161 (((
162 **FERTIG! **Zugegeben es ist noch nicht besonders aufregend, aber es ist ja noch kein Meister vom Himmel gefallen ;) 
163 Es gibt noch mehr zu entdecken, um bessere Muster zu programmieren, los geht’s!
164 )))
165
166 = Ich dreh absolut durch! Oder doch eher relativ? =
167
168 (% class="box infomessage" %)
169 (((
170 **Ziel: **Hier lernst du wie man die Stickmaschine drehen und navigieren kann.
171 )))
172
173 (% class="row" %)
174 (((
175 (% class="col-xs-12 col-sm-6" %)
176 (((
177 (% class="box" %)
178 (((
179 Um die Nadel zu steuern, haben wir oben den “Drehe links”-Baustein verwendet. Dieser steuert die Maschine aus der Ego-Perspektive, d.h. aus Sicht der Nadelposition.
180
181 Hier haben wir es mit einer** relativen Richtungsänderung **zu tun.
182
183 Man kann die Nadel aber auch **absolut **steuern. Dazu verwendest du diesen Baustein:
184
185 (% style="text-align:center" %)
186 [[image:9d-17.png||queryString="width=300&height=53"]]
187
188 Du kannst dann immer dieses Fadenkreuz benutzen um herauszufinden wohin die Nadel zeigen wird:
189
190 (% style="text-align:center" %)
191 [[image:9d-16.png||queryString="width=200&height=413"]]
192
193 Hast du es gewusst? Die Nadel wird jetzt nach unten zeigen.
194 )))
195 )))
196
197 (% class="col-xs-12 col-sm-6" %)
198 (((
199 (% class="box" %)
200 (((
201 **Aufgabe:** Drucke dir die [[Vorlage>>attach:Grad.pdf]] aus und schneide sie zurecht. Alternativ kannst du sie auch abmalen. Leg sie dir neben dein Smartphone um immer wieder nachschauen zu können.
202
203 Benutze das Fadenkreuz um herauszufinden, welche Linie dieses Skript erzeugt:
204
205 (% style="text-align:center" %)
206 [[image:9d-18.png||queryString="width=300&height=320"]]
207
208 **Du findest die Lösung am Ende der Seite.**
209 )))
210 )))
211 )))
212
213 = Farben, Ebenen & Objekte =
214
215 (% class="box infomessage" %)
216 (((
217 **Aufgabe: **Erweitere dein erstes Stick-Programm um ein weiteres Stick-Objekt mit einem neuen Muster.
218 )))
219
220 (% class="row" %)
221 (((
222 (% class="col-xs-12 col-sm-6" %)
223 (((
224 (% class="box" %)
225 (((
226 **01. Füge noch ein Stick-Objekt hinzu.**
227
228 Mehrere Stick-Objekte ergeben mehrere Ebenen unserer Nadel. Das ermöglicht es **verschiedene Farben sticken** zu lassen, da die Stickmaschine jede Ebene extra stickt und man so den Faden zwischendurch wechseln kann.
229
230 (% style="text-align:center" %)
231 [[image:stick-objekt.gif]]
232 )))
233 )))
234
235 (% class="col-xs-12 col-sm-6" %)
236 (((
237 (% class="box" %)
238 (((
239 **02. Gehe in die Skripte des neuen Objekts und füge diese Bausteine hinzu:**
240
241 (% style="text-align:center" %)
242 [[image:9d-21.png||queryString="width=300&height=421"]]
243
244 Starte das Programm und schau was passiert.
245
246 (% style="text-align:center" %)
247 [[image:9d-22.gif]]
248 )))
249 )))
250
251 (% class="row" %)
252 (((
253 (% class="col-xs-12 col-sm-6" %)
254 (((
255 (% class="box" %)
256 (((
257 **03. Wenn du einen kleineren Kreis sticken willst, ändere an allen Stellen des Codes "89" zu einer kleineren Zahl, für größere Kreise brauchst du eine größere Zahl.**
258
259 Probiere es aus!
260 )))
261 )))
262
263 (% class="col-xs-12 col-sm-6" %)
264 (((
265 (% class="box" %)
266 (((
267 **04. Bei einem ganzen Kreis bleibt “360” immer gleich. Ein Halbkreis wiederum hat nur einen Bogen von 180 Grad, ändere “360” zu “180” und schau selbst! **
268
269 Beim Viertelkreis änderst du die Zahl zu 90 Grad und so weiter…
270 )))
271 )))
272 )))
273
274 (% class="row" %)
275 (((
276 (% class="col-xs-12 col-sm-6" %)
277 (((
278 (% class="box" %)
279 (((
280 **05. Am Ende stechen wir mit “Stich” noch einmal um den Kreis abzuschließen**
281 )))
282 )))
283 )))
284
285 = Tutorials, Tipps & Ideen =
286
287 (% class="box infomessage" %)
288 (((
289 **Aufgabe: **Schau dir die Muster an um zu lernen wie diese funktionieren oder programmier welche nach und ändere sie nach deinen Wünschen :)
290 )))
291
292 (% class="row" %)
293 (((
294 (% class="col-xs-12 col-sm-4" %)
295 (((
296 (% class="box" %)
297 (((
298 Es gibt noch mehr Stick-Bausteine. Ganz besonders cool ist der **“Zick-Zack”-Stich**, dieser ermöglicht es dickere Linien zu sticken, indem die Nadel hin und her stickt. Probier ihn gleich aus!
299
300 (% style="text-align:center" %)
301 [[image:9d-28.gif]]
302
303 [[Hier>>doc:Education.Embroidery.Embroidery Bricks.WebHome]] ist eine Erklärung zu jedem einzelnen **Stick-Baustein.**
304 )))
305 )))
306
307 (% class="col-xs-12 col-sm-4" %)
308 (((
309 (% class="box" %)
310 (((
311 In diesem **Video-Tutorial **lernst du wie man ein Yin & Yang Muster programmiert:
312
313 {{video url="https://www.youtube.com/watch?v=oK_RNTKEYuc" height="400"/}}
314
315
316
317
318
319
320
321 Schau dir doch auch unsere [[Video Tutorials>>doc:Education.Embroidery.Video Tutorials.WebHome]] Seite an!
322 )))
323 )))
324
325 (% class="col-xs-12 col-sm-4" %)
326 (((
327 (% class="box" %)
328 (((
329 Voll mit **Stick-Vorlagen und Anleitungen** gespickt ist unser Wiki. [[Hier>>doc:Education.Embroidery.WebHome]] oder auch als [[PDF>>attach:Code'n'Stitch_Tutorial-Cards_deutsch.pdf]] findest du zum Beispiel Yin & Yang, optische Täuschungen, den Creeper von Minecraft, Herzen oder eine Schneeflocke.
330 )))
331 )))
332 )))
333
334 = Mein eigenes supercooles Stickmuster =
335
336 (% class="box infomessage" %)
337 (((
338 **Ziel: **Entwickle eine eigene Idee und setze diese um.
339 )))
340
341 (% class="row" %)
342 (((
343 (% class="col-xs-12 col-sm-6" %)
344 (((
345 (% class="box" %)
346 (((
347 **01. Als erstes brauchst du natürlich eine Idee!**
348
349 Denk z.B. an einfache Formen und Muster, vielleicht Logos oder deinen Namen.
350 )))
351 )))
352
353 (% class="col-xs-12 col-sm-6" %)
354 (((
355 (% class="box" %)
356 (((
357 **02. Hole dir Millimeterpapier oder drucke diese Vorlage aus: [[Milimeterpapier>>attach:Milimeter-Papier.pdf]]**
358 )))
359 )))
360 )))
361
362 (% class="row" %)
363 (((
364 (% class="col-xs-12 col-sm-6" %)
365 (((
366 (% class="box" %)
367 (((
368 **03. Zeichne deine Idee auf das Raster.**
369
370 Dies wird dir helfen deine Idee auszufeilen und später zu programmieren. Zum Beispiel so:
371
372 (% style="text-align:center" %)
373 [[image:9d-26.png||queryString="width=400&height=311"]]
374 )))
375 )))
376
377 (% class="col-xs-12 col-sm-6" %)
378 (((
379 (% class="box" %)
380 (((
381 **04. Umsetzung! Teile dein Muster in verschiedene Stick-Objekte auf.**
382
383 Nimm dir zuerst lieber einfachere Muster vor, damit du nicht enttäuscht bist, falls es doch schwieriger ist als erwartet.
384
385 Die Umsetzung funktioniert prinzipiell so:
386
387 * Starte im ersten Objekt den Laufstich
388 * verschiebe die Nadel
389 * ändere die Richtung (benütze dein Fadenkreuz!)
390 * verschiebe erneut
391 * und das Ganze von vorne!
392 )))
393 )))
394 )))
395
396 (% class="row" %)
397 (((
398 (% class="col-xs-12 col-sm-6" %)
399 (((
400 (% class="box" %)
401 (((
402 **05. Gratulation.**
403
404 Glückwunsch, du hast das Tutorial erfolgreich absolviert! Auf [[Code.org>>https://code.org/api/hour/finish]] bekommst du dein Zertifikat.
405 )))
406 )))
407 )))
408
409 (% class="box successmessage" %)
410 (((
411 **Du wirst sehr oft das Programm starten, nachsehen ob es passt, wieder anpassen und dann von vorne. Aber das machen alle Programmierer und Programmiererinnen so ;)**
412 )))
413
414 = Mach das Muster haltbar: Vernähen =
415
416 (% class="box infomessage" %)
417 (((
418 Wenn die Stickmaschine Sprünge macht, muss man vor und nach jedem Sprung vernähen, damit der Faden nicht lose wird.
419
420 Das macht man immer wenn z.B. ein “Setze an Position”-Baustein verwendet wurde und der aktuelle Stich beendet wurde.
421
422 [[Hier>>doc:Education.Embroidery.Sew Up.WebHome]] ist eine Anleitung zum Vernähen.
423 )))
424
425 (% class="box warningmessage" %)
426 (((
427 **Achtung: Am Anfang und am Ende jedes Objekts vernäht die Maschine automatisch! **
428 )))
429
430 = Vorschau & Verschicken =
431
432 (% class="box infomessage" %)
433 (((
434 Damit du dein programmiertes Muster als richtiges Stick-Muster vorab sehen kannst, kannst du dir die [[Stitch Pro App>>url:https://play.google.com/store/apps/details?id=com.zenghsing.StitchPro&hl=de_AT]] im Play Store runterladen.
435 )))
436
437 (% class="row" %)
438 (((
439 (% class="col-xs-12 col-sm-6" %)
440 (((
441 (% class="box" %)
442 (((
443 So kannst du die Vorschau starten:
444
445 (% style="text-align:center" %)
446 [[image:9d-27.gif]]
447 )))
448 )))
449
450 (% class="col-xs-12 col-sm-6" %)
451 (((
452 (% class="box" %)
453 (((
454 Und so kannst du deine Datei speichern oder zum Beispiel per Mail verschicken:
455
456 (% style="text-align:center" %)
457 [[image:9d-29.gif]]
458 )))
459 )))
460 )))
461
462 = Lösungen =
463
464 (% class="row" %)
465 (((
466 (% class="col-xs-12 col-sm-6" %)
467 (((
468 (% class="box" %)
469 (((
470 **Lösung für das Quadrat mit Schleife:**
471
472 (% style="text-align:center" %)
473 [[image:9d-12.png||queryString="width=300&height=320"]]
474 )))
475 )))
476
477 (% class="col-xs-12 col-sm-6" %)
478 (((
479 (% class="box" %)
480 (((
481 **Lösung für die Richtung der Linie:**
482
483 (% style="text-align:center" %)
484 [[image:9d-19.jpg||queryString="width=150&height=275"]]
485 )))
486 )))
487 )))
488 )))