Wiki source code of LetsStitchStepByStepTutorial

Last modified by dvd48 on 2020/08/29 09:55

Show last authors
1 (% contenteditable="false" tabindex="-1" %)
2 (((
3 {{box cssClass="floatinginfobox" title="**Inhalt**"}}
4 {{toc /}}
5 {{/box}}
6 )))
7
8 (% contenteditable="false" tabindex="-1" %)
9 (((
10 (% data-widget="image" style="text-align:center" %)
11 [[image:final_logo-cns_mint-lila.png||queryString="width=192&height=235" alt="final_code-n-stitch_logo-schrift.png" width="250"]]
12 )))
13
14 (% id="HCode27n27Stitch" class="box infomessage" %)
15 (((
16 **Goal: **In this tutorial you will get to know how to design your own embroidery patterns.
17 )))
18
19 (% class="row" %)
20 (((
21 (% class="col-xs-12 col-sm-6" %)
22 (((
23 (% class="box" %)
24 (((
25 **But what is Code'n'Stitch?**
26
27 {{video url="https://www.youtube.com/watch?v=xvkVeEEnS0M"/}}
28
29 )))
30 )))
31
32 (% class="col-xs-12 col-sm-6" %)
33 (((
34 (% class="box" %)
35 (((
36 [[Embroidery Designer>>url:https://play.google.com/store/apps/details?id=org.catrobat.catroid.embroiderydesigner&hl=de]] (only available for android devices) will let you program your own embroidery templates. No borders are set to your fantasy!
37
38 (% contenteditable="false" tabindex="-1" %)
39 (((
40 (% data-widget="image" style="text-align:center" %)
41 [[[[image:9d-3.PNG||queryString="width=349&height=353" height="353" width="349"]]>>https://www.instagram.com/_embroiderydesigner_/?hl=de]]
42 )))
43
44 (% class="wikigeneratedid" %)
45 **Check out the [[Embroidery Designer>>https://www.instagram.com/_embroiderydesigner_/?hl=de]] instagram page for more pics and videos.**
46 )))
47 )))
48 )))
49
50 = Let's stitch! =
51
52 (% class="box infomessage" %)
53 (((
54 **Task**: Setup and a first sample.
55 )))
56
57 (% class="row" %)
58 (((
59 (% class="col-xs-12 col-sm-6" %)
60 (((
61 (% class="box" %)
62 (((
63 **01. Activate the embroidery extension. **
64
65 (not necessary for Embroidery Designer App)
66
67 (% style="text-align:center" %)
68 [[image:extension.gif]]
69
70 (% contenteditable="false" tabindex="-1" %)
71 (((
72 You now have new bricks:
73 )))
74
75 (% contenteditable="false" tabindex="-1" %)
76 (((
77 (% data-widget="image" style="text-align:center" %)
78 [[image:1.png||queryString="width=300&height=71" alt="9d-5.png"]]
79 )))
80 )))
81 )))
82
83 (% class="col-xs-12 col-sm-6" %)
84 (((
85 (% class="box" %)
86 (((
87 **02. Create a new, empty project.**
88
89 (% style="text-align:center" %)
90 [[image:project.gif||alt="create-object.gif"]]
91 )))
92 )))
93 )))
94
95 (% class="row" %)
96 (((
97 (% class="col-xs-12 col-sm-6" %)
98 (((
99 (% class="box" %)
100 (((
101 **03. Add a new embroidery object.**
102
103 Embroidery objects represent a layer of the needle. That's how we control the embroidery machine.
104
105 (% style="text-align:center" %)
106 [[image:create-object2.gif]]
107 )))
108 )))
109
110 (% class="col-xs-12 col-sm-6" %)
111 (((
112 (% class="box" %)
113 (((
114 **04. Switch to the scripts of your object and build this script.**
115
116 (% style="text-align:center" %)
117 [[image:scripts2.gif||queryString="width=300&height=628" alt="scripts.gif"]]
118
119 **Hint: **Use the color to find the bricks.
120
121 **Start the program and check it out!**
122
123 *If you want to see all of your stitches, use the "hide"-brick (look category).
124 )))
125 )))
126 )))
127
128 (% class="row" %)
129 (((
130 (% class="col-xs-12 col-sm-6" %)
131 (((
132 (% class="box" %)
133 (((
134 **05. Expand your script:**
135
136 (% contenteditable="false" tabindex="-1" %)
137 (((
138 (% data-widget="image" style="text-align:center" %)
139 [[image:4.png||queryString="width=300&height=293" alt="9d-9.png"]]
140 )))
141
142 Start your program again.
143
144 You now programed a corner. So to stitch lines you only have to activate the running stitch and move the needle.
145 )))
146 )))
147
148 (% class="col-xs-12 col-sm-6" %)
149 (((
150 (% class="box" %)
151 (((
152 **06. Try to stitch a square by adapting your program on your own!**
153
154 (% data-widget="image" style="text-align:center" %)
155 [[image:9d-11.jpg||queryString="width=300&height=306" height="306" width="300"]]
156
157 Are there many blue bricks in your script?
158 You can shorten your script by using a loop! Try it. You'll find a solution at the end of the page.
159 )))
160 )))
161 )))
162
163 (% class="row" %)
164 (((
165 (% class="col-xs-12 col-sm-6" %)
166 (((
167 (% class="box" %)
168 (((
169 **07. If you want to move your square, use the "place at"-brick (motion category).**
170
171 (% style="text-align:center" %)
172 [[image:position.png||queryString="width=300&height=78"]]
173 )))
174 )))
175 )))
176
177 (% class="box successmessage" %)
178 (((
179 **DONE!** Okay, it's not very spectacular yet, but no one is born a master ;)
180 There's more to explore to enhance your programming skills, let's do it!
181 )))
182
183 = Are you turning right? Absolutely! Or relatively? =
184
185 (% class="box infomessage" %)
186 (((
187 **Goal: **You will learn how to navigate the embroidery machine.
188 )))
189
190 (% class="row" %)
191 (((
192 (% class="col-xs-12 col-sm-6" %)
193 (((
194 (% class="box" %)
195 (((
196 We used the "turn left"-brick to control the needle. This brick navigates the needle from a first-person perspective
197
198 We call this a **relative change of direction**.
199
200 But you could also navigate the needle in an **absolute** fashion. Use this brick to do so:
201
202 (% data-widget="image" style="text-align:center" %)
203 [[image:5.png||queryString="width=300&height=58"]]
204
205 You can always use this crosshair to find out in which direction the needle will point. So in which will it do?
206
207 (% data-widget="image" style="text-align:center" %)
208 [[image:9d-16.png||queryString="width=200&height=413" height="413" width="200"]]
209
210 Did you guess it? It points downwards.
211 )))
212 )))
213
214 (% class="col-xs-12 col-sm-6" %)
215 (((
216 (% class="box" %)
217 (((
218 **Task:** Print this [[template>>attach:degrees.pdf]] and cut it. You could also just draw it yourself. Put it next to your phone to always have the possibility to have a sneak at it.
219
220 Use the cross-hair to find out which line this script will produce:
221
222 (% contenteditable="false" tabindex="-1" %)
223 (((
224 (% data-widget="image" style="text-align:center" %)
225 [[image:6.png||queryString="width=300&height=320" alt="9d-18.png"]]
226 )))
227
228 **You'll find the solution at the end of the page.**
229 )))
230 )))
231 )))
232
233 = Colours, Layers & Objects =
234
235 (% class="box infomessage" %)
236 (((
237 **Task: **Expand your first program with a new object and pattern.
238 )))
239
240 (% class="row" %)
241 (((
242 (% class="col-xs-12 col-sm-6" %)
243 (((
244 (% class="box" %)
245 (((
246 **01. Add another embroidery object.**
247
248 A series of embroidery objects results in a series of layers of your needle. This enables us to **stitch in different colours** because the embroidery will stop after each object, so you can switch threads.
249
250 (% style="text-align:center" %)
251 [[image:create-object2.gif]]
252 )))
253 )))
254
255 (% class="col-xs-12 col-sm-6" %)
256 (((
257 (% class="box" %)
258 (((
259 **02. Switch to the scripts of your new object and add these bricks:**
260
261 (% data-widget="image" style="text-align:center" %)
262 [[image:7.png||queryString="width=300&height=421" alt="9d-21.png"]]
263
264 Start the program and see what happens:
265
266 (% data-widget="image" style="text-align:center" %)
267 [[image:9d-22.gif]]
268 )))
269 )))
270 )))
271
272 (% class="row" %)
273 (((
274 (% class="col-xs-12 col-sm-6" %)
275 (((
276 (% class="box" %)
277 (((
278 **03. If you want to stitch a smaller circle, alter the "89" in all bricks to a smaller number. To get a bigger circle, choose a bigger value.**
279
280 Try it!
281 )))
282 )))
283
284 (% class="col-xs-12 col-sm-6" %)
285 (((
286 (% class="box" %)
287 (((
288 **04. Looking at a full circle, "360" always remains the same. But, you could change it to "180" to get a semi-circle. Change the value and have a look!**
289
290 To receive a quarter circle, change it to "90" and so on...
291 )))
292 )))
293 )))
294
295 (% class="row" %)
296 (((
297 (% class="col-xs-12 col-sm-6" %)
298 (((
299 (% class="box" %)
300 (((
301 **05. At the end, we stitch one more time to finish the circle.**
302 )))
303 )))
304 )))
305
306 = Tutorials, Tips & Ideas =
307
308 (% class="box infomessage" %)
309 (((
310 **Goal**: Explore the patterns to get familiar how these work or try to program some examples and change them however you like :)
311 )))
312
313 (% class="row" %)
314 (((
315 (% class="col-xs-12 col-sm-4" %)
316 (((
317 (% class="box" %)
318 (((
319 There are a lot more embroidery bricks to explore. Especially worth exploring is the** "zigzag stitch"**. It lets you stitch thicker lines because the needle jumps back and forth. Test it yourself!
320
321 (% data-widget="image" style="text-align:center" %)
322 [[image:9d-28.gif]]
323
324 [[Here>>doc:Education.Embroidery.Embroidery Bricks.WebHome]] is an explanation of every **embroidery brick**.
325 )))
326 )))
327
328 (% class="col-xs-12 col-sm-4" %)
329 (((
330 (% class="box" %)
331 (((
332 Walk your first steps with code'n'stitch:
333
334 {{video url="https://www.youtube.com/watch?v=4DQblrw8unY"/}}
335
336
337
338
339
340
341
342 Check out our [[Video Tutorials>>doc:Education.Embroidery.Video Tutorials.WebHome]]!
343 )))
344 )))
345
346 (% class="col-xs-12 col-sm-4" %)
347 (((
348 (% class="box" %)
349 (((
350 You can find many embroidery patterns in our wiki. [[Here>>doc:Education.Embroidery.WebHome]] you'll find a heart, harry potter or a spiral pattern. Or just download them as [[PDF>>attach:Code'n'Stitch_Tutorial-Cards_english.pdf]].
351 )))
352 )))
353 )))
354
355 = Designing my own super cool embroidery pattern =
356
357 (% class="box infomessage" %)
358 (((
359 **Goal: **Develop your own pattern and program it.
360 )))
361
362 (% class="row" %)
363 (((
364 (% class="col-xs-12 col-sm-6" %)
365 (((
366 (% class="box" %)
367 (((
368 **01. At first you'll need... an idea!**
369
370 Just think of simple patterns and shapes, maybe logos or your name.
371 )))
372 )))
373
374 (% class="col-xs-12 col-sm-6" %)
375 (((
376 (% class="box" %)
377 (((
378 **02. Fetch yourself graph paper or print this template: [[graph paper>>attach:graph-paper.pdf]]**
379 )))
380 )))
381 )))
382
383 (% class="row" %)
384 (((
385 (% class="col-xs-12 col-sm-6" %)
386 (((
387 (% class="box" %)
388 (((
389 **03. Transfer your idea to paper.**
390
391 This will help to shape your idea and will make completion easier. Here's an example:
392
393 (% style="text-align:center" %)
394 [[image:9d-26.png]]
395 )))
396 )))
397
398 (% class="col-xs-12 col-sm-6" %)
399 (((
400 (% class="box" %)
401 (((
402 **04. Implementation time! Split your pattern into several embroidery objects.**
403
404 At first think of easier patterns to not be disappointed because it turns out more difficult than expected.
405
406 This is how the implantation basically works:
407
408 * (((
409 start a running or a zigzag stitch
410 )))
411 * (((
412 move the needle
413 )))
414 * (((
415 point in another direction (use your crosshair!)
416 )))
417 * (((
418 and move again
419 )))
420 )))
421 )))
422 )))
423
424 (% class="row" %)
425 (((
426 (% class="col-xs-12 col-sm-6" %)
427 (((
428 (% class="box" %)
429 (((
430 **05. Congratulations.**
431
432 Congratulations on finishing this tutorial! Once you have completed this tutorial please go to  [[https:~~/~~/code.org/api/hour/finish>>url:https://code.org/api/hour/finish]] to get your certificate.
433 )))
434 )))
435 )))
436
437 (% class="box successmessage" %)
438 (((
439 **You will often start the program, check if it's good, adapt and start all over again. But that's how all programmers work ;)**
440 )))
441
442 = Make it durable: Sew up =
443
444 (% class="box infomessage" %)
445 (((
446 If the embroidery machine jumps, you have to sew up before and after every jump. Otherwise, the thread will become loose.
447
448 This happens, e.g. if you use a "place at"-brick and the current stitch was stopped.
449
450 [[Here>>doc:Education.Embroidery.Sew Up.WebHome]] is a tutorial on how to sew up.
451 )))
452
453 (% class="box warningmessage" %)
454 (((
455 **Attention: At the beginning and at the end of every object the machine sews up automatically!**
456 )))
457
458 = Preview & Export =
459
460 (% class="box infomessage" %)
461 (((
462 To see your pattern as a real embroidery pattern, you can download the [[Stitch Pro App>>url:https://play.google.com/store/apps/details?id=com.zenghsing.StitchPro&hl=de_AT]] in Google Play Store.
463 )))
464
465 (% class="row" %)
466 (((
467 (% class="col-xs-12 col-sm-6" %)
468 (((
469 (% class="box" %)
470 (((
471 Here is how you can start the preview:
472
473 (% style="text-align:center" %)
474 [[image:11.gif]]
475 )))
476 )))
477
478 (% class="col-xs-12 col-sm-6" %)
479 (((
480 (% class="box" %)
481 (((
482 And here is how you can save or send your file:
483
484 (% style="text-align:center" %)
485 [[image:10.gif]]
486 )))
487 )))
488 )))
489
490 = Solutions =
491
492 (% class="row" %)
493 (((
494 (% class="col-xs-12 col-sm-6" %)
495 (((
496 (% class="box" %)
497 (((
498 **Here is the solution for the square using a loop:**
499
500 (% style="text-align:center" %)
501 [[image:8.png||queryString="width=300&height=347"]]
502 )))
503 )))
504
505 (% class="col-xs-12 col-sm-6" %)
506 (((
507 (% class="box" %)
508 (((
509 **Here is the solution for the direction of the line:**
510
511 (% style="text-align:center" %)
512 [[image:9d-19.jpg||queryString="width=200&height=367" height="367" width="200"]]
513 )))
514 )))
515 )))
516
517 (% id="gtx-trans" style="position: absolute; left: 0px; top: 3511px;" %)
518 (((
519 (% class="gtx-trans-icon" %)
520 (((
521
522 )))
523 )))