Wiki source code of LetsStitchStepByStepTutorial
Last modified by dvd48 on 2020/08/29 09:55
Show last authors
author | version | line-number | content |
---|---|---|---|
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 | ))) |