Wiki source code of Create Your Own Design

Last modified by Michael Jagoutz on 2021/12/14 21:35
Show last authors
1 (% class="row" %)
2 (((
3 (% class="col-xs-12 col-sm-6" %)
4 (((
5 (% class="box infomessage" %)
6 (((
7 This page provides information on how to start coding embroidery designs.
8
9
10 If you want to **create your own embroidery designs** this is a **perfect way to start**.
11
12
13 **Follow the chapters step by step** to learn all the basics of how to program own designs.
14
15 Between the chapters there are two **challenges **to solve with enough helping information to manage it on your own.
16
17
18 **You can do it! **
19
20 ----
21
22 If you have not done so yet, download the Embroidery Designer from the Playstore.
23
24 [[[[image:GooglePlay.png||height="61" width="200"]]>>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 **Content:**
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. NEW PROJECT =
47
48
49 )))
50 )))
51
52 (% class="row" %)
53 (((
54 (% class="col-xs-12 col-sm-12" %)
55 (((
56 (% class="box" %)
57 (((
58 At first you have to create a new **empty project**. This is done by tapping at the plus button [[image:Plus sign.png||height="50" width="50"]] in the bottom right corner.
59
60 After entering a name and creating an empty project, you must choose the **portrait format**.
61
62
63 [[image:Empty Project and Name of Project.jpg||height="199" width="200"]] [[image:Orientation.jpg||height="123" width="200"]]
64
65
66 )))
67 )))
68 )))
69
70 (% class="row" %)
71 (((
72 (% class="col-xs-12 col-sm-12" %)
73 (((
74 = 1. OBJECTS =
75
76
77 )))
78 )))
79
80 (% class="row" %)
81 (((
82 (% class="col-xs-12 col-sm-12" %)
83 (((
84 (% class="box" %)
85 (((
86 Basically, every **continues line** of a design is an **object**.
87
88 For** each object** you can select a **new color** of thread, however this is done during the embroidery process.
89
90 [[image:2020_09_02_090151.png||height="236" width="300"]]
91
92
93
94
95 Here you can see an apple. You always should divide your design into geometric patterns. Each half of the apple is just a part of a geometric form, a circle. The stalk is just a triangle.
96
97 In this example there would be 2 objects. One for the apple and one for the stalk.
98
99
100 [[image:Puzzle.PNG||height="51" width="70"]] When starting to program a new part of your design you **create a new object**.
101
102
103 [[image:en_step_1 (1).png||height="391" width="300"]] [[image:en_step_2.png||height="257" width="240"]] [[image:step_3.png||width="300"]] [[image:en_step_3.png||height="198" width="300"]]
104
105 (% style="margin-left:auto; margin-right:auto; width:313px" %)
106 |(% style="width:310px" %)(% class="box successmessage" %)
107 (((
108 **These colorful circles represent the needle.**
109 )))
110
111 (% class="box warningmessage" style="float:left" %)
112 (((
113 **Information:**
114
115 Before and after every object the embroidery machine sews up automatically.
116 To get more information about sewing up, read the [[sew up section>>doc:||anchor="H10.SEWINGUP"]].
117 )))
118 )))
119 )))
120 )))
121
122 (% class="row" %)
123 (((
124 (% class="col-xs-12 col-sm-12" %)
125 (((
126 = 2. LINE =
127
128
129 )))
130 )))
131
132 (% class="row" %)
133 (((
134 (% class="col-xs-12 col-sm-12" %)
135 (((
136 (% class="box" %)
137 (((
138 In the script of your object [[image:en_step_2 (1).png||height="64" width="200"]] you are now able to **add bricks**.
139
140 You can find those bricks by **tapping** onto the **plus sign** [[image:plus_sign_blue.png||height="29" width="60"]] in the bottom left corner.
141
142
143 [[image:Puzzle.PNG||height="51" width="70"]]** Search **for the **given bricks below** to create your first line. Stick to the **color of the bricks**, all bricks are sorted by colour. Tap onto the brick you need to add it to your skript.
144
145 (% style="width:1118px" %)
146 |(% style="width:500px" %)(((
147 [[image:runningstitch.png||height="52" style="float:left" width="200"]]
148
149
150
151 [[image:move100steps.png||height="39" width="200"]]
152 )))|(% style="width:615px" %) (% class="box successmessage" %)
153 (((
154 **Hint:**
155
156 You can **adapt **this number of **steps **by tapping onto it. Play around with different numbers to change the length of the line.
157 )))
158
159 In the embroidery designer the length is given in steps, therefor it is good to know that **5 steps are 1mm** in original size.
160
161
162 [[image:Puzzle.PNG||height="51" width="70"]] Choose **different stitch types** to see how they look like.
163
164 (% style="width:1121px" %)
165 |(% style="width:500px" %)(((
166 [[image:runningstitch.png||height="52" width="200"]]
167
168 [[image:triplestitch.png||height="52" width="200"]]
169
170 [[image:zigzagstitch.png||height="57" width="200"]]
171 )))|(% style="width:618px" %) (% class="box errormessage" %)
172 (((
173 **Attention:**
174 \\Make sure to set the length of the running or triple stitch to a value between 5 and 10. The zigzag stitch should have a width between 5 and maximum 40. A width of 10 are approximately 2mm in reality.
175 )))
176
177 By tapping onto the play button [[image:image-20200908092612-1.png||height="31" width="80"]] in the bottom right corner, you can see what you have programmed so far.
178
179
180 )))
181 )))
182 )))
183
184 (% class="row" %)
185 (((
186 (% class="col-xs-12 col-sm-12" %)
187 (((
188 = 3. TURN RIGHT/LEFT =
189
190
191 )))
192 )))
193
194 (% class="row" %)
195 (((
196 (% class="col-xs-12 col-sm-12" %)
197 (((
198 (% class="box" %)
199 (((
200 To tell the embroidery machine in which **direction **it should stitch, there are additionally bricks to **turn right** respectively **left**.
201
202
203 [[image:turnleft.png||height="39" width="200"]] [[image:turnright.png||height="39" width="200"]]
204
205
206 [[image:Puzzle.PNG||height="51" width="70"]] Now try to **program a square**. Think about how a square is built of **lines **and **rotations by 90 degrees**. Choose a line of 100 steps for the beginning
207
208
209 (% style="width:1127px" %)
210 |(% style="width:500px" %)[[image:Square.png||height="200" width="200"]]|(% style="width:623px" %) (% class="box successmessage" %)
211 (((
212 **Hint:**
213 \\If you do not know how to solve this take a **short look** at the [[**solutions**>>doc:||anchor="HSolutionSquarewithoutloop"]].
214 )))
215
216 When you are ready, try to **change the size** of the square.
217
218
219 (% style="width:712px" %)
220 |(% style="width:709px" %)(% class="box successmessage" %)
221 (((
222 **Hint:**
223
224 Change the length of each line by adapting the steps of the [[image:move_steps.png||height="39" width="200"]]__ brick.__
225 )))
226 )))
227 )))
228 )))
229
230 (% class="row" %)
231 (((
232 (% class="col-xs-12 col-sm-12" %)
233 (((
234 = 4. COUNTING LOOPS =
235
236
237 )))
238 )))
239
240 (% class="row" %)
241 (((
242 (% class="col-xs-12 col-sm-12" %)
243 (((
244 (% class="box" %)
245 (((
246 As you now already know how to program a square, you can see how many bricks it would take to program your chosen design. Luckily there is a possibility to **simplify your code**.
247
248
249 Those simplifiers are called **counting loops**.
250
251
252 (% style="width:1123px" %)
253 |(% style="width:300px" %)(((
254 [[image:Loop.png||height="47" width="200"]]
255
256
257 [[image:End of loop.png||height="39" width="200"]]
258 )))|(% style="width:820px" %) (% class="box warningmessage" %)
259 (((
260 Note, that if you search for the repeat ~_~_ times brick the **end of loop brick is added automatically**.
261 )))
262
263 **Every brick** you set **between those two** orange bricks **is now repeated** ~_~__ times.
264
265
266 [[image:Puzzle.PNG||height="51" width="70"]] Now try to **simplify **the **code **for your **square **by adding these bricks and deleting those you don’t need anymore.
267
268
269 (% style="width:612px" %)
270 |(% style="width:609px" %)(% class="box successmessage" %)
271 (((
272 **Hint:**
273 \\If you do not know how to solve this take a **short look** at the [[**solutions**>>doc:||anchor="HSolutionSquarewithloop"]].
274 )))
275
276
277 )))
278 )))
279 )))
280
281 (% class="row" %)
282 (((
283 (% class="col-xs-12 col-sm-12" %)
284 (((
285 = 5. POINT IN DIRECTION =
286
287
288 )))
289 )))
290
291 (% class="row" %)
292 (((
293 (% class="col-xs-12 col-sm-12" %)
294 (((
295 (% class="box" %)
296 (((
297 As you may have noticed so far, the object always stitches to the right at first. As you have already learned, you can turn right and left with these two bricks.
298
299 [[image:turnleft.png||height="39" width="200"]] [[image:turnright.png||height="39" width="200"]]
300
301 These turns are relative changes, which means the **direction after the brick depends on the direction before you set the brick**.
302
303
304 Additionally, there is a brick to **set the direction absolutely**.
305
306 [[image:pointindirection_degrees.png||height="39" width="200"]]
307
308
309 Here you can see where which degree values point at:
310
311 [[image:Directions_1.0.png||height="267" width="300"]]
312
313
314 [[image:Puzzle.PNG||height="51" width="70"]] Now try to **set **the [[image:pointindirection_degrees.png||height="39" width="200"]] before your [[image:Loop.png||height="47" width="200"]] brick and change the degrees of the brick to 45°.
315
316
317 You have guessed right? Well, yes, now the object starts to stitch the first line in direction 45 degrees.
318
319
320 Now the square should look like this.
321
322 (% style="width:1067px" %)
323 |(% style="width:500px" %)[[image:Square_turn.png||alt="Square.png" height="200" width="200"]]|(% style="width:564px" %) (% class="box successmessage" %)
324 (((
325 **Hint:**
326 \\If you do not know how to solve this take a **short look** at the [[**solutions**>>doc:||anchor="HSolutionSquarewithloopanddirection45B0"]].
327 )))
328 )))
329 )))
330 )))
331
332 (% class="row" %)
333 (((
334 (% class="col-xs-12 col-sm-12" %)
335 (((
336 = 6. PLACE AT =
337
338
339 )))
340 )))
341
342 (% class="row" %)
343 (((
344 (% class="col-xs-12 col-sm-12" %)
345 (((
346 (% class="box" %)
347 (((
348 To set the position you want to start stitching at there is the [[image:placeat.png||height="52" width="200"]] brick.
349
350 The embroidery designer has a **coordinate system** with **origin in the middle** of your screen.
351
352
353 [[image:Koordinatensystem.png||height="351" width="300"]]
354
355 To place the object, you can use the coordinate system but there is another possibility too.
356
357 By **shortly tapping onto the brick** (everywhere but not directly onto the figures) you can **place the object visually**.
358
359
360 Make sure to **stop **the **stitch **using this brick [[image:image-20200908100405-1.png||height="39" width="200"]] **before **placing the object at a **new position**.
361
362 Otherwise the machine will stitch to this position automatically, which is what we DO NOT want most of the time.
363
364
365 (% style="width:612px" %)
366 |(% style="width:609px" %)(% class="box warningmessage" %)
367 (((
368 **Information:**
369
370 Additionally, take a look at the [[sew up chapter>>doc:||anchor="H10.SEWINGUP"]] to make your stitched design durable.
371 )))
372 )))
373 )))
374 )))
375
376 (% class="row" %)
377 (((
378 (% class="col-xs-12 col-sm-12" %)
379 (((
380 = CHALLENGE A - BUILD A HOUSE =
381
382
383 )))
384 )))
385
386 (% class="row" %)
387 (((
388 (% class="col-xs-12 col-sm-12" %)
389 (((
390 (% class="box" %)
391 (((
392 [[image:Puzzle.PNG||height="51" width="70"]] With your knowledge from the chapters 0 to 6 you should try now to program this design.
393
394 (% style="width:938px" %)
395 |[[image:2020_09_02_093303.png||height="256" width="200"]]|(% style="width:708px" %)(((
396 (% class="box successmessage" %)
397 (((
398 **Hint:**
399 \\For this design you only have to turn left or right by 90 degrees.
400 )))
401 )))
402
403 (% class="box warningmessage" %)
404 (((
405 **Make sure to**
406
407
408 * Create 3 new objects for each part of the house one (every part has another color)
409 * Only use those bricks, which got explained in the chapters 0 to 6.
410 * Try to use loops ([[chapter 4>>doc:||anchor="H4.COUNTINGLOOPS"]]) to code efficiently
411 )))
412
413 If you already know how to solve this, that's fine. **Try it on your own.**
414
415
416 If you aren't sure how to start here is a **little cheat sheet**:
417
418
419 (% class="box infomessage" %)
420 (((
421 There are 3 objects. One for the house itself, one for the roof and one for the door.
422 \\**The house:**
423 \\As you can see, the house itself is just a square. Look at the [[chapter 3)>>doc:||anchor="H3)TURNRIGHT/LEFT"]], if you don't know how to program this. Choose a line of 200 steps.
424 \\**The roof:**
425 \\If you look closely, the roof is simply half of a square. Just like your did before, program a square and then set the repetitions of the line to 2 instead of 4.
426 Additionally you have to set it to the right position [[image:placeat.png||height="52" width="200"]] and point to 45 degrees [[image:pointindirection_degrees.png||height="39" width="200"]] at first.
427 **The door:**
428 \\The door is something new, which we have not coded yet. Nevertheless it is not difficult. Just repeat the pattern...
429 \\//move some steps - turn 90 degrees - move some more steps - turn 90 degrees //
430 \\...two times.
431 Clearly, you have to set the door to the right position too [[image:placeat.png||height="52" width="200"]].
432 )))
433
434
435 (% class="box errormessage" %)
436 (((
437 If you **have got no idea** how to solve this there are three possibilities:
438
439
440 * Take another look at the sheets 0 to 6. There you can find every information you need to program this design.
441 * Take a look at the little cheat sheet. It provides information how to solve this challenge.
442 * Ask somebody who already made it, for example your teacher or classmates.
443
444 If you have still got no idea what you should do, take a **short look **at the [[**solutions **>>doc:||anchor="HSolutionChallengeA-Buildahouse"]]of the challenge, but mark that there are **many ways to solve this** and this is **just one of them**.
445 )))
446
447
448 You did it? Well, congratulations! If you are up to go further with programming embroidery designs we are very happy you like it!
449
450
451 Otherwise, if this challenge is enough for you, follow this link to get your certificate [[https:~~/~~/code.org/api/hour/finish>>url:https://code.org/api/hour/finish]].
452 )))
453 )))
454 )))
455
456 (% class="row" %)
457 (((
458 (% class="col-xs-12 col-sm-12" %)
459 (((
460 = 7. CIRCLES =
461
462
463 )))
464 )))
465
466 (% class="row" %)
467 (((
468 (% class="col-xs-12 col-sm-12" %)
469 (((
470 (% class="box" %)
471 (((
472 One of the most often needed geometrical figures is a circle.
473
474
475 As the stitching machine is only able to make lines, we have to **approach **a **circle by **coding a **regular polygon**. This **sounds more complicated than it is**.
476
477
478 To code a circle, we repeat the pattern
479
480 (% style="width:668px" %)
481 |(% style="width:295px" %)(((
482 [[image:move10steps.png||height="39" width="200"]]
483
484 [[image:turnleft.png||height="39" width="200"]]
485 )))|(% style="width:79px" %)(((
486
487
488 or
489 )))|(% style="width:291px" %)(((
490 [[image:move10steps.png||height="39" width="200"]]
491
492 [[image:turnright.png||height="39" width="200"]]
493 )))
494
495 so that we code a polygon out of little lines.
496
497
498 For a full circle we have to repeat for example 20 times: move 10 steps and turn 360/20 degrees.
499
500
501 Here is how this would look like:
502
503 (% style="width:965px" %)
504 |[[image:circleCode.png||height="150" width="200"]]|(% style="width:660px" %)(% class="box successmessage" %)
505 (((
506 **Consideration: **
507 \\As 360 degree would be a whole rotation, we also make a whole rotation if we turn 20 times a 20^^th^^ part of a whole rotation.
508 )))
509
510 [[image:Puzzle.PNG||height="51" width="70"]] Now try to **code **a **bigger circle**. Make sure **NOT to change** the value of the [[image:image-20200908104903-1.png||height="39" width="200"]] brick.
511
512 (% style="width:637px" %)
513 |(% style="width:634px" %)(% class="box successmessage" %)
514 (((
515 **Hint:**
516 \\To vary the size of the circle we vary the value 20 at both positions. 
517 \\[[image:repeat_marked.png||height="46" width="200"]] [[image:turn_marked.png||height="40" width="200"]]
518 )))
519
520
521 )))
522 )))
523 )))
524
525 (% class="row" %)
526 (((
527 (% class="col-xs-12 col-sm-12" %)
528 (((
529 = 8. ARCS =
530
531
532 )))
533 )))
534
535 (% class="row" %)
536 (((
537 (% class="col-xs-12 col-sm-12" %)
538 (((
539 (% class="box" %)
540 (((
541 To code arcs, you have to understand that **every arc** is just a **part of a circle**.
542
543
544 [[image:Arcs.PNG||height="194" width="250"]]
545
546
547 So, the code for an arc looks nearly the same as the code for a circle, you just **vary **the **repetitions**.
548
549 If you want a **semicircle **you just **repeat **the move/turn pattern **half **as many **times**.
550
551
552 Here is how this would look like:
553
554
555
556 (% style="width:899px" %)
557 |(% style="width:347px" %)[[image:image-20200908105552-1.png||height="152" width="200"]]|(% style="width:549px" %)(% class="box successmessage" %)
558 (((
559 **Consideration: **
560 \\If you repeat a 20^^th^^ part of 360 (a whole rotation) just 10 times you get a semicircle.
561 )))
562
563 [[image:Puzzle.PNG||height="51" width="70"]] Now try to code a quarter circle.
564
565 Have you guessed right? Yeah, surely you must repeat the code 5 times, as 5 is a quarter of 20.
566
567
568
569 In truth during programming you **play with these two values, **[[image:turn_marked.png||height="40" width="200"]] and [[image:image-20200908105803-3.png||height="46" width="200"]] , all the time.
570
571
572 If you want **narrow arches** you choose a **smaller value here** [[image:turn_marked.png||height="40" width="200"]]
573
574 and the other way around if you want a **wide arch** you choose a** bigger value**. Those numbers vary between 8 and 360.
575
576
577
578 To **lengthen** your **arch**, you **vary the repetitions**. [[image:image-20200908105803-3.png||height="46" width="200"]]
579
580 (% style="width:702px" %)
581 |(% style="width:699px" %)(% class="box successmessage" %)
582 (((
583 **Consideration:**
584 \\Keep in mind that half of the repetitions (compared to the whole circle) are of course a half circle.
585 Never repeat more than a whole circle!
586 )))
587 )))
588 )))
589 )))
590
591 (% class="row" %)
592 (((
593 (% class="col-xs-12 col-sm-12" %)
594 (((
595 = 9. BROADCASTS =
596
597
598 )))
599 )))
600
601 (% class="row" %)
602 (((
603 (% class="col-xs-12 col-sm-12" %)
604 (((
605 (% class="box" %)
606 (((
607 With the help of broadcasts, you can** write code once** and **use it several times**.
608
609 For example, to program this paw you code one of the little circles once and then just set it 4 times to a different position.
610
611
612 [[image:paw.png||height="235" width="250"]]
613
614 Use this brick [[image:when_you_receive.png||height="62" width="200"]] for the code you want to use several times. Write the code right below this brick.
615
616 To call the code use this brick [[image:broadcast_and_wait.png||height="57" width="200"]] . Make sure to really choose the **"Broadcast AND WAIT"** brick!
617
618
619 By tapping onto the arrow at the rigth side you can name your broadcast.
620
621
622 To understand better how this works here is the example for the paw:
623
624
625 [[image:paw_code_3.png||height="128" width="200"]]
626
627
628 (% style="width:872px" %)
629 |(% style="width:439px" %)Code for the small circles|(% style="width:429px" %)Code for the big circle
630 |(% style="width:439px" %)[[image:paw_code_1.png||height="745" width="200"]]|(% style="width:429px" %)[[image:paw_code_2.png||height="237" width="200"]]
631
632 (% style="width:847px" %)
633 |(% style="width:844px" %)(% class="box warningmessage" %)
634 (((
635 You see that when the scene starts the needle is placed first, then one small circle is called. After that we set the needle to a new position and call the small circle again and so on. The small circle is coded once and used several times.
636 )))
637 )))
638 )))
639 )))
640
641 (% class="row" %)
642 (((
643 (% class="col-xs-12 col-sm-12" %)
644 (((
645 = 10. SEWING UP =
646
647
648 )))
649 )))
650
651 (% class="row" %)
652 (((
653 (% class="col-xs-12 col-sm-12" %)
654 (((
655 (% class="box" %)
656 (((
657 To **make **your embroidery** design durable** you have to **sew up** every time you change position without stitching there.
658
659
660 Mark, that **before and after every object** the embroidery machine **sews up automatically**. So you just have to code the sewing up if you change position within an object.
661
662 If you want to **change the position within an object**, call the **broadcast “sew up”** before and after changing position.
663
664 Therefor you have to code the broadcast first.
665
666
667 The broadcast should look like this:
668
669 (% style="width:1067px" %)
670 |[[image:en_step_1.png||height="394" width="200"]]|(% style="width:727px" %)(((
671 (% class="box warningmessage" %)
672 (((
673 **Information: **
674 \\It is important to sew up because otherwise the thread would unravel.
675 )))
676
677 (((
678
679
680 (% class="box successmessage" %)
681 (((
682 **Hint:**
683 \\It is easy to circumvent this additional code cleverly by creating a new object for every part of your design which is not connected.
684 )))
685 )))
686 )))
687
688 This is how the code of the paw changes, if you make it durable:
689
690 You see that before and after every time the position within the object is changed, we sew up.
691
692
693 [[image:paw_with_sew_up.png||height="741" width="200"]]
694
695
696 )))
697 )))
698 )))
699
700 (% class="row" %)
701 (((
702 (% class="col-xs-12 col-sm-12" %)
703 (((
704 = CHALLENGE B - ICE CREAM =
705
706
707 )))
708 )))
709
710 (% class="row" %)
711 (((
712 (% class="col-xs-12 col-sm-12" %)
713 (((
714 (% class="box" %)
715 (((
716 [[image:Puzzle.PNG||height="51" width="70"]] With your knowledge from the chapters 0 to 10 you should try now to program this design.
717
718
719 [[image:iceCream.png||height="360" width="200"]]
720
721
722 (% class="box warningmessage" %)
723 (((
724 **Make sure to**
725
726
727 * Create **2** new **objects**, one for the icecream cone and one for the ice cream balls.
728 * Only use those bricks, which got explained in the chapters 0 to 10.
729 * Try to **use loops** ([[chapter 4>>doc:||anchor="H4.COUNTINGLOOPS"]]) as well as **broadcasts **([[chapter 9>>doc:||anchor="H9.BROADCASTS"]]) to code efficiently
730 * **Sew up** every time you** change position within an object** ([[chapter 10>>doc:||anchor="H10.SEWINGUP"]]).
731 )))
732
733 If you already know how to solve this, that's fine. Try it on your own.
734
735
736 If you aren't sure how to start here is a **little cheat sheet**:
737
738 (% class="box infomessage" %)
739 (((
740 There are 2 objects, one for the icecream cone and one for the ice cream balls.
741 \\**Cone:**
742 \\Start at the left corner. Move some steps to code the first line. Now you have to turn right and move some steps again. If you do not know which value to choose for the degrees try it out! Go on like this to complete the cone. 
743 \\**Balls:**
744 \\For the balls it is clever to use broadcasting ([[chapter 9>>doc:||anchor="H9.BROADCASTS"]]). Code a broadcast, which you call small circle for example. The broadcast should include the code for a small circle ([[chapter 7>>doc:||anchor="H7.CIRCLES"]]). Don't forget to stop the stitch at the end. After the brick "when scene starts" alternately set the position and call the broadcast. To make your design durable, sew up before and after every change of position ([[chapter 10>>doc:||anchor="H10.SEWINGUP"]]).
745 )))
746
747
748 (% class="box errormessage" %)
749 (((
750 If you **have got no idea** how to solve this there are three possibilities:
751
752
753 * Take another look at the **sheets 0 to 10**. There you can find every information you need to program this design.
754 * **Ask somebody** who already made it, for example your teacher or classmates.
755
756 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**.
757 )))
758
759
760 You did it? Well, congratulations! If you are up to go further with programming embroidery designs we are very happy you like it!
761
762
763 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]].
764 )))
765 )))
766 )))
767
768 (% class="row" %)
769 (((
770 (% class="col-xs-12 col-sm-12" %)
771 (((
772 = 11. HOW TO - MY OWN DESIGN =
773
774
775 )))
776 )))
777
778 (% class="row" %)
779 (((
780 (% class="col-xs-12 col-sm-12" %)
781 (((
782 (% class="box" %)
783 (((
784 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**.
785
786
787 After drawing your template,** think of the geometrical parts**, your design is built of. Those could be lines, circles, arcs, polygons, …
788
789 **Mark **the different **parts **on your final draft so that you can look them up while programming.
790
791
792 **Time to start programming!**
793
794
795 At first, you have to **program **a **frame **so that your design won’t be too big for your embroidery machine.
796
797
798 **Create a new object**. The object you choose should be **something round** like a circle. You can find some objects in the media library.
799
800
801 Now **program this code** in the script of this object.
802
803 Look up the size of your embroidery hoop and choose the correct template.
804
805
806 (% style="width:1121px" %)
807 |(% style="width:318px" %)Code for 10 x 10 cm embroidery hoop|(% style="width:337px" %)(((
808 Code for 20 x 20 cm embroidery hoop
809 )))|(% style="width:518px" %)
810 |(% style="width:318px" %)[[image:template_frame_code_10x10.png||height="635" width="200"]]|(% style="width:337px" %)[[image:template_frame_code_20x20.png||height="629" width="200"]]|(% style="width:518px" %)(% class="box successmessage" %)
811 (((
812 **Hint: **
813 \\Make sure to **watch out for the minus signs** in the code. Otherwise it won’t work.
814 )))
815
816 (% style="width:695px" %)
817 |(% style="width:692px" %)(% class="box warningmessage" %)
818 (((
819 Information:
820 \\This hoop won't be stitched, it is just to orientate oneself while programming.
821 )))
822
823 Now to **start your design**, create a new project and start with creating the first object for one part of your design.
824
825
826 **A pattern, which helps when programming your design:**
827
828 (% style="width:1300px" %)
829 |(% style="width:110px" %)[[image:arrowSmall.PNG||height="100" width="23"]]|(% style="width:344px" %)[[image:placeat.png||height="52" width="200"]]|(% style="width:737px" %)Place the needle at some point you want to start|(% colspan="1" rowspan="5" style="width:154px" %)[[image:arrowBig.PNG]]
830 |(% style="width:110px" %)[[image:arrowSmall.PNG||height="100" width="23"]]|(% style="width:344px" %)[[image:pointindirection_degrees.png||height="39" width="200"]]|(% style="width:737px" %)Point in the direction you want to stitch first
831 |(% style="width:110px" %)[[image:arrowMedium.PNG||height="262" width="23"]]|(% style="width:344px" %)(((
832 [[image:runningstitch.png||height="52" width="200"]]
833
834 [[image:triplestitch.png||height="52" width="200"]]
835
836 [[image:zigzagstitch.png||height="57" width="200"]]
837 )))|(% style="width:737px" %)Choose a stitch and start it.
838 |(% style="width:110px" %)[[image:arrowSmall.PNG||height="100" width="23"]]|(% style="width:344px" %) |(% style="width:737px" %)Then move some steps or make a circle or arc, that depends on your pattern.
839 |(% style="width:110px" %) |(% style="width:344px" %)[[image:Education.CodedEmbroidery.Lesson Plan.WebHome@stopstitch.png||width="200"]]|(% style="width:737px" %)(((
840 You reached the end of the part?
841
842 Stop the stitch.
843
844 * If you are at the end of this object, then create a new object for the next part.
845 * 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.
846 )))
847 |(% style="width:110px" %) |(% colspan="2" style="width:1050px" %)**Follow the pattern until you finished your design.**|(% style="width:154px" %)
848 )))
849 )))
850 )))
851
852 (% class="row" %)
853 (((
854 (% class="col-xs-12 col-sm-12" %)
855 (((
856 (% class="box successmessage" %)
857 (((
858 **You finished a design?** Yeah, that's great. It would be wonderful, if you could **upload your project to our Catrobat Community**!
859
860
861 **Sharing **your project **helps us collecting** more and more** great designs**.
862
863 Everybody should be able to **admire **or even **download **and **stitch your design**!
864
865 ----
866
867 **How does uploading work?**
868
869
870 * **Open **your **project **and tap onto the** 3 points** in the upper right corner.
871 * Choose "**upload**" and **create an account**, if you have not done so yet.
872 * Then **choose **a **name**, a **description **and the **categories **it belongs to.
873
874 **And that's it!**
875
876 ----
877
878 **As you got so far we are very happy to see you like programming designs just like us!**
879
880
881 **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]].
882 )))
883 )))
884 )))
885
886 (% class="row" %)
887 (((
888 (% class="col-xs-12 col-sm-12" %)
889 (((
890 = SOLUTIONS =
891
892
893 )))
894 )))
895
896 (% class="row" %)
897 (((
898 (% class="col-xs-12 col-sm-12" %)
899 (((
900 (% class="box" %)
901 (((
902 ----
903
904 == Solution Square without loop ==
905
906 [[image:Square_without_loop.png||height="628" width="300"]]
907
908 ----
909
910 == Solution Square with loop ==
911
912 [[image:square_code.png||height="349" width="300"]]
913
914 ----
915
916 == Solution Square with loop and direction 45° ==
917
918 [[image:square_turn_code.png||height="405" width="300"]]
919
920 ----
921
922 == Solution Challenge A - Build a house ==
923
924 There are three objects:
925
926 [[image:house_code_1.png||height="269" width="300"]]
927
928
929 The code in the script of each object could look like this:
930
931 |(((
932 [[image:house_code_2.png||height="75" width="300"]]
933
934
935 )))|[[image:house_code_3.png||height="78" width="300"]]|[[image:house_code_4.png||height="76" width="300"]]
936 |[[image:house_code_5.png||height="489" width="300"]]|[[image:house_code_6.png||height="547" width="300"]]|[[image:house_code_7.png||height="604" width="300"]]
937
938 ----
939
940 == Solution Challenge B - Ice Cream ==
941
942 There are two objects:
943
944 [[image:ice_cream_code_1.png||height="191" width="300"]]
945
946
947 The code in the script of each object could look like this:
948
949 |[[image:ice_cream_code_2.png||height="74" width="300"]]|[[image:ice_cream_code_3.png||height="77" width="300"]]
950 |[[image:ice_cream_code_4.1.png||alt="ice_cream_code_4.png" width="300"]]|[[image:ice_cream_code_5.png||height="548" width="300"]]
951
952 ----
953
954
955 )))
956 )))
957 )))